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

package/lib/text-field/themes/solar/charcoal/index.js

@@ -1,3 +1,3 @@
-import '@refinitiv-ui/elements/lib/icon/themes/solar/charcoal';
+import '@refinitiv-ui/elements/icon/themes/solar/charcoal';
 
 elf.customStyles.define('ef-text-field', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13rem;font-weight:400;height:23px;width:140px;max-width:100%;padding:0 5px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#c2c2c2;border-radius:0;text-overflow:ellipsis;background-color:#000;border:1px solid #4a4a52}:host([type=number]){padding-right:0}:host([error]),:host([error][warning]){border:1px solid #f5475b}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(194,194,194,.6);border:1px solid rgba(245,71,91,.6)}:host ::-ms-clear{display:none}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host [part=icon]{color:#e2e2e2;min-width:1em}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host([disabled]){border:1px solid rgba(74,74,82,.6);color:rgba(194,194,194,.6)}:host([readonly]){border:1px solid rgba(74,74,82,.6)}:host(:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #77777d}:host([warning]){background-color:#000;border:1px solid #f93}:host([warning][disabled]){border:1px solid rgba(255,153,51,.6);color:rgba(194,194,194,.6)}:host([warning][readonly]){border:1px solid rgba(255,153,51,.6)}:host([warning]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #ffb366}:host([error]),:host([error][warning]:not([focused])){background-color:#000;border:1px solid #f5475b}:host([error][disabled]),:host([error][warning]:not([focused])[disabled]){border:1px solid rgba(245,71,91,.6);color:rgba(194,194,194,.6)}:host([error][readonly]),:host([error][warning]:not([focused])[readonly]){border:1px solid rgba(245,71,91,.6)}:host([error]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover),:host([error][warning]:not([focused]):not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #f87584}:host([highlight]){background-color:#1b252f;border:1px solid #4a4a52}:host([highlight][disabled]){border:1px solid rgba(74,74,82,.6);color:rgba(194,194,194,.6);background-color:rgba(27,37,47,.6)}:host([highlight][readonly]){border:1px solid rgba(74,74,82,.6)}:host([highlight]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #77777d}:host([indirect]){color:#0fd;background-color:#000;border:1px solid #898623}:host([indirect][disabled]){border:1px solid rgba(137,134,35,.6);color:rgba(0,255,221,.6)}:host([indirect][readonly]){border:1px solid rgba(137,134,35,.6)}:host([indirect]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #a7a45a}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#f93;border-style:dotted}:host([disabled]) [part=input]::-webkit-input-placeholder{color:rgba(102,101,112,.6)}:host([disabled]) [part=input]::-moz-placeholder{color:rgba(102,101,112,.6)}:host([disabled]) [part=input]:-ms-input-placeholder{color:rgba(102,101,112,.6)}');

package/lib/text-field/themes/solar/pearl/index.js

@@ -1,3 +1,3 @@
-import '@refinitiv-ui/elements/lib/icon/themes/solar/pearl';
+import '@refinitiv-ui/elements/icon/themes/solar/pearl';
 
 elf.customStyles.define('ef-text-field', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13rem;font-weight:400;height:23px;width:140px;max-width:100%;padding:0 5px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#484848;border-radius:0;text-overflow:ellipsis;background-color:#fff;border:1px solid #a9afba}:host([type=number]){padding-right:0}:host([error]),:host([error][warning]){border:1px solid #d94255}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(72,72,72,.6);border:1px solid rgba(217,66,85,.6)}:host ::-ms-clear{display:none}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host [part=icon]{color:#acafb5;min-width:1em}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host([disabled]){border:1px solid rgba(169,175,186,.6);color:rgba(72,72,72,.6)}:host([readonly]){border:1px solid rgba(169,175,186,.6)}:host(:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #bfc3cb}:host([warning]){background-color:#fff;border:1px solid #f93}:host([warning][disabled]){border:1px solid rgba(255,153,51,.6);color:rgba(72,72,72,.6)}:host([warning][readonly]){border:1px solid rgba(255,153,51,.6)}:host([warning]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #ffb366}:host([error]),:host([error][warning]:not([focused])){background-color:#fff;border:1px solid #d94255}:host([error][disabled]),:host([error][warning]:not([focused])[disabled]){border:1px solid rgba(217,66,85,.6);color:rgba(72,72,72,.6)}:host([error][readonly]),:host([error][warning]:not([focused])[readonly]){border:1px solid rgba(217,66,85,.6)}:host([error]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover),:host([error][warning]:not([focused]):not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #e37180}:host([highlight]){background-color:#b0ffff;border:1px solid #a9afba}:host([highlight][disabled]){border:1px solid rgba(169,175,186,.6);color:rgba(72,72,72,.6);background-color:rgba(176,255,255,.6)}:host([highlight][readonly]){border:1px solid rgba(169,175,186,.6)}:host([highlight]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #bfc3cb}:host([indirect]){color:#009494;background-color:#effefe;border:1px solid #898623}:host([indirect][disabled]){border:1px solid rgba(137,134,35,.6);color:rgba(0,148,148,.6)}:host([indirect][readonly]){border:1px solid rgba(137,134,35,.6)}:host([indirect]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #a7a45a}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#ffb266;border-style:dotted}:host([disabled]) [part=input]::-webkit-input-placeholder{color:rgba(102,101,112,.6)}:host([disabled]) [part=input]::-moz-placeholder{color:rgba(102,101,112,.6)}:host([disabled]) [part=input]:-ms-input-placeholder{color:rgba(102,101,112,.6)}');

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",
@@ -395,6 +395,11 @@ export declare class TimePicker extends ControlElement {
      */
     protected render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-time-picker': TimePicker;
+    }
+}
 export {};
 
 declare global {

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";
@@ -307,7 +307,6 @@ let TimePicker = TimePicker_1 = class TimePicker extends ControlElement {
      * @returns returns a promise void
      */
     async selectSegment() {
-        var _a;
         await this.updateComplete;
         switch (this.selectedSegment) {
             case Segment.HOURS:
@@ -317,7 +316,7 @@ let TimePicker = TimePicker_1 = class TimePicker extends ControlElement {
                 this.minutesInput.select();
                 break;
             case Segment.SECONDS:
-                (_a = this.secondsInput) === null || _a === void 0 ? void 0 : _a.select();
+                this.secondsInput?.select();
                 break;
             // no default
         }
@@ -811,6 +810,7 @@ let TimePicker = TimePicker_1 = class TimePicker extends ControlElement {
         const amPm = this.amPm;
         return html `<div
       part="aria-selection"
+      role="status"
       aria-live="polite"
       aria-label="${this.t('SELECTED', {
             value: value ? parse(value) : null,

package/lib/time-picker/themes/halo/dark/index.js

@@ -1,4 +1,4 @@
-import '@refinitiv-ui/elements/lib/number-field/themes/halo/dark';
-import '@refinitiv-ui/elements/lib/icon/themes/halo/dark';
+import '@refinitiv-ui/elements/number-field/themes/halo/dark';
+import '@refinitiv-ui/elements/icon/themes/halo/dark';
 
 elf.customStyles.define('ef-time-picker', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12rem;font-weight:400;height:24px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#ccc;border-radius:0;background-color:#0d0d0d;text-overflow:ellipsis;border:1px solid #404040;width:auto;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;padding:0}:host([disabled]){color:rgba(204,204,204,.5);border:1px solid rgba(64,64,64,.5)}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=input]{margin:0;text-align:center;padding:0;color:inherit;width:24px}:host [part=divider]::before{content:\':\'}:host [part=toggle]{width:20px;font-size:50%;display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;line-height:1.2;outline:0;cursor:pointer;touch-action:manipulation}:host [part=input],:host [part=toggle]{height:100%;position:relative}:host [part=input]:focus::after,:host [part=input][focused]::after,:host [part=toggle]:focus::after,:host [part=toggle][focused]::after{content:\'\';border-right:8px solid transparent;border-left:8px solid transparent;position:absolute;left:calc(50% - 8px);bottom:0;border-bottom:4px solid transparent;display:none}:host [part=toggle-item]{opacity:.5}:host [part=toggle-item][active]{opacity:1}:host [part=divider]{width:2px}');

package/lib/time-picker/themes/halo/light/index.js

@@ -1,4 +1,4 @@
-import '@refinitiv-ui/elements/lib/number-field/themes/halo/light';
-import '@refinitiv-ui/elements/lib/icon/themes/halo/light';
+import '@refinitiv-ui/elements/number-field/themes/halo/light';
+import '@refinitiv-ui/elements/icon/themes/halo/light';
 
 elf.customStyles.define('ef-time-picker', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12rem;font-weight:400;height:24px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#404040;border-radius:0;background-color:#fff;text-overflow:ellipsis;border:1px solid #595959;width:auto;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;padding:0}:host([disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(89,89,89,.5)}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=input]{margin:0;text-align:center;padding:0;color:inherit;width:24px}:host [part=divider]::before{content:\':\'}:host [part=toggle]{width:20px;font-size:50%;display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;line-height:1.2;outline:0;cursor:pointer;touch-action:manipulation}:host [part=input],:host [part=toggle]{height:100%;position:relative}:host [part=input]:focus::after,:host [part=input][focused]::after,:host [part=toggle]:focus::after,:host [part=toggle][focused]::after{content:\'\';border-right:8px solid transparent;border-left:8px solid transparent;position:absolute;left:calc(50% - 8px);bottom:0;border-bottom:4px solid transparent;display:none}:host [part=toggle-item]{opacity:.5}:host [part=toggle-item][active]{opacity:1}:host [part=divider]{width:2px}');

package/lib/time-picker/themes/solar/charcoal/index.js

@@ -1,4 +1,4 @@
-import '@refinitiv-ui/elements/lib/number-field/themes/solar/charcoal';
-import '@refinitiv-ui/elements/lib/icon/themes/solar/charcoal';
+import '@refinitiv-ui/elements/number-field/themes/solar/charcoal';
+import '@refinitiv-ui/elements/icon/themes/solar/charcoal';
 
 elf.customStyles.define('ef-time-picker', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13rem;font-weight:400;height:23px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#c2c2c2;border-radius:0;text-overflow:ellipsis;width:auto;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;background-color:#000;border:1px solid #4a4a52;padding:0}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#f93;border-style:dotted}:host [part=input]{margin:0;text-align:center;padding:0;color:inherit;width:25px}:host [part=divider]::before{content:\':\'}:host [part=toggle]{width:20px;display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;outline:0;cursor:pointer;touch-action:manipulation;font-size:70%;line-height:1}:host [part=input],:host [part=toggle]{height:100%;position:relative}:host [part=input]:focus::after,:host [part=input][focused]::after,:host [part=toggle]:focus::after,:host [part=toggle][focused]::after{content:\'\';border-right:8px solid transparent;border-bottom:4px solid #f93;border-left:8px solid transparent;position:absolute;content:\'\';border:none;left:calc(50% - 7px);bottom:-1px;width:14px;height:1px;background:#f93}:host [part=toggle-item]{opacity:.5}:host [part=toggle-item][active]{opacity:1}:host([disabled]){border:1px solid rgba(74,74,82,.6);color:rgba(194,194,194,.6)}:host([readonly]){border:1px solid rgba(74,74,82,.6)}:host(:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #77777d}:host([warning]){background-color:#000;border:1px solid #f93}:host([warning][disabled]){border:1px solid rgba(255,153,51,.6);color:rgba(194,194,194,.6)}:host([warning][readonly]){border:1px solid rgba(255,153,51,.6)}:host([warning]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #ffb366}:host([error]),:host([error][warning]:not([focused])){background-color:#000;border:1px solid #f5475b}:host([error][disabled]),:host([error][warning]:not([focused])[disabled]){border:1px solid rgba(245,71,91,.6);color:rgba(194,194,194,.6)}:host([error][readonly]),:host([error][warning]:not([focused])[readonly]){border:1px solid rgba(245,71,91,.6)}:host([error]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover),:host([error][warning]:not([focused]):not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #f87584}:host([highlight]){background-color:#1b252f;border:1px solid #4a4a52}:host([highlight][disabled]){border:1px solid rgba(74,74,82,.6);color:rgba(194,194,194,.6);background-color:rgba(27,37,47,.6)}:host([highlight][readonly]){border:1px solid rgba(74,74,82,.6)}:host([highlight]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #77777d}:host([indirect]){color:#0fd;background-color:#000;border:1px solid #898623}:host([indirect][disabled]){border:1px solid rgba(137,134,35,.6);color:rgba(0,255,221,.6)}:host([indirect][readonly]){border:1px solid rgba(137,134,35,.6)}:host([indirect]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #a7a45a}');

package/lib/time-picker/themes/solar/pearl/index.js

@@ -1,4 +1,4 @@
-import '@refinitiv-ui/elements/lib/number-field/themes/solar/pearl';
-import '@refinitiv-ui/elements/lib/icon/themes/solar/pearl';
+import '@refinitiv-ui/elements/number-field/themes/solar/pearl';
+import '@refinitiv-ui/elements/icon/themes/solar/pearl';
 
 elf.customStyles.define('ef-time-picker', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13rem;font-weight:400;height:23px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#484848;border-radius:0;text-overflow:ellipsis;width:auto;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;background-color:#fff;border:1px solid #a9afba;padding:0}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#ffb266;border-style:dotted}:host [part=input]{margin:0;text-align:center;padding:0;color:inherit;width:25px}:host [part=divider]::before{content:\':\'}:host [part=toggle]{width:20px;display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;outline:0;cursor:pointer;touch-action:manipulation;font-size:70%;line-height:1}:host [part=input],:host [part=toggle]{height:100%;position:relative}:host [part=input]:focus::after,:host [part=input][focused]::after,:host [part=toggle]:focus::after,:host [part=toggle][focused]::after{content:\'\';border-right:8px solid transparent;border-bottom:4px solid #ffb266;border-left:8px solid transparent;position:absolute;content:\'\';border:none;left:calc(50% - 7px);bottom:-1px;width:14px;height:1px;background:#ffb266}:host [part=toggle-item]{opacity:.5}:host [part=toggle-item][active]{opacity:1}:host([disabled]){border:1px solid rgba(169,175,186,.6);color:rgba(72,72,72,.6)}:host([readonly]){border:1px solid rgba(169,175,186,.6)}:host(:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #bfc3cb}:host([warning]){background-color:#fff;border:1px solid #f93}:host([warning][disabled]){border:1px solid rgba(255,153,51,.6);color:rgba(72,72,72,.6)}:host([warning][readonly]){border:1px solid rgba(255,153,51,.6)}:host([warning]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #ffb366}:host([error]),:host([error][warning]:not([focused])){background-color:#fff;border:1px solid #d94255}:host([error][disabled]),:host([error][warning]:not([focused])[disabled]){border:1px solid rgba(217,66,85,.6);color:rgba(72,72,72,.6)}:host([error][readonly]),:host([error][warning]:not([focused])[readonly]){border:1px solid rgba(217,66,85,.6)}:host([error]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover),:host([error][warning]:not([focused]):not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #e37180}:host([highlight]){background-color:#b0ffff;border:1px solid #a9afba}:host([highlight][disabled]){border:1px solid rgba(169,175,186,.6);color:rgba(72,72,72,.6);background-color:rgba(176,255,255,.6)}:host([highlight][readonly]){border:1px solid rgba(169,175,186,.6)}:host([highlight]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #bfc3cb}:host([indirect]){color:#009494;background-color:#effefe;border:1px solid #898623}:host([indirect][disabled]){border:1px solid rgba(137,134,35,.6);color:rgba(0,148,148,.6)}:host([indirect][readonly]){border:1px solid rgba(137,134,35,.6)}:host([indirect]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #a7a45a}');

package/lib/toggle/index.d.ts

@@ -71,6 +71,11 @@ export declare class Toggle extends ControlElement {
      */
     protected render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-toggle': Toggle;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {

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/elements/tooltip-element.d.ts

@@ -1,4 +1,3 @@
-import type { Tooltip } from '../index';
 import type { TooltipCondition, TooltipRenderer } from '../helpers/types';
 /**
  * Add the new condition to the default tooltip
@@ -17,5 +16,5 @@ declare const removeTooltipCondition: (condition: TooltipCondition) => void;
  * The default tooltip, which is used to replicate `title` attribute
  * and to show tooltips for EF elements
  */
-declare const tooltipElement: Tooltip;
+declare const tooltipElement: import("..").Tooltip;
 export { tooltipElement, addTooltipCondition, removeTooltipCondition };

package/lib/tooltip/index.d.ts

@@ -22,6 +22,7 @@ declare class Tooltip extends BasicElement {
     private clicked;
     private timerTimeout?;
     private contentNodes?;
+    protected readonly defaultRole: string | null;
     /**
      * A `CSSResultGroup` that will be used
      * to style the host, slotted children
@@ -214,6 +215,11 @@ declare class Tooltip extends BasicElement {
      */
     private get opened();
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-tooltip': Tooltip;
+    }
+}
 export * from './elements/tooltip-element.js';
 export { registerOverflowTooltip, Tooltip, TooltipCondition, TooltipRenderer, TooltipPosition, TooltipTransitionStyle };
 

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';
@@ -30,6 +30,7 @@ let Tooltip = Tooltip_1 = class Tooltip extends BasicElement {
         this.showDelay = 300;
         this.hideDelay = 150;
         this.clicked = false;
+        this.defaultRole = 'tooltip';
         /**
         * CSS selector to match the tooltip
         */
@@ -311,14 +312,12 @@ let Tooltip = Tooltip_1 = class Tooltip extends BasicElement {
      * @returns {void}
      */
     renderContentNode(contentNode) {
-        var _a;
         if (contentNode instanceof Text && this.textContent === contentNode.textContent) {
             return; /* Do not re-render the same text. Due to IE11 limitation we have to operate with text nodes */
         }
-        if ((_a = this.contentNodes) === null || _a === void 0 ? void 0 : _a.length) {
+        if (this.contentNodes?.length) {
             this.contentNodes.forEach((node) => {
-                var _a;
-                (_a = node.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(node);
+                node.parentNode?.removeChild(node);
             });
         }
         if (contentNode instanceof DocumentFragment) {

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

@@ -1,3 +1,3 @@
-import '@refinitiv-ui/elements/lib/overlay/themes/halo/dark';
+import '@refinitiv-ui/elements/overlay/themes/halo/dark';
 
 elf.customStyles.define('ef-tooltip', ':host [part=tooltip]{--panel-background-color:#FFFFFF;pointer-events:none;border:1px solid hsla(220,12%,75%,.15);padding:4px 8px;background-color:#fff;border-radius:0;overflow:hidden;max-width:320px;overflow-wrap:break-word;word-wrap:break-word;margin:4px;border:none;min-height:18px;line-height:18px;color:#0d0d0d}:host(:not([position])) [part=tooltip],:host([position=auto]) [part=tooltip]{margin-top:20px;margin-left:0}');

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

@@ -1,3 +1,3 @@
-import '@refinitiv-ui/elements/lib/overlay/themes/halo/light';
+import '@refinitiv-ui/elements/overlay/themes/halo/light';
 
 elf.customStyles.define('ef-tooltip', ':host [part=tooltip]{--panel-background-color:#FFF4CC;pointer-events:none;border:1px solid hsla(220,12%,75%,.15);padding:4px 8px;background-color:#fff4cc;border-radius:0;overflow:hidden;max-width:320px;overflow-wrap:break-word;word-wrap:break-word;margin:4px;border:none;min-height:18px;line-height:18px;color:#0d0d0d}:host(:not([position])) [part=tooltip],:host([position=auto]) [part=tooltip]{margin-top:20px;margin-left:0}');

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

@@ -1,3 +1,3 @@
-import '@refinitiv-ui/elements/lib/overlay/themes/solar/charcoal';
+import '@refinitiv-ui/elements/overlay/themes/solar/charcoal';
 
 elf.customStyles.define('ef-tooltip', ':host [part=tooltip]{--panel-background-color:#3C3C42;pointer-events:none;border:1px solid #000;padding:5px 8px;background-color:#3c3c42;border-radius:0;overflow:hidden;max-width:250px;overflow-wrap:break-word;word-wrap:break-word;margin:7px}:host(:not([position])) [part=tooltip],:host([position=auto]) [part=tooltip]{margin-top:20px;margin-left:0}');

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

@@ -1,3 +1,3 @@
-import '@refinitiv-ui/elements/lib/overlay/themes/solar/pearl';
+import '@refinitiv-ui/elements/overlay/themes/solar/pearl';
 
 elf.customStyles.define('ef-tooltip', ':host [part=tooltip]{--panel-background-color:#FFFFFF;pointer-events:none;border:1px solid #a9afba;padding:5px 8px;background-color:#fff;border-radius:0;overflow:hidden;max-width:250px;overflow-wrap:break-word;word-wrap:break-word;margin:7px}:host(:not([position])) [part=tooltip],:host([position=auto]) [part=tooltip]{margin-top:20px;margin-left:0}');

package/lib/tornado-chart/elements/tornado-chart.d.ts

@@ -62,6 +62,11 @@ export declare class TornadoChart extends ResponsiveElement {
      */
     protected render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-tornado-chart': TornadoChart;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {

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

@@ -94,6 +94,11 @@ export declare class TornadoItem extends BasicElement {
      */
     protected render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-tornado-item': TornadoItem;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {

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

@@ -1,5 +1,5 @@
-import '@refinitiv-ui/elements/lib/layout/themes/halo/dark';
-import '@refinitiv-ui/elements/lib/progress-bar/themes/halo/dark';
+import '@refinitiv-ui/elements/layout/themes/halo/dark';
+import '@refinitiv-ui/elements/progress-bar/themes/halo/dark';
 
 elf.customStyles.define('ef-tornado-chart', ':host{--primary-color:#6678FF;--secondary-color:#6678FF;--responsive-width:450;--primary-color:#6678FF;--secondary-color:#FFFFFF;font-size:12rem}:host [part=legend]{display:flex;justify-content:flex-end;margin-bottom:25px}:host [part=legend-item]{display:inline-flex;overflow:hidden;align-items:center;margin-right:10px}:host [part=legend][vertical]{justify-content:flex-start;flex-wrap:wrap}:host [part=primary-symbol],:host [part=secondary-symbol]{flex:none;width:15px;height:15px;border-radius:1px;margin-right:5px}:host [part=primary-symbol]{background-color:var(--primary-color)}:host [part=secondary-symbol]{background-color:var(--secondary-color)}:host [part=primary-label],:host [part=secondary-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}');
 

package/lib/tornado-chart/themes/halo/light/index.js

@@ -1,5 +1,5 @@
-import '@refinitiv-ui/elements/lib/layout/themes/halo/light';
-import '@refinitiv-ui/elements/lib/progress-bar/themes/halo/light';
+import '@refinitiv-ui/elements/layout/themes/halo/light';
+import '@refinitiv-ui/elements/progress-bar/themes/halo/light';
 
 elf.customStyles.define('ef-tornado-chart', ':host{--primary-color:#334BFF;--secondary-color:#6678FF;--responsive-width:450;--primary-color:#334BFF;--secondary-color:#000000;font-size:12rem}:host [part=legend]{display:flex;justify-content:flex-end;margin-bottom:25px}:host [part=legend-item]{display:inline-flex;overflow:hidden;align-items:center;margin-right:10px}:host [part=legend][vertical]{justify-content:flex-start;flex-wrap:wrap}:host [part=primary-symbol],:host [part=secondary-symbol]{flex:none;width:15px;height:15px;border-radius:1px;margin-right:5px}:host [part=primary-symbol]{background-color:var(--primary-color)}:host [part=secondary-symbol]{background-color:var(--secondary-color)}:host [part=primary-label],:host [part=secondary-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}');
 

package/lib/tornado-chart/themes/solar/charcoal/index.js

@@ -1,5 +1,5 @@
-import '@refinitiv-ui/elements/lib/layout/themes/solar/charcoal';
-import '@refinitiv-ui/elements/lib/progress-bar/themes/solar/charcoal';
+import '@refinitiv-ui/elements/layout/themes/solar/charcoal';
+import '@refinitiv-ui/elements/progress-bar/themes/solar/charcoal';
 
 elf.customStyles.define('ef-tornado-chart', ':host{--primary-color:#FF9933;--secondary-color:#b35900;--responsive-width:450;--secondary-color:#BEC3CC;font-size:14rem}:host [part=legend]{display:flex;justify-content:flex-end;margin-bottom:25px}:host [part=legend-item]{display:inline-flex;overflow:hidden;align-items:center;margin-right:10px}:host [part=legend][vertical]{justify-content:flex-start;flex-wrap:wrap}:host [part=primary-symbol],:host [part=secondary-symbol]{flex:none;width:15px;height:15px;border-radius:1px;margin-right:5px}:host [part=primary-symbol]{background-color:var(--primary-color)}:host [part=secondary-symbol]{background-color:var(--secondary-color)}:host [part=primary-label],:host [part=secondary-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}');
 

package/lib/tornado-chart/themes/solar/pearl/index.js

@@ -1,5 +1,5 @@
-import '@refinitiv-ui/elements/lib/layout/themes/solar/pearl';
-import '@refinitiv-ui/elements/lib/progress-bar/themes/solar/pearl';
+import '@refinitiv-ui/elements/layout/themes/solar/pearl';
+import '@refinitiv-ui/elements/progress-bar/themes/solar/pearl';
 
 elf.customStyles.define('ef-tornado-chart', ':host{--primary-color:#EE7600;--secondary-color:#EE7600;--responsive-width:450;--secondary-color:#BEC3CC;font-size:14rem}:host [part=legend]{display:flex;justify-content:flex-end;margin-bottom:25px}:host [part=legend-item]{display:inline-flex;overflow:hidden;align-items:center;margin-right:10px}:host [part=legend][vertical]{justify-content:flex-start;flex-wrap:wrap}:host [part=primary-symbol],:host [part=secondary-symbol]{flex:none;width:15px;height:15px;border-radius:1px;margin-right:5px}:host [part=primary-symbol]{background-color:var(--primary-color)}:host [part=secondary-symbol]{background-color:var(--secondary-color)}:host [part=primary-label],:host [part=secondary-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}');
 

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

@@ -101,11 +101,11 @@ export declare class TreeItem<T extends TreeDataItem = TreeDataItem> extends Con
      */
     protected firstUpdated(changedProperties: PropertyValues): void;
     /**
-     * Invoked whenever the element is updated
-     * @param changedProperties Map of changed properties with old values
+     * Invoked before update() to compute values needed during the update.
+     * @param changedProperties changed properties
      * @returns {void}
      */
-    protected update(changedProperties: PropertyValues): void;
+    protected willUpdate(changedProperties: PropertyValues): void;
     /**
      * A `TemplateResult` that will be used
      * to render the updated internal template.
@@ -113,6 +113,11 @@ export declare class TreeItem<T extends TreeDataItem = TreeDataItem> extends Con
      */
     protected render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-tree-item': TreeItem;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {

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';
@@ -170,12 +170,11 @@ let TreeItem = class TreeItem extends ControlElement {
         this.setAttribute('aria-level', String(this.depth + 1));
     }
     /**
-     * Invoked whenever the element is updated
-     * @param changedProperties Map of changed properties with old values
+     * Invoked before update() to compute values needed during the update.
+     * @param changedProperties changed properties
      * @returns {void}
      */
-    update(changedProperties) {
-        super.update(changedProperties);
+    willUpdate(changedProperties) {
         if (changedProperties.has('checkedState')) {
             this.checkedChanged();
         }

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';
@@ -14,7 +14,6 @@ import { TreeManagerMode } from '../managers/tree-manager.js';
  *
  * @attr {boolean} [stateless=false] - Disable selections
  * @prop {boolean} [stateless=false] - Disable selections
- *
  */
 export declare class Tree<T extends TreeDataItem = TreeDataItem> extends List<T> {
     /**
@@ -127,7 +126,7 @@ export declare class Tree<T extends TreeDataItem = TreeDataItem> extends List<T>
     /**
      * @override
      */
-    protected update(changedProperties: PropertyValues): void;
+    protected willUpdate(changeProperties: PropertyValues): void;
     /**
      * Filter the internal items by query changes items' hidden state
      * @returns {void}
@@ -187,6 +186,11 @@ export declare class Tree<T extends TreeDataItem = TreeDataItem> extends List<T>
      */
     protected get mode(): TreeManagerMode;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-tree': Tree;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {

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';
@@ -16,7 +16,6 @@ const EXPAND_TOGGLE_ATTR = 'expand-toggle';
  *
  * @attr {boolean} [stateless=false] - Disable selections
  * @prop {boolean} [stateless=false] - Disable selections
- *
  */
 let Tree = class Tree extends List {
     constructor() {
@@ -234,14 +233,14 @@ let Tree = class Tree extends List {
     /**
      * @override
      */
-    update(changedProperties) {
-        if (changedProperties.has('noRelation') || changedProperties.has('multiple')) {
+    willUpdate(changeProperties) {
+        super.willUpdate(changeProperties);
+        if (changeProperties.has('noRelation') || changeProperties.has('multiple')) {
             this.manager.setMode(this.mode);
         }
-        if (changedProperties.has('query') || changedProperties.has('data')) {
+        if (changeProperties.has('query') || changeProperties.has('data')) {
             this.filterItems();
         }
-        super.update(changedProperties);
     }
     /**
      * Filter the internal items by query changes items' hidden state

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

@@ -1,5 +1,9 @@
 import { Renderer } from '../../list/renderer.js';
 import '../elements/tree-item.js';
 export declare class TreeRenderer extends Renderer {
+    /**
+     * Renderer key prefix, used in combination with item value to give unique id to each item
+     */
+    key: string;
     constructor(scope?: unknown);
 }

package/lib/tree/helpers/renderer.js

@@ -1,5 +1,7 @@
+import { uuid } from '@refinitiv-ui/utils/uuid.js';
 import { TreeManager, TreeManagerMode, CheckedState } from '../managers/tree-manager.js';
 import { Renderer } from '../../list/renderer.js';
+import { getItemId } from '../../list/helpers/item-id.js';
 import '../elements/tree-item.js';
 export class TreeRenderer extends Renderer {
     constructor(scope) {
@@ -7,7 +9,6 @@ export class TreeRenderer extends Renderer {
         let currentMode;
         let currentComposer;
         super((item, composer, element = document.createElement('ef-tree-item')) => {
-            const el = element;
             const multiple = !!scope && scope.multiple === true;
             const noRelation = !!scope && scope.noRelation === true;
             const mode = !multiple || !noRelation ? TreeManagerMode.RELATIONAL : TreeManagerMode.INDEPENDENT;
@@ -16,18 +17,24 @@ export class TreeRenderer extends Renderer {
                 currentComposer = composer;
                 manager = new TreeManager(composer, mode);
             }
-            el.multiple = multiple;
-            el.item = item;
-            el.depth = composer.getItemDepth(item);
-            el.parent = composer.getItemChildren(item).length > 0;
-            el.expanded = manager.isItemExpanded(item);
-            el.checkedState = !multiple && el.parent ? CheckedState.UNCHECKED : manager.getItemCheckedState(item);
-            el.icon = composer.getItemPropertyValue(item, 'icon');
-            el.label = composer.getItemPropertyValue(item, 'label');
-            el.disabled = composer.getItemPropertyValue(item, 'disabled') === true;
-            el.readonly = composer.getItemPropertyValue(item, 'readonly') === true;
-            el.highlighted = composer.getItemPropertyValue(item, 'highlighted') === true;
-            return el;
+            element.multiple = multiple;
+            element.item = item;
+            element.tabIndex = -1;
+            element.id = getItemId(this.key, item.value);
+            element.depth = composer.getItemDepth(item);
+            element.parent = composer.getItemChildren(item).length > 0;
+            element.expanded = manager.isItemExpanded(item);
+            element.checkedState = !multiple && element.parent ? CheckedState.UNCHECKED : manager.getItemCheckedState(item);
+            element.icon = composer.getItemPropertyValue(item, 'icon');
+            element.label = composer.getItemPropertyValue(item, 'label');
+            element.disabled = composer.getItemPropertyValue(item, 'disabled') === true;
+            element.readonly = composer.getItemPropertyValue(item, 'readonly') === true;
+            element.highlighted = composer.getItemPropertyValue(item, 'highlighted') === true;
+            return element;
         });
+        /**
+         * Renderer key prefix, used in combination with item value to give unique id to each item
+         */
+        this.key = uuid();
     }
 }

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,