@refinitiv-ui/elements 5.8.1 → 5.9.1-alpha.0

package/CHANGELOG.md

@@ -3,6 +3,37 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.9.1-alpha.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@5.9.0...@refinitiv-ui/elements@5.9.1-alpha.0) (2021-12-17)
+
+
+### 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))
+
+
+
+
+
+# [5.9.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@5.8.1...@refinitiv-ui/elements@5.9.0) (2021-12-15)
+
+### Features
+
+* add named exports to elements, themes and locales to support full backward compatibility ([#114](https://github.com/Refinitiv/refinitiv-ui/issues/114)) ([7d25d50](https://github.com/Refinitiv/refinitiv-ui/commit/7d25d50c649308fc5a17d086e9e01467a0dabfb9))
+* **calendar:** improve screen reader support ([#73](https://github.com/Refinitiv/refinitiv-ui/issues/73)) ([a2576cc](https://github.com/Refinitiv/refinitiv-ui/commit/a2576cc8a1f0229bb5988af0c9d0bbf8ce7f765c))
+* **combo-box:** improve screen reader support ([#116](https://github.com/Refinitiv/refinitiv-ui/issues/116)) ([f603de1](https://github.com/Refinitiv/refinitiv-ui/commit/f603de1d3b1900875d6903477938ecd21d055531))
+* **time-picker:** improve screen reader support ([#121](https://github.com/Refinitiv/refinitiv-ui/issues/121)) ([1eb8bee](https://github.com/Refinitiv/refinitiv-ui/commit/1eb8beeb7d3b0d7be7224943e7d0a7c62c0cb788))
+* **calendar:** add accessibility ([#73](https://github.com/Refinitiv/refinitiv-ui/issues/73)) ([a2576cc](https://github.com/Refinitiv/refinitiv-ui/commit/a2576cc8a1f0229bb5988af0c9d0bbf8ce7f765c))
+
+
+
+
+
+## [5.8.2-alpha.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@5.8.1...@refinitiv-ui/elements@5.8.2-alpha.0) (2021-12-13)
+
+**Note:** Version bump only for package @refinitiv-ui/elements
+
+
+
 ## [5.8.1](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@5.8.0...@refinitiv-ui/elements@5.8.1) (2021-12-07)
 
 **Note:** Version bump only for package @refinitiv-ui/elements
@@ -18,7 +49,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 * change default role to more generic type for better extendibility ([#100](https://github.com/Refinitiv/refinitiv-ui/issues/100)) ([fe999dc](https://github.com/Refinitiv/refinitiv-ui/commit/fe999dc66b5f42581a37329ced697ae6ac2dc929))
 * **combo-box:** fix arrow icon not show in Solar when disabled ([55c1008](https://github.com/Refinitiv/refinitiv-ui/commit/55c1008b7b63f915a7575059c6539e63a757e389))
-* **combo-box:** import counter instead of pill ([6410c03](https://github.com/Refinitiv/refinitiv-ui/commit/6410c03dd12077f25347dddb249b6a6700186abc))
+* **combo-box:** import `counter` instead of `pill` ([6410c03](https://github.com/Refinitiv/refinitiv-ui/commit/6410c03dd12077f25347dddb249b6a6700186abc))
 
 
 ### Features

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/calendar/constants.d.ts

@@ -20,3 +20,7 @@ export declare const MONTH_VIEW: {
     columnCount: number;
     totalCount: number;
 };
+/**
+ * A symbol to ensure these locales cannot be overridden
+ */
+export declare const CalendarLocaleScope: string;

package/lib/calendar/constants.js

@@ -1,3 +1,4 @@
+import { uuid } from '@refinitiv-ui/utils/lib/uuid.js';
 export var RenderView;
 (function (RenderView) {
     RenderView["DAY"] = "day";
@@ -21,3 +22,7 @@ export const MONTH_VIEW = {
     columnCount: 4,
     totalCount: 4 * 4
 };
+/**
+ * A symbol to ensure these locales cannot be overridden
+ */
+export const CalendarLocaleScope = uuid();

package/lib/calendar/index.d.ts

@@ -1,10 +1,11 @@
 import { JSXInterface } from '../jsx';
 import { ControlElement, TemplateResult, CSSResultGroup, PropertyValues, MultiValue } from '@refinitiv-ui/core';
 import { TranslateDirective, TranslatePromise } from '@refinitiv-ui/translate';
-import type { CalendarFilter } from './types';
+import { CalendarFilter } from './types';
 import './locales.js';
 import '../button/index.js';
-export type { CalendarFilter };
+import '@refinitiv-ui/phrasebook/lib/locale/en/calendar.js';
+export { CalendarFilter };
 /**
  * Standard calendar element
  *
@@ -25,6 +26,7 @@ export declare class Calendar extends ControlElement implements MultiValue {
      * @returns version number
      */
     static get version(): string;
+    protected readonly defaultRole: string | null;
     /**
      * A `CSSResultGroup` that will be used
      * to style the host, slotted children
@@ -32,6 +34,10 @@ export declare class Calendar extends ControlElement implements MultiValue {
      * @return CSS template
      */
     static get styles(): CSSResultGroup;
+    /**
+     * Reference to the view button
+     */
+    private viewBtnRef;
     private _min;
     /**
     * Set minimum date
@@ -110,25 +116,63 @@ export declare class Calendar extends ControlElement implements MultiValue {
      * Fill head and tail cell dates
      */
     fillCells: boolean;
+    /**
+     * Calendar internal translation strings
+     */
+    protected dateT: TranslateDirective;
+    protected dateTPromise: TranslatePromise;
     /**
      * Used for translations
      */
     protected t: TranslateDirective;
-    protected tPromise: TranslatePromise;
     /**
      * Used for internal navigation between render views
      */
-    private renderView;
-    private isDateAvailable;
+    private _renderView;
+    private get renderView();
+    private set renderView(value);
     /**
-     * Get weekday numbers.
-     * Sort the list based on first day of the week
+     * Used for keyboard navigation when trying
+     * to restore focus on re-render and control navigation
      */
-    private get weekdaysNames();
+    private _activeCellIndex;
+    private get activeCellIndex();
+    private set activeCellIndex(value);
     /**
-     * Get localised month names from January to December
+     * Silently reset cell index without calling request update
+     * @returns {void}
      */
-    private get monthsNames();
+    private resetActiveCellIndex;
+    private navigationGrid;
+    /**
+     * Connected to role. If false, the values are not announced in the screen reader
+     */
+    private announceValues;
+    /**
+     * Get an active element
+     */
+    private get activeElement();
+    /**
+     * Get selectable date button element by index
+     * @param index Cell index
+     * @returns button HTML date button element or null
+     */
+    private getDateButtonByIndex;
+    /**
+     * Get active date button element
+     * @returns button HTML date button element or null
+     */
+    private get activeDateButton();
+    /**
+     * Return true if passed target is HTML
+     * date button element that can be selected
+     * @param target Target to check
+     * @returns isDateButtonElement
+     */
+    private isDateButton;
+    private isDateAvailable;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     /**
      * Perform asynchronous update
      * @returns promise
@@ -140,6 +184,12 @@ export declare class Calendar extends ControlElement implements MultiValue {
     * @returns {void}
     */
     protected update(changedProperties: PropertyValues): void;
+    /**
+     * Called after render life-cycle finished
+     * @param changedProperties Properties which have changed
+     * @return {void}
+     */
+    protected updated(changedProperties: PropertyValues): void;
     /**
      * Run when an element has been first updated
      * @param changedProperties properties that was changed on first update
@@ -198,21 +248,30 @@ export declare class Calendar extends ControlElement implements MultiValue {
      * @returns cell selection model
      */
     private getCellSelection;
+    /**
+     * Set navigation map based on rows
+     * @param rows A collection of rows with cells
+     * @returns {void}
+     */
+    private setNavigationMap;
     /**
      * Run when next button is tapped.
      * Change current view to next view
+     * @param event Next view tap event
      * @returns {void}
      */
     private onNextTap;
     /**
      * Run when previous button is tapped.
      * Change current view to previous view
+     * @param event Previous view tap event
      * @returns {void}
      */
     private onPreviousTap;
     /**
      * Run when change view button is tapped.
      * Switch between views
+     * @param event Render view tap event
      * @returns {void}
      */
     private onRenderViewTap;
@@ -221,7 +280,7 @@ export declare class Calendar extends ControlElement implements MultiValue {
      * @param event Keyboard event
      * @returns {void}
      */
-    private onTableKeyDown;
+    private onKeyDown;
     /**
      * Run when tap event happens ot table.
      * Select the values or switch the view
@@ -229,6 +288,22 @@ export declare class Calendar extends ControlElement implements MultiValue {
      * @returns {void}
      */
     private onTableTap;
+    /**
+     * Navigate over the grid
+     * @param key Navigation direction
+     * @returns navigation promise
+     */
+    private onNavigation;
+    /**
+     * Navigate to the next view
+     * @returns {void}
+     */
+    private toNextView;
+    /**
+     * Navigate to the previous view
+     * @returns {void}
+     */
+    private toPreviousView;
     /**
      * Run when tap event happened on DAY view and the cell has the values
      * Try to select/deselect cell value
@@ -261,13 +336,11 @@ export declare class Calendar extends ControlElement implements MultiValue {
      */
     private get formattedViewRender();
     /**
-     * Render cell content template.
-     * If the cell is selectable (aka has value) add selection part
-     * @param text Text to render
-     * @param selectable True if cell may be selected
-     * @returns template result
+     * Set an active state of the cell based
+     * @param rows A collection of rows with cells
+     * @returns {void}
      */
-    private renderContentBox;
+    private setActiveCell;
     /**
      * Get year view template
      */
@@ -288,6 +361,12 @@ export declare class Calendar extends ControlElement implements MultiValue {
      * Render a view based on the current render view
      */
     private get viewRender();
+    /**
+     * Get cell translate label key based on selected state
+     * @param cell Cell
+     * @returns key Translate label key
+     */
+    private getCellLabelKey;
     /**
      * Render cell template. Cell can be a day, month or year
      * @param cell Cell object
@@ -300,6 +379,16 @@ export declare class Calendar extends ControlElement implements MultiValue {
      * @returns template result
      */
     private renderRows;
+    /**
+     * Render button navigation template
+     * @returns template result
+     */
+    private get buttonNavigationTemplate();
+    /**
+     * A template used to notify currently selected value for screen readers
+     * @returns template result
+     */
+    private get selectionTemplate();
     /**
      * A `TemplateResult` that will be used
      * to render the updated internal template.