@refinitiv-ui/elements 5.11.0-alpha.1 → 5.12.0-alpha.2

package/lib/text-field/themes/halo/node_modules/@refinitiv-ui/elemental-theme/light/index.js

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/icon/themes/halo/node_modules/@refinitiv-ui/elemental-theme/light';
+
+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:15rem;font-weight:400;height:40px;width:300px;max-width:100%;padding:0 6px;margin:10px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#3e444f;border-radius:3px;background-color:transparent;text-overflow:ellipsis;border:0 solid #d4d7dd;border:none;transition:background-size .2s ease-out;background:linear-gradient(#535de8,#535de8) center calc(100% + 2px)/30% 2px,linear-gradient(#d4d7dd,#d4d7dd) center bottom/100% 1px;background-repeat:no-repeat}:host([disabled]){color:#9fa2a7;border:0 solid #d4d7dd;border:none;transition:background-size .2s ease-out;background:linear-gradient(#d4d7dd,#d4d7dd) center calc(100% + 2px)/30% 2px,linear-gradient(#d4d7dd,#d4d7dd) center bottom/100% 1px;background-repeat:no-repeat}:host([type=number]){padding-right:0}:host([warning]){border:0 solid #f18f34;border:none;transition:background-size .2s ease-out;background:linear-gradient(#f18f34,#f18f34) center calc(100% + 2px)/30% 2px,linear-gradient(#f18f34,#f18f34) center bottom/100% 1px;background-repeat:no-repeat}:host([warning][disabled]){color:#9fa2a7;border:0 solid #f18f34;border:none;transition:background-size .2s ease-out;background:linear-gradient(#f18f34,#f18f34) center calc(100% + 2px)/30% 2px,linear-gradient(#f18f34,#f18f34) center bottom/100% 1px;background-repeat:no-repeat}:host([error]),:host([error][warning]){border:0 solid #e5445f;border:none;transition:background-size .2s ease-out;background:linear-gradient(#e5445f,#e5445f) center calc(100% + 2px)/30% 2px,linear-gradient(#e5445f,#e5445f) center bottom/100% 1px;background-repeat:no-repeat}:host([error][disabled]),:host([error][warning][disabled]){color:#9fa2a7;border:0 solid #e5445f;border:none;transition:background-size .2s ease-out;background:linear-gradient(#e5445f,#e5445f) center calc(100% + 2px)/30% 2px,linear-gradient(#e5445f,#e5445f) center bottom/100% 1px;background-repeat:no-repeat}:host ::-ms-clear{display:none}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#535de8}: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:#3e444f;min-width:1em}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}');

package/lib/text-field/themes/solar/node_modules/@refinitiv-ui/elemental-theme/dark/index.js

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/icon/themes/solar/node_modules/@refinitiv-ui/elemental-theme/dark';
+
+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:15rem;font-weight:400;height:40px;width:300px;max-width:100%;padding:0 6px;margin:10px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#b7bcc6;border-radius:3px;background-color:transparent;text-overflow:ellipsis;border:0 solid #3e444f;border:none;transition:background-size .2s ease-out;background:linear-gradient(#535de8,#535de8) center calc(100% + 2px)/30% 2px,linear-gradient(#3e444f,#3e444f) center bottom/100% 1px;background-repeat:no-repeat}:host([disabled]){color:#5c5e63;border:0 solid #3e444f;border:none;transition:background-size .2s ease-out;background:linear-gradient(#3e444f,#3e444f) center calc(100% + 2px)/30% 2px,linear-gradient(#3e444f,#3e444f) center bottom/100% 1px;background-repeat:no-repeat}:host([type=number]){padding-right:0}:host([warning]){border:0 solid #f18f34;border:none;transition:background-size .2s ease-out;background:linear-gradient(#f18f34,#f18f34) center calc(100% + 2px)/30% 2px,linear-gradient(#f18f34,#f18f34) center bottom/100% 1px;background-repeat:no-repeat}:host([warning][disabled]){color:#5c5e63;border:0 solid #f18f34;border:none;transition:background-size .2s ease-out;background:linear-gradient(#f18f34,#f18f34) center calc(100% + 2px)/30% 2px,linear-gradient(#f18f34,#f18f34) center bottom/100% 1px;background-repeat:no-repeat}:host([error]),:host([error][warning]){border:0 solid #e5445f;border:none;transition:background-size .2s ease-out;background:linear-gradient(#e5445f,#e5445f) center calc(100% + 2px)/30% 2px,linear-gradient(#e5445f,#e5445f) center bottom/100% 1px;background-repeat:no-repeat}:host([error][disabled]),:host([error][warning][disabled]){color:#5c5e63;border:0 solid #e5445f;border:none;transition:background-size .2s ease-out;background:linear-gradient(#e5445f,#e5445f) center calc(100% + 2px)/30% 2px,linear-gradient(#e5445f,#e5445f) center bottom/100% 1px;background-repeat:no-repeat}:host ::-ms-clear{display:none}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#535de8}: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:#b7bcc6;min-width:1em}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}');

package/lib/text-field/themes/solar/node_modules/@refinitiv-ui/elemental-theme/light/index.js

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/icon/themes/solar/node_modules/@refinitiv-ui/elemental-theme/light';
+
+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:15rem;font-weight:400;height:40px;width:300px;max-width:100%;padding:0 6px;margin:10px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#3e444f;border-radius:3px;background-color:transparent;text-overflow:ellipsis;border:0 solid #d4d7dd;border:none;transition:background-size .2s ease-out;background:linear-gradient(#535de8,#535de8) center calc(100% + 2px)/30% 2px,linear-gradient(#d4d7dd,#d4d7dd) center bottom/100% 1px;background-repeat:no-repeat}:host([disabled]){color:#9fa2a7;border:0 solid #d4d7dd;border:none;transition:background-size .2s ease-out;background:linear-gradient(#d4d7dd,#d4d7dd) center calc(100% + 2px)/30% 2px,linear-gradient(#d4d7dd,#d4d7dd) center bottom/100% 1px;background-repeat:no-repeat}:host([type=number]){padding-right:0}:host([warning]){border:0 solid #f18f34;border:none;transition:background-size .2s ease-out;background:linear-gradient(#f18f34,#f18f34) center calc(100% + 2px)/30% 2px,linear-gradient(#f18f34,#f18f34) center bottom/100% 1px;background-repeat:no-repeat}:host([warning][disabled]){color:#9fa2a7;border:0 solid #f18f34;border:none;transition:background-size .2s ease-out;background:linear-gradient(#f18f34,#f18f34) center calc(100% + 2px)/30% 2px,linear-gradient(#f18f34,#f18f34) center bottom/100% 1px;background-repeat:no-repeat}:host([error]),:host([error][warning]){border:0 solid #e5445f;border:none;transition:background-size .2s ease-out;background:linear-gradient(#e5445f,#e5445f) center calc(100% + 2px)/30% 2px,linear-gradient(#e5445f,#e5445f) center bottom/100% 1px;background-repeat:no-repeat}:host([error][disabled]),:host([error][warning][disabled]){color:#9fa2a7;border:0 solid #e5445f;border:none;transition:background-size .2s ease-out;background:linear-gradient(#e5445f,#e5445f) center calc(100% + 2px)/30% 2px,linear-gradient(#e5445f,#e5445f) center bottom/100% 1px;background-repeat:no-repeat}:host ::-ms-clear{display:none}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#535de8}: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:#3e444f;min-width:1em}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}');

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/time-picker/themes/halo/node_modules/@refinitiv-ui/elemental-theme/dark/index.js

@@ -0,0 +1,4 @@
+import '@refinitiv-ui/elements/lib/number-field/themes/halo/node_modules/@refinitiv-ui/elemental-theme/dark';
+import '@refinitiv-ui/elements/lib/icon/themes/halo/node_modules/@refinitiv-ui/elemental-theme/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:15rem;font-weight:400;height:40px;max-width:100%;margin:10px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#b7bcc6;border-radius:3px;background-color:transparent;text-overflow:ellipsis;border:0 solid #3e444f;border:none;transition:background-size .2s ease-out;background:linear-gradient(#535de8,#535de8) center calc(100% + 2px)/30% 2px,linear-gradient(#3e444f,#3e444f) center bottom/100% 1px;background-repeat:no-repeat;width:auto;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;padding:0}:host([disabled]){color:#5c5e63;border:0 solid #3e444f;border:none;transition:background-size .2s ease-out;background:linear-gradient(#3e444f,#3e444f) center calc(100% + 2px)/30% 2px,linear-gradient(#3e444f,#3e444f) center bottom/100% 1px;background-repeat:no-repeat}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#535de8}:host [part=input]{width:30px;margin:0;text-align:center;padding:0;color:inherit}: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-bottom:4px solid #535de8;border-left:8px solid transparent;position:absolute;left:calc(50% - 8px);bottom:0}:host [part=toggle-item]{opacity:.5}:host [part=toggle-item][active]{opacity:1}');

package/lib/time-picker/themes/halo/node_modules/@refinitiv-ui/elemental-theme/light/index.js

@@ -0,0 +1,4 @@
+import '@refinitiv-ui/elements/lib/number-field/themes/halo/node_modules/@refinitiv-ui/elemental-theme/light';
+import '@refinitiv-ui/elements/lib/icon/themes/halo/node_modules/@refinitiv-ui/elemental-theme/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:15rem;font-weight:400;height:40px;max-width:100%;margin:10px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#3e444f;border-radius:3px;background-color:transparent;text-overflow:ellipsis;border:0 solid #d4d7dd;border:none;transition:background-size .2s ease-out;background:linear-gradient(#535de8,#535de8) center calc(100% + 2px)/30% 2px,linear-gradient(#d4d7dd,#d4d7dd) center bottom/100% 1px;background-repeat:no-repeat;width:auto;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;padding:0}:host([disabled]){color:#9fa2a7;border:0 solid #d4d7dd;border:none;transition:background-size .2s ease-out;background:linear-gradient(#d4d7dd,#d4d7dd) center calc(100% + 2px)/30% 2px,linear-gradient(#d4d7dd,#d4d7dd) center bottom/100% 1px;background-repeat:no-repeat}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#535de8}:host [part=input]{width:30px;margin:0;text-align:center;padding:0;color:inherit}: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-bottom:4px solid #535de8;border-left:8px solid transparent;position:absolute;left:calc(50% - 8px);bottom:0}:host [part=toggle-item]{opacity:.5}:host [part=toggle-item][active]{opacity:1}');

package/lib/time-picker/themes/solar/node_modules/@refinitiv-ui/elemental-theme/dark/index.js

@@ -0,0 +1,4 @@
+import '@refinitiv-ui/elements/lib/number-field/themes/solar/node_modules/@refinitiv-ui/elemental-theme/dark';
+import '@refinitiv-ui/elements/lib/icon/themes/solar/node_modules/@refinitiv-ui/elemental-theme/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:15rem;font-weight:400;height:40px;max-width:100%;margin:10px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#b7bcc6;border-radius:3px;background-color:transparent;text-overflow:ellipsis;border:0 solid #3e444f;border:none;transition:background-size .2s ease-out;background:linear-gradient(#535de8,#535de8) center calc(100% + 2px)/30% 2px,linear-gradient(#3e444f,#3e444f) center bottom/100% 1px;background-repeat:no-repeat;width:auto;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;padding:0}:host([disabled]){color:#5c5e63;border:0 solid #3e444f;border:none;transition:background-size .2s ease-out;background:linear-gradient(#3e444f,#3e444f) center calc(100% + 2px)/30% 2px,linear-gradient(#3e444f,#3e444f) center bottom/100% 1px;background-repeat:no-repeat}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#535de8}:host [part=input]{width:30px;margin:0;text-align:center;padding:0;color:inherit}: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-bottom:4px solid #535de8;border-left:8px solid transparent;position:absolute;left:calc(50% - 8px);bottom:0}:host [part=toggle-item]{opacity:.5}:host [part=toggle-item][active]{opacity:1}');

package/lib/time-picker/themes/solar/node_modules/@refinitiv-ui/elemental-theme/light/index.js

@@ -0,0 +1,4 @@
+import '@refinitiv-ui/elements/lib/number-field/themes/solar/node_modules/@refinitiv-ui/elemental-theme/light';
+import '@refinitiv-ui/elements/lib/icon/themes/solar/node_modules/@refinitiv-ui/elemental-theme/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:15rem;font-weight:400;height:40px;max-width:100%;margin:10px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#3e444f;border-radius:3px;background-color:transparent;text-overflow:ellipsis;border:0 solid #d4d7dd;border:none;transition:background-size .2s ease-out;background:linear-gradient(#535de8,#535de8) center calc(100% + 2px)/30% 2px,linear-gradient(#d4d7dd,#d4d7dd) center bottom/100% 1px;background-repeat:no-repeat;width:auto;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;padding:0}:host([disabled]){color:#9fa2a7;border:0 solid #d4d7dd;border:none;transition:background-size .2s ease-out;background:linear-gradient(#d4d7dd,#d4d7dd) center calc(100% + 2px)/30% 2px,linear-gradient(#d4d7dd,#d4d7dd) center bottom/100% 1px;background-repeat:no-repeat}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#535de8}:host [part=input]{width:30px;margin:0;text-align:center;padding:0;color:inherit}: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-bottom:4px solid #535de8;border-left:8px solid transparent;position:absolute;left:calc(50% - 8px);bottom:0}:host [part=toggle-item]{opacity:.5}:host [part=toggle-item][active]{opacity:1}');

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/toggle/themes/halo/node_modules/@refinitiv-ui/elemental-theme/dark/index.js

@@ -0,0 +1,2 @@
+
+elf.customStyles.define('ef-toggle', ':host{touch-action:manipulation;font-size:15rem;color:#fff;width:52px;height:28px;line-height:22px;background-color:#16181c;text-align:center;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;outline:0;border-radius:3px;box-shadow:inset 0 0 3.75px rgba(0,0,0,.2);transition:box-shadow .2s,border-color .2s}:host [part=toggle]{cursor:pointer;display:block;position:relative;width:100%;height:100%;box-sizing:border-box;border:1px solid #3e444f;border-radius:inherit;text-overflow:inherit;overflow:inherit;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host [part=toggle]::after{content:\'\';position:absolute;top:1px;left:1px;width:calc(50% - 1px);height:calc(100% - (1px * 2));background-color:#555d6c;box-sizing:border-box;border-radius:inherit}:host([checked-label]),:host([label]){width:67.6px;min-width:52px}:host([checked-label][checked]) [part=toggle],:host([label][checked]) [part=toggle]{padding-right:28px;padding-left:3px}:host([checked-label]) [part=toggle],:host([label]) [part=toggle]{padding:3px 3px 3px 28px}:host([checked-label]) [part=toggle]::after,:host([label]) [part=toggle]::after{width:24px}:host([readonly]) [part=toggle]{cursor:default}:host([disabled]) [part=toggle]{opacity:.5}:host([checked]) [part=toggle]::after{right:1px;left:auto;border-color:#535de8;background-color:#535de8}@media (-ms-high-contrast:none),(pointer:fine){:host(:hover:not([readonly])),:host([focused=visible]){box-shadow:0 0 3.75px #535de8}:host(:hover:not([readonly])) [part=toggle],:host([focused=visible]) [part=toggle]{border-color:#535de8}}');

package/lib/toggle/themes/halo/node_modules/@refinitiv-ui/elemental-theme/light/index.js

@@ -0,0 +1,2 @@
+
+elf.customStyles.define('ef-toggle', ':host{touch-action:manipulation;font-size:15rem;color:#3e444f;width:52px;height:28px;line-height:22px;background-color:#fff;text-align:center;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;outline:0;border-radius:3px;box-shadow:inset 0 0 3.75px rgba(0,0,0,.2);transition:box-shadow .2s,border-color .2s}:host [part=toggle]{cursor:pointer;display:block;position:relative;width:100%;height:100%;box-sizing:border-box;border:1px solid #d4d7dd;border-radius:inherit;text-overflow:inherit;overflow:inherit;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host [part=toggle]::after{content:\'\';position:absolute;top:1px;left:1px;width:calc(50% - 1px);height:calc(100% - (1px * 2));background-color:#d4d7dd;box-sizing:border-box;border-radius:inherit}:host([checked-label]),:host([label]){width:67.6px;min-width:52px}:host([checked-label][checked]) [part=toggle],:host([label][checked]) [part=toggle]{padding-right:28px;padding-left:3px}:host([checked-label]) [part=toggle],:host([label]) [part=toggle]{padding:3px 3px 3px 28px}:host([checked-label]) [part=toggle]::after,:host([label]) [part=toggle]::after{width:24px}:host([readonly]) [part=toggle]{cursor:default}:host([disabled]) [part=toggle]{opacity:.5}:host([checked]) [part=toggle]::after{right:1px;left:auto;border-color:#535de8;background-color:#535de8}@media (-ms-high-contrast:none),(pointer:fine){:host(:hover:not([readonly])),:host([focused=visible]){box-shadow:0 0 3.75px #535de8}:host(:hover:not([readonly])) [part=toggle],:host([focused=visible]) [part=toggle]{border-color:#535de8}}');

package/lib/toggle/themes/solar/node_modules/@refinitiv-ui/elemental-theme/dark/index.js

@@ -0,0 +1,2 @@
+
+elf.customStyles.define('ef-toggle', ':host{touch-action:manipulation;font-size:15rem;color:#fff;width:52px;height:28px;line-height:22px;background-color:#16181c;text-align:center;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;outline:0;border-radius:3px;box-shadow:inset 0 0 3.75px rgba(0,0,0,.2);transition:box-shadow .2s,border-color .2s}:host [part=toggle]{cursor:pointer;display:block;position:relative;width:100%;height:100%;box-sizing:border-box;border:1px solid #3e444f;border-radius:inherit;text-overflow:inherit;overflow:inherit;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host [part=toggle]::after{content:\'\';position:absolute;top:1px;left:1px;width:calc(50% - 1px);height:calc(100% - (1px * 2));background-color:#555d6c;box-sizing:border-box;border-radius:inherit}:host([checked-label]),:host([label]){width:67.6px;min-width:52px}:host([checked-label][checked]) [part=toggle],:host([label][checked]) [part=toggle]{padding-right:28px;padding-left:3px}:host([checked-label]) [part=toggle],:host([label]) [part=toggle]{padding:3px 3px 3px 28px}:host([checked-label]) [part=toggle]::after,:host([label]) [part=toggle]::after{width:24px}:host([readonly]) [part=toggle]{cursor:default}:host([disabled]) [part=toggle]{opacity:.5}:host([checked]) [part=toggle]::after{right:1px;left:auto;border-color:#535de8;background-color:#535de8}@media (-ms-high-contrast:none),(pointer:fine){:host(:hover:not([readonly])),:host([focused=visible]){box-shadow:0 0 3.75px #535de8}:host(:hover:not([readonly])) [part=toggle],:host([focused=visible]) [part=toggle]{border-color:#535de8}}');

package/lib/toggle/themes/solar/node_modules/@refinitiv-ui/elemental-theme/light/index.js

@@ -0,0 +1,2 @@
+
+elf.customStyles.define('ef-toggle', ':host{touch-action:manipulation;font-size:15rem;color:#3e444f;width:52px;height:28px;line-height:22px;background-color:#fff;text-align:center;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;outline:0;border-radius:3px;box-shadow:inset 0 0 3.75px rgba(0,0,0,.2);transition:box-shadow .2s,border-color .2s}:host [part=toggle]{cursor:pointer;display:block;position:relative;width:100%;height:100%;box-sizing:border-box;border:1px solid #d4d7dd;border-radius:inherit;text-overflow:inherit;overflow:inherit;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host [part=toggle]::after{content:\'\';position:absolute;top:1px;left:1px;width:calc(50% - 1px);height:calc(100% - (1px * 2));background-color:#d4d7dd;box-sizing:border-box;border-radius:inherit}:host([checked-label]),:host([label]){width:67.6px;min-width:52px}:host([checked-label][checked]) [part=toggle],:host([label][checked]) [part=toggle]{padding-right:28px;padding-left:3px}:host([checked-label]) [part=toggle],:host([label]) [part=toggle]{padding:3px 3px 3px 28px}:host([checked-label]) [part=toggle]::after,:host([label]) [part=toggle]::after{width:24px}:host([readonly]) [part=toggle]{cursor:default}:host([disabled]) [part=toggle]{opacity:.5}:host([checked]) [part=toggle]::after{right:1px;left:auto;border-color:#535de8;background-color:#535de8}@media (-ms-high-contrast:none),(pointer:fine){:host(:hover:not([readonly])),:host([focused=visible]){box-shadow:0 0 3.75px #535de8}:host(:hover:not([readonly])) [part=toggle],:host([focused=visible]) [part=toggle]{border-color:#535de8}}');

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/tooltip/themes/halo/node_modules/@refinitiv-ui/elemental-theme/dark/index.js

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/overlay/themes/halo/node_modules/@refinitiv-ui/elemental-theme/dark';
+
+elf.customStyles.define('ef-tooltip', ':host [part=tooltip]{--panel-background-color:hsl(220, 12%, 15%);pointer-events:none;border:1px solid hsla(220,12%,75%,.15);padding:5px 8px;background-color:#21242a;border-radius:3px;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/halo/node_modules/@refinitiv-ui/elemental-theme/light/index.js

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/overlay/themes/halo/node_modules/@refinitiv-ui/elemental-theme/light';
+
+elf.customStyles.define('ef-tooltip', ':host [part=tooltip]{--panel-background-color:hsl(220, 12%, 98%);pointer-events:none;border:1px solid hsla(220,12%,75%,.15);padding:5px 8px;background-color:#f9f9fa;border-radius:3px;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/node_modules/@refinitiv-ui/elemental-theme/dark/index.js

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/overlay/themes/solar/node_modules/@refinitiv-ui/elemental-theme/dark';
+
+elf.customStyles.define('ef-tooltip', ':host [part=tooltip]{--panel-background-color:hsl(220, 12%, 15%);pointer-events:none;border:1px solid hsla(220,12%,75%,.15);padding:5px 8px;background-color:#21242a;border-radius:3px;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/node_modules/@refinitiv-ui/elemental-theme/light/index.js

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/overlay/themes/solar/node_modules/@refinitiv-ui/elemental-theme/light';
+
+elf.customStyles.define('ef-tooltip', ':host [part=tooltip]{--panel-background-color:hsl(220, 12%, 98%);pointer-events:none;border:1px solid hsla(220,12%,75%,.15);padding:5px 8px;background-color:#f9f9fa;border-radius:3px;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.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/tornado-chart/themes/halo/node_modules/@refinitiv-ui/elemental-theme/dark/index.js

@@ -0,0 +1,6 @@
+import '@refinitiv-ui/elements/lib/layout/themes/halo/node_modules/@refinitiv-ui/elemental-theme/dark';
+import '@refinitiv-ui/elements/lib/progress-bar/themes/halo/node_modules/@refinitiv-ui/elemental-theme/dark';
+
+elf.customStyles.define('ef-tornado-chart', ':host{--primary-color:hsl(236, 77%, 62%);--secondary-color:hsl(236, 35%, 44%);--responsive-width:450;font-size:15rem}: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}');
+
+elf.customStyles.define('ef-tornado-item', ':host{margin:0;padding:0 5px;--primary-color:var(\'--primary-color\', hsl(236, 77%, 62%));--secondary-color:var(\'--secondary-color\', hsl(236, 35%, 44%))}:host(:hover),:host([highlighted]){background-color:hsla(220,12%,75%,.05)}:host [part=label]{text-align:left;margin:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host [part=primary-bar],:host [part=secondary-bar]{width:100%;height:20px}:host [part=primary-bar]{color:var(--primary-color);margin-left:50px}:host [part=secondary-bar]{color:var(--secondary-color);margin-right:50px}:host [part=seperator]{height:30px;border-left:2px solid #3e444f}:host([highlighted]) [part=label],:host([highlighted]) [part=primary-bar],:host([highlighted]) [part=secondary-bar]{font-weight:700}:host([vertical]){border-left:2px solid #3e444f;padding-bottom:5px}:host([vertical]) [part=label]{margin:3px}:host([vertical]) [part=seperator]{display:none}:host([vertical]) [part=container]{align-items:inherit}:host([vertical]) [part=primary-bar]{margin:0 50px 0 0}:host([vertical]) [part=secondary-bar]{margin:3px 50px 0 0}');

package/lib/tornado-chart/themes/halo/node_modules/@refinitiv-ui/elemental-theme/light/index.js

@@ -0,0 +1,6 @@
+import '@refinitiv-ui/elements/lib/layout/themes/halo/node_modules/@refinitiv-ui/elemental-theme/light';
+import '@refinitiv-ui/elements/lib/progress-bar/themes/halo/node_modules/@refinitiv-ui/elemental-theme/light';
+
+elf.customStyles.define('ef-tornado-chart', ':host{--primary-color:hsl(236, 77%, 62%);--secondary-color:hsl(236, 34%, 34%);--responsive-width:450;font-size:15rem}: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}');
+
+elf.customStyles.define('ef-tornado-item', ':host{margin:0;padding:0 5px;--primary-color:var(\'--primary-color\', hsl(236, 77%, 62%));--secondary-color:var(\'--secondary-color\', hsl(236, 34%, 34%))}:host(:hover),:host([highlighted]){background-color:hsla(220,12%,28%,.05)}:host [part=label]{text-align:left;margin:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host [part=primary-bar],:host [part=secondary-bar]{width:100%;height:20px}:host [part=primary-bar]{color:var(--primary-color);margin-left:50px}:host [part=secondary-bar]{color:var(--secondary-color);margin-right:50px}:host [part=seperator]{height:30px;border-left:2px solid #d4d7dd}:host([highlighted]) [part=label],:host([highlighted]) [part=primary-bar],:host([highlighted]) [part=secondary-bar]{font-weight:700}:host([vertical]){border-left:2px solid #d4d7dd;padding-bottom:5px}:host([vertical]) [part=label]{margin:3px}:host([vertical]) [part=seperator]{display:none}:host([vertical]) [part=container]{align-items:inherit}:host([vertical]) [part=primary-bar]{margin:0 50px 0 0}:host([vertical]) [part=secondary-bar]{margin:3px 50px 0 0}');

package/lib/tornado-chart/themes/solar/node_modules/@refinitiv-ui/elemental-theme/dark/index.js

@@ -0,0 +1,6 @@
+import '@refinitiv-ui/elements/lib/layout/themes/solar/node_modules/@refinitiv-ui/elemental-theme/dark';
+import '@refinitiv-ui/elements/lib/progress-bar/themes/solar/node_modules/@refinitiv-ui/elemental-theme/dark';
+
+elf.customStyles.define('ef-tornado-chart', ':host{--primary-color:hsl(236, 77%, 62%);--secondary-color:hsl(236, 35%, 44%);--responsive-width:450;font-size:15rem}: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}');
+
+elf.customStyles.define('ef-tornado-item', ':host{margin:0;padding:0 5px;--primary-color:var(\'--primary-color\', hsl(236, 77%, 62%));--secondary-color:var(\'--secondary-color\', hsl(236, 35%, 44%))}:host(:hover),:host([highlighted]){background-color:hsla(220,12%,75%,.05)}:host [part=label]{text-align:left;margin:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host [part=primary-bar],:host [part=secondary-bar]{width:100%;height:20px}:host [part=primary-bar]{color:var(--primary-color);margin-left:50px}:host [part=secondary-bar]{color:var(--secondary-color);margin-right:50px}:host [part=seperator]{height:30px;border-left:2px solid #3e444f}:host([highlighted]) [part=label],:host([highlighted]) [part=primary-bar],:host([highlighted]) [part=secondary-bar]{font-weight:700}:host([vertical]){border-left:2px solid #3e444f;padding-bottom:5px}:host([vertical]) [part=label]{margin:3px}:host([vertical]) [part=seperator]{display:none}:host([vertical]) [part=container]{align-items:inherit}:host([vertical]) [part=primary-bar]{margin:0 50px 0 0}:host([vertical]) [part=secondary-bar]{margin:3px 50px 0 0}');

package/lib/tornado-chart/themes/solar/node_modules/@refinitiv-ui/elemental-theme/light/index.js

@@ -0,0 +1,6 @@
+import '@refinitiv-ui/elements/lib/layout/themes/solar/node_modules/@refinitiv-ui/elemental-theme/light';
+import '@refinitiv-ui/elements/lib/progress-bar/themes/solar/node_modules/@refinitiv-ui/elemental-theme/light';
+
+elf.customStyles.define('ef-tornado-chart', ':host{--primary-color:hsl(236, 77%, 62%);--secondary-color:hsl(236, 34%, 34%);--responsive-width:450;font-size:15rem}: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}');
+
+elf.customStyles.define('ef-tornado-item', ':host{margin:0;padding:0 5px;--primary-color:var(\'--primary-color\', hsl(236, 77%, 62%));--secondary-color:var(\'--secondary-color\', hsl(236, 34%, 34%))}:host(:hover),:host([highlighted]){background-color:hsla(220,12%,28%,.05)}:host [part=label]{text-align:left;margin:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host [part=primary-bar],:host [part=secondary-bar]{width:100%;height:20px}:host [part=primary-bar]{color:var(--primary-color);margin-left:50px}:host [part=secondary-bar]{color:var(--secondary-color);margin-right:50px}:host [part=seperator]{height:30px;border-left:2px solid #d4d7dd}:host([highlighted]) [part=label],:host([highlighted]) [part=primary-bar],:host([highlighted]) [part=secondary-bar]{font-weight:700}:host([vertical]){border-left:2px solid #d4d7dd;padding-bottom:5px}:host([vertical]) [part=label]{margin:3px}:host([vertical]) [part=seperator]{display:none}:host([vertical]) [part=container]{align-items:inherit}:host([vertical]) [part=primary-bar]{margin:0 50px 0 0}:host([vertical]) [part=secondary-bar]{margin:3px 50px 0 0}');

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/themes/halo/node_modules/@refinitiv-ui/elemental-theme/dark/index.js

@@ -0,0 +1,7 @@
+import '@refinitiv-ui/elements/lib/checkbox/themes/halo/node_modules/@refinitiv-ui/elemental-theme/dark';
+import '@refinitiv-ui/elements/lib/icon/themes/halo/node_modules/@refinitiv-ui/elemental-theme/dark';
+import '@refinitiv-ui/elements/lib/item/themes/halo/node_modules/@refinitiv-ui/elemental-theme/dark';
+
+elf.customStyles.define('ef-tree-item', '@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){:host(:after){content:\'\';min-height:inherit;font-size:0}}:host([selected]){color:#e01865}:host([readonly]){cursor:default}:host([focused]),:host([highlighted]){background-color:rgba(41,45,71,.5)}:host([focused]:not([selected])),:host([highlighted]:not([selected])){color:#b7bcc6}:host [part=center],:host [part=sub-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host([disabled]){color:rgba(184,189,199,.5)}:host([type=divider]),:host([type=header]){pointer-events:none;min-height:auto}:host([type=divider]) [part=sub-label],:host([type=header]) [part=sub-label]{display:none}:host([type=header]){color:hsla(220,12%,75%,.6);background-color:transparent;font-size:70%;font-weight:700;border:none;height:40px;align-items:flex-end;margin:0;min-height:0;text-transform:uppercase}:host([type=divider]){border:none;padding:0;margin:0;height:11px;background:linear-gradient(#3e444f,#3e444f) 0 center/calc(100% - (0px * 2)) 1px no-repeat}:host [part=checkbox],:host [part=icon],:host [part=left] ::slotted(*){margin:0 .5em 0 0}:host [part=right] ::slotted(*){margin-left:.5em}:host [part=sub-label]{font-size:80%}:host{outline:0;cursor:pointer;padding:0 10px;min-height:40px;box-sizing:border-box;touch-action:manipulation;min-width:300px;display:flex;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(:after){content:\'\';min-height:inherit;font-size:0}:host [part=indent]{height:0;width:0;flex:none;font-size:40px}:host [part=toggle]{width:40px;height:40px;margin-top:-5px;margin-bottom:-5px;margin-left:-5px;max-height:100%;display:flex;align-items:center;justify-content:center;flex:none}:host [part~=toggle-icon]{transition:transform .2s}:host [part~=toggle-icon-expanded]{transform:rotate(90deg)}:host [part=checkbox]{margin:0 6px 0 0;flex:none}:host [part=label-icon]{flex-shrink:0}:host [part=label]{width:100%;padding:4px 6px;word-break:break-word}');
+
+elf.customStyles.define('ef-tree', ':host{--item-indent:10px;--item-height:40px;color:#b7bcc6;background-color:transparent;touch-action:manipulation;scrollbar-face-color:#3e444f;scrollbar-shadow-color:#3e444f;scrollbar-highlight-color:#3e444f;scrollbar-arrow-color:#3e444f;scrollbar-track-color:#21242a;scrollbar-3dlight-color:#21242a;scrollbar-darkshadow-color:#21242a;scrollbar-color:#3e444f #21242a;overflow-x:auto}:host(:focus){outline:0}:host([readonly]) [part=list-item]{cursor:default}::-webkit-scrollbar{width:15px;height:15px}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #21242a;height:15px;width:15px;display:block}::-webkit-scrollbar-thumb{background:#3e444f;border-radius:8px;border:2px solid #21242a}::-webkit-scrollbar-thumb:hover{background:#b7bcc6}::-webkit-scrollbar-thumb:active{background:#707a8e}::-webkit-scrollbar-track{background:#21242a}::-webkit-scrollbar-corner{background:#21242a}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{background-image:linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f);background-position:12px 8.5px,11px 7.5px,10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 4.5px,5px 5.5px,4px 6.5px,3px 7.5px,2px 8.5px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6);background-position:12px 8.5px,11px 7.5px,10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 4.5px,5px 5.5px,4px 6.5px,3px 7.5px,2px 8.5px}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e);background-position:12px 8.5px,11px 7.5px,10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 4.5px,5px 5.5px,4px 6.5px,3px 7.5px,2px 8.5px}::-webkit-scrollbar-button:vertical:end:increment{background-image:linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f);background-position:12px 4.5px,11px 5.5px,10px 6.5px,9px 7.5px,8px 8.5px,7px 9.5px,6px 8.5px,5px 7.5px,4px 6.5px,3px 5.5px,2px 4.5px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6);background-position:12px 4.5px,11px 5.5px,10px 6.5px,9px 7.5px,8px 8.5px,7px 9.5px,6px 8.5px,5px 7.5px,4px 6.5px,3px 5.5px,2px 4.5px}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e);background-position:12px 4.5px,11px 5.5px,10px 6.5px,9px 7.5px,8px 8.5px,7px 9.5px,6px 8.5px,5px 7.5px,4px 6.5px,3px 5.5px,2px 4.5px}::-webkit-scrollbar-button:horizontal:start:decrement{background-image:linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f);background-position:8.5px 12px,7.5px 11px,6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,4.5px 6px,5.5px 5px,6.5px 4px,7.5px 3px,8.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6);background-position:8.5px 12px,7.5px 11px,6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,4.5px 6px,5.5px 5px,6.5px 4px,7.5px 3px,8.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e);background-position:8.5px 12px,7.5px 11px,6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,4.5px 6px,5.5px 5px,6.5px 4px,7.5px 3px,8.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment{background-image:linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f);background-position:4.5px 12px,5.5px 11px,6.5px 10px,7.5px 9px,8.5px 8px,9.5px 7px,8.5px 6px,7.5px 5px,6.5px 4px,5.5px 3px,4.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6);background-position:4.5px 12px,5.5px 11px,6.5px 10px,7.5px 9px,8.5px 8px,9.5px 7px,8.5px 6px,7.5px 5px,6.5px 4px,5.5px 3px,4.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e);background-position:4.5px 12px,5.5px 11px,6.5px 10px,7.5px 9px,8.5px 8px,9.5px 7px,8.5px 6px,7.5px 5px,6.5px 4px,5.5px 3px,4.5px 2px}');

package/lib/tree/themes/halo/node_modules/@refinitiv-ui/elemental-theme/light/index.js

@@ -0,0 +1,7 @@
+import '@refinitiv-ui/elements/lib/checkbox/themes/halo/node_modules/@refinitiv-ui/elemental-theme/light';
+import '@refinitiv-ui/elements/lib/icon/themes/halo/node_modules/@refinitiv-ui/elemental-theme/light';
+import '@refinitiv-ui/elements/lib/item/themes/halo/node_modules/@refinitiv-ui/elemental-theme/light';
+
+elf.customStyles.define('ef-tree-item', '@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){:host(:after){content:\'\';min-height:inherit;font-size:0}}:host([selected]){color:#e01865}:host([readonly]){cursor:default}:host([focused]),:host([highlighted]){background-color:rgba(229,231,252,.5)}:host([focused]:not([selected])),:host([highlighted]:not([selected])){color:#3e444f}:host [part=center],:host [part=sub-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host([disabled]){color:rgba(63,69,80,.5)}:host([type=divider]),:host([type=header]){pointer-events:none;min-height:auto}:host([type=divider]) [part=sub-label],:host([type=header]) [part=sub-label]{display:none}:host([type=header]){color:hsla(220,12%,28%,.6);background-color:transparent;font-size:70%;font-weight:700;border:none;height:40px;align-items:flex-end;margin:0;min-height:0;text-transform:uppercase}:host([type=divider]){border:none;padding:0;margin:0;height:11px;background:linear-gradient(#d4d7dd,#d4d7dd) 0 center/calc(100% - (0px * 2)) 1px no-repeat}:host [part=checkbox],:host [part=icon],:host [part=left] ::slotted(*){margin:0 .5em 0 0}:host [part=right] ::slotted(*){margin-left:.5em}:host [part=sub-label]{font-size:80%}:host{outline:0;cursor:pointer;padding:0 10px;min-height:40px;box-sizing:border-box;touch-action:manipulation;min-width:300px;display:flex;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(:after){content:\'\';min-height:inherit;font-size:0}:host [part=indent]{height:0;width:0;flex:none;font-size:40px}:host [part=toggle]{width:40px;height:40px;margin-top:-5px;margin-bottom:-5px;margin-left:-5px;max-height:100%;display:flex;align-items:center;justify-content:center;flex:none}:host [part~=toggle-icon]{transition:transform .2s}:host [part~=toggle-icon-expanded]{transform:rotate(90deg)}:host [part=checkbox]{margin:0 6px 0 0;flex:none}:host [part=label-icon]{flex-shrink:0}:host [part=label]{width:100%;padding:4px 6px;word-break:break-word}');
+
+elf.customStyles.define('ef-tree', ':host{--item-indent:10px;--item-height:40px;color:#3e444f;background-color:transparent;touch-action:manipulation;scrollbar-face-color:#d4d7dd;scrollbar-shadow-color:#d4d7dd;scrollbar-highlight-color:#d4d7dd;scrollbar-arrow-color:#d4d7dd;scrollbar-track-color:#f9f9fa;scrollbar-3dlight-color:#f9f9fa;scrollbar-darkshadow-color:#f9f9fa;scrollbar-color:#d4d7dd #f9f9fa;overflow-x:auto}:host(:focus){outline:0}:host([readonly]) [part=list-item]{cursor:default}::-webkit-scrollbar{width:15px;height:15px}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #f9f9fa;height:15px;width:15px;display:block}::-webkit-scrollbar-thumb{background:#d4d7dd;border-radius:8px;border:2px solid #f9f9fa}::-webkit-scrollbar-thumb:hover{background:#b7bcc6}::-webkit-scrollbar-thumb:active{background:#707a8e}::-webkit-scrollbar-track{background:#f9f9fa}::-webkit-scrollbar-corner{background:#f9f9fa}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{background-image:linear-gradient(#d4d7dd,#d4d7dd),linear-gradient(#d4d7dd,#d4d7dd),linear-gradient(#d4d7dd,#d4d7dd),linear-gradient(#d4d7dd,#d4d7dd),linear-gradient(#d4d7dd,#d4d7dd),linear-gradient(#d4d7dd,#d4d7dd),linear-gradient(#d4d7dd,#d4d7dd),linear-gradient(#d4d7dd,#d4d7dd),linear-gradient(#d4d7dd,#d4d7dd),linear-gradient(#d4d7dd,#d4d7dd),linear-gradient(#d4d7dd,#d4d7dd);background-position:12px 8.5px,11px 7.5px,10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 4.5px,5px 5.5px,4px 6.5px,3px 7.5px,2px 8.5px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6);background-position:12px 8.5px,11px 7.5px,10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 4.5px,5px 5.5px,4px 6.5px,3px 7.5px,2px 8.5px}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e);background-position:12px 8.5px,11px 7.5px,10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 4.5px,5px 5.5px,4px 6.5px,3px 7.5px,2px 8.5px}::-webkit-scrollbar-button:vertical:end:increment{background-image:linear-gradient(#d4d7dd,#d4d7dd),linear-gradient(#d4d7dd,#d4d7dd),linear-gradient(#d4d7dd,#d4d7dd),linear-gradient(#d4d7dd,#d4d7dd),linear-gradient(#d4d7dd,#d4d7dd),linear-gradient(#d4d7dd,#d4d7dd),linear-gradient(#d4d7dd,#d4d7dd),linear-gradient(#d4d7dd,#d4d7dd),linear-gradient(#d4d7dd,#d4d7dd),linear-gradient(#d4d7dd,#d4d7dd),linear-gradient(#d4d7dd,#d4d7dd);background-position:12px 4.5px,11px 5.5px,10px 6.5px,9px 7.5px,8px 8.5px,7px 9.5px,6px 8.5px,5px 7.5px,4px 6.5px,3px 5.5px,2px 4.5px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6);background-position:12px 4.5px,11px 5.5px,10px 6.5px,9px 7.5px,8px 8.5px,7px 9.5px,6px 8.5px,5px 7.5px,4px 6.5px,3px 5.5px,2px 4.5px}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e);background-position:12px 4.5px,11px 5.5px,10px 6.5px,9px 7.5px,8px 8.5px,7px 9.5px,6px 8.5px,5px 7.5px,4px 6.5px,3px 5.5px,2px 4.5px}::-webkit-scrollbar-button:horizontal:start:decrement{background-image:linear-gradient(#d4d7dd,#d4d7dd),linear-gradient(#d4d7dd,#d4d7dd),linear-gradient(#d4d7dd,#d4d7dd),linear-gradient(#d4d7dd,#d4d7dd),linear-gradient(#d4d7dd,#d4d7dd),linear-gradient(#d4d7dd,#d4d7dd),linear-gradient(#d4d7dd,#d4d7dd),linear-gradient(#d4d7dd,#d4d7dd),linear-gradient(#d4d7dd,#d4d7dd),linear-gradient(#d4d7dd,#d4d7dd),linear-gradient(#d4d7dd,#d4d7dd);background-position:8.5px 12px,7.5px 11px,6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,4.5px 6px,5.5px 5px,6.5px 4px,7.5px 3px,8.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6);background-position:8.5px 12px,7.5px 11px,6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,4.5px 6px,5.5px 5px,6.5px 4px,7.5px 3px,8.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e);background-position:8.5px 12px,7.5px 11px,6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,4.5px 6px,5.5px 5px,6.5px 4px,7.5px 3px,8.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment{background-image:linear-gradient(#d4d7dd,#d4d7dd),linear-gradient(#d4d7dd,#d4d7dd),linear-gradient(#d4d7dd,#d4d7dd),linear-gradient(#d4d7dd,#d4d7dd),linear-gradient(#d4d7dd,#d4d7dd),linear-gradient(#d4d7dd,#d4d7dd),linear-gradient(#d4d7dd,#d4d7dd),linear-gradient(#d4d7dd,#d4d7dd),linear-gradient(#d4d7dd,#d4d7dd),linear-gradient(#d4d7dd,#d4d7dd),linear-gradient(#d4d7dd,#d4d7dd);background-position:4.5px 12px,5.5px 11px,6.5px 10px,7.5px 9px,8.5px 8px,9.5px 7px,8.5px 6px,7.5px 5px,6.5px 4px,5.5px 3px,4.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6);background-position:4.5px 12px,5.5px 11px,6.5px 10px,7.5px 9px,8.5px 8px,9.5px 7px,8.5px 6px,7.5px 5px,6.5px 4px,5.5px 3px,4.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e);background-position:4.5px 12px,5.5px 11px,6.5px 10px,7.5px 9px,8.5px 8px,9.5px 7px,8.5px 6px,7.5px 5px,6.5px 4px,5.5px 3px,4.5px 2px}');