@refinitiv-ui/elements 5.3.3 → 5.3.4

package/lib/progress-bar/index.js

@@ -0,0 +1,159 @@
+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 { css, html, property, customElement, styleMap, BasicElement } from '@refinitiv-ui/core';
+import { VERSION } from '../';
+/**
+ * Data visualisation component,
+ * showing a simple percentage bar.
+ * @slot label - Overrides the label property and places custom content. Useful for modifying the color, or, adding icons.
+ */
+let ProgressBar = class ProgressBar extends BasicElement {
+    constructor() {
+        super(...arguments);
+        this.valuePrevious = '';
+        /**
+         * The current value of the bar.
+         * This can range from `0-100` and
+         * will be represented as a percentage bar
+         */
+        this.value = '100';
+        /**
+         * The alignment of the bar.
+         * The bar can either start from the `left` or `right`.
+         */
+        this.alignment = 'left';
+        /**
+         * The current label to be displayed next to the bar.
+         * This is affixed to the end of the bar, so make sure to cater for this.
+         */
+        this.label = '';
+    }
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
+    /**
+     * A `CSSResult` that will be used
+     * to style the host, slotted children
+     * and the internal template of the element.
+     * @return CSS template
+     */
+    static get styles() {
+        return css `
+    :host {
+      height: 10px;
+      display: flex;
+      position: relative;
+    }
+    [part~=bar] {
+      height: 100%;
+      position: relative;
+    }
+    [part=label] {
+      position: absolute;
+      top: 50%;
+      left: 100%;
+      height: 0;
+      line-height: 0;
+      white-space: nowrap;
+      margin-left: 10px;
+    }
+    :host([alignment=right]) {
+      justify-content: flex-end;
+    }
+    :host([alignment=right]) [part=label] {
+      left: auto;
+      right: 100%;
+      margin-left: 0;
+      margin-right: 10px;
+    }
+    :host [part~=bar-zero] [part=label] {
+      margin: 0;
+    }
+    `;
+    }
+    /**
+     * Converts value from string to number for calculations
+     * @returns value of bar as a number
+     */
+    get valueNumber() {
+        const value = parseFloat(this.value);
+        if (!this.value || isNaN(value)) { // check value is invalid
+            const valuePrevious = parseFloat(this.valuePrevious);
+            // if valuePrevious is invalid return default value 100
+            return !valuePrevious || isNaN(valuePrevious) ? 100 : valuePrevious;
+        }
+        return value;
+    }
+    /**
+     * Gets the current part names for the internal bar
+     */
+    get barParts() {
+        return this.barFill ? 'bar' : 'bar bar-zero';
+    }
+    /**
+     * Calculates the bar's percentage width
+     */
+    get barFill() {
+        return Math.min(100, Math.max(0, this.valueNumber));
+    }
+    /**
+     * Returns CSS styles for showing
+     * the bar's fill percentage.
+     */
+    get barStyle() {
+        return {
+            width: `${this.barFill}%`,
+            minWidth: `${this.barFill ? 1 : 0}px`
+        };
+    }
+    /**
+     * Called after an update has occurred
+     * @param changedProperties changed properties
+     * @returns {void}
+     */
+    updated(changedProperties) {
+        changedProperties.forEach((oldValue, propName) => {
+            if (propName === 'value') {
+                this.valuePrevious = oldValue;
+                this.value = this.valueNumber.toString();
+            }
+        });
+    }
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    render() {
+        return html `
+    <div part="${this.barParts}" style="${styleMap(this.barStyle)}">
+      <span part="label">
+        <slot name="label">${this.label}</slot>
+      </span>
+    </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], ProgressBar.prototype, "value", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], ProgressBar.prototype, "alignment", void 0);
+__decorate([
+    property({ type: String })
+], ProgressBar.prototype, "label", void 0);
+ProgressBar = __decorate([
+    customElement('ef-progress-bar', {
+        alias: 'sapphire-bar'
+    })
+], ProgressBar);
+export { ProgressBar };

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

@@ -0,0 +1,2 @@
+
+elf.customStyles.define('ef-progress-bar', ':host{color:#6678ff;height:8px}:host [part=bar]{background-color:var(--bar-color,currentColor);transition:width .1s}:host [part=label]{color:#ccc;transition:margin .1s}');

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

@@ -0,0 +1,2 @@
+
+elf.customStyles.define('ef-progress-bar', ':host{color:#334bff;height:8px}:host [part=bar]{background-color:var(--bar-color,currentColor);transition:width .1s}:host [part=label]{color:#0d0d0d;transition:margin .1s}');

package/lib/progress-bar/themes/solar/charcoal/index.js

@@ -0,0 +1,2 @@
+
+elf.customStyles.define('ef-progress-bar', ':host{color:#f93;height:5px}:host [part=bar]{background-color:var(--bar-color,currentColor);transition:width .2s}:host [part=label]{color:#c2c2c2;transition:margin .2s}');

package/lib/progress-bar/themes/solar/pearl/index.js

@@ -0,0 +1,2 @@
+
+elf.customStyles.define('ef-progress-bar', ':host{color:#ee7600;height:5px}:host [part=bar]{background-color:var(--bar-color,currentColor);transition:width .2s}:host [part=label]{color:#484848;transition:margin .2s}');

package/lib/radio-button/custom-elements.json

@@ -0,0 +1,84 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "ef-radio-button",
+      "description": "Basic radio button",
+      "attributes": [
+        {
+          "name": "checked",
+          "description": "Radio button checked state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "value",
+          "description": "Value of the radio button",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "name",
+          "description": "Group multiple radio buttons by assigning the same name",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "readonly",
+          "description": "Set readonly state",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "disabled",
+          "description": "Set disabled state",
+          "type": "boolean",
+          "default": "\"false\""
+        }
+      ],
+      "properties": [
+        {
+          "name": "checked",
+          "attribute": "checked",
+          "description": "Radio button checked state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "value",
+          "attribute": "value",
+          "description": "Value of the radio button",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "name",
+          "attribute": "name",
+          "description": "Group multiple radio buttons by assigning the same name",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "readonly",
+          "attribute": "readonly",
+          "description": "Set readonly state",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Set disabled state",
+          "type": "boolean",
+          "default": "\"false\""
+        }
+      ],
+      "events": [
+        {
+          "name": "checked-changed",
+          "description": "Fired when the `checked` property changes."
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,106 @@
+import { JSXInterface } from '../jsx';
+import { CSSResult, ControlElement, TemplateResult, PropertyValues } from '@refinitiv-ui/core';
+/**
+ * Basic radio button
+ *
+ * @fires checked-changed - Fired when the `checked` property changes.
+ *
+ * @attr {string} [value=] - Value of the radio button
+ * @prop {string} [value=] - Value of the radio button
+*
+ * @attr {string} [name=] - Group multiple radio buttons by assigning the same name
+ * @prop {string} [name=] - Group multiple radio buttons by assigning the same name
+ *
+ * @attr {boolean} readonly - Set readonly state
+ * @prop {boolean} [readonly=false] - Set readonly state
+ *
+ * @attr {boolean} disabled - Set disabled state
+ * @prop {boolean} [disabled=false] - Set disabled state
+ */
+export declare class RadioButton extends ControlElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    /**
+     * A `CSSResult` 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[];
+    /**
+     * Radio button checked state
+     */
+    checked: boolean;
+    /**
+     * Getter for label
+     */
+    private labelEl;
+    /**
+     * Called when connected to DOM
+     * @returns {void}
+     */
+    connectedCallback(): void;
+    /**
+     * Called when disconnected from DOM
+     * @returns {void}
+     */
+    disconnectedCallback(): void;
+    /**
+     * Invoked whenever the element is update
+     * @param changedProperties changed properties
+     * @returns {void}
+     */
+    protected update(changedProperties: PropertyValues): void;
+    /**
+     * Invoked when the element is first updated
+     * @param changedProperties changed properties
+     * @returns {void}
+     */
+    protected firstUpdated(changedProperties: PropertyValues): void;
+    /**
+     * Manage group members state, when either one is being checked
+     * @returns {void}
+     */
+    private manageGroupState;
+    /**
+     * Run when radio button is tapped
+     * @param event Tap event
+     * @returns {void}
+     */
+    private onTap;
+    /**
+     * Handles key down event
+     * @param event Key down event object
+     * @returns {void}
+     */
+    private onKeyDown;
+    /**
+     * Change checked state and fire
+     * checked-changed event
+     * @return {void}
+     */
+    private handleChangeChecked;
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    protected render(): TemplateResult;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ef-radio-button': RadioButton;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'ef-radio-button': Partial<RadioButton> | JSXInterface.ControlHTMLAttributes<RadioButton>;
+    }
+  }
+}
+
+export {};

package/lib/radio-button/index.js

@@ -0,0 +1,195 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, css, customElement, property, ControlElement, query } from '@refinitiv-ui/core';
+import { VERSION } from '../';
+import { registerOverflowTooltip } from '../tooltip';
+import { applyRegistry, removeFromRegistry, getRadioGroup } from './radio-button-registry';
+/**
+ * Basic radio button
+ *
+ * @fires checked-changed - Fired when the `checked` property changes.
+ *
+ * @attr {string} [value=] - Value of the radio button
+ * @prop {string} [value=] - Value of the radio button
+*
+ * @attr {string} [name=] - Group multiple radio buttons by assigning the same name
+ * @prop {string} [name=] - Group multiple radio buttons by assigning the same name
+ *
+ * @attr {boolean} readonly - Set readonly state
+ * @prop {boolean} [readonly=false] - Set readonly state
+ *
+ * @attr {boolean} disabled - Set disabled state
+ * @prop {boolean} [disabled=false] - Set disabled state
+ */
+let RadioButton = class RadioButton extends ControlElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Radio button checked state
+         */
+        this.checked = false;
+    }
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
+    /**
+     * A `CSSResult` that will be used
+     * to style the host, slotted children
+     * and the internal template of the element.
+     * @return CSS template
+     */
+    static get styles() {
+        return css `
+      :host {
+        display: inline-block;
+      }
+      [part=check] {
+        visibility: hidden;
+      }
+      :host([checked]) [part=check] {
+        visibility: inherit;
+      }
+      [part=label],
+      [part=container] {
+        display: inline-block;
+        white-space: nowrap;
+        vertical-align: middle;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      :host(:empty) [part=label], [part=label]:empty {
+        display: none;
+      }
+    `;
+    }
+    /**
+     * Called when connected to DOM
+     * @returns {void}
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        applyRegistry(this);
+        this.manageGroupState();
+    }
+    /**
+     * Called when disconnected from DOM
+     * @returns {void}
+     */
+    disconnectedCallback() {
+        removeFromRegistry(this);
+        super.disconnectedCallback();
+    }
+    /**
+     * Invoked whenever the element is update
+     * @param changedProperties changed properties
+     * @returns {void}
+     */
+    update(changedProperties) {
+        if (this.isConnected && this.hasUpdated && changedProperties.has('name')) {
+            applyRegistry(this);
+        }
+        // Ensure only one radio button is checked
+        if (this.isConnected && this.hasUpdated && (changedProperties.has('checked') || (changedProperties.has('name')))) {
+            this.manageGroupState();
+        }
+        super.update(changedProperties);
+    }
+    /**
+     * Invoked when the element is first updated
+     * @param changedProperties changed properties
+     * @returns {void}
+     */
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        this.addEventListener('tap', this.onTap);
+        this.addEventListener('keydown', this.onKeyDown);
+        registerOverflowTooltip(this.labelEl, () => this.textContent);
+    }
+    /**
+     * Manage group members state, when either one is being checked
+     * @returns {void}
+     */
+    manageGroupState() {
+        if (this.checked && this.name) {
+            getRadioGroup(this).filter(radio => radio !== this).forEach(radio => {
+                radio.checked = false; // unchecking the rest of the group members
+            });
+        }
+    }
+    /**
+     * Run when radio button is tapped
+     * @param event Tap event
+     * @returns {void}
+     */
+    onTap(event) {
+        if (this.disabled || this.readonly || event.defaultPrevented) {
+            return;
+        }
+        this.handleChangeChecked();
+    }
+    /**
+     * Handles key down event
+     * @param event Key down event object
+     * @returns {void}
+     */
+    onKeyDown(event) {
+        if (this.disabled || this.readonly || event.defaultPrevented) {
+            return;
+        }
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+            case 'Spacebar':
+                this.handleChangeChecked();
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+    }
+    /**
+     * Change checked state and fire
+     * checked-changed event
+     * @return {void}
+     */
+    handleChangeChecked() {
+        // Once checked, radio button cannot be unchecked
+        if (!this.checked) {
+            this.checked = true;
+            this.notifyPropertyChange('checked', this.checked);
+        }
+    }
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    render() {
+        return html `
+      <div part="container">
+        <div part="check"></div>
+      </div>
+      <div part="label"><slot></slot></div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], RadioButton.prototype, "checked", void 0);
+__decorate([
+    query('[part=label]', true)
+], RadioButton.prototype, "labelEl", void 0);
+RadioButton = __decorate([
+    customElement('ef-radio-button', {
+        alias: 'coral-radio-button'
+    })
+], RadioButton);
+export { RadioButton };

package/lib/radio-button/radio-button-registry.d.ts

@@ -0,0 +1,21 @@
+import { RadioButton } from './index';
+/**
+ * Remove radio button from registry
+ * @param radio Radio button to remove
+ * @returns {void}
+ */
+declare const removeFromRegistry: (radio: RadioButton) => void;
+/**
+ * Add radio button to registry group of radio has a name
+ * If radio does not have the name, remove from the group
+ * @param radio Radio button to add
+ * @returns {void}
+ */
+declare const applyRegistry: (radio: RadioButton) => void;
+/**
+ * Get the group of same name radio buttons
+ * @param radio A radio to get a group for
+ * @returns collection of radio buttons
+ */
+declare const getRadioGroup: (radio: RadioButton) => RadioButton[];
+export { applyRegistry, removeFromRegistry, getRadioGroup };

package/lib/radio-button/radio-button-registry.js

@@ -0,0 +1,40 @@
+const registry = [];
+/**
+ * Remove radio button from registry
+ * @param radio Radio button to remove
+ * @returns {void}
+ */
+const removeFromRegistry = (radio) => {
+    const idx = registry.indexOf(radio);
+    if (idx !== -1) {
+        registry.splice(idx, 1);
+    }
+};
+/**
+ * Add radio button to registry group of radio has a name
+ * If radio does not have the name, remove from the group
+ * @param radio Radio button to add
+ * @returns {void}
+ */
+const applyRegistry = (radio) => {
+    const idx = registry.indexOf(radio);
+    if (radio.name && idx === -1) {
+        registry.push(radio);
+    }
+    else if (!radio.name && idx !== -1) {
+        removeFromRegistry(radio);
+    }
+};
+/**
+ * Get the group of same name radio buttons
+ * @param radio A radio to get a group for
+ * @returns collection of radio buttons
+ */
+const getRadioGroup = (radio) => {
+    if (!registry.includes(radio)) {
+        return [];
+    }
+    const groupName = radio.name;
+    return registry.filter(radio => radio.name === groupName);
+};
+export { applyRegistry, removeFromRegistry, getRadioGroup };

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

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/tooltip/themes/halo/dark';
+
+elf.customStyles.define('ef-radio-button', ':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:100%;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;-ms-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);border:none;background-color:currentColor;transform:none;border-radius:100%;margin:0;width:8px;height:8px}:host [part=label]{margin:0 7px;cursor:default}: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 (-ms-high-contrast:none),(pointer:fine){:host(:focus) [part=container]{border-color:#334bff;box-shadow:0 0 0 #334bff}}:host(:not([readonly])){cursor:pointer}:host(:hover:not([checked]):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}');

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

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/tooltip/themes/halo/light';
+
+elf.customStyles.define('ef-radio-button', ':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:100%;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;-ms-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);border:none;background-color:currentColor;transform:none;border-radius:100%;margin:0;width:8px;height:8px}:host [part=label]{margin:0 7px;cursor:default}: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 (-ms-high-contrast:none),(pointer:fine){:host(:focus) [part=container]{border-color:#334bff;box-shadow:0 0 0 #334bff}}:host(:not([readonly])){cursor:pointer}:host(:hover:not([checked]):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}');

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

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/tooltip/themes/solar/charcoal';
+
+elf.customStyles.define('ef-radio-button', ':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:100%;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;-ms-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:none;background-color:currentColor;transform:none;border-radius:100%;margin:0;width:7px;height:7px}:host [part=label]{cursor:default;margin:0 4px}: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;opacity:rgba(194,194,194,.6)}:host([checked][disabled]) [part=check]{color:#c2c2c2}:host([checked][readonly]) [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 (-ms-high-contrast:none),(pointer:fine){:host(:focus) [part=container]{box-shadow:0 0 0 #f93;border:1px dotted #f93}}');

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

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/tooltip/themes/solar/pearl';
+
+elf.customStyles.define('ef-radio-button', ':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:100%;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;-ms-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:none;background-color:currentColor;transform:none;border-radius:100%;margin:0;width:7px;height:7px}:host [part=label]{cursor:default;margin:0 4px}: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;opacity:rgba(72,72,72,.6)}:host([checked][disabled]) [part=check]{color:#a9afba}:host([checked][readonly]) [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 (-ms-high-contrast:none),(pointer:fine){:host(:focus) [part=container]{box-shadow:0 0 0 #ffb266;border:1px dotted #ffb266}}');