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

package/lib/button-bar/index.js

@@ -1,11 +1,11 @@
 var ButtonBar_1;
 import { __decorate } from "tslib";
 import { BasicElement, html, css } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
+import { ref, createRef } from '@refinitiv-ui/core/directives/ref.js';
 import { VERSION } from '../version.js';
 import { Button } from '../button/index.js';
-import { ref, createRef } from '@refinitiv-ui/core/lib/directives/ref.js';
 /**
  * Used to display multiple buttons to create a list of commands bar.
  */
@@ -256,8 +256,7 @@ let ButtonBar = ButtonBar_1 = class ButtonBar extends BasicElement {
      * @returns the array of Element of the default slot
      */
     getElementsOfSlot() {
-        var _a;
-        return (_a = this.defaultSlot.value) === null || _a === void 0 ? void 0 : _a.assignedNodes().filter(node => node instanceof Element);
+        return this.defaultSlot.value?.assignedNodes().filter(node => node instanceof Element);
     }
     /**
      * Return the array of Buttons which focusable

package/lib/button-bar/themes/halo/dark/index.js

@@ -1,3 +1,3 @@
-import '@refinitiv-ui/elements/lib/button/themes/halo/dark';
+import '@refinitiv-ui/elements/button/themes/halo/dark';
 
 elf.customStyles.define('ef-button-bar', ':host{vertical-align:bottom;margin:1px 0;border-radius:0;box-shadow:0 0 0 0 rgba(0,0,0,.5);touch-action:manipulation;background:0 0}::slotted(ef-button:not(:hover):not(:focus)){box-shadow:0 0 1px rgba(0,0,0,.5)}:host ::slotted(ef-button:not(:focus):hover),:host ::slotted(ef-button:not(:focus)[active][toggles]:hover){border-color:#0d0d0d}:host ::slotted(ef-button-bar:not(:first-child)),:host ::slotted(ef-button:not(:first-child)){margin-left:-1px}');

package/lib/button-bar/themes/halo/light/index.js

@@ -1,3 +1,3 @@
-import '@refinitiv-ui/elements/lib/button/themes/halo/light';
+import '@refinitiv-ui/elements/button/themes/halo/light';
 
 elf.customStyles.define('ef-button-bar', ':host{vertical-align:bottom;margin:1px 0;border-radius:0;box-shadow:0 0 0 0 rgba(0,0,0,.25);touch-action:manipulation;background:0 0}::slotted(ef-button:not(:hover):not(:focus)){box-shadow:0 0 1px rgba(0,0,0,.25)}:host ::slotted(ef-button:not(:focus):hover),:host ::slotted(ef-button:not(:focus)[active][toggles]:hover){border-color:#ccc}:host ::slotted(ef-button-bar:not(:first-child)),:host ::slotted(ef-button:not(:first-child)){margin-left:-1px}');

package/lib/button-bar/themes/solar/charcoal/index.js

@@ -1,3 +1,3 @@
-import '@refinitiv-ui/elements/lib/button/themes/solar/charcoal';
+import '@refinitiv-ui/elements/button/themes/solar/charcoal';
 
 elf.customStyles.define('ef-button-bar', ':host{vertical-align:bottom;margin:1px 0;border-radius:0;box-shadow:0 0 0 0 rgba(0,0,0,.6);touch-action:manipulation;background:0 0}::slotted(ef-button:not(:hover):not(:focus)){box-shadow:0 0 1px rgba(0,0,0,.6)}:host ::slotted(ef-button-bar:not(:first-child)),:host ::slotted(ef-button:not(:first-child)){margin-left:-1px}:host ::slotted(ef-button){box-shadow:none}');

package/lib/button-bar/themes/solar/pearl/index.js

@@ -1,3 +1,3 @@
-import '@refinitiv-ui/elements/lib/button/themes/solar/pearl';
+import '@refinitiv-ui/elements/button/themes/solar/pearl';
 
 elf.customStyles.define('ef-button-bar', ':host{vertical-align:bottom;margin:1px 0;border-radius:0;box-shadow:0 0 0 0 rgba(0,0,0,.3);touch-action:manipulation;background:0 0}::slotted(ef-button:not(:hover):not(:focus)){box-shadow:0 0 1px rgba(0,0,0,.3)}:host ::slotted(ef-button-bar:not(:first-child)),:host ::slotted(ef-button:not(:first-child)){margin-left:-1px}:host ::slotted(ef-button){box-shadow:none}');

package/lib/calendar/constants.js

@@ -1,4 +1,4 @@
-import { uuid } from '@refinitiv-ui/utils/lib/uuid.js';
+import { uuid } from '@refinitiv-ui/utils/uuid.js';
 export var RenderView;
 (function (RenderView) {
     RenderView["DAY"] = "day";

package/lib/calendar/index.d.ts

@@ -4,7 +4,7 @@ import { TranslateDirective, TranslatePromise } from '@refinitiv-ui/translate';
 import { CalendarFilter } from './types';
 import './locales.js';
 import '../button/index.js';
-import '@refinitiv-ui/phrasebook/lib/locale/en/calendar.js';
+import '@refinitiv-ui/phrasebook/locale/en/calendar.js';
 export { CalendarFilter };
 /**
  * Standard calendar element
@@ -396,6 +396,11 @@ export declare class Calendar extends ControlElement implements MultiValue {
      */
     protected render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-calendar': Calendar;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {

package/lib/calendar/index.js

@@ -1,22 +1,22 @@
 import { __decorate } from "tslib";
 import { ControlElement, html, css, WarningNotice } 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 { state } from '@refinitiv-ui/core/lib/decorators/state.js';
-import { ifDefined } from '@refinitiv-ui/core/lib/directives/if-defined.js';
-import { cache } from '@refinitiv-ui/core/lib/directives/cache.js';
-import { guard } from '@refinitiv-ui/core/lib/directives/guard.js';
-import { ref, createRef } from '@refinitiv-ui/core/lib/directives/ref.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 { ifDefined } from '@refinitiv-ui/core/directives/if-defined.js';
+import { cache } from '@refinitiv-ui/core/directives/cache.js';
+import { guard } from '@refinitiv-ui/core/directives/guard.js';
+import { ref, createRef } from '@refinitiv-ui/core/directives/ref.js';
 import { VERSION } from '../version.js';
-import { isIE } from '@refinitiv-ui/utils/lib/browser.js';
-import { DateFormat, format, utcFormat, utcParse, isValidDate, isWeekend, isAfter, isBefore, addMonths, subMonths, isToday, isThisMonth, isThisYear, isSameDay, isSameMonth, isSameYear, toDateSegment, parse } from '@refinitiv-ui/utils/lib/date.js';
-import { left, right, up, down, first, last } from '@refinitiv-ui/utils/lib/navigation.js';
+import { isIE } from '@refinitiv-ui/utils/browser.js';
+import { DateFormat, format, utcFormat, utcParse, isValidDate, isWeekend, isAfter, isBefore, addMonths, subMonths, isToday, isThisMonth, isThisYear, isSameDay, isSameMonth, isSameYear, toDateSegment, parse } from '@refinitiv-ui/utils/date.js';
+import { left, right, up, down, first, last } from '@refinitiv-ui/utils/navigation.js';
 import { monthInfo, weekdaysNames, monthsNames, formatLocaleDate, ViewFormatTranslateParams } from './utils.js';
 import { translate, getLocale, TranslatePropertyKey } from '@refinitiv-ui/translate';
 import { RenderView, CalendarLocaleScope, FIRST_DAY_OF_WEEK, YEARS_PER_YEAR_VIEW, DAY_VIEW, YEAR_VIEW, MONTH_VIEW } from './constants.js';
 import './locales.js';
 import '../button/index.js';
-import '@refinitiv-ui/phrasebook/lib/locale/en/calendar.js';
+import '@refinitiv-ui/phrasebook/locale/en/calendar.js';
 /**
  * Standard calendar element
  *
@@ -925,7 +925,14 @@ let Calendar = class Calendar extends ControlElement {
             }
             const year = startIdx + i;
             const value = utcFormat({ year, month: 0, day: 1 }, DateFormat.yyyyMMdd);
-            cell = Object.assign({ view, text: year > 0 ? `${year}` : year === 0 ? '1' : `${Math.abs(year - 1)}`, value: `${year}`, now: isThisYear(value), index: [cells.length, rows.length - 1] }, this.getCellSelection(value, isSameYear));
+            cell = {
+                view,
+                text: year > 0 ? `${year}` : year === 0 ? '1' : `${Math.abs(year - 1)}`,
+                value: `${year}`,
+                now: isThisYear(value),
+                index: [cells.length, rows.length - 1],
+                ...this.getCellSelection(value, isSameYear)
+            };
             cells.push(cell);
             years.push(cell);
         }
@@ -962,7 +969,15 @@ let Calendar = class Calendar extends ControlElement {
             const segment = { year, month, day: 1 };
             const value = utcFormat(segment, DateFormat.yyyyMMdd);
             const idle = i < before || i >= after;
-            cell = Object.assign({ view, text: monthsNames[month], value: utcFormat(segment, DateFormat.yyyyMM), idle, now: isThisMonth(value), index: [cells.length, rows.length - 1] }, this.getCellSelection(value, isSameMonth));
+            cell = {
+                view,
+                text: monthsNames[month],
+                value: utcFormat(segment, DateFormat.yyyyMM),
+                idle,
+                now: isThisMonth(value),
+                index: [cells.length, rows.length - 1],
+                ...this.getCellSelection(value, isSameMonth)
+            };
             cells.push(cell);
             months.push(cell);
         }
@@ -1026,8 +1041,16 @@ let Calendar = class Calendar extends ControlElement {
             }
             const value = utcFormat({ year, month, day }, DateFormat.yyyyMMdd);
             const disabled = this.isDateAvailable ? !this.isDateAvailable(value) : false;
-            const dayCell = Object.assign({ view, text: day.toString(), value,
-                disabled, idle: month !== viewMonth.month || year !== viewMonth.year, now: isToday(value), index: [cells.length, rows.length - 1] }, this.getCellSelection(value, isSameDay));
+            const dayCell = {
+                view,
+                text: day.toString(),
+                value,
+                disabled,
+                idle: month !== viewMonth.month || year !== viewMonth.year,
+                now: isToday(value),
+                index: [cells.length, rows.length - 1],
+                ...this.getCellSelection(value, isSameDay)
+            };
             cells.push(dayCell);
             days.push(dayCell);
         }
@@ -1182,6 +1205,7 @@ let Calendar = class Calendar extends ControlElement {
         }
         return html `<div
       part="aria-selection"
+      role="status"
       aria-live="polite"
       aria-label="${this.value
             ? this.range

package/lib/calendar/locales.js

@@ -9,20 +9,20 @@ const globals = {
     FIRST_DAY_OF_WEEK: '1'
 };
 const en = globals;
-const enUS = Object.assign(Object.assign({}, en), { FIRST_DAY_OF_WEEK: '0' });
+const enUS = { ...en, FIRST_DAY_OF_WEEK: '0' };
 const enCA = enUS;
 const de = globals;
 const es = globals;
 const fr = globals;
-const frCA = Object.assign(Object.assign({}, fr), { FIRST_DAY_OF_WEEK: '0' });
+const frCA = { ...fr, FIRST_DAY_OF_WEEK: '0' };
 const it = globals;
 const ja = globals;
-const ko = Object.assign(Object.assign({}, globals), { FIRST_DAY_OF_WEEK: '0' });
+const ko = { ...globals, FIRST_DAY_OF_WEEK: '0' };
 const pl = globals;
 const ru = globals;
-const th = Object.assign(Object.assign({}, globals), { FIRST_DAY_OF_WEEK: '0' });
+const th = { ...globals, FIRST_DAY_OF_WEEK: '0' };
 const zh = globals;
-const ar = Object.assign(Object.assign({}, globals), { FIRST_DAY_OF_WEEK: '6' });
+const ar = { ...globals, FIRST_DAY_OF_WEEK: '6' };
 const scope = CalendarLocaleScope;
 Phrasebook.define('en', scope, en);
 Phrasebook.define('en-CA', scope, enCA);

package/lib/calendar/themes/halo/dark/index.js

@@ -1,3 +1,3 @@
-import '@refinitiv-ui/elements/lib/button/themes/halo/dark';
+import '@refinitiv-ui/elements/button/themes/halo/dark';
 
 elf.customStyles.define('ef-calendar', ':host{font-style:normal;font-variant:normal;font-weight:400;line-height:normal;text-align:left;text-indent:0;text-shadow:none;text-transform:none;white-space:normal;word-break:normal;word-spacing:normal;word-wrap:normal;outline:0;font-size:12rem;color:#ccc;min-width:196px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:#262626;padding:4px 3px}:host [part=navigation]{padding-bottom:3px}:host [part=btn-next],:host [part=btn-prev],:host [part=btn-view]{margin:0}:host [part=btn-view]{background:0 0;margin-left:16px;border:none;color:inherit;padding:0}:host [part=btn-view]:hover,:host [part=btn-view][focused=visible]{opacity:.8}:host [part=table]{width:100%;background:#262626}:host [part~=row]:not(:first-of-type) [part~=cell] [part~=cell-content]{top:1px}:host [part~=day-name-row]{background-color:#333}:host [part~=cell][disabled] [part~=selection]{opacity:.4}:host [part~=cell][today]{color:#fff}:host [part~=cell][today] [part~=selection]{background:#404040}:host [part~=cell]:not([selected]):not([range]):not([disabled])[idle] [part~=selection]{opacity:.6}:host [part~=cell]:not([today]):not([range]) [part~=selection]:hover{color:#fff}:host [part~=cell]:not(:active) [part~=selection]:hover{border-color:#334bff}:host [part~=cell]:not([selected]):not([range]):not([today]) [part~=selection]:hover{background:#334bff}:host [part~=cell]:not([selected]):not([range]):not([today]):not(:active) [part~=selection]:hover{border-color:#334bff}:host [part~=cell]:not([selected]):not([range]):not([today]):active [part~=selection]{color:#fff;background-color:#0f1e8a}:host [part~=cell][range]:not(:active) [part~=selection]:hover,:host [part~=cell][selected]:not(:active) [part~=selection]:hover,:host [part~=cell][today]:not(:active) [part~=selection]:hover{border-color:#334bff}:host [part~=cell][range]:active [part~=selection],:host [part~=cell][selected]:active [part~=selection],:host [part~=cell][today]:active [part~=selection]{color:#fff;background-color:#0f1e8a}:host [part~=cell][range] [part~=selection]{background:rgba(51,75,255,.2)}:host [part~=cell][range][today]{color:#fff}:host [part~=cell][selected]{color:#fff}:host [part~=cell][selected] [part~=selection]{background:#334bff}:host [part~=cell]:not(:first-of-type) [part~=cell-content]{left:1px}:host [part~=day-name]{color:#999;font-weight:500}:host [part~=day-name] [part~=cell-content]{background-color:#1a1a1a}:host [part~=cell-content]{background:#0d0d0d;top:0;bottom:0;right:0;left:0}:host [part~=selection]{outline:0;border:1px solid #0d0d0d}:host([focused=visible]) [part~=cell] [part~=selection]:focus{outline:#334bff solid 1px}:host([disabled]){opacity:.4}');

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

@@ -1,3 +1,3 @@
-import '@refinitiv-ui/elements/lib/button/themes/halo/light';
+import '@refinitiv-ui/elements/button/themes/halo/light';
 
 elf.customStyles.define('ef-calendar', ':host{font-style:normal;font-variant:normal;font-weight:400;line-height:normal;text-align:left;text-indent:0;text-shadow:none;text-transform:none;white-space:normal;word-break:normal;word-spacing:normal;word-wrap:normal;outline:0;font-size:12rem;color:#0d0d0d;min-width:196px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:#f2f2f2;padding:4px 3px}:host [part=navigation]{padding-bottom:3px}:host [part=btn-next],:host [part=btn-prev],:host [part=btn-view]{margin:0}:host [part=btn-next]:not(:hover):not(:focus):not(:active),:host [part=btn-prev]:not(:hover):not(:focus):not(:active){color:#595959}:host [part=btn-view]{background:0 0;margin-left:16px;border:none;color:inherit;padding:0}:host [part=btn-view]:hover,:host [part=btn-view][focused=visible]{opacity:.8}:host [part=table]{width:100%;background:#e6e6e6}:host [part~=row]:not(:first-of-type) [part~=cell] [part~=cell-content]{top:1px}:host [part~=day-name-row]{background-color:#e6e6e6}:host [part~=cell][disabled] [part~=selection]{opacity:.4}:host [part~=cell][today]{color:#0d0d0d}:host [part~=cell][today] [part~=selection]{background:#d9d9d9}:host [part~=cell]:not([selected]):not([range]):not([disabled])[idle] [part~=selection]{opacity:.6}:host [part~=cell]:not([today]):not([range]) [part~=selection]:hover{color:#fff}:host [part~=cell]:not(:active) [part~=selection]:hover{border-color:#334bff}:host [part~=cell]:not([selected]):not([range]):not([today]) [part~=selection]:hover{background:#334bff}:host [part~=cell]:not([selected]):not([range]):not([today]):not(:active) [part~=selection]:hover{border-color:#334bff}:host [part~=cell]:not([selected]):not([range]):not([today]):active [part~=selection]{color:#fff;background-color:#0f1e8a}:host [part~=cell][range]:not(:active) [part~=selection]:hover,:host [part~=cell][selected]:not(:active) [part~=selection]:hover,:host [part~=cell][today]:not(:active) [part~=selection]:hover{border-color:#334bff}:host [part~=cell][range]:active [part~=selection],:host [part~=cell][selected]:active [part~=selection],:host [part~=cell][today]:active [part~=selection]{color:#fff;background-color:#0f1e8a}:host [part~=cell][range] [part~=selection]{background:rgba(51,75,255,.2)}:host [part~=cell][range][today]{color:#fff}:host [part~=cell][selected]{color:#fff}:host [part~=cell][selected] [part~=selection]{background:#334bff}:host [part~=cell]:not(:first-of-type) [part~=cell-content]{left:1px}:host [part~=day-name]{color:#737373;font-weight:500}:host [part~=day-name] [part~=cell-content]{background-color:#fafafa}:host [part~=cell-content]{background:#fff;top:0;bottom:0;right:0;left:0}:host [part~=selection]{outline:0;border:1px solid #fff}:host([focused=visible]) [part~=cell] [part~=selection]:focus{outline:#334bff solid 1px}:host([disabled]){opacity:.4}');

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

@@ -1,3 +1,3 @@
-import '@refinitiv-ui/elements/lib/button/themes/solar/charcoal';
+import '@refinitiv-ui/elements/button/themes/solar/charcoal';
 
 elf.customStyles.define('ef-calendar', ':host{font-style:normal;font-variant:normal;font-weight:400;line-height:normal;text-align:left;text-indent:0;text-shadow:none;text-transform:none;white-space:normal;word-break:normal;word-spacing:normal;word-wrap:normal;outline:0;font-size:13rem;color:#c2c2c2;min-width:224px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:#3c3c42;padding:4px}:host [part=navigation]{padding-bottom:4px}:host [part=btn-next],:host [part=btn-prev],:host [part=btn-view]{margin:0}:host [part=btn-view]{background:0 0;color:inherit;box-shadow:none;margin-left:15px;padding:0}:host [part=btn-view]:not([focused=visible]){border:none}:host [part=table]{width:100%;box-shadow:0 0 0 1px #000;background:#212124}:host [part~=row]:not(:last-of-type){box-shadow:0 1px 0 0 #0a0a0a}:host [part~=row]:not(:first-of-type) [part~=cell] [part~=selection]{top:1px}:host [part~=cell]:not(:last-of-type){box-shadow:1px 0 0 0 #0a0a0a}:host [part~=cell][disabled] [part~=selection]{opacity:.4}:host [part~=cell][today]{color:#f93}:host [part~=cell][today] [part~=selection]{background:#3c3c42}:host [part~=cell]:not([selected]):not([range]):not([disabled])[idle] [part~=selection]{opacity:.6}:host [part~=cell]:not([selected]):not([range]) [part~=selection]:focus,:host [part~=cell]:not([selected]):not([range]) [part~=selection]:hover{background:#3c3c42;color:#e2e2e2}:host [part~=cell]:not([selected]):not([range]) [part~=selection]:focus{outline:#f93 dotted 1px}:host [part~=cell][range] [part~=selection]{background:rgba(255,153,51,.2)}:host [part~=cell][range][today]{color:#f93}:host [part~=cell][selected]{color:#000}:host [part~=cell][selected] [part~=selection]{background:#f93}:host [part~=cell]:not(:first-of-type) [part~=selection]{left:1px}:host [part~=day-name]{background-color:#151516;color:#666570;font-size:10px;font-weight:700}:host [part~=selection]{outline:0;top:0;bottom:0;right:0;left:0}:host([disabled]){opacity:.4}');

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

@@ -1,3 +1,3 @@
-import '@refinitiv-ui/elements/lib/button/themes/solar/pearl';
+import '@refinitiv-ui/elements/button/themes/solar/pearl';
 
 elf.customStyles.define('ef-calendar', ':host{font-style:normal;font-variant:normal;font-weight:400;line-height:normal;text-align:left;text-indent:0;text-shadow:none;text-transform:none;white-space:normal;word-break:normal;word-spacing:normal;word-wrap:normal;outline:0;font-size:13rem;color:#484848;min-width:224px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:#fff;padding:4px}:host [part=navigation]{padding-bottom:4px}:host [part=btn-next],:host [part=btn-prev],:host [part=btn-view]{margin:0}:host [part=btn-view]{background:0 0;color:inherit;box-shadow:none;margin-left:15px;padding:0}:host [part=btn-view]:not([focused=visible]){border:none}:host [part=table]{width:100%;box-shadow:0 0 0 1px #a9afba;background:#fff}:host [part~=row]:not(:last-of-type){box-shadow:0 1px 0 0 #d5d8db}:host [part~=row]:not(:first-of-type) [part~=cell] [part~=selection]{top:1px}:host [part~=cell]:not(:last-of-type){box-shadow:1px 0 0 0 #d5d8db}:host [part~=cell][disabled] [part~=selection]{opacity:.4}:host [part~=cell][today]{color:#fff}:host [part~=cell][today] [part~=selection]{background:#acafb5}:host [part~=cell]:not([selected]):not([range]):not([disabled])[idle] [part~=selection]{opacity:.6}:host [part~=cell]:not([selected]):not([range]) [part~=selection]:focus,:host [part~=cell]:not([selected]):not([range]) [part~=selection]:hover{background:#e4e8ed;color:#000}:host [part~=cell]:not([selected]):not([range]) [part~=selection]:focus{outline:#ee7600 dotted 1px}:host [part~=cell][range] [part~=selection]{background:rgba(255,153,51,.2)}:host [part~=cell][range][today]{color:#f93}:host [part~=cell][selected]{color:#fff}:host [part~=cell][selected] [part~=selection]{background:#f93}:host [part~=cell]:not(:first-of-type) [part~=selection]{left:1px}:host [part~=day-name]{background-color:#e4e8ed;color:#6e6e78;font-size:10px;font-weight:700}:host [part~=selection]{outline:0;top:0;bottom:0;right:0;left:0}:host([disabled]){opacity:.4}');

package/lib/calendar/types.d.ts

@@ -1,4 +1,4 @@
-import { CellIndex } from '@refinitiv-ui/utils/lib/navigation.js';
+import { CellIndex } from '@refinitiv-ui/utils/navigation.js';
 import { RenderView } from './constants.js';
 export interface CellSelectionModel {
     selected?: boolean;

package/lib/calendar/utils.js

@@ -1,4 +1,4 @@
-import { toDateSegment, getDaysInMonth, utcParse } from '@refinitiv-ui/utils/lib/date.js';
+import { toDateSegment, getDaysInMonth, utcParse } from '@refinitiv-ui/utils/date.js';
 import { DEFAULT_LOCALE, resolveLocale } from '@refinitiv-ui/i18n';
 import { CalendarLocaleScope } from './constants.js';
 /**
@@ -27,10 +27,10 @@ const calendar = {
  */
 const DateMessageFormats = {
     date: {
-        calendarMonthEra: Object.assign(Object.assign({}, calendar), { month: 'long', year: 'numeric', era: 'short' }),
-        calendarMonth: Object.assign(Object.assign({}, calendar), { month: 'long', year: 'numeric' }),
-        calendarYearEra: Object.assign(Object.assign({}, calendar), { year: 'numeric', era: 'short' }),
-        calendarYear: Object.assign(Object.assign({}, calendar), { year: 'numeric' })
+        calendarMonthEra: { ...calendar, month: 'long', year: 'numeric', era: 'short' },
+        calendarMonth: { ...calendar, month: 'long', year: 'numeric' },
+        calendarYearEra: { ...calendar, year: 'numeric', era: 'short' },
+        calendarYear: { ...calendar, year: 'numeric' }
     }
 };
 /**

package/lib/canvas/index.d.ts

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

package/lib/canvas/index.js

@@ -1,7 +1,7 @@
 import { __decorate } from "tslib";
 import { ResponsiveElement, html, css } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { VERSION } from '../version.js';
 /**
  * A Component uses to draw graphics on a web page,
@@ -64,8 +64,7 @@ let Canvas = class Canvas extends ResponsiveElement {
      * @type {HTMLCanvasElement}
      */
     get canvas() {
-        var _a;
-        return (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('canvas');
+        return this.shadowRoot?.getElementById('canvas');
     }
     /**
      * Alias of context

package/lib/card/index.d.ts

@@ -4,6 +4,8 @@ import type { CardConfig } from './helpers/types';
 import '../label/index.js';
 import '../button/index.js';
 import '../overlay-menu/index.js';
+import '@refinitiv-ui/phrasebook/locale/en/card.js';
+import { Translate } from '@refinitiv-ui/translate';
 export type { CardConfig };
 /**
  * A card frame component.
@@ -50,10 +52,18 @@ export declare class Card extends BasicElement {
      * Get button element from shadow root
      */
     private openMenuElement?;
+    /**
+     * Used for translations
+     */
+    protected t: Translate;
     /**
      * Menu data for creating overlay-menu
      */
     private menuData?;
+    /**
+     * Menu open state
+     */
+    private menuOpened;
     /**
      * True if header has slotted content
      */
@@ -84,6 +94,12 @@ export declare class Card extends BasicElement {
      * @returns {void}
      */
     private onFooterSlotChange;
+    /**
+     * Run on overlay menu open changed
+     * @param event overlay menu opened changed event
+     * @returns {void}
+     */
+    private onMenuOpenChanged;
     /**
      * True if card has header
      */
@@ -126,6 +142,11 @@ export declare class Card extends BasicElement {
      */
     protected render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-card': Card;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {

package/lib/card/index.js

@@ -1,14 +1,16 @@
 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 { query } from '@refinitiv-ui/core/lib/decorators/query.js';
-import { state } from '@refinitiv-ui/core/lib/decorators/state.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 { state } from '@refinitiv-ui/core/decorators/state.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 '../label/index.js';
 import '../button/index.js';
 import '../overlay-menu/index.js';
+import '@refinitiv-ui/phrasebook/locale/en/card.js';
+import { translate } from '@refinitiv-ui/translate';
 /**
  * A card frame component.
  *
@@ -29,6 +31,10 @@ let Card = class Card extends BasicElement {
          * Set text on the footer
          */
         this.footer = '';
+        /**
+         * Menu open state
+         */
+        this.menuOpened = false;
         /**
          * True if header has slotted content
          */
@@ -78,8 +84,7 @@ let Card = class Card extends BasicElement {
         return this._config;
     }
     set config(config) {
-        var _a;
-        const data = (_a = config === null || config === void 0 ? void 0 : config.menu) === null || _a === void 0 ? void 0 : _a.data;
+        const data = config?.menu?.data;
         if (data !== this.menuData) {
             this.menuData = data;
         }
@@ -92,6 +97,7 @@ let Card = class Card extends BasicElement {
     openMenu() {
         if (this.menuElement && !(this.menuElement.fullyOpened || this.menuElement.transitioning)) {
             this.menuElement.opened = true;
+            this.menuOpened = true;
         }
     }
     /**
@@ -99,8 +105,9 @@ let Card = class Card extends BasicElement {
      * @returns {void}
      */
     closeMenu() {
-        if (this.menuElement) {
+        if (this.menuElement?.opened) {
             this.menuElement.opened = false;
+            this.menuOpened = false;
         }
     }
     /**
@@ -119,6 +126,14 @@ let Card = class Card extends BasicElement {
     onFooterSlotChange(event) {
         this.footerHasContent = isSlotEmpty(event.target);
     }
+    /**
+     * Run on overlay menu open changed
+     * @param event overlay menu opened changed event
+     * @returns {void}
+     */
+    onMenuOpenChanged(event) {
+        this.menuOpened = event.detail.value;
+    }
     /**
      * True if card has header
      */
@@ -158,15 +173,21 @@ let Card = class Card extends BasicElement {
     get menuTemplate() {
         return html `${this.menuData ? html `
       <ef-button
-        @tap="${this.openMenu}"
         part="menu-button"
         icon="more-vertical"
         transparent
+        aria-label=${this.t('OPEN_MENU')}
+        aria-haspopup="true"
+        aria-controls="menu-popup"
+        aria-expanded=${this.menuOpened}
+        @tap=${this.openMenu}
       ></ef-button>
       <ef-overlay-menu
+        id="menu-popup"
         part="menu-popup"
         .data=${this.menuData}
-        position="bottom-end"></ef-overlay-menu>` : undefined}
+        position="bottom-end"
+        @opened-changed=${this.onMenuOpenChanged}></ef-overlay-menu>` : undefined}
     `;
     }
     /**
@@ -227,13 +248,14 @@ __decorate([
     query('[part=menu-button]')
 ], Card.prototype, "openMenuElement", void 0);
 __decorate([
-    state()
-    /**
-     * Menu data for creating emerald-popup-menu
-     */
-    ,
+    translate()
+], Card.prototype, "t", void 0);
+__decorate([
     state()
 ], Card.prototype, "menuData", void 0);
+__decorate([
+    state()
+], Card.prototype, "menuOpened", void 0);
 __decorate([
     state()
 ], Card.prototype, "headerHasContent", void 0);

package/lib/card/themes/halo/dark/index.js

@@ -1,5 +1,5 @@
-import '@refinitiv-ui/elements/lib/button/themes/halo/dark';
-import '@refinitiv-ui/elements/lib/overlay-menu/themes/halo/dark';
-import '@refinitiv-ui/elements/lib/label/themes/halo/dark';
+import '@refinitiv-ui/elements/button/themes/halo/dark';
+import '@refinitiv-ui/elements/overlay-menu/themes/halo/dark';
+import '@refinitiv-ui/elements/label/themes/halo/dark';
 
 elf.customStyles.define('ef-card', ':host{box-sizing:border-box;width:400px;box-shadow:0 2px 12px rgba(0,0,0,.5);background-color:#1a1a1a;overflow:hidden;scrollbar-face-color:#595959;scrollbar-shadow-color:#595959;scrollbar-highlight-color:#595959;scrollbar-arrow-color:#595959;scrollbar-track-color:#1a1a1a;scrollbar-3dlight-color:#1a1a1a;scrollbar-darkshadow-color:#1a1a1a;scrollbar-color:#595959 #1a1a1a;padding:16px}:host [part~=body],:host [part~=footer],:host [part~=header]{position:relative}:host [part~=body]{overflow:auto}:host [part~=footer],:host [part~=header]{flex:1 0 auto}:host [part~=header]{padding-bottom:inherit;min-height:24px}:host [part~=header-body]{z-index:0;font-weight:400;font-size:130%;font-family:inherit;display:flex;align-items:center}:host [part~=menu-button]{margin:0;font-size:16px}:host [part~=footer]{padding-top:inherit}:host [part~=footer-body]{padding-top:calc(1em - 1px);font-family:inherit;color:#999;border-top:1px solid #404040}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #1a1a1a;height:16px;width:16px;display:block}::-webkit-scrollbar-thumb{background:#595959;border-radius:0;border:1px solid #1a1a1a}::-webkit-scrollbar-thumb:hover{background:#334bff}::-webkit-scrollbar-thumb:active{background:#0f1e8a}::-webkit-scrollbar-track{background:#1a1a1a}::-webkit-scrollbar-corner{background:#1a1a1a}::-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(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);background-position:6.5px 8px,5.5px 7px,4.5px 6px,3.5px 5px,2.5px 6px,1.5px 7px,.5px 8px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff);background-position:6.5px 8px,5.5px 7px,4.5px 6px,3.5px 5px,2.5px 6px,1.5px 7px,.5px 8px}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:6.5px 8px,5.5px 7px,4.5px 6px,3.5px 5px,2.5px 6px,1.5px 7px,.5px 8px}::-webkit-scrollbar-button:vertical:end:increment{background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);background-position:6.5px 6px,5.5px 7px,4.5px 8px,3.5px 9px,2.5px 8px,1.5px 7px,.5px 6px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff);background-position:6.5px 6px,5.5px 7px,4.5px 8px,3.5px 9px,2.5px 8px,1.5px 7px,.5px 6px}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:6.5px 6px,5.5px 7px,4.5px 8px,3.5px 9px,2.5px 8px,1.5px 7px,.5px 6px}::-webkit-scrollbar-button:horizontal:start:decrement{background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);background-position:8px 6.5px,7px 5.5px,6px 4.5px,5px 3.5px,6px 2.5px,7px 1.5px,8px .5px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff);background-position:8px 6.5px,7px 5.5px,6px 4.5px,5px 3.5px,6px 2.5px,7px 1.5px,8px .5px}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:8px 6.5px,7px 5.5px,6px 4.5px,5px 3.5px,6px 2.5px,7px 1.5px,8px .5px}::-webkit-scrollbar-button:horizontal:end:increment{background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);background-position:6px 6.5px,7px 5.5px,8px 4.5px,9px 3.5px,8px 2.5px,7px 1.5px,6px .5px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff);background-position:6px 6.5px,7px 5.5px,8px 4.5px,9px 3.5px,8px 2.5px,7px 1.5px,6px .5px}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:6px 6.5px,7px 5.5px,8px 4.5px,9px 3.5px,8px 2.5px,7px 1.5px,6px .5px}');

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

@@ -1,5 +1,5 @@
-import '@refinitiv-ui/elements/lib/button/themes/halo/light';
-import '@refinitiv-ui/elements/lib/overlay-menu/themes/halo/light';
-import '@refinitiv-ui/elements/lib/label/themes/halo/light';
+import '@refinitiv-ui/elements/button/themes/halo/light';
+import '@refinitiv-ui/elements/overlay-menu/themes/halo/light';
+import '@refinitiv-ui/elements/label/themes/halo/light';
 
 elf.customStyles.define('ef-card', ':host{box-sizing:border-box;width:400px;box-shadow:0 2px 8px rgba(0,0,0,.25);background-color:#fafafa;overflow:hidden;scrollbar-face-color:#999;scrollbar-shadow-color:#999;scrollbar-highlight-color:#999;scrollbar-arrow-color:#999;scrollbar-track-color:#f2f2f2;scrollbar-3dlight-color:#f2f2f2;scrollbar-darkshadow-color:#f2f2f2;scrollbar-color:#999 #f2f2f2;padding:16px}:host [part~=body],:host [part~=footer],:host [part~=header]{position:relative}:host [part~=body]{overflow:auto}:host [part~=footer],:host [part~=header]{flex:1 0 auto}:host [part~=header]{padding-bottom:inherit;min-height:24px}:host [part~=header-body]{z-index:0;font-weight:400;font-size:130%;font-family:inherit;display:flex;align-items:center}:host [part~=menu-button]{margin:0;font-size:16px}:host [part~=footer]{padding-top:inherit}:host [part~=footer-body]{padding-top:calc(1em - 1px);font-family:inherit;color:#737373;border-top:1px solid #d9d9d9}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #f2f2f2;height:16px;width:16px;display:block}::-webkit-scrollbar-thumb{background:#999;border-radius:0;border:1px solid #f2f2f2}::-webkit-scrollbar-thumb:hover{background:#334bff}::-webkit-scrollbar-thumb:active{background:#0f1e8a}::-webkit-scrollbar-track{background:#f2f2f2}::-webkit-scrollbar-corner{background:#f2f2f2}::-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(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999);background-position:6.5px 8px,5.5px 7px,4.5px 6px,3.5px 5px,2.5px 6px,1.5px 7px,.5px 8px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff);background-position:6.5px 8px,5.5px 7px,4.5px 6px,3.5px 5px,2.5px 6px,1.5px 7px,.5px 8px}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:6.5px 8px,5.5px 7px,4.5px 6px,3.5px 5px,2.5px 6px,1.5px 7px,.5px 8px}::-webkit-scrollbar-button:vertical:end:increment{background-image:linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999);background-position:6.5px 6px,5.5px 7px,4.5px 8px,3.5px 9px,2.5px 8px,1.5px 7px,.5px 6px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff);background-position:6.5px 6px,5.5px 7px,4.5px 8px,3.5px 9px,2.5px 8px,1.5px 7px,.5px 6px}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:6.5px 6px,5.5px 7px,4.5px 8px,3.5px 9px,2.5px 8px,1.5px 7px,.5px 6px}::-webkit-scrollbar-button:horizontal:start:decrement{background-image:linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999);background-position:8px 6.5px,7px 5.5px,6px 4.5px,5px 3.5px,6px 2.5px,7px 1.5px,8px .5px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff);background-position:8px 6.5px,7px 5.5px,6px 4.5px,5px 3.5px,6px 2.5px,7px 1.5px,8px .5px}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:8px 6.5px,7px 5.5px,6px 4.5px,5px 3.5px,6px 2.5px,7px 1.5px,8px .5px}::-webkit-scrollbar-button:horizontal:end:increment{background-image:linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999);background-position:6px 6.5px,7px 5.5px,8px 4.5px,9px 3.5px,8px 2.5px,7px 1.5px,6px .5px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff);background-position:6px 6.5px,7px 5.5px,8px 4.5px,9px 3.5px,8px 2.5px,7px 1.5px,6px .5px}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:6px 6.5px,7px 5.5px,8px 4.5px,9px 3.5px,8px 2.5px,7px 1.5px,6px .5px}');

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

@@ -1,5 +1,5 @@
-import '@refinitiv-ui/elements/lib/button/themes/solar/charcoal';
-import '@refinitiv-ui/elements/lib/overlay-menu/themes/solar/charcoal';
-import '@refinitiv-ui/elements/lib/label/themes/solar/charcoal';
+import '@refinitiv-ui/elements/button/themes/solar/charcoal';
+import '@refinitiv-ui/elements/overlay-menu/themes/solar/charcoal';
+import '@refinitiv-ui/elements/label/themes/solar/charcoal';
 
 elf.customStyles.define('ef-card', ':host{padding:6px 10px;box-sizing:border-box;width:400px;box-shadow:0 0 8px 0 rgba(0,0,0,.6);overflow:hidden;scrollbar-face-color:#666570;scrollbar-shadow-color:#666570;scrollbar-highlight-color:#666570;scrollbar-arrow-color:#666570;scrollbar-track-color:#2e2e33;scrollbar-3dlight-color:#2e2e33;scrollbar-darkshadow-color:#2e2e33;scrollbar-color:#666570 #2e2e33;background-color:#1a1a1c}:host [part~=body],:host [part~=footer],:host [part~=header]{position:relative}:host [part~=body]{overflow:auto}:host [part~=footer],:host [part~=header]{flex:1 0 auto}:host [part~=header]{padding-bottom:inherit;min-height:23px}:host [part~=header-body]{z-index:0;font-weight:400;font-size:130%;font-family:inherit;display:flex;align-items:center}:host [part~=menu-button]{margin:0;font-size:15px}:host [part~=footer]{padding-top:inherit}:host [part~=footer-body]{padding-top:calc(1em - 1px);font-family:inherit;color:#c2c2c2;border-top:1px solid #0a0a0a}::-webkit-scrollbar{width:13px;height:13px}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #2e2e33;height:12px;width:12px;display:block}::-webkit-scrollbar-thumb{background:#666570;border-radius:7px;border:2px solid #2e2e33}::-webkit-scrollbar-thumb:hover{background:#e2e2e2}::-webkit-scrollbar-thumb:active{background:#f93}::-webkit-scrollbar-track{background:#2e2e33}::-webkit-scrollbar-corner{background:#2e2e33}::-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(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:end:increment{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:horizontal:start:decrement{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}');

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

@@ -1,5 +1,5 @@
-import '@refinitiv-ui/elements/lib/button/themes/solar/pearl';
-import '@refinitiv-ui/elements/lib/overlay-menu/themes/solar/pearl';
-import '@refinitiv-ui/elements/lib/label/themes/solar/pearl';
+import '@refinitiv-ui/elements/button/themes/solar/pearl';
+import '@refinitiv-ui/elements/overlay-menu/themes/solar/pearl';
+import '@refinitiv-ui/elements/label/themes/solar/pearl';
 
 elf.customStyles.define('ef-card', ':host{padding:6px 10px;box-sizing:border-box;width:400px;box-shadow:0 0 8px 0 rgba(0,0,0,.3);overflow:hidden;scrollbar-face-color:#8a8a96;scrollbar-shadow-color:#8a8a96;scrollbar-highlight-color:#8a8a96;scrollbar-arrow-color:#8a8a96;scrollbar-track-color:#fff;scrollbar-3dlight-color:#fff;scrollbar-darkshadow-color:#fff;scrollbar-color:#8a8a96 #fff;background-color:#fff}:host [part~=body],:host [part~=footer],:host [part~=header]{position:relative}:host [part~=body]{overflow:auto}:host [part~=footer],:host [part~=header]{flex:1 0 auto}:host [part~=header]{padding-bottom:inherit;min-height:23px}:host [part~=header-body]{z-index:0;font-weight:400;font-size:130%;font-family:inherit;display:flex;align-items:center}:host [part~=menu-button]{margin:0;font-size:15px}:host [part~=footer]{padding-top:inherit}:host [part~=footer-body]{padding-top:calc(1em - 1px);font-family:inherit;color:#484848;border-top:1px solid #d5d8db}::-webkit-scrollbar{width:13px;height:13px}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #fff;height:12px;width:12px;display:block}::-webkit-scrollbar-thumb{background:#8a8a96;border-radius:7px;border:2px solid #fff}::-webkit-scrollbar-thumb:hover{background:#a9afba}::-webkit-scrollbar-thumb:active{background:#ee7600}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-corner{background:#fff}::-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(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:end:increment{background-image:linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:horizontal:start:decrement{background-image:linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment{background-image:linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}');

package/lib/chart/index.d.ts

@@ -171,6 +171,11 @@ export declare class Chart extends BasicElement {
      */
     protected render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-chart': Chart;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {