@refinitiv-ui/elements 6.2.1 → 6.3.0

package/CHANGELOG.md

@@ -3,8 +3,40 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.3.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@6.2.2...@refinitiv-ui/elements@6.3.0) (2022-10-26)
+
+
+### Bug Fixes
+
+* **tree:** update parent item in values setter ([#496](https://github.com/Refinitiv/refinitiv-ui/issues/496)) ([0409fd4](https://github.com/Refinitiv/refinitiv-ui/commit/0409fd485deb74d311c06d4169dc64795e288ae8))
+
+
+### Features
+
+* **utils:** add util color `readableColor` ([#487](https://github.com/Refinitiv/refinitiv-ui/issues/487)) ([42b3ea2](https://github.com/Refinitiv/refinitiv-ui/commit/42b3ea26c2e810cf285ccaab56fd0e5e4d3fdc23))
+
+
+
+
+
+## [6.2.2](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@6.2.1...@refinitiv-ui/elements@6.2.2) (2022-10-10)
+
+
+### Bug Fixes
+
+* **dialog:** the cancel event does not fire ([ce55aac](https://github.com/Refinitiv/refinitiv-ui/commit/ce55aaca5d070ad1be2de68b66ac77d683b06acf))
+* **number-field:** fix step=any to support integer and decimal number ([#485](https://github.com/Refinitiv/refinitiv-ui/issues/485)) ([13bbb34](https://github.com/Refinitiv/refinitiv-ui/commit/13bbb34b3ed9f870acc66169cea8103e480eea6a))
+* **tab:** trigger resize observer when label changes to make tab bar show scroll button correctly ([#480](https://github.com/Refinitiv/refinitiv-ui/issues/480)) ([93e384b](https://github.com/Refinitiv/refinitiv-ui/commit/93e384b845f87f0f3e074d4672065e7305a85c26))
+
+
+
+
+
 ## [6.2.1](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@6.2.0...@refinitiv-ui/elements@6.2.1) (2022-09-26)
 
+* Update all formatjs dependencies to support typescript 4.8 ([#459](https://github.com/Refinitiv/refinitiv-ui/pull/454)) ([5337b97](https://github.com/Refinitiv/refinitiv-ui/commit/5337b97dc6958f84b36bdbffdea6dfbbc5203596))
+* Upgrade typescript to 4.8.3 ([#459](https://github.com/Refinitiv/refinitiv-ui/pull/454)) ([5337b97](https://github.com/Refinitiv/refinitiv-ui/commit/5337b97dc6958f84b36bdbffdea6dfbbc5203596))
+
 
 ### Bug Fixes
 

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

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

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

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

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

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

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

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

package/lib/color-dialog/elements/palettes.js

@@ -89,11 +89,6 @@ export class Palettes extends BasicElement {
      */
     onTouchmove(event) {
         const touchOffsets = event.changedTouches[0];
-        // TODO: it is a bug of TypeScript@4.4 remove ts-ignore once it is fixed
-        // https://github.com/microsoft/TypeScript/issues/45047
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-call
         const realTarget = this.shadowRoot?.elementFromPoint(touchOffsets.clientX, touchOffsets.clientY);
         this.updateValue(realTarget);
     }

package/lib/dialog/custom-elements.json

@@ -82,7 +82,7 @@
         },
         {
           "name": "noCancelOnOutsideClick",
-          "description": "Prevents dialog to close when user clicks outside the dialog.",
+          "description": "Close dialog when user clicked outside the dialog",
           "type": "boolean",
           "default": "true"
         },

package/lib/dialog/custom-elements.md

@@ -20,7 +20,7 @@ and also allows custom footers and control buttons to be used.
 | `fullScreen`             | `full-screen`          | `boolean`             | false   | Set dialog to full screen                        |
 | `header`                 | `header`               | `string \| null`      | null    | Set Header/Title of the dialog                   |
 | `noCancelOnEscKey`       | `no-cancel-on-esc-key` | `boolean`             | false   | Prevents dialog to close when user presses ESC key |
-| `noCancelOnOutsideClick` |                        | `boolean`             | true    | Prevents dialog to close when user clicks outside the dialog. |
+| `noCancelOnOutsideClick` |                        | `boolean`             | true    | Close dialog when user clicked outside the dialog |
 | `opened`                 | `opened`               | `boolean`             | false   | Set dialog to open                               |
 | `positionTarget`         | `position-target`      | `string \| undefined` |         | Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`. |
 | `x`                      | `x`                    | `string \| undefined` |         | Set a specific x coordinate of dialog            |

package/lib/dialog/index.d.ts

@@ -83,6 +83,13 @@ export declare class Dialog extends Overlay {
      * Footer Element
      */
     private footerElement;
+    /**
+     * Flag to say whether the dialog has been confirmed and closed.
+     */
+    protected confirmed: boolean;
+    /**
+     * Close dialog when user clicked outside the dialog
+     */
     noCancelOnOutsideClick: boolean;
     /**
      * @ignore
@@ -161,6 +168,14 @@ export declare class Dialog extends Overlay {
      * @returns {void}
      */
     protected defaultCancel(): void;
+    /**
+     * Make sure that confirm/cancel events are fired appropriately
+     * All internal opened set events can be stoppable externally
+     * Use this instead of setting opened directly
+     * @param opened True if opened
+     * @returns {void}
+     */
+    protected setOpened(opened: boolean): void;
     /**
      * Update draggable behavior looking to properties draggable and opened
      * @returns {void}

package/lib/dialog/index.js

@@ -59,6 +59,13 @@ let Dialog = class Dialog extends Overlay {
          * Should the dialog be draggable
          */
         this.draggable = false;
+        /**
+         * Flag to say whether the dialog has been confirmed and closed.
+         */
+        this.confirmed = false;
+        /**
+         * Close dialog when user clicked outside the dialog
+         */
         this.noCancelOnOutsideClick = true;
         /**
          * @ignore
@@ -239,18 +246,32 @@ let Dialog = class Dialog extends Overlay {
      * @returns {void}
      */
     defaultConfirm() {
-        if (this.fireCancelOrConfirmEvent(true)) {
-            this.setOpened(false);
-        }
+        this.confirmed = true;
+        this.setOpened(false);
     }
     /**
      * Default handler for cancel click
      * @returns {void}
      */
     defaultCancel() {
-        if (this.fireCancelOrConfirmEvent(false)) {
-            this.setOpened(false);
+        this.confirmed = false;
+        this.setOpened(false);
+    }
+    /**
+     * Make sure that confirm/cancel events are fired appropriately
+     * All internal opened set events can be stoppable externally
+     * Use this instead of setting opened directly
+     * @param opened True if opened
+     * @returns {void}
+     */
+    setOpened(opened) {
+        if (!opened) {
+            // if default is prevented, do not proceed to closed
+            if (!this.fireCancelOrConfirmEvent(this.confirmed)) {
+                return;
+            }
         }
+        super.setOpened(opened);
     }
     /**
      * Update draggable behavior looking to properties draggable and opened

package/lib/list/elements/list.d.ts

@@ -1,5 +1,5 @@
 import { JSXInterface } from '../../jsx';
-import { ControlElement, CSSResultGroup, PropertyValues, TapEvent, TemplateResult } from '@refinitiv-ui/core';
+import { ControlElement, CSSResultGroup, PropertyValues, TapEvent, TemplateResult, WarningNotice } from '@refinitiv-ui/core';
 import { CollectionComposer, DataItem } from '@refinitiv-ui/utils/collection.js';
 import type { ItemData } from '../../item';
 import type { ListData } from '../helpers/types';
@@ -12,6 +12,7 @@ declare enum Direction {
     UP = -1,
     DOWN = 1
 }
+export declare const valueFormatWarning: WarningNotice;
 /**
  * Provides listing and immutable selection
  * @fires value-changed - Dispatched when value changes
@@ -84,7 +85,6 @@ export declare class List<T extends DataItem = ItemData> extends ControlElement
      * selected item values
      * @type {string[]}
      * @default []
-     * @readonly
      */
     get values(): string[];
     set values(values: string[]);

package/lib/list/elements/list.js

@@ -15,7 +15,7 @@ var Direction;
     Direction[Direction["UP"] = -1] = "UP";
     Direction[Direction["DOWN"] = 1] = "DOWN";
 })(Direction || (Direction = {}));
-const valueFormatWarning = new WarningNotice('The specified \'values\' format does not conform to the required format.');
+export const valueFormatWarning = new WarningNotice('The specified \'values\' format does not conform to the required format.');
 /**
  * Provides listing and immutable selection
  * @fires value-changed - Dispatched when value changes
@@ -129,7 +129,6 @@ let List = class List extends ControlElement {
      * selected item values
      * @type {string[]}
      * @default []
-     * @readonly
      */
     get values() {
         return this.queryItemsByPropertyValue('selected', true)

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

@@ -1,2 +1,2 @@
 
-elf.customStyles.define('ef-loader', ':host{--parts:bar,shape shape-1,shape shape-2,shape shape-3,bar bar-1,bar bar-2,box box-1,box box-2,box box-3,shape shape-1 flash flash-1,shape shape-2 flash flash-2,shape shape-3 flash flash-3;position:absolute;top:0;right:0;bottom:0;left:0}:host [part=wrapper]{font-size:32px;width:2.75em;height:1em;color:#404040;position:absolute;top:calc(50% - .5em);left:calc(50% - 1.375em);display:block}:host [part~=shape]{color:grey;border:1px solid;width:.5em;height:.5em;transform:rotate(45deg);position:absolute;top:50%;margin:calc(-.25em - 1px)}:host [part~=shape-1]{left:17.67766953%;-webkit-animation:1s linear infinite alternate shape-1;animation:1s linear infinite alternate shape-1}:host [part~=shape-2]{left:50%;-webkit-animation:.5s linear infinite alternate shape-2;animation:.5s linear infinite alternate shape-2}:host [part~=shape-3]{right:17.67766953%;-webkit-animation:1s linear infinite alternate shape-3;animation:1s linear infinite alternate shape-3}:host [part~=flash]{color:#6678ff;box-sizing:border-box;outline:currentColor solid 2px;margin:-.25em}:host [part~=flash-1]{-webkit-animation:1s linear infinite alternate flash-1;animation:1s linear infinite alternate flash-1}:host [part~=flash-2]{-webkit-animation:.5s linear infinite alternate flash-2;animation:.5s linear infinite alternate flash-2}:host [part~=flash-3]{-webkit-animation:1s linear infinite alternate flash-3;animation:1s linear infinite alternate flash-3}:host [part~=box]{position:absolute;border:1px solid;margin:calc(-1em / 32 - 1px);width:calc(1em / 16);height:calc(1em / 16);top:50%}:host [part~=box-1]{left:17.67766953%;-webkit-animation:1s linear infinite alternate box-1;animation:1s linear infinite alternate box-1}:host [part~=box-2]{left:50%;-webkit-animation:.5s linear infinite alternate box-2;animation:.5s linear infinite alternate box-2}:host [part~=box-3]{right:17.67766953%;-webkit-animation:1s linear infinite alternate box-3;animation:1s linear infinite alternate box-3}:host [part~=bar]{position:absolute;top:50%;left:17.67766953%;right:17.67766953%;height:2px;margin-top:-1px;background-color:currentColor}:host [part~=bar-1]{left:17.67766953%;right:50%;background-color:#6678ff;-webkit-animation:1s linear infinite alternate bar-1;animation:1s linear infinite alternate bar-1}:host [part~=bar-2]{right:17.67766953%;left:50%;background-color:#6678ff;-webkit-animation:1s linear infinite alternate bar-2;animation:1s linear infinite alternate bar-2}@-webkit-keyframes shape-1{0%,10%{opacity:0}100%,25%{opacity:1}}@keyframes shape-1{0%,10%{opacity:0}100%,25%{opacity:1}}@-webkit-keyframes shape-2{0%,50%{opacity:1}100%,80%{opacity:0}}@keyframes shape-2{0%,50%{opacity:1}100%,80%{opacity:0}}@-webkit-keyframes shape-3{0%,75%{opacity:1}100%,90%{opacity:0}}@keyframes shape-3{0%,75%{opacity:1}100%,90%{opacity:0}}@-webkit-keyframes flash-1{0%{opacity:1}100%,25%{opacity:0}}@keyframes flash-1{0%{opacity:1}100%,25%{opacity:0}}@-webkit-keyframes flash-2{0%,50%{opacity:0}100%{opacity:1}}@keyframes flash-2{0%,50%{opacity:0}100%{opacity:1}}@-webkit-keyframes flash-3{0%,75%{opacity:0}100%{opacity:1}}@keyframes flash-3{0%,75%{opacity:0}100%{opacity:1}}@-webkit-keyframes box-1{0%,20%{background-color:#ccc;border-color:transparent}100%,25%{background-color:#0d0d0d;border-color:inherit}}@keyframes box-1{0%,20%{background-color:#ccc;border-color:transparent}100%,25%{background-color:#0d0d0d;border-color:inherit}}@-webkit-keyframes box-2{0%,50%{background-color:#0d0d0d;border-color:inherit}100%,60%{background-color:#ccc;border-color:transparent}}@keyframes box-2{0%,50%{background-color:#0d0d0d;border-color:inherit}100%,60%{background-color:#ccc;border-color:transparent}}@-webkit-keyframes box-3{0%,75%{background-color:#0d0d0d;border-color:inherit}100%,80%{background-color:#ccc;border-color:transparent}}@keyframes box-3{0%,75%{background-color:#0d0d0d;border-color:inherit}100%,80%{background-color:#ccc;border-color:transparent}}@-webkit-keyframes bar-1{0%,5%{transform:scaleX(0);transform-origin:left center}24%{transform:scaleX(1);transform-origin:left center}26%{transform:scaleX(1);transform-origin:right center}100%,45%{transform:scaleX(0);transform-origin:right center}}@keyframes bar-1{0%,5%{transform:scaleX(0);transform-origin:left center}24%{transform:scaleX(1);transform-origin:left center}26%{transform:scaleX(1);transform-origin:right center}100%,45%{transform:scaleX(0);transform-origin:right center}}@-webkit-keyframes bar-2{0%,55%{transform:scaleX(0);transform-origin:left center}74%{transform:scaleX(1);transform-origin:left center}76%{transform:scaleX(1);transform-origin:right center}100%,95%{transform:scaleX(0);transform-origin:right center}}@keyframes bar-2{0%,55%{transform:scaleX(0);transform-origin:left center}74%{transform:scaleX(1);transform-origin:left center}76%{transform:scaleX(1);transform-origin:right center}100%,95%{transform:scaleX(0);transform-origin:right center}}');
+elf.customStyles.define('ef-loader', ':host{--parts:bar,shape shape-1,shape shape-2,shape shape-3,bar bar-1,bar bar-2,box box-1,box box-2,box box-3,shape shape-1 flash flash-1,shape shape-2 flash flash-2,shape shape-3 flash flash-3;position:absolute;top:0;right:0;bottom:0;left:0}:host [part=wrapper]{font-size:32px;width:2.75em;height:1em;color:#404040;position:absolute;top:calc(50% - .5em);left:calc(50% - 1.375em);display:block}:host [part~=shape]{color:grey;border:1px solid;width:.5em;height:.5em;transform:rotate(45deg);position:absolute;top:50%;margin:calc(-.25em - 1px)}:host [part~=shape-1]{left:17.67766953%;animation:1s linear infinite alternate shape-1}:host [part~=shape-2]{left:50%;animation:.5s linear infinite alternate shape-2}:host [part~=shape-3]{right:17.67766953%;animation:1s linear infinite alternate shape-3}:host [part~=flash]{color:#6678ff;box-sizing:border-box;outline:currentColor solid 2px;margin:-.25em}:host [part~=flash-1]{animation:1s linear infinite alternate flash-1}:host [part~=flash-2]{animation:.5s linear infinite alternate flash-2}:host [part~=flash-3]{animation:1s linear infinite alternate flash-3}:host [part~=box]{position:absolute;border:1px solid;margin:calc(-1em / 32 - 1px);width:calc(1em / 16);height:calc(1em / 16);top:50%}:host [part~=box-1]{left:17.67766953%;animation:1s linear infinite alternate box-1}:host [part~=box-2]{left:50%;animation:.5s linear infinite alternate box-2}:host [part~=box-3]{right:17.67766953%;animation:1s linear infinite alternate box-3}:host [part~=bar]{position:absolute;top:50%;left:17.67766953%;right:17.67766953%;height:2px;margin-top:-1px;background-color:currentColor}:host [part~=bar-1]{left:17.67766953%;right:50%;background-color:#6678ff;animation:1s linear infinite alternate bar-1}:host [part~=bar-2]{right:17.67766953%;left:50%;background-color:#6678ff;animation:1s linear infinite alternate bar-2}@keyframes shape-1{0%,10%{opacity:0}100%,25%{opacity:1}}@keyframes shape-2{0%,50%{opacity:1}100%,80%{opacity:0}}@keyframes shape-3{0%,75%{opacity:1}100%,90%{opacity:0}}@keyframes flash-1{0%{opacity:1}100%,25%{opacity:0}}@keyframes flash-2{0%,50%{opacity:0}100%{opacity:1}}@keyframes flash-3{0%,75%{opacity:0}100%{opacity:1}}@keyframes box-1{0%,20%{background-color:#ccc;border-color:transparent}100%,25%{background-color:#0d0d0d;border-color:inherit}}@keyframes box-2{0%,50%{background-color:#0d0d0d;border-color:inherit}100%,60%{background-color:#ccc;border-color:transparent}}@keyframes box-3{0%,75%{background-color:#0d0d0d;border-color:inherit}100%,80%{background-color:#ccc;border-color:transparent}}@keyframes bar-1{0%,5%{transform:scaleX(0);transform-origin:left center}24%{transform:scaleX(1);transform-origin:left center}26%{transform:scaleX(1);transform-origin:right center}100%,45%{transform:scaleX(0);transform-origin:right center}}@keyframes bar-2{0%,55%{transform:scaleX(0);transform-origin:left center}74%{transform:scaleX(1);transform-origin:left center}76%{transform:scaleX(1);transform-origin:right center}100%,95%{transform:scaleX(0);transform-origin:right center}}');

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

@@ -1,2 +1,2 @@
 
-elf.customStyles.define('ef-loader', ':host{--parts:bar,shape shape-1,shape shape-2,shape shape-3,bar bar-1,bar bar-2,box box-1,box box-2,box box-3,shape shape-1 flash flash-1,shape shape-2 flash flash-2,shape shape-3 flash flash-3;position:absolute;top:0;right:0;bottom:0;left:0}:host [part=wrapper]{font-size:32px;width:2.75em;height:1em;color:#d9d9d9;position:absolute;top:calc(50% - .5em);left:calc(50% - 1.375em);display:block}:host [part~=shape]{color:#ccc;border:1px solid;width:.5em;height:.5em;transform:rotate(45deg);position:absolute;top:50%;margin:calc(-.25em - 1px)}:host [part~=shape-1]{left:17.67766953%;-webkit-animation:1s linear infinite alternate shape-1;animation:1s linear infinite alternate shape-1}:host [part~=shape-2]{left:50%;-webkit-animation:.5s linear infinite alternate shape-2;animation:.5s linear infinite alternate shape-2}:host [part~=shape-3]{right:17.67766953%;-webkit-animation:1s linear infinite alternate shape-3;animation:1s linear infinite alternate shape-3}:host [part~=flash]{color:#334bff;box-sizing:border-box;outline:currentColor solid 2px;margin:-.25em}:host [part~=flash-1]{-webkit-animation:1s linear infinite alternate flash-1;animation:1s linear infinite alternate flash-1}:host [part~=flash-2]{-webkit-animation:.5s linear infinite alternate flash-2;animation:.5s linear infinite alternate flash-2}:host [part~=flash-3]{-webkit-animation:1s linear infinite alternate flash-3;animation:1s linear infinite alternate flash-3}:host [part~=box]{position:absolute;border:1px solid;margin:calc(-1em / 32 - 1px);width:calc(1em / 16);height:calc(1em / 16);top:50%}:host [part~=box-1]{left:17.67766953%;-webkit-animation:1s linear infinite alternate box-1;animation:1s linear infinite alternate box-1}:host [part~=box-2]{left:50%;-webkit-animation:.5s linear infinite alternate box-2;animation:.5s linear infinite alternate box-2}:host [part~=box-3]{right:17.67766953%;-webkit-animation:1s linear infinite alternate box-3;animation:1s linear infinite alternate box-3}:host [part~=bar]{position:absolute;top:50%;left:17.67766953%;right:17.67766953%;height:2px;margin-top:-1px;background-color:currentColor}:host [part~=bar-1]{left:17.67766953%;right:50%;background-color:#334bff;-webkit-animation:1s linear infinite alternate bar-1;animation:1s linear infinite alternate bar-1}:host [part~=bar-2]{right:17.67766953%;left:50%;background-color:#334bff;-webkit-animation:1s linear infinite alternate bar-2;animation:1s linear infinite alternate bar-2}@-webkit-keyframes shape-1{0%,10%{opacity:0}100%,25%{opacity:1}}@keyframes shape-1{0%,10%{opacity:0}100%,25%{opacity:1}}@-webkit-keyframes shape-2{0%,50%{opacity:1}100%,80%{opacity:0}}@keyframes shape-2{0%,50%{opacity:1}100%,80%{opacity:0}}@-webkit-keyframes shape-3{0%,75%{opacity:1}100%,90%{opacity:0}}@keyframes shape-3{0%,75%{opacity:1}100%,90%{opacity:0}}@-webkit-keyframes flash-1{0%{opacity:1}100%,25%{opacity:0}}@keyframes flash-1{0%{opacity:1}100%,25%{opacity:0}}@-webkit-keyframes flash-2{0%,50%{opacity:0}100%{opacity:1}}@keyframes flash-2{0%,50%{opacity:0}100%{opacity:1}}@-webkit-keyframes flash-3{0%,75%{opacity:0}100%{opacity:1}}@keyframes flash-3{0%,75%{opacity:0}100%{opacity:1}}@-webkit-keyframes box-1{0%,20%{background-color:#0d0d0d;border-color:transparent}100%,25%{background-color:#fff;border-color:inherit}}@keyframes box-1{0%,20%{background-color:#0d0d0d;border-color:transparent}100%,25%{background-color:#fff;border-color:inherit}}@-webkit-keyframes box-2{0%,50%{background-color:#fff;border-color:inherit}100%,60%{background-color:#0d0d0d;border-color:transparent}}@keyframes box-2{0%,50%{background-color:#fff;border-color:inherit}100%,60%{background-color:#0d0d0d;border-color:transparent}}@-webkit-keyframes box-3{0%,75%{background-color:#fff;border-color:inherit}100%,80%{background-color:#0d0d0d;border-color:transparent}}@keyframes box-3{0%,75%{background-color:#fff;border-color:inherit}100%,80%{background-color:#0d0d0d;border-color:transparent}}@-webkit-keyframes bar-1{0%,5%{transform:scaleX(0);transform-origin:left center}24%{transform:scaleX(1);transform-origin:left center}26%{transform:scaleX(1);transform-origin:right center}100%,45%{transform:scaleX(0);transform-origin:right center}}@keyframes bar-1{0%,5%{transform:scaleX(0);transform-origin:left center}24%{transform:scaleX(1);transform-origin:left center}26%{transform:scaleX(1);transform-origin:right center}100%,45%{transform:scaleX(0);transform-origin:right center}}@-webkit-keyframes bar-2{0%,55%{transform:scaleX(0);transform-origin:left center}74%{transform:scaleX(1);transform-origin:left center}76%{transform:scaleX(1);transform-origin:right center}100%,95%{transform:scaleX(0);transform-origin:right center}}@keyframes bar-2{0%,55%{transform:scaleX(0);transform-origin:left center}74%{transform:scaleX(1);transform-origin:left center}76%{transform:scaleX(1);transform-origin:right center}100%,95%{transform:scaleX(0);transform-origin:right center}}');
+elf.customStyles.define('ef-loader', ':host{--parts:bar,shape shape-1,shape shape-2,shape shape-3,bar bar-1,bar bar-2,box box-1,box box-2,box box-3,shape shape-1 flash flash-1,shape shape-2 flash flash-2,shape shape-3 flash flash-3;position:absolute;top:0;right:0;bottom:0;left:0}:host [part=wrapper]{font-size:32px;width:2.75em;height:1em;color:#d9d9d9;position:absolute;top:calc(50% - .5em);left:calc(50% - 1.375em);display:block}:host [part~=shape]{color:#ccc;border:1px solid;width:.5em;height:.5em;transform:rotate(45deg);position:absolute;top:50%;margin:calc(-.25em - 1px)}:host [part~=shape-1]{left:17.67766953%;animation:1s linear infinite alternate shape-1}:host [part~=shape-2]{left:50%;animation:.5s linear infinite alternate shape-2}:host [part~=shape-3]{right:17.67766953%;animation:1s linear infinite alternate shape-3}:host [part~=flash]{color:#334bff;box-sizing:border-box;outline:currentColor solid 2px;margin:-.25em}:host [part~=flash-1]{animation:1s linear infinite alternate flash-1}:host [part~=flash-2]{animation:.5s linear infinite alternate flash-2}:host [part~=flash-3]{animation:1s linear infinite alternate flash-3}:host [part~=box]{position:absolute;border:1px solid;margin:calc(-1em / 32 - 1px);width:calc(1em / 16);height:calc(1em / 16);top:50%}:host [part~=box-1]{left:17.67766953%;animation:1s linear infinite alternate box-1}:host [part~=box-2]{left:50%;animation:.5s linear infinite alternate box-2}:host [part~=box-3]{right:17.67766953%;animation:1s linear infinite alternate box-3}:host [part~=bar]{position:absolute;top:50%;left:17.67766953%;right:17.67766953%;height:2px;margin-top:-1px;background-color:currentColor}:host [part~=bar-1]{left:17.67766953%;right:50%;background-color:#334bff;animation:1s linear infinite alternate bar-1}:host [part~=bar-2]{right:17.67766953%;left:50%;background-color:#334bff;animation:1s linear infinite alternate bar-2}@keyframes shape-1{0%,10%{opacity:0}100%,25%{opacity:1}}@keyframes shape-2{0%,50%{opacity:1}100%,80%{opacity:0}}@keyframes shape-3{0%,75%{opacity:1}100%,90%{opacity:0}}@keyframes flash-1{0%{opacity:1}100%,25%{opacity:0}}@keyframes flash-2{0%,50%{opacity:0}100%{opacity:1}}@keyframes flash-3{0%,75%{opacity:0}100%{opacity:1}}@keyframes box-1{0%,20%{background-color:#0d0d0d;border-color:transparent}100%,25%{background-color:#fff;border-color:inherit}}@keyframes box-2{0%,50%{background-color:#fff;border-color:inherit}100%,60%{background-color:#0d0d0d;border-color:transparent}}@keyframes box-3{0%,75%{background-color:#fff;border-color:inherit}100%,80%{background-color:#0d0d0d;border-color:transparent}}@keyframes bar-1{0%,5%{transform:scaleX(0);transform-origin:left center}24%{transform:scaleX(1);transform-origin:left center}26%{transform:scaleX(1);transform-origin:right center}100%,45%{transform:scaleX(0);transform-origin:right center}}@keyframes bar-2{0%,55%{transform:scaleX(0);transform-origin:left center}74%{transform:scaleX(1);transform-origin:left center}76%{transform:scaleX(1);transform-origin:right center}100%,95%{transform:scaleX(0);transform-origin:right center}}');

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

@@ -1,2 +1,2 @@
 
-elf.customStyles.define('ef-loader', ':host{--parts:dot dot0,dot dot1,dot dot2;position:absolute;top:50%;left:50%;overflow:hidden;width:70px;height:20px;margin:-10px 0 0 -35px}:host([size=small]){width:30px;height:6px;margin:-3px 0 0 -15px}:host([size=small]) [part~=dot]{width:5px;height:5px}:host([size=medium]){width:42px;height:12px;margin:-6px 0 0 -21px}:host([size=medium]) [part~=dot]{width:10px;height:10px}:host [part=wrapper]{box-sizing:border-box;height:100%;width:100%;display:flex;align-items:center;justify-content:space-between}:host [part=wrapper]:after,:host [part=wrapper]:before{content:\'\'}:host [part~=dot]{box-sizing:border-box;width:17px;height:17px;border-radius:50%;-webkit-animation-duration:1.2s;animation-duration:1.2s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;border:1px solid rgba(194,194,194,.4)}:host [part~=dot0]{-webkit-animation-name:pulse-1;animation-name:pulse-1}:host [part~=dot1]{-webkit-animation-name:pulse-2;animation-name:pulse-2}:host [part~=dot2]{-webkit-animation-name:pulse-3;animation-name:pulse-3}@-webkit-keyframes pulse-1{0%,100%,80%{background-color:transparent}25%{background-color:rgba(194,194,194,.4)}}@keyframes pulse-1{0%,100%,80%{background-color:transparent}25%{background-color:rgba(194,194,194,.4)}}@-webkit-keyframes pulse-2{0%,10%,100%,90%{background-color:transparent}50%{background-color:rgba(194,194,194,.8)}}@keyframes pulse-2{0%,10%,100%,90%{background-color:transparent}50%{background-color:rgba(194,194,194,.8)}}@-webkit-keyframes pulse-3{0%,100%,20%{background-color:transparent}75%{background-color:rgba(194,194,194,.8)}}@keyframes pulse-3{0%,100%,20%{background-color:transparent}75%{background-color:rgba(194,194,194,.8)}}');
+elf.customStyles.define('ef-loader', ':host{--parts:dot dot0,dot dot1,dot dot2;position:absolute;top:50%;left:50%;overflow:hidden;width:70px;height:20px;margin:-10px 0 0 -35px}:host([size=small]){width:30px;height:6px;margin:-3px 0 0 -15px}:host([size=small]) [part~=dot]{width:5px;height:5px}:host([size=medium]){width:42px;height:12px;margin:-6px 0 0 -21px}:host([size=medium]) [part~=dot]{width:10px;height:10px}:host [part=wrapper]{box-sizing:border-box;height:100%;width:100%;display:flex;align-items:center;justify-content:space-between}:host [part=wrapper]:after,:host [part=wrapper]:before{content:\'\'}:host [part~=dot]{box-sizing:border-box;width:17px;height:17px;border-radius:50%;animation-duration:1.2s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;border:1px solid rgba(194,194,194,.4)}:host [part~=dot0]{animation-name:pulse-1}:host [part~=dot1]{animation-name:pulse-2}:host [part~=dot2]{animation-name:pulse-3}@keyframes pulse-1{0%,100%,80%{background-color:transparent}25%{background-color:rgba(194,194,194,.4)}}@keyframes pulse-2{0%,10%,100%,90%{background-color:transparent}50%{background-color:rgba(194,194,194,.8)}}@keyframes pulse-3{0%,100%,20%{background-color:transparent}75%{background-color:rgba(194,194,194,.8)}}');

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

@@ -1,2 +1,2 @@
 
-elf.customStyles.define('ef-loader', ':host{--parts:dot dot0,dot dot1,dot dot2;position:absolute;top:50%;left:50%;overflow:hidden;width:70px;height:20px;margin:-10px 0 0 -35px}:host([size=small]){width:30px;height:6px;margin:-3px 0 0 -15px}:host([size=small]) [part~=dot]{width:5px;height:5px}:host([size=medium]){width:42px;height:12px;margin:-6px 0 0 -21px}:host([size=medium]) [part~=dot]{width:10px;height:10px}:host [part=wrapper]{box-sizing:border-box;height:100%;width:100%;display:flex;align-items:center;justify-content:space-between}:host [part=wrapper]:after,:host [part=wrapper]:before{content:\'\'}:host [part~=dot]{box-sizing:border-box;width:17px;height:17px;border-radius:50%;-webkit-animation-duration:1.2s;animation-duration:1.2s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;border:1px solid rgba(72,72,72,.4)}:host [part~=dot0]{-webkit-animation-name:pulse-1;animation-name:pulse-1}:host [part~=dot1]{-webkit-animation-name:pulse-2;animation-name:pulse-2}:host [part~=dot2]{-webkit-animation-name:pulse-3;animation-name:pulse-3}@-webkit-keyframes pulse-1{0%,100%,80%{background-color:transparent}25%{background-color:rgba(72,72,72,.4)}}@keyframes pulse-1{0%,100%,80%{background-color:transparent}25%{background-color:rgba(72,72,72,.4)}}@-webkit-keyframes pulse-2{0%,10%,100%,90%{background-color:transparent}50%{background-color:rgba(72,72,72,.8)}}@keyframes pulse-2{0%,10%,100%,90%{background-color:transparent}50%{background-color:rgba(72,72,72,.8)}}@-webkit-keyframes pulse-3{0%,100%,20%{background-color:transparent}75%{background-color:rgba(72,72,72,.8)}}@keyframes pulse-3{0%,100%,20%{background-color:transparent}75%{background-color:rgba(72,72,72,.8)}}');
+elf.customStyles.define('ef-loader', ':host{--parts:dot dot0,dot dot1,dot dot2;position:absolute;top:50%;left:50%;overflow:hidden;width:70px;height:20px;margin:-10px 0 0 -35px}:host([size=small]){width:30px;height:6px;margin:-3px 0 0 -15px}:host([size=small]) [part~=dot]{width:5px;height:5px}:host([size=medium]){width:42px;height:12px;margin:-6px 0 0 -21px}:host([size=medium]) [part~=dot]{width:10px;height:10px}:host [part=wrapper]{box-sizing:border-box;height:100%;width:100%;display:flex;align-items:center;justify-content:space-between}:host [part=wrapper]:after,:host [part=wrapper]:before{content:\'\'}:host [part~=dot]{box-sizing:border-box;width:17px;height:17px;border-radius:50%;animation-duration:1.2s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;border:1px solid rgba(72,72,72,.4)}:host [part~=dot0]{animation-name:pulse-1}:host [part~=dot1]{animation-name:pulse-2}:host [part~=dot2]{animation-name:pulse-3}@keyframes pulse-1{0%,100%,80%{background-color:transparent}25%{background-color:rgba(72,72,72,.4)}}@keyframes pulse-2{0%,10%,100%,90%{background-color:transparent}50%{background-color:rgba(72,72,72,.8)}}@keyframes pulse-3{0%,100%,20%{background-color:transparent}75%{background-color:rgba(72,72,72,.8)}}');

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

@@ -2,4 +2,4 @@ import '@refinitiv-ui/elements/icon/themes/halo/dark';
 
 elf.customStyles.define('ef-notification-tray', ':host{--max:1;--default-timeout:5000;display:flex;flex-flow:column nowrap;justify-content:flex-end}:host([attach]){position:fixed;z-index:100000}:host([attach=top]){top:0;left:0;right:0}:host([attach=right]){top:0;right:0;bottom:0}:host([attach=bottom]){left:0;right:0;bottom:0}:host([attach=left]){top:0;left:0;bottom:0}');
 
-elf.customStyles.define('ef-notification', ':host{touch-action:manipulation;perspective:2000px;position:relative;height:var(--bar-height,3em);overflow:hidden;display:flex;align-items:center;text-align:center;color:var(--color,#ccc);-webkit-animation:.2s forwards notification-open;animation:.2s forwards notification-open;--bar-height:44px;font-size:14px;color:var(--color,#fff)}:host [part=container]{height:var(--bar-height,3em);width:100%;position:relative;overflow:hidden;box-sizing:border-box;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:var(--background-color,#007678);-webkit-animation:.2s notification-container-open;animation:.2s notification-container-open;padding:12px 16px}:host [part=container]::before{content:\'\';display:block;position:absolute;top:0;right:0;bottom:0;width:3em;opacity:0;transition:opacity .2s;color:var(--background-color,#007678);background:currentColor;box-shadow:0 0 1em 1em currentColor}:host [part=content]{width:100%;text-align:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:20px}:host [part=clear]{touch-action:manipulation;margin:auto;display:block;position:absolute;width:20px;height:20px;right:.75em;top:0;bottom:0;opacity:0;transition:opacity .2s;opacity:.4}:host(:hover) [part=clear],:host(:hover) [part=container]::before{opacity:1}:host([confirm]){--background-color:#227542}:host([warning]){--background-color:#7F6400}:host([error]){--background-color:#A01C2B}:host([collapsed]){-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-name:notification-close;animation-name:notification-close}:host([collapsed]) [part=container]{-webkit-animation-name:notification-container-close;animation-name:notification-container-close}:host([collapsed]) [part=clear],:host([collapsed]) [part=container]::before{opacity:0}@-webkit-keyframes notification-open{from{height:0}to{height:var(--bar-height,3em)}}@keyframes notification-open{from{height:0}to{height:var(--bar-height,3em)}}@-webkit-keyframes notification-close{from{height:var(--bar-height,3em)}to{height:0}}@keyframes notification-close{from{height:var(--bar-height,3em)}to{height:0}}@-webkit-keyframes notification-container-open{0%{opacity:.1;transform:rotateX(-90deg)}100%,80%,90%{opacity:1;transform:rotateX(0)}}@keyframes notification-container-open{0%{opacity:.1;transform:rotateX(-90deg)}100%,80%,90%{opacity:1;transform:rotateX(0)}}@-webkit-keyframes notification-container-close{from{opacity:1;transform:rotateX(0)}to{transform:rotateX(90deg)}}@keyframes notification-container-close{from{opacity:1;transform:rotateX(0)}to{transform:rotateX(90deg)}}:host [part=content] ::slotted(a){color:inherit!important;text-decoration:underline!important}:host [part=content] ::slotted(a:hover){cursor:pointer!important;-webkit-text-decoration-color:inherit!important;text-decoration-color:inherit!important}');
+elf.customStyles.define('ef-notification', ':host{touch-action:manipulation;perspective:2000px;position:relative;height:var(--bar-height,3em);overflow:hidden;display:flex;align-items:center;text-align:center;color:var(--color,#ccc);animation:.2s forwards notification-open;--bar-height:44px;font-size:14px;color:var(--color,#fff)}:host [part=container]{height:var(--bar-height,3em);width:100%;position:relative;overflow:hidden;box-sizing:border-box;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:var(--background-color,#007678);animation:.2s notification-container-open;padding:12px 16px}:host [part=container]::before{content:\'\';display:block;position:absolute;top:0;right:0;bottom:0;width:3em;opacity:0;transition:opacity .2s;color:var(--background-color,#007678);background:currentColor;box-shadow:0 0 1em 1em currentColor}:host [part=content]{width:100%;text-align:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:20px}:host [part=clear]{touch-action:manipulation;margin:auto;display:block;position:absolute;width:20px;height:20px;right:.75em;top:0;bottom:0;opacity:0;transition:opacity .2s;opacity:.4}:host(:hover) [part=clear],:host(:hover) [part=container]::before{opacity:1}:host([confirm]){--background-color:#227542}:host([warning]){--background-color:#7F6400}:host([error]){--background-color:#A01C2B}:host([collapsed]){animation-fill-mode:forwards;animation-name:notification-close}:host([collapsed]) [part=container]{animation-name:notification-container-close}:host([collapsed]) [part=clear],:host([collapsed]) [part=container]::before{opacity:0}@keyframes notification-open{from{height:0}to{height:var(--bar-height,3em)}}@keyframes notification-close{from{height:var(--bar-height,3em)}to{height:0}}@keyframes notification-container-open{0%{opacity:.1;transform:rotateX(-90deg)}100%,80%,90%{opacity:1;transform:rotateX(0)}}@keyframes notification-container-close{from{opacity:1;transform:rotateX(0)}to{transform:rotateX(90deg)}}:host [part=content] ::slotted(a){color:inherit!important;text-decoration:underline!important}:host [part=content] ::slotted(a:hover){cursor:pointer!important;text-decoration-color:inherit!important}');

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

@@ -2,4 +2,4 @@ import '@refinitiv-ui/elements/icon/themes/halo/light';
 
 elf.customStyles.define('ef-notification-tray', ':host{--max:1;--default-timeout:5000;display:flex;flex-flow:column nowrap;justify-content:flex-end}:host([attach]){position:fixed;z-index:100000}:host([attach=top]){top:0;left:0;right:0}:host([attach=right]){top:0;right:0;bottom:0}:host([attach=bottom]){left:0;right:0;bottom:0}:host([attach=left]){top:0;left:0;bottom:0}');
 
-elf.customStyles.define('ef-notification', ':host{touch-action:manipulation;perspective:2000px;position:relative;height:var(--bar-height,3em);overflow:hidden;display:flex;align-items:center;text-align:center;color:var(--color,#0d0d0d);-webkit-animation:.2s forwards notification-open;animation:.2s forwards notification-open;--bar-height:44px;font-size:14px;color:var(--color,#fff)}:host [part=container]{height:var(--bar-height,3em);width:100%;position:relative;overflow:hidden;box-sizing:border-box;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:var(--background-color,#007678);-webkit-animation:.2s notification-container-open;animation:.2s notification-container-open;padding:12px 16px}:host [part=container]::before{content:\'\';display:block;position:absolute;top:0;right:0;bottom:0;width:3em;opacity:0;transition:opacity .2s;color:var(--background-color,#007678);background:currentColor;box-shadow:0 0 1em 1em currentColor}:host [part=content]{width:100%;text-align:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:20px}:host [part=clear]{touch-action:manipulation;margin:auto;display:block;position:absolute;width:20px;height:20px;right:.75em;top:0;bottom:0;opacity:0;transition:opacity .2s;opacity:.4}:host(:hover) [part=clear],:host(:hover) [part=container]::before{opacity:1}:host([confirm]){--background-color:#246B3E}:host([warning]){--background-color:#CCA000;color:#0d0d0d}:host([error]){--background-color:#B63243}:host([collapsed]){-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-name:notification-close;animation-name:notification-close}:host([collapsed]) [part=container]{-webkit-animation-name:notification-container-close;animation-name:notification-container-close}:host([collapsed]) [part=clear],:host([collapsed]) [part=container]::before{opacity:0}@-webkit-keyframes notification-open{from{height:0}to{height:var(--bar-height,3em)}}@keyframes notification-open{from{height:0}to{height:var(--bar-height,3em)}}@-webkit-keyframes notification-close{from{height:var(--bar-height,3em)}to{height:0}}@keyframes notification-close{from{height:var(--bar-height,3em)}to{height:0}}@-webkit-keyframes notification-container-open{0%{opacity:.1;transform:rotateX(-90deg)}100%,80%,90%{opacity:1;transform:rotateX(0)}}@keyframes notification-container-open{0%{opacity:.1;transform:rotateX(-90deg)}100%,80%,90%{opacity:1;transform:rotateX(0)}}@-webkit-keyframes notification-container-close{from{opacity:1;transform:rotateX(0)}to{transform:rotateX(90deg)}}@keyframes notification-container-close{from{opacity:1;transform:rotateX(0)}to{transform:rotateX(90deg)}}:host [part=content] ::slotted(a){color:inherit!important;text-decoration:underline!important}:host [part=content] ::slotted(a:hover){cursor:pointer!important;-webkit-text-decoration-color:inherit!important;text-decoration-color:inherit!important}');
+elf.customStyles.define('ef-notification', ':host{touch-action:manipulation;perspective:2000px;position:relative;height:var(--bar-height,3em);overflow:hidden;display:flex;align-items:center;text-align:center;color:var(--color,#0d0d0d);animation:.2s forwards notification-open;--bar-height:44px;font-size:14px;color:var(--color,#fff)}:host [part=container]{height:var(--bar-height,3em);width:100%;position:relative;overflow:hidden;box-sizing:border-box;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:var(--background-color,#007678);animation:.2s notification-container-open;padding:12px 16px}:host [part=container]::before{content:\'\';display:block;position:absolute;top:0;right:0;bottom:0;width:3em;opacity:0;transition:opacity .2s;color:var(--background-color,#007678);background:currentColor;box-shadow:0 0 1em 1em currentColor}:host [part=content]{width:100%;text-align:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:20px}:host [part=clear]{touch-action:manipulation;margin:auto;display:block;position:absolute;width:20px;height:20px;right:.75em;top:0;bottom:0;opacity:0;transition:opacity .2s;opacity:.4}:host(:hover) [part=clear],:host(:hover) [part=container]::before{opacity:1}:host([confirm]){--background-color:#246B3E}:host([warning]){--background-color:#CCA000;color:#0d0d0d}:host([error]){--background-color:#B63243}:host([collapsed]){animation-fill-mode:forwards;animation-name:notification-close}:host([collapsed]) [part=container]{animation-name:notification-container-close}:host([collapsed]) [part=clear],:host([collapsed]) [part=container]::before{opacity:0}@keyframes notification-open{from{height:0}to{height:var(--bar-height,3em)}}@keyframes notification-close{from{height:var(--bar-height,3em)}to{height:0}}@keyframes notification-container-open{0%{opacity:.1;transform:rotateX(-90deg)}100%,80%,90%{opacity:1;transform:rotateX(0)}}@keyframes notification-container-close{from{opacity:1;transform:rotateX(0)}to{transform:rotateX(90deg)}}:host [part=content] ::slotted(a){color:inherit!important;text-decoration:underline!important}:host [part=content] ::slotted(a:hover){cursor:pointer!important;text-decoration-color:inherit!important}');

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

@@ -2,4 +2,4 @@ import '@refinitiv-ui/elements/icon/themes/solar/charcoal';
 
 elf.customStyles.define('ef-notification-tray', ':host{--max:1;--default-timeout:5000;display:flex;flex-flow:column nowrap;justify-content:flex-end}:host([attach]){position:fixed;z-index:100000}:host([attach=top]){top:0;left:0;right:0}:host([attach=right]){top:0;right:0;bottom:0}:host([attach=bottom]){left:0;right:0;bottom:0}:host([attach=left]){top:0;left:0;bottom:0}');
 
-elf.customStyles.define('ef-notification', ':host{touch-action:manipulation;perspective:2000px;position:relative;height:var(--bar-height,3em);overflow:hidden;display:flex;align-items:center;text-align:center;color:var(--color,#c2c2c2);-webkit-animation:.4s forwards notification-open;animation:.4s forwards notification-open;--bar-height:30px;--background-color:#295e8c;color:#fff}:host [part=container]{height:var(--bar-height,3em);width:100%;position:relative;overflow:hidden;box-sizing:border-box;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:6px 27px 6px 10px;background-color:var(--background-color,#19aaee);-webkit-animation:.4s notification-container-open;animation:.4s notification-container-open}:host [part=container]::before{content:\'\';display:block;position:absolute;top:0;right:0;bottom:0;width:3em;opacity:0;transition:opacity .2s;color:var(--background-color,#19aaee);background:currentColor;box-shadow:0 0 1em 1em currentColor}:host [part=content]{width:100%;text-align:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host [part=clear]{touch-action:manipulation;margin:auto;display:block;position:absolute;top:0;bottom:0;opacity:0;transition:opacity .2s;right:.5em;width:16px;height:16px;stroke-width:1.5px;opacity:1}:host(:hover) [part=clear],:host(:hover) [part=container]::before{opacity:1}:host([confirm]){--background-color:#2ec57e;--background-color:#237843}:host([warning]){--background-color:#FF9933;--background-color:#cc7f33}:host([error]){--background-color:#F5475B;--background-color:#a8313f}:host([collapsed]){-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-name:notification-close;animation-name:notification-close}:host([collapsed]) [part=container]{-webkit-animation-name:notification-container-close;animation-name:notification-container-close}:host([collapsed]) [part=clear],:host([collapsed]) [part=container]::before{opacity:0}@-webkit-keyframes notification-open{from{height:0}to{height:var(--bar-height,3em)}}@keyframes notification-open{from{height:0}to{height:var(--bar-height,3em)}}@-webkit-keyframes notification-close{from{height:var(--bar-height,3em)}to{height:0}}@keyframes notification-close{from{height:var(--bar-height,3em)}to{height:0}}@-webkit-keyframes notification-container-open{0%{opacity:.1;transform:rotateX(-90deg)}100%,80%,90%{opacity:1;transform:rotateX(0)}}@keyframes notification-container-open{0%{opacity:.1;transform:rotateX(-90deg)}100%,80%,90%{opacity:1;transform:rotateX(0)}}@-webkit-keyframes notification-container-close{from{opacity:1;transform:rotateX(0)}to{transform:rotateX(90deg)}}@keyframes notification-container-close{from{opacity:1;transform:rotateX(0)}to{transform:rotateX(90deg)}}:host [part=content] ::slotted(a){color:inherit!important;text-decoration:underline!important}:host [part=content] ::slotted(a:hover){cursor:pointer!important;-webkit-text-decoration-color:inherit!important;text-decoration-color:inherit!important}');
+elf.customStyles.define('ef-notification', ':host{touch-action:manipulation;perspective:2000px;position:relative;height:var(--bar-height,3em);overflow:hidden;display:flex;align-items:center;text-align:center;color:var(--color,#c2c2c2);animation:.4s forwards notification-open;--bar-height:30px;--background-color:#295e8c;color:#fff}:host [part=container]{height:var(--bar-height,3em);width:100%;position:relative;overflow:hidden;box-sizing:border-box;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:6px 27px 6px 10px;background-color:var(--background-color,#19aaee);animation:.4s notification-container-open}:host [part=container]::before{content:\'\';display:block;position:absolute;top:0;right:0;bottom:0;width:3em;opacity:0;transition:opacity .2s;color:var(--background-color,#19aaee);background:currentColor;box-shadow:0 0 1em 1em currentColor}:host [part=content]{width:100%;text-align:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host [part=clear]{touch-action:manipulation;margin:auto;display:block;position:absolute;top:0;bottom:0;opacity:0;transition:opacity .2s;right:.5em;width:16px;height:16px;stroke-width:1.5px;opacity:1}:host(:hover) [part=clear],:host(:hover) [part=container]::before{opacity:1}:host([confirm]){--background-color:#2ec57e;--background-color:#237843}:host([warning]){--background-color:#FF9933;--background-color:#cc7f33}:host([error]){--background-color:#F5475B;--background-color:#a8313f}:host([collapsed]){animation-fill-mode:forwards;animation-name:notification-close}:host([collapsed]) [part=container]{animation-name:notification-container-close}:host([collapsed]) [part=clear],:host([collapsed]) [part=container]::before{opacity:0}@keyframes notification-open{from{height:0}to{height:var(--bar-height,3em)}}@keyframes notification-close{from{height:var(--bar-height,3em)}to{height:0}}@keyframes notification-container-open{0%{opacity:.1;transform:rotateX(-90deg)}100%,80%,90%{opacity:1;transform:rotateX(0)}}@keyframes notification-container-close{from{opacity:1;transform:rotateX(0)}to{transform:rotateX(90deg)}}:host [part=content] ::slotted(a){color:inherit!important;text-decoration:underline!important}:host [part=content] ::slotted(a:hover){cursor:pointer!important;text-decoration-color:inherit!important}');

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

@@ -2,4 +2,4 @@ import '@refinitiv-ui/elements/icon/themes/solar/pearl';
 
 elf.customStyles.define('ef-notification-tray', ':host{--max:1;--default-timeout:5000;display:flex;flex-flow:column nowrap;justify-content:flex-end}:host([attach]){position:fixed;z-index:100000}:host([attach=top]){top:0;left:0;right:0}:host([attach=right]){top:0;right:0;bottom:0}:host([attach=bottom]){left:0;right:0;bottom:0}:host([attach=left]){top:0;left:0;bottom:0}');
 
-elf.customStyles.define('ef-notification', ':host{touch-action:manipulation;perspective:2000px;position:relative;height:var(--bar-height,3em);overflow:hidden;display:flex;align-items:center;text-align:center;color:var(--color,#505050);-webkit-animation:.4s forwards notification-open;animation:.4s forwards notification-open;--bar-height:30px;--background-color:#295e8c;color:#fff}:host [part=container]{height:var(--bar-height,3em);width:100%;position:relative;overflow:hidden;box-sizing:border-box;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:6px 27px 6px 10px;background-color:var(--background-color,#19aaee);-webkit-animation:.4s notification-container-open;animation:.4s notification-container-open}:host [part=container]::before{content:\'\';display:block;position:absolute;top:0;right:0;bottom:0;width:3em;opacity:0;transition:opacity .2s;color:var(--background-color,#19aaee);background:currentColor;box-shadow:0 0 1em 1em currentColor}:host [part=content]{width:100%;text-align:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host [part=clear]{touch-action:manipulation;margin:auto;display:block;position:absolute;top:0;bottom:0;opacity:0;transition:opacity .2s;right:.5em;width:16px;height:16px;stroke-width:1.5px;opacity:1}:host(:hover) [part=clear],:host(:hover) [part=container]::before{opacity:1}:host([confirm]){--background-color:#2ec57e;--background-color:#237843}:host([warning]){--background-color:#FF9933;--background-color:#cc7f33}:host([error]){--background-color:#D94255;--background-color:#a8313f}:host([collapsed]){-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-name:notification-close;animation-name:notification-close}:host([collapsed]) [part=container]{-webkit-animation-name:notification-container-close;animation-name:notification-container-close}:host([collapsed]) [part=clear],:host([collapsed]) [part=container]::before{opacity:0}@-webkit-keyframes notification-open{from{height:0}to{height:var(--bar-height,3em)}}@keyframes notification-open{from{height:0}to{height:var(--bar-height,3em)}}@-webkit-keyframes notification-close{from{height:var(--bar-height,3em)}to{height:0}}@keyframes notification-close{from{height:var(--bar-height,3em)}to{height:0}}@-webkit-keyframes notification-container-open{0%{opacity:.1;transform:rotateX(-90deg)}100%,80%,90%{opacity:1;transform:rotateX(0)}}@keyframes notification-container-open{0%{opacity:.1;transform:rotateX(-90deg)}100%,80%,90%{opacity:1;transform:rotateX(0)}}@-webkit-keyframes notification-container-close{from{opacity:1;transform:rotateX(0)}to{transform:rotateX(90deg)}}@keyframes notification-container-close{from{opacity:1;transform:rotateX(0)}to{transform:rotateX(90deg)}}:host [part=content] ::slotted(a){color:inherit!important;text-decoration:underline!important}:host [part=content] ::slotted(a:hover){cursor:pointer!important;-webkit-text-decoration-color:inherit!important;text-decoration-color:inherit!important}');
+elf.customStyles.define('ef-notification', ':host{touch-action:manipulation;perspective:2000px;position:relative;height:var(--bar-height,3em);overflow:hidden;display:flex;align-items:center;text-align:center;color:var(--color,#505050);animation:.4s forwards notification-open;--bar-height:30px;--background-color:#295e8c;color:#fff}:host [part=container]{height:var(--bar-height,3em);width:100%;position:relative;overflow:hidden;box-sizing:border-box;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:6px 27px 6px 10px;background-color:var(--background-color,#19aaee);animation:.4s notification-container-open}:host [part=container]::before{content:\'\';display:block;position:absolute;top:0;right:0;bottom:0;width:3em;opacity:0;transition:opacity .2s;color:var(--background-color,#19aaee);background:currentColor;box-shadow:0 0 1em 1em currentColor}:host [part=content]{width:100%;text-align:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host [part=clear]{touch-action:manipulation;margin:auto;display:block;position:absolute;top:0;bottom:0;opacity:0;transition:opacity .2s;right:.5em;width:16px;height:16px;stroke-width:1.5px;opacity:1}:host(:hover) [part=clear],:host(:hover) [part=container]::before{opacity:1}:host([confirm]){--background-color:#2ec57e;--background-color:#237843}:host([warning]){--background-color:#FF9933;--background-color:#cc7f33}:host([error]){--background-color:#D94255;--background-color:#a8313f}:host([collapsed]){animation-fill-mode:forwards;animation-name:notification-close}:host([collapsed]) [part=container]{animation-name:notification-container-close}:host([collapsed]) [part=clear],:host([collapsed]) [part=container]::before{opacity:0}@keyframes notification-open{from{height:0}to{height:var(--bar-height,3em)}}@keyframes notification-close{from{height:var(--bar-height,3em)}to{height:0}}@keyframes notification-container-open{0%{opacity:.1;transform:rotateX(-90deg)}100%,80%,90%{opacity:1;transform:rotateX(0)}}@keyframes notification-container-close{from{opacity:1;transform:rotateX(0)}to{transform:rotateX(90deg)}}:host [part=content] ::slotted(a){color:inherit!important;text-decoration:underline!important}:host [part=content] ::slotted(a:hover){cursor:pointer!important;text-decoration-color:inherit!important}');

package/lib/number-field/index.js

@@ -455,6 +455,9 @@ let NumberField = class NumberField extends FormFieldElement {
      * @returns true if value is integral
      */
     isValueIntegralMultipleOfStep(value) {
+        if (this.step === ANY_STEP) {
+            return true;
+        }
         const decimals = Math.max(this.getDecimalPlace(value), this.stepDecimals);
         const division = (this.stepBase - value) / this.getAllowedValueStep();
         const number = decimals ? this.toFixedNumber(division, decimals) : division;
@@ -526,21 +529,26 @@ let NumberField = class NumberField extends FormFieldElement {
         // step-up or step-down
         if (this.isValueIntegralMultipleOfStep(value)) {
             const delta = allowedValueStep * stepIncrement * direction;
-            value += delta;
+            value = this.toFixedNumber(value + delta, Math.max(this.getDecimalPlace(value), this.getDecimalPlace(delta)));
         }
         else {
             value = this.findNearestSteppedValue(valueBeforeStepping, stepBase, allowedValueStep, direction);
         }
+        // Follow native number field with step "any".
+        // When set min as a decimal number, value should't be decreased to min
+        if (value < min && this.step === ANY_STEP && this.getDecimalPlace(this.stringToNumber(this.min)) > 0) {
+            value = valueBeforeStepping;
+        }
         // If the element has a minimum, and value is less than that minimum,
         // then set value to the smallest value that, when subtracted from the step base,
         // is an integral multiple of the allowed value step, and that is more than or equal to minimum.
-        if (value < min) {
+        else if (value < min) {
             value = this.findNearestSteppedValue(min + allowedValueStep, stepBase, allowedValueStep, Direction.Down);
         }
         // If the element has a maximum, and value is greater than that maximum,
         // then set value to the largest value that, when subtracted from the step base,
         // is an integral multiple of the allowed value step, and that is less than or equal to maximum.
-        if (value > max) {
+        else if (value > max) {
             value = this.findNearestSteppedValue(max - allowedValueStep, stepBase, allowedValueStep, Direction.Up);
         }
         // If either the method invoked was the stepDown() method and value is greater than valueBeforeStepping
@@ -548,7 +556,7 @@ let NumberField = class NumberField extends FormFieldElement {
         if (!isNaN(inputValue) && ((direction === Direction.Up && value < valueBeforeStepping) || (direction === Direction.Down && value > valueBeforeStepping))) {
             return;
         }
-        this.inputValue = `${this.toFixedNumber(value)}`;
+        this.inputValue = String(value);
     }
     /**
      * Increases the input value by amount of step

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

@@ -1,4 +1,4 @@
 
 elf.customStyles.define('ef-overlay-backdrop', ':host{background-color:#000;opacity:.6;transition:opacity .1s}');
 
-elf.customStyles.define('ef-overlay', ':host{background-color:var(--panel-background-color,#1a1a1a);scrollbar-face-color:#595959;scrollbar-shadow-color:#595959;scrollbar-highlight-color:#595959;scrollbar-arrow-color:#595959;scrollbar-track-color:#1a1a1a;scrollbar-3dlight-color:#1a1a1a;scrollbar-darkshadow-color:#1a1a1a;scrollbar-color:#595959 #1a1a1a;scrollbar-width:thin}:host([spacing]){padding:12px 8px}:host([transition-style]){-webkit-animation-duration:.1s;animation-duration:.1s}:host([with-shadow]){box-shadow:0 2px 12px rgba(0,0,0,.5)}::-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}');
+elf.customStyles.define('ef-overlay', ':host{background-color:var(--panel-background-color,#1a1a1a);scrollbar-face-color:#595959;scrollbar-shadow-color:#595959;scrollbar-highlight-color:#595959;scrollbar-arrow-color:#595959;scrollbar-track-color:#1a1a1a;scrollbar-3dlight-color:#1a1a1a;scrollbar-darkshadow-color:#1a1a1a;scrollbar-color:#595959 #1a1a1a;scrollbar-width:thin}:host([spacing]){padding:12px 8px}:host([transition-style]){animation-duration:.1s}:host([with-shadow]){box-shadow:0 2px 12px rgba(0,0,0,.5)}::-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}');

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

@@ -1,4 +1,4 @@
 
 elf.customStyles.define('ef-overlay-backdrop', ':host{background-color:#000;opacity:.6;transition:opacity .1s}');
 
-elf.customStyles.define('ef-overlay', ':host{background-color:var(--panel-background-color,#fafafa);scrollbar-face-color:#999;scrollbar-shadow-color:#999;scrollbar-highlight-color:#999;scrollbar-arrow-color:#999;scrollbar-track-color:#f2f2f2;scrollbar-3dlight-color:#f2f2f2;scrollbar-darkshadow-color:#f2f2f2;scrollbar-color:#999 #f2f2f2;scrollbar-width:thin}:host([spacing]){padding:12px 8px}:host([transition-style]){-webkit-animation-duration:.1s;animation-duration:.1s}:host([with-shadow]){box-shadow:0 2px 8px rgba(0,0,0,.25)}::-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}');
+elf.customStyles.define('ef-overlay', ':host{background-color:var(--panel-background-color,#fafafa);scrollbar-face-color:#999;scrollbar-shadow-color:#999;scrollbar-highlight-color:#999;scrollbar-arrow-color:#999;scrollbar-track-color:#f2f2f2;scrollbar-3dlight-color:#f2f2f2;scrollbar-darkshadow-color:#f2f2f2;scrollbar-color:#999 #f2f2f2;scrollbar-width:thin}:host([spacing]){padding:12px 8px}:host([transition-style]){animation-duration:.1s}:host([with-shadow]){box-shadow:0 2px 8px rgba(0,0,0,.25)}::-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}');

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

@@ -1,4 +1,4 @@
 
 elf.customStyles.define('ef-overlay-backdrop', ':host{background-color:#000;opacity:.6;transition:opacity .2s}');
 
-elf.customStyles.define('ef-overlay', ':host{background-color:var(--panel-background-color,#1a1a1c);scrollbar-face-color:#666570;scrollbar-shadow-color:#666570;scrollbar-highlight-color:#666570;scrollbar-arrow-color:#666570;scrollbar-track-color:#2e2e33;scrollbar-3dlight-color:#2e2e33;scrollbar-darkshadow-color:#2e2e33;scrollbar-color:#666570 #2e2e33}:host([spacing]){padding:6px 10px}:host([transition-style]){-webkit-animation-duration:.2s;animation-duration:.2s}:host([with-shadow]){box-shadow:0 0 8px 0 rgba(0,0,0,.6)}::-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}');
+elf.customStyles.define('ef-overlay', ':host{background-color:var(--panel-background-color,#1a1a1c);scrollbar-face-color:#666570;scrollbar-shadow-color:#666570;scrollbar-highlight-color:#666570;scrollbar-arrow-color:#666570;scrollbar-track-color:#2e2e33;scrollbar-3dlight-color:#2e2e33;scrollbar-darkshadow-color:#2e2e33;scrollbar-color:#666570 #2e2e33}:host([spacing]){padding:6px 10px}:host([transition-style]){animation-duration:.2s}:host([with-shadow]){box-shadow:0 0 8px 0 rgba(0,0,0,.6)}::-webkit-scrollbar{width:13px;height:13px}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #2e2e33;height:12px;width:12px;display:block}::-webkit-scrollbar-thumb{background:#666570;border-radius:7px;border:2px solid #2e2e33}::-webkit-scrollbar-thumb:hover{background:#e2e2e2}::-webkit-scrollbar-thumb:active{background:#f93}::-webkit-scrollbar-track{background:#2e2e33}::-webkit-scrollbar-corner{background:#2e2e33}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:end:increment{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:horizontal:start:decrement{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}');

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

@@ -1,4 +1,4 @@
 
 elf.customStyles.define('ef-overlay-backdrop', ':host{background-color:#000;opacity:.6;transition:opacity .2s}');
 
-elf.customStyles.define('ef-overlay', ':host{background-color:var(--panel-background-color,#fff);scrollbar-face-color:#8a8a96;scrollbar-shadow-color:#8a8a96;scrollbar-highlight-color:#8a8a96;scrollbar-arrow-color:#8a8a96;scrollbar-track-color:#fff;scrollbar-3dlight-color:#fff;scrollbar-darkshadow-color:#fff;scrollbar-color:#8a8a96 #fff}:host([spacing]){padding:6px 10px}:host([transition-style]){-webkit-animation-duration:.2s;animation-duration:.2s}:host([with-shadow]){box-shadow:0 0 8px 0 rgba(0,0,0,.3)}::-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}');
+elf.customStyles.define('ef-overlay', ':host{background-color:var(--panel-background-color,#fff);scrollbar-face-color:#8a8a96;scrollbar-shadow-color:#8a8a96;scrollbar-highlight-color:#8a8a96;scrollbar-arrow-color:#8a8a96;scrollbar-track-color:#fff;scrollbar-3dlight-color:#fff;scrollbar-darkshadow-color:#fff;scrollbar-color:#8a8a96 #fff}:host([spacing]){padding:6px 10px}:host([transition-style]){animation-duration:.2s}:host([with-shadow]){box-shadow:0 0 8px 0 rgba(0,0,0,.3)}::-webkit-scrollbar{width:13px;height:13px}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #fff;height:12px;width:12px;display:block}::-webkit-scrollbar-thumb{background:#8a8a96;border-radius:7px;border:2px solid #fff}::-webkit-scrollbar-thumb:hover{background:#a9afba}::-webkit-scrollbar-thumb:active{background:#ee7600}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-corner{background:#fff}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{background-image:linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:end:increment{background-image:linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:horizontal:start:decrement{background-image:linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment{background-image:linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}');

package/lib/tab/index.js

@@ -4,6 +4,7 @@ import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { state } from '@refinitiv-ui/core/decorators/state.js';
 import { isSlotEmpty } from '@refinitiv-ui/utils/is-slot-empty.js';
+import { triggerResize } from '@refinitiv-ui/core';
 import { VERSION } from '../version.js';
 import '../icon/index.js';
 import '../label/index.js';
@@ -66,6 +67,8 @@ let Tab = class Tab extends ControlElement {
         this.onSlotChange = (event) => {
             const slot = event.target;
             this.isSlotHasContent = !!slot.assignedNodes().length && isSlotEmpty(slot);
+            // ensures that tab-bar fire resizeCallback when slot changes
+            triggerResize();
         };
     }
     /**
@@ -109,6 +112,10 @@ let Tab = class Tab extends ControlElement {
         if (changedProperties.has('active')) {
             this.setAttribute('aria-selected', this.active ? 'true' : 'false');
         }
+        if (changedProperties.has('label')) {
+            // ensures that tab-bar fire resizeCallback when label changes
+            triggerResize();
+        }
     }
     /**
      * Omitted lineClamp if subLabel is provided

package/lib/time-picker/themes/halo/dark/index.js

@@ -1,4 +1,4 @@
 import '@refinitiv-ui/elements/number-field/themes/halo/dark';
 import '@refinitiv-ui/elements/icon/themes/halo/dark';
 
-elf.customStyles.define('ef-time-picker', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12rem;font-weight:400;height:24px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#ccc;border-radius:0;background-color:#0d0d0d;text-overflow:ellipsis;border:1px solid #404040;width:auto;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;padding:0}:host([disabled]){color:rgba(204,204,204,.5);border:1px solid rgba(64,64,64,.5)}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=input]{margin:0;text-align:center;padding:0;color:inherit;width:24px}:host [part=divider]::before{content:\':\'}:host [part=toggle]{width:20px;font-size:50%;display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;line-height:1.2;outline:0;cursor:pointer;touch-action:manipulation}:host [part=input],:host [part=toggle]{height:100%;position:relative}:host [part=input]:focus::after,:host [part=input][focused]::after,:host [part=toggle]:focus::after,:host [part=toggle][focused]::after{content:\'\';border-right:8px solid transparent;border-left:8px solid transparent;position:absolute;left:calc(50% - 8px);bottom:0;border-bottom:4px solid transparent;display:none}:host [part=toggle-item]{opacity:.5}:host [part=toggle-item][active]{opacity:1}:host [part=divider]{width:2px}');
+elf.customStyles.define('ef-time-picker', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12rem;font-weight:400;height:24px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#ccc;border-radius:0;background-color:#0d0d0d;text-overflow:ellipsis;border:1px solid #404040;width:auto;min-width:-moz-max-content;min-width:max-content;padding:0}:host([disabled]){color:rgba(204,204,204,.5);border:1px solid rgba(64,64,64,.5)}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=input]{margin:0;text-align:center;padding:0;color:inherit;width:24px}:host [part=divider]::before{content:\':\'}:host [part=toggle]{width:20px;font-size:50%;display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;line-height:1.2;outline:0;cursor:pointer;touch-action:manipulation}:host [part=input],:host [part=toggle]{height:100%;position:relative}:host [part=input]:focus::after,:host [part=input][focused]::after,:host [part=toggle]:focus::after,:host [part=toggle][focused]::after{content:\'\';border-right:8px solid transparent;border-left:8px solid transparent;position:absolute;left:calc(50% - 8px);bottom:0;border-bottom:4px solid transparent;display:none}:host [part=toggle-item]{opacity:.5}:host [part=toggle-item][active]{opacity:1}:host [part=divider]{width:2px}');

package/lib/time-picker/themes/halo/light/index.js

@@ -1,4 +1,4 @@
 import '@refinitiv-ui/elements/number-field/themes/halo/light';
 import '@refinitiv-ui/elements/icon/themes/halo/light';
 
-elf.customStyles.define('ef-time-picker', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12rem;font-weight:400;height:24px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#404040;border-radius:0;background-color:#fff;text-overflow:ellipsis;border:1px solid #595959;width:auto;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;padding:0}:host([disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(89,89,89,.5)}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=input]{margin:0;text-align:center;padding:0;color:inherit;width:24px}:host [part=divider]::before{content:\':\'}:host [part=toggle]{width:20px;font-size:50%;display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;line-height:1.2;outline:0;cursor:pointer;touch-action:manipulation}:host [part=input],:host [part=toggle]{height:100%;position:relative}:host [part=input]:focus::after,:host [part=input][focused]::after,:host [part=toggle]:focus::after,:host [part=toggle][focused]::after{content:\'\';border-right:8px solid transparent;border-left:8px solid transparent;position:absolute;left:calc(50% - 8px);bottom:0;border-bottom:4px solid transparent;display:none}:host [part=toggle-item]{opacity:.5}:host [part=toggle-item][active]{opacity:1}:host [part=divider]{width:2px}');
+elf.customStyles.define('ef-time-picker', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12rem;font-weight:400;height:24px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#404040;border-radius:0;background-color:#fff;text-overflow:ellipsis;border:1px solid #595959;width:auto;min-width:-moz-max-content;min-width:max-content;padding:0}:host([disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(89,89,89,.5)}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=input]{margin:0;text-align:center;padding:0;color:inherit;width:24px}:host [part=divider]::before{content:\':\'}:host [part=toggle]{width:20px;font-size:50%;display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;line-height:1.2;outline:0;cursor:pointer;touch-action:manipulation}:host [part=input],:host [part=toggle]{height:100%;position:relative}:host [part=input]:focus::after,:host [part=input][focused]::after,:host [part=toggle]:focus::after,:host [part=toggle][focused]::after{content:\'\';border-right:8px solid transparent;border-left:8px solid transparent;position:absolute;left:calc(50% - 8px);bottom:0;border-bottom:4px solid transparent;display:none}:host [part=toggle-item]{opacity:.5}:host [part=toggle-item][active]{opacity:1}:host [part=divider]{width:2px}');

package/lib/time-picker/themes/solar/charcoal/index.js

@@ -1,4 +1,4 @@
 import '@refinitiv-ui/elements/number-field/themes/solar/charcoal';
 import '@refinitiv-ui/elements/icon/themes/solar/charcoal';
 
-elf.customStyles.define('ef-time-picker', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13rem;font-weight:400;height:23px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#c2c2c2;border-radius:0;text-overflow:ellipsis;width:auto;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;background-color:#000;border:1px solid #4a4a52;padding:0}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#f93;border-style:dotted}:host [part=input]{margin:0;text-align:center;padding:0;color:inherit;width:25px}:host [part=divider]::before{content:\':\'}:host [part=toggle]{width:20px;display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;outline:0;cursor:pointer;touch-action:manipulation;font-size:70%;line-height:1}:host [part=input],:host [part=toggle]{height:100%;position:relative}:host [part=input]:focus::after,:host [part=input][focused]::after,:host [part=toggle]:focus::after,:host [part=toggle][focused]::after{content:\'\';border-right:8px solid transparent;border-bottom:4px solid #f93;border-left:8px solid transparent;position:absolute;content:\'\';border:none;left:calc(50% - 7px);bottom:-1px;width:14px;height:1px;background:#f93}:host [part=toggle-item]{opacity:.5}:host [part=toggle-item][active]{opacity:1}:host([disabled]){border:1px solid rgba(74,74,82,.6);color:rgba(194,194,194,.6)}:host([readonly]){border:1px solid rgba(74,74,82,.6)}:host(:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #77777d}:host([warning]){background-color:#000;border:1px solid #f93}:host([warning][disabled]){border:1px solid rgba(255,153,51,.6);color:rgba(194,194,194,.6)}:host([warning][readonly]){border:1px solid rgba(255,153,51,.6)}:host([warning]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #ffb366}:host([error]),:host([error][warning]:not([focused])){background-color:#000;border:1px solid #f5475b}:host([error][disabled]),:host([error][warning]:not([focused])[disabled]){border:1px solid rgba(245,71,91,.6);color:rgba(194,194,194,.6)}:host([error][readonly]),:host([error][warning]:not([focused])[readonly]){border:1px solid rgba(245,71,91,.6)}:host([error]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover),:host([error][warning]:not([focused]):not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #f87584}:host([highlight]){background-color:#1b252f;border:1px solid #4a4a52}:host([highlight][disabled]){border:1px solid rgba(74,74,82,.6);color:rgba(194,194,194,.6);background-color:rgba(27,37,47,.6)}:host([highlight][readonly]){border:1px solid rgba(74,74,82,.6)}:host([highlight]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #77777d}:host([indirect]){color:#0fd;background-color:#000;border:1px solid #898623}:host([indirect][disabled]){border:1px solid rgba(137,134,35,.6);color:rgba(0,255,221,.6)}:host([indirect][readonly]){border:1px solid rgba(137,134,35,.6)}:host([indirect]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #a7a45a}');
+elf.customStyles.define('ef-time-picker', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13rem;font-weight:400;height:23px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#c2c2c2;border-radius:0;text-overflow:ellipsis;width:auto;min-width:-moz-max-content;min-width:max-content;background-color:#000;border:1px solid #4a4a52;padding:0}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#f93;border-style:dotted}:host [part=input]{margin:0;text-align:center;padding:0;color:inherit;width:25px}:host [part=divider]::before{content:\':\'}:host [part=toggle]{width:20px;display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;outline:0;cursor:pointer;touch-action:manipulation;font-size:70%;line-height:1}:host [part=input],:host [part=toggle]{height:100%;position:relative}:host [part=input]:focus::after,:host [part=input][focused]::after,:host [part=toggle]:focus::after,:host [part=toggle][focused]::after{content:\'\';border-right:8px solid transparent;border-bottom:4px solid #f93;border-left:8px solid transparent;position:absolute;content:\'\';border:none;left:calc(50% - 7px);bottom:-1px;width:14px;height:1px;background:#f93}:host [part=toggle-item]{opacity:.5}:host [part=toggle-item][active]{opacity:1}:host([disabled]){border:1px solid rgba(74,74,82,.6);color:rgba(194,194,194,.6)}:host([readonly]){border:1px solid rgba(74,74,82,.6)}:host(:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #77777d}:host([warning]){background-color:#000;border:1px solid #f93}:host([warning][disabled]){border:1px solid rgba(255,153,51,.6);color:rgba(194,194,194,.6)}:host([warning][readonly]){border:1px solid rgba(255,153,51,.6)}:host([warning]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #ffb366}:host([error]),:host([error][warning]:not([focused])){background-color:#000;border:1px solid #f5475b}:host([error][disabled]),:host([error][warning]:not([focused])[disabled]){border:1px solid rgba(245,71,91,.6);color:rgba(194,194,194,.6)}:host([error][readonly]),:host([error][warning]:not([focused])[readonly]){border:1px solid rgba(245,71,91,.6)}:host([error]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover),:host([error][warning]:not([focused]):not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #f87584}:host([highlight]){background-color:#1b252f;border:1px solid #4a4a52}:host([highlight][disabled]){border:1px solid rgba(74,74,82,.6);color:rgba(194,194,194,.6);background-color:rgba(27,37,47,.6)}:host([highlight][readonly]){border:1px solid rgba(74,74,82,.6)}:host([highlight]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #77777d}:host([indirect]){color:#0fd;background-color:#000;border:1px solid #898623}:host([indirect][disabled]){border:1px solid rgba(137,134,35,.6);color:rgba(0,255,221,.6)}:host([indirect][readonly]){border:1px solid rgba(137,134,35,.6)}:host([indirect]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #a7a45a}');

package/lib/time-picker/themes/solar/pearl/index.js

@@ -1,4 +1,4 @@
 import '@refinitiv-ui/elements/number-field/themes/solar/pearl';
 import '@refinitiv-ui/elements/icon/themes/solar/pearl';
 
-elf.customStyles.define('ef-time-picker', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13rem;font-weight:400;height:23px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#484848;border-radius:0;text-overflow:ellipsis;width:auto;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;background-color:#fff;border:1px solid #a9afba;padding:0}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#ffb266;border-style:dotted}:host [part=input]{margin:0;text-align:center;padding:0;color:inherit;width:25px}:host [part=divider]::before{content:\':\'}:host [part=toggle]{width:20px;display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;outline:0;cursor:pointer;touch-action:manipulation;font-size:70%;line-height:1}:host [part=input],:host [part=toggle]{height:100%;position:relative}:host [part=input]:focus::after,:host [part=input][focused]::after,:host [part=toggle]:focus::after,:host [part=toggle][focused]::after{content:\'\';border-right:8px solid transparent;border-bottom:4px solid #ffb266;border-left:8px solid transparent;position:absolute;content:\'\';border:none;left:calc(50% - 7px);bottom:-1px;width:14px;height:1px;background:#ffb266}:host [part=toggle-item]{opacity:.5}:host [part=toggle-item][active]{opacity:1}:host([disabled]){border:1px solid rgba(169,175,186,.6);color:rgba(72,72,72,.6)}:host([readonly]){border:1px solid rgba(169,175,186,.6)}:host(:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #bfc3cb}:host([warning]){background-color:#fff;border:1px solid #f93}:host([warning][disabled]){border:1px solid rgba(255,153,51,.6);color:rgba(72,72,72,.6)}:host([warning][readonly]){border:1px solid rgba(255,153,51,.6)}:host([warning]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #ffb366}:host([error]),:host([error][warning]:not([focused])){background-color:#fff;border:1px solid #d94255}:host([error][disabled]),:host([error][warning]:not([focused])[disabled]){border:1px solid rgba(217,66,85,.6);color:rgba(72,72,72,.6)}:host([error][readonly]),:host([error][warning]:not([focused])[readonly]){border:1px solid rgba(217,66,85,.6)}:host([error]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover),:host([error][warning]:not([focused]):not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #e37180}:host([highlight]){background-color:#b0ffff;border:1px solid #a9afba}:host([highlight][disabled]){border:1px solid rgba(169,175,186,.6);color:rgba(72,72,72,.6);background-color:rgba(176,255,255,.6)}:host([highlight][readonly]){border:1px solid rgba(169,175,186,.6)}:host([highlight]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #bfc3cb}:host([indirect]){color:#009494;background-color:#effefe;border:1px solid #898623}:host([indirect][disabled]){border:1px solid rgba(137,134,35,.6);color:rgba(0,148,148,.6)}:host([indirect][readonly]){border:1px solid rgba(137,134,35,.6)}:host([indirect]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #a7a45a}');
+elf.customStyles.define('ef-time-picker', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13rem;font-weight:400;height:23px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#484848;border-radius:0;text-overflow:ellipsis;width:auto;min-width:-moz-max-content;min-width:max-content;background-color:#fff;border:1px solid #a9afba;padding:0}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#ffb266;border-style:dotted}:host [part=input]{margin:0;text-align:center;padding:0;color:inherit;width:25px}:host [part=divider]::before{content:\':\'}:host [part=toggle]{width:20px;display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;outline:0;cursor:pointer;touch-action:manipulation;font-size:70%;line-height:1}:host [part=input],:host [part=toggle]{height:100%;position:relative}:host [part=input]:focus::after,:host [part=input][focused]::after,:host [part=toggle]:focus::after,:host [part=toggle][focused]::after{content:\'\';border-right:8px solid transparent;border-bottom:4px solid #ffb266;border-left:8px solid transparent;position:absolute;content:\'\';border:none;left:calc(50% - 7px);bottom:-1px;width:14px;height:1px;background:#ffb266}:host [part=toggle-item]{opacity:.5}:host [part=toggle-item][active]{opacity:1}:host([disabled]){border:1px solid rgba(169,175,186,.6);color:rgba(72,72,72,.6)}:host([readonly]){border:1px solid rgba(169,175,186,.6)}:host(:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #bfc3cb}:host([warning]){background-color:#fff;border:1px solid #f93}:host([warning][disabled]){border:1px solid rgba(255,153,51,.6);color:rgba(72,72,72,.6)}:host([warning][readonly]){border:1px solid rgba(255,153,51,.6)}:host([warning]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #ffb366}:host([error]),:host([error][warning]:not([focused])){background-color:#fff;border:1px solid #d94255}:host([error][disabled]),:host([error][warning]:not([focused])[disabled]){border:1px solid rgba(217,66,85,.6);color:rgba(72,72,72,.6)}:host([error][readonly]),:host([error][warning]:not([focused])[readonly]){border:1px solid rgba(217,66,85,.6)}:host([error]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover),:host([error][warning]:not([focused]):not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #e37180}:host([highlight]){background-color:#b0ffff;border:1px solid #a9afba}:host([highlight][disabled]){border:1px solid rgba(169,175,186,.6);color:rgba(72,72,72,.6);background-color:rgba(176,255,255,.6)}:host([highlight][readonly]){border:1px solid rgba(169,175,186,.6)}:host([highlight]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #bfc3cb}:host([indirect]){color:#009494;background-color:#effefe;border:1px solid #898623}:host([indirect][disabled]){border:1px solid rgba(137,134,35,.6);color:rgba(0,148,148,.6)}:host([indirect][readonly]){border:1px solid rgba(137,134,35,.6)}:host([indirect]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #a7a45a}');

package/lib/tree/elements/tree.d.ts

@@ -176,7 +176,7 @@ export declare class Tree<T extends TreeDataItem = TreeDataItem> extends List<T>
      * @default []
      */
     get values(): string[];
-    set values(value: string[]);
+    set values(values: string[]);
     /**
      * Data object to be used for creating tree
      * @override

package/lib/tree/elements/tree.js

@@ -2,7 +2,7 @@ import { __decorate } from "tslib";
 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 { List } from '../../list/index.js';
+import { List, valueFormatWarning } from '../../list/index.js';
 import { TreeRenderer } from '../helpers/renderer.js';
 import { defaultFilter } from '../helpers/filter.js';
 import { TreeManager, TreeManagerMode } from '../managers/tree-manager.js';
@@ -377,8 +377,26 @@ let Tree = class Tree extends List {
             return this.composer.getItemPropertyValue(item, 'value') || '';
         });
     }
-    set values(value) {
-        super.values = value;
+    set values(values) {
+        if (!Array.isArray(values)) {
+            valueFormatWarning.show();
+            this.values = [];
+        }
+        else {
+            // Clone value arrays
+            const newValue = [...values].sort().toString();
+            const oldValue = [...this.values].sort().toString();
+            if (newValue !== oldValue) {
+                this.manager.uncheckAllItems();
+                values.some((value) => {
+                    this.queryItemsByPropertyValue('value', value).forEach((item) => {
+                        this.manager.checkItem(item);
+                    });
+                    return !this.multiple; // Only set the fist value if multiple is not enabled
+                });
+                this.requestUpdate('values', this.values);
+            }
+        }
     }
     /**
      * Data object to be used for creating tree

package/lib/version.js

@@ -1 +1 @@
-export const VERSION = '6.2.1';
+export const VERSION = '6.3.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refinitiv-ui/elements",
-  "version": "6.2.1",
+  "version": "6.3.0",
   "description": "Element Framework Elements",
   "author": "Refinitiv",
   "license": "Apache-2.0",
@@ -343,24 +343,24 @@
     "tslib": "^2.3.1"
   },
   "devDependencies": {
-    "@refinitiv-ui/core": "^6.0.7",
-    "@refinitiv-ui/demo-block": "^6.0.8",
-    "@refinitiv-ui/i18n": "^6.0.6",
+    "@refinitiv-ui/core": "^6.0.9",
+    "@refinitiv-ui/demo-block": "^6.0.10",
+    "@refinitiv-ui/i18n": "^6.0.7",
     "@refinitiv-ui/phrasebook": "^6.2.0",
     "@refinitiv-ui/test-helpers": "^6.0.4",
-    "@refinitiv-ui/translate": "^6.0.7",
-    "@refinitiv-ui/utils": "^6.1.1",
+    "@refinitiv-ui/translate": "^6.0.9",
+    "@refinitiv-ui/utils": "^6.2.0",
     "@types/d3-interpolate": "^3.0.1"
   },
   "peerDependencies": {
-    "@refinitiv-ui/core": "^6.0.7",
-    "@refinitiv-ui/i18n": "^6.0.6",
+    "@refinitiv-ui/core": "^6.0.9",
+    "@refinitiv-ui/i18n": "^6.0.7",
     "@refinitiv-ui/phrasebook": "^6.2.0",
-    "@refinitiv-ui/translate": "^6.0.7",
-    "@refinitiv-ui/utils": "^6.1.1"
+    "@refinitiv-ui/translate": "^6.0.9",
+    "@refinitiv-ui/utils": "^6.2.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "57da6d58ff28705699d54ab9e9bc2ea76c563216"
+  "gitHead": "4f5025365f935bb03aaf2afe26e9e1d0e55caf04"
 }