@refinitiv-ui/elements 7.0.0-next.5 → 7.0.1

package/lib/card/index.js

@@ -1,16 +1,16 @@
 import { __decorate } from "tslib";
-import { BasicElement, html, css } 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 { state } from '@refinitiv-ui/core/decorators/state.js';
-import { VERSION } from '../version.js';
+import '@refinitiv-ui/phrasebook/locale/en/card.js';
+import { translate } from '@refinitiv-ui/translate';
 import { isSlotEmpty } from '@refinitiv-ui/utils/is-slot-empty.js';
-import '../label/index.js';
 import '../button/index.js';
+import '../label/index.js';
 import '../overlay-menu/index.js';
-import '@refinitiv-ui/phrasebook/locale/en/card.js';
-import { translate } from '@refinitiv-ui/translate';
+import { VERSION } from '../version.js';
 /**
  * A card frame component.
  *
@@ -63,14 +63,15 @@ let Card = class Card extends BasicElement {
         display: flex;
         flex-flow: column nowrap;
       }
-      [part~=header] {
+      [part~='header'] {
         display: flex;
       }
-      [part~=header-body] {
+      [part~='header-body'] {
         flex: 1;
         min-width: 0px;
       }
-      [part~=footer]:not([part~="has-content"]), [part~=header]:not([part~="has-content"]) {
+      [part~='footer']:not([part~='has-content']),
+      [part~='header']:not([part~='has-content']) {
         display: none;
       }
     `;
@@ -172,24 +173,25 @@ let Card = class Card extends BasicElement {
      * @return menu template
      */
     get menuTemplate() {
-        return html `${this.menuData ? html `
-      <ef-button
-        part="menu-button"
-        icon="more-vertical"
-        transparent
-        aria-label=${this.t('OPEN_MENU')}
-        aria-haspopup="true"
-        aria-controls="menu-popup"
-        aria-expanded=${this.menuOpened}
-        @tap=${this.openMenu}
-      ></ef-button>
-      <ef-overlay-menu
-        id="menu-popup"
-        part="menu-popup"
-        .data=${this.menuData}
-        position="bottom-end"
-        @opened-changed=${this.onMenuOpenChanged}></ef-overlay-menu>` : undefined}
-    `;
+        return html `${this.menuData
+            ? html ` <ef-button
+            part="menu-button"
+            icon="more-vertical"
+            transparent
+            aria-label=${this.t('OPEN_MENU')}
+            aria-haspopup="true"
+            aria-controls="menu-popup"
+            aria-expanded=${this.menuOpened}
+            @tap=${this.openMenu}
+          ></ef-button>
+          <ef-overlay-menu
+            id="menu-popup"
+            part="menu-popup"
+            .data=${this.menuData}
+            position="bottom-end"
+            @opened-changed=${this.onMenuOpenChanged}
+          ></ef-overlay-menu>`
+            : undefined} `;
     }
     /**
      * Template of header
@@ -200,7 +202,9 @@ let Card = class Card extends BasicElement {
       <div part="header${this.withHeader ? ' has-content' : ''}">
         <div part="header-body">
           <slot name="header" @slotchange="${this.onHeaderSlotChange}"></slot>
-          ${!this.headerHasContent && this.header ? html `<ef-label line-clamp="3" part="header-text">${this.header}</ef-label>` : null}
+          ${!this.headerHasContent && this.header
+            ? html `<ef-label line-clamp="3" part="header-text">${this.header}</ef-label>`
+            : null}
         </div>
         ${this.menuTemplate}
       </div>
@@ -215,7 +219,9 @@ let Card = class Card extends BasicElement {
       <div part="footer${this.withFooter ? ' has-content' : ''}">
         <div part="footer-body">
           <slot name="footer" @slotchange="${this.onFooterSlotChange}"></slot>
-          ${!this.footerHasContent && this.footer ? html `<ef-label line-clamp="3">${this.footer}</ef-label>` : undefined}
+          ${!this.footerHasContent && this.footer
+            ? html `<ef-label line-clamp="3">${this.footer}</ef-label>`
+            : undefined}
         </div>
       </div>
     `;

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

@@ -1,5 +1,4 @@
 import '@refinitiv-ui/elements/button/themes/halo/dark';
 import '@refinitiv-ui/elements/overlay-menu/themes/halo/dark';
 import '@refinitiv-ui/elements/label/themes/halo/dark';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-card', styles: ':host{box-sizing:border-box;width:400px;box-shadow:0 2px 12px rgba(0,0,0,.5);background-color:#1a1a1a;overflow:hidden;scrollbar-color:#595959 #1a1a1a;padding:16px}:host [part~=body],:host [part~=footer],:host [part~=header]{position:relative}:host [part~=body]{overflow:auto}:host [part~=footer],:host [part~=header]{flex:1 0 auto}:host [part~=header]{padding-bottom:inherit;min-height:24px}:host [part~=header-body]{z-index:0;font-weight:400;font-size:130%;font-family:inherit;display:flex;align-items:center}:host [part~=menu-button]{margin:0;font-size:16px}:host [part~=footer]{padding-top:inherit}:host [part~=footer-body]{padding-top:calc(1em - 1px);font-family:inherit;color:#999;border-top:1px solid #404040}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #1a1a1a;height:16px;width:16px;display:block}::-webkit-scrollbar-thumb{background:#595959;border-radius:0;border:1px solid #1a1a1a}::-webkit-scrollbar-thumb:hover{background:#1429bd}::-webkit-scrollbar-thumb:active{background:#0f1e8a}::-webkit-scrollbar-track{background:#1a1a1a}::-webkit-scrollbar-corner{background:#1a1a1a}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);background-position:6.5px 8px,5.5px 7px,4.5px 6px,3.5px 5px,2.5px 6px,1.5px 7px,.5px 8px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd);background-position:6.5px 8px,5.5px 7px,4.5px 6px,3.5px 5px,2.5px 6px,1.5px 7px,.5px 8px}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:6.5px 8px,5.5px 7px,4.5px 6px,3.5px 5px,2.5px 6px,1.5px 7px,.5px 8px}::-webkit-scrollbar-button:vertical:end:increment{background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);background-position:6.5px 6px,5.5px 7px,4.5px 8px,3.5px 9px,2.5px 8px,1.5px 7px,.5px 6px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd);background-position:6.5px 6px,5.5px 7px,4.5px 8px,3.5px 9px,2.5px 8px,1.5px 7px,.5px 6px}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:6.5px 6px,5.5px 7px,4.5px 8px,3.5px 9px,2.5px 8px,1.5px 7px,.5px 6px}::-webkit-scrollbar-button:horizontal:start:decrement{background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);background-position:8px 6.5px,7px 5.5px,6px 4.5px,5px 3.5px,6px 2.5px,7px 1.5px,8px .5px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd);background-position:8px 6.5px,7px 5.5px,6px 4.5px,5px 3.5px,6px 2.5px,7px 1.5px,8px .5px}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:8px 6.5px,7px 5.5px,6px 4.5px,5px 3.5px,6px 2.5px,7px 1.5px,8px .5px}::-webkit-scrollbar-button:horizontal:end:increment{background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);background-position:6px 6.5px,7px 5.5px,8px 4.5px,9px 3.5px,8px 2.5px,7px 1.5px,6px .5px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd);background-position:6px 6.5px,7px 5.5px,8px 4.5px,9px 3.5px,8px 2.5px,7px 1.5px,6px .5px}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:6px 6.5px,7px 5.5px,8px 4.5px,9px 3.5px,8px 2.5px,7px 1.5px,6px .5px}' }}));

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

@@ -1,5 +1,4 @@
 import '@refinitiv-ui/elements/button/themes/halo/light';
 import '@refinitiv-ui/elements/overlay-menu/themes/halo/light';
 import '@refinitiv-ui/elements/label/themes/halo/light';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-card', styles: ':host{box-sizing:border-box;width:400px;box-shadow:0 2px 8px rgba(0,0,0,.25);background-color:#fafafa;overflow:hidden;scrollbar-color:#999 #f2f2f2;padding:16px}:host [part~=body],:host [part~=footer],:host [part~=header]{position:relative}:host [part~=body]{overflow:auto}:host [part~=footer],:host [part~=header]{flex:1 0 auto}:host [part~=header]{padding-bottom:inherit;min-height:24px}:host [part~=header-body]{z-index:0;font-weight:400;font-size:130%;font-family:inherit;display:flex;align-items:center}:host [part~=menu-button]{margin:0;font-size:16px}:host [part~=footer]{padding-top:inherit}:host [part~=footer-body]{padding-top:calc(1em - 1px);font-family:inherit;color:#737373;border-top:1px solid #d9d9d9}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #f2f2f2;height:16px;width:16px;display:block}::-webkit-scrollbar-thumb{background:#999;border-radius:0;border:1px solid #f2f2f2}::-webkit-scrollbar-thumb:hover{background:#1429bd}::-webkit-scrollbar-thumb:active{background:#0f1e8a}::-webkit-scrollbar-track{background:#f2f2f2}::-webkit-scrollbar-corner{background:#f2f2f2}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{background-image:linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999);background-position:6.5px 8px,5.5px 7px,4.5px 6px,3.5px 5px,2.5px 6px,1.5px 7px,.5px 8px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd);background-position:6.5px 8px,5.5px 7px,4.5px 6px,3.5px 5px,2.5px 6px,1.5px 7px,.5px 8px}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:6.5px 8px,5.5px 7px,4.5px 6px,3.5px 5px,2.5px 6px,1.5px 7px,.5px 8px}::-webkit-scrollbar-button:vertical:end:increment{background-image:linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999);background-position:6.5px 6px,5.5px 7px,4.5px 8px,3.5px 9px,2.5px 8px,1.5px 7px,.5px 6px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd);background-position:6.5px 6px,5.5px 7px,4.5px 8px,3.5px 9px,2.5px 8px,1.5px 7px,.5px 6px}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:6.5px 6px,5.5px 7px,4.5px 8px,3.5px 9px,2.5px 8px,1.5px 7px,.5px 6px}::-webkit-scrollbar-button:horizontal:start:decrement{background-image:linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999);background-position:8px 6.5px,7px 5.5px,6px 4.5px,5px 3.5px,6px 2.5px,7px 1.5px,8px .5px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd);background-position:8px 6.5px,7px 5.5px,6px 4.5px,5px 3.5px,6px 2.5px,7px 1.5px,8px .5px}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:8px 6.5px,7px 5.5px,6px 4.5px,5px 3.5px,6px 2.5px,7px 1.5px,8px .5px}::-webkit-scrollbar-button:horizontal:end:increment{background-image:linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999);background-position:6px 6.5px,7px 5.5px,8px 4.5px,9px 3.5px,8px 2.5px,7px 1.5px,6px .5px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd);background-position:6px 6.5px,7px 5.5px,8px 4.5px,9px 3.5px,8px 2.5px,7px 1.5px,6px .5px}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:6px 6.5px,7px 5.5px,8px 4.5px,9px 3.5px,8px 2.5px,7px 1.5px,6px .5px}' }}));

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

@@ -1,5 +1,4 @@
 import '@refinitiv-ui/elements/button/themes/solar/charcoal';
 import '@refinitiv-ui/elements/overlay-menu/themes/solar/charcoal';
 import '@refinitiv-ui/elements/label/themes/solar/charcoal';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-card', styles: ':host{padding:6px 10px;box-sizing:border-box;width:400px;box-shadow:0 0 8px 0 rgba(0,0,0,.6);overflow:hidden;scrollbar-color:#666570 #2e2e33;background-color:#1a1a1c}:host [part~=body],:host [part~=footer],:host [part~=header]{position:relative}:host [part~=body]{overflow:auto}:host [part~=footer],:host [part~=header]{flex:1 0 auto}:host [part~=header]{padding-bottom:inherit;min-height:23px}:host [part~=header-body]{z-index:0;font-weight:400;font-size:130%;font-family:inherit;display:flex;align-items:center}:host [part~=menu-button]{margin:0;font-size:15px}:host [part~=footer]{padding-top:inherit}:host [part~=footer-body]{padding-top:calc(1em - 1px);font-family:inherit;color:#c2c2c2;border-top:1px solid #0a0a0a}::-webkit-scrollbar{width:13px;height:13px}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #2e2e33;height:12px;width:12px;display:block}::-webkit-scrollbar-thumb{background:#666570;border-radius:7px;border:2px solid #2e2e33}::-webkit-scrollbar-thumb:hover{background:#e2e2e2}::-webkit-scrollbar-thumb:active{background:#f93}::-webkit-scrollbar-track{background:#2e2e33}::-webkit-scrollbar-corner{background:#2e2e33}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:end:increment{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:horizontal:start:decrement{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}' }}));

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

@@ -1,5 +1,4 @@
 import '@refinitiv-ui/elements/button/themes/solar/pearl';
 import '@refinitiv-ui/elements/overlay-menu/themes/solar/pearl';
 import '@refinitiv-ui/elements/label/themes/solar/pearl';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-card', styles: ':host{padding:6px 10px;box-sizing:border-box;width:400px;box-shadow:0 0 8px 0 rgba(0,0,0,.3);overflow:hidden;scrollbar-color:#8a8a96 #fff;background-color:#fff}:host [part~=body],:host [part~=footer],:host [part~=header]{position:relative}:host [part~=body]{overflow:auto}:host [part~=footer],:host [part~=header]{flex:1 0 auto}:host [part~=header]{padding-bottom:inherit;min-height:23px}:host [part~=header-body]{z-index:0;font-weight:400;font-size:130%;font-family:inherit;display:flex;align-items:center}:host [part~=menu-button]{margin:0;font-size:15px}:host [part~=footer]{padding-top:inherit}:host [part~=footer-body]{padding-top:calc(1em - 1px);font-family:inherit;color:#484848;border-top:1px solid #d5d8db}::-webkit-scrollbar{width:13px;height:13px}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #fff;height:12px;width:12px;display:block}::-webkit-scrollbar-thumb{background:#8a8a96;border-radius:7px;border:2px solid #fff}::-webkit-scrollbar-thumb:hover{background:#a9afba}::-webkit-scrollbar-thumb:active{background:#ee7600}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-corner{background:#fff}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{background-image:linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:end:increment{background-image:linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:horizontal:start:decrement{background-image:linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment{background-image:linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}' }}));

package/lib/chart/elements/chart.d.ts

@@ -1,11 +1,11 @@
 import { JSXInterface } from '../../jsx';
-import { BasicElement, nothing, PropertyValues, TemplateResult, CSSResultGroup } from '@refinitiv-ui/core';
-import { Ref } from '@refinitiv-ui/core/directives/ref.js';
 import { Chart as ChartJS } from 'chart.js';
-import type { ChartConfiguration, ChartDataset, ChartOptions, ChartType, LegendItem, UpdateMode } from 'chart.js';
 import 'chartjs-adapter-date-fns';
-import { DatasetColors } from '../helpers/index.js';
+import { BasicElement, CSSResultGroup, PropertyValues, TemplateResult, nothing } from '@refinitiv-ui/core';
+import { Ref } from '@refinitiv-ui/core/directives/ref.js';
 import '../../header/index.js';
+import { DatasetColors } from '../helpers/index.js';
+import type { ChartConfiguration, ChartDataset, ChartOptions, ChartType, LegendItem, UpdateMode } from 'chart.js';
 declare module 'chart.js' {
     interface PluginOptionsByType<TType extends ChartType = ChartType> {
         'ef-chart': object;

package/lib/chart/elements/chart.js

@@ -1,14 +1,14 @@
 import { __decorate } from "tslib";
-import { BasicElement, html, css, nothing } from '@refinitiv-ui/core';
+import { Chart as ChartJS } from 'chart.js';
+import 'chartjs-adapter-date-fns';
+import { BasicElement, 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 { ref, createRef } from '@refinitiv-ui/core/directives/ref.js';
+import { createRef, ref } from '@refinitiv-ui/core/directives/ref.js';
 import { color as parseColor } from '@refinitiv-ui/utils/color.js';
+import '../../header/index.js';
 import { VERSION } from '../../version.js';
-import { Chart as ChartJS } from 'chart.js';
-import 'chartjs-adapter-date-fns';
 import { merge } from '../helpers/index.js';
-import '../../header/index.js';
 const CSS_COLOR_PREFIX = '--chart-color-';
 /**
  * Charting component that uses ChartJS library
@@ -40,7 +40,7 @@ let Chart = class Chart extends BasicElement {
                 let colors;
                 let borderColor;
                 let backgroundColor;
-                const isMultipleDatasets = (chart.config.data.datasets.length > 1);
+                const isMultipleDatasets = chart.config.data.datasets.length > 1;
                 // From old requirement, Only line, radar, scatter, polarArea type are opaque backgroundColor
                 switch (dataset.type ?? this.config?.type) {
                     case 'line':
@@ -66,7 +66,9 @@ let Chart = class Chart extends BasicElement {
                     case 'polarArea':
                         const index = isMultipleDatasets ? 0 : datasetIndex;
                         colors = this.generateColors(true, dataset.data ? dataset.data.length : 1, index);
-                        borderColor = isMultipleDatasets ? this.getComputedVariable('--multi-dataset-border-color', '#fff') : colors.solid;
+                        borderColor = isMultipleDatasets
+                            ? this.getComputedVariable('--multi-dataset-border-color', '#fff')
+                            : colors.solid;
                         backgroundColor = this.config?.type === 'polarArea' ? colors.opaque : colors.solid;
                         if (!dataset.borderColor) {
                             dataset.borderColor = borderColor;
@@ -75,10 +77,14 @@ let Chart = class Chart extends BasicElement {
                             dataset.backgroundColor = backgroundColor;
                         }
                         // Add more colors if items aren't enough
-                        if (Array.isArray(dataset.borderColor) && Array.isArray(borderColor) && dataset.borderColor.length < borderColor.length) {
+                        if (Array.isArray(dataset.borderColor) &&
+                            Array.isArray(borderColor) &&
+                            dataset.borderColor.length < borderColor.length) {
                             merge(dataset.borderColor, borderColor);
                         }
-                        if (Array.isArray(dataset.backgroundColor) && Array.isArray(backgroundColor) && dataset.backgroundColor.length < backgroundColor.length) {
+                        if (Array.isArray(dataset.backgroundColor) &&
+                            Array.isArray(backgroundColor) &&
+                            dataset.backgroundColor.length < backgroundColor.length) {
                             merge(dataset.backgroundColor, backgroundColor);
                         }
                         break;
@@ -95,10 +101,14 @@ let Chart = class Chart extends BasicElement {
                             dataset.backgroundColor = backgroundColor;
                         }
                         // Add more colors if items aren't enough
-                        if (Array.isArray(dataset.borderColor) && Array.isArray(borderColor) && dataset.borderColor.length < borderColor.length) {
+                        if (Array.isArray(dataset.borderColor) &&
+                            Array.isArray(borderColor) &&
+                            dataset.borderColor.length < borderColor.length) {
                             merge(dataset.borderColor, borderColor);
                         }
-                        if (Array.isArray(dataset.backgroundColor) && Array.isArray(backgroundColor) && dataset.backgroundColor.length < backgroundColor.length) {
+                        if (Array.isArray(dataset.backgroundColor) &&
+                            Array.isArray(backgroundColor) &&
+                            dataset.backgroundColor.length < backgroundColor.length) {
                             merge(dataset.backgroundColor, backgroundColor);
                         }
                         break;
@@ -149,10 +159,10 @@ let Chart = class Chart extends BasicElement {
             }
             let legends = [];
             const datasets = chart.config.data.datasets;
-            if (datasets.length
-                && chart?.config?.options?.plugins?.legend
-                && Array.isArray(datasets[0].backgroundColor)
-                && ['pie', 'doughnut'].includes(chartType)) {
+            if (datasets.length &&
+                chart?.config?.options?.plugins?.legend &&
+                Array.isArray(datasets[0].backgroundColor) &&
+                ['pie', 'doughnut'].includes(chartType)) {
                 return this.generateArcLegendLabels(legends, chart);
             }
             if (ChartJS.defaults.plugins.legend.labels.generateLabels) {
@@ -202,7 +212,7 @@ let Chart = class Chart extends BasicElement {
         min-height: 300px;
         box-sizing: border-box;
       }
-      [part=container] {
+      [part='container'] {
         position: absolute;
         top: 0;
         right: 0;
@@ -211,11 +221,11 @@ let Chart = class Chart extends BasicElement {
         display: flex;
         flex-direction: column;
       }
-      [part=chart] {
+      [part='chart'] {
         flex: 1 1 auto;
         position: relative;
       }
-      [part=title] {
+      [part='title'] {
         margin-bottom: 12px;
       }
       canvas {
@@ -379,7 +389,9 @@ let Chart = class Chart extends BasicElement {
         ChartJS.defaults.font.style = cssStyle.getPropertyValue('font-style');
         // Set global grid color
         ChartJS.defaults.scale.grid.color = (line) => {
-            return line.index === 0 ? this.getComputedVariable('--zero-line-color', 'transparent') : this.getComputedVariable('--grid-line-color', 'transparent');
+            return line.index === 0
+                ? this.getComputedVariable('--zero-line-color', 'transparent')
+                : this.getComputedVariable('--grid-line-color', 'transparent');
         };
         if (ChartJS.defaults.scales.radialLinear) {
             ChartJS.defaults.scales.radialLinear.ticks.showLabelBackdrop = false;
@@ -412,14 +424,9 @@ let Chart = class Chart extends BasicElement {
         if (!this.config) {
             return;
         }
-        let plugins = [
-            this.createPlugin()
-        ];
+        let plugins = [this.createPlugin()];
         if (Array.isArray(this.config.plugins) && this.config.plugins.length > 0) {
-            plugins = [
-                ...plugins,
-                ...this.config.plugins
-            ];
+            plugins = [...plugins, ...this.config.plugins];
         }
         merge(this.config, {
             plugins,
@@ -505,13 +512,12 @@ let Chart = class Chart extends BasicElement {
      * @return Render template
      */
     render() {
-        return html `
-      <div part="container">
-        ${this.titleTemplate}
-        <div part="chart">
-          <canvas ${ref(this.canvas)}></canvas>
-        </div>
-      </div>`;
+        return html ` <div part="container">
+      ${this.titleTemplate}
+      <div part="chart">
+        <canvas ${ref(this.canvas)}></canvas>
+      </div>
+    </div>`;
     }
 };
 __decorate([

package/lib/chart/plugins/doughnut-center-label.d.ts

@@ -1,5 +1,5 @@
 import { Chart as ChartJS } from 'chart.js';
-import type { Plugin, ChartType, ActiveElement } from 'chart.js';
+import type { ActiveElement, ChartType, Plugin } from 'chart.js';
 export interface CenterLabel {
     label: string;
     bold?: boolean;
@@ -11,11 +11,11 @@ export interface Selected {
 export interface CenterLabelConfig {
     defaultText: CenterLabel[];
     selected: Selected;
-    onRenderLabel(chart: ChartJS, chartItems: ActiveElement[]): CenterLabel[];
+    onRenderLabel(chart: ChartJS, chartItems: ActiveElement[]): CenterLabel[] | undefined;
 }
 declare module 'chart.js' {
     interface PluginOptionsByType<TType extends ChartType = ChartType> {
-        'centerLabel'?: CenterLabelConfig;
+        centerLabel?: CenterLabelConfig;
     }
 }
 declare const plugins: Plugin;

package/lib/chart/plugins/doughnut-center-label.js

@@ -28,8 +28,11 @@ const drawItemBorder = function (chart, active) {
         arcOptions.backgroundColor = datasets.backgroundColor[chartItem.index];
         arcOptions.backgroundColor = getHoverColor(arcOptions.backgroundColor);
     }
-    arcOptions.borderWidth = arcOptions.borderWidth || (datasets.borderWidth || chart.config.options?.elements?.arc?.borderWidth);
-    arcOptions.borderColor = (getComputedStyle(chart.canvas).getPropertyValue('--doughnut-border-color') || ChartJS.defaults.color);
+    arcOptions.borderWidth =
+        arcOptions.borderWidth ||
+            (datasets.borderWidth || chart.config.options?.elements?.arc?.borderWidth);
+    arcOptions.borderColor = (getComputedStyle(chart.canvas).getPropertyValue('--doughnut-border-color') ||
+        ChartJS.defaults.color);
     const sA = element.startAngle;
     const eA = element.endAngle;
     if (ctx) {
@@ -60,8 +63,9 @@ const plugins = {
                     chart._select = [];
                 }
                 if (chart.getActiveElements().length) {
-                    if (chart._select.length && chart._select[0].datasetIndex === chart.getActiveElements()[0].datasetIndex
-                        && chart._select[0].index === chart.getActiveElements()[0].index) {
+                    if (chart._select.length &&
+                        chart._select[0].datasetIndex === chart.getActiveElements()[0].datasetIndex &&
+                        chart._select[0].index === chart.getActiveElements()[0].index) {
                         // reset value if user clicked on selected segment
                         chart._select = [];
                     }
@@ -95,9 +99,9 @@ const plugins = {
         if (activeElements.length > 0) {
             active = activeElements;
         }
-        const renderText = config.onRenderLabel(chart, active);
+        const labels = config.onRenderLabel(chart, active);
         // Get Texts
-        const texts = renderText || config.defaultText;
+        const texts = labels || config.defaultText;
         if (!texts) {
             return;
         }
@@ -122,7 +126,7 @@ const plugins = {
             ctx.fill();
         }
         // Base font size is 30% and minus 4% per text lines ( if text has multiple lines ) of text area
-        const baseFontSize = innerRadius * (0.3 - (0.04 * (texts.length - 1)));
+        const baseFontSize = innerRadius * (0.3 - 0.04 * (texts.length - 1));
         // Keep minimum font size equal 5% of text area
         const computedFontSize = Math.max(innerRadius * 0.05, baseFontSize);
         // Use font size ratio from user if --doughnut-center-font-size CSS variable is provided
@@ -160,7 +164,7 @@ const plugins = {
                     targetText += '...';
                 }
             }
-            ctx.fillText(targetText, centerX, offsetY + (i * fontLineHeight));
+            ctx.fillText(targetText, centerX, offsetY + i * fontLineHeight);
         }
     },
     afterDatasetUpdate: function (chart) {
@@ -177,7 +181,7 @@ const plugins = {
         const datasetIndex = Number(config.selected.datasetIndex || 0);
         const visibleIndex = chart.getVisibleDatasetCount() - 1;
         // Validate index and datasetIndex
-        if (isNaN(selectedIndex) || (isNaN(datasetIndex) || datasetIndex < 0 || datasetIndex > visibleIndex)) {
+        if (isNaN(selectedIndex) || isNaN(datasetIndex) || datasetIndex < 0 || datasetIndex > visibleIndex) {
             return;
         }
         // Set selected item to the chart

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

@@ -1,4 +1,3 @@
 import '@refinitiv-ui/elements/header/themes/halo/dark';
 import '@refinitiv-ui/elements/layout/themes/halo/dark';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-chart', styles: ':host{font-size:12px;--grid-line-color:rgba(38, 38, 38, 0.5);--zero-line-color:rgba(38, 38, 38, 0.5);--animation-duration:1000;--line-width:2px;--line-tension:0;--multi-dataset-border-color:#1A1A1A;--tooltip-background-color:rgba(204, 204, 204, 0.9);--tooltip-title-color:#0D0D0D;--tooltip-body-color:#0D0D0D;--tooltip-border-radius:0px;--tooltip-caret-size:7px;--tooltip-padding-x:7px;--tooltip-padding-y:5px;--tooltip-title-spacing:0;--legend-key-box-width:4px;--chart-color-1:#6678FF;--chart-color-2:#FFFFFF;--chart-color-3:#FFC800;--chart-color-4:#9064CD;--chart-color-5:#00D0D4;--chart-color-6:#FF5000;--chart-color-7:#00C389;--chart-color-8:#EA2E6C;--tooltip-background-color:#FFFFFF;--tooltip-title-color:#0D0D0D;--tooltip-body-color:#0D0D0D;--tooltip-padding-x:8px;--tooltip-padding-y:4px;--chart-color-1:#6678FF;--chart-color-2:#FFFFFF;--chart-color-3:#FFC800;--chart-color-4:#9064CD;--chart-color-5:#00D0D4;--chart-color-6:#FF5000;--chart-color-7:#00C389;--chart-color-8:#EA2E6C;--chart-color-9:#999999;--chart-color-10:#3BBAFF;--chart-color-11:#198C8C;--chart-color-12:#C36241;--chart-color-13:#CCD2FF;--chart-color-14:#808080;--chart-color-15:#FFDE66;--chart-color-16:#BCA2E1;--chart-color-17:#59DFE1;--chart-color-18:#FF9666;--chart-color-19:#6CEFC8;--chart-color-20:#F281A7;--chart-color-21:#CCCCCC;--chart-color-22:#89D5FF;--chart-color-23:#75BABA;--chart-color-24:#DBA08D;--chart-color-25:#F6ABC4}' }}));

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

@@ -1,4 +1,3 @@
 import '@refinitiv-ui/elements/header/themes/halo/light';
 import '@refinitiv-ui/elements/layout/themes/halo/light';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-chart', styles: ':host{font-size:12px;--grid-line-color:rgba(242, 242, 242, 0.5);--zero-line-color:rgba(242, 242, 242, 0.5);--animation-duration:1000;--line-width:2px;--line-tension:0;--multi-dataset-border-color:#FAFAFA;--tooltip-background-color:rgba(13, 13, 13, 0.9);--tooltip-title-color:#FFFFFF;--tooltip-body-color:#FFFFFF;--tooltip-border-radius:0px;--tooltip-caret-size:7px;--tooltip-padding-x:7px;--tooltip-padding-y:5px;--tooltip-title-spacing:0;--legend-key-box-width:4px;--chart-color-1:#334BFF;--chart-color-2:#000000;--chart-color-3:#7F6400;--chart-color-4:#71549F;--chart-color-5:#007678;--chart-color-6:#CC4000;--chart-color-7:#007653;--chart-color-8:#D22962;--tooltip-background-color:#FFF4CC;--tooltip-title-color:#0D0D0D;--tooltip-body-color:#0D0D0D;--tooltip-padding-x:8px;--tooltip-padding-y:4px;--chart-color-1:#334BFF;--chart-color-2:#000000;--chart-color-3:#7F6400;--chart-color-4:#71549F;--chart-color-5:#007678;--chart-color-6:#CC4000;--chart-color-7:#007653;--chart-color-8:#D22962;--chart-color-9:#595959;--chart-color-10:#236F99;--chart-color-11:#147070;--chart-color-12:#AF583A;--chart-color-13:#0F1E8A;--chart-color-14:#737373;--chart-color-15:#4C3C00;--chart-color-16:#563F77;--chart-color-17:#004E4F;--chart-color-18:#993000;--chart-color-19:#00432F;--chart-color-20:#A3204C;--chart-color-21:#404040;--chart-color-22:#174A66;--chart-color-23:#116262;--chart-color-24:#88442D;--chart-color-25:#5D122B}' }}));

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

@@ -1,4 +1,3 @@
 import '@refinitiv-ui/elements/header/themes/solar/charcoal';
 import '@refinitiv-ui/elements/layout/themes/solar/charcoal';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-chart', styles: ':host{font-size:14px;--grid-line-color:rgba(10, 10, 10, 0.5);--zero-line-color:rgba(10, 10, 10, 0.5);--animation-duration:1000;--line-width:2px;--line-tension:0;--multi-dataset-border-color:#1A1A1C;--tooltip-background-color:rgba(194, 194, 194, 0.9);--tooltip-title-color:#151516;--tooltip-body-color:#151516;--tooltip-border-radius:0px;--tooltip-caret-size:7px;--tooltip-padding-x:7px;--tooltip-padding-y:5px;--tooltip-title-spacing:0;--legend-key-box-width:4px;--chart-color-1:#FF9933;--chart-color-2:#B10CF2;--chart-color-3:#7DE442;--chart-color-4:#3780BF;--chart-color-5:#FA4C11;--chart-color-6:#FFE433;--chart-color-7:#8C8C8C;--chart-color-8:#5A54FF;color:rgba(194,194,194,.8);--legend-key-box-width:12;--grid-line-color:rgba(194, 194, 194, 0.1);--zero-line-color:rgba(194, 194, 194, 0.1);--animation-duration:500;--tooltip-background-color:rgba(74, 74, 82, 0.9);--tooltip-title-color:#C2C2C2;--tooltip-body-color:#C2C2C2;--tooltip-caret-size:8px;--tooltip-padding-x:8px;--tooltip-padding-y:8px;--doughnut-center-text-color:#C2C2C2;--doughnut-border-color:#ffffff;--chart-color-1:#FF9933;--chart-color-2:#B10CF2;--chart-color-3:#7DE442;--chart-color-4:#3780BF;--chart-color-5:#FA4C11;--chart-color-6:#FFE433;--chart-color-7:#8C8C8C;--chart-color-8:#5A54FF;--chart-color-9:#E53766;--chart-color-10:#648608;--chart-color-11:#48CBF7;--chart-color-12:#F3478E;--chart-color-13:#508BF7;--chart-color-14:#EFF748;--chart-color-15:#FF4043;--chart-color-16:#A7DB0B;--chart-color-17:#C2C2C2;--chart-color-18:#1578AD;--chart-color-19:#F2B530;--chart-color-20:#297835;--chart-color-21:#7045FF;--chart-color-22:#DD48F7;--chart-color-23:#09A8C0;--chart-color-24:#60E65C;--chart-color-25:#2960A3}' }}));

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

@@ -1,4 +1,3 @@
 import '@refinitiv-ui/elements/header/themes/solar/pearl';
 import '@refinitiv-ui/elements/layout/themes/solar/pearl';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-chart', styles: ':host{font-size:14px;--grid-line-color:rgba(213, 216, 219, 0.5);--zero-line-color:rgba(213, 216, 219, 0.5);--animation-duration:1000;--line-width:2px;--line-tension:0;--multi-dataset-border-color:#FFFFFF;--tooltip-background-color:rgba(72, 72, 72, 0.9);--tooltip-title-color:#C2C2C2;--tooltip-body-color:#C2C2C2;--tooltip-border-radius:0px;--tooltip-caret-size:7px;--tooltip-padding-x:7px;--tooltip-padding-y:5px;--tooltip-title-spacing:0;--legend-key-box-width:4px;--chart-color-1:#EE7600;--chart-color-2:#B10CF2;--chart-color-3:#309054;--chart-color-4:#3780BF;--chart-color-5:#FA4C11;--chart-color-6:#D9B500;--chart-color-7:#8C8C8C;--chart-color-8:#5A54FF;color:rgba(72,72,72,.8);--legend-key-box-width:12;--grid-line-color:rgba(72, 72, 72, 0.1);--zero-line-color:rgba(72, 72, 72, 0.1);--animation-duration:500;--tooltip-background-color:rgba(190, 195, 204, 0.9);--tooltip-title-color:#484848;--tooltip-body-color:#484848;--tooltip-caret-size:8px;--tooltip-padding-x:8px;--tooltip-padding-y:8px;--doughnut-center-text-color:#484848;--doughnut-border-color:#000000;--chart-color-1:#EE7600;--chart-color-2:#B10CF2;--chart-color-3:#309054;--chart-color-4:#3780BF;--chart-color-5:#FA4C11;--chart-color-6:#D9B500;--chart-color-7:#8C8C8C;--chart-color-8:#5A54FF;--chart-color-9:#E53766;--chart-color-10:#648608;--chart-color-11:#40B6DE;--chart-color-12:#F3478E;--chart-color-13:#508BF7;--chart-color-14:#AAB218;--chart-color-15:#FF4043;--chart-color-16:#80A808;--chart-color-17:#707070;--chart-color-18:#1578AC;--chart-color-19:#D9A22B;--chart-color-20:#297835;--chart-color-21:#7045FF;--chart-color-22:#DD48F7;--chart-color-23:#09A8C0;--chart-color-24:#4BB347;--chart-color-25:#2960A3}' }}));

package/lib/checkbox/index.d.ts

@@ -1,5 +1,5 @@
 import { JSXInterface } from '../jsx';
-import { ControlElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
+import { CSSResultGroup, ControlElement, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
 import '../icon/index.js';
 /**
  * Form control for selecting one or several options

package/lib/checkbox/index.js

@@ -1,11 +1,11 @@
 import { __decorate } from "tslib";
-import { ControlElement, html, css } from '@refinitiv-ui/core';
+import { ControlElement, 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 { registerOverflowTooltip } from '../tooltip/index.js';
 import '../icon/index.js';
+import { registerOverflowTooltip } from '../tooltip/index.js';
+import { VERSION } from '../version.js';
 /**
  * Form control for selecting one or several options
  * @fires checked-changed - Fired when the user checks or unchecks the checkbox. The event is not fired if the `checked` property is changed programmatically.
@@ -47,24 +47,25 @@ let Checkbox = class Checkbox extends ControlElement {
       :host {
         display: inline-block;
       }
-      [part=check] {
+      [part='check'] {
         visibility: hidden;
       }
-      :host([checked]) [part=check],
-      :host([indeterminate]) [part=check] {
+      :host([checked]) [part='check'],
+      :host([indeterminate]) [part='check'] {
         visibility: inherit;
       }
-      [part=label],
-      [part=container] {
+      [part='label'],
+      [part='container'] {
         display: inline-block;
         vertical-align: middle;
       }
-      [part=label] {
+      [part='label'] {
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
       }
-      :host(:empty) [part=label], [part=label]:empty {
+      :host(:empty) [part='label'],
+      [part='label']:empty {
         display: none;
       }
     `;
@@ -146,9 +147,7 @@ let Checkbox = class Checkbox extends ControlElement {
     render() {
         return html `
       <div part="container">
-        <div part="check">
-          ${!this.indeterminate ? html `<ef-icon icon="tick"></ef-icon>` : null}
-        </div>
+        <div part="check">${!this.indeterminate ? html `<ef-icon icon="tick"></ef-icon>` : null}</div>
       </div>
       <div part="label"><slot></slot></div>
     `;

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

@@ -1,4 +1,3 @@
 import '@refinitiv-ui/elements/icon/themes/halo/dark';
 import '@refinitiv-ui/elements/tooltip/themes/halo/dark';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-checkbox', styles: ':host{margin:1px 0;vertical-align:middle;display:inline-flex;align-items:center;flex-wrap:nowrap;font-size:inherit;font-weight:inherit;touch-action:manipulation;--check-color:#6678FF;color:#ccc}:host(:focus){outline:0}:host [part=container]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:0;background-color:#0d0d0d;transition:box-shadow 150ms,border-color 150ms;box-shadow:inset 0 0 0 rgba(0,0,0,.5);-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;border:1px solid #404040;width:14px;height:14px}:host [part=check]{display:flex;justify-content:center;align-items:center;box-sizing:border-box;color:var(--check-color,#6678ff);width:95%;height:95%}:host [part=label]{margin:0 7px;cursor:default}:host([indeterminate]) [part=check]{border:none;background-color:currentColor;transform:none;border-radius:1px;margin:0;width:70%;height:1px}:host([disabled]) [part=check],:host([readonly]) [part=check]{color:var(--check-color,#ccc)}:host([disabled]) [part=check]{opacity:.5}:host([disabled][checked]) [part=check]{opacity:.5}:host([disabled]) [part=label]{opacity:.65}@media (pointer:fine){:host(:focus) [part=container]{border-color:#334bff;box-shadow:0 0 0 #334bff}}:host(:not([readonly])) [part=container]{cursor:pointer}:host(:hover:not([checked]):not([indeterminate]):not([readonly])) [part=container]{border-color:grey}:host(:hover:not([readonly])){color:#fff}:host([disabled]),:host([disabled]) [part=label]{opacity:.5}:host([checked]) [part=container]{border:1px solid #334bff}:host(:focus[readonly]:not([checked])) [part=container]{border-color:#404040}:host([focused=visible]){outline:#334bff solid 1px;outline-offset:2px}:host([indeterminate]) [part=container]{border:1px solid #334bff}:host(:focus[readonly]) [part=container],:host(:focus[readonly][indeterminate]) [part=container]{border-color:#334bff}' }}));

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

@@ -1,4 +1,3 @@
 import '@refinitiv-ui/elements/icon/themes/halo/light';
 import '@refinitiv-ui/elements/tooltip/themes/halo/light';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-checkbox', styles: ':host{margin:1px 0;vertical-align:middle;display:inline-flex;align-items:center;flex-wrap:nowrap;font-size:inherit;font-weight:inherit;touch-action:manipulation;--check-color:#334BFF;color:#404040}:host(:focus){outline:0}:host [part=container]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:0;background-color:#fff;transition:box-shadow 150ms,border-color 150ms;box-shadow:inset 0 0 0 rgba(0,0,0,.25);-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;border:1px solid #595959;width:14px;height:14px}:host [part=check]{display:flex;justify-content:center;align-items:center;box-sizing:border-box;color:var(--check-color,#334bff);width:95%;height:95%}:host [part=label]{margin:0 7px;cursor:default}:host([indeterminate]) [part=check]{border:none;background-color:currentColor;transform:none;border-radius:1px;margin:0;width:70%;height:1px}:host([disabled]) [part=check],:host([readonly]) [part=check]{color:var(--check-color,#404040)}:host([disabled]) [part=check]{opacity:.5}:host([disabled][checked]) [part=check]{opacity:.5}:host([disabled]) [part=label]{opacity:.65}@media (pointer:fine){:host(:focus) [part=container]{border-color:#334bff;box-shadow:0 0 0 #334bff}}:host(:not([readonly])) [part=container]{cursor:pointer}:host(:hover:not([checked]):not([indeterminate]):not([readonly])) [part=container]{border-color:#0d0d0d}:host(:hover:not([readonly])){color:#0d0d0d}:host([disabled]),:host([disabled]) [part=label]{opacity:.5}:host([checked]) [part=container]{border:1px solid #334bff}:host(:focus[readonly]:not([checked])) [part=container]{border-color:#595959}:host([focused=visible]){outline:#334bff solid 1px;outline-offset:2px}:host([indeterminate]) [part=container]{border:1px solid #334bff}:host(:focus[readonly]) [part=container],:host(:focus[readonly][indeterminate]) [part=container]{border-color:#334bff}' }}));

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

@@ -1,4 +1,3 @@
 import '@refinitiv-ui/elements/icon/themes/solar/charcoal';
 import '@refinitiv-ui/elements/tooltip/themes/solar/charcoal';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-checkbox', styles: ':host{margin:1px 0;vertical-align:middle;display:inline-flex;align-items:center;flex-wrap:nowrap;font-size:inherit;font-weight:inherit;touch-action:manipulation}:host(:focus){outline:0}:host [part=container]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:0;background-color:#000;transition:box-shadow 150ms,border-color 150ms;box-shadow:inset 0 0 0 rgba(0,0,0,.6);-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;border:1px solid #4a4a52;height:11px;width:11px}:host [part=check]{display:flex;justify-content:center;align-items:center;box-sizing:border-box;color:var(--check-color,#f93);border-width:0 2px 2px 0;width:95%;height:95%}:host [part=label]{cursor:default;margin:0 4px}:host([indeterminate]) [part=check]{border:none;background-color:currentColor;transform:none;border-radius:1px;margin:0;width:5px;height:5px}:host([disabled]) [part=check],:host([readonly]) [part=check]{color:var(--check-color,#e2e2e2)}:host([disabled]) [part=check]{opacity:.5}:host([disabled][checked]) [part=check]{opacity:.5}:host([disabled]) [part=label]{opacity:.65;color:rgba(194,194,194,.6)}:host([disabled][checked]) [part=check],:host([disabled][indeterminate]) [part=check]{color:#c2c2c2}:host([readonly][checked]) [part=check],:host([readonly][indeterminate]) [part=check]{color:rgba(194,194,194,.5)}:host([disabled]) [part=container],:host([readonly]) [part=container]{color:rgba(194,194,194,.6);border-color:rgba(74,74,82,.6);background-color:rgba(0,0,0,.6)}@media (pointer:fine){:host(:focus) [part=container]{box-shadow:0 0 0 #f93;border:1px dotted #f93}}' }}));

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

@@ -1,4 +1,3 @@
 import '@refinitiv-ui/elements/icon/themes/solar/pearl';
 import '@refinitiv-ui/elements/tooltip/themes/solar/pearl';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-checkbox', styles: ':host{margin:1px 0;vertical-align:middle;display:inline-flex;align-items:center;flex-wrap:nowrap;font-size:inherit;font-weight:inherit;touch-action:manipulation}:host(:focus){outline:0}:host [part=container]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:0;background-color:#fff;transition:box-shadow 150ms,border-color 150ms;box-shadow:inset 0 0 0 rgba(0,0,0,.3);-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;border:1px solid #a9afba;height:11px;width:11px}:host [part=check]{display:flex;justify-content:center;align-items:center;box-sizing:border-box;color:var(--check-color,#ee7600);border-width:0 2px 2px 0;width:95%;height:95%}:host [part=label]{cursor:default;margin:0 4px}:host([indeterminate]) [part=check]{border:none;background-color:currentColor;transform:none;border-radius:1px;margin:0;width:5px;height:5px}:host([disabled]) [part=check],:host([readonly]) [part=check]{color:var(--check-color,#acafb5)}:host([disabled]) [part=check]{opacity:.5}:host([disabled][checked]) [part=check]{opacity:.5}:host([disabled]) [part=label]{opacity:.65;color:rgba(72,72,72,.6)}:host([disabled][checked]) [part=check],:host([disabled][indeterminate]) [part=check]{color:#a9afba}:host([readonly][checked]) [part=check],:host([readonly][indeterminate]) [part=check]{color:rgba(169,175,186,.5)}:host([disabled]) [part=container],:host([readonly]) [part=container]{color:rgba(72,72,72,.6);border-color:rgba(169,175,186,.6);background-color:rgba(255,255,255,.6)}@media (pointer:fine){:host(:focus) [part=container]{box-shadow:0 0 0 #ffb266;border:1px dotted #ffb266}}' }}));