@refinitiv-ui/elements 7.0.0-next.0 → 7.0.0-next.1

package/lib/chart/plugins/doughnut-center-label.d.ts

@@ -1,3 +1,22 @@
-/// <reference types="chart.js" />
-declare const plugins: Chart.PluginServiceRegistrationOptions;
-export default plugins;
+import { Chart as ChartJS } from 'chart.js';
+import type { Plugin, ChartType, ActiveElement } from 'chart.js';
+interface CenterLabel {
+    label: string;
+    bold?: boolean;
+}
+interface Selected {
+    datasetIndex?: number;
+    index: number;
+}
+interface CenterLabelConfig {
+    defaultText: CenterLabel[];
+    selected: Selected;
+    onRenderLabel(chart: ChartJS, chartItems: ActiveElement[]): CenterLabel[];
+}
+declare module 'chart.js' {
+    interface PluginOptionsByType<TType extends ChartType> {
+        'centerLabel'?: CenterLabelConfig;
+    }
+}
+declare const plugins: Plugin;
+export { plugins as doughnutCenterLabelPlugin };

package/lib/chart/plugins/doughnut-center-label.js

@@ -1,4 +1,6 @@
-const CHART = window.Chart;
+import { Chart as ChartJS } from 'chart.js';
+// eslint-disable-next-line import/extensions
+import { getHoverColor } from 'chart.js/helpers';
 const getPluginConfig = (chart) => {
     return chart.config.options?.plugins?.centerLabel;
 };
@@ -8,63 +10,72 @@ const getPluginConfig = (chart) => {
  * @param {MetaData[]} active active data
  * @returns {void}
  */
+// Note: use logic from chart.js - chart.js/src/elements/element.arc.js :draw()
 const drawItemBorder = function (chart, active) {
     if (!chart.data.datasets) {
         return;
     }
-    if (active?.length) {
-        const ctx = chart.ctx;
-        const chartItem = active[0];
-        const vm = chartItem._view;
-        const datasets = chart.data.datasets[chartItem._datasetIndex];
-        vm.backgroundColor = datasets.backgroundColor[chartItem._index];
-        vm.backgroundColor = CHART.helpers.getHoverColor(vm.backgroundColor); // we need to make color bolder
-        vm.borderWidth = (datasets.borderWidth || chart.config.options?.elements?.arc?.borderWidth);
-        vm.borderColor = (getComputedStyle(chart.canvas).getPropertyValue('--doughnut-border-color') || CHART.defaults.global.defaultFontColor);
-        const sA = vm.startAngle;
-        const eA = vm.endAngle;
-        if (ctx) {
-            ctx.beginPath();
-            ctx.arc(vm.x, vm.y, vm.outerRadius, sA, eA);
-            ctx.arc(vm.x, vm.y, vm.innerRadius, eA, sA, true);
-            ctx.closePath();
-            ctx.strokeStyle = vm.borderColor;
-            ctx.lineWidth = vm.borderWidth;
-            ctx.fillStyle = vm.backgroundColor;
-            ctx.fill();
-            ctx.lineJoin = 'bevel';
-            if (vm.borderWidth) {
-                ctx.stroke();
-            }
+    if (!active?.length) {
+        return;
+    }
+    const ctx = chart.ctx;
+    const chartItem = active[0];
+    const element = chartItem.element;
+    const arcOptions = chartItem.element.options;
+    const datasets = chart.data.datasets[chartItem.datasetIndex];
+    // Need to make color bolder
+    if (Array.isArray(datasets.backgroundColor)) {
+        arcOptions.backgroundColor = datasets.backgroundColor[chartItem.index];
+        arcOptions.backgroundColor = getHoverColor(arcOptions.backgroundColor);
+    }
+    arcOptions.borderWidth = arcOptions.borderWidth || (datasets.borderWidth || chart.config.options?.elements?.arc?.borderWidth);
+    arcOptions.borderColor = (getComputedStyle(chart.canvas).getPropertyValue('--doughnut-border-color') || ChartJS.defaults.color);
+    const sA = element.startAngle;
+    const eA = element.endAngle;
+    if (ctx) {
+        ctx.beginPath();
+        ctx.arc(element.x, element.y, element.outerRadius, sA, eA);
+        ctx.arc(element.x, element.y, element.innerRadius, eA, sA, true);
+        ctx.closePath();
+        ctx.strokeStyle = arcOptions.borderColor;
+        ctx.lineWidth = arcOptions.borderWidth;
+        ctx.fillStyle = arcOptions.backgroundColor;
+        ctx.fill();
+        ctx.lineJoin = 'bevel';
+        if (arcOptions.borderWidth) {
+            ctx.stroke();
         }
     }
 };
 const plugins = {
-    beforeEvent: function (chart, event) {
+    id: 'centerLabel',
+    beforeEvent: function (chart, args) {
         if (!getPluginConfig(chart)) {
             return;
         }
-        switch (event.type) {
+        switch (args.event?.type) {
             case 'click':
                 // chart._select stores a segment that is clicked
                 if (!chart._select) {
                     chart._select = [];
                 }
-                if (chart.active.length) {
-                    if (chart._select.length && chart._select[0]._datasetIndex === chart.active[0]._datasetIndex
-                        && chart._select[0]._index === chart.active[0]._index) {
+                if (chart.getActiveElements().length) {
+                    if (chart._select.length && chart._select[0].datasetIndex === chart.getActiveElements()[0].datasetIndex
+                        && chart._select[0].index === chart.getActiveElements()[0].index) {
                         // reset value if user clicked on selected segment
                         chart._select = [];
                     }
                     else {
                         // set segment that user clicked
-                        chart._select = chart.active.slice(0);
+                        chart._select = chart.getActiveElements().slice(0);
                     }
                 }
                 else {
                     chart._select = [];
                 }
-                chart.draw();
+                // Trigger update to re render the chart
+                // Cannot use draw() because the chart doesn't redraw border of unselected datasets
+                chart.update();
                 break;
             default:
                 break;
@@ -80,13 +91,13 @@ const plugins = {
         if (chart._select) {
             active = chart._select;
         }
-        if (chart.active?.length) {
-            active = chart.active;
+        const activeElements = chart.getActiveElements();
+        if (activeElements.length > 0) {
+            active = activeElements;
         }
         const renderText = config.onRenderLabel(chart, active);
         // Get Texts
-        const centerConfig = config;
-        const texts = renderText || centerConfig.defaultText;
+        const texts = renderText || config.defaultText;
         if (!texts) {
             return;
         }
@@ -94,28 +105,29 @@ const plugins = {
         const ctx = chart.ctx;
         // Get options from config
         const canvas = chart.canvas;
-        const style = window.getComputedStyle(canvas);
-        const globalConfig = CHART.defaults.global;
-        const defaultFontStyle = globalConfig.defaultFontFamily;
-        const defaultColor = style.getPropertyValue('--doughnut-center-text-color') || globalConfig.defaultFontColor;
+        const style = getComputedStyle(canvas);
+        const globalConfig = ChartJS.defaults;
+        const defaultFontStyle = globalConfig.font.family;
+        const defaultColor = style.getPropertyValue('--doughnut-center-text-color') || globalConfig.color;
         const backgroundColor = style.getPropertyValue('--doughnut-center-background-color');
         const customFontSizePercent = parseInt(style.getPropertyValue('--doughnut-center-font-size'), 10) / 100; // font size in percentage
         const centerX = (chart.chartArea.left + chart.chartArea.right) / 2;
         const centerY = (chart.chartArea.top + chart.chartArea.bottom) / 2;
+        // Radius of circular hole in the middle of the chart
+        const innerRadius = chart.getDatasetMeta(chart.data.datasets.length - 1).data[0].innerRadius;
         // Render center background color
         if (backgroundColor) {
-            ctx.arc(centerX, centerY, chart.innerRadius, 0, 2 * Math.PI);
+            ctx.arc(centerX, centerY, innerRadius, 0, 2 * Math.PI);
             ctx.fillStyle = backgroundColor;
             ctx.fill();
         }
-        const textAreaWidth = chart.innerRadius;
         // Base font size is 30% and minus 4% per text lines ( if text has multiple lines ) of text area
-        const baseFontSize = textAreaWidth * (0.3 - (0.04 * (texts.length - 1)));
+        const baseFontSize = innerRadius * (0.3 - (0.04 * (texts.length - 1)));
         // Keep minimum font size equal 5% of text area
-        const computedFontSize = Math.max(textAreaWidth * 0.05, baseFontSize);
+        const computedFontSize = Math.max(innerRadius * 0.05, baseFontSize);
         // Use font size ratio from user if --doughnut-center-font-size CSS variable is provided
-        const fontRatio = customFontSizePercent || computedFontSize / textAreaWidth;
-        const fontSizeToUse = textAreaWidth * fontRatio;
+        const fontRatio = customFontSizePercent || computedFontSize / innerRadius;
+        const fontSizeToUse = innerRadius * fontRatio;
         // Set font settings to draw it correctly.
         ctx.textAlign = 'center';
         ctx.textBaseline = 'middle';
@@ -125,7 +137,7 @@ const plugins = {
         const fontSizeHeaderRatio = 1.15;
         // Move Y position of text up according to text length
         const offsetY = centerY - (texts.length - 1) * 0.5 * fontLineHeight;
-        const containerWidth = chart.innerRadius * 2;
+        const containerWidth = innerRadius * 2;
         const circlePadding = containerWidth * (texts.length <= 1 ? 0.4 : 0.5);
         for (let i = 0; i < texts.length; i++) {
             let targetFont;
@@ -170,14 +182,13 @@ const plugins = {
         }
         // Set selected item to the chart
         const items = chart.getDatasetMeta(datasetIndex).data[selectedIndex];
-        chart.selected = items ? [items] : [];
+        chart.selected = items ? [{ element: items, datasetIndex, index: selectedIndex }] : [];
     },
     afterDatasetsDraw: function (chart) {
         if (getPluginConfig(chart)) {
             // Draw active element
-            // Note: use logic from chart.js - chart.js/src/elements/element.arc.js :draw()
             // hover
-            drawItemBorder(chart, chart.active);
+            drawItemBorder(chart, chart.getActiveElements());
             // selected
             if (chart.selected?.length) {
                 chart._select = chart.selected;
@@ -188,4 +199,4 @@ const plugins = {
         }
     }
 };
-export default plugins;
+export { plugins as doughnutCenterLabelPlugin };

package/lib/chart/plugins/index.d.ts

@@ -0,0 +1 @@
+export * from './doughnut-center-label.js';

package/lib/chart/plugins/index.js

@@ -0,0 +1 @@
+export * from './doughnut-center-label.js';

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

@@ -1,4 +1,4 @@
 import '@refinitiv-ui/elements/header/themes/halo/dark';
 import '@refinitiv-ui/elements/layout/themes/halo/dark';
 
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-chart', styles: ':host{--grid-line-color:rgba(38, 38, 38, 0.5);--zero-line-color:rgba(38, 38, 38, 0.5);--animation-duration:1000;--line-width:2px;--line-tension:0;--multi-dataset-border-color:#1A1A1A;--tooltip-background-color:rgba(204, 204, 204, 0.9);--tooltip-title-color:#0D0D0D;--tooltip-body-color:#0D0D0D;--tooltip-border-radius:0px;--tooltip-caret-size:7px;--tooltip-padding-x:7px;--tooltip-padding-y:5px;--tooltip-title-spacing:0;--legend-key-box-width:4px;--chart-color-1:#6678FF;--chart-color-2:#FFFFFF;--chart-color-3:#FFC800;--chart-color-4:#9064CD;--chart-color-5:#00D0D4;--chart-color-6:#FF5000;--chart-color-7:#00C389;--chart-color-8:#EA2E6C;font-size:12rem;--tooltip-background-color:#FFFFFF;--tooltip-title-color:#0D0D0D;--tooltip-body-color:#0D0D0D;--tooltip-padding-x:8px;--tooltip-padding-y:4px;--chart-color-1:#6678FF;--chart-color-2:#FFFFFF;--chart-color-3:#FFC800;--chart-color-4:#9064CD;--chart-color-5:#00D0D4;--chart-color-6:#FF5000;--chart-color-7:#00C389;--chart-color-8:#EA2E6C;--chart-color-9:#999999;--chart-color-10:#3BBAFF;--chart-color-11:#198C8C;--chart-color-12:#C36241;--chart-color-13:#CCD2FF;--chart-color-14:#808080;--chart-color-15:#FFDE66;--chart-color-16:#BCA2E1;--chart-color-17:#59DFE1;--chart-color-18:#FF9666;--chart-color-19:#6CEFC8;--chart-color-20:#F281A7;--chart-color-21:#CCCCCC;--chart-color-22:#89D5FF;--chart-color-23:#75BABA;--chart-color-24:#DBA08D;--chart-color-25:#F6ABC4}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-chart', styles: ':host{font-size:12px;--grid-line-color:rgba(38, 38, 38, 0.5);--zero-line-color:rgba(38, 38, 38, 0.5);--animation-duration:1000;--line-width:2px;--line-tension:0;--multi-dataset-border-color:#1A1A1A;--tooltip-background-color:rgba(204, 204, 204, 0.9);--tooltip-title-color:#0D0D0D;--tooltip-body-color:#0D0D0D;--tooltip-border-radius:0px;--tooltip-caret-size:7px;--tooltip-padding-x:7px;--tooltip-padding-y:5px;--tooltip-title-spacing:0;--legend-key-box-width:4px;--chart-color-1:#6678FF;--chart-color-2:#FFFFFF;--chart-color-3:#FFC800;--chart-color-4:#9064CD;--chart-color-5:#00D0D4;--chart-color-6:#FF5000;--chart-color-7:#00C389;--chart-color-8:#EA2E6C;--tooltip-background-color:#FFFFFF;--tooltip-title-color:#0D0D0D;--tooltip-body-color:#0D0D0D;--tooltip-padding-x:8px;--tooltip-padding-y:4px;--chart-color-1:#6678FF;--chart-color-2:#FFFFFF;--chart-color-3:#FFC800;--chart-color-4:#9064CD;--chart-color-5:#00D0D4;--chart-color-6:#FF5000;--chart-color-7:#00C389;--chart-color-8:#EA2E6C;--chart-color-9:#999999;--chart-color-10:#3BBAFF;--chart-color-11:#198C8C;--chart-color-12:#C36241;--chart-color-13:#CCD2FF;--chart-color-14:#808080;--chart-color-15:#FFDE66;--chart-color-16:#BCA2E1;--chart-color-17:#59DFE1;--chart-color-18:#FF9666;--chart-color-19:#6CEFC8;--chart-color-20:#F281A7;--chart-color-21:#CCCCCC;--chart-color-22:#89D5FF;--chart-color-23:#75BABA;--chart-color-24:#DBA08D;--chart-color-25:#F6ABC4}' }}));

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

@@ -1,4 +1,4 @@
 import '@refinitiv-ui/elements/header/themes/halo/light';
 import '@refinitiv-ui/elements/layout/themes/halo/light';
 
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-chart', styles: ':host{--grid-line-color:rgba(242, 242, 242, 0.5);--zero-line-color:rgba(242, 242, 242, 0.5);--animation-duration:1000;--line-width:2px;--line-tension:0;--multi-dataset-border-color:#FAFAFA;--tooltip-background-color:rgba(13, 13, 13, 0.9);--tooltip-title-color:#FFFFFF;--tooltip-body-color:#FFFFFF;--tooltip-border-radius:0px;--tooltip-caret-size:7px;--tooltip-padding-x:7px;--tooltip-padding-y:5px;--tooltip-title-spacing:0;--legend-key-box-width:4px;--chart-color-1:#334BFF;--chart-color-2:#000000;--chart-color-3:#7F6400;--chart-color-4:#71549F;--chart-color-5:#007678;--chart-color-6:#CC4000;--chart-color-7:#007653;--chart-color-8:#D22962;font-size:12rem;--tooltip-background-color:#FFF4CC;--tooltip-title-color:#0D0D0D;--tooltip-body-color:#0D0D0D;--tooltip-padding-x:8px;--tooltip-padding-y:4px;--chart-color-1:#334BFF;--chart-color-2:#000000;--chart-color-3:#7F6400;--chart-color-4:#71549F;--chart-color-5:#007678;--chart-color-6:#CC4000;--chart-color-7:#007653;--chart-color-8:#D22962;--chart-color-9:#595959;--chart-color-10:#236F99;--chart-color-11:#147070;--chart-color-12:#AF583A;--chart-color-13:#0F1E8A;--chart-color-14:#737373;--chart-color-15:#4C3C00;--chart-color-16:#563F77;--chart-color-17:#004E4F;--chart-color-18:#993000;--chart-color-19:#00432F;--chart-color-20:#A3204C;--chart-color-21:#404040;--chart-color-22:#174A66;--chart-color-23:#116262;--chart-color-24:#88442D;--chart-color-25:#5D122B}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-chart', styles: ':host{font-size:12px;--grid-line-color:rgba(242, 242, 242, 0.5);--zero-line-color:rgba(242, 242, 242, 0.5);--animation-duration:1000;--line-width:2px;--line-tension:0;--multi-dataset-border-color:#FAFAFA;--tooltip-background-color:rgba(13, 13, 13, 0.9);--tooltip-title-color:#FFFFFF;--tooltip-body-color:#FFFFFF;--tooltip-border-radius:0px;--tooltip-caret-size:7px;--tooltip-padding-x:7px;--tooltip-padding-y:5px;--tooltip-title-spacing:0;--legend-key-box-width:4px;--chart-color-1:#334BFF;--chart-color-2:#000000;--chart-color-3:#7F6400;--chart-color-4:#71549F;--chart-color-5:#007678;--chart-color-6:#CC4000;--chart-color-7:#007653;--chart-color-8:#D22962;--tooltip-background-color:#FFF4CC;--tooltip-title-color:#0D0D0D;--tooltip-body-color:#0D0D0D;--tooltip-padding-x:8px;--tooltip-padding-y:4px;--chart-color-1:#334BFF;--chart-color-2:#000000;--chart-color-3:#7F6400;--chart-color-4:#71549F;--chart-color-5:#007678;--chart-color-6:#CC4000;--chart-color-7:#007653;--chart-color-8:#D22962;--chart-color-9:#595959;--chart-color-10:#236F99;--chart-color-11:#147070;--chart-color-12:#AF583A;--chart-color-13:#0F1E8A;--chart-color-14:#737373;--chart-color-15:#4C3C00;--chart-color-16:#563F77;--chart-color-17:#004E4F;--chart-color-18:#993000;--chart-color-19:#00432F;--chart-color-20:#A3204C;--chart-color-21:#404040;--chart-color-22:#174A66;--chart-color-23:#116262;--chart-color-24:#88442D;--chart-color-25:#5D122B}' }}));

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

@@ -1,4 +1,4 @@
 import '@refinitiv-ui/elements/header/themes/solar/charcoal';
 import '@refinitiv-ui/elements/layout/themes/solar/charcoal';
 
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-chart', styles: ':host{--grid-line-color:rgba(10, 10, 10, 0.5);--zero-line-color:rgba(10, 10, 10, 0.5);--animation-duration:1000;--line-width:2px;--line-tension:0;--multi-dataset-border-color:#1A1A1C;--tooltip-background-color:rgba(194, 194, 194, 0.9);--tooltip-title-color:#151516;--tooltip-body-color:#151516;--tooltip-border-radius:0px;--tooltip-caret-size:7px;--tooltip-padding-x:7px;--tooltip-padding-y:5px;--tooltip-title-spacing:0;--legend-key-box-width:4px;--chart-color-1:#FF9933;--chart-color-2:#B10CF2;--chart-color-3:#7DE442;--chart-color-4:#3780BF;--chart-color-5:#FA4C11;--chart-color-6:#FFE433;--chart-color-7:#8C8C8C;--chart-color-8:#5A54FF;font-size:12rem;color:rgba(194,194,194,.8);--legend-key-box-width:12;--grid-line-color:rgba(194, 194, 194, 0.1);--zero-line-color:rgba(194, 194, 194, 0.1);--animation-duration:500;--tooltip-background-color:rgba(74, 74, 82, 0.9);--tooltip-title-color:#C2C2C2;--tooltip-body-color:#C2C2C2;--tooltip-caret-size:8px;--tooltip-padding-x:8px;--tooltip-padding-y:8px;--doughnut-center-text-color:#C2C2C2;--doughnut-border-color:#ffffff;--chart-color-1:#FF9933;--chart-color-2:#B10CF2;--chart-color-3:#7DE442;--chart-color-4:#3780BF;--chart-color-5:#FA4C11;--chart-color-6:#FFE433;--chart-color-7:#8C8C8C;--chart-color-8:#5A54FF;--chart-color-9:#E53766;--chart-color-10:#648608;--chart-color-11:#48CBF7;--chart-color-12:#F3478E;--chart-color-13:#508BF7;--chart-color-14:#EFF748;--chart-color-15:#FF4043;--chart-color-16:#A7DB0B;--chart-color-17:#C2C2C2;--chart-color-18:#1578AD;--chart-color-19:#F2B530;--chart-color-20:#297835;--chart-color-21:#7045FF;--chart-color-22:#DD48F7;--chart-color-23:#09A8C0;--chart-color-24:#60E65C;--chart-color-25:#2960A3}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-chart', styles: ':host{font-size:14px;--grid-line-color:rgba(10, 10, 10, 0.5);--zero-line-color:rgba(10, 10, 10, 0.5);--animation-duration:1000;--line-width:2px;--line-tension:0;--multi-dataset-border-color:#1A1A1C;--tooltip-background-color:rgba(194, 194, 194, 0.9);--tooltip-title-color:#151516;--tooltip-body-color:#151516;--tooltip-border-radius:0px;--tooltip-caret-size:7px;--tooltip-padding-x:7px;--tooltip-padding-y:5px;--tooltip-title-spacing:0;--legend-key-box-width:4px;--chart-color-1:#FF9933;--chart-color-2:#B10CF2;--chart-color-3:#7DE442;--chart-color-4:#3780BF;--chart-color-5:#FA4C11;--chart-color-6:#FFE433;--chart-color-7:#8C8C8C;--chart-color-8:#5A54FF;color:rgba(194,194,194,.8);--legend-key-box-width:12;--grid-line-color:rgba(194, 194, 194, 0.1);--zero-line-color:rgba(194, 194, 194, 0.1);--animation-duration:500;--tooltip-background-color:rgba(74, 74, 82, 0.9);--tooltip-title-color:#C2C2C2;--tooltip-body-color:#C2C2C2;--tooltip-caret-size:8px;--tooltip-padding-x:8px;--tooltip-padding-y:8px;--doughnut-center-text-color:#C2C2C2;--doughnut-border-color:#ffffff;--chart-color-1:#FF9933;--chart-color-2:#B10CF2;--chart-color-3:#7DE442;--chart-color-4:#3780BF;--chart-color-5:#FA4C11;--chart-color-6:#FFE433;--chart-color-7:#8C8C8C;--chart-color-8:#5A54FF;--chart-color-9:#E53766;--chart-color-10:#648608;--chart-color-11:#48CBF7;--chart-color-12:#F3478E;--chart-color-13:#508BF7;--chart-color-14:#EFF748;--chart-color-15:#FF4043;--chart-color-16:#A7DB0B;--chart-color-17:#C2C2C2;--chart-color-18:#1578AD;--chart-color-19:#F2B530;--chart-color-20:#297835;--chart-color-21:#7045FF;--chart-color-22:#DD48F7;--chart-color-23:#09A8C0;--chart-color-24:#60E65C;--chart-color-25:#2960A3}' }}));

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

@@ -1,4 +1,4 @@
 import '@refinitiv-ui/elements/header/themes/solar/pearl';
 import '@refinitiv-ui/elements/layout/themes/solar/pearl';
 
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-chart', styles: ':host{--grid-line-color:rgba(213, 216, 219, 0.5);--zero-line-color:rgba(213, 216, 219, 0.5);--animation-duration:1000;--line-width:2px;--line-tension:0;--multi-dataset-border-color:#FFFFFF;--tooltip-background-color:rgba(72, 72, 72, 0.9);--tooltip-title-color:#C2C2C2;--tooltip-body-color:#C2C2C2;--tooltip-border-radius:0px;--tooltip-caret-size:7px;--tooltip-padding-x:7px;--tooltip-padding-y:5px;--tooltip-title-spacing:0;--legend-key-box-width:4px;--chart-color-1:#EE7600;--chart-color-2:#B10CF2;--chart-color-3:#309054;--chart-color-4:#3780BF;--chart-color-5:#FA4C11;--chart-color-6:#D9B500;--chart-color-7:#8C8C8C;--chart-color-8:#5A54FF;font-size:12rem;color:rgba(72,72,72,.8);--legend-key-box-width:12;--grid-line-color:rgba(72, 72, 72, 0.1);--zero-line-color:rgba(72, 72, 72, 0.1);--animation-duration:500;--tooltip-background-color:rgba(190, 195, 204, 0.9);--tooltip-title-color:#484848;--tooltip-body-color:#484848;--tooltip-caret-size:8px;--tooltip-padding-x:8px;--tooltip-padding-y:8px;--doughnut-center-text-color:#484848;--doughnut-border-color:#000000;--chart-color-1:#EE7600;--chart-color-2:#B10CF2;--chart-color-3:#309054;--chart-color-4:#3780BF;--chart-color-5:#FA4C11;--chart-color-6:#D9B500;--chart-color-7:#8C8C8C;--chart-color-8:#5A54FF;--chart-color-9:#E53766;--chart-color-10:#648608;--chart-color-11:#40B6DE;--chart-color-12:#F3478E;--chart-color-13:#508BF7;--chart-color-14:#AAB218;--chart-color-15:#FF4043;--chart-color-16:#80A808;--chart-color-17:#707070;--chart-color-18:#1578AC;--chart-color-19:#D9A22B;--chart-color-20:#297835;--chart-color-21:#7045FF;--chart-color-22:#DD48F7;--chart-color-23:#09A8C0;--chart-color-24:#4BB347;--chart-color-25:#2960A3}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-chart', styles: ':host{font-size:14px;--grid-line-color:rgba(213, 216, 219, 0.5);--zero-line-color:rgba(213, 216, 219, 0.5);--animation-duration:1000;--line-width:2px;--line-tension:0;--multi-dataset-border-color:#FFFFFF;--tooltip-background-color:rgba(72, 72, 72, 0.9);--tooltip-title-color:#C2C2C2;--tooltip-body-color:#C2C2C2;--tooltip-border-radius:0px;--tooltip-caret-size:7px;--tooltip-padding-x:7px;--tooltip-padding-y:5px;--tooltip-title-spacing:0;--legend-key-box-width:4px;--chart-color-1:#EE7600;--chart-color-2:#B10CF2;--chart-color-3:#309054;--chart-color-4:#3780BF;--chart-color-5:#FA4C11;--chart-color-6:#D9B500;--chart-color-7:#8C8C8C;--chart-color-8:#5A54FF;color:rgba(72,72,72,.8);--legend-key-box-width:12;--grid-line-color:rgba(72, 72, 72, 0.1);--zero-line-color:rgba(72, 72, 72, 0.1);--animation-duration:500;--tooltip-background-color:rgba(190, 195, 204, 0.9);--tooltip-title-color:#484848;--tooltip-body-color:#484848;--tooltip-caret-size:8px;--tooltip-padding-x:8px;--tooltip-padding-y:8px;--doughnut-center-text-color:#484848;--doughnut-border-color:#000000;--chart-color-1:#EE7600;--chart-color-2:#B10CF2;--chart-color-3:#309054;--chart-color-4:#3780BF;--chart-color-5:#FA4C11;--chart-color-6:#D9B500;--chart-color-7:#8C8C8C;--chart-color-8:#5A54FF;--chart-color-9:#E53766;--chart-color-10:#648608;--chart-color-11:#40B6DE;--chart-color-12:#F3478E;--chart-color-13:#508BF7;--chart-color-14:#AAB218;--chart-color-15:#FF4043;--chart-color-16:#80A808;--chart-color-17:#707070;--chart-color-18:#1578AC;--chart-color-19:#D9A22B;--chart-color-20:#297835;--chart-color-21:#7045FF;--chart-color-22:#DD48F7;--chart-color-23:#09A8C0;--chart-color-24:#4BB347;--chart-color-25:#2960A3}' }}));

package/lib/checkbox/custom-elements.json

@@ -63,7 +63,7 @@
       "events": [
         {
           "name": "checked-changed",
-          "description": "Fired when the `checked` property changes."
+          "description": "Fired when the user checks or unchecks the checkbox. The event is not fired if the `checked` property is changed programmatically."
         }
       ]
     }

package/lib/checkbox/custom-elements.md

@@ -13,6 +13,6 @@ Form control for selecting one or several options
 
 ## Events
 
-| Event             | Description                                |
-|-------------------|--------------------------------------------|
-| `checked-changed` | Fired when the `checked` property changes. |
+| Event             | Description                                      |
+|-------------------|--------------------------------------------------|
+| `checked-changed` | Fired when the user checks or unchecks the checkbox. The event is not fired if the `checked` property is changed programmatically. |

package/lib/checkbox/index.d.ts

@@ -3,7 +3,7 @@ import { ControlElement, TemplateResult, CSSResultGroup, PropertyValues } from '
 import '../icon/index.js';
 /**
  * Form control for selecting one or several options
- * @fires checked-changed - Fired when the `checked` property changes.
+ * @fires checked-changed - Fired when the user checks or unchecks the checkbox. The event is not fired if the `checked` property is changed programmatically.
  *
  * @attr {boolean} readonly - Set readonly state
  * @prop {boolean} [readonly=false] - Set readonly state

package/lib/checkbox/index.js

@@ -8,7 +8,7 @@ import { registerOverflowTooltip } from '../tooltip/index.js';
 import '../icon/index.js';
 /**
  * Form control for selecting one or several options
- * @fires checked-changed - Fired when the `checked` property changes.
+ * @fires checked-changed - Fired when the user checks or unchecks the checkbox. The event is not fired if the `checked` property is changed programmatically.
  *
  * @attr {boolean} readonly - Set readonly state
  * @prop {boolean} [readonly=false] - Set readonly state
@@ -122,7 +122,6 @@ let Checkbox = class Checkbox extends ControlElement {
         }
         switch (event.key) {
             case ' ':
-            case 'Spacebar':
                 this.handleChangeChecked();
                 break;
             default:

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

@@ -1,4 +1,4 @@
 import '@refinitiv-ui/elements/icon/themes/halo/dark';
 import '@refinitiv-ui/elements/tooltip/themes/halo/dark';
 
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-checkbox', styles: ':host{margin:1px 0;vertical-align:middle;display:inline-flex;align-items:center;flex-wrap:nowrap;font-size:inherit;font-weight:inherit;touch-action:manipulation;--check-color:#6678FF;color:#ccc}:host(:focus){outline:0}:host [part=container]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:0;background-color:#0d0d0d;transition:box-shadow 150ms,border-color 150ms;box-shadow:inset 0 0 0 rgba(0,0,0,.5);-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;border:1px solid #404040;width:14px;height:14px}:host [part=check]{display:flex;justify-content:center;align-items:center;box-sizing:border-box;color:var(--check-color,#6678ff);width:95%;height:95%}:host [part=label]{margin:0 7px;cursor:default}:host([indeterminate]) [part=check]{border:none;background-color:currentColor;transform:none;border-radius:1px;margin:0;width:70%;height:1px}:host([disabled]) [part=check],:host([readonly]) [part=check]{color:var(--check-color,#ccc)}:host([disabled]) [part=check]{opacity:.5}:host([disabled][checked]) [part=check]{opacity:.5}:host([disabled]) [part=label]{opacity:.65}@media (-ms-high-contrast:none),(pointer:fine){:host(:focus) [part=container]{border-color:#334bff;box-shadow:0 0 0 #334bff}}:host(:not([readonly])) [part=container]{cursor:pointer}:host(:hover:not([checked]):not([indeterminate]):not([readonly])) [part=container]{border-color:grey}:host(:hover:not([readonly])){color:#fff}:host([disabled]),:host([disabled]) [part=label]{opacity:.5}:host([checked]) [part=container]{border:1px solid #334bff}:host(:focus[readonly]:not([checked])) [part=container]{border-color:#404040}:host([focused=visible]){outline:#334bff solid 1px;outline-offset:2px}:host([indeterminate]) [part=container]{border:1px solid #334bff}:host(:focus[readonly]) [part=container],:host(:focus[readonly][indeterminate]) [part=container]{border-color:#334bff}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-checkbox', styles: ':host{margin:1px 0;vertical-align:middle;display:inline-flex;align-items:center;flex-wrap:nowrap;font-size:inherit;font-weight:inherit;touch-action:manipulation;--check-color:#6678FF;color:#ccc}:host(:focus){outline:0}:host [part=container]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:0;background-color:#0d0d0d;transition:box-shadow 150ms,border-color 150ms;box-shadow:inset 0 0 0 rgba(0,0,0,.5);-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;border:1px solid #404040;width:14px;height:14px}:host [part=check]{display:flex;justify-content:center;align-items:center;box-sizing:border-box;color:var(--check-color,#6678ff);width:95%;height:95%}:host [part=label]{margin:0 7px;cursor:default}:host([indeterminate]) [part=check]{border:none;background-color:currentColor;transform:none;border-radius:1px;margin:0;width:70%;height:1px}:host([disabled]) [part=check],:host([readonly]) [part=check]{color:var(--check-color,#ccc)}:host([disabled]) [part=check]{opacity:.5}:host([disabled][checked]) [part=check]{opacity:.5}:host([disabled]) [part=label]{opacity:.65}@media (pointer:fine){:host(:focus) [part=container]{border-color:#334bff;box-shadow:0 0 0 #334bff}}:host(:not([readonly])) [part=container]{cursor:pointer}:host(:hover:not([checked]):not([indeterminate]):not([readonly])) [part=container]{border-color:grey}:host(:hover:not([readonly])){color:#fff}:host([disabled]),:host([disabled]) [part=label]{opacity:.5}:host([checked]) [part=container]{border:1px solid #334bff}:host(:focus[readonly]:not([checked])) [part=container]{border-color:#404040}:host([focused=visible]){outline:#334bff solid 1px;outline-offset:2px}:host([indeterminate]) [part=container]{border:1px solid #334bff}:host(:focus[readonly]) [part=container],:host(:focus[readonly][indeterminate]) [part=container]{border-color:#334bff}' }}));

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

@@ -1,4 +1,4 @@
 import '@refinitiv-ui/elements/icon/themes/halo/light';
 import '@refinitiv-ui/elements/tooltip/themes/halo/light';
 
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-checkbox', styles: ':host{margin:1px 0;vertical-align:middle;display:inline-flex;align-items:center;flex-wrap:nowrap;font-size:inherit;font-weight:inherit;touch-action:manipulation;--check-color:#334BFF;color:#404040}:host(:focus){outline:0}:host [part=container]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:0;background-color:#fff;transition:box-shadow 150ms,border-color 150ms;box-shadow:inset 0 0 0 rgba(0,0,0,.25);-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;border:1px solid #595959;width:14px;height:14px}:host [part=check]{display:flex;justify-content:center;align-items:center;box-sizing:border-box;color:var(--check-color,#334bff);width:95%;height:95%}:host [part=label]{margin:0 7px;cursor:default}:host([indeterminate]) [part=check]{border:none;background-color:currentColor;transform:none;border-radius:1px;margin:0;width:70%;height:1px}:host([disabled]) [part=check],:host([readonly]) [part=check]{color:var(--check-color,#404040)}:host([disabled]) [part=check]{opacity:.5}:host([disabled][checked]) [part=check]{opacity:.5}:host([disabled]) [part=label]{opacity:.65}@media (-ms-high-contrast:none),(pointer:fine){:host(:focus) [part=container]{border-color:#334bff;box-shadow:0 0 0 #334bff}}:host(:not([readonly])) [part=container]{cursor:pointer}:host(:hover:not([checked]):not([indeterminate]):not([readonly])) [part=container]{border-color:#0d0d0d}:host(:hover:not([readonly])){color:#0d0d0d}:host([disabled]),:host([disabled]) [part=label]{opacity:.5}:host([checked]) [part=container]{border:1px solid #334bff}:host(:focus[readonly]:not([checked])) [part=container]{border-color:#595959}:host([focused=visible]){outline:#334bff solid 1px;outline-offset:2px}:host([indeterminate]) [part=container]{border:1px solid #334bff}:host(:focus[readonly]) [part=container],:host(:focus[readonly][indeterminate]) [part=container]{border-color:#334bff}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-checkbox', styles: ':host{margin:1px 0;vertical-align:middle;display:inline-flex;align-items:center;flex-wrap:nowrap;font-size:inherit;font-weight:inherit;touch-action:manipulation;--check-color:#334BFF;color:#404040}:host(:focus){outline:0}:host [part=container]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:0;background-color:#fff;transition:box-shadow 150ms,border-color 150ms;box-shadow:inset 0 0 0 rgba(0,0,0,.25);-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;border:1px solid #595959;width:14px;height:14px}:host [part=check]{display:flex;justify-content:center;align-items:center;box-sizing:border-box;color:var(--check-color,#334bff);width:95%;height:95%}:host [part=label]{margin:0 7px;cursor:default}:host([indeterminate]) [part=check]{border:none;background-color:currentColor;transform:none;border-radius:1px;margin:0;width:70%;height:1px}:host([disabled]) [part=check],:host([readonly]) [part=check]{color:var(--check-color,#404040)}:host([disabled]) [part=check]{opacity:.5}:host([disabled][checked]) [part=check]{opacity:.5}:host([disabled]) [part=label]{opacity:.65}@media (pointer:fine){:host(:focus) [part=container]{border-color:#334bff;box-shadow:0 0 0 #334bff}}:host(:not([readonly])) [part=container]{cursor:pointer}:host(:hover:not([checked]):not([indeterminate]):not([readonly])) [part=container]{border-color:#0d0d0d}:host(:hover:not([readonly])){color:#0d0d0d}:host([disabled]),:host([disabled]) [part=label]{opacity:.5}:host([checked]) [part=container]{border:1px solid #334bff}:host(:focus[readonly]:not([checked])) [part=container]{border-color:#595959}:host([focused=visible]){outline:#334bff solid 1px;outline-offset:2px}:host([indeterminate]) [part=container]{border:1px solid #334bff}:host(:focus[readonly]) [part=container],:host(:focus[readonly][indeterminate]) [part=container]{border-color:#334bff}' }}));

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

@@ -1,4 +1,4 @@
 import '@refinitiv-ui/elements/icon/themes/solar/charcoal';
 import '@refinitiv-ui/elements/tooltip/themes/solar/charcoal';
 
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-checkbox', styles: ':host{margin:1px 0;vertical-align:middle;display:inline-flex;align-items:center;flex-wrap:nowrap;font-size:inherit;font-weight:inherit;touch-action:manipulation}:host(:focus){outline:0}:host [part=container]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:0;background-color:#000;transition:box-shadow 150ms,border-color 150ms;box-shadow:inset 0 0 0 rgba(0,0,0,.6);-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;border:1px solid #4a4a52;height:11px;width:11px}:host [part=check]{display:flex;justify-content:center;align-items:center;box-sizing:border-box;color:var(--check-color,#f93);border-width:0 2px 2px 0;width:95%;height:95%}:host [part=label]{cursor:default;margin:0 4px}:host([indeterminate]) [part=check]{border:none;background-color:currentColor;transform:none;border-radius:1px;margin:0;width:5px;height:5px}:host([disabled]) [part=check],:host([readonly]) [part=check]{color:var(--check-color,#e2e2e2)}:host([disabled]) [part=check]{opacity:.5}:host([disabled][checked]) [part=check]{opacity:.5}:host([disabled]) [part=label]{opacity:.65;color:rgba(194,194,194,.6)}:host([disabled][checked]) [part=check],:host([disabled][indeterminate]) [part=check]{color:#c2c2c2}:host([readonly][checked]) [part=check],:host([readonly][indeterminate]) [part=check]{color:rgba(194,194,194,.5)}:host([disabled]) [part=container],:host([readonly]) [part=container]{color:rgba(194,194,194,.6);border-color:rgba(74,74,82,.6);background-color:rgba(0,0,0,.6)}@media (-ms-high-contrast:none),(pointer:fine){:host(:focus) [part=container]{box-shadow:0 0 0 #f93;border:1px dotted #f93}}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-checkbox', styles: ':host{margin:1px 0;vertical-align:middle;display:inline-flex;align-items:center;flex-wrap:nowrap;font-size:inherit;font-weight:inherit;touch-action:manipulation}:host(:focus){outline:0}:host [part=container]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:0;background-color:#000;transition:box-shadow 150ms,border-color 150ms;box-shadow:inset 0 0 0 rgba(0,0,0,.6);-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;border:1px solid #4a4a52;height:11px;width:11px}:host [part=check]{display:flex;justify-content:center;align-items:center;box-sizing:border-box;color:var(--check-color,#f93);border-width:0 2px 2px 0;width:95%;height:95%}:host [part=label]{cursor:default;margin:0 4px}:host([indeterminate]) [part=check]{border:none;background-color:currentColor;transform:none;border-radius:1px;margin:0;width:5px;height:5px}:host([disabled]) [part=check],:host([readonly]) [part=check]{color:var(--check-color,#e2e2e2)}:host([disabled]) [part=check]{opacity:.5}:host([disabled][checked]) [part=check]{opacity:.5}:host([disabled]) [part=label]{opacity:.65;color:rgba(194,194,194,.6)}:host([disabled][checked]) [part=check],:host([disabled][indeterminate]) [part=check]{color:#c2c2c2}:host([readonly][checked]) [part=check],:host([readonly][indeterminate]) [part=check]{color:rgba(194,194,194,.5)}:host([disabled]) [part=container],:host([readonly]) [part=container]{color:rgba(194,194,194,.6);border-color:rgba(74,74,82,.6);background-color:rgba(0,0,0,.6)}@media (pointer:fine){:host(:focus) [part=container]{box-shadow:0 0 0 #f93;border:1px dotted #f93}}' }}));

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

@@ -1,4 +1,4 @@
 import '@refinitiv-ui/elements/icon/themes/solar/pearl';
 import '@refinitiv-ui/elements/tooltip/themes/solar/pearl';
 
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-checkbox', styles: ':host{margin:1px 0;vertical-align:middle;display:inline-flex;align-items:center;flex-wrap:nowrap;font-size:inherit;font-weight:inherit;touch-action:manipulation}:host(:focus){outline:0}:host [part=container]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:0;background-color:#fff;transition:box-shadow 150ms,border-color 150ms;box-shadow:inset 0 0 0 rgba(0,0,0,.3);-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;border:1px solid #a9afba;height:11px;width:11px}:host [part=check]{display:flex;justify-content:center;align-items:center;box-sizing:border-box;color:var(--check-color,#ee7600);border-width:0 2px 2px 0;width:95%;height:95%}:host [part=label]{cursor:default;margin:0 4px}:host([indeterminate]) [part=check]{border:none;background-color:currentColor;transform:none;border-radius:1px;margin:0;width:5px;height:5px}:host([disabled]) [part=check],:host([readonly]) [part=check]{color:var(--check-color,#acafb5)}:host([disabled]) [part=check]{opacity:.5}:host([disabled][checked]) [part=check]{opacity:.5}:host([disabled]) [part=label]{opacity:.65;color:rgba(72,72,72,.6)}:host([disabled][checked]) [part=check],:host([disabled][indeterminate]) [part=check]{color:#a9afba}:host([readonly][checked]) [part=check],:host([readonly][indeterminate]) [part=check]{color:rgba(169,175,186,.5)}:host([disabled]) [part=container],:host([readonly]) [part=container]{color:rgba(72,72,72,.6);border-color:rgba(169,175,186,.6);background-color:rgba(255,255,255,.6)}@media (-ms-high-contrast:none),(pointer:fine){:host(:focus) [part=container]{box-shadow:0 0 0 #ffb266;border:1px dotted #ffb266}}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-checkbox', styles: ':host{margin:1px 0;vertical-align:middle;display:inline-flex;align-items:center;flex-wrap:nowrap;font-size:inherit;font-weight:inherit;touch-action:manipulation}:host(:focus){outline:0}:host [part=container]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:0;background-color:#fff;transition:box-shadow 150ms,border-color 150ms;box-shadow:inset 0 0 0 rgba(0,0,0,.3);-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;border:1px solid #a9afba;height:11px;width:11px}:host [part=check]{display:flex;justify-content:center;align-items:center;box-sizing:border-box;color:var(--check-color,#ee7600);border-width:0 2px 2px 0;width:95%;height:95%}:host [part=label]{cursor:default;margin:0 4px}:host([indeterminate]) [part=check]{border:none;background-color:currentColor;transform:none;border-radius:1px;margin:0;width:5px;height:5px}:host([disabled]) [part=check],:host([readonly]) [part=check]{color:var(--check-color,#acafb5)}:host([disabled]) [part=check]{opacity:.5}:host([disabled][checked]) [part=check]{opacity:.5}:host([disabled]) [part=label]{opacity:.65;color:rgba(72,72,72,.6)}:host([disabled][checked]) [part=check],:host([disabled][indeterminate]) [part=check]{color:#a9afba}:host([readonly][checked]) [part=check],:host([readonly][indeterminate]) [part=check]{color:rgba(169,175,186,.5)}:host([disabled]) [part=container],:host([readonly]) [part=container]{color:rgba(72,72,72,.6);border-color:rgba(169,175,186,.6);background-color:rgba(255,255,255,.6)}@media (pointer:fine){:host(:focus) [part=container]{box-shadow:0 0 0 #ffb266;border:1px dotted #ffb266}}' }}));

package/lib/clock/custom-elements.json

@@ -100,11 +100,11 @@
       "events": [
         {
           "name": "value-changed",
-          "description": "Fired when the value property changes while ticking."
+          "description": "Fired when `value` property changes while ticking."
         },
         {
           "name": "offset-changed",
-          "description": "Fired when the the user offsets the clock in `interactive` mode."
+          "description": "Fired when the user offsets the clock in `interactive` mode. The event is not triggered if `offset` property is changed programmatically."
         }
       ],
       "methods": [

package/lib/clock/custom-elements.md

@@ -24,5 +24,5 @@ Display hours, minutes and seconds as clock interface
 
 | Event            | Description                                      |
 |------------------|--------------------------------------------------|
-| `offset-changed` | Fired when the the user offsets the clock in `interactive` mode. |
-| `value-changed`  | Fired when the value property changes while ticking. |
+| `offset-changed` | Fired when the user offsets the clock in `interactive` mode. The event is not triggered if `offset` property is changed programmatically. |
+| `value-changed`  | Fired when `value` property changes while ticking. |

package/lib/clock/index.d.ts

@@ -4,8 +4,8 @@ import '@refinitiv-ui/phrasebook/locale/en/clock.js';
 import { TranslatePromise } from '@refinitiv-ui/translate';
 /**
  * Display hours, minutes and seconds as clock interface
- * @fires value-changed - Fired when the value property changes while ticking.
- * @fires offset-changed - Fired when the the user offsets the clock in `interactive` mode.
+ * @fires value-changed - Fired when `value` property changes while ticking.
+ * @fires offset-changed - Fired when the user offsets the clock in `interactive` mode. The event is not triggered if `offset` property is changed programmatically.
  */
 export declare class Clock extends ResponsiveElement {
     /**

package/lib/clock/index.js

@@ -23,8 +23,8 @@ var Segment;
 })(Segment || (Segment = {}));
 /**
  * Display hours, minutes and seconds as clock interface
- * @fires value-changed - Fired when the value property changes while ticking.
- * @fires offset-changed - Fired when the the user offsets the clock in `interactive` mode.
+ * @fires value-changed - Fired when `value` property changes while ticking.
+ * @fires offset-changed - Fired when the user offsets the clock in `interactive` mode. The event is not triggered if `offset` property is changed programmatically.
  */
 let Clock = class Clock extends ResponsiveElement {
     constructor() {
@@ -406,19 +406,15 @@ let Clock = class Clock extends ResponsiveElement {
             return;
         }
         switch (event.key) {
-            case 'Up': // IE
             case 'ArrowUp':
                 this.handleUpKey();
                 break;
-            case 'Down': // IE
             case 'ArrowDown':
                 this.handleDownKey();
                 break;
-            case 'Left': // IE
             case 'ArrowLeft':
                 this.activeSegment = Segment.HOURS;
                 break;
-            case 'Right': // IE
             case 'ArrowRight':
                 this.activeSegment = Segment.MINUTES;
                 break;

package/lib/clock/utils/TickManager.d.ts

@@ -1,4 +1,4 @@
-declare type TickCallback = () => void;
+type TickCallback = () => void;
 /**
  * Register new tick callback
  * @param tickCallback tick callback

package/lib/collapse/custom-elements.json

@@ -63,7 +63,7 @@
       "events": [
         {
           "name": "expanded-changed",
-          "description": "Fired when the `expanded` property changes."
+          "description": "Fired when the user expands or collapses the control. The event is not triggered if `expanded` property is changed programmatically."
         }
       ],
       "slots": [

package/lib/collapse/custom-elements.md

@@ -15,9 +15,9 @@ for their primary displays.
 
 ## Events
 
-| Event              | Description                                 |
-|--------------------|---------------------------------------------|
-| `expanded-changed` | Fired when the `expanded` property changes. |
+| Event              | Description                                      |
+|--------------------|--------------------------------------------------|
+| `expanded-changed` | Fired when the user expands or collapses the control. The event is not triggered if `expanded` property is changed programmatically. |
 
 ## Slots
 

package/lib/collapse/index.d.ts

@@ -8,7 +8,7 @@ import '../icon/index.js';
  * or areas of the screen, maximizing the amount of real estate
  * for their primary displays.
  *
- * @fires expanded-changed - Fired when the `expanded` property changes.
+ * @fires expanded-changed - Fired when the user expands or collapses the control. The event is not triggered if `expanded` property is changed programmatically.
  *
  * @slot header-left - Slot to add custom contents to the left side of header e.g. ef-icon, ef-checkbox
  * @slot header-right - Slot to add custom contents to the right side of header e.g. ef-icon, ef-checkbox
@@ -100,6 +100,12 @@ export declare class Collapse extends BasicElement {
      * @returns clientHeight of the panel so that the panel holder max-height can be set
      */
     private getContentHeight;
+    /**
+     * Prevents expanding collapse when interactive element in slot is tapped
+     * @param event Tap event
+     * @returns {void}
+     */
+    private handleSlotTap;
     /**
      * A `TemplateResult` that will be used
      * to render the updated internal template.

package/lib/collapse/index.js

@@ -1,8 +1,7 @@
 import { __decorate } from "tslib";
-import { BasicElement, css, html } from '@refinitiv-ui/core';
+import { BasicElement, css, nothing, html } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
-import { ifDefined } from '@refinitiv-ui/core/directives/if-defined.js';
 import { state } from '@refinitiv-ui/core/decorators/state.js';
 import { ref, createRef } from '@refinitiv-ui/core/directives/ref.js';
 import { VERSION } from '../version.js';
@@ -16,7 +15,7 @@ preload('right'); /* preload calendar icons for faster loading */
  * or areas of the screen, maximizing the amount of real estate
  * for their primary displays.
  *
- * @fires expanded-changed - Fired when the `expanded` property changes.
+ * @fires expanded-changed - Fired when the user expands or collapses the control. The event is not triggered if `expanded` property is changed programmatically.
  *
  * @slot header-left - Slot to add custom contents to the left side of header e.g. ef-icon, ef-checkbox
  * @slot header-right - Slot to add custom contents to the right side of header e.g. ef-icon, ef-checkbox
@@ -74,20 +73,6 @@ let Collapse = class Collapse extends BasicElement {
       :host(:not([expanded])) [part~=content] {
         visibility: hidden;
       }
-      [part~=header] {
-        position: relative;
-        z-index: 0;
-      }
-      [part~=header-toggle]::before {
-        content: '';
-        display: block;
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        z-index: -1;
-      }
       [part~=content]  {
         overflow: hidden;
         box-sizing: border-box;
@@ -173,6 +158,14 @@ let Collapse = class Collapse extends BasicElement {
         const panelEl = this.panelRef.value;
         return panelEl ? panelEl.clientHeight : 0;
     }
+    /**
+     * Prevents expanding collapse when interactive element in slot is tapped
+     * @param event Tap event
+     * @returns {void}
+     */
+    handleSlotTap(event) {
+        event.stopPropagation();
+    }
     /**
      * A `TemplateResult` that will be used
      * to render the updated internal template.
@@ -180,21 +173,25 @@ let Collapse = class Collapse extends BasicElement {
      */
     render() {
         return html `
-      <ef-header part="header" level="${this.level}">
-        <div part="heading" role="heading" aria-level="${ifDefined(this.headingLevel || undefined)}">
-          <div id="header-toggle"
-               part="header-toggle"
-               role="button"
-               tabindex="0"
-               aria-expanded="${this.expanded}"
-               aria-controls="content"
-               @tap=${this.toggle}>${this.header}</div>
-        </div>
+      <ef-header
+        part="header"
+        role="heading"
+        level=${this.level}
+        aria-level=${this.headingLevel ?? nothing}
+        @tap=${this.toggle}>
+          <div
+            id="header-label"
+            role="button"
+            tabindex="0"
+            aria-expanded="${this.expanded}"
+            aria-controls="content">
+            ${this.header}
+          </div>
         <ef-icon icon="right" part="toggle" slot="left" aria-hidden="true"></ef-icon>
-        <slot name="header-left" slot="left"></slot>
-        <slot name="header-right" slot="right"></slot>
+        <slot name="header-left" slot="left" @tap=${this.handleSlotTap}></slot>
+        <slot name="header-right" slot="right" @tap=${this.handleSlotTap}></slot>
       </ef-header>
-      <div ${ref(this.panelHolderRef)} id="content" part="content" role="region" aria-labelledby="header-toggle">
+      <div ${ref(this.panelHolderRef)} id="content" part="content" role="region" aria-labelledby="header-label">
         <ef-panel ${ref(this.panelRef)} part="content-data" ?spacing="${this.spacing}" transparent>
           <slot></slot>
         </ef-panel>