@refinitiv-ui/elements 6.9.0-next.0 → 6.9.0

package/lib/swing-gauge/index.js

@@ -1,15 +1,15 @@
 import { __decorate } from "tslib";
-import { ResponsiveElement, css, html, WarningNotice } from '@refinitiv-ui/core';
+import { ResponsiveElement, WarningNotice, css, 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 { query } from '@refinitiv-ui/core/decorators/query.js';
 import { state } from '@refinitiv-ui/core/decorators/state.js';
 import { styleMap } from '@refinitiv-ui/core/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 { VERSION } from '../version.js';
 import { DefaultStyle, Segment, TextType } from './const.js';
+import { helpers as canvasHelper } from './helpers.js';
 /**
  * Constants from swing-gauge default specs
  */
@@ -53,12 +53,12 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
          */
         this.duration = 1000;
         /**
-        * Primary value legend
-        */
+         * Primary value legend
+         */
         this.primaryLegend = '';
         /**
-        * Secondary value legend
-        */
+         * Secondary value legend
+         */
         this.secondaryLegend = '';
         /**
          * Custom value formatter
@@ -80,28 +80,28 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
         this.primaryLineRadian = PRIMARY_RADIAN;
         this.secondaryLineRadian = SECONDARY_RADIAN;
         /**
-        * Data requires to draw swing gauge
-        */
+         * Data requires to draw swing gauge
+         */
         this.data = null;
         /**
-        * Internal sizes and scales
-        */
+         * Internal sizes and scales
+         */
         this.width = 0;
         this.height = 0;
         this.size = 0;
         this.lineLength = 60;
         this.scale = 1;
         /**
-        * Current fill percentage
-        */
+         * Current fill percentage
+         */
         this.fillPercentage = 0;
         /**
-        * Keeps previous percentage calculation to avoid re-rendering the same value
-        */
+         * Keeps previous percentage calculation to avoid re-rendering the same value
+         */
         this.previousFillPercentage = 0;
         /**
-        * This for keep line number of label for calculate new radius
-        */
+         * This for keep line number of label for calculate new radius
+         */
         this.labelLineNumber = 1;
         /**
          * Style for primary container
@@ -139,46 +139,50 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
         display: block;
         height: 200px;
       }
-      :host [part=container] {
+      :host [part='container'] {
         display: flex;
         flex-direction: column;
         height: 100%;
       }
-      :host [part=canvas-container] {
+      :host [part='canvas-container'] {
         position: relative;
         flex: 1;
       }
-      :host [part=canvas] {
+      :host [part='canvas'] {
         height: 100%;
       }
-      :host [part=primary-legend], [part=secondary-legend] {
+      :host [part='primary-legend'],
+      [part='secondary-legend'] {
         text-align: left;
         display: flex;
       }
-      :host [part=primary-label], [part=primary-value] {
+      :host [part='primary-label'],
+      [part='primary-value'] {
         text-align: left;
       }
-      :host [part=secondary-label], [part=secondary-value] {
+      :host [part='secondary-label'],
+      [part='secondary-value'] {
         text-align: right;
       }
-      :host [part=legend-container-outer] {
+      :host [part='legend-container-outer'] {
         width: 60%;
         margin: 0 auto;
         text-align: center;
       }
-      :host [part=legend-container-inner] {
+      :host [part='legend-container-inner'] {
         max-width: 100%;
         display: inline-block;
       }
-      :host [part=primary-legend-symbol], [part=secondary-legend-symbol] {
+      :host [part='primary-legend-symbol'],
+      [part='secondary-legend-symbol'] {
         display: inline-block;
         flex-shrink: 0;
       }
-      :host [part=primary-container] {
+      :host [part='primary-container'] {
         position: absolute;
         text-align: left;
       }
-      :host [part=secondary-container] {
+      :host [part='secondary-container'] {
         position: absolute;
         text-align: right;
       }
@@ -215,14 +219,14 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
         return this._secondaryValue;
     }
     /**
-    * Get primary percentage
-    */
+     * Get primary percentage
+     */
     get primaryPercentage() {
         return this.getPercentage(this.primaryValue);
     }
     /**
-    * Get secondary percentage
-    */
+     * Get secondary percentage
+     */
     get secondaryPercentage() {
         return this.getPercentage(this.secondaryValue);
     }
@@ -273,8 +277,9 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
      */
     update(changedProperties) {
         super.update(changedProperties);
-        if (changedProperties.has('primaryValue') || changedProperties.has('secondaryValue')
-            || (this.primaryValue === 0 && this.secondaryValue === 0)) {
+        if (changedProperties.has('primaryValue') ||
+            changedProperties.has('secondaryValue') ||
+            (this.primaryValue === 0 && this.secondaryValue === 0)) {
             this.canvas.autoloop = true;
             this.renderCanvas('frame');
             this.animateCanvas();
@@ -285,9 +290,11 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
         if (changedProperties.has('valueFormatter')) {
             this.calculateValueFontSize();
         }
-        if (changedProperties.has('primaryValue') || changedProperties.has('secondaryValue')
-            || changedProperties.has('primaryLabel') || changedProperties.has('secondaryLabel')
-            || changedProperties.has('valueFormatter')) {
+        if (changedProperties.has('primaryValue') ||
+            changedProperties.has('secondaryValue') ||
+            changedProperties.has('primaryLabel') ||
+            changedProperties.has('secondaryLabel') ||
+            changedProperties.has('valueFormatter')) {
             this.updateGaugePositions();
         }
     }
@@ -328,7 +335,8 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
      */
     easeTo(to, from, time) {
         const diff = (this.duration - (time - performance.now())) / this.duration;
-        this.fillPercentage = from + (to - from) * canvasHelper.elasticOut(diff > 1 ? 1 : diff < 0 ? 0 : diff) || 0;
+        this.fillPercentage =
+            from + (to - from) * canvasHelper.elasticOut(diff > 1 ? 1 : diff < 0 ? 0 : diff) || 0;
         if (this.fillPercentage !== to) {
             this.cancelFrame(this.requestedAnimationID);
             this.requestedAnimationID = this.onFrame(() => this.easeTo(to, from, time));
@@ -408,7 +416,7 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
             const reverseScale = 1 - this.scale;
             // increase the offset by 25%, this for buffer to make label have some space from bottom
             this.linePointerOffset = (containerHeight / gaugeHeight) * reverseScale * 1.25;
-            this.primaryLineRadian = PRIMARY_RADIAN + DEFAULT_OFFSET + (OVERFLOW_OFFSET * reverseScale);
+            this.primaryLineRadian = PRIMARY_RADIAN + DEFAULT_OFFSET + OVERFLOW_OFFSET * reverseScale;
             this.secondaryLineRadian = 3 - this.primaryLineRadian;
         }
         const primaryPosLine = this.getPositionStyle(Segment.PRIMARY, this.primaryLineRadian, this.linePointerOffset, 0);
@@ -528,7 +536,7 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
             const offset = DEFAULT_OFFSET * reverseScale;
             this.primaryLineRadian = PRIMARY_RADIAN + offset;
             this.secondaryLineRadian = SECONDARY_RADIAN - offset;
-            this.linePointerOffset = LINE_POINTER_OFFSET + (0.4 * (1 - this.scale));
+            this.linePointerOffset = LINE_POINTER_OFFSET + 0.4 * (1 - this.scale);
         }
         this.primaryLineRadian = this.primaryLineRadian > 1.3 ? 1.3 : this.primaryLineRadian;
         this.secondaryLineRadian = this.primaryLineRadian > 1.7 ? 1.7 : this.secondaryLineRadian;
@@ -558,7 +566,8 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
             minFontSize = MIN_LABEL_FONT_SIZE;
             // buffer for word wrap
             widthScale = 1.1;
-            longerLabel = this.primaryLabel.length > this.secondaryLabel.length ? this.primaryLabel : this.secondaryLabel;
+            longerLabel =
+                this.primaryLabel.length > this.secondaryLabel.length ? this.primaryLabel : this.secondaryLabel;
             fontSize = Math.ceil(this.scale * this.canvas.height * GAUGE_LABEL_FONT_SCALE);
         }
         else {
@@ -596,7 +605,10 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
         if (!this.canvas.ctx) {
             return;
         }
-        this.labelStyle = { maxWidth: `${this.lineLength}px`, fontSize: `${this.calculateFontSize(this.canvas.ctx, TextType.LABEL)}px` };
+        this.labelStyle = {
+            maxWidth: `${this.lineLength}px`,
+            fontSize: `${this.calculateFontSize(this.canvas.ctx, TextType.LABEL)}px`
+        };
     }
     /**
      * Update value font size
@@ -606,7 +618,10 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
         if (!this.canvas.ctx) {
             return;
         }
-        this.valueStyle = { maxWidth: `${this.lineLength}px`, fontSize: `${this.calculateFontSize(this.canvas.ctx, TextType.VALUE)}px` };
+        this.valueStyle = {
+            maxWidth: `${this.lineLength}px`,
+            fontSize: `${this.calculateFontSize(this.canvas.ctx, TextType.VALUE)}px`
+        };
     }
     /**
      * Compute percentage of value
@@ -617,7 +632,7 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
         if (value === 0) {
             return 0;
         }
-        return 100 * value / (this.primaryValue + this.secondaryValue);
+        return (100 * value) / (this.primaryValue + this.secondaryValue);
     }
     /**
      * Handles canvas resize
@@ -636,11 +651,10 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
     get legendTemplate() {
         return this.primaryLegend.length > 0 || this.secondaryLegend.length > 0
             ? html `<div part="legend-container-outer">
-              <div part="legend-container-inner">
-                ${this.primaryLegendTemplate}
-                ${this.secondaryLegendTemplate}
-              </div>
-            </div>`
+          <div part="legend-container-inner">
+            ${this.primaryLegendTemplate} ${this.secondaryLegendTemplate}
+          </div>
+        </div>`
             : null;
     }
     /**
@@ -650,9 +664,11 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
     get primaryLegendTemplate() {
         return this.primaryLegend
             ? html `<div part="primary-legend">
-              <span part="primary-legend-symbol"></span>
-              <ef-label max-line="${MAX_LEGEND_LINE}" line-clamp="${MAX_LEGEND_LINE}">${this.primaryLegend}</ef-label>
-            </div>`
+          <span part="primary-legend-symbol"></span>
+          <ef-label max-line="${MAX_LEGEND_LINE}" line-clamp="${MAX_LEGEND_LINE}"
+            >${this.primaryLegend}</ef-label
+          >
+        </div>`
             : null;
     }
     /**
@@ -662,9 +678,11 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
     get secondaryLegendTemplate() {
         return this.secondaryLegend
             ? html `<div part="secondary-legend">
-              <span part="secondary-legend-symbol"></span>
-              <ef-label max-line="${MAX_LEGEND_LINE}" line-clamp="${MAX_LEGEND_LINE}">${this.secondaryLegend}</ef-label>
-            </div>`
+          <span part="secondary-legend-symbol"></span>
+          <ef-label max-line="${MAX_LEGEND_LINE}" line-clamp="${MAX_LEGEND_LINE}"
+            >${this.secondaryLegend}</ef-label
+          >
+        </div>`
             : null;
     }
     render() {
@@ -674,38 +692,30 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
         <div part="canvas-container">
           <ef-canvas part="canvas" @resize=${this.onCanvasResize}></ef-canvas>
           <div part="primary-container" style=${styleMap(this.primaryContainerStyle)}>
-            ${this.primaryLabel ? html `
-              <ef-label
-                part="primary-label"
-                max-line="${MAX_LABEL_LINE}"
-                line-clamp="${MAX_LABEL_LINE}"
-                style=${styleMap(this.labelStyle)}
-                >${this.primaryLabel}
-              </ef-label><br>`
+            ${this.primaryLabel
+            ? html ` <ef-label
+                    part="primary-label"
+                    max-line="${MAX_LABEL_LINE}"
+                    line-clamp="${MAX_LABEL_LINE}"
+                    style=${styleMap(this.labelStyle)}
+                    >${this.primaryLabel} </ef-label
+                  ><br />`
             : null}
-            <ef-label
-              part="primary-value"
-              truncate=""
-              line-clamp="1"
-              style=${styleMap(this.valueStyle)}
+            <ef-label part="primary-value" truncate="" line-clamp="1" style=${styleMap(this.valueStyle)}
               >${this.valueFormatter(this.primaryPercentage, this.primaryValue)}</ef-label
             >
           </div>
           <div part="secondary-container" style=${styleMap(this.secondaryContainerStyle)}>
-            ${this.secondaryLabel ? html `
-              <ef-label
-                part="secondary-label"
-                max-line="${MAX_LABEL_LINE}"
-                line-clamp="${MAX_LABEL_LINE}"
-                style=${styleMap(this.labelStyle)}
-                >${this.secondaryLabel}
-              </ef-label><br>`
+            ${this.secondaryLabel
+            ? html ` <ef-label
+                    part="secondary-label"
+                    max-line="${MAX_LABEL_LINE}"
+                    line-clamp="${MAX_LABEL_LINE}"
+                    style=${styleMap(this.labelStyle)}
+                    >${this.secondaryLabel} </ef-label
+                  ><br />`
             : null}
-            <ef-label
-              part="secondary-value"
-              truncate=""
-              line-clamp="1"
-              style=${styleMap(this.valueStyle)}
+            <ef-label part="secondary-value" truncate="" line-clamp="1" style=${styleMap(this.valueStyle)}
               >${this.valueFormatter(this.secondaryPercentage, this.secondaryValue)}</ef-label
             >
           </div>

package/lib/swing-gauge/themes/halo/dark/index.js

@@ -1,3 +1,2 @@
 import '@refinitiv-ui/elements/canvas/themes/halo/dark';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-swing-gauge', styles: ':host{--primary-color:#6678FF;--secondary-color:#FFFFFF;--border-color:#000000;--center-line:solid;--center-line-color:#000000;--center-line-opacity:0.6;--secondary-color:#0D0D0D;--center-line-color:#FFFFFF;--border-color:#6678FF;--center-line:dotted}:host [part=legend-container-outer]{padding-bottom:30px}:host [part=primary-legend],:host [part=secondary-legend]{margin-top:4px;align-items:center}:host [part=primary-legend-symbol],:host [part=secondary-legend-symbol]{border-radius:50%;margin-right:10px;align-self:baseline;margin-top:1px;border:1px solid var(--border-color,#6678ff);height:10px;width:10px}:host [part=primary-legend-symbol]{background-color:var(--primary-color)}:host [part=secondary-legend-symbol]{background-color:var(--secondary-color)}:host [part=primary-value],:host [part=secondary-value]{font-weight:500}' }}));

package/lib/swing-gauge/themes/halo/light/index.js

@@ -1,3 +1,2 @@
 import '@refinitiv-ui/elements/canvas/themes/halo/light';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-swing-gauge', styles: ':host{--primary-color:#334BFF;--secondary-color:#0D0D0D;--border-color:#000000;--center-line:solid;--center-line-color:#000000;--center-line-opacity:0.6;--secondary-color:#0D0D0D;--center-line-color:#FFFFFF;--border-color:#334BFF;--center-line:dotted}:host [part=legend-container-outer]{padding-bottom:30px}:host [part=primary-legend],:host [part=secondary-legend]{margin-top:4px;align-items:center}:host [part=primary-legend-symbol],:host [part=secondary-legend-symbol]{border-radius:50%;margin-right:10px;align-self:baseline;margin-top:1px;height:12px;width:12px}:host [part=primary-legend-symbol]{background-color:var(--primary-color)}:host [part=secondary-legend-symbol]{background-color:var(--secondary-color)}:host [part=primary-value],:host [part=secondary-value]{font-weight:500}' }}));

package/lib/swing-gauge/themes/solar/charcoal/index.js

@@ -1,3 +1,2 @@
 import '@refinitiv-ui/elements/canvas/themes/solar/charcoal';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-swing-gauge', styles: ':host{--primary-color:#FF9933;--secondary-color:#3780BF;--border-color:#000000;--center-line:solid;--center-line-color:#000000;--center-line-opacity:0.6;--primary-color:#2EB4C9;--secondary-color:#C93C4B;--border-color:#000000;--center-line:solid;--center-line-color:#000000;--center-line-opacity:0.6}:host [part=legend-container-outer]{padding-bottom:30px}:host [part=primary-legend],:host [part=secondary-legend]{margin-top:4px;align-items:center}:host [part=primary-legend-symbol],:host [part=secondary-legend-symbol]{height:12px;width:12px;border-radius:50%;margin-right:10px;align-self:baseline;margin-top:1px}:host [part=primary-legend-symbol]{background-color:var(--primary-color)}:host [part=secondary-legend-symbol]{background-color:var(--secondary-color)}:host [part=primary-value],:host [part=secondary-value]{font-weight:500}' }}));

package/lib/swing-gauge/themes/solar/pearl/index.js

@@ -1,3 +1,2 @@
 import '@refinitiv-ui/elements/canvas/themes/solar/pearl';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-swing-gauge', styles: ':host{--primary-color:#EE7600;--secondary-color:#3780BF;--border-color:#000000;--center-line:solid;--center-line-color:#000000;--center-line-opacity:0.6;--primary-color:#2EB4C9;--secondary-color:#C93C4B;--border-color:#000000;--center-line:solid;--center-line-color:#000000;--center-line-opacity:0.6}:host [part=legend-container-outer]{padding-bottom:30px}:host [part=primary-legend],:host [part=secondary-legend]{margin-top:4px;align-items:center}:host [part=primary-legend-symbol],:host [part=secondary-legend-symbol]{height:12px;width:12px;border-radius:50%;margin-right:10px;align-self:baseline;margin-top:1px}:host [part=primary-legend-symbol]{background-color:var(--primary-color)}:host [part=secondary-legend-symbol]{background-color:var(--secondary-color)}:host [part=primary-value],:host [part=secondary-value]{font-weight:500}' }}));

package/lib/tab/index.d.ts

@@ -1,5 +1,5 @@
 import { JSXInterface } from '../jsx';
-import { TemplateResult, CSSResultGroup, ControlElement, PropertyValues } from '@refinitiv-ui/core';
+import { CSSResultGroup, ControlElement, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
 import '../icon/index.js';
 import '../label/index.js';
 /**

package/lib/tab/index.js

@@ -1,13 +1,13 @@
 import { __decorate } from "tslib";
-import { html, css, ControlElement } from '@refinitiv-ui/core';
+import { ControlElement, css, html } from '@refinitiv-ui/core';
+import { triggerResize } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { state } from '@refinitiv-ui/core/decorators/state.js';
 import { isSlotEmpty } from '@refinitiv-ui/utils/is-slot-empty.js';
-import { triggerResize } from '@refinitiv-ui/core';
-import { VERSION } from '../version.js';
 import '../icon/index.js';
 import '../label/index.js';
+import { VERSION } from '../version.js';
 /**
  * A building block for individual tab
  * @attr {boolean} disabled - Set disabled state
@@ -153,11 +153,13 @@ let Tab = class Tab extends ControlElement {
      * @returns close button template
      */
     get CloseTemplate() {
-        return this.clears || this.clearsOnHover ? html `
-        <div part="close-container">
-          <ef-icon part="close" icon="cross" @tap="${this.handleClickClear}"></ef-icon>
-        </div>
-      ` : null;
+        return this.clears || this.clearsOnHover
+            ? html `
+          <div part="close-container">
+            <ef-icon part="close" icon="cross" @tap="${this.handleClickClear}"></ef-icon>
+          </div>
+        `
+            : null;
     }
     /**
      * Create ef-label template when label is true
@@ -167,13 +169,7 @@ let Tab = class Tab extends ControlElement {
         if (!this.label || this.isSlotHasContent) {
             return null;
         }
-        return html `
-      <ef-label
-        part="label"
-        .lineClamp=${this.getLineClamp()}>
-        ${this.label}
-      </ef-label>
-    `;
+        return html ` <ef-label part="label" .lineClamp=${this.getLineClamp()}> ${this.label} </ef-label> `;
     }
     /**
      * Create ef-label template when subLabel is true
@@ -183,13 +179,7 @@ let Tab = class Tab extends ControlElement {
         if (!this.subLabel || this.isSlotHasContent) {
             return null;
         }
-        return html `
-      <ef-label
-      part="sub-label"
-      .lineClamp=${this.getLineClamp()}>
-        ${this.subLabel}
-      </ef-label>
-    `;
+        return html ` <ef-label part="sub-label" .lineClamp=${this.getLineClamp()}> ${this.subLabel} </ef-label> `;
     }
     /**
      * A `TemplateResult` that will be used
@@ -199,11 +189,10 @@ let Tab = class Tab extends ControlElement {
     render() {
         return html `
       ${this.icon ? html `<ef-icon icon=${this.icon} part="icon"></ef-icon>` : null}
-        <div part="label-container">
-          ${this.LabelTemplate}
-          ${this.SubLabelTemplate}
-          <slot @slotchange="${this.onSlotChange}"></slot>
-        </div>
+      <div part="label-container">
+        ${this.LabelTemplate} ${this.SubLabelTemplate}
+        <slot @slotchange="${this.onSlotChange}"></slot>
+      </div>
       ${this.CloseTemplate}
     `;
     }

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

@@ -1,4 +1,3 @@
 import '@refinitiv-ui/elements/icon/themes/halo/dark';
 import '@refinitiv-ui/elements/label/themes/halo/dark';
-
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-tab', styles: ':host{cursor:pointer;background-color:#404040;color:#ccc;height:36px;padding:9px 12px;outline:0;font-size:12px;font-weight:500;transition:120ms;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:46px}: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:46px}: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:120ms;background:#1429bd;box-shadow:-1em 0 .75em -.5em #1429bd}:host([active]){color:#fff;background-color:#334bff}:host([active]:hover){background-color:#1429bd}:host([active]:hover[clears-on-hover]) [part=close-container]{background-color:#1429bd;box-shadow:-1em 0 .75em -.5em #1429bd}:host([active]:active){background-color:#0f1e8a}:host([active]:active[clears-on-hover]) [part=close-container]{background-color:#0f1e8a;box-shadow:-1em 0 .75em -.5em #0f1e8a}:host([active][disabled]){color:rgba(255,255,255,.5);background-color:rgba(51,75,255,.5)}:host([disabled]){pointer-events:none;color:rgba(204,204,204,.5);background-color:rgba(64,64,64,.5)}:host(:focus:not([focused])),:host([focused=visible]){box-shadow:none;background-color:#1429bd}:host(:focus:not([focused]):not([active]):not(:hover)),:host([focused=visible]:not([active]):not(:hover)){color:#6678ff;background-color:#404040}:host(:hover){color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.8);background-color:#1429bd}:host(:hover[clears-on-hover]) [part=close-container]{opacity:1}:host(:active){color:#fff;background-color:#0f1e8a}:host(:active[clears-on-hover]) [part=close-container]{background-color:#0f1e8a;box-shadow:-1em 0 .75em -.5em #0f1e8a}:host([level="1"]){border-right:1px solid #0d0d0d}:host([level="2"]:not(:last-child)){border-right:none}:host([level="2"]:not(:last-child)) [part=label-container]::after{content:\'\';position:absolute;margin:auto;width:1px;background:#404040;height:70%;right:0;top:0;bottom:0;z-index:1}:host([level="2"]:not(:active):not([active]):not(:hover)){background-color:#262626}:host([level="2"][active]:not(:active):not(:hover)){color:#6678ff;background-color:#0d0d0d}:host([level="2"][active]:focus:not([focused])),:host([level="2"][focused=visible]:not(:active):not(:hover)){color:#6678ff}:host([level="3"]){border-bottom:2px solid transparent;color:#ccc;background-color:#0d0d0d}:host([level="3"][clears-on-hover]) [part=close-container]{background:#0d0d0d;box-shadow:-1em 0 .75em -.5em #0d0d0d}:host([level="3"]:focus:not([focused])),:host([level="3"][focused=visible]){color:#fff;background-color:#262626}:host([level="3"]:active),:host([level="3"]:hover),:host([level="3"][active]){color:#fff;background-color:#0d0d0d;border-color:#334bff}:host([level="3"]:active[clears-on-hover]) [part=close-container],:host([level="3"]:hover[clears-on-hover]) [part=close-container],:host([level="3"][active][clears-on-hover]) [part=close-container]{background:#0d0d0d;box-shadow:-1em 0 .75em -.5em #0d0d0d}:host([level="3"]:active) [part=close],:host([level="3"]:hover) [part=close],:host([level="3"][active]) [part=close]{color:#fff}:host([level="3"]:hover){border-color:#1429bd}:host([level="3"]:active){border-color:#0f1e8a}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-tab', styles: ':host{cursor:pointer;background-color:#404040;color:#ccc;height:36px;padding:9px 12px;outline:0;font-size:12px;font-weight:500;transition:120ms;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:46px}: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:46px}: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:120ms;background:#1429bd;box-shadow:-1em 0 .75em -.5em #1429bd}:host([active]){color:#fff;background-color:#334bff}:host([active]:hover){background-color:#1429bd}:host([active]:hover[clears-on-hover]) [part=close-container]{background-color:#1429bd;box-shadow:-1em 0 .75em -.5em #1429bd}:host([active]:active){background-color:#0f1e8a}:host([active]:active[clears-on-hover]) [part=close-container]{background-color:#0f1e8a;box-shadow:-1em 0 .75em -.5em #0f1e8a}:host([active][disabled]){color:rgba(255,255,255,.5);background-color:rgba(51,75,255,.5)}:host([disabled]){pointer-events:none;color:rgba(204,204,204,.5);background-color:rgba(64,64,64,.5)}:host(:focus:not([focused])),:host([focused=visible]){box-shadow:none;background-color:#1429bd}:host(:focus:not([focused]):not([active]):not(:hover)),:host([focused=visible]:not([active]):not(:hover)){color:#6678ff;background-color:#404040}:host(:hover){color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.8);background-color:#1429bd}:host(:hover[clears-on-hover]) [part=close-container]{opacity:1}:host(:active){color:#fff;background-color:#0f1e8a}:host(:active[clears-on-hover]) [part=close-container]{background-color:#0f1e8a;box-shadow:-1em 0 .75em -.5em #0f1e8a}:host([level=\'1\']){border-right:1px solid #0d0d0d}:host([level=\'2\']:not(:last-child)){border-right:none}:host([level=\'2\']:not(:last-child)) [part=label-container]::after{content:\'\';position:absolute;margin:auto;width:1px;background:#404040;height:70%;right:0;top:0;bottom:0;z-index:1}:host([level=\'2\']:not(:active):not([active]):not(:hover)){background-color:#262626}:host([level=\'2\'][active]:not(:active):not(:hover)){color:#6678ff;background-color:#0d0d0d}:host([level=\'2\'][active]:focus:not([focused])),:host([level=\'2\'][focused=visible]:not(:active):not(:hover)){color:#6678ff}:host([level=\'3\']){border-bottom:2px solid transparent;color:#ccc;background-color:#0d0d0d}:host([level=\'3\'][clears-on-hover]) [part=close-container]{background:#0d0d0d;box-shadow:-1em 0 .75em -.5em #0d0d0d}:host([level=\'3\']:focus:not([focused])),:host([level=\'3\'][focused=visible]){color:#fff;background-color:#262626}:host([level=\'3\']:active),:host([level=\'3\']:hover),:host([level=\'3\'][active]){color:#fff;background-color:#0d0d0d;border-color:#334bff}:host([level=\'3\']:active[clears-on-hover]) [part=close-container],:host([level=\'3\']:hover[clears-on-hover]) [part=close-container],:host([level=\'3\'][active][clears-on-hover]) [part=close-container]{background:#0d0d0d;box-shadow:-1em 0 .75em -.5em #0d0d0d}:host([level=\'3\']:active) [part=close],:host([level=\'3\']:hover) [part=close],:host([level=\'3\'][active]) [part=close]{color:#fff}:host([level=\'3\']:hover){border-color:#1429bd}:host([level=\'3\']:active){border-color:#0f1e8a}' }}));

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

@@ -1,4 +1,3 @@
 import '@refinitiv-ui/elements/icon/themes/halo/light';
 import '@refinitiv-ui/elements/label/themes/halo/light';
-
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-tab', styles: ':host{cursor:pointer;background-color:#e6e6e6;color:#0d0d0d;height:36px;padding:9px 12px;outline:0;font-size:12px;font-weight:500;transition:120ms;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:46px}: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:46px}: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:120ms;background:#1429bd;box-shadow:-1em 0 .75em -.5em #1429bd}:host([active]){color:#fff;background-color:#334bff}:host([active]:hover){background-color:#1429bd}:host([active]:hover[clears-on-hover]) [part=close-container]{background-color:#1429bd;box-shadow:-1em 0 .75em -.5em #1429bd}:host([active]:active){background-color:#0f1e8a}:host([active]:active[clears-on-hover]) [part=close-container]{background-color:#0f1e8a;box-shadow:-1em 0 .75em -.5em #0f1e8a}:host([active][disabled]){color:rgba(255,255,255,.5);background-color:rgba(51,75,255,.5)}:host([disabled]){pointer-events:none;color:rgba(13,13,13,.5);background-color:rgba(230,230,230,.5)}:host(:focus:not([focused])),:host([focused=visible]){box-shadow:none;background-color:#1429bd}:host(:focus:not([focused]):not([active]):not(:hover)),:host([focused=visible]:not([active]):not(:hover)){color:#6678ff;background-color:#e6e6e6}:host(:hover){color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.55);background-color:#1429bd}:host(:hover[clears-on-hover]) [part=close-container]{opacity:1}:host(:active){color:#fff;background-color:#0f1e8a}:host(:active[clears-on-hover]) [part=close-container]{background-color:#0f1e8a;box-shadow:-1em 0 .75em -.5em #0f1e8a}:host([level="1"]){border-right:1px solid #fff}:host([level="2"]:not(:last-child)){border-right:none}:host([level="2"]:not(:last-child)) [part=label-container]::after{content:\'\';position:absolute;margin:auto;width:1px;background:#d9d9d9;height:70%;right:0;top:0;bottom:0;z-index:1}:host([level="2"]:not(:active):not([active]):not(:hover)){background-color:#f2f2f2}:host([level="2"][active]:not(:active):not(:hover)){color:#334bff;background-color:#fff}:host([level="2"][active]:focus:not([focused])),:host([level="2"][focused=visible]:not(:active):not(:hover)){color:#6678ff}:host([level="3"]){border-bottom:2px solid transparent;color:#404040;background-color:#fff}:host([level="3"][clears-on-hover]) [part=close-container]{background:#fff;box-shadow:-1em 0 .75em -.5em #fff}:host([level="3"]:focus:not([focused])),:host([level="3"][focused=visible]){color:#0d0d0d;background-color:#f2f2f2}:host([level="3"]:active),:host([level="3"]:hover),:host([level="3"][active]){color:#0d0d0d;background-color:#fff;border-color:#334bff}:host([level="3"]:active[clears-on-hover]) [part=close-container],:host([level="3"]:hover[clears-on-hover]) [part=close-container],:host([level="3"][active][clears-on-hover]) [part=close-container]{background:#fff;box-shadow:-1em 0 .75em -.5em #fff}:host([level="3"]:active) [part=close],:host([level="3"]:hover) [part=close],:host([level="3"][active]) [part=close]{color:#0d0d0d}:host([level="3"]:hover){border-color:#1429bd}:host([level="3"]:active){border-color:#0f1e8a}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-tab', styles: ':host{cursor:pointer;background-color:#e6e6e6;color:#0d0d0d;height:36px;padding:9px 12px;outline:0;font-size:12px;font-weight:500;transition:120ms;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:46px}: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:46px}: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:120ms;background:#1429bd;box-shadow:-1em 0 .75em -.5em #1429bd}:host([active]){color:#fff;background-color:#334bff}:host([active]:hover){background-color:#1429bd}:host([active]:hover[clears-on-hover]) [part=close-container]{background-color:#1429bd;box-shadow:-1em 0 .75em -.5em #1429bd}:host([active]:active){background-color:#0f1e8a}:host([active]:active[clears-on-hover]) [part=close-container]{background-color:#0f1e8a;box-shadow:-1em 0 .75em -.5em #0f1e8a}:host([active][disabled]){color:rgba(255,255,255,.5);background-color:rgba(51,75,255,.5)}:host([disabled]){pointer-events:none;color:rgba(13,13,13,.5);background-color:rgba(230,230,230,.5)}:host(:focus:not([focused])),:host([focused=visible]){box-shadow:none;background-color:#1429bd}:host(:focus:not([focused]):not([active]):not(:hover)),:host([focused=visible]:not([active]):not(:hover)){color:#6678ff;background-color:#e6e6e6}:host(:hover){color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.55);background-color:#1429bd}:host(:hover[clears-on-hover]) [part=close-container]{opacity:1}:host(:active){color:#fff;background-color:#0f1e8a}:host(:active[clears-on-hover]) [part=close-container]{background-color:#0f1e8a;box-shadow:-1em 0 .75em -.5em #0f1e8a}:host([level=\'1\']){border-right:1px solid #fff}:host([level=\'2\']:not(:last-child)){border-right:none}:host([level=\'2\']:not(:last-child)) [part=label-container]::after{content:\'\';position:absolute;margin:auto;width:1px;background:#d9d9d9;height:70%;right:0;top:0;bottom:0;z-index:1}:host([level=\'2\']:not(:active):not([active]):not(:hover)){background-color:#f2f2f2}:host([level=\'2\'][active]:not(:active):not(:hover)){color:#334bff;background-color:#fff}:host([level=\'2\'][active]:focus:not([focused])),:host([level=\'2\'][focused=visible]:not(:active):not(:hover)){color:#6678ff}:host([level=\'3\']){border-bottom:2px solid transparent;color:#404040;background-color:#fff}:host([level=\'3\'][clears-on-hover]) [part=close-container]{background:#fff;box-shadow:-1em 0 .75em -.5em #fff}:host([level=\'3\']:focus:not([focused])),:host([level=\'3\'][focused=visible]){color:#0d0d0d;background-color:#f2f2f2}:host([level=\'3\']:active),:host([level=\'3\']:hover),:host([level=\'3\'][active]){color:#0d0d0d;background-color:#fff;border-color:#334bff}:host([level=\'3\']:active[clears-on-hover]) [part=close-container],:host([level=\'3\']:hover[clears-on-hover]) [part=close-container],:host([level=\'3\'][active][clears-on-hover]) [part=close-container]{background:#fff;box-shadow:-1em 0 .75em -.5em #fff}:host([level=\'3\']:active) [part=close],:host([level=\'3\']:hover) [part=close],:host([level=\'3\'][active]) [part=close]{color:#0d0d0d}:host([level=\'3\']:hover){border-color:#1429bd}:host([level=\'3\']:active){border-color:#0f1e8a}' }}));

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

@@ -1,4 +1,3 @@
 import '@refinitiv-ui/elements/icon/themes/solar/charcoal';
 import '@refinitiv-ui/elements/label/themes/solar/charcoal';
-
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-tab', styles: ':host{cursor:pointer;background-color:#3c3c42;color:#c2c2c2;height:23px;padding:7px 15px;outline:0;font-size:13px;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}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-tab', styles: ':host{cursor:pointer;background-color:#3c3c42;color:#c2c2c2;height:23px;padding:7px 15px;outline:0;font-size:13px;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,3 @@
 import '@refinitiv-ui/elements/icon/themes/solar/pearl';
 import '@refinitiv-ui/elements/label/themes/solar/pearl';
-
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-tab', styles: ':host{cursor:pointer;background-color:#fafbfc;color:#505050;height:23px;padding:7px 15px;outline:0;font-size:13px;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}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-tab', styles: ':host{cursor:pointer;background-color:#fafbfc;color:#505050;height:23px;padding:7px 15px;outline:0;font-size:13px;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/helpers/animate.js

@@ -34,7 +34,7 @@ const tweenAnimate = (configs) => {
     const delta = endPosition - startPosition;
     const tweenLoop = () => {
         const currentTime = 'now' in window.performance ? performance.now() : new Date().getTime();
-        const step = Math.min(1, ((currentTime - startTime) / duration));
+        const step = Math.min(1, (currentTime - startTime) / duration);
         const factor = functionEasings[easing](step); // factor can be a decimal
         configs.target.scrollLeft = startPosition + delta * factor;
         if (step < 1 && configs.target.scrollLeft !== endPosition) {

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

@@ -1,5 +1,5 @@
 import { JSXInterface } from '../jsx';
-import { TemplateResult, CSSResultGroup, PropertyValues, BasicElement } from '@refinitiv-ui/core';
+import { BasicElement, CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
 import '../button/index.js';
 import '../layout/index.js';
 /**