@refinitiv-ui/elements 5.12.0-alpha.2 → 5.12.2

package/lib/tab-bar/index.d.ts

@@ -3,6 +3,8 @@ import { TemplateResult, CSSResultGroup, PropertyValues, ResponsiveElement, Elem
 import '../button/index.js';
 /**
  * Container for tabs
+ *
+ * @fires value-changed - Fired when the `value` changes.
  */
 export declare class TabBar extends ResponsiveElement {
     /**
@@ -10,6 +12,7 @@ export declare class TabBar extends ResponsiveElement {
      * @returns version number
      */
     static get version(): string;
+    protected readonly defaultRole = "tablist";
     /**
      * A `CSSResultGroup` that will be used
      * to style the host, slotted children
@@ -29,6 +32,18 @@ export declare class TabBar extends ResponsiveElement {
      * Use to switch from horizontal to vertical layout.
      */
     vertical: boolean;
+    /**
+     * Internal value of tab bar.
+     * Controlled by public setter and getter
+     */
+    private _value;
+    /**
+     * Value of tab-bar, derived from value of an active tab.
+     * @param value Element value
+     * @default -
+     */
+    set value(value: string);
+    get value(): string;
     private content;
     private leftBtn;
     private rightBtn;
@@ -55,26 +70,61 @@ export declare class TabBar extends ResponsiveElement {
      */
     resizedCallback(size: ElementSize): void;
     /**
-     * Hide all scroll buttons
+     * 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
+     */
+    private isValidValue;
+    /**
+     * When the slot changes, set the level, toggle the scroll button, and set the value
      * @returns {void}
      */
-    private hideScrollButtons;
+    private onSlotChange;
     /**
-     * Hide/Show scroll button when element is overflow.
-     * @param elementWidth width of element
+     * Mark tab as active
+     * @param value value of tab to select
      * @returns {void}
      */
-    private toggleScrollButton;
+    private activateTab;
+    /**
+     * Set tab value and fires `tab-changed` event
+     * @param event - Event
+     * @returns {void}
+     */
+    private onTap;
+    /**
+     * Get the value of a tab
+     * @param tab - The tab element.
+     * @returns The value of the tab.
+     */
+    private getTabValue;
+    /**
+     * Return the tab's label, or its textContent, or an empty string
+     * @param tab - The tab element.
+     * @returns The tab label.
+     */
+    private getTabLabel;
+    /**
+     * Get Tab elements from slot
+     * @returns the array of Tab
+     */
+    private getTabElements;
+    /**
+     * Get focusable tab elements
+     * @returns the array of focusable tab
+     */
+    private getFocusableTabs;
     /**
      * Set tab level attribute accordingly
      * @returns {void}
      */
     private setLevel;
     /**
-     * Detects when slot changes
+     * Hide/Show scroll button when element is overflow.
+     * @param elementWidth width of element
      * @returns {void}
      */
-    private onSlotChange;
+    private toggleScrollButton;
     /**
      * Update scroll position when clicked on left button
      * @returns {void}
@@ -85,6 +135,46 @@ export declare class TabBar extends ResponsiveElement {
      * @returns {void}
      */
     private handleScrollRight;
+    /**
+     * Focus and set active to tab
+     * @param tab - The element that was clicked.
+     * @return {void}
+     */
+    private focusAndSetActiveTab;
+    /**
+     * Navigate to first focusable tab of the tab bar
+     * @returns {void}
+     */
+    private first;
+    /**
+     * Navigate to last focusable tab of the tab bar
+     * @returns {void}
+     */
+    private last;
+    /**
+     * Navigate to next or previous focusable tab
+     * @param direction up/next; down/previous
+     * @returns {void}
+     */
+    private navigateToSibling;
+    /**
+     * Handles key down event
+     * @param event Key down event object
+     * @returns {void}
+     */
+    private onKeyDown;
+    /**
+     * Sets the tabindex to -1 for all tabs except the active tab.
+     * @param target the tab to be focused
+     * @param tabList Array of tabs that contains target
+     * @returns {void}
+     */
+    private rovingTabIndex;
+    /**
+     * Set tabIndex to all tabs
+     * @returns {void}
+     */
+    private manageTabIndex;
     /**
      * A `TemplateResult` that will be used
      * to render the updated internal template.

package/lib/tab-bar/index.js

@@ -1,18 +1,22 @@
 import { __decorate } from "tslib";
 import { html, css, ResponsiveElement } from '@refinitiv-ui/core';
-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 { 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 { 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() {
         super(...arguments);
+        this.defaultRole = 'tablist';
         /**
          * Specify tab's horizontal alignment
          */
@@ -25,6 +29,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 +61,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 +94,8 @@ let TabBar = class TabBar extends ResponsiveElement {
                 this.toggleScrollButton(this.content.clientWidth);
             }, 66); // equal 15 fps for compatibility
         });
+        this.addEventListener('tap', this.onTap);
+        this.addEventListener('keydown', this.onKeyDown);
     }
     /**
      * Called when the element’s DOM has been updated and rendered
@@ -75,16 +103,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 +121,132 @@ 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);
+        }
+        this.manageTabIndex();
+    }
+    /**
+     * Mark tab as active
+     * @param value value of tab to select
+     * @returns {void}
+     */
+    activateTab(value) {
+        if (!value) {
+            return;
         }
-        else {
-            this.leftBtn.style.setProperty('display', 'none');
+        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;
         }
-        // handle right button
-        if (Math.floor(scrollWidth - scrollLeft) > Math.round(elementWidth)) {
-            this.rightBtn.style.setProperty('display', 'flex');
+        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
@@ -177,6 +276,114 @@ let TabBar = class TabBar extends ResponsiveElement {
         }
         tweenAnimate({ target: this.content, startPosition: scrollLeft, endPosition });
     }
+    /**
+     * Focus and set active to tab
+     * @param tab - The element that was clicked.
+     * @return {void}
+     */
+    focusAndSetActiveTab(tab) {
+        tab.focus();
+        tab.scrollIntoView({ block: 'nearest' });
+        this.value = this.getTabValue(tab);
+    }
+    /**
+     * Navigate to first focusable tab of the tab bar
+     * @returns {void}
+     */
+    first() {
+        const tabList = this.getFocusableTabs();
+        if (tabList.length <= 0) {
+            return;
+        }
+        this.focusAndSetActiveTab(tabList[0]);
+        this.rovingTabIndex(tabList[0], tabList);
+    }
+    /**
+     * Navigate to last focusable tab of the tab bar
+     * @returns {void}
+     */
+    last() {
+        const tabList = this.getFocusableTabs();
+        if (tabList.length <= 0) {
+            return;
+        }
+        const lastTab = tabList[tabList.length - 1];
+        this.focusAndSetActiveTab(lastTab);
+        this.rovingTabIndex(lastTab, tabList);
+    }
+    /**
+     * Navigate to next or previous focusable tab
+     * @param direction up/next; down/previous
+     * @returns {void}
+     */
+    navigateToSibling(direction) {
+        const tabList = this.getFocusableTabs();
+        if (tabList.length <= 0) {
+            return;
+        }
+        const focusedTabIndex = tabList.findIndex(tab => tab === document.activeElement);
+        const nextTab = direction === 'next'
+            ? tabList[focusedTabIndex + 1] || tabList[0]
+            : tabList[focusedTabIndex - 1] || tabList[tabList.length - 1];
+        this.focusAndSetActiveTab(nextTab);
+        this.rovingTabIndex(nextTab, tabList);
+    }
+    /**
+     * Handles key down event
+     * @param event Key down event object
+     * @returns {void}
+     */
+    onKeyDown(event) {
+        if (event.defaultPrevented) {
+            return;
+        }
+        switch (event.key) {
+            case 'Right':
+            case 'Down':
+            case 'ArrowRight':
+            case 'ArrowDown':
+                this.navigateToSibling('next');
+                break;
+            case 'Left':
+            case 'Up':
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                this.navigateToSibling('previous');
+                break;
+            case 'Home':
+                this.first();
+                break;
+            case 'End':
+                this.last();
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+    }
+    /**
+     * Sets the tabindex to -1 for all tabs except the active tab.
+     * @param target the tab to be focused
+     * @param tabList Array of tabs that contains target
+     * @returns {void}
+     */
+    rovingTabIndex(target, tabList) {
+        tabList.forEach((tab) => {
+            tab.tabIndex = -1;
+        });
+        target.tabIndex = 0;
+    }
+    /**
+     * Set tabIndex to all tabs
+     * @returns {void}
+     */
+    manageTabIndex() {
+        const tabList = this.getFocusableTabs();
+        if (tabList && tabList.length > 0) {
+            const focusedTabIndex = tabList.findIndex(tab => tab.active);
+            this.rovingTabIndex(tabList[focusedTabIndex], tabList);
+        }
+    }
     /**
      * A `TemplateResult` that will be used
      * to render the updated internal template.
@@ -184,11 +391,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 tabIndex="-1" 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 tabIndex="-1" icon="right" part="right-btn" @tap=${this.handleScrollRight}></ef-button>` : null}
     `;
     }
 };
@@ -201,6 +408,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/directives/template-map.js';
+import { TemplateMap } from '@refinitiv-ui/core/lib/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/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/decorators/property.js';
-import { ifDefined } from '@refinitiv-ui/core/directives/if-defined.js';
+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 { VERSION } from '../version.js';
-import { isIE } from '@refinitiv-ui/utils/browser.js';
+import { isIE } from '@refinitiv-ui/utils/lib/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/locale/en/time-picker.js';
+import '@refinitiv-ui/phrasebook/lib/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/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 { 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 { 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/date.js';
-import { isIE } from '@refinitiv-ui/utils/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/lib/date.js';
+import { isIE } from '@refinitiv-ui/utils/lib/browser.js';
 import '../number-field/index.js';
 import { translate } from '@refinitiv-ui/translate';
-import '@refinitiv-ui/phrasebook/locale/en/time-picker.js';
+import '@refinitiv-ui/phrasebook/lib/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/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/decorators/property.js';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/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/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/decorators/property.js';
-import { query } from '@refinitiv-ui/core/decorators/query.js';
+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 { VERSION } from '../version.js';
-import { isSlotEmpty } from '@refinitiv-ui/utils/is-slot-empty.js';
+import { isSlotEmpty } from '@refinitiv-ui/utils/lib/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/async.js';
-import { isIE } from '@refinitiv-ui/utils/browser.js';
+import { TimeoutTaskRunner } from '@refinitiv-ui/utils/lib/async.js';
+import { isIE } from '@refinitiv-ui/utils/lib/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/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/decorators/property.js';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/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/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/decorators/property.js';
-import { ifDefined } from '@refinitiv-ui/core/directives/if-defined.js';
+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 { VERSION } from '../../version.js';
 import '../../progress-bar/index.js';
 import '../../layout/index.js';

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/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/decorators/property.js';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
 import { VERSION } from '../../version.js';
 import '../../icon/index.js';
 import { preload } from '../../icon/index.js';