@refinitiv-ui/elements 5.9.1 → 5.10.2-build.1840650306.1.56

package/CHANGELOG.md

@@ -3,6 +3,54 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.11.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@5.10.1...@refinitiv-ui/elements@5.11.0) (2022-01-14)
+
+
+### Features
+
+* **tree:** improve screen reader support ([#102](https://github.com/Refinitiv/refinitiv-ui/issues/102)) ([0d6db3b](https://github.com/Refinitiv/refinitiv-ui/commit/0d6db3bbf11eb6793ade6f60cab2f24b98bd9f40))
+
+
+
+
+
+## [5.10.1](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@5.10.0...@refinitiv-ui/elements@5.10.1) (2022-01-12)
+
+
+### Bug Fixes
+
+* **checkbox:** `Enter` key should not check or uncheck checkbox ([ee61255](https://github.com/Refinitiv/refinitiv-ui/commit/ee6125513ab670495ef7b87580fa97ea386c840a))
+* **pagination:** handle case when user input number with string ([#142](https://github.com/Refinitiv/refinitiv-ui/issues/142)) ([975f999](https://github.com/Refinitiv/refinitiv-ui/commit/975f9998bc1cf4b5326b567023984d8a893e6983))
+* **radio-button:** `Enter` key should not check or uncheck radio-button ([145f7bf](https://github.com/Refinitiv/refinitiv-ui/commit/145f7bfc15fe72e95d0719eaa6d691f09fd8a03c))
+* **radio-button:** add IE11 arrow keys navigation support ([#158](https://github.com/Refinitiv/refinitiv-ui/issues/158)) ([6389d00](https://github.com/Refinitiv/refinitiv-ui/commit/6389d006a07cdc5ed04ae77748f12726b7da48e1))
+
+
+
+
+
+# [5.10.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@5.9.1...@refinitiv-ui/elements@5.10.0) (2021-12-21)
+
+
+### Bug Fixes
+
+* **label:** break all words when line-clamp is 1 ([#115](https://github.com/Refinitiv/refinitiv-ui/issues/115)) ([3b9f456](https://github.com/Refinitiv/refinitiv-ui/commit/3b9f4566dcf39eba8464df6443be89a156c9692e))
+* **pagiantion:** convert prop toString in setter ([3c32ee9](https://github.com/Refinitiv/refinitiv-ui/commit/3c32ee95a237180da6e2449eb654b749de2340c9))
+* **pagination:** add missing feature blur to set page from the input ([f6ff2e1](https://github.com/Refinitiv/refinitiv-ui/commit/f6ff2e14509627119d8d3e22c8c2005fae81ef0c))
+* **pagination:** getter in internal will retrigger incorrect warning message ([e506885](https://github.com/Refinitiv/refinitiv-ui/commit/e50688509bc668be4592d0be73df891ffd139208))
+* **pagination:** max limit does not work ([715956e](https://github.com/Refinitiv/refinitiv-ui/commit/715956e4936f4a7b219c8d06ce755e7cbf43b755))
+* **pagination:** remove warning when set correct type value ([235b46b](https://github.com/Refinitiv/refinitiv-ui/commit/235b46b3306a1833515858ae421bd53942fe8242))
+* **pagination:** tab on the input to set a value ([675f4d6](https://github.com/Refinitiv/refinitiv-ui/commit/675f4d6039d0a391d34e946e42abf596b5f17e1b))
+* **pagination:** the input does not get disable state from the root ([6603949](https://github.com/Refinitiv/refinitiv-ui/commit/6603949d2cce1eb0c5b59f727b3c8a5273fb67a8))
+
+
+### Features
+
+* **pagination:** support max unknown ([d3997ce](https://github.com/Refinitiv/refinitiv-ui/commit/d3997ce16abb9c01ecc43bcf6a80386b02cd3c12))
+
+
+
+
+
 ## [5.9.1](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@5.9.0...@refinitiv-ui/elements@5.9.1) (2021-12-15)
 
 **Note:** Version bump only for package @refinitiv-ui/elements

package/README.md

@@ -29,10 +29,10 @@ Finally, import both elements that you want to use and its themes into your appl
 import '@refinitiv-ui/halo-theme/dark/imports/native-elements';
 
 // import element and its Halo dark theme
-import '@refinitiv-ui/elements/lib/button';
-import '@refinitiv-ui/elements/lib/panel';
-import '@refinitiv-ui/elements/lib/button/themes/halo/dark';
-import '@refinitiv-ui/elements/lib/panel/themes/halo/dark';
+import '@refinitiv-ui/elements/button';
+import '@refinitiv-ui/elements/panel';
+import '@refinitiv-ui/elements/button/themes/halo/dark';
+import '@refinitiv-ui/elements/panel/themes/halo/dark';
 ```
 
 Now, you can use the elements in your app.

package/lib/accordion/index.js

@@ -1,7 +1,7 @@
 import { __decorate } from "tslib";
 import { 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 { Collapse } from '../collapse/index.js';
 /**

package/lib/appstate-bar/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';
 import '../icon/index.js';
 /**

package/lib/autosuggest/index.js

@@ -1,14 +1,14 @@
 var Autosuggest_1;
 import { __decorate } from "tslib";
 import { css, html } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
-import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
-import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
-import { unsafeHTML } from '@refinitiv-ui/core/lib/directives/unsafe-html.js';
+import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { query } from '@refinitiv-ui/core/decorators/query.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
+import { unsafeHTML } from '@refinitiv-ui/core/directives/unsafe-html.js';
 import { VERSION } from '../version.js';
-import { AnimationTaskRunner, TimeoutTaskRunner } from '@refinitiv-ui/utils/lib/async.js';
+import { AnimationTaskRunner, TimeoutTaskRunner } from '@refinitiv-ui/utils/async.js';
 import { escapeRegExp, itemHighlightable, itemRenderer, queryWordSelect } from './helpers/utils.js';
-import { isIE, isMobile } from '@refinitiv-ui/utils/lib/browser.js';
+import { isIE, isMobile } from '@refinitiv-ui/utils/browser.js';
 import { Overlay } from '../overlay/index.js';
 import '../loader/index.js';
 import '../item/index.js';

package/lib/button/index.d.ts

@@ -58,10 +58,16 @@ export declare class Button extends ControlElement {
      */
     ariaPressed: string;
     /**
-    * Updates the element
-    * @param changedProperties Properties that has changed
-    * @returns {void}
-    */
+     * Aria indicating state of toggle button.
+     * Used when role is radio.
+     * @ignore
+     */
+    ariaChecked: string;
+    /**
+     * Updates the element
+     * @param changedProperties Properties that has changed
+     * @returns {void}
+     */
     protected update(changedProperties: PropertyValues): void;
     /**
      * the lifecycle method called when properties changed first time

package/lib/button/index.js

@@ -1,8 +1,8 @@
 import { __decorate } from "tslib";
 import { ControlElement, html } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
-import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
-import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { query } from '@refinitiv-ui/core/decorators/query.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { VERSION } from '../version.js';
 import { registerOverflowTooltip } from '../tooltip/index.js';
 import '../icon/index.js';
@@ -65,6 +65,12 @@ let Button = class Button extends ControlElement {
          * @ignore
          */
         this.ariaPressed = '';
+        /**
+         * Aria indicating state of toggle button.
+         * Used when role is radio.
+         * @ignore
+         */
+        this.ariaChecked = '';
     }
     /**
      * Element version number
@@ -74,13 +80,18 @@ let Button = class Button extends ControlElement {
         return VERSION;
     }
     /**
-    * Updates the element
-    * @param changedProperties Properties that has changed
-    * @returns {void}
-    */
+     * Updates the element
+     * @param changedProperties Properties that has changed
+     * @returns {void}
+     */
     update(changedProperties) {
         if (changedProperties.has('active') && this.toggles || changedProperties.has('toggles') && this.toggles) {
-            this.ariaPressed = String(this.active);
+            if (this.getAttribute('role') === 'radio') {
+                this.ariaChecked = String(this.active);
+            }
+            else {
+                this.ariaPressed = String(this.active);
+            }
         }
         super.update(changedProperties);
     }
@@ -215,6 +226,13 @@ __decorate([
         converter: { toAttribute: emptyStringToNull } // TODO: Remove after typescript update to allow nullable for ARIAMixin
     })
 ], Button.prototype, "ariaPressed", void 0);
+__decorate([
+    property({ type: String,
+        reflect: true,
+        attribute: 'aria-checked',
+        converter: { toAttribute: emptyStringToNull } // TODO: Remove after typescript update to allow nullable for ARIAMixin
+    })
+], Button.prototype, "ariaChecked", void 0);
 Button = __decorate([
     customElement('ef-button', {
         alias: 'coral-button'

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

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

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

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

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

@@ -9,6 +9,11 @@ export declare class ButtonBar extends BasicElement {
      * @returns version number
      */
     static get version(): string;
+    /**
+     * Element's role attribute for accessibility
+     * `role` should be `radiogroup` when it is managed.
+     */
+    protected defaultRole: 'toolbar' | 'radiogroup';
     /**
      * A `CSSResultGroup` that will be used
      * to style the host, slotted children
@@ -30,6 +35,45 @@ export declare class ButtonBar extends BasicElement {
      * @returns {void}
      */
     protected firstUpdated(changedProperties: PropertyValues): void;
+    /**
+     * Handles key down event
+     * @param event Key down event object
+     * @returns {void}
+     */
+    private onKeyDown;
+    /**
+     * Navigate to next or previous focusable button
+     * @param direction next | down
+     * @returns {void}
+     */
+    private navigateToSibling;
+    /**
+     * Navigate to the first focusable button
+     * @returns {void}
+     */
+    private first;
+    /**
+     * Navigate to the last focusable button
+     * @returns {void}
+     */
+    private last;
+    /**
+     * Sets the tabindex to -1 for all buttons except the currently focused one.
+     * @param target the button to be focused
+     * @param buttons Array of Buttons that contains target
+     * @returns {void}
+     */
+    private rovingTabIndex;
+    /**
+     * Set tabIndex to all buttons
+     * @returns {void}
+     */
+    private manageTabIndex;
+    /**
+     * Check if button bar is nested, a.k.a. has parent button bar
+     * @returns `True` if button bar is nested
+     */
+    private isNested;
     /**
      * Handles tap event
      * @param event the param is the event of click and tap handlers
@@ -47,6 +91,11 @@ export declare class ButtonBar extends BasicElement {
      * @returns the array of Element of the default slot
      */
     private getElementsOfSlot;
+    /**
+     * Return the array of Buttons which focusable
+     * @returns the array of focusable Buttons
+     */
+    private getFocusableButtons;
     /**
      * Filter Button classes by the toggles property
      * @param buttons the array of Button items is the converted nodes of the default slot

package/lib/button-bar/index.js

@@ -1,20 +1,30 @@
+var ButtonBar_1;
 import { __decorate } from "tslib";
 import { BasicElement, html, css } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
-import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
-import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
+import { ref, createRef } from '@refinitiv-ui/core/directives/ref.js';
 import { VERSION } from '../version.js';
 import { Button } from '../button/index.js';
 /**
  * Used to display multiple buttons to create a list of commands bar.
  */
-let ButtonBar = class ButtonBar extends BasicElement {
+let ButtonBar = ButtonBar_1 = class ButtonBar extends BasicElement {
     constructor() {
         super(...arguments);
+        /**
+         * Element's role attribute for accessibility
+         * `role` should be `radiogroup` when it is managed.
+         */
+        this.defaultRole = 'toolbar';
         /**
          * Manages user interaction, only allowing one toggle button to be active at any one time.
          */
         this.managed = false;
+        /**
+         * Default slot
+         */
+        this.defaultSlot = createRef();
     }
     /**
      * Element version number
@@ -84,6 +94,130 @@ let ButtonBar = class ButtonBar extends BasicElement {
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
         this.addEventListener('tap', this.onTapHandler);
+        this.addEventListener('keydown', this.onKeyDown);
+        this.manageTabIndex();
+    }
+    /**
+     * Handles key down event
+     * @param event Key down event object
+     * @returns {void}
+     */
+    onKeyDown(event) {
+        switch (event.key) {
+            case 'Tab':
+                // To prevent inserting button case, make sure there is only one tabIndex=0 in the buttons
+                this.manageTabIndex();
+                break;
+            case ' ':
+            case 'Spacebar':
+            case 'Enter':
+                this.onTapHandler(event);
+                break;
+            case 'Right':
+            case 'ArrowRight':
+                // Prevent calling twice if this component is nested
+                !this.isNested() && this.navigateToSibling('next');
+                break;
+            case 'Down':
+            case 'ArrowDown':
+                // Managed works as role radiogroup so `Up` and `Down` key can navigate among radios in the group
+                this.managed && this.navigateToSibling('next');
+                break;
+            case 'Left':
+            case 'ArrowLeft':
+                !this.isNested() && this.navigateToSibling('previous');
+                break;
+            case 'Up':
+            case 'ArrowUp':
+                this.managed && this.navigateToSibling('previous');
+                break;
+            case 'Home':
+                !this.isNested() && this.first();
+                break;
+            case 'End':
+                !this.isNested() && this.last();
+                break;
+            default:
+                return;
+        }
+    }
+    /**
+     * Navigate to next or previous focusable button
+     * @param direction next | down
+     * @returns {void}
+     */
+    navigateToSibling(direction) {
+        const buttons = this.getFocusableButtons();
+        if (buttons.length <= 0) {
+            return;
+        }
+        const focusedButtonIndex = buttons.findIndex(button => button === document.activeElement);
+        const nextButton = direction === 'next'
+            ? buttons[focusedButtonIndex + 1] || buttons[0]
+            : buttons[focusedButtonIndex - 1] || buttons[buttons.length - 1];
+        nextButton.focus();
+        this.rovingTabIndex(nextButton, buttons);
+    }
+    /**
+     * Navigate to the first focusable button
+     * @returns {void}
+     */
+    first() {
+        const buttons = this.getFocusableButtons();
+        if (buttons.length <= 0) {
+            return;
+        }
+        buttons[0].focus();
+        this.rovingTabIndex(buttons[0], buttons);
+    }
+    /**
+     * Navigate to the last focusable button
+     * @returns {void}
+     */
+    last() {
+        const buttons = this.getFocusableButtons();
+        if (buttons.length <= 0) {
+            return;
+        }
+        buttons[buttons.length - 1].focus();
+        this.rovingTabIndex(buttons[buttons.length - 1], buttons);
+    }
+    /**
+     * Sets the tabindex to -1 for all buttons except the currently focused one.
+     * @param target the button to be focused
+     * @param buttons Array of Buttons that contains target
+     * @returns {void}
+     */
+    rovingTabIndex(target, buttons) {
+        buttons.forEach((button) => {
+            button.tabIndex = -1;
+        });
+        target.tabIndex = 0;
+    }
+    /**
+     * Set tabIndex to all buttons
+     * @returns {void}
+     */
+    manageTabIndex() {
+        if (this.isNested()) {
+            return;
+        }
+        const buttons = this.getFocusableButtons();
+        if (buttons && buttons.length > 0) {
+            // Set tabindex=0 to previous focused button when new button added If not found set it to first button instead
+            let focusedButtonIndex = buttons.findIndex(button => document.activeElement === button);
+            if (focusedButtonIndex === -1) {
+                focusedButtonIndex = 0;
+            }
+            this.rovingTabIndex(buttons[focusedButtonIndex], buttons);
+        }
+    }
+    /**
+     * Check if button bar is nested, a.k.a. has parent button bar
+     * @returns `True` if button bar is nested
+     */
+    isNested() {
+        return this.parentElement instanceof ButtonBar_1;
     }
     /**
      * Handles tap event
@@ -99,6 +233,8 @@ let ButtonBar = class ButtonBar extends BasicElement {
             event.stopPropagation();
             this.manageButtons(target);
         }
+        target.focus();
+        this.rovingTabIndex(target, this.getFocusableButtons());
     }
     /**
      * Get the target Button item and handle it with other managed Button items
@@ -120,8 +256,15 @@ let ButtonBar = class ButtonBar extends BasicElement {
      * @returns the array of Element of the default slot
      */
     getElementsOfSlot() {
-        return this.defaultSlot.assignedNodes()
-            .filter(node => node instanceof Element);
+        var _a;
+        return (_a = this.defaultSlot.value) === null || _a === void 0 ? void 0 : _a.assignedNodes().filter(node => node instanceof Element);
+    }
+    /**
+     * Return the array of Buttons which focusable
+     * @returns the array of focusable Buttons
+     */
+    getFocusableButtons() {
+        return [...this.querySelectorAll('ef-button,coral-button')].filter(button => !button.disabled);
     }
     /**
      * Filter Button classes by the toggles property
@@ -138,16 +281,13 @@ let ButtonBar = class ButtonBar extends BasicElement {
      * @return {TemplateResult}  Render template
      */
     render() {
-        return html `<slot></slot>`;
+        return html `<slot ${ref(this.defaultSlot)} ></slot>`;
     }
 };
 __decorate([
     property({ type: Boolean, reflect: true })
 ], ButtonBar.prototype, "managed", void 0);
-__decorate([
-    query('slot:not([name])')
-], ButtonBar.prototype, "defaultSlot", void 0);
-ButtonBar = __decorate([
+ButtonBar = ButtonBar_1 = __decorate([
     customElement('ef-button-bar', {
         alias: 'coral-split-button'
     })

package/lib/calendar/constants.js

@@ -1,4 +1,4 @@
-import { uuid } from '@refinitiv-ui/utils/lib/uuid.js';
+import { uuid } from '@refinitiv-ui/utils/uuid.js';
 export var RenderView;
 (function (RenderView) {
     RenderView["DAY"] = "day";

package/lib/calendar/index.d.ts

@@ -4,7 +4,7 @@ import { TranslateDirective, TranslatePromise } from '@refinitiv-ui/translate';
 import { CalendarFilter } from './types';
 import './locales.js';
 import '../button/index.js';
-import '@refinitiv-ui/phrasebook/lib/locale/en/calendar.js';
+import '@refinitiv-ui/phrasebook/locale/en/calendar.js';
 export { CalendarFilter };
 /**
  * Standard calendar element

package/lib/calendar/index.js

@@ -1,22 +1,22 @@
 import { __decorate } from "tslib";
 import { ControlElement, 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 { state } from '@refinitiv-ui/core/lib/decorators/state.js';
-import { ifDefined } from '@refinitiv-ui/core/lib/directives/if-defined.js';
-import { cache } from '@refinitiv-ui/core/lib/directives/cache.js';
-import { guard } from '@refinitiv-ui/core/lib/directives/guard.js';
-import { ref, createRef } from '@refinitiv-ui/core/lib/directives/ref.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 { ifDefined } from '@refinitiv-ui/core/directives/if-defined.js';
+import { cache } from '@refinitiv-ui/core/directives/cache.js';
+import { guard } from '@refinitiv-ui/core/directives/guard.js';
+import { ref, createRef } from '@refinitiv-ui/core/directives/ref.js';
 import { VERSION } from '../version.js';
-import { isIE } from '@refinitiv-ui/utils/lib/browser.js';
-import { DateFormat, format, utcFormat, utcParse, isValidDate, isWeekend, isAfter, isBefore, addMonths, subMonths, isToday, isThisMonth, isThisYear, isSameDay, isSameMonth, isSameYear, toDateSegment, parse } from '@refinitiv-ui/utils/lib/date.js';
-import { left, right, up, down, first, last } from '@refinitiv-ui/utils/lib/navigation.js';
+import { isIE } from '@refinitiv-ui/utils/browser.js';
+import { DateFormat, format, utcFormat, utcParse, isValidDate, isWeekend, isAfter, isBefore, addMonths, subMonths, isToday, isThisMonth, isThisYear, isSameDay, isSameMonth, isSameYear, toDateSegment, parse } from '@refinitiv-ui/utils/date.js';
+import { left, right, up, down, first, last } from '@refinitiv-ui/utils/navigation.js';
 import { monthInfo, weekdaysNames, monthsNames, formatLocaleDate, ViewFormatTranslateParams } from './utils.js';
 import { translate, getLocale, TranslatePropertyKey } from '@refinitiv-ui/translate';
 import { RenderView, CalendarLocaleScope, FIRST_DAY_OF_WEEK, YEARS_PER_YEAR_VIEW, DAY_VIEW, YEAR_VIEW, MONTH_VIEW } from './constants.js';
 import './locales.js';
 import '../button/index.js';
-import '@refinitiv-ui/phrasebook/lib/locale/en/calendar.js';
+import '@refinitiv-ui/phrasebook/locale/en/calendar.js';
 /**
  * Standard calendar element
  *

package/lib/calendar/types.d.ts

@@ -1,4 +1,4 @@
-import { CellIndex } from '@refinitiv-ui/utils/lib/navigation.js';
+import { CellIndex } from '@refinitiv-ui/utils/navigation.js';
 import { RenderView } from './constants.js';
 export interface CellSelectionModel {
     selected?: boolean;

package/lib/calendar/utils.js

@@ -1,4 +1,4 @@
-import { toDateSegment, getDaysInMonth, utcParse } from '@refinitiv-ui/utils/lib/date.js';
+import { toDateSegment, getDaysInMonth, utcParse } from '@refinitiv-ui/utils/date.js';
 import { DEFAULT_LOCALE, resolveLocale } from '@refinitiv-ui/i18n';
 import { CalendarLocaleScope } from './constants.js';
 /**

package/lib/canvas/index.js

@@ -1,7 +1,7 @@
 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';
 /**
  * A Component uses to draw graphics on a web page,