@refinitiv-ui/elements 5.6.0 → 5.8.2-alpha.0

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

@@ -42,13 +42,13 @@
           "name": "readonly",
           "description": "Set readonly state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "disabled",
           "description": "Set disabled state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "properties": [
@@ -96,14 +96,14 @@
           "attribute": "readonly",
           "description": "Set readonly state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "disabled",
           "attribute": "disabled",
           "description": "Set disabled state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "events": [

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

@@ -0,0 +1,28 @@
+# ef-time-picker
+
+Control the time input
+
+## Properties
+
+| Property      | Attribute      | Type             | Default | Description                                      |
+|---------------|----------------|------------------|---------|--------------------------------------------------|
+| `amPm`        | `am-pm`        | `boolean`        | false   | Toggles 12hr time display                        |
+| `disabled`    | `disabled`     | `boolean`        | false   | Set disabled state                               |
+| `hours`       | `hours`        | `number \| null` | null    | Hours time segment in 24hr format                |
+| `minutes`     | `minutes`      | `number \| null` | null    | Minutes time segment                             |
+| `readonly`    | `readonly`     | `boolean`        | false   | Set readonly state                               |
+| `seconds`     | `seconds`      | `number \| null` | null    | Seconds time segment                             |
+| `showSeconds` | `show-seconds` | `boolean`        | false   | Flag to show seconds time segment in display.<br />Seconds are automatically shown when `hh:mm:ss` time format is provided as a value. |
+| `value`       | `value`        | `string`         | ""      | Value of the element                             |
+
+## Methods
+
+| Method   | Type       | Description             |
+|----------|------------|-------------------------|
+| `toggle` | `(): void` | Toggles the AM/PM state |
+
+## Events
+
+| Event           | Description                   |
+|-----------------|-------------------------------|
+| `value-changed` | Dispatched when value changes |

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

@@ -43,6 +43,7 @@ export declare class TimePicker extends ControlElement {
     /**
      * Hours time segment in 24hr format
      * @param hours hours value
+     * @default null
      * @returns {void}
      */
     set hours(hours: number | null);
@@ -54,6 +55,7 @@ export declare class TimePicker extends ControlElement {
     /**
      * Minutes time segment
      * @param minutes minutes value
+     * @default null
      * @returns {void}
      */
     set minutes(minutes: number | null);
@@ -65,6 +67,7 @@ export declare class TimePicker extends ControlElement {
     /**
      * Seconds time segment
      * @param seconds seconds value
+     * @default null
      * @returns {void}
      */
     set seconds(seconds: number | null);

package/lib/time-picker/index.js

@@ -127,6 +127,7 @@ let TimePicker = class TimePicker extends ControlElement {
     /**
      * Hours time segment in 24hr format
      * @param hours hours value
+     * @default null
      * @returns {void}
      */
     set hours(hours) {
@@ -149,6 +150,7 @@ let TimePicker = class TimePicker extends ControlElement {
     /**
      * Minutes time segment
      * @param minutes minutes value
+     * @default null
      * @returns {void}
      */
     set minutes(minutes) {
@@ -171,6 +173,7 @@ let TimePicker = class TimePicker extends ControlElement {
     /**
      * Seconds time segment
      * @param seconds seconds value
+     * @default null
      * @returns {void}
      */
     set seconds(seconds) {

package/lib/toggle/custom-elements.json

@@ -20,19 +20,20 @@
         {
           "name": "checked",
           "description": "Value of toggle",
-          "type": "boolean"
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "readonly",
           "description": "Set readonly state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "disabled",
           "description": "Set disabled state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "properties": [
@@ -54,21 +55,22 @@
           "name": "checked",
           "attribute": "checked",
           "description": "Value of toggle",
-          "type": "boolean"
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "readonly",
           "attribute": "readonly",
           "description": "Set readonly state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "disabled",
           "attribute": "disabled",
           "description": "Set disabled state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "events": [

package/lib/toggle/custom-elements.md

@@ -0,0 +1,19 @@
+# ef-toggle
+
+Form control that can toggle between 2 states
+
+## Properties
+
+| Property       | Attribute       | Type      | Default | Description             |
+|----------------|-----------------|-----------|---------|-------------------------|
+| `checked`      | `checked`       | `boolean` | false   | Value of toggle         |
+| `checkedLabel` | `checked-label` | `string`  | ""      | Label of toggle checked |
+| `disabled`     | `disabled`      | `boolean` | false   | Set disabled state      |
+| `label`        | `label`         | `string`  | ""      | Label of toggle         |
+| `readonly`     | `readonly`      | `boolean` | false   | Set readonly state      |
+
+## Events
+
+| Event             | Description                                |
+|-------------------|--------------------------------------------|
+| `checked-changed` | Fired when the `checked` property changes. |

package/lib/toggle/index.d.ts

@@ -17,7 +17,7 @@ export declare class Toggle extends ControlElement {
      * @returns version number
      */
     static get version(): string;
-    protected readonly defaultRole = "switch";
+    protected readonly defaultRole: string | null;
     /**
      * Label of toggle checked
      */
@@ -30,6 +30,7 @@ export declare class Toggle extends ControlElement {
     /**
      * Value of toggle
      * @param value new checked value
+     * @default false
      */
     set checked(value: boolean);
     get checked(): boolean;

package/lib/toggle/index.js

@@ -53,6 +53,7 @@ let Toggle = class Toggle extends ControlElement {
     /**
      * Value of toggle
      * @param value new checked value
+     * @default false
      */
     set checked(value) {
         const oldValue = this._checked;

package/lib/tooltip/custom-elements.md

@@ -0,0 +1,14 @@
+# ef-tooltip
+
+Tooltip displays extra information when the
+user hovers the pointer over an item.
+
+## Properties
+
+| Property          | Attribute          | Type                                             | Default | Description                                      |
+|-------------------|--------------------|--------------------------------------------------|---------|--------------------------------------------------|
+| `condition`       |                    | `TooltipCondition`                               |         | Provide a function to test against the target.<br />Return `true` if the target matches |
+| `position`        | `position`         | `"auto" \| "above" \| "right" \| "below" \| "left"` | "auto"  | The position of the tooltip. Use the following values:<br />`auto` (default) - display based on mouse enter coordinates<br />`above` - display above the element<br />`right` - display to the right of the element<br />`below` - display beneath the element<br />`left` - display to the left of the element |
+| `renderer`        |                    | `TooltipRenderer`                                |         | A renderer to define tooltip internal content.<br />Return undefined, `String`, `HTMLElement` or `DocumentFragment`.<br />If the content is not present, tooltip will not be displayed |
+| `selector`        | `selector`         | `string`                                         | ""      | CSS selector to match the tooltip                |
+| `transitionStyle` | `transition-style` | `TooltipTransitionStyle`                         | "fade"  | Set the transition style.<br />Value can be `fade`, `zoom`, `slide-down`, `slide-up`, `slide-right`,<br />`slide-left`, `slide-right-down`, `slide-right-up`, `slide-left-down`, `slide-left-up`, or null in case of no transition |

package/lib/tornado-chart/custom-elements.md

@@ -0,0 +1,18 @@
+# ef-tornado-chart
+
+A data visualization that helps to
+show the differences or similarities between values
+
+## Properties
+
+| Property    | Attribute   | Type             | Default | Description                     |
+|-------------|-------------|------------------|---------|---------------------------------|
+| `primary`   | `primary`   | `string \| null` | null    | Primary bar chart legend text   |
+| `secondary` | `secondary` | `string \| null` | null    | Secondary bar chart legend text |
+
+## Slots
+
+| Name     | Description                                      |
+|----------|--------------------------------------------------|
+| `footer` | Any HTML contents to display at chart footer section |
+| `header` | Any HTML contents to display at chart header section |

package/lib/tree/custom-elements.json

@@ -27,7 +27,7 @@
           "name": "stateless",
           "description": "Disable selections",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "properties": [
@@ -61,7 +61,8 @@
         {
           "name": "values",
           "description": "Selected items in tree",
-          "type": "string[]"
+          "type": "string[]",
+          "default": "[]"
         },
         {
           "name": "data",
@@ -73,7 +74,7 @@
           "attribute": "stateless",
           "description": "Disable selections",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "events": [

package/lib/tree/custom-elements.md

@@ -0,0 +1,32 @@
+# ef-tree
+
+Displays a tree structure
+to be used for menus and group selections
+
+## Properties
+
+| Property     | Attribute     | Type           | Default                  | Description                                      |
+|--------------|---------------|----------------|--------------------------|--------------------------------------------------|
+| `data`       |               | `TreeData<T>`  |                          | Data object to be used for creating tree         |
+| `multiple`   | `multiple`    | `boolean`      | false                    | Allows multiple items to be selected             |
+| `noRelation` | `no-relation` | `boolean`      | false                    | Breaks the relationship when multiple<br />selection mode is enabled |
+| `query`      | `query`       | `string`       | ""                       | Query string applied to tree                     |
+| `renderer`   |               | `TreeRenderer` | "new TreeRenderer(this)" | Renderer used for generating tree items          |
+| `stateless`  | `stateless`   | `boolean`      | false                    | Disable selections                               |
+| `values`     |               | `string[]`     | []                       | Selected items in tree                           |
+
+## Methods
+
+| Method        | Type       | Description                 |
+|---------------|------------|-----------------------------|
+| `checkAll`    | `(): void` | Checks all editable items   |
+| `collapseAll` | `(): void` | Collapses all groups        |
+| `expandAll`   | `(): void` | Expands all groups          |
+| `uncheckAll`  | `(): void` | Unchecks all editable items |
+
+## Events
+
+| Event              | Description                                      |
+|--------------------|--------------------------------------------------|
+| `expanded-changed` | Fired when an item's expanded state has changed. |
+| `value-changed`    | Fired when the users changed selection item.     |

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

@@ -166,6 +166,7 @@ export declare class Tree<T extends TreeDataItem = TreeDataItem> extends List<T>
      * Selected items in tree
      * @override
      * @type {string[]}
+     * @default []
      */
     get values(): string[];
     set values(value: string[]);

package/lib/tree/elements/tree.js

@@ -359,6 +359,7 @@ let Tree = class Tree extends List {
      * Selected items in tree
      * @override
      * @type {string[]}
+     * @default []
      */
     get values() {
         return this.manager.checkedItems.map(item => {

package/lib/tree/managers/tree-manager.d.ts

@@ -78,6 +78,24 @@ export declare class TreeManager<T extends TreeDataItem> {
      * @returns `True` if the item is checked
      */
     private isItemChecked;
+    /**
+     * Is the item checked indeterminately?
+     * @param item Original data item
+     * @returns `True` if the item has managed relationships and contains checked descendants
+     */
+    private isItemCheckedIndeterminate;
+    /**
+     * Determines whether the item is unchecked and can be changed to a checked state.
+     * @param item Original data item
+     * @returns True if the item can be changed to 'checked'.
+     */
+    private canCheckItem;
+    /**
+     * Determines whether the item is checked and can be changed to an unchecked state.
+     * @param item Original data item
+     * @returns True if the item can be changed to 'unchecked'.
+     */
+    private canUncheckItem;
     /**
      * Makes an item visible
      * @param item Original data item
@@ -92,10 +110,10 @@ export declare class TreeManager<T extends TreeDataItem> {
     private hideItem;
     /**
      * Forces a modification event, so that the renderer can update.
-     * @param item Item of which to find ancestors
+     * @param item Item of which to find path
      * @returns {void}
      */
-    private forceUpdateOnAncestors;
+    private forceUpdateOnPath;
     /**
      * Sets the mode (algorithm) the manager should use
      * @param mode Tree manager mode

package/lib/tree/managers/tree-manager.js

@@ -48,7 +48,10 @@ export class TreeManager {
      */
     get checkedItems() {
         return this.composer.queryItems((item) => {
-            return this.isItemChecked(item) && (!this.manageRelationships || !this.getItemChildren(item).length);
+            if (this.manageRelationships && this.isItemParent(item)) {
+                return false;
+            }
+            return this.isItemChecked(item);
         }, Infinity);
     }
     /**
@@ -112,8 +115,44 @@ export class TreeManager {
      * @returns `True` if the item is checked
      */
     isItemChecked(item) {
+        if (this.manageRelationships && this.isItemParent(item)) {
+            return !this.getItemChildren(item).some(child => !this.isItemChecked(child));
+        }
         return this.composer.getItemPropertyValue(item, 'selected') === true;
     }
+    /**
+     * Is the item checked indeterminately?
+     * @param item Original data item
+     * @returns `True` if the item has managed relationships and contains checked descendants
+     */
+    isItemCheckedIndeterminate(item) {
+        if (this.manageRelationships && this.isItemParent(item)) {
+            return this.getItemDescendants(item).some(desc => this.isItemChecked(desc));
+        }
+        return false;
+    }
+    /**
+     * Determines whether the item is unchecked and can be changed to a checked state.
+     * @param item Original data item
+     * @returns True if the item can be changed to 'checked'.
+     */
+    canCheckItem(item) {
+        if (this.manageRelationships && this.isItemParent(item)) {
+            return this.getItemChildren(item).some(child => this.canCheckItem(child));
+        }
+        return this.isItemCheckable(item) && this.composer.getItemPropertyValue(item, 'selected') !== true;
+    }
+    /**
+     * Determines whether the item is checked and can be changed to an unchecked state.
+     * @param item Original data item
+     * @returns True if the item can be changed to 'unchecked'.
+     */
+    canUncheckItem(item) {
+        if (this.manageRelationships && this.isItemParent(item)) {
+            return this.getItemChildren(item).some(child => this.canUncheckItem(child));
+        }
+        return this.isItemCheckable(item) && this.composer.getItemPropertyValue(item, 'selected') === true;
+    }
     /**
      * Makes an item visible
      * @param item Original data item
@@ -133,15 +172,12 @@ export class TreeManager {
     }
     /**
      * Forces a modification event, so that the renderer can update.
-     * @param item Item of which to find ancestors
+     * @param item Item of which to find path
      * @returns {void}
      */
-    forceUpdateOnAncestors(item) {
-        this.composer.getItemAncestors(item).forEach(ancestor => {
-            const allSelected = !this.getItemChildren(ancestor).some(child => this.isItemCheckable(child) && !this.isItemChecked(child));
-            this.composer.setItemPropertyValue(ancestor, 'selected', allSelected);
-            this.updateItem(ancestor);
-        });
+    forceUpdateOnPath(item) {
+        const path = [...this.getItemAncestors(item), item];
+        path.forEach(item => this.composer.updateItemTimestamp(item));
     }
     /**
      * Sets the mode (algorithm) the manager should use
@@ -221,16 +257,13 @@ export class TreeManager {
      * @returns Checked state of the item
      */
     getItemCheckedState(item) {
-        const descendants = this.getItemDescendants(item).filter(descendant => !this.composer.isItemLocked(descendant));
-        const isParent = descendants.length > 0;
-        if (isParent && this.manageRelationships) {
-            const checkedCount = descendants.reduce((count, item) => {
-                return count + (this.isItemChecked(item) === true ? 1 : 0);
-            }, 0);
-            return !checkedCount ? CheckedState.UNCHECKED
-                : checkedCount === descendants.length ? CheckedState.CHECKED : CheckedState.INDETERMINATE;
+        if (this.isItemChecked(item)) {
+            return CheckedState.CHECKED;
         }
-        return this.isItemChecked(item) === true ? CheckedState.CHECKED : CheckedState.UNCHECKED;
+        if (this.isItemCheckedIndeterminate(item)) {
+            return CheckedState.INDETERMINATE;
+        }
+        return CheckedState.UNCHECKED;
     }
     /**
      * Gets an item's ancestors
@@ -308,17 +341,14 @@ export class TreeManager {
         return this._checkItem(item);
     }
     _checkItem(item, manageRelationships = this.manageRelationships) {
-        if (this.isItemCheckable(item) && !this.isItemChecked(item)) {
+        if (this.canCheckItem(item)) {
             this.composer.setItemPropertyValue(item, 'selected', true);
             if (manageRelationships) {
-                this.forceUpdateOnAncestors(item);
+                this.forceUpdateOnPath(item);
                 this.getItemDescendants(item).forEach(descendant => this._checkItem(descendant, false));
             }
             return true;
         }
-        if (this.isItemParent(item)) {
-            this.updateItem(item); // update parent checked state
-        }
         return false;
     }
     /**
@@ -330,17 +360,14 @@ export class TreeManager {
         return this._uncheckItem(item);
     }
     _uncheckItem(item, manageRelationships = this.manageRelationships) {
-        if (this.isItemCheckable(item) && this.isItemChecked(item)) {
+        if (this.canUncheckItem(item)) {
             this.composer.setItemPropertyValue(item, 'selected', false);
             if (manageRelationships) {
-                this.forceUpdateOnAncestors(item);
+                this.forceUpdateOnPath(item);
                 this.getItemDescendants(item).forEach(descendant => this._uncheckItem(descendant, false));
             }
             return true;
         }
-        if (this.isItemParent(item)) {
-            this.updateItem(item); // update parent checked state
-        }
         return false;
     }
     /**
@@ -349,7 +376,7 @@ export class TreeManager {
      * @returns `True` if the item is modified
      */
     toggleItem(item) {
-        return this.isItemChecked(item) ? this.uncheckItem(item) : this.checkItem(item);
+        return this.checkItem(item) || this.uncheckItem(item);
     }
     /**
      * Checks all items

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

@@ -2,6 +2,6 @@ import '@refinitiv-ui/elements/lib/checkbox/themes/halo/dark';
 import '@refinitiv-ui/elements/lib/icon/themes/halo/dark';
 import '@refinitiv-ui/elements/lib/item/themes/halo/dark';
 
-elf.customStyles.define('ef-tree-item', '@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){:host(:after){content:\'\';min-height:inherit;font-size:0}}:host([selected]){color:#fff;font-weight:500}:host([readonly]){cursor:default}:host([focused]),:host([highlighted]){background-color:#334bff;color:#fff}:host([focused]:not([selected])),:host([highlighted]:not([selected])){color:#fff}:host [part=center],:host [part=sub-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host([disabled]){color:rgba(204,204,204,.5)}:host([type=divider]),:host([type=header]){pointer-events:none;min-height:auto}:host([type=divider]) [part=sub-label],:host([type=header]) [part=sub-label]{display:none}:host([type=header]){color:#999;background-color:transparent;font-size:83%;font-weight:500;border:none;height:24px;align-items:flex-end;margin:0;min-height:0;text-transform:uppercase}:host([type=divider]){border:none;padding:0;margin:0;height:5px;background:linear-gradient(#404040,#404040) 0 center/calc(100% - (0px * 2)) 1px no-repeat}:host [part=checkbox],:host [part=icon],:host [part=left] ::slotted(*){margin:0 .5em 0 0}:host [part=right] ::slotted(*){margin-left:.5em}:host{outline:0;cursor:pointer;padding:0 8px;min-height:24px;box-sizing:border-box;touch-action:manipulation;min-width:300px;display:flex;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-top:-1px;border-top:1px solid #404040;border-bottom:1px solid #404040;background-color:#1a1a1a;min-height:28px}:host(:after){content:\'\';min-height:inherit;font-size:0}:host [part=indent]{height:0;width:0;flex:none}:host [part=toggle]{width:24px;height:24px;margin-top:-4px;margin-bottom:-4px;margin-left:-4px;max-height:100%;display:flex;align-items:center;justify-content:center;flex:none}:host [part~=toggle-icon]{transition:transform .1s}:host [part~=toggle-icon-expanded]{transform:rotate(90deg)}:host [part=checkbox]{margin:0 8px 0 0;flex:none}:host [part=label]{padding:4px 8px;word-break:break-word;line-height:1.2}:host([type=header]){align-items:center}:host [part=sub-label]{font-size:90%}:host([sub-label]){padding:4px 8px}:host([selected]:not([highlighted]):not([focused])){background-color:#333}:host([selected]:not([multiple])){background-image:linear-gradient(#334bff,#334bff);background-size:4px 100%;background-position:left top;background-repeat:no-repeat}:host([selected][focused]),:host([selected][highlighted]){color:#fff}:host([group]:not([focused]):not([highlighted])){background-color:#262626}:host([group][focused]:not([multiple])),:host([group][highlighted]:not([multiple])){color:#fff;background-color:#333}:host [part=indent]{font-size:20px}');
+elf.customStyles.define('ef-tree-item', '@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){:host(:after){content:\'\';min-height:inherit;font-size:0}}:host([selected]){color:#fff;font-weight:500}:host([readonly]){cursor:default}:host([focused]),:host([highlighted]){background-color:#334bff;color:#fff}:host([focused]:not([selected])),:host([highlighted]:not([selected])){color:#fff}:host [part=center],:host [part=sub-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host([disabled]){color:rgba(204,204,204,.5)}:host([type=divider]),:host([type=header]){pointer-events:none;min-height:auto}:host([type=divider]) [part=sub-label],:host([type=header]) [part=sub-label]{display:none}:host([type=header]){color:#999;background-color:transparent;font-size:83%;font-weight:500;border:none;height:24px;align-items:flex-end;margin:0;min-height:0;text-transform:uppercase}:host([type=divider]){border:none;padding:0;margin:0;height:5px;background:linear-gradient(#404040,#404040) 0 center/calc(100% - (0px * 2)) 1px no-repeat}:host [part=checkbox],:host [part=icon],:host [part=left] ::slotted(*){margin:0 .5em 0 0}:host [part=right] ::slotted(*){margin-left:.5em}:host{outline:0;cursor:pointer;padding:0 8px;min-height:24px;box-sizing:border-box;touch-action:manipulation;min-width:300px;display:flex;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-top:-1px;border-top:1px solid #404040;border-bottom:1px solid #404040;background-color:#1a1a1a;min-height:28px}:host(:after){content:\'\';min-height:inherit;font-size:0}:host [part=indent]{height:0;width:0;flex:none}:host [part=toggle]{width:24px;height:24px;margin-top:-4px;margin-bottom:-4px;margin-left:-4px;max-height:100%;display:flex;align-items:center;justify-content:center;flex:none}:host [part~=toggle-icon]{transition:transform .1s}:host [part~=toggle-icon-expanded]{transform:rotate(90deg)}:host [part=checkbox]{margin:0 8px 0 0;flex:none}:host [part=label]{word-break:break-word;padding:4px 6px 4px 0;line-height:1.2}:host([type=header]){align-items:center}:host [part=sub-label]{font-size:90%}:host([sub-label]){padding:4px 8px}:host([selected]:not([highlighted]):not([focused])){background-color:#333}:host([selected]:not([multiple])){background-image:linear-gradient(#334bff,#334bff);background-size:4px 100%;background-position:left top;background-repeat:no-repeat}:host([selected][focused]),:host([selected][highlighted]){color:#fff}:host([group]:not([focused]):not([highlighted])){background-color:#262626}:host([group][focused]:not([multiple])),:host([group][highlighted]:not([multiple])){color:#fff;background-color:#333}:host [part=indent]{font-size:20px}:host [part=label-icon]{margin:0 4px 0 0}');
 
 elf.customStyles.define('ef-tree', ':host{--item-indent:8px;--item-height:24px;color:#ccc;background-color:transparent;touch-action:manipulation;scrollbar-face-color:#595959;scrollbar-shadow-color:#595959;scrollbar-highlight-color:#595959;scrollbar-arrow-color:#595959;scrollbar-track-color:#1a1a1a;scrollbar-3dlight-color:#1a1a1a;scrollbar-darkshadow-color:#1a1a1a;scrollbar-color:#595959 #1a1a1a;scrollbar-width:thin;overflow-x:auto}:host(:focus){outline:0}:host([readonly]) [part=list-item]{cursor:default}::-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:#334bff}::-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,#334bff,#334bff);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,#334bff,#334bff);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:#334bff;border:1px solid #334bff}::-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:#334bff}::-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:#334bff}::-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:#334bff}::-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:#334bff}::-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/tree/themes/halo/light/index.js

@@ -2,6 +2,6 @@ import '@refinitiv-ui/elements/lib/checkbox/themes/halo/light';
 import '@refinitiv-ui/elements/lib/icon/themes/halo/light';
 import '@refinitiv-ui/elements/lib/item/themes/halo/light';
 
-elf.customStyles.define('ef-tree-item', '@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){:host(:after){content:\'\';min-height:inherit;font-size:0}}:host([selected]){color:#0d0d0d;font-weight:500}:host([readonly]){cursor:default}:host([focused]),:host([highlighted]){background-color:#334bff;color:#fff}:host([focused]:not([selected])),:host([highlighted]:not([selected])){color:#fff}:host [part=center],:host [part=sub-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host([disabled]){color:rgba(64,64,64,.5)}:host([type=divider]),:host([type=header]){pointer-events:none;min-height:auto}:host([type=divider]) [part=sub-label],:host([type=header]) [part=sub-label]{display:none}:host([type=header]){color:#737373;background-color:transparent;font-size:83%;font-weight:500;border:none;height:24px;align-items:flex-end;margin:0;min-height:0;text-transform:uppercase}:host([type=divider]){border:none;padding:0;margin:0;height:5px;background:linear-gradient(#d9d9d9,#d9d9d9) 0 center/calc(100% - (0px * 2)) 1px no-repeat}:host [part=checkbox],:host [part=icon],:host [part=left] ::slotted(*){margin:0 .5em 0 0}:host [part=right] ::slotted(*){margin-left:.5em}:host{outline:0;cursor:pointer;padding:0 8px;min-height:24px;box-sizing:border-box;touch-action:manipulation;min-width:300px;display:flex;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-top:-1px;border-top:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;background-color:#fafafa;min-height:28px}:host(:after){content:\'\';min-height:inherit;font-size:0}:host [part=indent]{height:0;width:0;flex:none}:host [part=toggle]{width:24px;height:24px;margin-top:-4px;margin-bottom:-4px;margin-left:-4px;max-height:100%;display:flex;align-items:center;justify-content:center;flex:none}:host [part~=toggle-icon]{transition:transform .1s}:host [part~=toggle-icon-expanded]{transform:rotate(90deg)}:host [part=checkbox]{margin:0 8px 0 0;flex:none}:host [part=label]{padding:4px 8px;word-break:break-word;line-height:1.2}:host([type=header]){align-items:center}:host [part=sub-label]{font-size:90%}:host([sub-label]){padding:4px 8px}:host([selected]:not([highlighted]):not([focused])){background-color:#e6e6e6}:host([selected]:not([multiple])){background-image:linear-gradient(#334bff,#334bff);background-size:4px 100%;background-position:left top;background-repeat:no-repeat}:host([selected][focused]),:host([selected][highlighted]){color:#fff}:host([group]:not([focused]):not([highlighted])){background-color:#f2f2f2}:host([group][focused]:not([multiple])),:host([group][highlighted]:not([multiple])){color:#0d0d0d;background-color:#e6e6e6}:host [part=indent]{font-size:20px}');
+elf.customStyles.define('ef-tree-item', '@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){:host(:after){content:\'\';min-height:inherit;font-size:0}}:host([selected]){color:#0d0d0d;font-weight:500}:host([readonly]){cursor:default}:host([focused]),:host([highlighted]){background-color:#334bff;color:#fff}:host([focused]:not([selected])),:host([highlighted]:not([selected])){color:#fff}:host [part=center],:host [part=sub-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host([disabled]){color:rgba(64,64,64,.5)}:host([type=divider]),:host([type=header]){pointer-events:none;min-height:auto}:host([type=divider]) [part=sub-label],:host([type=header]) [part=sub-label]{display:none}:host([type=header]){color:#737373;background-color:transparent;font-size:83%;font-weight:500;border:none;height:24px;align-items:flex-end;margin:0;min-height:0;text-transform:uppercase}:host([type=divider]){border:none;padding:0;margin:0;height:5px;background:linear-gradient(#d9d9d9,#d9d9d9) 0 center/calc(100% - (0px * 2)) 1px no-repeat}:host [part=checkbox],:host [part=icon],:host [part=left] ::slotted(*){margin:0 .5em 0 0}:host [part=right] ::slotted(*){margin-left:.5em}:host{outline:0;cursor:pointer;padding:0 8px;min-height:24px;box-sizing:border-box;touch-action:manipulation;min-width:300px;display:flex;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-top:-1px;border-top:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;background-color:#fafafa;min-height:28px}:host(:after){content:\'\';min-height:inherit;font-size:0}:host [part=indent]{height:0;width:0;flex:none}:host [part=toggle]{width:24px;height:24px;margin-top:-4px;margin-bottom:-4px;margin-left:-4px;max-height:100%;display:flex;align-items:center;justify-content:center;flex:none}:host [part~=toggle-icon]{transition:transform .1s}:host [part~=toggle-icon-expanded]{transform:rotate(90deg)}:host [part=checkbox]{margin:0 8px 0 0;flex:none}:host [part=label]{word-break:break-word;padding:4px 6px 4px 0;line-height:1.2}:host([type=header]){align-items:center}:host [part=sub-label]{font-size:90%}:host([sub-label]){padding:4px 8px}:host([selected]:not([highlighted]):not([focused])){background-color:#e6e6e6}:host([selected]:not([multiple])){background-image:linear-gradient(#334bff,#334bff);background-size:4px 100%;background-position:left top;background-repeat:no-repeat}:host([selected][focused]),:host([selected][highlighted]){color:#fff}:host([group]:not([focused]):not([highlighted])){background-color:#f2f2f2}:host([group][focused]:not([multiple])),:host([group][highlighted]:not([multiple])){color:#0d0d0d;background-color:#e6e6e6}:host [part=indent]{font-size:20px}:host [part=label-icon]{margin:0 4px 0 0}');
 
 elf.customStyles.define('ef-tree', ':host{--item-indent:8px;--item-height:24px;color:#404040;background-color:transparent;touch-action:manipulation;scrollbar-face-color:#999;scrollbar-shadow-color:#999;scrollbar-highlight-color:#999;scrollbar-arrow-color:#999;scrollbar-track-color:#f2f2f2;scrollbar-3dlight-color:#f2f2f2;scrollbar-darkshadow-color:#f2f2f2;scrollbar-color:#999 #f2f2f2;scrollbar-width:thin;overflow-x:auto}:host(:focus){outline:0}:host([readonly]) [part=list-item]{cursor:default}::-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:#334bff}::-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,#334bff,#334bff);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,#334bff,#334bff);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:#334bff;border:1px solid #334bff}::-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:#334bff}::-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:#334bff}::-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:#334bff}::-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:#334bff}::-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/tree/themes/solar/charcoal/index.js

@@ -2,6 +2,6 @@ import '@refinitiv-ui/elements/lib/checkbox/themes/solar/charcoal';
 import '@refinitiv-ui/elements/lib/icon/themes/solar/charcoal';
 import '@refinitiv-ui/elements/lib/item/themes/solar/charcoal';
 
-elf.customStyles.define('ef-tree-item', '@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){:host(:after){content:\'\';min-height:inherit;font-size:0}}:host([selected]){color:#f93}:host([readonly]){cursor:default}:host([focused]),:host([highlighted]){background-color:rgba(255,255,255,.1)}:host([focused]:not([selected])),:host([highlighted]:not([selected])){color:#fff}:host [part=center],:host [part=sub-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host([disabled]){color:rgba(194,194,194,.5)}:host([type=divider]),:host([type=header]){pointer-events:none;min-height:auto}:host([type=divider]) [part=sub-label],:host([type=header]) [part=sub-label]{display:none}:host([type=header]){color:#c2c2c2;background-color:#4a4a52;font-size:100%;font-weight:400;border:1px solid #0a0a0a;height:22px;align-items:flex-end;margin:0;min-height:0;text-transform:uppercase}:host([type=divider]){border:none;padding:0;margin:0;height:5px;background:linear-gradient(#2e2e33,#2e2e33) 0 center/calc(100% - (0px * 2)) 1px no-repeat}:host [part=checkbox],:host [part=icon],:host [part=left] ::slotted(*){margin:0 .5em 0 0}:host [part=right] ::slotted(*){margin-left:.5em}:host [part=sub-label]{font-size:80%}:host{outline:0;cursor:pointer;padding:0 7px;min-height:22px;box-sizing:border-box;touch-action:manipulation;min-width:300px;display:flex;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;min-height:29px;background-color:#151516;border-bottom:1px solid #0a0a0a}:host(:after){content:\'\';min-height:inherit;font-size:0}:host [part=indent]{height:0;width:0;flex:none;font-size:22px}:host [part=toggle]{width:22px;height:22px;margin-top:0;margin-bottom:0;margin-left:0;max-height:100%;display:flex;align-items:center;justify-content:center;flex:none}:host [part~=toggle-icon]{transition:transform .2s}:host [part~=toggle-icon-expanded]{transform:rotate(90deg)}:host [part=checkbox]{margin:0 5px 0 0;flex:none}:host [part=label]{padding:4px 5px;word-break:break-word}:host([depth="0"]){background-color:#212124}:host([highlighted]){background-color:#2e2d33}:host([focused=visible]){outline:#f93 dotted 1px;outline-offset:-1px;border-color:transparent}:host(:last-of-type){border-color:transparent}');
+elf.customStyles.define('ef-tree-item', '@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){:host(:after){content:\'\';min-height:inherit;font-size:0}}:host([selected]){color:#f93}:host([readonly]){cursor:default}:host([focused]),:host([highlighted]){background-color:rgba(255,255,255,.1)}:host([focused]:not([selected])),:host([highlighted]:not([selected])){color:#fff}:host [part=center],:host [part=sub-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host([disabled]){color:rgba(194,194,194,.5)}:host([type=divider]),:host([type=header]){pointer-events:none;min-height:auto}:host([type=divider]) [part=sub-label],:host([type=header]) [part=sub-label]{display:none}:host([type=header]){color:#c2c2c2;background-color:#4a4a52;font-size:100%;font-weight:400;border:1px solid #0a0a0a;height:22px;align-items:flex-end;margin:0;min-height:0;text-transform:uppercase}:host([type=divider]){border:none;padding:0;margin:0;height:5px;background:linear-gradient(#2e2e33,#2e2e33) 0 center/calc(100% - (0px * 2)) 1px no-repeat}:host [part=checkbox],:host [part=icon],:host [part=left] ::slotted(*){margin:0 .5em 0 0}:host [part=right] ::slotted(*){margin-left:.5em}:host [part=sub-label]{font-size:80%}:host{outline:0;cursor:pointer;padding:0 7px;min-height:22px;box-sizing:border-box;touch-action:manipulation;min-width:300px;display:flex;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;min-height:29px;background-color:#151516;border-bottom:1px solid #0a0a0a}:host(:after){content:\'\';min-height:inherit;font-size:0}:host [part=indent]{height:0;width:0;flex:none;font-size:22px}:host [part=toggle]{width:22px;height:22px;margin-top:0;margin-bottom:0;margin-left:0;max-height:100%;display:flex;align-items:center;justify-content:center;flex:none}:host [part~=toggle-icon]{transition:transform .2s}:host [part~=toggle-icon-expanded]{transform:rotate(90deg)}:host [part=checkbox]{flex:none;margin:0 8px 0 0}:host [part=label]{word-break:break-word;padding:4px 6px 4px 0}:host([depth="0"]){background-color:#212124}:host([highlighted]){background-color:#2e2d33}:host([focused=visible]){outline:#f93 dotted 1px;outline-offset:-1px;border-color:transparent}:host(:last-of-type){border-color:transparent}:host [part=label-icon]{margin:0 4px 0 0}');
 
 elf.customStyles.define('ef-tree', ':host{--item-indent:7px;--item-height:22px;color:#c2c2c2;background-color:transparent;touch-action:manipulation;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;overflow-x:auto}:host(:focus){outline:0}:host([readonly]) [part=list-item]{cursor:default}::-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}');