@refinitiv-ui/elements 6.8.8 → 6.8.9

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

@@ -1,3 +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,3 +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,3 +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,3 +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';
 /**

package/lib/tab-bar/index.js

@@ -1,13 +1,13 @@
 import { __decorate } from "tslib";
-import { html, css, BasicElement } from '@refinitiv-ui/core';
+import { BasicElement, 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 { VERSION } from '../version.js';
-import { tweenAnimate } from './helpers/animate.js';
-import { Tab } from '../tab/index.js';
 import '../button/index.js';
 import '../layout/index.js';
+import { Tab } from '../tab/index.js';
+import { VERSION } from '../version.js';
+import { tweenAnimate } from './helpers/animate.js';
 const BAR_TRAVEL_DISTANCE = 150; // scroll distance
 /**
  * Container for tabs
@@ -54,13 +54,13 @@ let TabBar = class TabBar extends BasicElement {
       :host {
         display: flex;
       }
-      :host([alignment=center]) {
+      :host([alignment='center']) {
         justify-content: center;
       }
-      :host([alignment=right]) {
+      :host([alignment='right']) {
         justify-content: flex-end;
       }
-      :host [part=content] {
+      :host [part='content'] {
         flex-grow: 0;
       }
     `;
@@ -129,7 +129,7 @@ let TabBar = class TabBar extends BasicElement {
      */
     isValidValue(value) {
         const tabList = this.getFocusableTabs();
-        return tabList.some(tab => this.getTabValue(tab) === value);
+        return tabList.some((tab) => this.getTabValue(tab) === value);
     }
     /**
      * On *user-interaction* set the value and notify.
@@ -153,7 +153,7 @@ let TabBar = class TabBar extends BasicElement {
         }
         this.setLevel();
         // get tab value from active tab
-        const activeTab = tabList.find(tab => tab.active) || tabList[0];
+        const activeTab = tabList.find((tab) => tab.active) || tabList[0];
         if (activeTab) {
             this.value = this.getTabValue(activeTab);
         }
@@ -170,7 +170,7 @@ let TabBar = class TabBar extends BasicElement {
         }
         let hasActiveTab = false;
         const tabList = this.getTabElements(); // get all tab elements include disabled tab
-        tabList.forEach(tab => {
+        tabList.forEach((tab) => {
             const tabValue = this.getTabValue(tab);
             // only mark tab as active once
             if (tabValue === value && !hasActiveTab && !tab.disabled) {
@@ -231,7 +231,7 @@ let TabBar = class TabBar extends BasicElement {
      * @returns the array of focusable tab
      */
     getFocusableTabs() {
-        return this.getTabElements().filter(tab => !tab.disabled);
+        return this.getTabElements().filter((tab) => !tab.disabled);
     }
     /**
      * Set tab level attribute accordingly
@@ -332,7 +332,7 @@ let TabBar = class TabBar extends BasicElement {
         if (tabList.length <= 0) {
             return;
         }
-        const focusedTabIndex = tabList.findIndex(tab => tab === document.activeElement);
+        const focusedTabIndex = tabList.findIndex((tab) => tab === document.activeElement);
         const nextTab = direction === 'next'
             ? tabList[focusedTabIndex + 1] || tabList[0]
             : tabList[focusedTabIndex - 1] || tabList[tabList.length - 1];
@@ -391,7 +391,7 @@ let TabBar = class TabBar extends BasicElement {
     manageTabIndex() {
         const tabList = this.getFocusableTabs();
         if (tabList && tabList.length > 0) {
-            const focusedTabIndex = tabList.findIndex(tab => tab.active);
+            const focusedTabIndex = tabList.findIndex((tab) => tab.active);
             this.rovingTabIndex(tabList[focusedTabIndex], tabList);
         }
     }
@@ -402,11 +402,27 @@ let TabBar = class TabBar extends BasicElement {
      */
     render() {
         return html `
-      ${!this.vertical ? html `<ef-button tabIndex="-1" aria-hidden="true" icon="left" part="left-btn" @tap=${this.handleScrollLeft}></ef-button>` : null}
-        <ef-layout part="content" @resize=${this.handleResize}>
-          <slot @slotchange=${this.onSlotChange}></slot>
-        </ef-layout>
-      ${!this.vertical ? html `<ef-button tabIndex="-1" aria-hidden="true" icon="right" part="right-btn" @tap=${this.handleScrollRight}></ef-button>` : null}
+      ${!this.vertical
+            ? html `<ef-button
+            tabIndex="-1"
+            aria-hidden="true"
+            icon="left"
+            part="left-btn"
+            @tap=${this.handleScrollLeft}
+          ></ef-button>`
+            : null}
+      <ef-layout part="content" @resize=${this.handleResize}>
+        <slot @slotchange=${this.onSlotChange}></slot>
+      </ef-layout>
+      ${!this.vertical
+            ? html `<ef-button
+            tabIndex="-1"
+            aria-hidden="true"
+            icon="right"
+            part="right-btn"
+            @tap=${this.handleScrollRight}
+          ></ef-button>`
+            : null}
     `;
     }
 };

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

@@ -1,4 +1,4 @@
 import '@refinitiv-ui/elements/tab/themes/halo/dark';
 import '@refinitiv-ui/elements/button/themes/halo/dark';
 import '@refinitiv-ui/elements/layout/themes/halo/dark';
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-tab-bar', styles: ':host{position:relative;background-color:#1a1a1a}: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:#404040;width:36px;border:none}:host [part=left-btn]:hover,:host [part=right-btn]:hover{background-color:#1429bd}:host [part=left-btn]:active,:host [part=right-btn]:active{background-color:#0f1e8a}: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:#1429bd}: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:#6678ff;background-color:#404040}: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 #404040}:host [part=left-btn]::after,:host [part=right-btn]::after{content:\'\';position:absolute;margin:auto;width:1px;background:#404040;height:70%;top:0;bottom:0}:host([level="1"]) [part=left-btn]::after,:host([level="1"]) [part=right-btn]::after{content:none}:host([level="1"]) [part=left-btn]{border-right:1px solid #0d0d0d}:host([level="1"]) [part=right-btn]{border-left:1px solid #0d0d0d}:host([level="2"]) [part=left-btn]::after,:host([level="3"]) [part=left-btn]::after{right:0}:host([level="2"]) [part=right-btn]::after,:host([level="3"]) [part=right-btn]::after{left:0}:host([level="2"]) [part=left-btn]:not(:active):not(:hover),:host([level="2"]) [part=right-btn]:not(:active):not(:hover){background-color:#262626}:host([level="2"]) [part=left-btn]::after,:host([level="2"]) [part=right-btn]::after{height:70%}:host([level="3"]) [part=left-btn],:host([level="3"]) [part=right-btn]{border-color:transparent}:host([level="3"]) [part=left-btn]:not(:active):not(:hover),:host([level="3"]) [part=right-btn]:not(:active):not(:hover){background-color:#0d0d0d}:host([level="3"]) [part=left-btn]::after,:host([level="3"]) [part=right-btn]::after{height:30%}:host([vertical]) [part=content] ::slotted(ef-tab){border-bottom-color:transparent;border-right:none!important;background:linear-gradient(#1a1a1a,#1a1a1a) left calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#1a1a1a,#1a1a1a) right calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#404040,#404040) center calc(100% + 1px)/100% 1px no-repeat}:host([vertical]) [part=content] ::slotted(ef-tab[active]:not(:active):not(:hover)){background:linear-gradient(#0d0d0d,#0d0d0d) left calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#0d0d0d,#0d0d0d) right calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#404040,#404040) center calc(100% + 1px)/100% 1px no-repeat}:host([vertical]) [part=content] ::slotted(ef-tab:not([active]):not(:active):not(:hover)){background-color:#1a1a1a}:host([vertical]) [part=content] ::slotted(ef-tab:hover){color:#fff;background-color:#1429bd}:host([vertical]) [part=content] ::slotted(ef-tab:active){background-color:#0f1e8a}:host([vertical][level="1"]) [part=content] ::slotted(ef-tab[active]:not(:active):not(:hover)),:host([vertical][level="3"]) [part=content] ::slotted(ef-tab[active]:not(:active):not(:hover)){color:#6678ff;background-color:#0d0d0d}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-tab-bar', styles: ':host{position:relative;background-color:#1a1a1a}: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:#404040;width:36px;border:none}:host [part=left-btn]:hover,:host [part=right-btn]:hover{background-color:#1429bd}:host [part=left-btn]:active,:host [part=right-btn]:active{background-color:#0f1e8a}: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:#1429bd}: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:#6678ff;background-color:#404040}: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 #404040}:host [part=left-btn]::after,:host [part=right-btn]::after{content:\'\';position:absolute;margin:auto;width:1px;background:#404040;height:70%;top:0;bottom:0}:host([level=\'1\']) [part=left-btn]::after,:host([level=\'1\']) [part=right-btn]::after{content:none}:host([level=\'1\']) [part=left-btn]{border-right:1px solid #0d0d0d}:host([level=\'1\']) [part=right-btn]{border-left:1px solid #0d0d0d}:host([level=\'2\']) [part=left-btn]::after,:host([level=\'3\']) [part=left-btn]::after{right:0}:host([level=\'2\']) [part=right-btn]::after,:host([level=\'3\']) [part=right-btn]::after{left:0}:host([level=\'2\']) [part=left-btn]:not(:active):not(:hover),:host([level=\'2\']) [part=right-btn]:not(:active):not(:hover){background-color:#262626}:host([level=\'2\']) [part=left-btn]::after,:host([level=\'2\']) [part=right-btn]::after{height:70%}:host([level=\'3\']) [part=left-btn],:host([level=\'3\']) [part=right-btn]{border-color:transparent}:host([level=\'3\']) [part=left-btn]:not(:active):not(:hover),:host([level=\'3\']) [part=right-btn]:not(:active):not(:hover){background-color:#0d0d0d}:host([level=\'3\']) [part=left-btn]::after,:host([level=\'3\']) [part=right-btn]::after{height:30%}:host([vertical]) [part=content] ::slotted(ef-tab){border-bottom-color:transparent;border-right:none!important;background:linear-gradient(#1a1a1a,#1a1a1a) left calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#1a1a1a,#1a1a1a) right calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#404040,#404040) center calc(100% + 1px)/100% 1px no-repeat}:host([vertical]) [part=content] ::slotted(ef-tab[active]:not(:active):not(:hover)){background:linear-gradient(#0d0d0d,#0d0d0d) left calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#0d0d0d,#0d0d0d) right calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#404040,#404040) center calc(100% + 1px)/100% 1px no-repeat}:host([vertical]) [part=content] ::slotted(ef-tab:not([active]):not(:active):not(:hover)){background-color:#1a1a1a}:host([vertical]) [part=content] ::slotted(ef-tab:hover){color:#fff;background-color:#1429bd}:host([vertical]) [part=content] ::slotted(ef-tab:active){background-color:#0f1e8a}:host([vertical][level=\'1\']) [part=content] ::slotted(ef-tab[active]:not(:active):not(:hover)),:host([vertical][level=\'3\']) [part=content] ::slotted(ef-tab[active]:not(:active):not(:hover)){color:#6678ff;background-color:#0d0d0d}' }}));

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

@@ -1,4 +1,4 @@
 import '@refinitiv-ui/elements/tab/themes/halo/light';
 import '@refinitiv-ui/elements/button/themes/halo/light';
 import '@refinitiv-ui/elements/layout/themes/halo/light';
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-tab-bar', styles: ':host{position:relative;background-color:#f2f2f2}: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:#e6e6e6;width:36px;border:none}:host [part=left-btn]:hover,:host [part=right-btn]:hover{background-color:#1429bd}:host [part=left-btn]:active,:host [part=right-btn]:active{background-color:#0f1e8a}: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:#1429bd}: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:#6678ff;background-color:#e6e6e6}: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 #d9d9d9}:host [part=left-btn]::after,:host [part=right-btn]::after{content:\'\';position:absolute;margin:auto;width:1px;background:#d9d9d9;height:70%;top:0;bottom:0}:host([level="1"]) [part=left-btn]::after,:host([level="1"]) [part=right-btn]::after{content:none}:host([level="1"]) [part=left-btn]{border-right:1px solid #fff}:host([level="1"]) [part=right-btn]{border-left:1px solid #fff}:host([level="2"]) [part=left-btn]::after,:host([level="3"]) [part=left-btn]::after{right:0}:host([level="2"]) [part=right-btn]::after,:host([level="3"]) [part=right-btn]::after{left:0}:host([level="2"]) [part=left-btn]:not(:active):not(:hover),:host([level="2"]) [part=right-btn]:not(:active):not(:hover){background-color:#f2f2f2}:host([level="2"]) [part=left-btn]::after,:host([level="2"]) [part=right-btn]::after{height:70%}:host([level="3"]) [part=left-btn],:host([level="3"]) [part=right-btn]{border-color:transparent}:host([level="3"]) [part=left-btn]:not(:active):not(:hover),:host([level="3"]) [part=right-btn]:not(:active):not(:hover){background-color:#fff}:host([level="3"]) [part=left-btn]::after,:host([level="3"]) [part=right-btn]::after{height:30%}:host([vertical]) [part=content] ::slotted(ef-tab){border-bottom-color:transparent;border-right:none!important;background:linear-gradient(#f2f2f2,#f2f2f2) left calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#f2f2f2,#f2f2f2) right calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#d9d9d9,#d9d9d9) center calc(100% + 1px)/100% 1px no-repeat}:host([vertical]) [part=content] ::slotted(ef-tab[active]:not(:active):not(:hover)){background:linear-gradient(#fff,#fff) left calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#fff,#fff) right calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#d9d9d9,#d9d9d9) center calc(100% + 1px)/100% 1px no-repeat}:host([vertical]) [part=content] ::slotted(ef-tab:not([active]):not(:active):not(:hover)){background-color:#f2f2f2}:host([vertical]) [part=content] ::slotted(ef-tab:hover){color:#fff;background-color:#1429bd}:host([vertical]) [part=content] ::slotted(ef-tab:active){background-color:#0f1e8a}:host([vertical][level="1"]) [part=content] ::slotted(ef-tab[active]:not(:active):not(:hover)),:host([vertical][level="3"]) [part=content] ::slotted(ef-tab[active]:not(:active):not(:hover)){color:#334bff;background-color:#fff}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-tab-bar', styles: ':host{position:relative;background-color:#f2f2f2}: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:#e6e6e6;width:36px;border:none}:host [part=left-btn]:hover,:host [part=right-btn]:hover{background-color:#1429bd}:host [part=left-btn]:active,:host [part=right-btn]:active{background-color:#0f1e8a}: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:#1429bd}: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:#6678ff;background-color:#e6e6e6}: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 #d9d9d9}:host [part=left-btn]::after,:host [part=right-btn]::after{content:\'\';position:absolute;margin:auto;width:1px;background:#d9d9d9;height:70%;top:0;bottom:0}:host([level=\'1\']) [part=left-btn]::after,:host([level=\'1\']) [part=right-btn]::after{content:none}:host([level=\'1\']) [part=left-btn]{border-right:1px solid #fff}:host([level=\'1\']) [part=right-btn]{border-left:1px solid #fff}:host([level=\'2\']) [part=left-btn]::after,:host([level=\'3\']) [part=left-btn]::after{right:0}:host([level=\'2\']) [part=right-btn]::after,:host([level=\'3\']) [part=right-btn]::after{left:0}:host([level=\'2\']) [part=left-btn]:not(:active):not(:hover),:host([level=\'2\']) [part=right-btn]:not(:active):not(:hover){background-color:#f2f2f2}:host([level=\'2\']) [part=left-btn]::after,:host([level=\'2\']) [part=right-btn]::after{height:70%}:host([level=\'3\']) [part=left-btn],:host([level=\'3\']) [part=right-btn]{border-color:transparent}:host([level=\'3\']) [part=left-btn]:not(:active):not(:hover),:host([level=\'3\']) [part=right-btn]:not(:active):not(:hover){background-color:#fff}:host([level=\'3\']) [part=left-btn]::after,:host([level=\'3\']) [part=right-btn]::after{height:30%}:host([vertical]) [part=content] ::slotted(ef-tab){border-bottom-color:transparent;border-right:none!important;background:linear-gradient(#f2f2f2,#f2f2f2) left calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#f2f2f2,#f2f2f2) right calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#d9d9d9,#d9d9d9) center calc(100% + 1px)/100% 1px no-repeat}:host([vertical]) [part=content] ::slotted(ef-tab[active]:not(:active):not(:hover)){background:linear-gradient(#fff,#fff) left calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#fff,#fff) right calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#d9d9d9,#d9d9d9) center calc(100% + 1px)/100% 1px no-repeat}:host([vertical]) [part=content] ::slotted(ef-tab:not([active]):not(:active):not(:hover)){background-color:#f2f2f2}:host([vertical]) [part=content] ::slotted(ef-tab:hover){color:#fff;background-color:#1429bd}:host([vertical]) [part=content] ::slotted(ef-tab:active){background-color:#0f1e8a}:host([vertical][level=\'1\']) [part=content] ::slotted(ef-tab[active]:not(:active):not(:hover)),:host([vertical][level=\'3\']) [part=content] ::slotted(ef-tab[active]:not(:active):not(:hover)){color:#334bff;background-color:#fff}' }}));

package/lib/text-field/index.d.ts

@@ -1,5 +1,5 @@
 import { JSXInterface } from '../jsx';
-import { FormFieldElement, CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
+import { CSSResultGroup, FormFieldElement, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
 import { TemplateMap } from '@refinitiv-ui/core/directives/template-map.js';
 import '../icon/index.js';
 /**

package/lib/text-field/index.js

@@ -1,12 +1,12 @@
 import { __decorate } from "tslib";
-import { FormFieldElement, css, nothing, html } from '@refinitiv-ui/core';
+import { FormFieldElement, css, html, nothing } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
-import { isElementOverflown } from '@refinitiv-ui/utils/element.js';
-import { VERSION } from '../version.js';
 import { isIE } from '@refinitiv-ui/utils/browser.js';
+import { isElementOverflown } from '@refinitiv-ui/utils/element.js';
 import '../icon/index.js';
 import { registerOverflowTooltip } from '../tooltip/index.js';
+import { VERSION } from '../version.js';
 const hasChanged = (newVal, oldVal) => oldVal === undefined ? false : newVal !== oldVal;
 /**
  * Form control element for text.
@@ -78,24 +78,25 @@ let TextField = class TextField extends FormFieldElement {
         display: inline-block;
       }
 
-      :host(:focus), :host input:focus {
+      :host(:focus),
+      :host input:focus {
         outline: none;
       }
-      [part=input] {
+      [part='input'] {
         font: inherit;
         background: none;
         color: currentColor;
         border: none;
         text-align: inherit;
       }
-      :host([icon]) [part=icon]{
+      :host([icon]) [part='icon'] {
         display: flex;
       }
       :host([transparent]) {
         background: none !important;
         border: none !important;
       }
-      :host([icon][icon-has-action]) [part=icon] {
+      :host([icon][icon-has-action]) [part='icon'] {
         cursor: pointer;
       }
     `;
@@ -107,7 +108,7 @@ let TextField = class TextField extends FormFieldElement {
      */
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
-        registerOverflowTooltip(this, () => this.inputValue, () => this.inputElement ? isElementOverflown(this.inputElement) : false);
+        registerOverflowTooltip(this, () => this.inputValue, () => (this.inputElement ? isElementOverflown(this.inputElement) : false));
     }
     /**
      * Called when the element’s DOM has been updated and rendered
@@ -150,9 +151,12 @@ let TextField = class TextField extends FormFieldElement {
     /* istanbul ignore next */
     shouldValidateInput(changedProperties) {
         // TODO: This validation should be refactored
-        return (changedProperties.has('pattern') || !!(this.pattern && changedProperties.has('value')))
-            || (changedProperties.has('minLength') || !!(this.minLength && changedProperties.has('value')))
-            || (changedProperties.has('maxLength') || !!(this.maxLength && changedProperties.has('value')));
+        return (changedProperties.has('pattern') ||
+            !!(this.pattern && changedProperties.has('value')) ||
+            changedProperties.has('minLength') ||
+            !!(this.minLength && changedProperties.has('value')) ||
+            changedProperties.has('maxLength') ||
+            !!(this.maxLength && changedProperties.has('value')));
     }
     /**
      * Runs on input element `input` event
@@ -188,7 +192,7 @@ let TextField = class TextField extends FormFieldElement {
         let error = !this.inputElement?.checkValidity();
         /* istanbul ignore next */
         if (this.shouldValidateForMinLength(error)) {
-            error = !!this.minLength && (this.minLength > this.value.length);
+            error = !!this.minLength && this.minLength > this.value.length;
         }
         this.notifyErrorChange(error);
     }
@@ -221,11 +225,11 @@ let TextField = class TextField extends FormFieldElement {
     get decorateInputMap() {
         return {
             ...super.decorateInputMap,
-            'type': 'text',
-            'part': 'input',
-            'maxlength': this.maxLength,
-            'minlength': this.minLength,
-            'pattern': this.pattern || null
+            type: 'text',
+            part: 'input',
+            maxlength: this.maxLength,
+            minlength: this.minLength,
+            pattern: this.pattern || null
         };
     }
     /**
@@ -233,18 +237,20 @@ let TextField = class TextField extends FormFieldElement {
      * @returns {void}
      */
     renderIcon() {
-        return this.icon ? html `
-    <ef-icon
-        role="${this.iconHasAction ? 'button' : nothing}"
-        tabindex="${this.iconHasAction ? '0' : nothing}"
-        aria-label="${this.iconHasAction ? this.icon : nothing}"
-        part="icon"
-        icon="${this.icon}"
-        ?readonly="${this.readonly}"
-        ?disabled="${this.disabled}"
-        @tap="${this.iconClick}"
-      ></ef-icon>
-    ` : null;
+        return this.icon
+            ? html `
+          <ef-icon
+            role="${this.iconHasAction ? 'button' : nothing}"
+            tabindex="${this.iconHasAction ? '0' : nothing}"
+            aria-label="${this.iconHasAction ? this.icon : nothing}"
+            part="icon"
+            icon="${this.icon}"
+            ?readonly="${this.readonly}"
+            ?disabled="${this.disabled}"
+            @tap="${this.iconClick}"
+          ></ef-icon>
+        `
+            : null;
     }
     /**
      * A `TemplateResult` that will be used
@@ -252,10 +258,7 @@ let TextField = class TextField extends FormFieldElement {
      * @return Render template
      */
     render() {
-        return html `
-      ${super.render()}
-      ${this.renderIcon()}
-    `;
+        return html ` ${super.render()} ${this.renderIcon()} `;
     }
 };
 __decorate([

package/lib/time-picker/index.d.ts

@@ -1,8 +1,8 @@
 import { JSXInterface } from '../jsx';
-import { ControlElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
-import '../number-field/index.js';
-import { TranslateDirective } from '@refinitiv-ui/translate';
+import { CSSResultGroup, ControlElement, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
 import '@refinitiv-ui/phrasebook/locale/en/time-picker.js';
+import { TranslateDirective } from '@refinitiv-ui/translate';
+import '../number-field/index.js';
 declare enum Segment {
     HOURS = "hours",
     MINUTES = "minutes",
@@ -90,9 +90,9 @@ export declare class TimePicker extends ControlElement {
      */
     showSeconds: boolean;
     /**
-    * Value of the element
-    * @param value Element value
-    */
+     * Value of the element
+     * @param value Element value
+     */
     set value(value: string);
     get value(): string;
     /**