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

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

@@ -1,19 +1,24 @@
 import { JSXInterface } from '../jsx';
-import { CSSResult, TemplateResult, BasicElement, PropertyValues } from '@refinitiv-ui/core';
+import { CSSResultGroup, TemplateResult, BasicElement, PropertyValues } from '@refinitiv-ui/core';
 /**
  * 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.
  */
 export declare class ProgressBar extends BasicElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
     private valuePrevious;
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template
      */
-    static get styles(): CSSResult;
+    static get styles(): CSSResultGroup;
     /**
      * The current value of the bar.
      * This can range from `0-100` and
@@ -30,22 +35,11 @@ export declare class ProgressBar extends BasicElement {
      * This is affixed to the end of the bar, so make sure to cater for this.
      */
     label: string;
-    /**
-     * Deprecation noticed, used to display a warning message
-     * when deprecated features are used.
-     */
-    private deprecationNotice;
     /**
      * Converts value from string to number for calculations
      * @returns value of bar as a number
      */
     private get valueNumber();
-    /**
-     * Checks to see if any deprecated features are being used
-     * and warns against them, providing an updated approach.
-     * @returns {void}
-     */
-    private checkAndWarnAboutDeprecations;
     /**
      * Gets the current part names for the internal bar
      */
@@ -83,4 +77,6 @@ declare global {
       'ef-progress-bar': Partial<ProgressBar> | JSXInterface.HTMLAttributes<ProgressBar>;
     }
   }
-}
+}
+
+export {};

package/lib/progress-bar/index.js

@@ -1,10 +1,9 @@
-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, DeprecationNotice } from '@refinitiv-ui/core';
+import { __decorate } from "tslib";
+import { css, html, BasicElement } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { styleMap } from '@refinitiv-ui/core/lib/directives/style-map.js';
+import { VERSION } from '../version.js';
 /**
  * Data visualisation component,
  * showing a simple percentage bar.
@@ -30,14 +29,16 @@ let ProgressBar = class ProgressBar extends BasicElement {
          * This is affixed to the end of the bar, so make sure to cater for this.
          */
         this.label = '';
-        /**
-         * Deprecation noticed, used to display a warning message
-         * when deprecated features are used.
-         */
-        this.deprecationNotice = new DeprecationNotice('--bar-color variable has been deprecated in favour of using the standard color property.');
     }
     /**
-     * A `CSSResult` that will be used
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
+    /**
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template
@@ -89,16 +90,6 @@ let ProgressBar = class ProgressBar extends BasicElement {
         }
         return value;
     }
-    /**
-     * Checks to see if any deprecated features are being used
-     * and warns against them, providing an updated approach.
-     * @returns {void}
-     */
-    checkAndWarnAboutDeprecations() {
-        if (!this.deprecationNotice.shown && this.getComputedVariable('--bar-color')) {
-            this.deprecationNotice.show();
-        }
-    }
     /**
      * Gets the current part names for the internal bar
      */
@@ -127,7 +118,6 @@ let ProgressBar = class ProgressBar extends BasicElement {
      * @returns {void}
      */
     updated(changedProperties) {
-        this.checkAndWarnAboutDeprecations();
         changedProperties.forEach((oldValue, propName) => {
             if (propName === 'value') {
                 this.valuePrevious = oldValue;
@@ -165,4 +155,3 @@ ProgressBar = __decorate([
     })
 ], ProgressBar);
 export { ProgressBar };
-//# sourceMappingURL=index.js.map

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

@@ -27,13 +27,13 @@
           "name": "readonly",
           "description": "Set readonly state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "disabled",
           "description": "Set disabled state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "properties": [
@@ -63,14 +63,14 @@
           "attribute": "readonly",
           "description": "Set readonly state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "disabled",
           "attribute": "disabled",
           "description": "Set disabled state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "events": [

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

@@ -0,0 +1,19 @@
+# ef-radio-button
+
+Basic radio button
+
+## Properties
+
+| Property   | Attribute  | Type      | Default | Description                                      |
+|------------|------------|-----------|---------|--------------------------------------------------|
+| `checked`  | `checked`  | `boolean` | false   | Radio button checked state                       |
+| `disabled` | `disabled` | `boolean` | false   | Set disabled state                               |
+| `name`     | `name`     | `string`  | ""      | Group multiple radio buttons by assigning the same name |
+| `readonly` | `readonly` | `boolean` | false   | Set readonly state                               |
+| `value`    | `value`    | `string`  | ""      | Value of the radio button                        |
+
+## Events
+
+| Event             | Description                                |
+|-------------------|--------------------------------------------|
+| `checked-changed` | Fired when the `checked` property changes. |

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

@@ -1,15 +1,15 @@
 import { JSXInterface } from '../jsx';
-import { CSSResult, ControlElement, TemplateResult, PropertyValues } from '@refinitiv-ui/core';
+import { CSSResultGroup, 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} 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 {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
@@ -19,16 +19,32 @@ import { CSSResult, ControlElement, TemplateResult, PropertyValues } from '@refi
  */
 export declare class RadioButton extends ControlElement {
     /**
-     * A `CSSResult` that will be used
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    protected readonly defaultRole: string | null;
+    /**
+     * 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;
+    private _checked;
     /**
      * Radio button checked state
+     * @param value checked state
+     * @default false
+     * @returns {void}
+     */
+    set checked(value: boolean);
+    get checked(): boolean;
+    /**
+     * Aria indicating checked state
+     * @ignore
      */
-    checked: boolean;
+    ariaChecked: string;
     /**
      * Getter for label
      */
@@ -78,6 +94,12 @@ export declare class RadioButton extends ControlElement {
      * @return {void}
      */
     private handleChangeChecked;
+    /**
+     * Navigate to next or previous checkable sibling in the same group if present
+     * @param direction up/next; down/previous
+     * @returns {void}
+     */
+    private navigateToSibling;
     /**
      * A `TemplateResult` that will be used
      * to render the updated internal template.
@@ -96,4 +118,6 @@ declare global {
       'ef-radio-button': Partial<RadioButton> | JSXInterface.ControlHTMLAttributes<RadioButton>;
     }
   }
-}
+}
+
+export {};

package/lib/radio-button/index.js

@@ -1,22 +1,21 @@
-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 { registerOverflowTooltip } from '../tooltip';
-import { applyRegistry, removeFromRegistry, getRadioGroup } from './radio-button-registry';
+import { __decorate } from "tslib";
+import { html, css, ControlElement } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { VERSION } from '../version.js';
+import { registerOverflowTooltip } from '../tooltip/index.js';
+import { applyRegistry, removeFromRegistry, getRadioGroup } from './radio-button-registry.js';
 /**
  * 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} 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 {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
@@ -27,13 +26,23 @@ import { applyRegistry, removeFromRegistry, getRadioGroup } from './radio-button
 let RadioButton = class RadioButton extends ControlElement {
     constructor() {
         super(...arguments);
+        this.defaultRole = 'radio';
+        this._checked = false;
         /**
-         * Radio button checked state
+         * Aria indicating checked state
+         * @ignore
          */
-        this.checked = false;
+        this.ariaChecked = String(this.checked);
+    }
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
     }
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template
@@ -62,6 +71,23 @@ let RadioButton = class RadioButton extends ControlElement {
       }
     `;
     }
+    /**
+     * Radio button checked state
+     * @param value checked state
+     * @default false
+     * @returns {void}
+     */
+    set checked(value) {
+        const oldValue = this._checked;
+        if (oldValue !== value) {
+            this._checked = value;
+            this.ariaChecked = String(value);
+            void this.requestUpdate('checked', oldValue);
+        }
+    }
+    get checked() {
+        return this._checked;
+    }
     /**
      * Called when connected to DOM
      * @returns {void}
@@ -86,7 +112,7 @@ let RadioButton = class RadioButton extends ControlElement {
      */
     update(changedProperties) {
         if (this.isConnected && this.hasUpdated && changedProperties.has('name')) {
-            applyRegistry(this);
+            applyRegistry(this, changedProperties.get('name'));
         }
         // Ensure only one radio button is checked
         if (this.isConnected && this.hasUpdated && (changedProperties.has('checked') || (changedProperties.has('name')))) {
@@ -101,8 +127,8 @@ let RadioButton = class RadioButton extends ControlElement {
      */
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
-        this.addEventListener('tap', event => this.onTap(event));
-        this.addEventListener('keydown', event => this.onKeyDown(event));
+        this.addEventListener('tap', this.onTap);
+        this.addEventListener('keydown', this.onKeyDown);
         registerOverflowTooltip(this.labelEl, () => this.textContent);
     }
     /**
@@ -111,8 +137,12 @@ let RadioButton = class RadioButton extends ControlElement {
      */
     manageGroupState() {
         if (this.checked && this.name) {
+            // restore tab index when checked
+            this.tabIndex = 0;
             getRadioGroup(this).filter(radio => radio !== this).forEach(radio => {
-                radio.checked = false; // unchecking the rest of the group members
+                // uncheck and hide the rest of the group members from focusability
+                radio.checked = false;
+                radio.tabIndex = -1;
             });
         }
     }
@@ -133,15 +163,29 @@ let RadioButton = class RadioButton extends ControlElement {
      * @returns {void}
      */
     onKeyDown(event) {
-        if (this.disabled || this.readonly || event.defaultPrevented) {
+        if (this.disabled || event.defaultPrevented) {
             return;
         }
         switch (event.key) {
-            case 'Enter':
             case ' ':
             case 'Spacebar':
+                if (this.readonly) {
+                    return;
+                }
                 this.handleChangeChecked();
                 break;
+            case 'Right':
+            case 'Down':
+            case 'ArrowRight':
+            case 'ArrowDown':
+                this.navigateToSibling('next');
+                break;
+            case 'Left':
+            case 'Up':
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                this.navigateToSibling('previous');
+                break;
             default:
                 return;
         }
@@ -159,6 +203,33 @@ let RadioButton = class RadioButton extends ControlElement {
             this.notifyPropertyChange('checked', this.checked);
         }
     }
+    /**
+     * Navigate to next or previous checkable sibling in the same group if present
+     * @param direction up/next; down/previous
+     * @returns {void}
+     */
+    navigateToSibling(direction) {
+        if (!this.name) {
+            return;
+        }
+        const group = getRadioGroup(this).filter(radio => !radio.disabled);
+        const index = group.indexOf(this);
+        let element;
+        if (direction === 'next') {
+            element = index === -1 ? group[0] : group[index + 1];
+        }
+        else {
+            element = index === -1 ? group[group.length - 1] : group[index - 1];
+        }
+        if (!element) {
+            element = direction === 'next' ? group[0] : group[group.length - 1];
+        }
+        if (!element.readonly) {
+            this.checked = false;
+            element.checked = true;
+        }
+        element.focus();
+    }
     /**
      * A `TemplateResult` that will be used
      * to render the updated internal template.
@@ -175,7 +246,10 @@ let RadioButton = class RadioButton extends ControlElement {
 };
 __decorate([
     property({ type: Boolean, reflect: true })
-], RadioButton.prototype, "checked", void 0);
+], RadioButton.prototype, "checked", null);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'aria-checked' })
+], RadioButton.prototype, "ariaChecked", void 0);
 __decorate([
     query('[part=label]', true)
 ], RadioButton.prototype, "labelEl", void 0);
@@ -185,4 +259,3 @@ RadioButton = __decorate([
     })
 ], RadioButton);
 export { RadioButton };
-//# sourceMappingURL=index.js.map

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

@@ -1,4 +1,4 @@
-import { RadioButton } from './index';
+import type { RadioButton } from './index';
 /**
  * Remove radio button from registry
  * @param radio Radio button to remove
@@ -9,9 +9,10 @@ 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
+ * @param oldGroupName group name of radio button before changed
  * @returns {void}
  */
-declare const applyRegistry: (radio: RadioButton) => void;
+declare const applyRegistry: (radio: RadioButton, oldGroupName?: string) => void;
 /**
  * Get the group of same name radio buttons
  * @param radio A radio to get a group for

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

@@ -14,16 +14,69 @@ const removeFromRegistry = (radio) => {
  * 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
+ * @param oldGroupName group name of radio button before changed
  * @returns {void}
  */
-const applyRegistry = (radio) => {
-    const idx = registry.indexOf(radio);
-    if (radio.name && idx === -1) {
+const applyRegistry = (radio, oldGroupName = '') => {
+    const isNewRadioButton = registry.indexOf(radio) === -1;
+    if (radio.name && isNewRadioButton) {
         registry.push(radio);
+        if (registry.length === 1) {
+            return;
+        }
+        // Set tabIndex to -1 if radio either uncheck or not the first radio button in the group.
+        const radioGroup = getRadioGroup(radio);
+        if (!radio.checked && radioGroup.length > 1) {
+            radio.tabIndex = -1;
+        }
     }
-    else if (!radio.name && idx !== -1) {
+    // Removed from the group
+    else if (!radio.name && !isNewRadioButton) {
         removeFromRegistry(radio);
+        radio.tabIndex = 0; // Restores tabIndex and switch to single mode
+        // Re-compute tabIndex for old radio group
+        const oldRadioGroup = registry.filter(radio => radio.name === oldGroupName);
+        restoreTabIndex(oldRadioGroup);
+    }
+    // Changes group
+    else if (radio.name && !isNewRadioButton) {
+        // Re-compute tabIndex for new radio group when name attribute has changed
+        const newRadioGroup = getRadioGroup(radio);
+        if (radio.checked) {
+            radio.tabIndex = 0;
+            // uncheck and hide the rest of the group members from focusability
+            newRadioGroup.filter((newRadio) => newRadio !== radio).forEach(newRadio => {
+                newRadio.checked = false;
+                newRadio.tabIndex = -1;
+            });
+        }
+        else {
+            radio.tabIndex = -1;
+            restoreTabIndex(newRadioGroup);
+        }
+        // Re-compute tabIndex for old radio group when name attribute has changed.
+        const oldRadioGroup = registry.filter(radio => radio.name === oldGroupName);
+        restoreTabIndex(oldRadioGroup);
+    }
+};
+/**
+ * Re-compute tabIndex for the radio group
+ * Set tabIndex to 0 for first radio button in the group.
+ * Set tabIndex to -1 for the rest of button in group.
+ * @param radioGroup collection of radio buttons
+ * @returns {void}
+ */
+const restoreTabIndex = (radioGroup) => {
+    if (!radioGroup.length) {
+        return;
+    }
+    const checkedRadio = radioGroup.filter(radio => radio.checked);
+    if (checkedRadio.length) {
+        return;
     }
+    radioGroup.forEach((radio, index) => {
+        radio.tabIndex = index === 0 ? 0 : -1;
+    });
 };
 /**
  * Get the group of same name radio buttons
@@ -38,4 +91,3 @@ const getRadioGroup = (radio) => {
     return registry.filter(radio => radio.name === groupName);
 };
 export { applyRegistry, removeFromRegistry, getRadioGroup };
-//# sourceMappingURL=radio-button-registry.js.map

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

@@ -1,3 +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}');
+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])) [part=container]{cursor:pointer}:host(:hover:not([checked]):not([indeterminate]):not([readonly])) [part=container]{border-color:grey}:host(:hover:not([readonly])){color:#fff}:host([disabled]),:host([disabled]) [part=label]{opacity:.5}:host([checked]) [part=container]{border:1px solid #334bff}:host(:focus[readonly]:not([checked])) [part=container]{border-color:#404040}:host([focused=visible]){outline:#334bff solid 1px;outline-offset:2px}');

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

@@ -1,3 +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}');
+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])) [part=container]{cursor:pointer}:host(:hover:not([checked]):not([indeterminate]):not([readonly])) [part=container]{border-color:#0d0d0d}:host(:hover:not([readonly])){color:#0d0d0d}:host([disabled]),:host([disabled]) [part=label]{opacity:.5}:host([checked]) [part=container]{border:1px solid #334bff}:host(:focus[readonly]:not([checked])) [part=container]{border-color:#595959}:host([focused=visible]){outline:#334bff solid 1px;outline-offset:2px}');

package/lib/rating/custom-elements.md

@@ -0,0 +1,17 @@
+# ef-rating
+
+Star visualisation component that is generally used for ranking
+
+## Properties
+
+| Property      | Attribute     | Type      | Default | Description                                      |
+|---------------|---------------|-----------|---------|--------------------------------------------------|
+| `interactive` | `interactive` | `boolean` | false   | Make it possible to interact with rating control and change the value |
+| `max`         | `max`         | `string`  | "5"     | Set number of total stars                        |
+| `value`       | `value`       | `string`  | "0"     | Set number of selected stars. Value can be any number between 0 and `max`.<br />Decimal values are calculated to empty star (0 - .25); half-star (.25 - .75) and full star (.75 - 1) |
+
+## Events
+
+| Event           | Description                     |
+|-----------------|---------------------------------|
+| `value-changed` | Fired when the `value` changes. |

package/lib/rating/index.d.ts

@@ -1,10 +1,15 @@
 import { JSXInterface } from '../jsx';
-import { BasicElement, TemplateResult, CSSResult, PropertyValues } from '@refinitiv-ui/core';
+import { BasicElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
 /**
  * Star visualisation component that is generally used for ranking
  * @fires value-changed - Fired when the `value` changes.
  */
 export declare class Rating extends BasicElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
     private items;
     private valuePrevious;
     /**
@@ -57,12 +62,12 @@ export declare class Rating extends BasicElement {
      */
     protected updated(changedProperties: PropertyValues): void;
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @returns CSS template
      */
-    static get styles(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     /**
      * A `TemplateResult` that will be used
      * to render the updated internal template.
@@ -81,4 +86,6 @@ declare global {
       'ef-rating': Partial<Rating> | JSXInterface.HTMLAttributes<Rating>;
     }
   }
-}
+}
+
+export {};