@refinitiv-ui/elements 5.10.0 → 5.10.2-build.1841524222.1.59

package/lib/list/custom-elements.md

@@ -4,15 +4,16 @@ Provides listing and immutable selection
 
 ## Properties
 
-| Property                    | Attribute   | Type           | Default                  | Description                                      |
-|-----------------------------|-------------|----------------|--------------------------|--------------------------------------------------|
-| `data`                      |             | `ListData`     | null                     | The data object, used to render the list.        |
-| `delegatesFocus (readonly)` |             | `false`        | false                    | Element focus delegation.<br />Set to `false` and relies on native focusing. |
-| `multiple`                  | `multiple`  | `boolean`      | false                    | Allow multiple selections                        |
-| `renderer`                  |             | `ListRenderer` | "new ListRenderer(this)" | Renderer used to render list item elements       |
-| `stateless`                 | `stateless` | `boolean`      | false                    | Disable selections                               |
-| `value`                     | `value`     | `string`       | ""                       | Returns the first selected item value.<br />Use `values` when multiple selection mode is enabled. |
-| `values`                    |             | `string[]`     | []                       | Returns a values collection of the currently<br />selected item values |
+| Property                    | Attribute              | Type           | Default                  | Description                                      |
+|-----------------------------|------------------------|----------------|--------------------------|--------------------------------------------------|
+| `ariaMultiselectable`       | `aria-multiselectable` | `string`       | false                    | Aria indicating that list supports multiple selection |
+| `data`                      |                        | `ListData`     | null                     | The data object, used to render the list.        |
+| `delegatesFocus (readonly)` |                        | `false`        | false                    | Element focus delegation.<br />Set to `false` and relies on native focusing. |
+| `multiple`                  | `multiple`             | `boolean`      | false                    | Allow multiple selections                        |
+| `renderer`                  |                        | `ListRenderer` | "new ListRenderer(this)" | Renderer used to render list item elements       |
+| `stateless`                 | `stateless`            | `boolean`      | false                    | Disable selections                               |
+| `value`                     | `value`                | `string`       | ""                       | Returns the first selected item value.<br />Use `values` when multiple selection mode is enabled. |
+| `values`                    |                        | `string[]`     | []                       | Returns a values collection of the currently<br />selected item values |
 
 ## Methods
 

package/lib/list/helpers/types.d.ts

@@ -1,3 +1,3 @@
-import type { CollectionComposer, DataItem } from '@refinitiv-ui/utils/lib/collection.js';
+import type { CollectionComposer, DataItem } from '@refinitiv-ui/utils/collection.js';
 import type { ItemData } from '../../item';
 export declare type ListData<T extends DataItem = ItemData> = T[] | CollectionComposer<T> | null;

package/lib/list/index.d.ts

@@ -1,6 +1,6 @@
 import { JSXInterface } from '../jsx';
 import { ControlElement, CSSResultGroup, PropertyValues, TapEvent, TemplateResult } from '@refinitiv-ui/core';
-import { CollectionComposer, DataItem } from '@refinitiv-ui/utils/lib/collection.js';
+import { CollectionComposer, DataItem } from '@refinitiv-ui/utils/collection.js';
 import type { ItemData } from '../item';
 import type { ListData } from './helpers/types';
 import { ListRenderer } from './helpers/list-renderer.js';
@@ -66,6 +66,10 @@ export declare class List<T extends DataItem = ItemData> extends ControlElement
      * Disable selections
      */
     stateless: boolean;
+    /**
+     * Aria indicating that list supports multiple selection
+     */
+    ariaMultiselectable: string;
     /**
      * Allow multiple selections
      */

package/lib/list/index.js

@@ -1,9 +1,9 @@
 import { __decorate } from "tslib";
 import { ControlElement, css, html, WarningNotice } 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 { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { VERSION } from '../version.js';
-import { CollectionComposer } from '@refinitiv-ui/utils/lib/collection.js';
+import { CollectionComposer } from '@refinitiv-ui/utils/collection.js';
 import { ListRenderer } from './helpers/list-renderer.js';
 import '../item/index.js';
 export { ListRenderer };
@@ -67,6 +67,10 @@ let List = class List extends ControlElement {
          * Disable selections
          */
         this.stateless = false;
+        /**
+         * Aria indicating that list supports multiple selection
+         */
+        this.ariaMultiselectable = 'false';
         /**
          * Allow multiple selections
          */
@@ -613,6 +617,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], List.prototype, "stateless", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'aria-multiselectable' })
+], List.prototype, "ariaMultiselectable", void 0);
 __decorate([
     property({ type: Boolean })
 ], List.prototype, "multiple", void 0);

package/lib/list/renderer.d.ts

@@ -1,5 +1,5 @@
 import { ExtensibleFunction } from './extensible-function.js';
-import type { DataItem, CollectionComposer } from '@refinitiv-ui/utils/lib/collection.js';
+import type { DataItem, CollectionComposer } from '@refinitiv-ui/utils/collection.js';
 /**
  * Render function interface
  * TODO: Move this to @refinitiv-ui/utils

package/lib/loader/index.js

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
 import { BasicElement, html } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { VERSION } from '../version.js';
 /**
  * Global cache for loader template parts

package/lib/multi-input/helpers/types.d.ts

@@ -1,4 +1,4 @@
-import type { CollectionItem } from '@refinitiv-ui/utils/lib/collection.js';
+import type { CollectionItem } from '@refinitiv-ui/utils/collection.js';
 export declare type SelectionIndex = number | null;
 export declare type MultiInputEvents = 'item-added' | 'item-removed' | 'item-error';
 export declare type MultiInputData = MultiInputDataItem[];

package/lib/multi-input/index.js

@@ -1,11 +1,11 @@
 import { __decorate } from "tslib";
 import { ControlElement, css, html } 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 { ifDefined } from '@refinitiv-ui/core/lib/directives/if-defined.js';
+import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
+import { query } from '@refinitiv-ui/core/decorators/query.js';
+import { ifDefined } from '@refinitiv-ui/core/directives/if-defined.js';
 import { VERSION } from '../version.js';
-import { CollectionComposer } from '@refinitiv-ui/utils/lib/collection.js';
+import { CollectionComposer } from '@refinitiv-ui/utils/collection.js';
 import '../pill/index.js';
 import '../text-field/index.js';
 const hasChanged = (newVal, oldVal) => oldVal === undefined ? false : newVal !== oldVal;
@@ -445,7 +445,7 @@ let MultiInput = class MultiInput extends ControlElement {
     onPillClearsHandler(event) {
         const pill = event.target;
         const index = pill.getAttribute('index');
-        if (index == null) {
+        if (index === null) {
             return;
         }
         const items = this.composer.queryItems(() => true);

package/lib/notification/elements/notification-tray.js

@@ -1,9 +1,9 @@
 import { __decorate } from "tslib";
 import { ResponsiveElement, html } 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 { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { VERSION } from '../../version.js';
-import { TimeoutTaskRunner } from '@refinitiv-ui/utils/lib/async.js';
+import { TimeoutTaskRunner } from '@refinitiv-ui/utils/async.js';
 let NotificationTray = class NotificationTray extends ResponsiveElement {
     constructor() {
         super(...arguments);

package/lib/notification/elements/notification.js

@@ -1,7 +1,7 @@
 import { __decorate } from "tslib";
 import { BasicElement, html, css } 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 { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { VERSION } from '../../version.js';
 import '../../icon/index.js';
 /**

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

@@ -1,6 +1,6 @@
 import { JSXInterface } from '../jsx';
 import { FormFieldElement, CSSResultGroup, TemplateResult, PropertyValues, TapEvent } from '@refinitiv-ui/core';
-import { TemplateMap } from '@refinitiv-ui/core/lib/directives/template-map.js';
+import { TemplateMap } from '@refinitiv-ui/core/directives/template-map.js';
 import '../icon/index.js';
 declare type SelectionDirection = 'forward' | 'backward' | 'none';
 declare enum Direction {

package/lib/number-field/index.js

@@ -1,8 +1,8 @@
 import { __decorate } from "tslib";
 import { FormFieldElement, html, css, FocusedPropertyKey } 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 { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
+import { query } from '@refinitiv-ui/core/decorators/query.js';
 import { VERSION } from '../version.js';
 import '../icon/index.js';
 const NUMBER_PATTERN = '^[-+]?[0-9]*\.?[0-9]+([eE][-+]?[0-9]+)?$';
@@ -658,6 +658,7 @@ let NumberField = class NumberField extends FormFieldElement {
      * @inheritDoc
      */
     /* istanbul ignore next */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     setSelectionRange(startSelection, endSelection, selectionDirection) {
         throw new Error('Failed to execute \'setSelectionRange\' on \'NumberField\': The element does not support selection.');
     }

package/lib/overlay/elements/overlay-backdrop.js

@@ -1,8 +1,8 @@
 var OverlayBackdrop_1;
 import { __decorate } from "tslib";
 import { BasicElement, css, html } 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 { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { VERSION } from '../../version.js';
 /**
  * A private element to show backdrop for overlay

package/lib/overlay/elements/overlay-viewport.js

@@ -1,7 +1,7 @@
 var OverlayViewport_1;
 import { __decorate } from "tslib";
 import { ResponsiveElement, css, html } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { VERSION } from '../../version.js';
 /**
  * A private element to find overlay size boundaries

package/lib/overlay/elements/overlay.js

@@ -1,11 +1,11 @@
 var Overlay_1;
 import { __decorate } from "tslib";
 import { ResponsiveElement, html, css } 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 { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { VERSION } from '../../version.js';
-import { MicroTaskRunner, AnimationTaskRunner } from '@refinitiv-ui/utils/lib/async.js';
-import { isIE, isEdge } from '@refinitiv-ui/utils/lib/browser.js';
+import { MicroTaskRunner, AnimationTaskRunner } from '@refinitiv-ui/utils/async.js';
+import { isIE, isEdge } from '@refinitiv-ui/utils/browser.js';
 import { DEFAULT_ALIGN, DEFAULT_TARGET_STRATEGY } from '../helpers/types.js';
 import { valueOrZero, valueOrNull } from '../helpers/functions.js';
 import { applyLock } from '../managers/interaction-lock-manager.js';

package/lib/overlay/managers/focus-manager.js

@@ -1,4 +1,4 @@
-import { AnimationTaskRunner } from '@refinitiv-ui/utils/lib/async.js';
+import { AnimationTaskRunner } from '@refinitiv-ui/utils/async.js';
 import { getOverlays } from './zindex-manager.js';
 import { FocusableHelper } from '@refinitiv-ui/core';
 /**

package/lib/overlay/managers/interaction-lock-manager.js

@@ -1,4 +1,4 @@
-import { AnimationTaskRunner } from '@refinitiv-ui/utils/lib/async.js';
+import { AnimationTaskRunner } from '@refinitiv-ui/utils/async.js';
 import { getOverlays } from './zindex-manager.js';
 /**
 * Check if two arrays are shallow equal

package/lib/overlay/managers/viewport-manager.js

@@ -1,4 +1,4 @@
-import { AnimationTaskRunner } from '@refinitiv-ui/utils/lib/async.js';
+import { AnimationTaskRunner } from '@refinitiv-ui/utils/async.js';
 import '../elements/overlay-viewport.js';
 /**
   * Default values for area info

package/lib/overlay/managers/zindex-manager.js

@@ -1,4 +1,4 @@
-import { AfterRenderTaskRunner } from '@refinitiv-ui/utils/lib/async.js';
+import { AfterRenderTaskRunner } from '@refinitiv-ui/utils/async.js';
 export const ZIndex = 103; /* initial z-index to match Polymer. 102 is used for backdrop */
 /**
  * Z-index manager monitors z-indexes and ensures that the last opened/last

package/lib/overlay-menu/helpers/types.d.ts

@@ -1,4 +1,4 @@
-import type { CollectionComposer } from '@refinitiv-ui/utils/lib/collection';
+import type { CollectionComposer } from '@refinitiv-ui/utils/collection.js';
 import type { OverlayMenu } from '../index';
 import type { Item, ItemData } from '../../item';
 export declare type NestedMenu = {

package/lib/overlay-menu/index.js

@@ -1,13 +1,13 @@
 var OverlayMenu_1;
 import { __decorate } from "tslib";
 import { html, css, WarningNotice } 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 { ifDefined } from '@refinitiv-ui/core/lib/directives/if-defined.js';
+import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
+import { ifDefined } from '@refinitiv-ui/core/directives/if-defined.js';
 import { VERSION } from '../version.js';
-import { AnimationTaskRunner } from '@refinitiv-ui/utils/lib/async.js';
-import { CollectionComposer } from '@refinitiv-ui/utils/lib/collection.js';
-import { uuid } from '@refinitiv-ui/utils/lib/uuid.js';
+import { AnimationTaskRunner } from '@refinitiv-ui/utils/async.js';
+import { CollectionComposer } from '@refinitiv-ui/utils/collection.js';
+import { uuid } from '@refinitiv-ui/utils/uuid.js';
 import '../icon/index.js';
 import '../item/index.js';
 import { Item } from '../item/index.js';

package/lib/overlay-menu/managers/menu-manager.js

@@ -1,4 +1,4 @@
-import { AfterRenderTaskRunner } from '@refinitiv-ui/utils/lib/async.js';
+import { AfterRenderTaskRunner } from '@refinitiv-ui/utils/async.js';
 import { OverlayMenu } from '../index.js';
 import { getOverlays } from '../../overlay/managers/zindex-manager.js';
 /**

package/lib/pagination/index.d.ts

@@ -4,7 +4,7 @@ import '../button/index.js';
 import '../button-bar/index.js';
 import '../layout/index.js';
 import '../text-field/index.js';
-import '@refinitiv-ui/phrasebook/lib/locale/en/pagination.js';
+import '@refinitiv-ui/phrasebook/locale/en/pagination.js';
 import { Translate } from '@refinitiv-ui/translate';
 /**
  * Used to control and navigate through multiple pages
@@ -164,7 +164,7 @@ export declare class Pagination extends BasicElement {
      */
     protected updated(changedProperties: PropertyValues): void;
     /**
-     * Validate integer value
+     * Validate page value which returns true when value is valid
      * @param value value
      * @param warning show warning message when value is invalid
      * @param propName property name to show in warning message

package/lib/pagination/index.js

@@ -1,15 +1,15 @@
 import { __decorate } from "tslib";
 import { BasicElement, html, css, WarningNotice, DeprecationNotice } 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 { state } from '@refinitiv-ui/core/lib/decorators/state.js';
-import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
+import { state } from '@refinitiv-ui/core/decorators/state.js';
+import { query } from '@refinitiv-ui/core/decorators/query.js';
 import { VERSION } from '../version.js';
 import '../button/index.js';
 import '../button-bar/index.js';
 import '../layout/index.js';
 import '../text-field/index.js';
-import '@refinitiv-ui/phrasebook/lib/locale/en/pagination.js';
+import '@refinitiv-ui/phrasebook/locale/en/pagination.js';
 import { translate } from '@refinitiv-ui/translate';
 const pageDeprecation = new DeprecationNotice('Property `page` is deprecated, use `value` instead.');
 const pageSizeDeprecation = new DeprecationNotice('Property `pageSize ` is deprecated, use `max` instead.');
@@ -295,7 +295,7 @@ let Pagination = class Pagination extends BasicElement {
         }
     }
     /**
-     * Validate integer value
+     * Validate page value which returns true when value is valid
      * @param value value
      * @param warning show warning message when value is invalid
      * @param propName property name to show in warning message
@@ -362,15 +362,13 @@ let Pagination = class Pagination extends BasicElement {
         let newValue = parseInt(this.input.value, 10);
         // Reset input and boundary value into supported range.
         if (this.validatePage(this.input.value)) {
-            if (newValue <= 0) {
-                newValue = 1;
-            }
-            else if (newValue > this.internalMax) {
+            if (newValue > this.internalMax) {
                 newValue = this.internalMax;
             }
             this.value = newValue.toString();
         }
-        else if (!isNaN(newValue)) {
+        // When input value is invalid in case less than support range (value<1), then reset value = '1'.
+        else if (!isNaN(newValue) && newValue < 1) {
             this.value = '1';
         }
         if (this.value !== oldValue) {

package/lib/panel/index.js

@@ -1,7 +1,7 @@
 import { __decorate } from "tslib";
 import { BasicElement, html, css } 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 { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { VERSION } from '../version.js';
 /**
  * A container for components.

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

@@ -1,9 +1,9 @@
 import { JSXInterface } from '../jsx';
 import { PropertyValues, TemplateResult } from '@refinitiv-ui/core';
-import { TemplateMap } from '@refinitiv-ui/core/lib/directives/template-map.js';
+import { TemplateMap } from '@refinitiv-ui/core/directives/template-map.js';
 import { TextField } from '../text-field/index.js';
 import '../icon/index.js';
-import '@refinitiv-ui/phrasebook/lib/locale/en/password-field.js';
+import '@refinitiv-ui/phrasebook/locale/en/password-field.js';
 import { Translate } from '@refinitiv-ui/translate';
 /**
  * A form control element for password.

package/lib/password-field/index.js

@@ -1,11 +1,11 @@
 import { __decorate } from "tslib";
 import { html } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
-import { state } from '@refinitiv-ui/core/lib/decorators/state.js';
+import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { state } from '@refinitiv-ui/core/decorators/state.js';
 import { preload } from '../icon/index.js';
 import { TextField } from '../text-field/index.js';
 import '../icon/index.js';
-import '@refinitiv-ui/phrasebook/lib/locale/en/password-field.js';
+import '@refinitiv-ui/phrasebook/locale/en/password-field.js';
 import { translate } from '@refinitiv-ui/translate';
 let isEyeOffPreloadRequested = false;
 /**

package/lib/pill/index.js

@@ -1,8 +1,8 @@
 import { __decorate } from "tslib";
 import { ControlElement, css, html } 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 { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
+import { query } from '@refinitiv-ui/core/decorators/query.js';
 import { VERSION } from '../version.js';
 import '../icon/index.js';
 /**

package/lib/progress-bar/index.js

@@ -1,8 +1,8 @@
 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 { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
+import { styleMap } from '@refinitiv-ui/core/directives/style-map.js';
 import { VERSION } from '../version.js';
 /**
  * Data visualisation component,

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

@@ -60,11 +60,11 @@ export declare class RadioButton extends ControlElement {
      */
     disconnectedCallback(): void;
     /**
-     * Invoked whenever the element is update
+     * Invoked whenever the element is updated
      * @param changedProperties changed properties
      * @returns {void}
      */
-    protected update(changedProperties: PropertyValues): void;
+    protected updated(changedProperties: PropertyValues): void;
     /**
      * Invoked when the element is first updated
      * @param changedProperties changed properties

package/lib/radio-button/index.js

@@ -1,8 +1,8 @@
 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 { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
+import { query } from '@refinitiv-ui/core/decorators/query.js';
 import { VERSION } from '../version.js';
 import { registerOverflowTooltip } from '../tooltip/index.js';
 import { applyRegistry, removeFromRegistry, getRadioGroup } from './radio-button-registry.js';
@@ -106,11 +106,11 @@ let RadioButton = class RadioButton extends ControlElement {
         super.disconnectedCallback();
     }
     /**
-     * Invoked whenever the element is update
+     * Invoked whenever the element is updated
      * @param changedProperties changed properties
      * @returns {void}
      */
-    update(changedProperties) {
+    updated(changedProperties) {
         if (this.isConnected && this.hasUpdated && changedProperties.has('name')) {
             applyRegistry(this, changedProperties.get('name'));
         }
@@ -118,7 +118,7 @@ let RadioButton = class RadioButton extends ControlElement {
         if (this.isConnected && this.hasUpdated && (changedProperties.has('checked') || (changedProperties.has('name')))) {
             this.manageGroupState();
         }
-        super.update(changedProperties);
+        super.updated(changedProperties);
     }
     /**
      * Invoked when the element is first updated
@@ -167,7 +167,6 @@ let RadioButton = class RadioButton extends ControlElement {
             return;
         }
         switch (event.key) {
-            case 'Enter':
             case ' ':
             case 'Spacebar':
                 if (this.readonly) {
@@ -175,10 +174,14 @@ let RadioButton = class RadioButton extends ControlElement {
                 }
                 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');

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/index.js

@@ -1,9 +1,9 @@
 import { __decorate } from "tslib";
 import { BasicElement, html, css } 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 { queryAll } from '@refinitiv-ui/core/lib/decorators/query-all.js';
-import { repeat } from '@refinitiv-ui/core/lib/directives/repeat.js';
+import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
+import { queryAll } from '@refinitiv-ui/core/decorators/query-all.js';
+import { repeat } from '@refinitiv-ui/core/directives/repeat.js';
 import { VERSION } from '../version.js';
 /**
  * Star visualisation component that is generally used for ranking

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

@@ -1,10 +1,10 @@
 import { JSXInterface } from '../jsx';
 import { TemplateResult } from '@refinitiv-ui/core';
-import { TemplateMap } from '@refinitiv-ui/core/lib/directives/template-map.js';
+import { TemplateMap } from '@refinitiv-ui/core/directives/template-map.js';
 import '../icon/index.js';
 import { TextField } from '../text-field/index.js';
 import { Translate } from '@refinitiv-ui/translate';
-import '@refinitiv-ui/phrasebook/lib/locale/en/search-field.js';
+import '@refinitiv-ui/phrasebook/locale/en/search-field.js';
 /**
  * Form control to get a search input from users.
  *

package/lib/search-field/index.js

@@ -1,11 +1,11 @@
 import { __decorate } from "tslib";
 import { html } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
-import { ifDefined } from '@refinitiv-ui/core/lib/directives/if-defined.js';
+import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { ifDefined } from '@refinitiv-ui/core/directives/if-defined.js';
 import '../icon/index.js';
 import { TextField } from '../text-field/index.js';
 import { translate } from '@refinitiv-ui/translate';
-import '@refinitiv-ui/phrasebook/lib/locale/en/search-field.js';
+import '@refinitiv-ui/phrasebook/locale/en/search-field.js';
 /**
  * Form control to get a search input from users.
  *

package/lib/select/index.js

@@ -1,16 +1,16 @@
 import { __decorate } from "tslib";
 import { ControlElement, html, css, FocusedPropertyKey } 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 { styleMap } from '@refinitiv-ui/core/lib/directives/style-map.js';
+import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
+import { query } from '@refinitiv-ui/core/decorators/query.js';
+import { styleMap } from '@refinitiv-ui/core/directives/style-map.js';
 import { VERSION } from '../version.js';
 import '../overlay/index.js';
 import '../item/index.js';
 import '../icon/index.js';
 import { Item } from '../item/index.js';
-import { CollectionComposer } from '@refinitiv-ui/utils/lib/collection.js';
-import { TimeoutTaskRunner, AnimationTaskRunner } from '@refinitiv-ui/utils/lib/async.js';
+import { CollectionComposer } from '@refinitiv-ui/utils/collection.js';
+import { TimeoutTaskRunner, AnimationTaskRunner } from '@refinitiv-ui/utils/async.js';
 // Observer config for items
 const observerOptions = {
     subtree: true,