@refinitiv-ui/elements 5.12.2 → 6.0.0-next.0

package/lib/item/index.d.ts

@@ -44,19 +44,10 @@ export declare class Item extends ControlElement {
      * Set the icon name from the ef-icon list
      */
     icon: string | null;
-    private _selected;
     /**
      * Indicates that the item is selected
-     * @param value selected value
-     * @default false
      */
-    set selected(value: boolean);
-    get selected(): boolean;
-    /**
-     * Aria indicating current select state
-     * @ignore
-     */
-    ariaSelected: string;
+    selected: boolean;
     /**
      * Is the item part of a multiple selection
      */
@@ -93,10 +84,26 @@ export declare class Item extends ControlElement {
      */
     private checkSlotChildren;
     /**
-     * @override
+     * Handles aria-selected or aria-checked when toggle between single and multiple selection mode
+     * @returns {void}
+     **/
+    private multipleChanged;
+    /**
+     * Handles aria when selected state changes
      * @returns {void}
      */
-    protected update(changedProperties: PropertyValues): void;
+    private selectedChanged;
+    /**
+     * Control State behaviour will update tabindex based on the property
+     * @returns {void}
+     */
+    private typeChanged;
+    /**
+     * Invoked before update() to compute values needed during the update.
+     * @param changedProperties changed properties
+     * @returns {void}
+     */
+    protected willUpdate(changedProperties: PropertyValues): void;
     /**
      * Get icon template if icon attribute is defined
      */
@@ -131,11 +138,6 @@ export declare class Item extends ControlElement {
      * @returns whether element is truncated or not
      */
     get isTruncated(): boolean;
-    /**
-     * Control State behaviour will update tabindex based on the property
-     * @returns {void}
-     */
-    private typeChanged;
     /**
      * A `TemplateResult` that will be used
      * to render the updated internal template.

package/lib/item/index.js

@@ -1,17 +1,14 @@
 import { __decorate } from "tslib";
 import { ControlElement, css, html } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
-import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
+import { query } from '@refinitiv-ui/core/decorators/query.js';
 import { VERSION } from '../version.js';
 import '../icon/index.js';
 import '../checkbox/index.js';
 export * from './helpers/types';
-const isAllWhitespaceTextNode = (node) => {
-    var _a;
-    return node.nodeType === document.TEXT_NODE
-        && !((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim());
-};
+const isAllWhitespaceTextNode = (node) => node.nodeType === document.TEXT_NODE
+    && !node.textContent?.trim();
 /**
  * Used as a basic building block to compose complex custom elements,
  * additionally it can be used by applications
@@ -43,12 +40,10 @@ let Item = class Item extends ControlElement {
          * Set the icon name from the ef-icon list
          */
         this.icon = null;
-        this._selected = false;
         /**
-         * Aria indicating current select state
-         * @ignore
+         * Indicates that the item is selected
          */
-        this.ariaSelected = 'false';
+        this.selected = false;
         /**
          * Is the item part of a multiple selection
          */
@@ -114,22 +109,6 @@ let Item = class Item extends ControlElement {
       }
     `;
     }
-    /**
-     * Indicates that the item is selected
-     * @param value selected value
-     * @default false
-     */
-    set selected(value) {
-        const oldValue = this._selected;
-        if (oldValue !== value) {
-            this._selected = value;
-            this.ariaSelected = String(value);
-            void this.requestUpdate('selected', oldValue);
-        }
-    }
-    get selected() {
-        return this._selected;
-    }
     /**
      * @param node that should be checked
      * @returns whether node can be ignored.
@@ -139,14 +118,48 @@ let Item = class Item extends ControlElement {
             || isAllWhitespaceTextNode(node);
     }
     /**
-     * @override
+     * Handles aria-selected or aria-checked when toggle between single and multiple selection mode
+     * @returns {void}
+     **/
+    multipleChanged() {
+        this.removeAttribute(this.multiple ? 'aria-selected' : 'aria-checked');
+        this.selectedChanged();
+    }
+    /**
+     * Handles aria when selected state changes
+     * @returns {void}
+     */
+    selectedChanged() {
+        this.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', String(this.selected));
+    }
+    /**
+     * Control State behaviour will update tabindex based on the property
+     * @returns {void}
+     */
+    typeChanged() {
+        const noInteraction = this.type === 'header' || this.type === 'divider' || this.disabled;
+        if (noInteraction) {
+            this.disableFocus();
+        }
+        else if (!this.disabled) {
+            this.enableFocus();
+        }
+    }
+    /**
+     * Invoked before update() to compute values needed during the update.
+     * @param changedProperties changed properties
      * @returns {void}
      */
-    update(changedProperties) {
+    willUpdate(changedProperties) {
         if (changedProperties.has('type')) {
             this.typeChanged();
         }
-        super.update(changedProperties);
+        if (changedProperties.has('multiple')) {
+            this.multipleChanged();
+        }
+        else if (changedProperties.has('selected')) {
+            this.selectedChanged();
+        }
     }
     /**
      * Get icon template if icon attribute is defined
@@ -197,19 +210,6 @@ let Item = class Item extends ControlElement {
     get isTruncated() {
         return !!(this.labelEl && (this.labelEl.offsetWidth < this.labelEl.scrollWidth));
     }
-    /**
-     * Control State behaviour will update tabindex based on the property
-     * @returns {void}
-     */
-    typeChanged() {
-        const noInteraction = this.type === 'header' || this.type === 'divider' || this.disabled;
-        if (noInteraction) {
-            this.disableFocus();
-        }
-        else if (!this.disabled) {
-            this.enableFocus();
-        }
-    }
     /**
      * A `TemplateResult` that will be used
      * to render the updated internal template.
@@ -245,10 +245,7 @@ __decorate([
 ], Item.prototype, "icon", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], Item.prototype, "selected", null);
-__decorate([
-    property({ type: String, reflect: true, attribute: 'aria-selected' })
-], Item.prototype, "ariaSelected", void 0);
+], Item.prototype, "selected", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], Item.prototype, "multiple", void 0);

package/lib/label/index.d.ts

@@ -63,7 +63,7 @@ export declare class Label extends BasicElement {
     protected shouldShowTooltip(tooltipTarget: HTMLElement): boolean;
     /**
      * Handles any modifications to the internal HTML
-     * @param [mutation=false] is the request from a mutation event?
+     * @param [mutation=false] is the request from a mutation event ? ( reserved for future used )
      * @returns {void}
      */
     protected recalculate(mutation?: boolean): void;

package/lib/label/index.js

@@ -1,10 +1,10 @@
 import { __decorate } from "tslib";
 import { BasicElement, html, css } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
-import { styleMap } from '@refinitiv-ui/core/lib/directives/style-map.js';
+import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
+import { styleMap } from '@refinitiv-ui/core/directives/style-map.js';
 import { VERSION } from '../version.js';
-import { isIE } from '@refinitiv-ui/utils/lib/browser.js';
+import { isIE } from '@refinitiv-ui/utils/browser.js';
 import { addTooltipCondition, removeTooltipCondition } from '../tooltip/index.js';
 /**
  * Configuration object
@@ -149,11 +149,11 @@ let Label = class Label extends BasicElement {
     }
     /**
      * Handles any modifications to the internal HTML
-     * @param [mutation=false] is the request from a mutation event?
+     * @param [mutation=false] is the request from a mutation event ? ( reserved for future used )
      * @returns {void}
      */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     recalculate(mutation = false) {
-        mutation; // keeping here for future use
         const oldValue = this.text;
         const raw = this.textContent || '';
         this.chunks = raw.split(_).map(chunk => chunk.trim()).filter(chunk => chunk);

package/lib/layout/index.js

@@ -1,7 +1,7 @@
 import { __decorate } from "tslib";
 import { ResponsiveElement, html, css } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { VERSION } from '../version.js';
 /**
  * Layout component for creating responsive applications and components

package/lib/led-gauge/index.js

@@ -1,7 +1,7 @@
 import { __decorate } from "tslib";
 import { BasicElement, html, css } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+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 '../canvas/index.js';
 const ZERO_MAP = {

package/lib/list/custom-elements.json

@@ -11,12 +11,6 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "aria-multiselectable",
-          "description": "Aria indicating that list supports multiple selection",
-          "type": "string",
-          "default": "false"
-        },
         {
           "name": "multiple",
           "description": "Allow multiple selections",
@@ -50,13 +44,6 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "ariaMultiselectable",
-          "attribute": "aria-multiselectable",
-          "description": "Aria indicating that list supports multiple selection",
-          "type": "string",
-          "default": "false"
-        },
         {
           "name": "multiple",
           "attribute": "multiple",

package/lib/list/custom-elements.md

@@ -4,16 +4,15 @@ Provides listing and immutable selection
 
 ## Properties
 
-| Property                    | Attribute              | Type           | Default                  | Description                                      |
-|-----------------------------|------------------------|----------------|--------------------------|--------------------------------------------------|
-| `ariaMultiselectable`       | `aria-multiselectable` | `string`       | false                    | Aria indicating that list supports multiple selection |
-| `data`                      |                        | `ListData`     | null                     | The data object, used to render the list.        |
-| `delegatesFocus (readonly)` |                        | `false`        | false                    | Element focus delegation.<br />Set to `false` and relies on native focusing. |
-| `multiple`                  | `multiple`             | `boolean`      | false                    | Allow multiple selections                        |
-| `renderer`                  |                        | `ListRenderer` | "new ListRenderer(this)" | Renderer used to render list item elements       |
-| `stateless`                 | `stateless`            | `boolean`      | false                    | Disable selections                               |
-| `value`                     | `value`                | `string`       | ""                       | Returns the first selected item value.<br />Use `values` when multiple selection mode is enabled. |
-| `values`                    |                        | `string[]`     | []                       | Returns a values collection of the currently<br />selected item values |
+| Property                    | Attribute   | Type           | Default                  | Description                                      |
+|-----------------------------|-------------|----------------|--------------------------|--------------------------------------------------|
+| `data`                      |             | `ListData`     | null                     | The data object, used to render the list.        |
+| `delegatesFocus (readonly)` |             | `false`        | false                    | Element focus delegation.<br />Set to `false` and relies on native focusing. |
+| `multiple`                  | `multiple`  | `boolean`      | false                    | Allow multiple selections                        |
+| `renderer`                  |             | `ListRenderer` | "new ListRenderer(this)" | Renderer used to render list item elements       |
+| `stateless`                 | `stateless` | `boolean`      | false                    | Disable selections                               |
+| `value`                     | `value`     | `string`       | ""                       | Returns the first selected item value.<br />Use `values` when multiple selection mode is enabled. |
+| `values`                    |             | `string[]`     | []                       | Returns a values collection of the currently<br />selected item values |
 
 ## Methods
 

package/lib/list/helpers/item-id.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Combines prefix and a string to give unique item id used by aria-activedescendant
+ * @param prefix a unique randomly generated string
+ * @param value a string of valid item value
+ * @returns a unique item id
+ */
+declare const getItemId: (prefix: string, value: string | undefined) => string;
+export { getItemId };

package/lib/list/helpers/item-id.js

@@ -0,0 +1,13 @@
+/**
+ * Combines prefix and a string to give unique item id used by aria-activedescendant
+ * @param prefix a unique randomly generated string
+ * @param value a string of valid item value
+ * @returns a unique item id
+ */
+const getItemId = (prefix, value) => {
+    if (!prefix || !value) {
+        return '';
+    }
+    return `${prefix}-${value}`;
+};
+export { getItemId };

package/lib/list/helpers/{list-renderer.d.ts → renderer.d.ts}

@@ -5,5 +5,9 @@ import { Renderer } from '../renderer.js';
  * This is the default renderer for lists.
  */
 export declare class ListRenderer extends Renderer {
+    /**
+     * Renderer key prefix, used in combination with item value to give unique id to each item
+     */
+    key: string;
     constructor(context?: unknown);
 }

package/lib/list/helpers/{list-renderer.js → renderer.js}

@@ -1,4 +1,6 @@
+import { uuid } from '@refinitiv-ui/utils/uuid.js';
 import '../../item/index.js';
+import { getItemId } from './item-id.js';
 import { Renderer } from '../renderer.js';
 /**
  * Renders list items as `ef-item` elements.
@@ -21,6 +23,7 @@ export class ListRenderer extends Renderer {
             el.label = composer.getItemPropertyValue(item, 'label');
             el.subLabel = composer.getItemPropertyValue(item, 'subLabel');
             el.value = composer.getItemPropertyValue(item, 'value');
+            el.id = getItemId(this.key, el.value);
             el.icon = composer.getItemPropertyValue(item, 'icon');
             el.highlighted = composer.getItemPropertyValue(item, 'highlighted') === true;
             el.selected = composer.getItemPropertyValue(item, 'selected') === true;
@@ -29,9 +32,14 @@ export class ListRenderer extends Renderer {
             el.type = composer.getItemPropertyValue(item, 'type');
             el.multiple = !!context && context.multiple === true;
             const itemRole = el.type === 'text' || !el.type ? 'option' : 'presentation';
+            el.tabIndex = -1;
             el.setAttribute('role', itemRole);
             tooltip ? el.setAttribute('title', tooltip) : el.removeAttribute('title');
             return el;
         });
+        /**
+         * Renderer key prefix, used in combination with item value to give unique id to each item
+         */
+        this.key = uuid();
     }
 }

package/lib/list/helpers/types.d.ts

@@ -1,3 +1,3 @@
-import type { CollectionComposer, DataItem } from '@refinitiv-ui/utils/lib/collection.js';
+import type { CollectionComposer, DataItem } from '@refinitiv-ui/utils/collection.js';
 import type { ItemData } from '../../item';
 export declare type ListData<T extends DataItem = ItemData> = T[] | CollectionComposer<T> | null;

package/lib/list/index.d.ts

@@ -1,9 +1,9 @@
 import { JSXInterface } from '../jsx';
 import { ControlElement, CSSResultGroup, PropertyValues, TapEvent, TemplateResult } from '@refinitiv-ui/core';
-import { CollectionComposer, DataItem } from '@refinitiv-ui/utils/lib/collection.js';
+import { CollectionComposer, DataItem } from '@refinitiv-ui/utils/collection.js';
 import type { ItemData } from '../item';
 import type { ListData } from './helpers/types';
-import { ListRenderer } from './helpers/list-renderer.js';
+import { ListRenderer } from './helpers/renderer.js';
 import '../item/index.js';
 export type { ListData };
 export { ListRenderer };
@@ -48,10 +48,6 @@ export declare class List<T extends DataItem = ItemData> extends ControlElement
      * Composer used to query and modify item state.
      */
     protected composer: CollectionComposer<T>;
-    /**
-     * Use default `tabindex` so that items are priority focus targets
-     */
-    protected readonly defaultTabIndex: null;
     /**
      * Element focus delegation.
      * Set to `false` and relies on native focusing.
@@ -66,10 +62,6 @@ export declare class List<T extends DataItem = ItemData> extends ControlElement
      * Disable selections
      */
     stateless: boolean;
-    /**
-     * Aria indicating that list supports multiple selection
-     */
-    ariaMultiselectable: string;
     /**
      * Allow multiple selections
      */
@@ -280,9 +272,18 @@ export declare class List<T extends DataItem = ItemData> extends ControlElement
      * @returns {void}
      */
     protected renderLightDOM(): void;
+    /**
+     * Invoked when the element is first updated. Implement to perform one time work on the element after update.
+     * @param changeProperties changed properties
+     * @returns {void}
+     */
     protected firstUpdated(changeProperties: PropertyValues): void;
-    protected update(changeProperties: PropertyValues): void;
-    protected updated(changedProperties: PropertyValues): void;
+    /**
+     * Invoked before update() to compute values needed during the update.
+     * @param changeProperties changed properties
+     * @returns {void}
+     */
+    protected willUpdate(changeProperties: PropertyValues): void;
     /**
      * A `CSSResultGroup` that will be used
      * to style the host, slotted children

package/lib/list/index.js

@@ -1,10 +1,11 @@
 import { __decorate } from "tslib";
 import { ControlElement, css, html, WarningNotice } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+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 { CollectionComposer } from '@refinitiv-ui/utils/lib/collection.js';
-import { ListRenderer } from './helpers/list-renderer.js';
+import { CollectionComposer } from '@refinitiv-ui/utils/collection.js';
+import { getItemId } from './helpers/item-id.js';
+import { ListRenderer } from './helpers/renderer.js';
 import '../item/index.js';
 export { ListRenderer };
 /**
@@ -49,10 +50,6 @@ let List = class List extends ControlElement {
          * Composer used to query and modify item state.
          */
         this.composer = new CollectionComposer([]);
-        /**
-         * Use default `tabindex` so that items are priority focus targets
-         */
-        this.defaultTabIndex = null;
         /**
          * Element focus delegation.
          * Set to `false` and relies on native focusing.
@@ -67,10 +64,6 @@ let List = class List extends ControlElement {
          * Disable selections
          */
         this.stateless = false;
-        /**
-         * Aria indicating that list supports multiple selection
-         */
-        this.ariaMultiselectable = 'false';
         /**
          * Allow multiple selections
          */
@@ -209,7 +202,7 @@ let List = class List extends ControlElement {
      * @returns {void}
      */
     first() {
-        const firstItem = this.itemMap.get(this.tabbableElements[0]);
+        const firstItem = this.itemMap.get(this.tabbableItems[0]);
         this.highlightItem(firstItem, true);
     }
     /**
@@ -217,7 +210,7 @@ let List = class List extends ControlElement {
      * @returns {void}
      */
     last() {
-        const lastItem = this.itemMap.get(this.tabbableElements[this.tabbableElements.length - 1]);
+        const lastItem = this.itemMap.get(this.tabbableItems[this.tabbableItems.length - 1]);
         this.highlightItem(lastItem, true);
     }
     /**
@@ -300,11 +293,10 @@ let List = class List extends ControlElement {
      */
     highlightItem(item, scrollToItem = false) {
         if (item) {
-            const elementToFocus = this.elementFromItem(item);
-            const focus = this.activeElement && this.activeElement !== elementToFocus;
             this.clearHighlighted();
             this.composer.setItemPropertyValue(item, 'highlighted', true);
-            focus && (elementToFocus === null || elementToFocus === void 0 ? void 0 : elementToFocus.focus({ preventScroll: true }));
+            const id = getItemId(this.renderer.key, item.value);
+            this.tabIndex >= 0 && id && this.setAttribute('aria-activedescendant', id);
             scrollToItem && this.scrollToItem(item);
         }
     }
@@ -312,8 +304,15 @@ let List = class List extends ControlElement {
      * Gets the available tabbable elements
      */
     get tabbableItems() {
-        return Array.from(this.children)
-            .filter((el) => el.tabIndex >= 0);
+        return Array.from(this.children).filter((el) => {
+            if (el instanceof HTMLElement) {
+                const role = el.getAttribute('role');
+                const isEnabled = !el.hasAttribute('disabled');
+                const isOption = role ? ['option', 'treeitem'].includes(role) : false;
+                return isOption && isEnabled;
+            }
+            return false;
+        });
     }
     /**
      * Returns the current focused element
@@ -443,6 +442,7 @@ let List = class List extends ControlElement {
      */
     onBlur() {
         this.clearHighlighted();
+        this.removeAttribute('aria-activedescendant');
     }
     /**
      * Tries to find a known item element,
@@ -564,6 +564,11 @@ let List = class List extends ControlElement {
             }
         });
     }
+    /**
+     * Invoked when the element is first updated. Implement to perform one time work on the element after update.
+     * @param changeProperties changed properties
+     * @returns {void}
+     */
     firstUpdated(changeProperties) {
         super.firstUpdated(changeProperties);
         this.addEventListener('keydown', this.onKeyDown);
@@ -573,15 +578,14 @@ let List = class List extends ControlElement {
         this.addEventListener('focusin', this.onFocus);
         this.addEventListener('focusout', this.onBlur);
     }
-    update(changeProperties) {
+    /**
+     * Invoked before update() to compute values needed during the update.
+     * @param changeProperties changed properties
+     * @returns {void}
+     */
+    willUpdate(changeProperties) {
         if (changeProperties.has('multiple')) {
             this.renderTimestamp.clear(); // force render of all items
-        }
-        return super.update(changeProperties);
-    }
-    updated(changedProperties) {
-        super.updated(changedProperties);
-        if (changedProperties.has('multiple')) {
             this.setAttribute('aria-multiselectable', this.multiple ? 'true' : 'false');
         }
     }
@@ -617,9 +621,6 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], List.prototype, "stateless", void 0);
-__decorate([
-    property({ type: String, reflect: true, attribute: 'aria-multiselectable' })
-], List.prototype, "ariaMultiselectable", void 0);
 __decorate([
     property({ type: Boolean })
 ], List.prototype, "multiple", void 0);

package/lib/list/renderer.d.ts

@@ -1,5 +1,5 @@
 import { ExtensibleFunction } from './extensible-function.js';
-import type { DataItem, CollectionComposer } from '@refinitiv-ui/utils/lib/collection.js';
+import type { DataItem, CollectionComposer } from '@refinitiv-ui/utils/collection.js';
 /**
  * Render function interface
  * TODO: Move this to @refinitiv-ui/utils

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

@@ -1,3 +1,3 @@
 import '@refinitiv-ui/elements/lib/item/themes/halo/dark';
 
-elf.customStyles.define('ef-list', ':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}: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}');
+elf.customStyles.define('ef-list', ':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}:host(:focus){outline:0}:host([focused=visible]){outline:#334bff solid 1px}: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}');