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

package/lib/button/index.d.ts

@@ -1,20 +1,20 @@
 import { JSXInterface } from '../jsx';
-import { ControlElement, CSSResult, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
-import '../icon';
+import { ControlElement, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
+import '../icon/index.js';
 /**
  * Use button for actions in forms, dialogs,
  * and more with support for different states and styles.
  * @attr {boolean} disabled - Set state to disabled
  * @prop {boolean} [disabled=false] - Set state to disabled
+ * @fires active-changed - Dispatched on changing `active` property state by taping on button when property `toggles` is true.
  */
 export declare class Button extends ControlElement {
     /**
-     * A `CSSResult` that will be used
-     * to style the host, slotted children
-     * and the internal template of the element.
-     * @return {CSSResult | CSSResult[]} CSS template
+     * Element version number
+     * @returns version number
      */
-    static get styles(): CSSResult | CSSResult[];
+    static get version(): string;
+    protected readonly defaultRole = "button";
     /**
      * Customises text alignment when specified alongside `icon` property
      * Value can be `before` or `after`
@@ -52,6 +52,23 @@ export declare class Button extends ControlElement {
      * Get native label element from shadow roots
      */
     private labelElement;
+    /**
+     * Aria indicating state of toggle button
+     * @ignore
+     */
+    ariaPressed: string;
+    /**
+     * Aria indicating state of toggle button.
+     * Used when role is radio.
+     * @ignore
+     */
+    ariaChecked: string;
+    /**
+     * Updates the element
+     * @param changedProperties Properties that has changed
+     * @returns {void}
+     */
+    protected update(changedProperties: PropertyValues): void;
     /**
      * the lifecycle method called when properties changed first time
      * @param changedProperties properties it's the Map object which has the updated properties
@@ -63,18 +80,6 @@ export declare class Button extends ControlElement {
      * @returns {void}
      */
     private onDefaultSlotChangeHandler;
-    /**
-     * Handle keydown event
-     * @param event the keyboard event
-     * @returns {void}
-     */
-    private onKeyUpHandler;
-    /**
-     * Check key names
-     * @param key the keyboard key
-     * @returns true if space or enter pressed
-     */
-    private isReturnOrSpaceKey;
     /**
      * Handle active property, when toggles is true
      * @returns {void}
@@ -128,4 +133,6 @@ declare global {
       'ef-button': Partial<Button> | JSXInterface.ControlHTMLAttributes<Button>;
     }
   }
-}
+}
+
+export {};

package/lib/button/index.js

@@ -1,21 +1,32 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
+import { __decorate } from "tslib";
+import { ControlElement, html } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { VERSION } from '../version.js';
+import { registerOverflowTooltip } from '../tooltip/index.js';
+import '../icon/index.js';
+/**
+ * Return the attribute that converted from the property
+ * Prevent empty string that reflected to attribute
+ * @private
+ * @param value value from the property
+ * @returns string converted to attribute
+ */
+const emptyStringToNull = function (value) {
+    return value || null;
 };
-import { ControlElement, css, customElement, html, property, query } from '@refinitiv-ui/core';
-import '../icon';
-import { registerOverflowTooltip } from '../tooltip';
 /**
  * Use button for actions in forms, dialogs,
  * and more with support for different states and styles.
  * @attr {boolean} disabled - Set state to disabled
  * @prop {boolean} [disabled=false] - Set state to disabled
+ * @fires active-changed - Dispatched on changing `active` property state by taping on button when property `toggles` is true.
  */
 let Button = class Button extends ControlElement {
     constructor() {
         super(...arguments);
+        this.defaultRole = 'button';
         /**
          * Customises text alignment when specified alongside `icon` property
          * Value can be `before` or `after`
@@ -50,66 +61,39 @@ let Button = class Button extends ControlElement {
          */
         this.empty = false;
         /**
-         * Handle the slotchange event of default slot
-         * @returns {void}
-         */
-        this.onDefaultSlotChangeHandler = () => {
-            this.emptyComputed();
-        };
-        /**
-         * Handle keydown event
-         * @param event the keyboard event
-         * @returns {void}
-         */
-        this.onKeyUpHandler = (event) => {
-            if (this.isReturnOrSpaceKey(event.key)) {
-                this.click();
-            }
-        };
-        /**
-         * Handle active property, when toggles is true
-         * @returns {void}
-         */
-        this.toggleActive = () => {
-            if (this.toggles) {
-                this.active = !this.active;
-                /**
-                 * Fired on changing `active` property state by taping on button when property `toggles` is true.
-                 * Provides new state of `active` property in detail.value field
-                 */
-                this.dispatchEvent(new CustomEvent('active-changed', {
-                    detail: { value: this.active }
-                }));
-            }
-        };
-        /**
-         * Set pressed attribute
-         * @returns {void}
+         * Aria indicating state of toggle button
+         * @ignore
          */
-        this.setPressed = () => {
-            this.setAttribute('pressed', '');
-        };
+        this.ariaPressed = '';
         /**
-         * Remove pressed attribute
-         * @returns {void}
+         * Aria indicating state of toggle button.
+         * Used when role is radio.
+         * @ignore
          */
-        this.unsetPressed = () => {
-            this.removeAttribute('pressed');
-        };
+        this.ariaChecked = '';
     }
     /**
-     * A `CSSResult` that will be used
-     * to style the host, slotted children
-     * and the internal template of the element.
-     * @return {CSSResult | CSSResult[]} CSS template
+     * Element version number
+     * @returns version number
      */
-    static get styles() {
-        return css `
-      :host(:not(:hover)) #hover-icon,
-      :host(:hover) [part=icon]:not(#hover-icon) {
-        display: none;
-      }
-    `;
+    static get version() {
+        return VERSION;
+    }
+    /**
+     * Updates the element
+     * @param changedProperties Properties that has changed
+     * @returns {void}
+     */
+    update(changedProperties) {
+        if (changedProperties.has('active') && this.toggles || changedProperties.has('toggles') && this.toggles) {
+            if (this.getAttribute('role') === 'radio') {
+                this.ariaChecked = String(this.active);
+            }
+            else {
+                this.ariaPressed = String(this.active);
+            }
+        }
+        super.update(changedProperties);
     }
     /**
      * the lifecycle method called when properties changed first time
@@ -121,20 +105,42 @@ let Button = class Button extends ControlElement {
         this.addEventListener('tap', this.toggleActive);
         this.addEventListener('tapstart', this.setPressed);
         this.addEventListener('tapend', this.unsetPressed);
-        this.addEventListener('keyup', this.onKeyUpHandler);
         this.emptyComputed();
         registerOverflowTooltip(this.labelElement, () => this.textContent);
     }
     /**
-     * Check key names
-     * @param key the keyboard key
-     * @returns true if space or enter pressed
+     * Handle the slotchange event of default slot
+     * @returns {void}
      */
-    isReturnOrSpaceKey(key) {
-        return key === ' '
-            || key === 'Spacebar'
-            || key === 'Enter'
-            || key === 'Return';
+    onDefaultSlotChangeHandler() {
+        this.emptyComputed();
+    }
+    /**
+     * Handle active property, when toggles is true
+     * @returns {void}
+     */
+    toggleActive() {
+        if (this.toggles) {
+            this.active = !this.active;
+            /**
+             * Fired on changing `active` property state by taping on button when property `toggles` is true.
+             */
+            this.notifyPropertyChange('active', this.active);
+        }
+    }
+    /**
+     * Set pressed attribute
+     * @returns {void}
+     */
+    setPressed() {
+        this.setAttribute('pressed', '');
+    }
+    /**
+     * Remove pressed attribute
+     * @returns {void}
+     */
+    unsetPressed() {
+        this.removeAttribute('pressed');
     }
     /**
      * Compute empty property based on textContent
@@ -182,8 +188,7 @@ let Button = class Button extends ControlElement {
      */
     render() {
         return html `
-      ${this.iconTemplate}
-      ${this.hoverIconTemplate}
+      ${this.hoverIcon ? html `${this.iconTemplate} ${this.hoverIconTemplate}` : this.iconTemplate}
       <span part="label">
         <slot @slotchange="${this.onDefaultSlotChangeHandler}"></slot>
       </span>
@@ -214,10 +219,23 @@ __decorate([
 __decorate([
     query('[part="label"]')
 ], Button.prototype, "labelElement", void 0);
+__decorate([
+    property({ type: String,
+        reflect: true,
+        attribute: 'aria-pressed',
+        converter: { toAttribute: emptyStringToNull } // TODO: Remove after typescript update to allow nullable for ARIAMixin
+    })
+], Button.prototype, "ariaPressed", void 0);
+__decorate([
+    property({ type: String,
+        reflect: true,
+        attribute: 'aria-checked',
+        converter: { toAttribute: emptyStringToNull } // TODO: Remove after typescript update to allow nullable for ARIAMixin
+    })
+], Button.prototype, "ariaChecked", void 0);
 Button = __decorate([
     customElement('ef-button', {
         alias: 'coral-button'
     })
 ], Button);
 export { Button };
-//# sourceMappingURL=index.js.map

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

@@ -1,3 +1,3 @@
 import '@refinitiv-ui/elements/lib/icon/themes/halo/dark';
 
-elf.customStyles.define('ef-button', ':host{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;background-color:#333;color:#ccc;border:1px solid #0d0d0d;height:24px;box-shadow:0 0 0 0 rgba(0,0,0,.5);padding:0 12px;outline:0;font-family:inherit;font-size:12rem;font-weight:400;min-width:60px;margin:1px 0;transition:120ms;text-align:center;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;vertical-align:bottom;position:relative;overflow:hidden;touch-action:manipulation}:host [part=icon]{flex:none;opacity:inherit;min-width:16px}:host(:not([empty])) [part=label]{white-space:inherit;overflow:inherit;text-overflow:inherit;min-width:0;flex:1 1 auto}:host([cta]){background-color:#0d0d0d;color:#ccc;border-color:grey;box-shadow:0 0 0 0 rgba(0,0,0,.5);outline:0}:host([toggles]){background-color:#333;color:#ccc;border-color:#0d0d0d;box-shadow:0 0 0 0 rgba(0,0,0,.5);outline:0}:host([toggles][active]){background-color:#334bff;color:#fff;border-color:#0d0d0d;box-shadow:0 0 0 0 rgba(0,0,0,.5);outline:0}:host([empty][icon]){min-width:24px;padding:0}:host(:not([cta])[empty][icon][transparent]){background:0 0!important;box-shadow:none!important;border:none!important;color:#ccc}:host(:not([cta])[empty][icon][transparent]:not(:focus)){border-color:transparent!important}@media (-ms-high-contrast:none),(pointer:fine){:host(:hover) #icon{display:none}:host(:not(:hover)) #hover-icon{display:none}:host(:focus:not([focused])),:host([focused=visible]){background-color:#333;color:#fff;box-shadow:none;border-color:#0d0d0d;outline:0}:host(:hover){background-color:#334bff;color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.8)}:host(:hover:not(:focus)){border-color:#334bff;outline:0}:host([cta]:focus:not([focused])),:host([cta][focused=visible]){background-color:#0d0d0d;color:#fff;box-shadow:none;border-color:#0d0d0d;outline:0}:host([cta]:hover){background-color:#334bff;color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.8)}:host([cta]:hover:not(:focus)){border-color:#334bff;outline:0}:host([toggles]:focus:not([focused])),:host([toggles][focused=visible]){background-color:#333;color:#fff;box-shadow:none;border-color:#0d0d0d;outline:0}:host([toggles]:hover){background-color:#334bff;color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.8)}:host([toggles]:hover:not(:focus)){border-color:#334bff;outline:0}:host([toggles][active]:focus:not([focused])),:host([toggles][active][focused=visible]){background-color:#334bff;color:#fff;box-shadow:none;border-color:#0d0d0d;outline:0}:host([toggles][active]:hover){background-color:#334bff;color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.8)}:host([toggles][active]:hover:not(:focus)){border-color:#334bff;outline:0}:host(:not([cta])[empty][icon][transparent]:focus:not([focused])),:host(:not([cta])[empty][icon][transparent][focused=visible]){background-color:transparent;color:#fff;box-shadow:none;border-color:#0d0d0d;outline:0}:host(:not([cta])[empty][icon][transparent]:hover){background-color:#334bff;color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.8)}:host(:not([cta])[empty][icon][transparent]:hover:not(:focus)){border-color:#334bff;outline:0}:host(:not([cta])[empty][icon][transparent][toggles][active]:focus:not([focused])),:host(:not([cta])[empty][icon][transparent][toggles][active][focused=visible]){background-color:transparent;color:#fff;box-shadow:none;border-color:#0d0d0d;outline:0}:host(:not([cta])[empty][icon][transparent][toggles][active]:hover){background-color:#334bff;color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.8)}:host(:not([cta])[empty][icon][transparent][toggles][active]:hover:not(:focus)){border-color:#334bff;outline:0}}@media all{:host(:active){background-color:#0f1e8a;color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.5)}:host(:active:not(:focus)){border-color:#0d0d0d;outline:0}:host([disabled]){background-color:#333;color:#ccc;border-color:#0d0d0d;box-shadow:none;outline:0;pointer-events:none}:host([cta]:active){background-color:#0f1e8a;color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.5)}:host([cta]:active:not(:focus)){border-color:#0d0d0d;outline:0}:host([cta][disabled]){background-color:#0d0d0d;color:#ccc;border-color:#0d0d0d;box-shadow:none;outline:0;pointer-events:none}:host([toggles]:active){background-color:#0f1e8a;color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.5)}:host([toggles]:active:not(:focus)){border-color:#0d0d0d;outline:0}:host([toggles][disabled]){background-color:#333;color:#ccc;border-color:#0d0d0d;box-shadow:none;outline:0;pointer-events:none}:host([toggles][active]:active){background-color:#0f1e8a;color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.5)}:host([toggles][active]:active:not(:focus)){border-color:#0d0d0d;outline:0}:host([toggles][active][disabled]){background-color:#334bff;color:#fff;border-color:#0d0d0d;box-shadow:none;outline:0;pointer-events:none}:host(:not([cta])[empty][icon][transparent]:active){background-color:#0f1e8a;color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.5)}:host(:not([cta])[empty][icon][transparent]:active:not(:focus)){border-color:#0d0d0d;outline:0}:host(:not([cta])[empty][icon][transparent][disabled]){background-color:transparent;color:#333;border-color:#0d0d0d;box-shadow:none;outline:0;pointer-events:none}:host(:not([cta])[empty][icon][transparent][toggles][active]:active){background-color:#0f1e8a;color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.5)}:host(:not([cta])[empty][icon][transparent][toggles][active]:active:not(:focus)){border-color:#0d0d0d;outline:0}:host(:not([cta])[empty][icon][transparent][toggles][active][disabled]){background-color:transparent;color:#334bff;border-color:#0d0d0d;box-shadow:none;outline:0;pointer-events:none}}:host(:not([empty])[icon][textpos=before]) [part=icon]{order:1}:host(:not([empty])[icon][textpos=after]) [part=label]{padding-left:.3em}:host(:not([empty])[icon][textpos=before]) [part=label]{padding-right:.3em}:host [part=label]{line-height:22px}:host([toggles]:hover:not(:focus)){border-color:#0d0d0d}:host([toggles][active]:focus){color:#fff}:host([toggles]:focus:not([focused])),:host([toggles][active][focused=visible]){color:#ccc}:host([cta]:hover){border-color:#334bff}:host([cta]:active){border-color:#0d0d0d}:host([icon]:not([toggles])[cta][transparent]) [part=icon]{color:#ccc}:host([icon]:hover[transparent]) [empty]{color:#fff}:host([icon]:hover[transparent][cta]) [part=icon]{color:#fff}:host([icon]:hover[transparent][cta][toggles]) [part=icon]{color:#fff}@media (pointer:coarse){:host(:hover) #icon[icon]{display:block}:host(:hover) #hover-icon{display:none}:host(:hover[transparent][cta]:not([toggles]):not(:active)){background-color:#0d0d0d;border-color:transparent}:host(:hover[transparent][cta][toggles]){border-color:#0d0d0d}:host(:hover[transparent][cta][toggles]:not([active]):not(:active)) [part=icon]{color:#ccc}}:host([toggles][active][transparent]){color:#fff}:host([toggles][active][transparent]:not(:focus)){color:#6678ff}:host([toggles][active][transparent]:hover){color:#fff}:host([toggles][active][transparent][cta]){color:#fff}:host(:not(:hover):not(:focus):not(:active):not([cta])[transparent]){background-color:transparent;border-color:transparent}:host(:not([cta])[empty][icon][transparent][toggles][active]){color:#6678ff}:host(:not([cta])[empty][icon][transparent][toggles][active]:hover),:host(:not([cta])[empty][icon][transparent][toggles][active][focused=visible]),:host(:not([cta])[empty][icon][transparent][toggles][active][focused]){color:#334bff}:host(:not([cta])[empty][icon][transparent]:not([active]):hover){color:#fff}:host(:not([cta])[empty][icon][transparent][disabled]){color:#ccc}:host([disabled]){opacity:.5}:host([disabled][transparent][empty]){color:#ccc}:host([disabled][cta]:not([empty])){color:rgba(204,204,204,.5);opacity:1;background-color:#0d0d0d;border-color:grey}:host([disabled][cta]:not([empty])) [part=icon]{color:inherit}:host([disabled][cta][icon][empty]:not([toggles])){border-color:grey}:host(:not([cta])[empty][icon][transparent]:active:not(:focus)){background-color:transparent!important}:host(:not([cta])[empty][icon][transparent]:hover:not(:focus)){background-color:transparent!important;border-color:transparent!important}:host(:focus:not([focused])),:host([cta][focused=visible]),:host([focused=visible]),:host([toggles][focused=visible]){border-color:#0d0d0d;background-color:#334bff;color:#fff}');
+elf.customStyles.define('ef-button', ':host{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;background-color:#333;color:#ccc;border:1px solid #0d0d0d;height:24px;box-shadow:0 0 0 0 rgba(0,0,0,.5);padding:0 12px;outline:0;font-family:inherit;font-size:12rem;font-weight:400;min-width:60px;margin:1px 0;transition:120ms;text-align:center;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;vertical-align:bottom;position:relative;overflow:hidden;touch-action:manipulation}:host [part=icon]{flex:none;opacity:inherit;min-width:16px}:host(:not([empty])) [part=label]{white-space:inherit;overflow:inherit;text-overflow:inherit;min-width:0;flex:1 1 auto}:host([hover-icon]) #hover-icon{display:none}:host([cta]){background-color:#0d0d0d;color:#ccc;border-color:grey;box-shadow:0 0 0 0 rgba(0,0,0,.5);outline:0}:host([toggles]){background-color:#333;color:#ccc;border-color:#0d0d0d;box-shadow:0 0 0 0 rgba(0,0,0,.5);outline:0}:host([toggles][active]){background-color:#334bff;color:#fff;border-color:#0d0d0d;box-shadow:0 0 0 0 rgba(0,0,0,.5);outline:0}:host([empty][icon]){min-width:24px;padding:0}:host(:not([cta])[empty][icon][transparent]){background:0 0!important;box-shadow:none!important;border:none!important;color:#ccc}:host(:not([cta])[empty][icon][transparent]:not(:focus)){border-color:transparent!important}@media (-ms-high-contrast:none),(pointer:fine){:host([hover-icon]:hover) #icon{display:none}:host([hover-icon]:hover) #hover-icon{display:block}:host(:focus:not([focused])),:host([focused=visible]){background-color:#333;color:#fff;box-shadow:none;border-color:#0d0d0d;outline:0}:host(:hover){background-color:#334bff;color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.8)}:host(:hover:not(:focus)){border-color:#334bff;outline:0}:host([cta]:focus:not([focused])),:host([cta][focused=visible]){background-color:#0d0d0d;color:#fff;box-shadow:none;border-color:#0d0d0d;outline:0}:host([cta]:hover){background-color:#334bff;color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.8)}:host([cta]:hover:not(:focus)){border-color:#334bff;outline:0}:host([toggles]:focus:not([focused])),:host([toggles][focused=visible]){background-color:#333;color:#fff;box-shadow:none;border-color:#0d0d0d;outline:0}:host([toggles]:hover){background-color:#334bff;color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.8)}:host([toggles]:hover:not(:focus)){border-color:#334bff;outline:0}:host([toggles][active]:focus:not([focused])),:host([toggles][active][focused=visible]){background-color:#334bff;color:#fff;box-shadow:none;border-color:#0d0d0d;outline:0}:host([toggles][active]:hover){background-color:#334bff;color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.8)}:host([toggles][active]:hover:not(:focus)){border-color:#334bff;outline:0}:host(:not([cta])[empty][icon][transparent]:focus:not([focused])),:host(:not([cta])[empty][icon][transparent][focused=visible]){background-color:transparent;color:#fff;box-shadow:none;border-color:#0d0d0d;outline:0}:host(:not([cta])[empty][icon][transparent]:hover){background-color:#334bff;color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.8)}:host(:not([cta])[empty][icon][transparent]:hover:not(:focus)){border-color:#334bff;outline:0}:host(:not([cta])[empty][icon][transparent][toggles][active]:focus:not([focused])),:host(:not([cta])[empty][icon][transparent][toggles][active][focused=visible]){background-color:transparent;color:#fff;box-shadow:none;border-color:#0d0d0d;outline:0}:host(:not([cta])[empty][icon][transparent][toggles][active]:hover){background-color:#334bff;color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.8)}:host(:not([cta])[empty][icon][transparent][toggles][active]:hover:not(:focus)){border-color:#334bff;outline:0}}@media all{:host(:active){background-color:#0f1e8a;color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.5)}:host(:active:not(:focus)){border-color:#0d0d0d;outline:0}:host([disabled]){background-color:#333;color:#ccc;border-color:#0d0d0d;box-shadow:none;outline:0;pointer-events:none}:host([cta]:active){background-color:#0f1e8a;color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.5)}:host([cta]:active:not(:focus)){border-color:#0d0d0d;outline:0}:host([cta][disabled]){background-color:#0d0d0d;color:#ccc;border-color:#0d0d0d;box-shadow:none;outline:0;pointer-events:none}:host([toggles]:active){background-color:#0f1e8a;color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.5)}:host([toggles]:active:not(:focus)){border-color:#0d0d0d;outline:0}:host([toggles][disabled]){background-color:#333;color:#ccc;border-color:#0d0d0d;box-shadow:none;outline:0;pointer-events:none}:host([toggles][active]:active){background-color:#0f1e8a;color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.5)}:host([toggles][active]:active:not(:focus)){border-color:#0d0d0d;outline:0}:host([toggles][active][disabled]){background-color:#334bff;color:#fff;border-color:#0d0d0d;box-shadow:none;outline:0;pointer-events:none}:host(:not([cta])[empty][icon][transparent]:active){background-color:#0f1e8a;color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.5)}:host(:not([cta])[empty][icon][transparent]:active:not(:focus)){border-color:#0d0d0d;outline:0}:host(:not([cta])[empty][icon][transparent][disabled]){background-color:transparent;color:#333;border-color:#0d0d0d;box-shadow:none;outline:0;pointer-events:none}:host(:not([cta])[empty][icon][transparent][toggles][active]:active){background-color:#0f1e8a;color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.5)}:host(:not([cta])[empty][icon][transparent][toggles][active]:active:not(:focus)){border-color:#0d0d0d;outline:0}:host(:not([cta])[empty][icon][transparent][toggles][active][disabled]){background-color:transparent;color:#334bff;border-color:#0d0d0d;box-shadow:none;outline:0;pointer-events:none}}:host(:not([empty])[icon][textpos=before]) [part=icon]{order:1}:host(:not([empty])[icon][textpos=after]) [part=label]{padding-left:.3em}:host(:not([empty])[icon][textpos=before]) [part=label]{padding-right:.3em}:host [part=label]{line-height:22px}:host([toggles]:hover:not(:focus)){border-color:#0d0d0d}:host([toggles][active]:focus){color:#fff}:host([toggles]:focus:not([focused])),:host([toggles][active][focused=visible]){color:#ccc}:host([cta]:hover){border-color:#334bff}:host([cta]:active){border-color:#0d0d0d}:host([icon]:not([toggles])[cta][transparent]) [part=icon]{color:#ccc}:host([icon]:hover[transparent]) [empty]{color:#fff}:host([icon]:hover[transparent][cta]) [part=icon]{color:#fff}:host([icon]:hover[transparent][cta][toggles]) [part=icon]{color:#fff}@media (pointer:coarse){:host(:hover[transparent][cta]:not([toggles]):not(:active)){background-color:#0d0d0d;border-color:transparent}:host(:hover[transparent][cta][toggles]){border-color:#0d0d0d}:host(:hover[transparent][cta][toggles]:not([active]):not(:active)) [part=icon]{color:#ccc}}:host([toggles][active][transparent]){color:#fff}:host([toggles][active][transparent]:not(:focus)){color:#6678ff}:host([toggles][active][transparent]:hover){color:#fff}:host([toggles][active][transparent][cta]){color:#fff}:host(:not(:hover):not(:focus):not(:active):not([cta])[transparent]){background-color:transparent;border-color:transparent}:host(:not([cta])[empty][icon][transparent][toggles][active]){color:#6678ff}:host(:not([cta])[empty][icon][transparent][toggles][active]:hover),:host(:not([cta])[empty][icon][transparent][toggles][active][focused=visible]),:host(:not([cta])[empty][icon][transparent][toggles][active][focused]){color:#334bff}:host(:not([cta])[empty][icon][transparent]:not([active]):hover){color:#fff}:host(:not([cta])[empty][icon][transparent][disabled]){color:#ccc}:host([disabled]){opacity:.5}:host([disabled][transparent][empty]){color:#ccc}:host([disabled][cta]:not([empty])){color:#ccc;background-color:#0d0d0d;border-color:grey}:host([disabled][cta]:not([empty])) [part=icon]{color:inherit}:host([disabled][cta][icon][empty]:not([toggles])){border-color:grey}:host(:not([cta])[empty][icon][transparent]:active:not(:focus)){background-color:transparent!important}:host(:not([cta])[empty][icon][transparent]:hover:not(:focus)){background-color:transparent!important;border-color:transparent!important}:host(:focus:not([focused])),:host([cta][focused=visible]),:host([focused=visible]),:host([toggles][focused=visible]){border-color:#0d0d0d;background-color:#334bff;color:#fff}');

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

@@ -1,3 +1,3 @@
 import '@refinitiv-ui/elements/lib/icon/themes/halo/light';
 
-elf.customStyles.define('ef-button', ':host{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;background-color:#fafafa;color:#0d0d0d;border:1px solid #ccc;height:24px;box-shadow:0 0 0 0 rgba(0,0,0,.25);padding:0 12px;outline:0;font-family:inherit;font-size:12rem;font-weight:400;min-width:60px;margin:1px 0;transition:120ms;text-align:center;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;vertical-align:bottom;position:relative;overflow:hidden;touch-action:manipulation}:host [part=icon]{flex:none;opacity:inherit;min-width:16px}:host(:not([empty])) [part=label]{white-space:inherit;overflow:inherit;text-overflow:inherit;min-width:0;flex:1 1 auto}:host([cta]){background-color:#0d0d0d;color:#ccc;border-color:#0d0d0d;box-shadow:0 0 0 0 rgba(0,0,0,.25);outline:0}:host([toggles]){background-color:#fafafa;color:#0d0d0d;border-color:#ccc;box-shadow:0 0 0 0 rgba(0,0,0,.25);outline:0}:host([toggles][active]){background-color:#334bff;color:#fff;border-color:#ccc;box-shadow:0 0 0 0 rgba(0,0,0,.25);outline:0}:host([empty][icon]){min-width:24px;padding:0}:host(:not([cta])[empty][icon][transparent]){background:0 0!important;box-shadow:none!important;border:none!important;color:#595959}:host(:not([cta])[empty][icon][transparent]:not(:focus)){border-color:transparent!important}@media (-ms-high-contrast:none),(pointer:fine){:host(:hover) #icon{display:none}:host(:not(:hover)) #hover-icon{display:none}:host(:focus:not([focused])),:host([focused=visible]){background-color:#fafafa;color:#000;box-shadow:none;border-color:#ccc;outline:0}:host(:hover){background-color:#334bff;color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.55)}:host(:hover:not(:focus)){border-color:#334bff;outline:0}:host([cta]:focus:not([focused])),:host([cta][focused=visible]){background-color:#0d0d0d;color:#000;box-shadow:none;border-color:#ccc;outline:0}:host([cta]:hover){background-color:#334bff;color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.55)}:host([cta]:hover:not(:focus)){border-color:#334bff;outline:0}:host([toggles]:focus:not([focused])),:host([toggles][focused=visible]){background-color:#fafafa;color:#000;box-shadow:none;border-color:#ccc;outline:0}:host([toggles]:hover){background-color:#334bff;color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.55)}:host([toggles]:hover:not(:focus)){border-color:#334bff;outline:0}:host([toggles][active]:focus:not([focused])),:host([toggles][active][focused=visible]){background-color:#334bff;color:#000;box-shadow:none;border-color:#ccc;outline:0}:host([toggles][active]:hover){background-color:#334bff;color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.55)}:host([toggles][active]:hover:not(:focus)){border-color:#334bff;outline:0}:host(:not([cta])[empty][icon][transparent]:focus:not([focused])),:host(:not([cta])[empty][icon][transparent][focused=visible]){background-color:transparent;color:#000;box-shadow:none;border-color:#ccc;outline:0}:host(:not([cta])[empty][icon][transparent]:hover){background-color:#334bff;color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.55)}:host(:not([cta])[empty][icon][transparent]:hover:not(:focus)){border-color:#334bff;outline:0}:host(:not([cta])[empty][icon][transparent][toggles][active]:focus:not([focused])),:host(:not([cta])[empty][icon][transparent][toggles][active][focused=visible]){background-color:transparent;color:#000;box-shadow:none;border-color:#ccc;outline:0}:host(:not([cta])[empty][icon][transparent][toggles][active]:hover){background-color:#334bff;color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.55)}:host(:not([cta])[empty][icon][transparent][toggles][active]:hover:not(:focus)){border-color:#334bff;outline:0}}@media all{:host(:active){background-color:#0f1e8a;color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.25)}:host(:active:not(:focus)){border-color:#ccc;outline:0}:host([disabled]){background-color:#fafafa;color:#0d0d0d;border-color:#ccc;box-shadow:none;outline:0;pointer-events:none}:host([cta]:active){background-color:#0f1e8a;color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.25)}:host([cta]:active:not(:focus)){border-color:#ccc;outline:0}:host([cta][disabled]){background-color:#0d0d0d;color:#ccc;border-color:#ccc;box-shadow:none;outline:0;pointer-events:none}:host([toggles]:active){background-color:#0f1e8a;color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.25)}:host([toggles]:active:not(:focus)){border-color:#ccc;outline:0}:host([toggles][disabled]){background-color:#fafafa;color:#0d0d0d;border-color:#ccc;box-shadow:none;outline:0;pointer-events:none}:host([toggles][active]:active){background-color:#0f1e8a;color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.25)}:host([toggles][active]:active:not(:focus)){border-color:#ccc;outline:0}:host([toggles][active][disabled]){background-color:#334bff;color:#fff;border-color:#ccc;box-shadow:none;outline:0;pointer-events:none}:host(:not([cta])[empty][icon][transparent]:active){background-color:#0f1e8a;color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.25)}:host(:not([cta])[empty][icon][transparent]:active:not(:focus)){border-color:#ccc;outline:0}:host(:not([cta])[empty][icon][transparent][disabled]){background-color:transparent;color:#fafafa;border-color:#ccc;box-shadow:none;outline:0;pointer-events:none}:host(:not([cta])[empty][icon][transparent][toggles][active]:active){background-color:#0f1e8a;color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.25)}:host(:not([cta])[empty][icon][transparent][toggles][active]:active:not(:focus)){border-color:#ccc;outline:0}:host(:not([cta])[empty][icon][transparent][toggles][active][disabled]){background-color:transparent;color:#334bff;border-color:#ccc;box-shadow:none;outline:0;pointer-events:none}}:host(:not([empty])[icon][textpos=before]) [part=icon]{order:1}:host(:not([empty])[icon][textpos=after]) [part=label]{padding-left:.3em}:host(:not([empty])[icon][textpos=before]) [part=label]{padding-right:.3em}:host [part=label]{line-height:22px}:host([toggles]:hover:not(:focus)){border-color:#ccc}:host([toggles][active]:focus){color:#fff}:host([toggles]:focus:not([focused])),:host([toggles][active][focused=visible]){color:#0d0d0d}:host([cta]:hover){border-color:#334bff}:host([cta]:active){border-color:#ccc}:host([icon]:not([toggles])[cta][transparent]) [part=icon]{color:#ccc}:host([icon]:hover[transparent]) [empty]{color:#0d0d0d}:host([icon]:hover[transparent][cta]) [part=icon]{color:#fff}:host([icon]:hover[transparent][cta][toggles]) [part=icon]{color:#fff}@media (pointer:coarse){:host(:hover) #icon[icon]{display:block}:host(:hover) #hover-icon{display:none}:host(:hover[transparent][cta]:not([toggles]):not(:active)){background-color:#0d0d0d;border-color:transparent}:host(:hover[transparent][cta][toggles]){border-color:#ccc}:host(:hover[transparent][cta][toggles]:not([active]):not(:active)) [part=icon]{color:#0d0d0d}}:host([toggles][active][transparent]){color:#fff}:host([toggles][active][transparent]:not(:focus)){color:#6678ff}:host([toggles][active][transparent]:hover){color:#fff}:host([toggles][active][transparent][cta]){color:#fff}:host(:not(:hover):not(:focus):not(:active):not([cta])[transparent]){background-color:transparent;border-color:transparent}:host(:not([cta])[empty][icon][transparent][toggles][active]){color:#6678ff}:host(:not([cta])[empty][icon][transparent][toggles][active]:hover),:host(:not([cta])[empty][icon][transparent][toggles][active][focused=visible]),:host(:not([cta])[empty][icon][transparent][toggles][active][focused]){color:#334bff}:host(:not([cta])[empty][icon][transparent]:not([active]):hover){color:#0d0d0d}:host(:not([cta])[empty][icon][transparent][disabled]){color:#595959}:host([disabled]){opacity:.5}:host([disabled][transparent][empty]){color:#595959}:host([disabled][cta]:not([empty])){color:rgba(204,204,204,.5);opacity:1;background-color:#0d0d0d;border-color:#0d0d0d}:host([disabled][cta]:not([empty])) [part=icon]{color:inherit}:host([disabled][cta][icon][empty]:not([toggles])){border-color:#0d0d0d}:host(:not([cta])[empty][icon][transparent]:active:not(:focus)){background-color:transparent!important}:host(:not([cta])[empty][icon][transparent]:hover:not(:focus)){background-color:transparent!important;border-color:transparent!important}:host(:focus:not([focused])),:host([cta][focused=visible]),:host([focused=visible]),:host([toggles][focused=visible]){border-color:#ccc;background-color:#334bff;color:#fff}');
+elf.customStyles.define('ef-button', ':host{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;background-color:#fafafa;color:#0d0d0d;border:1px solid #ccc;height:24px;box-shadow:0 0 0 0 rgba(0,0,0,.25);padding:0 12px;outline:0;font-family:inherit;font-size:12rem;font-weight:400;min-width:60px;margin:1px 0;transition:120ms;text-align:center;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;vertical-align:bottom;position:relative;overflow:hidden;touch-action:manipulation}:host [part=icon]{flex:none;opacity:inherit;min-width:16px}:host(:not([empty])) [part=label]{white-space:inherit;overflow:inherit;text-overflow:inherit;min-width:0;flex:1 1 auto}:host([hover-icon]) #hover-icon{display:none}:host([cta]){background-color:#0d0d0d;color:#ccc;border-color:#0d0d0d;box-shadow:0 0 0 0 rgba(0,0,0,.25);outline:0}:host([toggles]){background-color:#fafafa;color:#0d0d0d;border-color:#ccc;box-shadow:0 0 0 0 rgba(0,0,0,.25);outline:0}:host([toggles][active]){background-color:#334bff;color:#fff;border-color:#ccc;box-shadow:0 0 0 0 rgba(0,0,0,.25);outline:0}:host([empty][icon]){min-width:24px;padding:0}:host(:not([cta])[empty][icon][transparent]){background:0 0!important;box-shadow:none!important;border:none!important;color:#595959}:host(:not([cta])[empty][icon][transparent]:not(:focus)){border-color:transparent!important}@media (-ms-high-contrast:none),(pointer:fine){:host([hover-icon]:hover) #icon{display:none}:host([hover-icon]:hover) #hover-icon{display:block}:host(:focus:not([focused])),:host([focused=visible]){background-color:#fafafa;color:#000;box-shadow:none;border-color:#ccc;outline:0}:host(:hover){background-color:#334bff;color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.55)}:host(:hover:not(:focus)){border-color:#334bff;outline:0}:host([cta]:focus:not([focused])),:host([cta][focused=visible]){background-color:#0d0d0d;color:#000;box-shadow:none;border-color:#ccc;outline:0}:host([cta]:hover){background-color:#334bff;color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.55)}:host([cta]:hover:not(:focus)){border-color:#334bff;outline:0}:host([toggles]:focus:not([focused])),:host([toggles][focused=visible]){background-color:#fafafa;color:#000;box-shadow:none;border-color:#ccc;outline:0}:host([toggles]:hover){background-color:#334bff;color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.55)}:host([toggles]:hover:not(:focus)){border-color:#334bff;outline:0}:host([toggles][active]:focus:not([focused])),:host([toggles][active][focused=visible]){background-color:#334bff;color:#000;box-shadow:none;border-color:#ccc;outline:0}:host([toggles][active]:hover){background-color:#334bff;color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.55)}:host([toggles][active]:hover:not(:focus)){border-color:#334bff;outline:0}:host(:not([cta])[empty][icon][transparent]:focus:not([focused])),:host(:not([cta])[empty][icon][transparent][focused=visible]){background-color:transparent;color:#000;box-shadow:none;border-color:#ccc;outline:0}:host(:not([cta])[empty][icon][transparent]:hover){background-color:#334bff;color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.55)}:host(:not([cta])[empty][icon][transparent]:hover:not(:focus)){border-color:#334bff;outline:0}:host(:not([cta])[empty][icon][transparent][toggles][active]:focus:not([focused])),:host(:not([cta])[empty][icon][transparent][toggles][active][focused=visible]){background-color:transparent;color:#000;box-shadow:none;border-color:#ccc;outline:0}:host(:not([cta])[empty][icon][transparent][toggles][active]:hover){background-color:#334bff;color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.55)}:host(:not([cta])[empty][icon][transparent][toggles][active]:hover:not(:focus)){border-color:#334bff;outline:0}}@media all{:host(:active){background-color:#0f1e8a;color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.25)}:host(:active:not(:focus)){border-color:#ccc;outline:0}:host([disabled]){background-color:#fafafa;color:#0d0d0d;border-color:#ccc;box-shadow:none;outline:0;pointer-events:none}:host([cta]:active){background-color:#0f1e8a;color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.25)}:host([cta]:active:not(:focus)){border-color:#ccc;outline:0}:host([cta][disabled]){background-color:#0d0d0d;color:#ccc;border-color:#ccc;box-shadow:none;outline:0;pointer-events:none}:host([toggles]:active){background-color:#0f1e8a;color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.25)}:host([toggles]:active:not(:focus)){border-color:#ccc;outline:0}:host([toggles][disabled]){background-color:#fafafa;color:#0d0d0d;border-color:#ccc;box-shadow:none;outline:0;pointer-events:none}:host([toggles][active]:active){background-color:#0f1e8a;color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.25)}:host([toggles][active]:active:not(:focus)){border-color:#ccc;outline:0}:host([toggles][active][disabled]){background-color:#334bff;color:#fff;border-color:#ccc;box-shadow:none;outline:0;pointer-events:none}:host(:not([cta])[empty][icon][transparent]:active){background-color:#0f1e8a;color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.25)}:host(:not([cta])[empty][icon][transparent]:active:not(:focus)){border-color:#ccc;outline:0}:host(:not([cta])[empty][icon][transparent][disabled]){background-color:transparent;color:#fafafa;border-color:#ccc;box-shadow:none;outline:0;pointer-events:none}:host(:not([cta])[empty][icon][transparent][toggles][active]:active){background-color:#0f1e8a;color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.25)}:host(:not([cta])[empty][icon][transparent][toggles][active]:active:not(:focus)){border-color:#ccc;outline:0}:host(:not([cta])[empty][icon][transparent][toggles][active][disabled]){background-color:transparent;color:#334bff;border-color:#ccc;box-shadow:none;outline:0;pointer-events:none}}:host(:not([empty])[icon][textpos=before]) [part=icon]{order:1}:host(:not([empty])[icon][textpos=after]) [part=label]{padding-left:.3em}:host(:not([empty])[icon][textpos=before]) [part=label]{padding-right:.3em}:host [part=label]{line-height:22px}:host([toggles]:hover:not(:focus)){border-color:#ccc}:host([toggles][active]:focus){color:#fff}:host([toggles]:focus:not([focused])),:host([toggles][active][focused=visible]){color:#0d0d0d}:host([cta]:hover){border-color:#334bff}:host([cta]:active){border-color:#ccc}:host([icon]:not([toggles])[cta][transparent]) [part=icon]{color:#ccc}:host([icon]:hover[transparent]) [empty]{color:#0d0d0d}:host([icon]:hover[transparent][cta]) [part=icon]{color:#fff}:host([icon]:hover[transparent][cta][toggles]) [part=icon]{color:#fff}@media (pointer:coarse){:host(:hover[transparent][cta]:not([toggles]):not(:active)){background-color:#0d0d0d;border-color:transparent}:host(:hover[transparent][cta][toggles]){border-color:#ccc}:host(:hover[transparent][cta][toggles]:not([active]):not(:active)) [part=icon]{color:#0d0d0d}}:host([toggles][active][transparent]){color:#fff}:host([toggles][active][transparent]:not(:focus)){color:#6678ff}:host([toggles][active][transparent]:hover){color:#fff}:host([toggles][active][transparent][cta]){color:#fff}:host(:not(:hover):not(:focus):not(:active):not([cta])[transparent]){background-color:transparent;border-color:transparent}:host(:not([cta])[empty][icon][transparent][toggles][active]){color:#6678ff}:host(:not([cta])[empty][icon][transparent][toggles][active]:hover),:host(:not([cta])[empty][icon][transparent][toggles][active][focused=visible]),:host(:not([cta])[empty][icon][transparent][toggles][active][focused]){color:#334bff}:host(:not([cta])[empty][icon][transparent]:not([active]):hover){color:#0d0d0d}:host(:not([cta])[empty][icon][transparent][disabled]){color:#595959}:host([disabled]){opacity:.5}:host([disabled][transparent][empty]){color:#595959}:host([disabled][cta]:not([empty])){color:#ccc;background-color:#0d0d0d;border-color:#0d0d0d}:host([disabled][cta]:not([empty])) [part=icon]{color:inherit}:host([disabled][cta][icon][empty]:not([toggles])){border-color:#0d0d0d}:host(:not([cta])[empty][icon][transparent]:active:not(:focus)){background-color:transparent!important}:host(:not([cta])[empty][icon][transparent]:hover:not(:focus)){background-color:transparent!important;border-color:transparent!important}:host(:focus:not([focused])),:host([cta][focused=visible]),:host([focused=visible]),:host([toggles][focused=visible]){border-color:#ccc;background-color:#334bff;color:#fff}');

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

@@ -1,3 +1,3 @@
 import '@refinitiv-ui/elements/lib/icon/themes/solar/charcoal';
 
-elf.customStyles.define('ef-button', ':host{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:0 0 0 0 rgba(0,0,0,.6);font-family:inherit;min-width:23px;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;touch-action:manipulation}:host [part=icon]{flex:none}:host(:not([empty])) [part=label]{white-space:inherit;overflow:inherit;text-overflow:inherit;min-width:0;flex:1 1 auto}@media (pointer:coarse){:host(:hover) #icon[icon]{display:block}:host(:hover) #hover-icon{display:none}}:host([empty][icon]){min-width:23px;padding:0}:host(:not([cta])[empty][icon][transparent]){background:0 0!important;box-shadow:none!important;border:none!important;color:#c2c2c2}:host(:not([cta])[empty][icon][transparent]:not(:focus)){border-color:transparent!important}:host(:not([cta])[empty][icon][transparent][toggles][active]){color:rgba(0,0,0,.07)}:host(:not([empty])[icon][textpos=before]) [part=icon]{order:1}:host(:not([empty])[icon][textpos=after]) [part=label]{padding-left:.3em}:host(:not([empty])[icon][textpos=before]) [part=label]{padding-right:.3em}:host{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;background-color:#3c3c42;color:#c2c2c2;border:1px solid #000;height:23px;box-shadow:0 0 0 0 rgba(0,0,0,.6);padding:0 8px;outline:0;font-family:inherit;font-size:13rem;font-weight:400;min-width:23px;margin:1px 0;transition:70ms;text-align:center;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;vertical-align:bottom;position:relative;overflow:hidden;background-image:linear-gradient(rgba(255,255,255,.1) 10%,rgba(255,255,255,0) 100%)}:host([cta]){background-color:#f93;color:#0a0a0a;border-color:#000;box-shadow:0 0 0 0 rgba(0,0,0,.6);outline:0;background-image:linear-gradient(rgba(255,255,255,.1) 10%,rgba(255,255,255,0) 100%)}:host([toggles]){background-color:#3c3c42;color:#c2c2c2;border-color:#000;box-shadow:0 0 0 0 rgba(0,0,0,.6);outline:0}:host([toggles][active]){border-color:#000;box-shadow:0 0 0 0 rgba(0,0,0,.6);outline:0;color:#f93!important;background-color:#38383d!important;background-image:linear-gradient(rgba(255,255,255,0) 0,rgba(255,255,255,.1) 90%)}@media all{:host(:not([cta])[empty][icon][transparent]:active){background-color:rgba(0,0,0,.07);color:#3c3c42;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host(:not([cta])[empty][icon][transparent]:active:not(:focus)){border-color:#000;outline:0}:host(:not([cta])[empty][icon][transparent][disabled]){background-color:transparent;color:#3c3c42;border-color:#333;box-shadow:none;outline:0;pointer-events:none}:host(:not([cta])[empty][icon][transparent][toggles][active]:active){background-color:rgba(0,0,0,.07);color:rgba(0,0,0,.07);box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host(:not([cta])[empty][icon][transparent][toggles][active]:active:not(:focus)){border-color:#000;outline:0}:host(:not([cta])[empty][icon][transparent][toggles][active][disabled]){background-color:transparent;color:rgba(0,0,0,.07);border-color:#333;box-shadow:none;outline:0;pointer-events:none}:host(:active){background-color:#38383d;color:#c2c2c2;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host(:active:not(:focus)){border-color:#000;outline:0}:host([disabled]){background-color:#3c3c42;color:#c2c2c2;border-color:#333;box-shadow:none;outline:0;pointer-events:none}:host([cta]:active){background-color:#ed8e2f;color:#0a0a0a;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host([cta]:active:not(:focus)){border-color:#000;outline:0}:host([cta][disabled]){background-color:#f93;color:#0a0a0a;border-color:#333;box-shadow:none;outline:0;pointer-events:none}:host([toggles]:active){background-color:#38383d;color:#c2c2c2;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host([toggles]:active:not(:focus)){border-color:#000;outline:0}:host([toggles][disabled]){background-color:#3c3c42;color:#c2c2c2;border-color:#333;box-shadow:none;outline:0;pointer-events:none}:host([toggles][active]:active){background-color:#343439;color:#f93;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host([toggles][active]:active:not(:focus)){border-color:#000;outline:0}:host([toggles][active][disabled]){background-color:#38383d;color:#f93;border-color:#333;box-shadow:none;outline:0;pointer-events:none}}:host([cta]:active){background-color:#f93;background-image:linear-gradient(rgba(255,255,255,.1) 10%,rgba(255,255,255,0) 100%)}:host([cta][disabled]){opacity:.4}:host([disabled]){opacity:.4;border-color:#000}:host(:active){background-image:linear-gradient(rgba(255,255,255,.1) 10%,rgba(255,255,255,0) 100%)}:host(:not([cta])[empty][icon][transparent][disabled]){color:#c2c2c2}@media (-ms-high-contrast:none),(pointer:fine){:host(:hover) #icon{display:none}:host(:not(:hover)) #hover-icon{display:none}:host(:not([cta])[empty][icon][transparent]:focus:not([focused])),:host(:not([cta])[empty][icon][transparent][focused=visible]){background-color:transparent;color:#c2c2c2;box-shadow:inset 0 0 0 1px #000;border-color:#f93;outline:0}:host(:not([cta])[empty][icon][transparent]:hover){background-color:rgba(18,18,18,0);box-shadow:0 0 0 0 rgba(0,0,0,.9);color:#e2e2e2}:host(:not([cta])[empty][icon][transparent]:hover:not(:focus)){border-color:#000;outline:0}:host(:not([cta])[empty][icon][transparent][toggles][active]:focus:not([focused])),:host(:not([cta])[empty][icon][transparent][toggles][active][focused=visible]){background-color:transparent;color:#c2c2c2;box-shadow:inset 0 0 0 1px #000;border-color:#f93;outline:0}:host(:not([cta])[empty][icon][transparent][toggles][active]:hover){background-color:rgba(18,18,18,0);color:#e2e2e2;box-shadow:0 0 0 0 rgba(0,0,0,.9)}:host(:not([cta])[empty][icon][transparent][toggles][active]:hover:not(:focus)){border-color:#000;outline:0}:host(:focus:not([focused])),:host([focused=visible]){background-color:#3c3c42;color:#c2c2c2;box-shadow:inset 0 0 0 1px #000;border-color:#f93;outline:0;border-style:dotted;box-shadow:inset 0 0 0 1px #000}:host(:hover){background-color:#4d4d55;color:#e2e2e2;box-shadow:0 0 0 0 rgba(0,0,0,.9)}:host(:hover:not(:focus)){border-color:#000;outline:0}:host([cta]:focus:not([focused])),:host([cta][focused=visible]){background-color:#f93;box-shadow:inset 0 0 0 1px #000;outline:0;border-color:#000;box-shadow:inset 0 0 0 1px #000;color:#0a0a0a}:host([cta]:hover){background-color:#ffab57;box-shadow:0 0 0 0 rgba(0,0,0,.9);color:#0a0a0a}:host([cta]:hover:not(:focus)){border-color:#000;outline:0}:host([toggles]:focus:not([focused])),:host([toggles][focused=visible]){background-color:#3c3c42;color:#c2c2c2;box-shadow:inset 0 0 0 1px #000;border-color:#f93;outline:0}:host([toggles]:hover){background-color:#4d4d55;color:#e2e2e2;box-shadow:0 0 0 0 rgba(0,0,0,.9)}:host([toggles]:hover:not(:focus)){border-color:#000;outline:0}:host([toggles][active]:focus:not([focused])),:host([toggles][active][focused=visible]){background-color:#38383d;color:#c2c2c2;box-shadow:inset 0 0 0 1px #000;border-color:#f93;outline:0}:host([toggles][active]:hover){background-color:#494950;color:#e2e2e2;box-shadow:0 0 0 0 rgba(0,0,0,.9)}:host([toggles][active]:hover:not(:focus)){border-color:#000;outline:0}}');
+elf.customStyles.define('ef-button', ':host{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:0 0 0 0 rgba(0,0,0,.6);font-family:inherit;min-width:23px;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;touch-action:manipulation}:host [part=icon]{flex:none}:host(:not([empty])) [part=label]{white-space:inherit;overflow:inherit;text-overflow:inherit;min-width:0;flex:1 1 auto}:host([hover-icon]) #hover-icon{display:none}:host([empty][icon]){min-width:23px;padding:0}:host(:not([cta])[empty][icon][transparent]){background:0 0!important;box-shadow:none!important;border:none!important;color:#c2c2c2}:host(:not([cta])[empty][icon][transparent]:not(:focus)){border-color:transparent!important}:host(:not([cta])[empty][icon][transparent][toggles][active]){color:rgba(0,0,0,.07)}:host(:not([empty])[icon][textpos=before]) [part=icon]{order:1}:host(:not([empty])[icon][textpos=after]) [part=label]{padding-left:.3em}:host(:not([empty])[icon][textpos=before]) [part=label]{padding-right:.3em}:host{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;background-color:#3c3c42;color:#c2c2c2;border:1px solid #000;height:23px;box-shadow:0 0 0 0 rgba(0,0,0,.6);padding:0 8px;outline:0;font-family:inherit;font-size:13rem;font-weight:400;min-width:23px;margin:1px 0;transition:70ms;text-align:center;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;vertical-align:bottom;position:relative;overflow:hidden;background-image:linear-gradient(rgba(255,255,255,.1) 10%,rgba(255,255,255,0) 100%)}:host([cta]){background-color:#f93;color:#0a0a0a;border-color:#000;box-shadow:0 0 0 0 rgba(0,0,0,.6);outline:0;background-image:linear-gradient(rgba(255,255,255,.1) 10%,rgba(255,255,255,0) 100%)}:host([toggles]){background-color:#3c3c42;color:#c2c2c2;border-color:#000;box-shadow:0 0 0 0 rgba(0,0,0,.6);outline:0}:host([toggles][active]){border-color:#000;box-shadow:0 0 0 0 rgba(0,0,0,.6);outline:0;color:#f93!important;background-color:#38383d!important;background-image:linear-gradient(rgba(255,255,255,0) 0,rgba(255,255,255,.1) 90%)}@media all{:host(:not([cta])[empty][icon][transparent]:active){background-color:rgba(0,0,0,.07);color:#3c3c42;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host(:not([cta])[empty][icon][transparent]:active:not(:focus)){border-color:#000;outline:0}:host(:not([cta])[empty][icon][transparent][disabled]){background-color:transparent;color:#3c3c42;border-color:#333;box-shadow:none;outline:0;pointer-events:none}:host(:not([cta])[empty][icon][transparent][toggles][active]:active){background-color:rgba(0,0,0,.07);color:rgba(0,0,0,.07);box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host(:not([cta])[empty][icon][transparent][toggles][active]:active:not(:focus)){border-color:#000;outline:0}:host(:not([cta])[empty][icon][transparent][toggles][active][disabled]){background-color:transparent;color:rgba(0,0,0,.07);border-color:#333;box-shadow:none;outline:0;pointer-events:none}:host(:active){background-color:#38383d;color:#c2c2c2;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host(:active:not(:focus)){border-color:#000;outline:0}:host([disabled]){background-color:#3c3c42;color:#c2c2c2;border-color:#333;box-shadow:none;outline:0;pointer-events:none}:host([cta]:active){background-color:#ed8e2f;color:#0a0a0a;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host([cta]:active:not(:focus)){border-color:#000;outline:0}:host([cta][disabled]){background-color:#f93;color:#0a0a0a;border-color:#333;box-shadow:none;outline:0;pointer-events:none}:host([toggles]:active){background-color:#38383d;color:#c2c2c2;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host([toggles]:active:not(:focus)){border-color:#000;outline:0}:host([toggles][disabled]){background-color:#3c3c42;color:#c2c2c2;border-color:#333;box-shadow:none;outline:0;pointer-events:none}:host([toggles][active]:active){background-color:#343439;color:#f93;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host([toggles][active]:active:not(:focus)){border-color:#000;outline:0}:host([toggles][active][disabled]){background-color:#38383d;color:#f93;border-color:#333;box-shadow:none;outline:0;pointer-events:none}}:host([cta]:active){background-color:#f93;background-image:linear-gradient(rgba(0,0,0,.3) 0,rgba(0,0,0,0) 100%)}:host([cta][disabled]){opacity:.4}:host([disabled]){opacity:.4;border-color:#000}:host(:active){background-image:linear-gradient(rgba(255,255,255,.1) 10%,rgba(255,255,255,0) 100%)}:host(:not([cta])[empty][icon][transparent][disabled]){color:#c2c2c2}@media (-ms-high-contrast:none),(pointer:fine){:host([hover-icon]:hover) #icon{display:none}:host([hover-icon]:hover) #hover-icon{display:block}:host(:not([cta])[empty][icon][transparent]:focus:not([focused])),:host(:not([cta])[empty][icon][transparent][focused=visible]){background-color:transparent;color:#c2c2c2;box-shadow:inset 0 0 0 1px #000;border-color:#f93;outline:0}:host(:not([cta])[empty][icon][transparent]:hover){background-color:rgba(18,18,18,0);box-shadow:0 0 0 0 rgba(0,0,0,.9);color:#e2e2e2}:host(:not([cta])[empty][icon][transparent]:hover:not(:focus)){border-color:#000;outline:0}:host(:not([cta])[empty][icon][transparent][toggles][active]:focus:not([focused])),:host(:not([cta])[empty][icon][transparent][toggles][active][focused=visible]){background-color:transparent;color:#c2c2c2;box-shadow:inset 0 0 0 1px #000;border-color:#f93;outline:0}:host(:not([cta])[empty][icon][transparent][toggles][active]:hover){background-color:rgba(18,18,18,0);color:#e2e2e2;box-shadow:0 0 0 0 rgba(0,0,0,.9)}:host(:not([cta])[empty][icon][transparent][toggles][active]:hover:not(:focus)){border-color:#000;outline:0}:host(:focus:not([focused])),:host([focused=visible]){background-color:#3c3c42;color:#c2c2c2;box-shadow:inset 0 0 0 1px #000;border-color:#f93;outline:0;border-style:dotted;box-shadow:inset 0 0 0 1px #000}:host(:hover){background-color:#4d4d55;color:#e2e2e2;box-shadow:0 0 0 0 rgba(0,0,0,.9)}:host(:hover:not(:focus)){border-color:#000;outline:0}:host([cta]:focus:not([focused])),:host([cta][focused=visible]){background-color:#f93;box-shadow:inset 0 0 0 1px #000;outline:0;border-color:#000;box-shadow:inset 0 0 0 1px #000;color:#0a0a0a}:host([cta]:hover){background-color:#ffab57;box-shadow:0 0 0 0 rgba(0,0,0,.9);color:#0a0a0a}:host([cta]:hover:not(:focus)){border-color:#000;outline:0}:host([toggles]:focus:not([focused])),:host([toggles][focused=visible]){background-color:#3c3c42;color:#c2c2c2;box-shadow:inset 0 0 0 1px #000;border-color:#f93;outline:0}:host([toggles]:hover){background-color:#4d4d55;color:#e2e2e2;box-shadow:0 0 0 0 rgba(0,0,0,.9)}:host([toggles]:hover:not(:focus)){border-color:#000;outline:0}:host([toggles][active]:focus:not([focused])),:host([toggles][active][focused=visible]){background-color:#38383d;color:#c2c2c2;box-shadow:inset 0 0 0 1px #000;border-color:#f93;outline:0}:host([toggles][active]:hover){background-color:#494950;color:#e2e2e2;box-shadow:0 0 0 0 rgba(0,0,0,.9)}:host([toggles][active]:hover:not(:focus)){border-color:#000;outline:0}}:host(:not([readonly]):active){background-color:#38383d;color:#c2c2c2;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host([cta]:not([readonly]):active){background-color:#f93;color:#0a0a0a}:host([toggles]:not([readonly]):active){background-color:#3c3c42;color:#c2c2c2}:host([toggles][active]:not([readonly]):active){background-color:#38383d;color:#f93}');

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

@@ -1,3 +1,3 @@
 import '@refinitiv-ui/elements/lib/icon/themes/solar/pearl';
 
-elf.customStyles.define('ef-button', ':host{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:0 0 0 0 rgba(0,0,0,.3);font-family:inherit;min-width:23px;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;touch-action:manipulation}:host [part=icon]{flex:none}:host(:not([empty])) [part=label]{white-space:inherit;overflow:inherit;text-overflow:inherit;min-width:0;flex:1 1 auto}@media (pointer:coarse){:host(:hover) #icon[icon]{display:block}:host(:hover) #hover-icon{display:none}}:host([empty][icon]){min-width:23px;padding:0}:host(:not([cta])[empty][icon][transparent]){background:0 0!important;box-shadow:none!important;border:none!important;color:#505050}:host(:not([cta])[empty][icon][transparent]:not(:focus)){border-color:transparent!important}:host(:not([cta])[empty][icon][transparent][toggles][active]){color:#fff}:host(:not([empty])[icon][textpos=before]) [part=icon]{order:1}:host(:not([empty])[icon][textpos=after]) [part=label]{padding-left:.3em}:host(:not([empty])[icon][textpos=before]) [part=label]{padding-right:.3em}:host{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;background-color:#fafbfc;color:#505050;border:1px solid #a9afba;height:23px;box-shadow:0 0 0 0 rgba(0,0,0,.3);padding:0 8px;outline:0;font-family:inherit;font-size:13rem;font-weight:400;min-width:23px;margin:1px 0;transition:70ms;text-align:center;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;vertical-align:bottom;position:relative;overflow:hidden;background-image:linear-gradient(rgba(0,0,0,0) 0,rgba(0,0,0,.1) 100%)}:host([cta]){background-color:#ffb266;color:#505050;border-color:#a9afba;box-shadow:0 0 0 0 rgba(0,0,0,.3);outline:0;background-image:linear-gradient(rgba(255,255,255,.4) 0,rgba(255,255,255,0) 100%)}:host([toggles]){background-color:#fafbfc;color:#505050;border-color:#a9afba;box-shadow:0 0 0 0 rgba(0,0,0,.3);outline:0}:host([toggles][active]){border-color:#a9afba;box-shadow:0 0 0 0 rgba(0,0,0,.3);outline:0;color:#f93!important;background-color:#fff!important;background-image:linear-gradient(rgba(0,0,0,.1) 0,rgba(0,0,0,0) 100%)}@media all{:host(:not([cta])[empty][icon][transparent]:active){background-color:#fff;color:#bac8d6;box-shadow:0 0 0 0 rgba(0,0,0,.3)}:host(:not([cta])[empty][icon][transparent]:active:not(:focus)){border-color:#a9afba;outline:0}:host(:not([cta])[empty][icon][transparent][disabled]){background-color:transparent;color:#fafbfc;border-color:#babfc8;box-shadow:none;outline:0;pointer-events:none}:host(:not([cta])[empty][icon][transparent][toggles][active]:active){background-color:#fff;color:#ccc;box-shadow:0 0 0 0 rgba(0,0,0,.3)}:host(:not([cta])[empty][icon][transparent][toggles][active]:active:not(:focus)){border-color:#a9afba;outline:0}:host(:not([cta])[empty][icon][transparent][toggles][active][disabled]){background-color:transparent;color:#fff;border-color:#babfc8;box-shadow:none;outline:0;pointer-events:none}:host(:active){background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.3)}:host(:active:not(:focus)){border-color:#a9afba;outline:0}:host([disabled]){background-color:#fafbfc;color:#505050;border-color:#babfc8;box-shadow:none;outline:0;pointer-events:none}:host([cta]:active){background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.3)}:host([cta]:active:not(:focus)){border-color:#a9afba;outline:0}:host([cta][disabled]){background-color:#ffb266;color:#505050;border-color:#babfc8;box-shadow:none;outline:0;pointer-events:none}:host([toggles]:active){background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.3)}:host([toggles]:active:not(:focus)){border-color:#a9afba;outline:0}:host([toggles][disabled]){background-color:#fafbfc;color:#505050;border-color:#babfc8;box-shadow:none;outline:0;pointer-events:none}:host([toggles][active]:active){background-color:#fff;color:#c60;box-shadow:0 0 0 0 rgba(0,0,0,.3)}:host([toggles][active]:active:not(:focus)){border-color:#a9afba;outline:0}:host([toggles][active][disabled]){background-color:#fff;color:#f93;border-color:#babfc8;box-shadow:none;outline:0;pointer-events:none}}:host([cta]:active){background-color:#ffb266;background-image:linear-gradient(rgba(255,255,255,0) 0,rgba(255,255,255,.4) 100%)}:host([cta][disabled]){opacity:.4}:host([disabled]){opacity:.4;border-color:#a9afba}:host(:active){background-image:none}:host(:not([cta])[empty][icon][transparent][disabled]){color:#505050}@media (-ms-high-contrast:none),(pointer:fine){:host(:hover) #icon{display:none}:host(:not(:hover)) #hover-icon{display:none}:host(:not([cta])[empty][icon][transparent]:focus:not([focused])),:host(:not([cta])[empty][icon][transparent][focused=visible]){background-color:transparent;color:#fafbfc;box-shadow:inset 0 0 0 1px #a9afba;border-color:#ee7600;outline:0}:host(:not([cta])[empty][icon][transparent]:hover){background-color:rgba(18,18,18,0);box-shadow:0 0 0 0 rgba(0,0,0,.6);color:#1d1d1d}:host(:not([cta])[empty][icon][transparent]:hover:not(:focus)){border-color:#a9afba;outline:0}:host(:not([cta])[empty][icon][transparent][toggles][active]:focus:not([focused])),:host(:not([cta])[empty][icon][transparent][toggles][active][focused=visible]){background-color:transparent;color:#fff;box-shadow:inset 0 0 0 1px #a9afba;border-color:#ee7600;outline:0}:host(:not([cta])[empty][icon][transparent][toggles][active]:hover){background-color:rgba(18,18,18,0);color:#ccc;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host(:not([cta])[empty][icon][transparent][toggles][active]:hover:not(:focus)){border-color:#a9afba;outline:0}:host(:focus:not([focused])),:host([focused=visible]){background-color:#fafbfc;color:#505050;box-shadow:inset 0 0 0 1px #a9afba;border-color:#ee7600;outline:0;border-style:dotted;box-shadow:inset 0 0 0 1px #a9afba}:host(:hover){background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host(:hover:not(:focus)){border-color:#a9afba;outline:0}:host([cta]:focus:not([focused])),:host([cta][focused=visible]){background-color:#ffb266;box-shadow:inset 0 0 0 1px #a9afba;outline:0;border-color:#a9afba;box-shadow:inset 0 0 0 1px #a9afba;color:#505050}:host([cta]:hover){background-color:#ffc48a;box-shadow:0 0 0 0 rgba(0,0,0,.6);color:#505050}:host([cta]:hover:not(:focus)){border-color:#a9afba;outline:0}:host([toggles]:focus:not([focused])),:host([toggles][focused=visible]){background-color:#fafbfc;color:#505050;box-shadow:inset 0 0 0 1px #a9afba;border-color:#ee7600;outline:0}:host([toggles]:hover){background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host([toggles]:hover:not(:focus)){border-color:#a9afba;outline:0}:host([toggles][active]:focus:not([focused])),:host([toggles][active][focused=visible]){background-color:#fff;color:#f93;box-shadow:inset 0 0 0 1px #a9afba;border-color:#ee7600;outline:0}:host([toggles][active]:hover){background-color:#fff;color:#c60;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host([toggles][active]:hover:not(:focus)){border-color:#a9afba;outline:0}}');
+elf.customStyles.define('ef-button', ':host{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:0 0 0 0 rgba(0,0,0,.3);font-family:inherit;min-width:23px;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;touch-action:manipulation}:host [part=icon]{flex:none}:host(:not([empty])) [part=label]{white-space:inherit;overflow:inherit;text-overflow:inherit;min-width:0;flex:1 1 auto}:host([hover-icon]) #hover-icon{display:none}:host([empty][icon]){min-width:23px;padding:0}:host(:not([cta])[empty][icon][transparent]){background:0 0!important;box-shadow:none!important;border:none!important;color:#505050}:host(:not([cta])[empty][icon][transparent]:not(:focus)){border-color:transparent!important}:host(:not([cta])[empty][icon][transparent][toggles][active]){color:#fff}:host(:not([empty])[icon][textpos=before]) [part=icon]{order:1}:host(:not([empty])[icon][textpos=after]) [part=label]{padding-left:.3em}:host(:not([empty])[icon][textpos=before]) [part=label]{padding-right:.3em}:host{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;background-color:#fafbfc;color:#505050;border:1px solid #a9afba;height:23px;box-shadow:0 0 0 0 rgba(0,0,0,.3);padding:0 8px;outline:0;font-family:inherit;font-size:13rem;font-weight:400;min-width:23px;margin:1px 0;transition:70ms;text-align:center;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;vertical-align:bottom;position:relative;overflow:hidden;background-image:linear-gradient(rgba(0,0,0,0) 0,rgba(0,0,0,.1) 100%)}:host([cta]){background-color:#ffb266;color:#505050;border-color:#a9afba;box-shadow:0 0 0 0 rgba(0,0,0,.3);outline:0;background-image:linear-gradient(rgba(255,255,255,.4) 0,rgba(255,255,255,0) 100%)}:host([toggles]){background-color:#fafbfc;color:#505050;border-color:#a9afba;box-shadow:0 0 0 0 rgba(0,0,0,.3);outline:0}:host([toggles][active]){border-color:#a9afba;box-shadow:0 0 0 0 rgba(0,0,0,.3);outline:0;color:#f93!important;background-color:#fff!important;background-image:linear-gradient(rgba(0,0,0,.1) 0,rgba(0,0,0,0) 100%)}@media all{:host(:not([cta])[empty][icon][transparent]:active){background-color:#fff;color:#bac8d6;box-shadow:0 0 0 0 rgba(0,0,0,.3)}:host(:not([cta])[empty][icon][transparent]:active:not(:focus)){border-color:#a9afba;outline:0}:host(:not([cta])[empty][icon][transparent][disabled]){background-color:transparent;color:#fafbfc;border-color:#babfc8;box-shadow:none;outline:0;pointer-events:none}:host(:not([cta])[empty][icon][transparent][toggles][active]:active){background-color:#fff;color:#ccc;box-shadow:0 0 0 0 rgba(0,0,0,.3)}:host(:not([cta])[empty][icon][transparent][toggles][active]:active:not(:focus)){border-color:#a9afba;outline:0}:host(:not([cta])[empty][icon][transparent][toggles][active][disabled]){background-color:transparent;color:#fff;border-color:#babfc8;box-shadow:none;outline:0;pointer-events:none}:host(:active){background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.3)}:host(:active:not(:focus)){border-color:#a9afba;outline:0}:host([disabled]){background-color:#fafbfc;color:#505050;border-color:#babfc8;box-shadow:none;outline:0;pointer-events:none}:host([cta]:active){background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.3)}:host([cta]:active:not(:focus)){border-color:#a9afba;outline:0}:host([cta][disabled]){background-color:#ffb266;color:#505050;border-color:#babfc8;box-shadow:none;outline:0;pointer-events:none}:host([toggles]:active){background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.3)}:host([toggles]:active:not(:focus)){border-color:#a9afba;outline:0}:host([toggles][disabled]){background-color:#fafbfc;color:#505050;border-color:#babfc8;box-shadow:none;outline:0;pointer-events:none}:host([toggles][active]:active){background-color:#fff;color:#c60;box-shadow:0 0 0 0 rgba(0,0,0,.3)}:host([toggles][active]:active:not(:focus)){border-color:#a9afba;outline:0}:host([toggles][active][disabled]){background-color:#fff;color:#f93;border-color:#babfc8;box-shadow:none;outline:0;pointer-events:none}}:host([cta]:active){background-color:#ffb266;background-image:linear-gradient(rgba(255,255,255,0) 0,rgba(255,255,255,.4) 100%)}:host([cta][disabled]){opacity:.4}:host([disabled]){opacity:.4;border-color:#a9afba}:host(:active){background-image:none}:host(:not([cta])[empty][icon][transparent][disabled]){color:#505050}@media (-ms-high-contrast:none),(pointer:fine){:host([hover-icon]:hover) #icon{display:none}:host([hover-icon]:hover) #hover-icon{display:block}:host(:not([cta])[empty][icon][transparent]:focus:not([focused])),:host(:not([cta])[empty][icon][transparent][focused=visible]){background-color:transparent;color:#fafbfc;box-shadow:inset 0 0 0 1px #a9afba;border-color:#ee7600;outline:0}:host(:not([cta])[empty][icon][transparent]:hover){background-color:rgba(18,18,18,0);box-shadow:0 0 0 0 rgba(0,0,0,.6);color:#1d1d1d}:host(:not([cta])[empty][icon][transparent]:hover:not(:focus)){border-color:#a9afba;outline:0}:host(:not([cta])[empty][icon][transparent][toggles][active]:focus:not([focused])),:host(:not([cta])[empty][icon][transparent][toggles][active][focused=visible]){background-color:transparent;color:#fff;box-shadow:inset 0 0 0 1px #a9afba;border-color:#ee7600;outline:0}:host(:not([cta])[empty][icon][transparent][toggles][active]:hover){background-color:rgba(18,18,18,0);color:#ccc;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host(:not([cta])[empty][icon][transparent][toggles][active]:hover:not(:focus)){border-color:#a9afba;outline:0}:host(:focus:not([focused])),:host([focused=visible]){background-color:#fafbfc;color:#505050;box-shadow:inset 0 0 0 1px #a9afba;border-color:#ee7600;outline:0;border-style:dotted;box-shadow:inset 0 0 0 1px #a9afba}:host(:hover){background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host(:hover:not(:focus)){border-color:#a9afba;outline:0}:host([cta]:focus:not([focused])),:host([cta][focused=visible]){background-color:#ffb266;box-shadow:inset 0 0 0 1px #a9afba;outline:0;border-color:#a9afba;box-shadow:inset 0 0 0 1px #a9afba;color:#505050}:host([cta]:hover){background-color:#ffc48a;box-shadow:0 0 0 0 rgba(0,0,0,.6);color:#505050}:host([cta]:hover:not(:focus)){border-color:#a9afba;outline:0}:host([toggles]:focus:not([focused])),:host([toggles][focused=visible]){background-color:#fafbfc;color:#505050;box-shadow:inset 0 0 0 1px #a9afba;border-color:#ee7600;outline:0}:host([toggles]:hover){background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host([toggles]:hover:not(:focus)){border-color:#a9afba;outline:0}:host([toggles][active]:focus:not([focused])),:host([toggles][active][focused=visible]){background-color:#fff;color:#f93;box-shadow:inset 0 0 0 1px #a9afba;border-color:#ee7600;outline:0}:host([toggles][active]:hover){background-color:#fff;color:#c60;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host([toggles][active]:hover:not(:focus)){border-color:#a9afba;outline:0}}:host(:not([readonly]):active){background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.3)}:host([cta]:not([readonly]):active){background-color:#ffb266;color:#505050}:host([toggles]:not([readonly]):active){background-color:#fafbfc;color:#505050}:host([toggles][active]:not([readonly]):active){background-color:#fff;color:#f93}');

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

@@ -0,0 +1,9 @@
+# ef-button-bar
+
+Used to display multiple buttons to create a list of commands bar.
+
+## Properties
+
+| Property  | Attribute | Type      | Default | Description                                      |
+|-----------|-----------|-----------|---------|--------------------------------------------------|
+| `managed` | `managed` | `boolean` | false   | Manages user interaction, only allowing one toggle button to be active at any one time. |

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

@@ -1,16 +1,26 @@
 import { JSXInterface } from '../jsx';
-import { BasicElement, TemplateResult, CSSResult, PropertyValues } from '@refinitiv-ui/core';
+import { BasicElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
 /**
  * Used to display multiple buttons to create a list of commands bar.
  */
 export declare class ButtonBar extends BasicElement {
     /**
-     * A `CSSResult` that will be used
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    /**
+     * Element's role attribute for accessibility
+     * `role` should be `radiogroup` when it is managed.
+     */
+    protected defaultRole: 'toolbar' | 'radiogroup';
+    /**
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template
      */
-    static get styles(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     /**
      * Manages user interaction, only allowing one toggle button to be active at any one time.
      */
@@ -25,6 +35,45 @@ export declare class ButtonBar extends BasicElement {
      * @returns {void}
      */
     protected firstUpdated(changedProperties: PropertyValues): void;
+    /**
+     * Handles key down event
+     * @param event Key down event object
+     * @returns {void}
+     */
+    private onKeyDown;
+    /**
+     * Navigate to next or previous focusable button
+     * @param direction next | down
+     * @returns {void}
+     */
+    private navigateToSibling;
+    /**
+     * Navigate to the first focusable button
+     * @returns {void}
+     */
+    private first;
+    /**
+     * Navigate to the last focusable button
+     * @returns {void}
+     */
+    private last;
+    /**
+     * Sets the tabindex to -1 for all buttons except the currently focused one.
+     * @param target the button to be focused
+     * @param buttons Array of Buttons that contains target
+     * @returns {void}
+     */
+    private rovingTabIndex;
+    /**
+     * Set tabIndex to all buttons
+     * @returns {void}
+     */
+    private manageTabIndex;
+    /**
+     * Check if button bar is nested, a.k.a. has parent button bar
+     * @returns `True` if button bar is nested
+     */
+    private isNested;
     /**
      * Handles tap event
      * @param event the param is the event of click and tap handlers
@@ -42,6 +91,11 @@ export declare class ButtonBar extends BasicElement {
      * @returns the array of Element of the default slot
      */
     private getElementsOfSlot;
+    /**
+     * Return the array of Buttons which focusable
+     * @returns the array of focusable Buttons
+     */
+    private getFocusableButtons;
     /**
      * Filter Button classes by the toggles property
      * @param buttons the array of Button items is the converted nodes of the default slot
@@ -66,4 +120,6 @@ declare global {
       'ef-button-bar': Partial<ButtonBar> | JSXInterface.HTMLAttributes<ButtonBar>;
     }
   }
-}
+}
+
+export {};