@refinitiv-ui/elements 5.0.0-beta.3 → 5.0.0-dev.204

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

@@ -1,3 +1,3 @@
 import '@refinitiv-ui/elements/lib/canvas/themes/halo/dark';
 
-elf.customStyles.define('ef-swing-gauge', ':host{--primary-color:#6678FF;--secondary-color:#FFFFFF;--text-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}');
+elf.customStyles.define('ef-swing-gauge', ':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,3 @@
 import '@refinitiv-ui/elements/lib/canvas/themes/halo/light';
 
-elf.customStyles.define('ef-swing-gauge', ':host{--primary-color:#334BFF;--secondary-color:#0D0D0D;--text-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:#334BFF;--center-line:dotted}');
+elf.customStyles.define('ef-swing-gauge', ':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,3 @@
 import '@refinitiv-ui/elements/lib/canvas/themes/solar/charcoal';
 
-elf.customStyles.define('ef-swing-gauge', ':host{--primary-color:#FF9933;--secondary-color:#3780BF;--text-color:#FFFFFF;--border-color:#000000;--center-line:solid;--center-line-color:#000000;--center-line-opacity:0.6;--primary-color:#2EB4C9;--secondary-color:#C93C4B;--text-color:#FFFFFF;--border-color:#000000;--center-line:solid;--center-line-color:#000000;--center-line-opacity:0.6}');
+elf.customStyles.define('ef-swing-gauge', ':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,3 @@
 import '@refinitiv-ui/elements/lib/canvas/themes/solar/pearl';
 
-elf.customStyles.define('ef-swing-gauge', ':host{--primary-color:#EE7600;--secondary-color:#3780BF;--text-color:#FFFFFF;--border-color:#000000;--center-line:solid;--center-line-color:#000000;--center-line-opacity:0.6;--primary-color:#2EB4C9;--secondary-color:#C93C4B;--text-color:#FFFFFF;--border-color:#000000;--center-line:solid;--center-line-color:#000000;--center-line-opacity:0.6}');
+elf.customStyles.define('ef-swing-gauge', ':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/swing-gauge/types.d.ts

@@ -0,0 +1,34 @@
+declare type SwingGaugeValueFormatter = (value: number, rawValue?: number) => string | number | undefined;
+interface SwingGaugeData {
+    size: number;
+    width: number;
+    height: number;
+    fillPercentage?: number;
+    gaugeWidthScale: number;
+    gaugeHeightScale: number;
+    gaugeUpperBound: number;
+    gaugeLowerBound: number;
+    lineLength: number;
+    offsetLeftPrimaryLine: number;
+    offsetTopPrimaryLine: number;
+    offsetLeftPrimaryPoint: number;
+    offsetTopPrimaryPoint: number;
+    offsetLeftSecondaryLine: number;
+    offsetTopSecondaryLine: number;
+    offsetLeftSecondaryPoint: number;
+    offsetTopSecondaryPoint: number;
+}
+interface SwingGaugeStyle {
+    strokeWidth: number;
+    primaryColor: string;
+    secondaryColor: string;
+    borderColor: string;
+    centerline: string;
+    centerlineOpacity: string;
+    centerlineColor: string;
+}
+interface SwingGaugeCanvasSize {
+    width: number;
+    height: number;
+}
+export { SwingGaugeData, SwingGaugeStyle, SwingGaugeCanvasSize, SwingGaugeValueFormatter };

package/lib/swing-gauge/types.js

@@ -0,0 +1 @@
+export {};

package/lib/tab/custom-elements.json

@@ -36,15 +36,10 @@
           "default": "false"
         },
         {
-          "name": "truncate",
-          "description": "Enable shortening the label",
-          "type": "\"\" | \"center\" | null | undefined",
-          "default": "\"\""
-        },
-        {
-          "name": "max-line",
+          "name": "line-clamp",
           "description": "Limit the number of lines before truncating",
-          "type": "string | null | undefined"
+          "type": "number",
+          "default": "1"
         },
         {
           "name": "clears-on-hover",
@@ -56,7 +51,7 @@
           "name": "disabled",
           "description": "Set disabled state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "properties": [
@@ -96,17 +91,11 @@
           "default": "false"
         },
         {
-          "name": "truncate",
-          "attribute": "truncate",
-          "description": "Enable shortening the label",
-          "type": "\"\" | \"center\" | null | undefined",
-          "default": "\"\""
-        },
-        {
-          "name": "maxLine",
-          "attribute": "max-line",
+          "name": "lineClamp",
+          "attribute": "line-clamp",
           "description": "Limit the number of lines before truncating",
-          "type": "string | null | undefined"
+          "type": "number",
+          "default": "1"
         },
         {
           "name": "clearsOnHover",
@@ -120,13 +109,13 @@
           "attribute": "disabled",
           "description": "Set disabled state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "events": [
         {
           "name": "clear",
-          "description": "Fires when click on cross occurs. `detail.label` provides label of tab if defined. `detail.active` provides current active state."
+          "description": "Dispatched when click on cross button occurs"
         }
       ]
     }

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,13 +1,20 @@
 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
  * @prop {boolean} [disabled=false] - Set disabled state
+ *
+ * @fires clear - Dispatched when click on cross button occurs
  */
 export declare class Tab extends ControlElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
     /**
      * Specify icon name to display in tab
      */
@@ -28,14 +35,10 @@ export declare class Tab extends ControlElement {
      * Set tab to clearable
      */
     clears: boolean;
-    /**
-     * Enable shortening the label
-     */
-    truncate: 'center' | '' | null | undefined;
     /**
      * Limit the number of lines before truncating
      */
-    maxLine: string | null | undefined;
+    lineClamp: number;
     /**
      * Set tab to clearable on hover
      */
@@ -61,22 +64,22 @@ export declare class Tab extends ControlElement {
      */
     private checkSlotChildren;
     /**
-     * Omitted maxLine if subLabel is provided
-     * @returns Max line value
+     * Omitted lineClamp if subLabel is provided
+     * @returns line Clamp value
      */
-    private getMaxLine;
+    private getLineClamp;
     /**
      * @param event event from close button
      * @returns {void}
      */
     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
@@ -110,4 +113,6 @@ declare global {
       'ef-tab': Partial<Tab> | JSXInterface.ControlHTMLAttributes<Tab>;
     }
   }
-}
+}
+
+export {};

package/lib/tab/index.js

@@ -1,12 +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 '../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
@@ -16,6 +14,8 @@ const isAllWhitespaceTextNode = (node) => {
  * A building block for individual tab
  * @attr {boolean} disabled - Set disabled state
  * @prop {boolean} [disabled=false] - Set disabled state
+ *
+ * @fires clear - Dispatched when click on cross button occurs
  */
 let Tab = class Tab extends ControlElement {
     constructor() {
@@ -41,9 +41,9 @@ let Tab = class Tab extends ControlElement {
          */
         this.clears = false;
         /**
-         * Enable shortening the label
+         * Limit the number of lines before truncating
          */
-        this.truncate = '';
+        this.lineClamp = 1;
         /**
          * Set tab to clearable on hover
          */
@@ -65,9 +65,16 @@ 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();
         };
     }
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
     /**
      * @param node that should be checked
      * @returns whether node can be ignored.
@@ -77,11 +84,11 @@ let Tab = class Tab extends ControlElement {
             || isAllWhitespaceTextNode(node);
     }
     /**
-     * Omitted maxLine if subLabel is provided
-     * @returns Max line value
+     * Omitted lineClamp if subLabel is provided
+     * @returns line Clamp value
      */
-    getMaxLine() {
-        return this.subLabel ? null : this.maxLine;
+    getLineClamp() {
+        return !this.lineClamp ? 0 : this.subLabel ? 1 : this.lineClamp;
     }
     /**
      * @param event event from close button
@@ -90,19 +97,12 @@ let Tab = class Tab extends ControlElement {
     handleClickClear(event) {
         event.stopPropagation();
         /**
-         * Fires when click on cross occurs. `detail.label` provides label of tab if defined. `detail.active` provides current active state.
-         * @param detail.label - label stored on the tab
-         * @param detail.active - current active state, always present
+         * Fires when click on cross occurs
          */
-        this.dispatchEvent(new CustomEvent('clear', {
-            detail: {
-                label: this.label,
-                active: this.active
-            }
-        }));
+        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
@@ -111,9 +111,7 @@ let Tab = class Tab extends ControlElement {
         return css `
       :host {
         display: inline-flex;
-      }
-      :host [part=sub-label] {
-        display: block;
+        flex-shrink: 0;
       }
     `;
     }
@@ -139,9 +137,7 @@ let Tab = class Tab extends ControlElement {
         return html `
       <ef-label
         part="label"
-        .truncate=${this.truncate}
-        .maxLine=${this.getMaxLine()}
-      >
+        .lineClamp=${this.getLineClamp()}>
         ${this.label}
       </ef-label>
     `;
@@ -157,8 +153,7 @@ let Tab = class Tab extends ControlElement {
         return html `
       <ef-label
       part="sub-label"
-      .truncate=${this.truncate}
-      .maxLine=${this.getMaxLine()}>
+      .lineClamp=${this.getLineClamp()}>
         ${this.subLabel}
       </ef-label>
     `;
@@ -197,11 +192,8 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], Tab.prototype, "clears", void 0);
 __decorate([
-    property({ type: String, reflect: true })
-], Tab.prototype, "truncate", void 0);
-__decorate([
-    property({ type: String, reflect: true, attribute: 'max-line' })
-], Tab.prototype, "maxLine", void 0);
+    property({ type: Number, reflect: true, attribute: 'line-clamp' })
+], Tab.prototype, "lineClamp", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'clears-on-hover' })
 ], Tab.prototype, "clearsOnHover", void 0);
@@ -214,4 +206,3 @@ Tab = __decorate([
     })
 ], Tab);
 export { Tab };
-//# sourceMappingURL=index.js.map

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

@@ -1,4 +1,4 @@
 import '@refinitiv-ui/elements/lib/icon/themes/halo/dark';
 import '@refinitiv-ui/elements/lib/label/themes/halo/dark';
 
-elf.customStyles.define('ef-tab', ':host{cursor:pointer;background-color:#404040;color:#ccc;height:36px;padding:9px 12px;outline:0;font-size:12rem;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(:not([truncate=center])[max-line]){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:#334bff;box-shadow:-1em 0 .75em -.5em #334bff}:host([active]){color:#fff;background-color:#334bff}:host([active]:hover){background-color:#4158ff}:host([active]:hover[clears-on-hover]) [part=close-container]{background-color:#4158ff;box-shadow:-1em 0 .75em -.5em #4158ff}: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:#4158ff}: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:#334bff}: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) [part=close-container],:host([level="3"]:hover) [part=close-container],:host([level="3"][active]) [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"]:active){border-color:#0f1e8a}');
+elf.customStyles.define('ef-tab', ':host{cursor:pointer;background-color:#404040;color:#ccc;height:36px;padding:9px 12px;outline:0;font-size:12rem;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:#334bff;box-shadow:-1em 0 .75em -.5em #334bff}:host([active]){color:#fff;background-color:#334bff}:host([active]:hover){background-color:#4158ff}:host([active]:hover[clears-on-hover]) [part=close-container]{background-color:#4158ff;box-shadow:-1em 0 .75em -.5em #4158ff}: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:#4158ff}: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:#334bff}: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) [part=close-container],:host([level="3"]:hover) [part=close-container],:host([level="3"][active]) [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"]:active){border-color:#0f1e8a}');

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

@@ -1,4 +1,4 @@
 import '@refinitiv-ui/elements/lib/icon/themes/halo/light';
 import '@refinitiv-ui/elements/lib/label/themes/halo/light';
 
-elf.customStyles.define('ef-tab', ':host{cursor:pointer;background-color:#e6e6e6;color:#0d0d0d;height:36px;padding:9px 12px;outline:0;font-size:12rem;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(:not([truncate=center])[max-line]){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:#334bff;box-shadow:-1em 0 .75em -.5em #334bff}:host([active]){color:#fff;background-color:#334bff}:host([active]:hover){background-color:#4158ff}:host([active]:hover[clears-on-hover]) [part=close-container]{background-color:#4158ff;box-shadow:-1em 0 .75em -.5em #4158ff}: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:#4158ff}: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:#334bff}: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) [part=close-container],:host([level="3"]:hover) [part=close-container],:host([level="3"][active]) [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"]:active){border-color:#0f1e8a}');
+elf.customStyles.define('ef-tab', ':host{cursor:pointer;background-color:#e6e6e6;color:#0d0d0d;height:36px;padding:9px 12px;outline:0;font-size:12rem;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:#334bff;box-shadow:-1em 0 .75em -.5em #334bff}:host([active]){color:#fff;background-color:#334bff}:host([active]:hover){background-color:#4158ff}:host([active]:hover[clears-on-hover]) [part=close-container]{background-color:#4158ff;box-shadow:-1em 0 .75em -.5em #4158ff}: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:#4158ff}: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:#334bff}: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) [part=close-container],:host([level="3"]:hover) [part=close-container],:host([level="3"][active]) [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"]:active){border-color:#0f1e8a}');

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(:not([truncate=center])[max-line]){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(:not([truncate=center])[max-line]){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.json

@@ -46,12 +46,6 @@
           "type": "boolean",
           "default": "false"
         }
-      ],
-      "events": [
-        {
-          "name": "resize",
-          "description": "Resize fired when the element's size changes."
-        }
       ]
     }
   ]

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/helpers/animate.d.ts

@@ -4,7 +4,7 @@ interface Configs {
     endPosition: number;
     duration?: number;
     easing?: string;
-    complete?: Function;
+    complete?: () => void;
 }
 declare const ANIMATION_DURATION = 100;
 /**

package/lib/tab-bar/helpers/animate.js

@@ -1,5 +1,9 @@
+var Easings;
+(function (Easings) {
+    Easings["EaseOutQuad"] = "easeOutQuad";
+})(Easings || (Easings = {}));
 const ANIMATION_DURATION = 100; // specifies the length of time an animation should take to complete
-const DEFAULT_EASING = 'easeOutQuad';
+const DEFAULT_EASING = Easings.EaseOutQuad;
 /**
  * Common easing equations from https://easings.net
  * @param name type of easing
@@ -47,4 +51,3 @@ const tweenAnimate = (configs) => {
     tweenLoop();
 };
 export { tweenAnimate, ANIMATION_DURATION };
-//# sourceMappingURL=animate.js.map

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

@@ -1,17 +1,22 @@
 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
  */
 export declare class TabBar extends ResponsiveElement {
     /**
-     * A `CSSResult` that will be used
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    /**
+     * 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
      */
@@ -98,4 +103,6 @@ declare global {
       'ef-tab-bar': Partial<TabBar> | JSXInterface.HTMLAttributes<TabBar>;
     }
   }
-}
+}
+
+export {};

package/lib/tab-bar/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 { html, css, customElement, property, query, ResponsiveElement } from '@refinitiv-ui/core';
-import { tweenAnimate } from './helpers/animate';
-import '../button';
+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
@@ -28,7 +27,14 @@ let TabBar = class TabBar extends ResponsiveElement {
         this.vertical = false;
     }
     /**
-     * A `CSSResult` that will be used
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
+    /**
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @returns CSS template
@@ -56,9 +62,9 @@ let TabBar = class TabBar extends ResponsiveElement {
         super.firstUpdated(changedProperties);
         this.content.addEventListener('scroll', () => {
             // Clear our timeout throughout the scroll
-            clearTimeout(this.isScrolling);
+            window.clearTimeout(this.isScrolling);
             // Set a timeout to run after scrolling ends
-            this.isScrolling = setTimeout(() => {
+            this.isScrolling = window.setTimeout(() => {
                 this.toggleScrollButton(this.content.clientWidth);
             }, 66); // equal 15 fps for compatibility
         });
@@ -92,14 +98,6 @@ let TabBar = class TabBar extends ResponsiveElement {
         if (!this.vertical) {
             this.toggleScrollButton(size.width);
         }
-        /**
-         * Resize fired when the element's size changes.
-         */
-        this.dispatchEvent(new CustomEvent('resize', {
-            bubbles: false,
-            cancelable: false,
-            detail: size
-        }));
     }
     /**
      * Hide all scroll buttons
@@ -218,4 +216,3 @@ TabBar = __decorate([
     })
 ], TabBar);
 export { TabBar };
-//# sourceMappingURL=index.js.map

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}');