@refinitiv-ui/elements 5.10.0 → 5.10.2-build.1841524222.1.59

package/lib/tab-bar/index.js

@@ -1,14 +1,17 @@
 import { __decorate } from "tslib";
 import { html, css, ResponsiveElement } 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 { tweenAnimate } from './helpers/animate.js';
+import { Tab } from '../tab/index.js';
 import '../button/index.js';
 const BAR_TRAVEL_DISTANCE = 150; // scroll distance
 /**
  * Container for tabs
+ *
+ * @fires value-changed - Fired when the `value` changes.
  */
 let TabBar = class TabBar extends ResponsiveElement {
     constructor() {
@@ -25,6 +28,11 @@ let TabBar = class TabBar extends ResponsiveElement {
          * Use to switch from horizontal to vertical layout.
          */
         this.vertical = false;
+        /**
+         * Internal value of tab bar.
+         * Controlled by public setter and getter
+         */
+        this._value = '';
     }
     /**
      * Element version number
@@ -52,6 +60,23 @@ let TabBar = class TabBar extends ResponsiveElement {
       }
     `;
     }
+    /**
+     * Value of tab-bar, derived from value of an active tab.
+     * @param value Element value
+     * @default -
+     */
+    set value(value) {
+        value = typeof value === 'string' ? value : String(value);
+        const oldValue = this._value;
+        if (value !== oldValue && this.isValidValue(value)) {
+            this._value = value;
+            this.activateTab(value);
+            this.requestUpdate('value', oldValue);
+        }
+    }
+    get value() {
+        return this._value;
+    }
     /**
      * Called after the element’s DOM has been updated the first time.
      * register scroll event on content element to toggle scroll button
@@ -68,6 +93,7 @@ let TabBar = class TabBar extends ResponsiveElement {
                 this.toggleScrollButton(this.content.clientWidth);
             }, 66); // equal 15 fps for compatibility
         });
+        this.addEventListener('tap', this.onTap);
     }
     /**
      * Called when the element’s DOM has been updated and rendered
@@ -75,16 +101,9 @@ let TabBar = class TabBar extends ResponsiveElement {
      * @returns {void}
      */
     updated(changedProperties) {
-        /* istanbul ignore else */
         if (changedProperties.has('level')) {
             this.setLevel();
         }
-        if (changedProperties.has('vertical')) {
-            // if tab bar changed from horizontal to vertical
-            if (this.vertical) {
-                this.hideScrollButtons();
-            }
-        }
         super.updated(changedProperties);
     }
     /**
@@ -100,54 +119,131 @@ let TabBar = class TabBar extends ResponsiveElement {
         }
     }
     /**
-     * Hide all scroll buttons
-     * @returns {void}
+     * Return true if incoming value matches one of the existing tabs
+     * @param value Value to check
+     * @returns true if incoming value matches one of the existing tabs
      */
-    hideScrollButtons() {
-        this.leftBtn.style.setProperty('display', 'none');
-        this.rightBtn.style.setProperty('display', 'none');
+    isValidValue(value) {
+        const tabList = this.getFocusableTabs();
+        return tabList.some(tab => this.getTabValue(tab) === value);
     }
     /**
-     * Hide/Show scroll button when element is overflow.
-     * @param elementWidth width of element
+     * When the slot changes, set the level, toggle the scroll button, and set the value
      * @returns {void}
      */
-    toggleScrollButton(elementWidth) {
-        const { scrollLeft, scrollWidth } = this.content;
-        if (this.vertical) {
+    onSlotChange() {
+        const tabList = this.getFocusableTabs();
+        if (tabList.length < 1) {
             return;
         }
-        // handle left button
-        if (scrollLeft > 0) {
-            this.leftBtn.style.setProperty('display', 'flex');
+        this.setLevel();
+        // get tab value from active tab
+        const activeTab = tabList.find(tab => tab.active) || tabList[0];
+        if (activeTab) {
+            this.value = this.getTabValue(activeTab);
         }
-        else {
-            this.leftBtn.style.setProperty('display', 'none');
+    }
+    /**
+     * Mark tab as active
+     * @param value value of tab to select
+     * @returns {void}
+     */
+    activateTab(value) {
+        if (!value) {
+            return;
         }
-        // handle right button
-        if (Math.floor(scrollWidth - scrollLeft) > Math.round(elementWidth)) {
-            this.rightBtn.style.setProperty('display', 'flex');
+        let hasActiveTab = false;
+        const tabList = this.getTabElements(); // get all tab elements include disabled tab
+        tabList.forEach(tab => {
+            const tabValue = this.getTabValue(tab);
+            // only mark tab as active once
+            if (tabValue === value && !hasActiveTab && !tab.disabled) {
+                tab.active = true;
+                hasActiveTab = true;
+            }
+            else {
+                tab.active = false;
+            }
+        });
+    }
+    /**
+     * Set tab value and fires `tab-changed` event
+     * @param event - Event
+     * @returns {void}
+     */
+    onTap(event) {
+        if (event.defaultPrevented) {
+            return;
+        }
+        const element = event.target;
+        if (element instanceof Tab) {
+            const tabValue = this.getTabValue(element);
+            if (tabValue !== this.value) {
+                this.value = this.getTabValue(element);
+                this.notifyPropertyChange('value', tabValue);
+            }
         }
-        else {
-            this.rightBtn.style.setProperty('display', 'none');
+    }
+    /**
+     * Get the value of a tab
+     * @param tab - The tab element.
+     * @returns The value of the tab.
+     */
+    getTabValue(tab) {
+        return tab.value || (tab.hasAttribute('value') ? '' : this.getTabLabel(tab));
+    }
+    /**
+     * Return the tab's label, or its textContent, or an empty string
+     * @param tab - The tab element.
+     * @returns The tab label.
+     */
+    getTabLabel(tab) {
+        return tab.label || tab.textContent || '';
+    }
+    /**
+     * Get Tab elements from slot
+     * @returns the array of Tab
+     */
+    getTabElements() {
+        const tabs = [];
+        for (const child of this.children) {
+            if (child instanceof Tab) {
+                tabs.push(child);
+            }
         }
+        return tabs;
+    }
+    /**
+     * Get focusable tab elements
+     * @returns the array of focusable tab
+     */
+    getFocusableTabs() {
+        return this.getTabElements().filter(tab => !tab.disabled);
     }
     /**
      * Set tab level attribute accordingly
      * @returns {void}
      */
     setLevel() {
-        const tabList = this.querySelectorAll('ef-tab');
-        tabList.forEach((tab) => {
+        const tabList = this.getTabElements(); // get all tab elements include disabled tab
+        tabList === null || tabList === void 0 ? void 0 : tabList.forEach((tab) => {
             tab.level = this.level;
         });
     }
     /**
-     * Detects when slot changes
+     * Hide/Show scroll button when element is overflow.
+     * @param elementWidth width of element
      * @returns {void}
      */
-    onSlotChange() {
-        this.setLevel();
+    toggleScrollButton(elementWidth) {
+        if (this.vertical) {
+            return;
+        }
+        const { scrollLeft, scrollWidth } = this.content;
+        const leftBtnStyle = scrollLeft > 0 ? 'flex' : 'none';
+        const rightBtnStyle = scrollWidth - scrollLeft - elementWidth > 1 ? 'flex' : 'none';
+        this.leftBtn.style.setProperty('display', leftBtnStyle);
+        this.rightBtn.style.setProperty('display', rightBtnStyle);
     }
     /**
      * Update scroll position when clicked on left button
@@ -184,11 +280,11 @@ let TabBar = class TabBar extends ResponsiveElement {
      */
     render() {
         return html `
-    <ef-button icon="left" part="left-btn" @tap=${this.handleScrollLeft}></ef-button>
-      <div part="content">
-        <slot @slotchange=${this.onSlotChange}></slot>
-      </div>
-    <ef-button icon="right" part="right-btn" @tap=${this.handleScrollRight}></ef-button>
+      ${!this.vertical ? html `<ef-button icon="left" part="left-btn" @tap=${this.handleScrollLeft}></ef-button>` : null}
+        <div part="content">
+          <slot @slotchange=${this.onSlotChange}></slot>
+        </div>
+      ${!this.vertical ? html `<ef-button icon="right" part="right-btn" @tap=${this.handleScrollRight}></ef-button>` : null}
     `;
     }
 };
@@ -201,6 +297,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], TabBar.prototype, "vertical", void 0);
+__decorate([
+    property({ type: String, attribute: false })
+], TabBar.prototype, "value", null);
 __decorate([
     query('[part="content"')
 ], TabBar.prototype, "content", void 0);

package/lib/text-field/index.d.ts

@@ -1,6 +1,6 @@
 import { JSXInterface } from '../jsx';
 import { FormFieldElement, CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
-import { TemplateMap } from '@refinitiv-ui/core/lib/directives/template-map.js';
+import { TemplateMap } from '@refinitiv-ui/core/directives/template-map.js';
 import '../icon/index.js';
 /**
  * Form control element for text.

package/lib/text-field/index.js

@@ -1,10 +1,10 @@
 import { __decorate } from "tslib";
 import { FormFieldElement, 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 { ifDefined } from '@refinitiv-ui/core/lib/directives/if-defined.js';
+import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
+import { ifDefined } from '@refinitiv-ui/core/directives/if-defined.js';
 import { VERSION } from '../version.js';
-import { isIE } from '@refinitiv-ui/utils/lib/browser.js';
+import { isIE } from '@refinitiv-ui/utils/browser.js';
 import '../icon/index.js';
 import { registerOverflowTooltip } from '../tooltip/index.js';
 const hasChanged = (newVal, oldVal) => oldVal === undefined ? false : newVal !== oldVal;

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

@@ -2,7 +2,7 @@ import { JSXInterface } from '../jsx';
 import { ControlElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
 import '../number-field/index.js';
 import { TranslateDirective } from '@refinitiv-ui/translate';
-import '@refinitiv-ui/phrasebook/lib/locale/en/time-picker.js';
+import '@refinitiv-ui/phrasebook/locale/en/time-picker.js';
 declare enum Segment {
     HOURS = "hours",
     MINUTES = "minutes",

package/lib/time-picker/index.js

@@ -1,18 +1,18 @@
 var TimePicker_1;
 import { __decorate } from "tslib";
 import { ControlElement, html, css } from '@refinitiv-ui/core';
-import { ifDefined } from '@refinitiv-ui/core/lib/directives/if-defined.js';
-import { guard } from '@refinitiv-ui/core/lib/directives/guard.js';
-import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
-import { state } from '@refinitiv-ui/core/lib/decorators/state.js';
-import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { ifDefined } from '@refinitiv-ui/core/directives/if-defined.js';
+import { guard } from '@refinitiv-ui/core/directives/guard.js';
+import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
+import { state } from '@refinitiv-ui/core/decorators/state.js';
+import { query } from '@refinitiv-ui/core/decorators/query.js';
 import { VERSION } from '../version.js';
-import { isValidTime, toTimeSegment, TimeFormat, getFormat, format, isAM, isPM, MILLISECONDS_IN_SECOND, MILLISECONDS_IN_MINUTE, MILLISECONDS_IN_HOUR, addOffset, padNumber, parse } from '@refinitiv-ui/utils/lib/date.js';
-import { isIE } from '@refinitiv-ui/utils/lib/browser.js';
+import { isValidTime, toTimeSegment, TimeFormat, getFormat, format, isAM, isPM, MILLISECONDS_IN_SECOND, MILLISECONDS_IN_MINUTE, MILLISECONDS_IN_HOUR, addOffset, padNumber, parse } from '@refinitiv-ui/utils/date.js';
+import { isIE } from '@refinitiv-ui/utils/browser.js';
 import '../number-field/index.js';
 import { translate } from '@refinitiv-ui/translate';
-import '@refinitiv-ui/phrasebook/lib/locale/en/time-picker.js';
+import '@refinitiv-ui/phrasebook/locale/en/time-picker.js';
 var Segment;
 (function (Segment) {
     Segment["HOURS"] = "hours";

package/lib/toggle/index.js

@@ -1,7 +1,7 @@
 import { __decorate } from "tslib";
 import { ControlElement, 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';
 /**
  * Return the attribute that converted from the property

package/lib/tooltip/index.js

@@ -1,11 +1,11 @@
 var Tooltip_1;
 import { __decorate } from "tslib";
 import { BasicElement, html, css, matches } 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 { isSlotEmpty } from '@refinitiv-ui/utils/lib/is-slot-empty.js';
+import { isSlotEmpty } from '@refinitiv-ui/utils/is-slot-empty.js';
 import '../overlay/index.js';
 import './elements/title-tooltip.js';
 import { register, deregister } from './managers/tooltip-manager.js';

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

@@ -1,5 +1,5 @@
-import { TimeoutTaskRunner } from '@refinitiv-ui/utils/lib/async.js';
-import { isIE } from '@refinitiv-ui/utils/lib/browser.js';
+import { TimeoutTaskRunner } from '@refinitiv-ui/utils/async.js';
+import { isIE } from '@refinitiv-ui/utils/browser.js';
 /**
  * Tooltip manager is here to avoid setting multiple
  * events on document and do expensive pre-processing

package/lib/tornado-chart/elements/tornado-chart.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';
 import './tornado-item.js';
 /**

package/lib/tornado-chart/elements/tornado-item.js

@@ -1,8 +1,8 @@
 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 { ifDefined } from '@refinitiv-ui/core/lib/directives/if-defined.js';
+import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
+import { ifDefined } from '@refinitiv-ui/core/directives/if-defined.js';
 import { VERSION } from '../../version.js';
 import '../../progress-bar/index.js';
 import '../../layout/index.js';

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

@@ -14,6 +14,7 @@ export declare class TreeItem<T extends TreeDataItem = TreeDataItem> extends Con
      * @returns version number
      */
     static get version(): string;
+    protected readonly defaultRole: string | null;
     /**
      * Checked state of the item
      */
@@ -77,7 +78,39 @@ export declare class TreeItem<T extends TreeDataItem = TreeDataItem> extends Con
      * Is the checked state indeterminate?
      */
     protected get indeterminate(): boolean;
+    /**
+     * Handles aria-checked and aria-selected when mode changes
+     * aria-checked is used for multiple mode due to tri-state support
+     * @returns {void}
+     **/
+    private multipleChanged;
+    /**
+     * Handles selected and aria attribute changes
+     * @returns {void}
+     */
+    private checkedChanged;
+    /**
+     * Handles aria-expanded when expanded state changes
+     * @returns {void}
+     */
+    private expandedChanged;
+    /**
+     * Called after the component is first rendered
+     * @param changedProperties Properties which have changed
+     * @returns {void}
+     */
+    protected firstUpdated(changedProperties: PropertyValues): void;
+    /**
+     * Invoked whenever the element is updated
+     * @param changedProperties Map of changed properties with old values
+     * @returns {void}
+     */
     protected update(changedProperties: PropertyValues): void;
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @returns Render template
+     */
     protected render(): TemplateResult;
 }
 

package/lib/tree/elements/tree-item.js

@@ -1,7 +1,7 @@
 import { __decorate } from "tslib";
 import { html, ControlElement } 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 '../../icon/index.js';
 import { preload } from '../../icon/index.js';
@@ -16,6 +16,7 @@ const emptyTemplate = html ``;
 let TreeItem = class TreeItem extends ControlElement {
     constructor() {
         super(...arguments);
+        this.defaultRole = 'treeitem';
         /**
          * Checked state of the item
          */
@@ -70,10 +71,7 @@ let TreeItem = class TreeItem extends ControlElement {
      */
     get toggleTemplate() {
         return html `
-    <div
-    expand-toggle
-    part="toggle"
-    style="pointer-events:all;visibility:${this.parent ? 'visible' : 'hidden'}">
+    <div expand-toggle part="toggle" style="pointer-events:all;visibility:${this.parent ? 'visible' : 'hidden'}">
       <ef-icon part="toggle-icon${this.expanded ? ' toggle-icon-expanded' : ''}" icon="right"></ef-icon>
     </div>
     `;
@@ -87,13 +85,14 @@ let TreeItem = class TreeItem extends ControlElement {
         }
         return html `
     <ef-checkbox
-    part="checkbox"
-    tabindex="-1"
-    .disabled="${this.disabled}"
-    .readonly="${this.readonly}"
-    .indeterminate="${this.indeterminate}"
-    .checked="${this.checked}"
-    style="pointer-events:none"></ef-checkbox>
+      part="checkbox"
+      tabindex="-1"
+      .disabled="${this.disabled}"
+      .readonly="${this.readonly}"
+      .indeterminate="${this.indeterminate}"
+      .checked="${this.checked}"
+      style="pointer-events:none">
+    </ef-checkbox>
     `;
     }
     /**
@@ -117,21 +116,81 @@ let TreeItem = class TreeItem extends ControlElement {
     get indeterminate() {
         return this.checkedState === CheckedState.INDETERMINATE;
     }
+    /**
+     * Handles aria-checked and aria-selected when mode changes
+     * aria-checked is used for multiple mode due to tri-state support
+     * @returns {void}
+     **/
+    multipleChanged() {
+        this.removeAttribute(this.multiple ? 'aria-selected' : 'aria-checked');
+        this.checkedChanged();
+    }
+    /**
+     * Handles selected and aria attribute changes
+     * @returns {void}
+     */
+    checkedChanged() {
+        switch (this.checkedState) {
+            case CheckedState.CHECKED:
+                this.setAttribute('selected', '');
+                this.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', 'true');
+                break;
+            case CheckedState.INDETERMINATE:
+                this.setAttribute('selected', 'indeterminate');
+                this.setAttribute('aria-checked', 'mixed');
+                break;
+            default:
+                this.removeAttribute('selected');
+                // In single mode, only children nodes are selectable
+                if (this.parent && !this.multiple) {
+                    this.removeAttribute('aria-selected');
+                }
+                else {
+                    this.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', 'false');
+                }
+                break;
+        }
+    }
+    /**
+     * Handles aria-expanded when expanded state changes
+     * @returns {void}
+     */
+    expandedChanged() {
+        if (this.parent) {
+            this.setAttribute('aria-expanded', this.expanded ? 'true' : 'false');
+        }
+    }
+    /**
+     * Called after the component is first rendered
+     * @param changedProperties Properties which have changed
+     * @returns {void}
+     */
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        this.setAttribute('aria-level', String(this.depth + 1));
+    }
+    /**
+     * Invoked whenever the element is updated
+     * @param changedProperties Map of changed properties with old values
+     * @returns {void}
+     */
     update(changedProperties) {
         super.update(changedProperties);
         if (changedProperties.has('checkedState')) {
-            switch (this.checkedState) {
-                case CheckedState.CHECKED:
-                    this.setAttribute('selected', '');
-                    break;
-                case CheckedState.INDETERMINATE:
-                    this.setAttribute('selected', 'indeterminate');
-                    break;
-                default:
-                    this.removeAttribute('selected');
-            }
+            this.checkedChanged();
+        }
+        if (changedProperties.has('multiple') && changedProperties.get('multiple') !== undefined) {
+            this.multipleChanged();
+        }
+        if (changedProperties.has('expanded')) {
+            this.expandedChanged();
         }
     }
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @returns Render template
+     */
     render() {
         return html `
       ${this.indentTemplate}
@@ -157,7 +216,7 @@ __decorate([
     property({ type: Boolean })
 ], TreeItem.prototype, "expanded", void 0);
 __decorate([
-    property({ reflect: true, type: Number })
+    property({ type: Number, reflect: true })
 ], TreeItem.prototype, "depth", void 0);
 __decorate([
     property({ type: String })

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

@@ -1,6 +1,6 @@
 import { JSXInterface } from '../../jsx';
 import { PropertyValues, TapEvent } from '@refinitiv-ui/core';
-import { CollectionComposer } from '@refinitiv-ui/utils/lib/collection.js';
+import { CollectionComposer } from '@refinitiv-ui/utils/collection.js';
 import { List } from '../../list/index.js';
 import { TreeRenderer } from '../helpers/renderer.js';
 import type { TreeData, TreeDataItem, TreeFilter } from '../helpers/types';
@@ -22,6 +22,7 @@ export declare class Tree<T extends TreeDataItem = TreeDataItem> extends List<T>
      * @returns version number
      */
     static get version(): string;
+    protected readonly defaultRole: string | null;
     /**
      * Tree manager used for manipulation
      */

package/lib/tree/elements/tree.js

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
-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 { List } from '../../list/index.js';
 import { TreeRenderer } from '../helpers/renderer.js';
@@ -21,6 +21,7 @@ const EXPAND_TOGGLE_ATTR = 'expand-toggle';
 let Tree = class Tree extends List {
     constructor() {
         super(...arguments);
+        this.defaultRole = 'tree';
         /**
          * Tree manager used for manipulation
          */

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

@@ -1,4 +1,4 @@
-import type { CollectionComposer, DataItem } from '@refinitiv-ui/utils/lib/collection';
+import type { CollectionComposer, DataItem } from '@refinitiv-ui/utils/collection.js';
 export declare type TreeData<T extends TreeDataItem = TreeDataItem> = T[] | CollectionComposer<T> | null;
 export interface TreeDataItem extends DataItem {
     /**

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

@@ -1,4 +1,4 @@
-import type { CollectionComposer } from '@refinitiv-ui/utils/lib/collection';
+import type { CollectionComposer } from '@refinitiv-ui/utils/collection.js';
 import type { TreeDataItem } from '../helpers/types';
 export declare enum CheckedState {
     CHECKED = 1,

package/lib/tree-select/index.d.ts

@@ -1,7 +1,7 @@
 import { JSXInterface } from '../jsx';
 import { TemplateResult, CSSResultGroup } from '@refinitiv-ui/core';
-import { CollectionComposer } from '@refinitiv-ui/utils/lib/collection.js';
-import { TimeoutTaskRunner } from '@refinitiv-ui/utils/lib/async.js';
+import { CollectionComposer } from '@refinitiv-ui/utils/collection.js';
+import { TimeoutTaskRunner } from '@refinitiv-ui/utils/async.js';
 import '../icon/index.js';
 import '../text-field/index.js';
 import '../pill/index.js';
@@ -15,7 +15,7 @@ import { TreeRenderer as TreeSelectRenderer } from '../tree/index.js';
 import { TreeManager, TreeManagerMode } from '../tree/managers/tree-manager.js';
 import type { TreeSelectData, TreeSelectDataItem } from './helpers/types';
 import { TranslateDirective } from '@refinitiv-ui/translate';
-import '@refinitiv-ui/phrasebook/lib/locale/en/tree-select.js';
+import '@refinitiv-ui/phrasebook/locale/en/tree-select.js';
 export { TreeSelectRenderer };
 export type { TreeSelectFilter, TreeSelectDataItem, TreeSelectData };
 /**