@refinitiv-ui/elements 5.3.4 → 5.8.0

package/lib/interactive-chart/index.d.ts

@@ -1,10 +1,10 @@
 import { JSXInterface } from '../jsx';
-import { ResponsiveElement, TemplateResult, CSSResult, PropertyValues, ElementSize } from '@refinitiv-ui/core';
+import { ResponsiveElement, TemplateResult, CSSResultGroup, PropertyValues, ElementSize } from '@refinitiv-ui/core';
 import { IChartApi, MouseEventParams } from 'lightweight-charts';
-import '../tooltip';
+import '../tooltip/index.js';
 import type { InteractiveChartConfig, InteractiveChartSeries, RowLegend, SeriesList, SeriesDataItem } from './helpers/types';
-import { LegendStyle } from './helpers/types';
-export { InteractiveChartConfig, InteractiveChartSeries, LegendStyle };
+import { LegendStyle } from './helpers/types.js';
+export type { InteractiveChartConfig, InteractiveChartSeries, LegendStyle };
 /**
  * A charting component that allows you to create several use cases of financial chart.
  * By lightweight-charts library.
@@ -43,9 +43,9 @@ export declare class InteractiveChart extends ResponsiveElement {
     deprecatedLegendStyle: LegendStyle | undefined;
     /**
      * Set legend style i.e. `horizontal`, `vertical`.
-     * Default is `vertical`.
      * @param {LegendStyle} value legend style value
      * @type {"vertical" | "horizontal"} type of legend style
+     * @default vertical
      **/
     set legendStyle(value: LegendStyle);
     get legendStyle(): LegendStyle;
@@ -54,7 +54,10 @@ export declare class InteractiveChart extends ResponsiveElement {
      * when deprecated features are used.
     */
     private deprecationNotice;
-    /** Array of series instances in chart */
+    /**
+     * @ignore
+     * Array of series instances in chart
+     */
     seriesList: SeriesList[];
     private jumpButtonInitialized;
     private legendInitialized;
@@ -351,12 +354,12 @@ export declare class InteractiveChart extends ResponsiveElement {
      */
     colors(): string[];
     /**
-    * A `CSSResult` that will be used
+    * A `CSSResultGroup` that will be used
     * to style the host, slotted children
     * and the internal template of the element.
     * @return CSS template
     */
-    static get styles(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     /**
      * A `TemplateResult` that will be used
      * to render the updated internal template.

package/lib/interactive-chart/index.js

@@ -1,18 +1,15 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
 var InteractiveChart_1;
-import { ResponsiveElement, html, css, customElement, property, query, DeprecationNotice } from '@refinitiv-ui/core';
-import { color as parseColor } from '@refinitiv-ui/utils';
+import { __decorate } from "tslib";
+import { ResponsiveElement, html, css, DeprecationNotice } 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 { VERSION } from '../version.js';
+import { color as parseColor } from '@refinitiv-ui/utils/lib/color.js';
 import { createChart as chart } from 'lightweight-charts';
-import { VERSION } from '../';
-import '../tooltip';
-import { LegendStyle } from './helpers/types';
-import { merge } from './helpers/merge';
-export { LegendStyle };
+import '../tooltip/index.js';
+import { LegendStyle } from './helpers/types.js';
+import { merge } from './helpers/merge.js';
 const NOT_AVAILABLE_DATA = 'N/A';
 const NO_DATA_POINT = '--';
 /**
@@ -42,7 +39,10 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
          * when deprecated features are used.
         */
         this.deprecationNotice = new DeprecationNotice('`legendstyle` attribute and property are deprecated. Use `legend-style` for attribute and `legendStyle` property instead.');
-        /** Array of series instances in chart */
+        /**
+         * @ignore
+         * Array of series instances in chart
+         */
         this.seriesList = [];
         this.jumpButtonInitialized = false;
         this.legendInitialized = false;
@@ -119,15 +119,15 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
     }
     /**
      * Set legend style i.e. `horizontal`, `vertical`.
-     * Default is `vertical`.
      * @param {LegendStyle} value legend style value
      * @type {"vertical" | "horizontal"} type of legend style
+     * @default vertical
      **/
     set legendStyle(value) {
         const oldValue = this.legendStyle;
         if (oldValue !== value) {
             this._legendStyle = value;
-            void this.requestUpdate('legend-style', oldValue);
+            this.requestUpdate('legend-style', oldValue);
         }
     }
     get legendStyle() {
@@ -1011,7 +1011,7 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
         return colors;
     }
     /**
-    * A `CSSResult` that will be used
+    * A `CSSResultGroup` that will be used
     * to style the host, slotted children
     * and the internal template of the element.
     * @return CSS template

package/lib/item/custom-elements.json

@@ -58,7 +58,7 @@
           "name": "disabled",
           "description": "Set disabled state.",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "properties": [
@@ -114,12 +114,12 @@
           "type": "string | null"
         },
         {
-          "name": "highlightable",
+          "name": "highlightable (readonly)",
           "description": "Return true if the item can be highlighted. True if not disabled and type is Text",
           "type": "boolean"
         },
         {
-          "name": "isTruncated",
+          "name": "isTruncated (readonly)",
           "description": "Getter returning if the label is truncated",
           "type": "boolean"
         },
@@ -135,7 +135,7 @@
           "attribute": "disabled",
           "description": "Set disabled state.",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "slots": [

package/lib/item/custom-elements.md

@@ -0,0 +1,29 @@
+# ef-item
+
+Used as a basic building block to compose complex custom elements,
+additionally it can be used by applications
+to create simple menus or navigation panels.
+
+## Properties
+
+| Property                   | Attribute     | Type               | Default | Description                                      |
+|----------------------------|---------------|--------------------|---------|--------------------------------------------------|
+| `disabled`                 | `disabled`    | `boolean`          | false   | Set disabled state.                              |
+| `for`                      | `for`         | `string \| null`   | null    | Specifies which element an item is bound to      |
+| `highlightable (readonly)` |               | `boolean`          |         | Return true if the item can be highlighted. True if not disabled and type is Text |
+| `highlighted`              | `highlighted` | `boolean`          | false   | Highlight the item                               |
+| `icon`                     | `icon`        | `string \| null`   | null    | Set the icon name from the ef-icon list          |
+| `isTruncated (readonly)`   |               | `boolean`          |         | Getter returning if the label is truncated       |
+| `label`                    | `label`       | `string \| null`   | null    | The text for the label indicating the meaning of the item.<br />By having both `label` and content, `label` always takes priority |
+| `multiple`                 | `multiple`    | `boolean`          | false   | Is the item part of a multiple selection         |
+| `selected`                 | `selected`    | `boolean`          | false   | Indicates that the item is selected              |
+| `subLabel`                 | `sub-label`   | `string \| null`   | null    | The`subLabel` property represents the text beneath the label. |
+| `type`                     | `type`        | `ItemType \| null` | null    | If defined value can be `text`, `header` or `divider` |
+| `value`                    | `value`       | `string`           | ""      | The content of this attribute represents the value of the item. |
+
+## Slots
+
+| Name    | Description                                      |
+|---------|--------------------------------------------------|
+| `left`  | Used to render the content on the left of the label. |
+| `right` | Used to render the content on the right of the label. |

package/lib/item/helpers/types.d.ts

@@ -1,4 +1,4 @@
-import { DataItem } from '@refinitiv-ui/utils';
+import type { DataItem } from '@refinitiv-ui/utils/lib/collection.js';
 export declare type ItemType = 'text' | 'header' | 'divider';
 interface CommonItem extends DataItem {
     /**

package/lib/item/index.d.ts

@@ -1,8 +1,8 @@
 import { JSXInterface } from '../jsx';
-import { ControlElement, CSSResult, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
-import '../icon';
-import '../checkbox';
-import { ItemType } from './helpers/types';
+import { ControlElement, CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
+import type { ItemType } from './helpers/types';
+import '../icon/index.js';
+import '../checkbox/index.js';
 export * from './helpers/types';
 /**
  * Used as a basic building block to compose complex custom elements,
@@ -10,7 +10,7 @@ export * from './helpers/types';
  * to create simple menus or navigation panels.
  *
  * @attr {string} value - The content of this attribute represents the value of the item.
- * @prop {string} [value=] - The content of this attribute represents the value of the item.
+ * @prop {string} [value=""] - The content of this attribute represents the value of the item.
  *
  * @attr {boolean} disabled - Set disabled state.
  * @prop {boolean} [disabled=false] - Set disabled state.
@@ -25,10 +25,11 @@ export declare class Item extends ControlElement {
      */
     static get version(): string;
     /**
-     * @returns `CSSResult` that will be used to style the host,
+     * `CSSResultGroup` that will be used to style the host,
      * slotted children and the internal template of the element.
+     * @returns CSS template
      */
-    static get styles(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     /**
      * The text for the label indicating the meaning of the item.
      * By having both `label` and content, `label` always takes priority
@@ -43,10 +44,19 @@ export declare class Item extends ControlElement {
      * Set the icon name from the ef-icon list
      */
     icon: string | null;
+    private _selected;
     /**
      * Indicates that the item is selected
+     * @param value selected value
+     * @default false
      */
-    selected: boolean;
+    set selected(value: boolean);
+    get selected(): boolean;
+    /**
+     * Aria indicating current select state
+     * @ignore
+     */
+    ariaSelected: string;
     /**
      * Is the item part of a multiple selection
      */

package/lib/item/index.js

@@ -1,13 +1,11 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { ControlElement, css, customElement, html, property, query } from '@refinitiv-ui/core';
-import '../icon';
-import '../checkbox';
-import { VERSION } from '../';
+import { __decorate } from "tslib";
+import { ControlElement, css, html } 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 { VERSION } from '../version.js';
+import '../icon/index.js';
+import '../checkbox/index.js';
 export * from './helpers/types';
 const isAllWhitespaceTextNode = (node) => {
     var _a;
@@ -20,7 +18,7 @@ const isAllWhitespaceTextNode = (node) => {
  * to create simple menus or navigation panels.
  *
  * @attr {string} value - The content of this attribute represents the value of the item.
- * @prop {string} [value=] - The content of this attribute represents the value of the item.
+ * @prop {string} [value=""] - The content of this attribute represents the value of the item.
  *
  * @attr {boolean} disabled - Set disabled state.
  * @prop {boolean} [disabled=false] - Set disabled state.
@@ -45,10 +43,12 @@ let Item = class Item extends ControlElement {
          * Set the icon name from the ef-icon list
          */
         this.icon = null;
+        this._selected = false;
         /**
-         * Indicates that the item is selected
+         * Aria indicating current select state
+         * @ignore
          */
-        this.selected = false;
+        this.ariaSelected = 'false';
         /**
          * Is the item part of a multiple selection
          */
@@ -77,7 +77,7 @@ let Item = class Item extends ControlElement {
         this.checkSlotChildren = (event) => {
             const slot = event.target;
             this.isSlotEmpty = !slot.assignedNodes().filter(node => !this.isIgnorable(node)).length;
-            void this.requestUpdate();
+            this.requestUpdate();
         };
     }
     /**
@@ -88,8 +88,9 @@ let Item = class Item extends ControlElement {
         return VERSION;
     }
     /**
-     * @returns `CSSResult` that will be used to style the host,
+     * `CSSResultGroup` that will be used to style the host,
      * slotted children and the internal template of the element.
+     * @returns CSS template
      */
     static get styles() {
         return css `
@@ -113,6 +114,22 @@ let Item = class Item extends ControlElement {
       }
     `;
     }
+    /**
+     * Indicates that the item is selected
+     * @param value selected value
+     * @default false
+     */
+    set selected(value) {
+        const oldValue = this._selected;
+        if (oldValue !== value) {
+            this._selected = value;
+            this.ariaSelected = String(value);
+            void this.requestUpdate('selected', oldValue);
+        }
+    }
+    get selected() {
+        return this._selected;
+    }
     /**
      * @param node that should be checked
      * @returns whether node can be ignored.
@@ -228,7 +245,10 @@ __decorate([
 ], Item.prototype, "icon", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], Item.prototype, "selected", void 0);
+], Item.prototype, "selected", null);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'aria-selected' })
+], Item.prototype, "ariaSelected", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], Item.prototype, "multiple", void 0);

package/lib/label/custom-elements.md

@@ -0,0 +1,11 @@
+# ef-label
+
+Displays a text with alternative truncation
+
+## Properties
+
+| Property    | Attribute    | Type      | Default | Description                                 |
+|-------------|--------------|-----------|---------|---------------------------------------------|
+| `error`     | `error`      | `boolean` | false   | Set state to error                          |
+| `lineClamp` | `line-clamp` | `number`  | 0       | Limit the number of lines before truncating |
+| `warning`   | `warning`    | `boolean` | false   | Set state to warning                        |

package/lib/label/index.d.ts

@@ -1,5 +1,5 @@
 import { JSXInterface } from '../jsx';
-import { BasicElement, TemplateResult, CSSResult } from '@refinitiv-ui/core';
+import { BasicElement, TemplateResult, CSSResultGroup } from '@refinitiv-ui/core';
 /**
  * Displays a text with alternative truncation
  */
@@ -10,12 +10,12 @@ export declare class Label extends BasicElement {
      */
     static get version(): string;
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @returns CSS template
      */
-    static get styles(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     /**
      * Limit the number of lines before truncating
      */

package/lib/label/index.js

@@ -1,12 +1,11 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { BasicElement, html, css, customElement, property, styleMap } from '@refinitiv-ui/core';
-import { VERSION } from '../';
-import { addTooltipCondition, removeTooltipCondition } from '../tooltip';
+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 { styleMap } from '@refinitiv-ui/core/lib/directives/style-map.js';
+import { VERSION } from '../version.js';
+import { isIE } from '@refinitiv-ui/utils/lib/browser.js';
+import { addTooltipCondition, removeTooltipCondition } from '../tooltip/index.js';
 /**
  * Configuration object
  * for mutations observers
@@ -20,16 +19,11 @@ const observerOptions = {
  * Reusable SPACE
  */
 const _ = ' ';
-/**
- * Helper to check if the browser is IE
- * @returns True if the browser is IE
- */
-const isIE = () => !!navigator.userAgent.match(/Trident/g) || !!navigator.userAgent.match(/MSIE/g);
 /**
  * Determines if the browser is legacy or modern.
  */
 /* istanbul ignore next */
-const browserType = isIE() ? 'legacy' : 'modern';
+const browserType = isIE ? 'legacy' : 'modern';
 /**
  * Displays a text with alternative truncation
  */
@@ -76,7 +70,7 @@ let Label = class Label extends BasicElement {
         return VERSION;
     }
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @returns CSS template
@@ -130,7 +124,7 @@ let Label = class Label extends BasicElement {
         super.connectedCallback();
         addTooltipCondition(this.tooltipCondition, this.tooltipRenderer);
         this.mutationObserver.observe(this, observerOptions);
-        !isIE() && this.recalculate(); // In IE the mutation will trigger
+        !isIE && this.recalculate(); // In IE the mutation will trigger
     }
     /**
      * @override
@@ -165,7 +159,7 @@ let Label = class Label extends BasicElement {
         this.chunks = raw.split(_).map(chunk => chunk.trim()).filter(chunk => chunk);
         const newValue = this.text;
         if (oldValue !== newValue) {
-            void this.requestUpdate('text', oldValue);
+            this.requestUpdate('text', oldValue);
         }
     }
     /**
@@ -204,8 +198,6 @@ let Label = class Label extends BasicElement {
      */
     get clampTemplate() {
         const styles = {
-            maxHeight: '',
-            whiteSpace: '',
             lineClamp: `${this.lineClamp}`,
             '-webkit-line-clamp': `${this.lineClamp}`
         };

package/lib/layout/custom-elements.md

@@ -0,0 +1,26 @@
+# ef-layout
+
+Layout component for creating responsive applications and components
+
+## Properties
+
+| Property     | Attribute    | Type             | Default | Description                                      |
+|--------------|--------------|------------------|---------|--------------------------------------------------|
+| `basis`      | `basis`      | `string \| null` | null    | Sets the rough size of the element based on other siblings and content.<br />Value could be pixel, percents or auto. |
+| `container`  | `container`  | `boolean`        | false   | Tells the element to display as a container,<br />displaying children in a vertical nowrap layout. |
+| `debug`      | `debug`      | `boolean`        | false   | Displays debug lines.                            |
+| `flex`       | `flex`       | `boolean`        | false   | Tells the element to display flex,<br />displaying children in a row wrap layout. |
+| `maxHeight`  | `max-height` | `string \| null` | null    | Prevents the height from expanding past a certain point.<br />Value could be pixel, percents or _empty_. |
+| `maxWidth`   | `max-width`  | `string \| null` | null    | Prevents the width from expanding past a certain point.<br />Value could be pixel, percents or _empty_. |
+| `minHeight`  | `min-height` | `string \| null` | null    | Allows the height to shrink below its contents.<br />Also prevents the height from shrinking past a certain point.<br />Value could be pixel, percents or _empty_. |
+| `minWidth`   | `min-width`  | `string \| null` | null    | Allows the width to shrink below its contents.<br />Also prevents the width from shrinking past a certain point.<br />Value could be pixel, percents or _empty_. |
+| `noflex`     | `noflex`     | `boolean`        | false   | Prevents the element from being flexible,<br />when inside of another flex layout. |
+| `nowrap`     | `nowrap`     | `boolean`        | false   | Prevents wrapping flex items,<br />when the parent isn't a container. |
+| `scrollable` | `scrollable` | `boolean`        | false   | Makes the element a scrollable viewport.         |
+| `size`       | `size`       | `string \| null` | null    | Sets the fixed size of the element.<br />Value could be pixel, percents or auto. |
+
+## Events
+
+| Event    | Description                            |
+|----------|----------------------------------------|
+| `resize` | Fired when the element's size changes. |

package/lib/layout/index.d.ts

@@ -1,5 +1,5 @@
 import { JSXInterface } from '../jsx';
-import { ResponsiveElement, TemplateResult, CSSResult, PropertyValues } from '@refinitiv-ui/core';
+import { ResponsiveElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
 /**
  * Layout component for creating responsive applications and components
  * @fires resize - Fired when the element's size changes.
@@ -11,12 +11,12 @@ export declare class Layout extends ResponsiveElement {
      */
     static get version(): string;
     /**
-   * A `CSSResult` that will be used
+   * A `CSSResultGroup` that will be used
    * to style the host, slotted children
    * and the internal template of the element.
    * @return CSS template
    */
-    static get styles(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     /**
      * Displays debug lines.
      * @type {boolean}

package/lib/layout/index.js

@@ -1,11 +1,8 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { ResponsiveElement, html, css, customElement, property } from '@refinitiv-ui/core';
-import { VERSION } from '../';
+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 { VERSION } from '../version.js';
 /**
  * Layout component for creating responsive applications and components
  * @fires resize - Fired when the element's size changes.
@@ -83,7 +80,7 @@ let Layout = class Layout extends ResponsiveElement {
         return VERSION;
     }
     /**
-   * A `CSSResult` that will be used
+   * A `CSSResultGroup` that will be used
    * to style the host, slotted children
    * and the internal template of the element.
    * @return CSS template

package/lib/led-gauge/custom-elements.json

@@ -18,7 +18,7 @@
         {
           "name": "range",
           "description": "Value of range. eg [-20, 70]",
-          "type": "object",
+          "type": "number[]",
           "default": "[]"
         },
         {
@@ -43,7 +43,7 @@
           "name": "neutral-color",
           "description": "Turn off background color and use grey",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "zero",
@@ -69,7 +69,7 @@
           "name": "range",
           "attribute": "range",
           "description": "Value of range. eg [-20, 70]",
-          "type": "object",
+          "type": "number[]",
           "default": "[]"
         },
         {
@@ -98,7 +98,7 @@
           "attribute": "neutral-color",
           "description": "Turn off background color and use grey",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "zero",

package/lib/led-gauge/custom-elements.md

@@ -0,0 +1,17 @@
+# ef-led-gauge
+
+A component used to show data in a LED-like
+horizontal bar visualization.
+
+## Properties
+
+| Property       | Attribute       | Type             | Default  | Description                                      |
+|----------------|-----------------|------------------|----------|--------------------------------------------------|
+| `bottomLabel`  | `bottom-label`  | `string`         | ""       | Label to be displayed in the bottom legend       |
+| `bottomValue`  | `bottom-value`  | `number \| null` | null     | Value of bar for bottom legend position<br />Value can be -100 to 100 |
+| `neutralColor` | `neutral-color` | `boolean`        | false    | Turn off background color and use grey           |
+| `range`        | `range`         | `number[]`       | []       | Value of range. eg [-20, 70]                     |
+| `rangeLabel`   | `range-label`   | `string`         | ""       | Label to be displayed in the bottom legend<br />when a range is displayed<br />and no bottom text is already set. |
+| `topLabel`     | `top-label`     | `string`         | ""       | Label to be displayed in the top legend          |
+| `topValue`     | `top-value`     | `number \| null` | null     | Value of bar for top legend position<br />Value can be -100 to 100 |
+| `zero`         | `zero`          | `string`         | "center" | Sets the zero scale position. [center, left, right] |

package/lib/led-gauge/index.d.ts

@@ -1,6 +1,6 @@
 import { JSXInterface } from '../jsx';
-import { BasicElement, TemplateResult, CSSResult, PropertyValues } from '@refinitiv-ui/core';
-import '../canvas';
+import { BasicElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
+import '../canvas/index.js';
 /**
  * A component used to show data in a LED-like
  * horizontal bar visualization.
@@ -14,12 +14,12 @@ export declare class LedGauge extends BasicElement {
     private _zero;
     constructor();
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template
      */
-    static get styles(): CSSResult;
+    static get styles(): CSSResultGroup;
     /**
      * Value of bar for top legend position
      * Value can be -100 to 100
@@ -32,6 +32,7 @@ export declare class LedGauge extends BasicElement {
     bottomValue: number | null;
     /**
      * Value of range. eg [-20, 70]
+     * @type {number[]}
      */
     range: number[];
     /**