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

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/item/themes/halo/dark/index.js

@@ -1,4 +1,4 @@
-import '@refinitiv-ui/elements/lib/icon/themes/halo/dark';
-import '@refinitiv-ui/elements/lib/checkbox/themes/halo/dark';
+import '@refinitiv-ui/elements/icon/themes/halo/dark';
+import '@refinitiv-ui/elements/checkbox/themes/halo/dark';
 
 elf.customStyles.define('ef-item', ':host{outline:0;cursor:pointer;padding:0 8px;min-height:24px;box-sizing:border-box;touch-action:manipulation}@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;align-items:center}: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 [part=checkbox]{margin-right:8px}: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}');

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

@@ -1,4 +1,4 @@
-import '@refinitiv-ui/elements/lib/icon/themes/halo/light';
-import '@refinitiv-ui/elements/lib/checkbox/themes/halo/light';
+import '@refinitiv-ui/elements/icon/themes/halo/light';
+import '@refinitiv-ui/elements/checkbox/themes/halo/light';
 
 elf.customStyles.define('ef-item', ':host{outline:0;cursor:pointer;padding:0 8px;min-height:24px;box-sizing:border-box;touch-action:manipulation}@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;align-items:center}: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 [part=checkbox]{margin-right:8px}: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}');

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

@@ -1,4 +1,4 @@
-import '@refinitiv-ui/elements/lib/icon/themes/solar/charcoal';
-import '@refinitiv-ui/elements/lib/checkbox/themes/solar/charcoal';
+import '@refinitiv-ui/elements/icon/themes/solar/charcoal';
+import '@refinitiv-ui/elements/checkbox/themes/solar/charcoal';
 
 elf.customStyles.define('ef-item', ':host{outline:0;cursor:pointer;padding:0 7px;min-height:22px;box-sizing:border-box;touch-action:manipulation}@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;border:none;border-top:1px solid #0a0a0a;border-bottom:1px solid transparent;text-transform:none;align-items:center}: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=sub-label]{font-size:80%}:host [part=icon],:host [part=left] ::slotted(*){margin-right:.33em}:host [part=right] ::slotted(*){margin-left:.33em}');

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

@@ -1,4 +1,4 @@
-import '@refinitiv-ui/elements/lib/icon/themes/solar/pearl';
-import '@refinitiv-ui/elements/lib/checkbox/themes/solar/pearl';
+import '@refinitiv-ui/elements/icon/themes/solar/pearl';
+import '@refinitiv-ui/elements/checkbox/themes/solar/pearl';
 
 elf.customStyles.define('ef-item', ':host{outline:0;cursor:pointer;padding:0 7px;min-height:22px;box-sizing:border-box;touch-action:manipulation}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){:host(:after){content:\'\';min-height:inherit;font-size:0}}:host([selected]){color:#ee7600}:host([readonly]){cursor:default}:host([focused]),:host([highlighted]){background-color:rgba(0,0,0,.08)}:host([focused]:not([selected])),:host([highlighted]:not([selected])){color:#000}:host [part=center],:host [part=sub-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host([disabled]){color:rgba(72,72,72,.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:#484848;background-color:#f2f3f7;font-size:100%;font-weight:400;border:1px solid #d5d8db;height:22px;align-items:flex-end;margin:0;min-height:0;text-transform:uppercase;border:none;border-top:1px solid #d5d8db;border-bottom:1px solid transparent;text-transform:none;align-items:center}:host([type=divider]){border:none;padding:0;margin:0;height:5px;background:linear-gradient(#a9afba,#a9afba) 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=sub-label]{font-size:80%}:host [part=icon],:host [part=left] ::slotted(*){margin-right:.33em}:host [part=right] ::slotted(*){margin-left:.33em}');

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;
@@ -86,6 +86,11 @@ export declare class Label extends BasicElement {
      */
     protected render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-label': Label;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {

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/label/themes/halo/dark/index.js

@@ -1,3 +1,3 @@
-import '@refinitiv-ui/elements/lib/tooltip/themes/halo/dark';
+import '@refinitiv-ui/elements/tooltip/themes/halo/dark';
 
 elf.customStyles.define('ef-label', ':host([warning]){color:#ffc800}:host([error]),:host([error][warning]){color:#f5475b}');

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

@@ -1,3 +1,3 @@
-import '@refinitiv-ui/elements/lib/tooltip/themes/halo/light';
+import '@refinitiv-ui/elements/tooltip/themes/halo/light';
 
 elf.customStyles.define('ef-label', ':host([warning]){color:#cca000}:host([error]),:host([error][warning]){color:#d94255}');

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

@@ -1,3 +1,3 @@
-import '@refinitiv-ui/elements/lib/tooltip/themes/solar/charcoal';
+import '@refinitiv-ui/elements/tooltip/themes/solar/charcoal';
 
 elf.customStyles.define('ef-label', ':host([warning]){color:#f93}:host([error]),:host([error][warning]){color:#f5475b}');

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

@@ -1,3 +1,3 @@
-import '@refinitiv-ui/elements/lib/tooltip/themes/solar/pearl';
+import '@refinitiv-ui/elements/tooltip/themes/solar/pearl';
 
 elf.customStyles.define('ef-label', ':host([warning]){color:#f93}:host([error]),:host([error][warning]){color:#d94255}');

package/lib/layout/index.d.ts

@@ -91,6 +91,11 @@ export declare class Layout extends ResponsiveElement {
       */
     protected render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-layout': Layout;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {

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.d.ts

@@ -128,6 +128,11 @@ export declare class LedGauge extends BasicElement {
      */
     protected render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-led-gauge': LedGauge;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {

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/led-gauge/themes/halo/dark/index.js

@@ -1,3 +1,3 @@
-import '@refinitiv-ui/elements/lib/canvas/themes/halo/dark';
+import '@refinitiv-ui/elements/canvas/themes/halo/dark';
 
 elf.customStyles.define('ef-led-gauge', ':host{font-size:12px;--led-width:8px;--led-spacing:3px;--top-selected-color:#6678FF;--bottom-selected-color:#6678FF;--clash-color:#ffffff;--range-color:#c948a2;--neutral-color:#7a7a7a;--left-segment-color:#932b37;--center-left-segment-color:#60111a;--center-segment-color:#7a7a7a;--center-right-segment-color:#144628;--right-segment-color:#227642;height:68px;--led-width:5px;--led-spacing:1px;--left-segment-color:#B72536;--center-left-segment-color:#F5475B;--center-segment-color:#808080;--center-right-segment-color:#39C46E;--right-segment-color:#227542;--range-color:#6678FF;--top-selected-color:#6678FF;--bottom-selected-color:#F5475B}:host [part=label]{padding:3px}');

package/lib/led-gauge/themes/halo/light/index.js

@@ -1,3 +1,3 @@
-import '@refinitiv-ui/elements/lib/canvas/themes/halo/light';
+import '@refinitiv-ui/elements/canvas/themes/halo/light';
 
 elf.customStyles.define('ef-led-gauge', ':host{font-size:12px;--led-width:8px;--led-spacing:3px;--top-selected-color:#334BFF;--bottom-selected-color:#334BFF;--clash-color:#000000;--range-color:#fc73d2;--neutral-color:#b8b8b8;--left-segment-color:#B63243;--center-left-segment-color:#f3c5cb;--center-segment-color:#b8b8b8;--center-right-segment-color:#a8e2be;--right-segment-color:#246B3E;height:68px;--led-width:5px;--led-spacing:1px;--left-segment-color:#B63243;--center-left-segment-color:#D94255;--center-segment-color:#808080;--center-right-segment-color:#309054;--right-segment-color:#246B3E;--range-color:#334BFF;--top-selected-color:#334BFF;--bottom-selected-color:#F5475B}:host [part=label]{padding:3px}');

package/lib/led-gauge/themes/solar/charcoal/index.js

@@ -1,3 +1,3 @@
-import '@refinitiv-ui/elements/lib/canvas/themes/solar/charcoal';
+import '@refinitiv-ui/elements/canvas/themes/solar/charcoal';
 
 elf.customStyles.define('ef-led-gauge', ':host{--led-width:8px;--led-spacing:3px;--top-selected-color:#FF9933;--bottom-selected-color:#FF9933;--clash-color:#ffffff;--range-color:#c948a2;--neutral-color:#747474;--left-segment-color:#932b37;--center-left-segment-color:#521822;--center-segment-color:#747474;--center-right-segment-color:#11472d;--right-segment-color:#227642;height:68px;font-size:10px;--led-width:5px;--led-spacing:4px;--top-selected-color:#FF9933;--bottom-selected-color:#46A0F0;--range-color:#2277AA}:host [part=label]{padding:2px}');

package/lib/led-gauge/themes/solar/pearl/index.js

@@ -1,3 +1,3 @@
-import '@refinitiv-ui/elements/lib/canvas/themes/solar/pearl';
+import '@refinitiv-ui/elements/canvas/themes/solar/pearl';
 
 elf.customStyles.define('ef-led-gauge', ':host{--led-width:8px;--led-spacing:3px;--top-selected-color:#EE7600;--bottom-selected-color:#EE7600;--clash-color:#000000;--range-color:#fc73d2;--neutral-color:#e2e4e6;--left-segment-color:#D94255;--center-left-segment-color:#f4b0bc;--center-segment-color:#e2e4e6;--center-right-segment-color:#a7e7c9;--right-segment-color:#309054;height:68px;font-size:10px;--led-width:5px;--led-spacing:4px;--top-selected-color:#EE7600;--bottom-selected-color:#0080F0;--range-color:#00B0FF}:host [part=label]{padding:2px}');

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
@@ -297,6 +298,11 @@ export declare class List<T extends DataItem = ItemData> extends ControlElement
      */
     protected render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-list': List;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {