@refinitiv-ui/elements 5.3.4 → 5.8.0

package/lib/sparkline/index.js

@@ -1,22 +1,22 @@
-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 { css, customElement, property, ResponsiveElement, html, query } from '@refinitiv-ui/core';
-import { color } from '@refinitiv-ui/utils';
+import { __decorate } from "tslib";
+import { css, ResponsiveElement, 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 { color } from '@refinitiv-ui/utils/lib/color.js';
 import '@refinitiv-ui/browser-sparkline';
-import { VERSION } from '../';
 let Sparkline = class Sparkline extends ResponsiveElement {
     constructor() {
         super(...arguments);
         /**
          * Chart data as an array of number.
+         * @type {number[]}
          */
         this.data = [];
         /**
          * Chart previous data as an array of number.
+         * @type {number[]}
          */
         this.previousData = [];
         /**
@@ -133,7 +133,7 @@ let Sparkline = class Sparkline extends ResponsiveElement {
         };
     }
     /**
-     * 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/swing-gauge/custom-elements.json

@@ -96,12 +96,14 @@
         },
         {
           "name": "valueFormatter",
-          "description": "Custome value formatter",
+          "description": "Custom value formatter",
+          "type": "SwingGaugeValueFormatter",
           "default": "\"defaultValueFormatter\""
         },
         {
-          "name": "canvasSize",
-          "description": "Getter size of component"
+          "name": "canvasSize (readonly)",
+          "description": "Getter size of component",
+          "type": "SwingGaugeCanvasSize"
         }
       ]
     }

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

@@ -0,0 +1,17 @@
+# ef-swing-gauge
+
+Data visualisation showing the percentage between two values
+
+## Properties
+
+| Property                | Attribute          | Type                       | Default                 | Description                        |
+|-------------------------|--------------------|----------------------------|-------------------------|------------------------------------|
+| `canvasSize (readonly)` |                    | `SwingGaugeCanvasSize`     |                         | Getter size of component           |
+| `duration`              | `duration`         | `number`                   | 1000                    | Animation duration in milliseconds |
+| `primaryLabel`          | `primary-label`    | `string`                   | ""                      | Primary label                      |
+| `primaryLegend`         | `primary-legend`   | `string`                   | ""                      | Primary value legend               |
+| `primaryValue`          | `primary-value`    | `number`                   |                         | Primary value                      |
+| `secondaryLabel`        | `secondary-label`  | `string`                   | ""                      | Secondary label                    |
+| `secondaryLegend`       | `secondary-legend` | `string`                   | ""                      | Secondary value legend             |
+| `secondaryValue`        | `secondary-value`  | `number`                   |                         | Secondary value                    |
+| `valueFormatter`        |                    | `SwingGaugeValueFormatter` | "defaultValueFormatter" | Custom value formatter             |

package/lib/swing-gauge/helpers.d.ts

@@ -1,4 +1,4 @@
-import { SwingGaugeCanvasSize, SwingGaugeData, SwingGaugeStyle } from './types';
+import type { SwingGaugeCanvasSize, SwingGaugeData, SwingGaugeStyle } from './types';
 declare const helpers: {
     draw: (drawData: SwingGaugeData, drawCtx: CanvasRenderingContext2D, drawParams: SwingGaugeStyle) => void;
     clear: (canvasSize: SwingGaugeCanvasSize, drawCtx: CanvasRenderingContext2D) => void;

package/lib/swing-gauge/helpers.js

@@ -1,4 +1,4 @@
-import { CenterLineStyle, DefaultStyle } from './const';
+import { CenterLineStyle, DefaultStyle } from './const.js';
 let ctx;
 let data;
 let style;

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

@@ -1,8 +1,8 @@
 import { JSXInterface } from '../jsx';
-import { ResponsiveElement, CSSResult, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
-import '../canvas';
-import '../label';
-import { SwingGaugeCanvasSize, SwingGaugeValueFormatter } from './types';
+import { ResponsiveElement, CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
+import '../canvas/index.js';
+import '../label/index.js';
+import type { SwingGaugeCanvasSize, SwingGaugeValueFormatter } from './types';
 export { SwingGaugeValueFormatter };
 /**
  * Data visualisation showing the percentage between two values
@@ -14,12 +14,12 @@ export declare class SwingGauge 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;
+    static get styles(): CSSResultGroup;
     private _primaryValue;
     /**
      * Primary value
@@ -55,7 +55,8 @@ export declare class SwingGauge extends ResponsiveElement {
     */
     secondaryLegend: string;
     /**
-     * Custome value formatter
+     * Custom value formatter
+     * @type {SwingGaugeValueFormatter}
      */
     valueFormatter: SwingGaugeValueFormatter;
     /**
@@ -149,6 +150,7 @@ export declare class SwingGauge extends ResponsiveElement {
     private canvas;
     /**
      * Getter size of component
+     * @type {SwingGaugeCanvasSize}
      * @returns return size of canvas
      */
     get canvasSize(): SwingGaugeCanvasSize;

package/lib/swing-gauge/index.js

@@ -1,14 +1,14 @@
-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, css, customElement, property, html, styleMap, query, state, WarningNotice } from '@refinitiv-ui/core';
-import { VERSION } from '../';
-import '../canvas';
-import '../label';
-import { helpers as canvasHelper } from './helpers';
+import { __decorate } from "tslib";
+import { ResponsiveElement, css, html, 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 { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { state } from '@refinitiv-ui/core/lib/decorators/state.js';
+import { styleMap } from '@refinitiv-ui/core/lib/directives/style-map.js';
+import { VERSION } from '../version.js';
+import '../canvas/index.js';
+import '../label/index.js';
+import { helpers as canvasHelper } from './helpers.js';
 import { DefaultStyle, Segment, TextType } from './const.js';
 /**
  * Constants from swing-gauge default specs
@@ -61,7 +61,8 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
         */
         this.secondaryLegend = '';
         /**
-         * Custome value formatter
+         * Custom value formatter
+         * @type {SwingGaugeValueFormatter}
          */
         this.valueFormatter = this.defaultValueFormatter;
         /**
@@ -127,7 +128,7 @@ let SwingGauge = class SwingGauge 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
@@ -192,7 +193,7 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
         const oldValue = this._primaryValue;
         if (oldValue !== value) {
             this._primaryValue = value;
-            void this.requestUpdate('primaryValue', oldValue);
+            this.requestUpdate('primaryValue', oldValue);
         }
     }
     get primaryValue() {
@@ -207,7 +208,7 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
         const oldValue = this._secondaryValue;
         if (oldValue !== value) {
             this._secondaryValue = value;
-            void this.requestUpdate('secondaryValue', oldValue);
+            this.requestUpdate('secondaryValue', oldValue);
         }
     }
     get secondaryValue() {
@@ -242,6 +243,7 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
     }
     /**
      * Getter size of component
+     * @type {SwingGaugeCanvasSize}
      * @returns return size of canvas
      */
     get canvasSize() {

package/lib/tab/custom-elements.json

@@ -51,7 +51,7 @@
           "name": "disabled",
           "description": "Set disabled state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "properties": [
@@ -109,7 +109,7 @@
           "attribute": "disabled",
           "description": "Set disabled state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "events": [

package/lib/tab/custom-elements.md

@@ -0,0 +1,22 @@
+# ef-tab
+
+A building block for individual tab
+
+## Properties
+
+| Property        | Attribute         | Type      | Default | Description                                 |
+|-----------------|-------------------|-----------|---------|---------------------------------------------|
+| `active`        | `active`          | `boolean` | false   | Specify tab's active status                 |
+| `clears`        | `clears`          | `boolean` | false   | Set tab to clearable                        |
+| `clearsOnHover` | `clears-on-hover` | `boolean` | false   | Set tab to clearable on hover               |
+| `disabled`      | `disabled`        | `boolean` | false   | Set disabled state                          |
+| `icon`          | `icon`            | `string`  | ""      | Specify icon name to display in tab         |
+| `label`         | `label`           | `string`  | ""      | Specify tab's label text                    |
+| `lineClamp`     | `line-clamp`      | `number`  | 1       | Limit the number of lines before truncating |
+| `subLabel`      | `sub-label`       | `string`  | ""      | Specify tab's sub-label text                |
+
+## Events
+
+| Event   | Description                                  |
+|---------|----------------------------------------------|
+| `clear` | Dispatched when click on cross button occurs |

package/lib/tab/index.d.ts

@@ -1,7 +1,7 @@
 import { JSXInterface } from '../jsx';
-import { TemplateResult, CSSResult, ControlElement } from '@refinitiv-ui/core';
-import '../icon';
-import '../label';
+import { TemplateResult, CSSResultGroup, ControlElement } from '@refinitiv-ui/core';
+import '../icon/index.js';
+import '../label/index.js';
 /**
  * A building block for individual tab
  * @attr {boolean} disabled - Set disabled state
@@ -74,12 +74,12 @@ export declare class Tab extends ControlElement {
      */
     private handleClickClear;
     /**
-     * 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;
     /**
      * Show Close Button if allow clears
      * @returns close button template

package/lib/tab/index.js

@@ -1,13 +1,10 @@
-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 { html, css, customElement, property, ControlElement } from '@refinitiv-ui/core';
-import { VERSION } from '../';
-import '../icon';
-import '../label';
+import { __decorate } from "tslib";
+import { html, css, ControlElement } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { VERSION } from '../version.js';
+import '../icon/index.js';
+import '../label/index.js';
 const isAllWhitespaceTextNode = (node) => {
     var _a;
     return node.nodeType === document.TEXT_NODE
@@ -68,7 +65,7 @@ let Tab = class Tab extends ControlElement {
         this.checkSlotChildren = (event) => {
             const slot = event.target;
             this.isSlotHasChildren = !slot.assignedNodes().filter(node => !this.isIgnorable(node)).length;
-            void this.requestUpdate();
+            this.requestUpdate();
         };
     }
     /**
@@ -105,7 +102,7 @@ let Tab = class Tab extends ControlElement {
         this.dispatchEvent(new CustomEvent('clear'));
     }
     /**
-     * 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

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

@@ -1,4 +1,4 @@
 import '@refinitiv-ui/elements/lib/icon/themes/solar/charcoal';
 import '@refinitiv-ui/elements/lib/label/themes/solar/charcoal';
 
-elf.customStyles.define('ef-tab', ':host{cursor:pointer;background-color:#bec3cc;color:#fff;height:23px;padding:7px 15px;outline:0;font-size:13rem;font-weight:500;transition:70ms;position:relative;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;align-items:center;justify-content:center;touch-action:manipulation}:host [part=icon]{min-width:1em;font-size:1.5em}:host [part=label-container]{display:flex;align-items:flex-start;flex-direction:column;width:100%;min-width:0}:host(:not([sub-label])) [part=label-container]{align-items:center}:host([icon]) [part=label-container]{padding-left:.3em}:host [part=sub-label]{font-weight:400;font-size:.875em}:host(:not([active]):not(:active):not(:hover)) [part=sub-label]{opacity:.7}:host([sub-label]){height:33px}:host([sub-label]) [part=icon]{font-size:1.8em}:host([sub-label]) [part=close]{font-size:1.25em}:host([sub-label][clears]){padding-right:2.5em}:host([line-clamp="2"]),:host([line-clamp="3"]){height:33px}:host([icon][sub-label]) [part=label-container]{padding-left:.5em}:host([clears]){padding-right:2em}:host [part=close-container]{position:absolute;top:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center}:host [part=close]{margin-right:.5em;min-width:1em;font-size:1em}:host([clears-on-hover]) [part=close]{color:#fff}:host([clears-on-hover]) [part=close-container]{width:2em;opacity:0;transition:70ms;background:#c3c7d0;box-shadow:-1em 0 .75em -.5em #c3c7d0}:host([active]){color:#fff;background-color:#e01865}:host([active]:hover){background-color:#e32970}:host([active]:hover[clears-on-hover]) [part=close-container]{background-color:#e32970;box-shadow:-1em 0 .75em -.5em #e32970}:host([active]:active){background-color:#d1175f}:host([active]:active[clears-on-hover]) [part=close-container]{background-color:#d1175f;box-shadow:-1em 0 .75em -.5em #d1175f}:host([active][disabled]){color:#f3a3c2;background-color:#e74784}:host([disabled]){pointer-events:none;color:#e5e7eb;background-color:#cbcfd6}:host(:focus:not([focused])),:host([focused=visible]){box-shadow:0 0 0 2px rgba(0,0,0,.9);background-color:#e32970}:host(:focus:not([focused]):not([active]):not(:hover)),:host([focused=visible]:not([active]):not(:hover)){color:#fff;background-color:#bec3cc}:host(:hover){color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.9);background-color:#c3c7d0}:host(:hover[clears-on-hover]) [part=close-container]{opacity:1}:host(:active){color:#fff;background-color:#b1b5be}:host(:active[clears-on-hover]) [part=close-container]{background-color:#b1b5be;box-shadow:-1em 0 .75em -.5em #b1b5be}');
+elf.customStyles.define('ef-tab', ':host{cursor:pointer;background-color:#3c3c42;color:#c2c2c2;height:23px;padding:7px 15px;outline:0;font-size:13rem;font-weight:500;transition:70ms;position:relative;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;align-items:center;justify-content:center;touch-action:manipulation;border:1px solid #000;border-left:none}:host [part=label-container]{display:flex;align-items:flex-start;flex-direction:column;width:100%;min-width:0}:host(:not([sub-label])) [part=label-container]{align-items:center}:host([icon]) [part=label-container]{padding-left:.3em}:host [part=sub-label]{font-weight:400;font-size:.875em}:host(:not([active]):not(:active):not(:hover)) [part=sub-label]{opacity:.7}:host([sub-label]){height:33px}:host([sub-label]) [part=close]{font-size:1.25em}:host([sub-label][clears]){padding-right:2.5em}:host([line-clamp="2"]),:host([line-clamp="3"]){height:33px}:host([icon][sub-label]) [part=label-container]{padding-left:.5em}:host([clears]){padding-right:2em}:host [part=close-container]{position:absolute;top:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center}:host [part=close]{margin-right:.5em;min-width:1em;font-size:1em}:host([clears-on-hover]) [part=close]{color:#e2e2e2}:host([clears-on-hover]) [part=close-container]{width:2em;opacity:0;transition:70ms;background:#4a4a4f;box-shadow:-1em 0 .75em -.5em #4a4a4f}:host([active]){color:#0a0a0a;background-color:#f93}:host([active]:hover[clears-on-hover]) [part=close-container]{background-color:#ffa041;box-shadow:-1em 0 .75em -.5em #ffa041}:host([active]:active){background-color:#ed8e2f}:host([active]:active[clears-on-hover]) [part=close-container]{background-color:#ed8e2f;box-shadow:-1em 0 .75em -.5em #ed8e2f}:host([active][disabled]){background-color:#ffad5c;color:rgba(10,10,10,.7)}:host([disabled]){pointer-events:none;color:#c2c2c2;background-color:#636368}:host(:focus:not([focused])),:host([focused=visible]){box-shadow:none;background-color:#ffa041}:host(:focus:not([focused]):not([active]):not(:hover)),:host([focused=visible]:not([active]):not(:hover)){color:#e2e2e2;background-color:#3c3c42}:host(:hover){color:#e2e2e2;box-shadow:0 0 0 0 rgba(0,0,0,.9);background-color:#4a4a4f}:host(:hover[clears-on-hover]) [part=close-container]{opacity:1}:host(:active){color:#c2c2c2;background-color:#38383d}:host(:active[clears-on-hover]) [part=close-container]{background-color:#38383d;box-shadow:-1em 0 .75em -.5em #38383d}:host [part=icon]{min-width:1em;font-size:1em}:host([sub-label]) [part=icon]{font-size:1.2em}:host([active]:hover){color:#0a0a0a;background-color:#ffb366}');

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

@@ -1,4 +1,4 @@
 import '@refinitiv-ui/elements/lib/icon/themes/solar/pearl';
 import '@refinitiv-ui/elements/lib/label/themes/solar/pearl';
 
-elf.customStyles.define('ef-tab', ':host{cursor:pointer;background-color:#bec3cc;color:#fff;height:23px;padding:7px 15px;outline:0;font-size:13rem;font-weight:500;transition:70ms;position:relative;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;align-items:center;justify-content:center;touch-action:manipulation}:host [part=icon]{min-width:1em;font-size:1.5em}:host [part=label-container]{display:flex;align-items:flex-start;flex-direction:column;width:100%;min-width:0}:host(:not([sub-label])) [part=label-container]{align-items:center}:host([icon]) [part=label-container]{padding-left:.3em}:host [part=sub-label]{font-weight:400;font-size:.875em}:host(:not([active]):not(:active):not(:hover)) [part=sub-label]{opacity:.7}:host([sub-label]){height:33px}:host([sub-label]) [part=icon]{font-size:1.8em}:host([sub-label]) [part=close]{font-size:1.25em}:host([sub-label][clears]){padding-right:2.5em}:host([line-clamp="2"]),:host([line-clamp="3"]){height:33px}:host([icon][sub-label]) [part=label-container]{padding-left:.5em}:host([clears]){padding-right:2em}:host [part=close-container]{position:absolute;top:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center}:host [part=close]{margin-right:.5em;min-width:1em;font-size:1em}:host([clears-on-hover]) [part=close]{color:#fff}:host([clears-on-hover]) [part=close-container]{width:2em;opacity:0;transition:70ms;background:#c3c7d0;box-shadow:-1em 0 .75em -.5em #c3c7d0}:host([active]){color:#fff;background-color:#e01865}:host([active]:hover){background-color:#e32970}:host([active]:hover[clears-on-hover]) [part=close-container]{background-color:#e32970;box-shadow:-1em 0 .75em -.5em #e32970}:host([active]:active){background-color:#d1175f}:host([active]:active[clears-on-hover]) [part=close-container]{background-color:#d1175f;box-shadow:-1em 0 .75em -.5em #d1175f}:host([active][disabled]){color:#f3a3c2;background-color:#e74784}:host([disabled]){pointer-events:none;color:#e5e7eb;background-color:#cbcfd6}:host(:focus:not([focused])),:host([focused=visible]){box-shadow:0 0 0 2px rgba(0,0,0,.6);background-color:#e32970}:host(:focus:not([focused]):not([active]):not(:hover)),:host([focused=visible]:not([active]):not(:hover)){color:#fff;background-color:#bec3cc}:host(:hover){color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.6);background-color:#c3c7d0}:host(:hover[clears-on-hover]) [part=close-container]{opacity:1}:host(:active){color:#fff;background-color:#b1b5be}:host(:active[clears-on-hover]) [part=close-container]{background-color:#b1b5be;box-shadow:-1em 0 .75em -.5em #b1b5be}');
+elf.customStyles.define('ef-tab', ':host{cursor:pointer;background-color:#fafbfc;color:#505050;height:23px;padding:7px 15px;outline:0;font-size:13rem;font-weight:500;transition:70ms;position:relative;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;align-items:center;justify-content:center;touch-action:manipulation;border:1px solid #a9afba;border-left:none}:host [part=label-container]{display:flex;align-items:flex-start;flex-direction:column;width:100%;min-width:0}:host(:not([sub-label])) [part=label-container]{align-items:center}:host([icon]) [part=label-container]{padding-left:.3em}:host [part=sub-label]{font-weight:400;font-size:.875em}:host(:not([active]):not(:active):not(:hover)) [part=sub-label]{opacity:.7}:host([sub-label]){height:33px}:host([sub-label]) [part=close]{font-size:1.25em}:host([sub-label][clears]){padding-right:2.5em}:host([line-clamp="2"]),:host([line-clamp="3"]){height:33px}:host([icon][sub-label]) [part=label-container]{padding-left:.5em}:host([clears]){padding-right:2em}:host [part=close-container]{position:absolute;top:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center}:host [part=close]{margin-right:.5em;min-width:1em;font-size:1em}:host([clears-on-hover]) [part=close]{color:#1d1d1d}:host([clears-on-hover]) [part=close-container]{width:2em;opacity:0;transition:70ms;background:#fafbfc;box-shadow:-1em 0 .75em -.5em #fafbfc}:host([active]){color:#505050;background-color:#ffb266}:host([active]:hover[clears-on-hover]) [part=close-container]{background-color:#ffb771;box-shadow:-1em 0 .75em -.5em #ffb771}:host([active]:active){background-color:#eda65f}:host([active]:active[clears-on-hover]) [part=close-container]{background-color:#eda65f;box-shadow:-1em 0 .75em -.5em #eda65f}:host([active][disabled]){color:#a8896a;background-color:#ffc185}:host([disabled]){pointer-events:none;color:#505050;background-color:#fbfcfd}:host(:focus:not([focused])),:host([focused=visible]){box-shadow:none;background-color:#ffb771}:host(:focus:not([focused]):not([active]):not(:hover)),:host([focused=visible]:not([active]):not(:hover)){color:#1d1d1d;background-color:#fafbfc}:host(:hover){color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.6);background-color:#fafbfc}:host(:hover[clears-on-hover]) [part=close-container]{opacity:1}:host(:active){color:#505050;background-color:#e8e9ea}:host(:active[clears-on-hover]) [part=close-container]{background-color:#e8e9ea;box-shadow:-1em 0 .75em -.5em #e8e9ea}:host [part=icon]{min-width:1em;font-size:1em}:host([sub-label]) [part=icon]{font-size:1.2em}:host([active]:hover){color:#505050;background-color:#fc9}');

package/lib/tab-bar/custom-elements.md

@@ -0,0 +1,11 @@
+# ef-tab-bar
+
+Container for tabs
+
+## Properties
+
+| Property    | Attribute   | Type                            | Default | Description                                      |
+|-------------|-------------|---------------------------------|---------|--------------------------------------------------|
+| `alignment` | `alignment` | `"left" \| "center" \| "right"` | "left"  | Specify tab's horizontal alignment               |
+| `level`     | `level`     | `"1" \| "2" \| "3"`             | "1"     | Use level styling from theme                     |
+| `vertical`  | `vertical`  | `boolean`                       | false   | Use to switch from horizontal to vertical layout. |

package/lib/tab-bar/index.d.ts

@@ -1,6 +1,6 @@
 import { JSXInterface } from '../jsx';
-import { TemplateResult, CSSResult, PropertyValues, ResponsiveElement, ElementSize } from '@refinitiv-ui/core';
-import '../button';
+import { TemplateResult, CSSResultGroup, PropertyValues, ResponsiveElement, ElementSize } from '@refinitiv-ui/core';
+import '../button/index.js';
 /**
  * Container for tabs
  */
@@ -11,12 +11,12 @@ export declare class TabBar 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.
      * @returns CSS template
      */
-    static get styles(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     /**
      * Specify tab's horizontal alignment
      */

package/lib/tab-bar/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 { html, css, customElement, property, query, ResponsiveElement } from '@refinitiv-ui/core';
-import { tweenAnimate } from './helpers/animate';
-import '../button';
-import { VERSION } from '../';
+import { __decorate } from "tslib";
+import { html, css, ResponsiveElement } 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 { tweenAnimate } from './helpers/animate.js';
+import '../button/index.js';
 const BAR_TRAVEL_DISTANCE = 150; // scroll distance
 /**
  * Container for tabs
@@ -36,7 +34,7 @@ let TabBar = class TabBar 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.
      * @returns CSS template

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

@@ -1,4 +1,4 @@
 import '@refinitiv-ui/elements/lib/tab/themes/solar/charcoal';
 import '@refinitiv-ui/elements/lib/button/themes/solar/charcoal';
 
-elf.customStyles.define('ef-tab-bar', ':host{position:relative;background-color:#151516}:host [part=content]{display:flex;overflow:hidden}:host [part=left-btn],:host [part=right-btn]{display:none;position:absolute;height:auto;margin:auto;z-index:2;top:0;bottom:0;background-color:#bec3cc}:host [part=left-btn]:hover,:host [part=right-btn]:hover{background-color:#c3c7d0}:host [part=left-btn]:active,:host [part=right-btn]:active{background-color:#b1b5be}:host [part=left-btn]:focus:not([focused]),:host [part=left-btn][focused=visible],:host [part=right-btn]:focus:not([focused]),:host [part=right-btn][focused=visible]{background-color:#e32970}:host [part=left-btn]:focus:not([focused]):not([active]):not(:hover),:host [part=left-btn][focused=visible]:not([active]):not(:hover),:host [part=right-btn]:focus:not([focused]):not([active]):not(:hover),:host [part=right-btn][focused=visible]:not([active]):not(:hover){color:#fff;background-color:#bec3cc}:host [part=left-btn]{left:0}:host [part=right-btn]{right:0}:host([vertical]){width:180px;flex-shrink:0}:host([vertical]) [part=content]{flex-direction:column}:host([vertical]) [part=content] ::slotted(ef-tab){justify-content:flex-start;border-bottom:1px solid #4a4a52}');
+elf.customStyles.define('ef-tab-bar', ':host{position:relative;background-color:#151516}:host [part=content]{display:flex;overflow:hidden}:host [part=left-btn],:host [part=right-btn]{display:none;position:absolute;height:auto;margin:auto;z-index:2;top:0;bottom:0;background-color:#3c3c42}:host [part=left-btn]:hover,:host [part=right-btn]:hover{background-color:#4a4a4f}:host [part=left-btn]:active,:host [part=right-btn]:active{background-color:#38383d}:host [part=left-btn]:focus:not([focused]),:host [part=left-btn][focused=visible],:host [part=right-btn]:focus:not([focused]),:host [part=right-btn][focused=visible]{background-color:#ffa041}:host [part=left-btn]:focus:not([focused]):not([active]):not(:hover),:host [part=left-btn][focused=visible]:not([active]):not(:hover),:host [part=right-btn]:focus:not([focused]):not([active]):not(:hover),:host [part=right-btn][focused=visible]:not([active]):not(:hover){color:#e2e2e2;background-color:#3c3c42}:host [part=left-btn]{left:0}:host [part=right-btn]{right:0}:host([vertical]){width:180px;flex-shrink:0}:host([vertical]) [part=content]{flex-direction:column}:host([vertical]) [part=content] ::slotted(ef-tab){justify-content:flex-start;border:none;border-bottom:1px solid #000}:host(:not([vertical])) [part=content] ::slotted(ef-tab:first-of-type){border-left:1px solid #000}');

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

@@ -1,4 +1,4 @@
 import '@refinitiv-ui/elements/lib/tab/themes/solar/pearl';
 import '@refinitiv-ui/elements/lib/button/themes/solar/pearl';
 
-elf.customStyles.define('ef-tab-bar', ':host{position:relative;background-color:#c2c2c2}:host [part=content]{display:flex;overflow:hidden}:host [part=left-btn],:host [part=right-btn]{display:none;position:absolute;height:auto;margin:auto;z-index:2;top:0;bottom:0;background-color:#bec3cc}:host [part=left-btn]:hover,:host [part=right-btn]:hover{background-color:#c3c7d0}:host [part=left-btn]:active,:host [part=right-btn]:active{background-color:#b1b5be}:host [part=left-btn]:focus:not([focused]),:host [part=left-btn][focused=visible],:host [part=right-btn]:focus:not([focused]),:host [part=right-btn][focused=visible]{background-color:#e32970}:host [part=left-btn]:focus:not([focused]):not([active]):not(:hover),:host [part=left-btn][focused=visible]:not([active]):not(:hover),:host [part=right-btn]:focus:not([focused]):not([active]):not(:hover),:host [part=right-btn][focused=visible]:not([active]):not(:hover){color:#fff;background-color:#bec3cc}:host [part=left-btn]{left:0}:host [part=right-btn]{right:0}:host([vertical]){width:180px;flex-shrink:0}:host([vertical]) [part=content]{flex-direction:column}:host([vertical]) [part=content] ::slotted(ef-tab){justify-content:flex-start;border-bottom:1px solid #a9afba}');
+elf.customStyles.define('ef-tab-bar', ':host{position:relative;background-color:#c2c2c2}:host [part=content]{display:flex;overflow:hidden}:host [part=left-btn],:host [part=right-btn]{display:none;position:absolute;height:auto;margin:auto;z-index:2;top:0;bottom:0;background-color:#fafbfc}:host [part=left-btn]:hover,:host [part=right-btn]:hover{background-color:#fafbfc}:host [part=left-btn]:active,:host [part=right-btn]:active{background-color:#e8e9ea}:host [part=left-btn]:focus:not([focused]),:host [part=left-btn][focused=visible],:host [part=right-btn]:focus:not([focused]),:host [part=right-btn][focused=visible]{background-color:#ffb771}:host [part=left-btn]:focus:not([focused]):not([active]):not(:hover),:host [part=left-btn][focused=visible]:not([active]):not(:hover),:host [part=right-btn]:focus:not([focused]):not([active]):not(:hover),:host [part=right-btn][focused=visible]:not([active]):not(:hover){color:#1d1d1d;background-color:#fafbfc}:host [part=left-btn]{left:0}:host [part=right-btn]{right:0}:host([vertical]){width:180px;flex-shrink:0}:host([vertical]) [part=content]{flex-direction:column}:host([vertical]) [part=content] ::slotted(ef-tab){justify-content:flex-start;border:none;border-bottom:1px solid #a9afba}:host(:not([vertical])) [part=content] ::slotted(ef-tab:first-of-type){border-left:1px solid #a9afba}');