@refinitiv-ui/elements 6.5.2 → 6.6.0

package/lib/pagination/custom-elements.json

@@ -46,7 +46,7 @@
       "events": [
         {
           "name": "value-changed",
-          "description": "Fired when the `value` property is changed"
+          "description": "Fired when the user interacts with the control to change pages and so the `value` property changed. The event is not triggered if `value` is changed programmatically."
         }
       ],
       "methods": [

package/lib/pagination/custom-elements.md

@@ -21,6 +21,6 @@ Used to control and navigate through multiple pages
 
 ## Events
 
-| Event           | Description                                |
-|-----------------|--------------------------------------------|
-| `value-changed` | Fired when the `value` property is changed |
+| Event           | Description                                      |
+|-----------------|--------------------------------------------------|
+| `value-changed` | Fired when the user interacts with the control to change pages and so the `value` property changed. The event is not triggered if `value` is changed programmatically. |

package/lib/pagination/index.d.ts

@@ -13,7 +13,7 @@ declare enum Direction {
 }
 /**
  * Used to control and navigate through multiple pages
- * @fires value-changed - Fired when the `value` property is changed
+ * @fires value-changed - Fired when the user interacts with the control to change pages and so the `value` property changed. The event is not triggered if `value` is changed programmatically.
  */
 export declare class Pagination extends BasicElement {
     /**

package/lib/pagination/index.js

@@ -19,7 +19,7 @@ var Direction;
 })(Direction || (Direction = {}));
 /**
  * Used to control and navigate through multiple pages
- * @fires value-changed - Fired when the `value` property is changed
+ * @fires value-changed - Fired when the user interacts with the control to change pages and so the `value` property changed. The event is not triggered if `value` is changed programmatically.
  */
 let Pagination = class Pagination extends BasicElement {
     constructor() {
@@ -511,8 +511,6 @@ __decorate([
     state()
 ], Pagination.prototype, "inputFocused", void 0);
 Pagination = __decorate([
-    customElement('ef-pagination', {
-        alias: 'emerald-pagination'
-    })
+    customElement('ef-pagination')
 ], Pagination);
 export { Pagination };

package/lib/pagination/themes/halo/dark/index.js

@@ -2,4 +2,4 @@ import '@refinitiv-ui/elements/button/themes/halo/dark';
 import '@refinitiv-ui/elements/button-bar/themes/halo/dark';
 import '@refinitiv-ui/elements/layout/themes/halo/dark';
 
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-pagination', styles: ':host [part=container]{align-items:center;justify-content:flex-end}:host [part=label]{clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}:host [part=input]{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;font-size:12rem;font-weight:400;max-width:100%;padding:0 8px;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#ccc;border-radius:0;background-color:#0d0d0d;text-overflow:ellipsis;border:1px solid #404040;touch-action:manipulation;min-width:40px;text-align:center;height:22px;width:150px;margin:0}:host [part=input][disabled]{color:rgba(204,204,204,.5);border:1px solid rgba(64,64,64,.5)}:host [part=input][type=number]{padding-right:0}:host [part=input][warning]{border:1px solid #7f6400}:host [part=input][warning][disabled]{color:rgba(204,204,204,.5);border:1px solid rgba(127,100,0,.5)}:host [part=input][error],:host [part=input][error][warning]{border:1px solid #a01c2b}:host [part=input][error][disabled],:host [part=input][error][warning][disabled]{color:rgba(204,204,204,.5);border:1px solid rgba(160,28,43,.5)}:host [part=input] ::-ms-clear{display:none}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:hover{border-color:grey;color:#fff}:host [part=input]:focus{background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=button]{touch-action:manipulation}:host{margin:1px 0}:host [part=input]::-moz-selection{color:#fff;background-color:#334bff}:host [part=input]::selection{color:#fff;background-color:#334bff}:host [part=buttons]{margin:0}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-pagination', styles: ':host [part=container]{align-items:center;justify-content:flex-end}:host [part=label]{clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}:host [part=input]{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;font-size:12px;font-weight:400;max-width:100%;padding:0 8px;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#ccc;border-radius:0;background-color:#0d0d0d;text-overflow:ellipsis;border:1px solid #404040;touch-action:manipulation;min-width:40px;text-align:center;height:22px;width:150px;margin:0}:host [part=input][disabled]{color:rgba(204,204,204,.5);border:1px solid rgba(64,64,64,.5)}:host [part=input][type=number]{padding-right:0}:host [part=input][warning]{border:1px solid #7f6400}:host [part=input][warning][disabled]{color:rgba(204,204,204,.5);border:1px solid rgba(127,100,0,.5)}:host [part=input][error],:host [part=input][error][warning]{border:1px solid #a01c2b}:host [part=input][error][disabled],:host [part=input][error][warning][disabled]{color:rgba(204,204,204,.5);border:1px solid rgba(160,28,43,.5)}:host [part=input] ::-ms-clear{display:none}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:hover{border-color:grey;color:#fff}:host [part=input]:focus{background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=button]{touch-action:manipulation}:host{margin:1px 0}:host [part=input]::-moz-selection{color:#fff;background-color:#334bff}:host [part=input]::selection{color:#fff;background-color:#334bff}:host [part=buttons]{margin:0}' }}));

package/lib/pagination/themes/halo/light/index.js

@@ -2,4 +2,4 @@ import '@refinitiv-ui/elements/button/themes/halo/light';
 import '@refinitiv-ui/elements/button-bar/themes/halo/light';
 import '@refinitiv-ui/elements/layout/themes/halo/light';
 
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-pagination', styles: ':host [part=container]{align-items:center;justify-content:flex-end}:host [part=label]{clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}:host [part=input]{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;font-size:12rem;font-weight:400;height:24px;max-width:100%;padding:0 8px;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#404040;border-radius:0;background-color:#fff;text-overflow:ellipsis;border:1px solid #595959;touch-action:manipulation;min-width:40px;text-align:center;width:150px;margin:0 1px}:host [part=input][disabled]{color:rgba(64,64,64,.5);border:1px solid rgba(89,89,89,.5)}:host [part=input][type=number]{padding-right:0}:host [part=input][warning]{border:1px solid #cca000}:host [part=input][warning][disabled]{color:rgba(64,64,64,.5);border:1px solid rgba(204,160,0,.5)}:host [part=input][error],:host [part=input][error][warning]{border:1px solid #b63243}:host [part=input][error][disabled],:host [part=input][error][warning][disabled]{color:rgba(64,64,64,.5);border:1px solid rgba(182,50,67,.5)}:host [part=input] ::-ms-clear{display:none}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:hover{border-color:#0d0d0d;color:#0d0d0d}:host [part=input]:focus{background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=button]{touch-action:manipulation}:host{margin:1px 0}:host [part=input]::-moz-selection{color:#fff;background-color:#334bff}:host [part=input]::selection{color:#fff;background-color:#334bff}:host [part=buttons]{margin:0}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-pagination', styles: ':host [part=container]{align-items:center;justify-content:flex-end}:host [part=label]{clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}:host [part=input]{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;font-size:12px;font-weight:400;height:24px;max-width:100%;padding:0 8px;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#404040;border-radius:0;background-color:#fff;text-overflow:ellipsis;border:1px solid #595959;touch-action:manipulation;min-width:40px;text-align:center;width:150px;margin:0 1px}:host [part=input][disabled]{color:rgba(64,64,64,.5);border:1px solid rgba(89,89,89,.5)}:host [part=input][type=number]{padding-right:0}:host [part=input][warning]{border:1px solid #cca000}:host [part=input][warning][disabled]{color:rgba(64,64,64,.5);border:1px solid rgba(204,160,0,.5)}:host [part=input][error],:host [part=input][error][warning]{border:1px solid #b63243}:host [part=input][error][disabled],:host [part=input][error][warning][disabled]{color:rgba(64,64,64,.5);border:1px solid rgba(182,50,67,.5)}:host [part=input] ::-ms-clear{display:none}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:hover{border-color:#0d0d0d;color:#0d0d0d}:host [part=input]:focus{background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=button]{touch-action:manipulation}:host{margin:1px 0}:host [part=input]::-moz-selection{color:#fff;background-color:#334bff}:host [part=input]::selection{color:#fff;background-color:#334bff}:host [part=buttons]{margin:0}' }}));

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

@@ -2,4 +2,4 @@ import '@refinitiv-ui/elements/button/themes/solar/charcoal';
 import '@refinitiv-ui/elements/button-bar/themes/solar/charcoal';
 import '@refinitiv-ui/elements/layout/themes/solar/charcoal';
 
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-pagination', styles: ':host [part=container]{align-items:center;justify-content:flex-end}:host [part=label]{clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}:host [part=input]{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;font-size:13rem;font-weight:400;max-width:100%;padding:0 5px;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#c2c2c2;border-radius:0;background-color:#000;text-overflow:ellipsis;border:1px solid #4a4a52;touch-action:manipulation;min-width:40px;text-align:center;height:21px;width:150px;margin:0}:host [part=input][disabled]{color:rgba(194,194,194,.6);border:1px solid rgba(74,74,82,.6)}:host [part=input][type=number]{padding-right:0}:host [part=input][warning]{border:1px solid #f93}:host [part=input][warning][disabled]{color:rgba(194,194,194,.6);border:1px solid rgba(255,153,51,.6)}:host [part=input][error],:host [part=input][error][warning]{border:1px solid #f5475b}:host [part=input][error][disabled],:host [part=input][error][warning][disabled]{color:rgba(194,194,194,.6);border:1px solid rgba(245,71,91,.6)}:host [part=input] ::-ms-clear{display:none}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:hover{border-color:#77777d;color:#c2c2c2}:host [part=button]{touch-action:manipulation}:host{--first-icon:previous;--last-icon:next;--previous-icon:left;--next-icon:right}:host [part=input]:focus{background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#f93;border-style:dotted}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-pagination', styles: ':host [part=container]{align-items:center;justify-content:flex-end}:host [part=label]{clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}:host [part=input]{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;font-size:13px;font-weight:400;max-width:100%;padding:0 5px;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#c2c2c2;border-radius:0;background-color:#000;text-overflow:ellipsis;border:1px solid #4a4a52;touch-action:manipulation;min-width:40px;text-align:center;height:21px;width:150px;margin:0}:host [part=input][disabled]{color:rgba(194,194,194,.6);border:1px solid rgba(74,74,82,.6)}:host [part=input][type=number]{padding-right:0}:host [part=input][warning]{border:1px solid #f93}:host [part=input][warning][disabled]{color:rgba(194,194,194,.6);border:1px solid rgba(255,153,51,.6)}:host [part=input][error],:host [part=input][error][warning]{border:1px solid #f5475b}:host [part=input][error][disabled],:host [part=input][error][warning][disabled]{color:rgba(194,194,194,.6);border:1px solid rgba(245,71,91,.6)}:host [part=input] ::-ms-clear{display:none}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:hover{border-color:#77777d;color:#c2c2c2}:host [part=button]{touch-action:manipulation}:host{--first-icon:previous;--last-icon:next;--previous-icon:left;--next-icon:right}:host [part=input]:focus{background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#f93;border-style:dotted}' }}));

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

@@ -2,4 +2,4 @@ import '@refinitiv-ui/elements/button/themes/solar/pearl';
 import '@refinitiv-ui/elements/button-bar/themes/solar/pearl';
 import '@refinitiv-ui/elements/layout/themes/solar/pearl';
 
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-pagination', styles: ':host [part=container]{align-items:center;justify-content:flex-end}:host [part=label]{clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}:host [part=input]{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;font-size:13rem;font-weight:400;max-width:100%;padding:0 5px;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#484848;border-radius:0;background-color:#fff;text-overflow:ellipsis;border:1px solid #a9afba;touch-action:manipulation;min-width:40px;text-align:center;height:23px;width:150px;margin:0 1px}:host [part=input][disabled]{color:rgba(72,72,72,.6);border:1px solid rgba(169,175,186,.6)}:host [part=input][type=number]{padding-right:0}:host [part=input][warning]{border:1px solid #f93}:host [part=input][warning][disabled]{color:rgba(72,72,72,.6);border:1px solid rgba(255,153,51,.6)}:host [part=input][error],:host [part=input][error][warning]{border:1px solid #d94255}:host [part=input][error][disabled],:host [part=input][error][warning][disabled]{color:rgba(72,72,72,.6);border:1px solid rgba(217,66,85,.6)}:host [part=input] ::-ms-clear{display:none}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:hover{border-color:#bfc3cb;color:#484848}:host [part=button]{touch-action:manipulation}:host{--first-icon:previous;--last-icon:next;--previous-icon:left;--next-icon:right}:host [part=input]:focus{background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#ffb266;border-style:dotted}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-pagination', styles: ':host [part=container]{align-items:center;justify-content:flex-end}:host [part=label]{clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}:host [part=input]{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;font-size:13px;font-weight:400;max-width:100%;padding:0 5px;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#484848;border-radius:0;background-color:#fff;text-overflow:ellipsis;border:1px solid #a9afba;touch-action:manipulation;min-width:40px;text-align:center;height:23px;width:150px;margin:0 1px}:host [part=input][disabled]{color:rgba(72,72,72,.6);border:1px solid rgba(169,175,186,.6)}:host [part=input][type=number]{padding-right:0}:host [part=input][warning]{border:1px solid #f93}:host [part=input][warning][disabled]{color:rgba(72,72,72,.6);border:1px solid rgba(255,153,51,.6)}:host [part=input][error],:host [part=input][error][warning]{border:1px solid #d94255}:host [part=input][error][disabled],:host [part=input][error][warning][disabled]{color:rgba(72,72,72,.6);border:1px solid rgba(217,66,85,.6)}:host [part=input] ::-ms-clear{display:none}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:hover{border-color:#bfc3cb;color:#484848}:host [part=button]{touch-action:manipulation}:host{--first-icon:previous;--last-icon:next;--previous-icon:left;--next-icon:right}:host [part=input]:focus{background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#ffb266;border-style:dotted}' }}));

package/lib/panel/index.js

@@ -67,8 +67,6 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], Panel.prototype, "transparent", void 0);
 Panel = __decorate([
-    customElement('ef-panel', {
-        alias: 'coral-panel'
-    })
+    customElement('ef-panel')
 ], Panel);
 export { Panel };

package/lib/password-field/custom-elements.json

@@ -128,15 +128,11 @@
       "events": [
         {
           "name": "value-changed",
-          "description": "Dispatched when value changes"
+          "description": "Fired when user commits a value change. The event is not triggered if `value` property is changed programmatically."
         },
         {
           "name": "error-changed",
-          "description": "Dispatched when error state changes"
-        },
-        {
-          "name": "icon-click",
-          "description": "Dispatched when icon is clicked"
+          "description": "Fired when user inputs an invalid value. The event is not triggered if `error` property is changed programmatically."
         }
       ]
     }

package/lib/password-field/custom-elements.md

@@ -26,8 +26,7 @@ A form control element for password.
 
 ## Events
 
-| Event           | Description                         |
-|-----------------|-------------------------------------|
-| `error-changed` | Dispatched when error state changes |
-| `icon-click`    | Dispatched when icon is clicked     |
-| `value-changed` | Dispatched when value changes       |
+| Event           | Description                                      |
+|-----------------|--------------------------------------------------|
+| `error-changed` | Fired when user inputs an invalid value. The event is not triggered if `error` property is changed programmatically. |
+| `value-changed` | Fired when user commits a value change. The event is not triggered if `value` property is changed programmatically. |

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

@@ -8,9 +8,8 @@ import { Translate } from '@refinitiv-ui/translate';
 /**
  * A form control element for password.
  *
- * @fires value-changed - Dispatched when value changes
- * @fires error-changed - Dispatched when error state changes
- * @fires icon-click - Dispatched when icon is clicked
+ * @fires value-changed - Fired when user commits a value change. The event is not triggered if `value` property is changed programmatically.
+ * @fires error-changed - Fired when user inputs an invalid value. The event is not triggered if `error` property is changed programmatically.
  *
  * @attr {boolean} disabled - Set disabled state
  * @prop {boolean} [disabled=false] - Set disabled state

package/lib/password-field/index.js

@@ -11,9 +11,8 @@ let isEyeOffPreloadRequested = false;
 /**
  * A form control element for password.
  *
- * @fires value-changed - Dispatched when value changes
- * @fires error-changed - Dispatched when error state changes
- * @fires icon-click - Dispatched when icon is clicked
+ * @fires value-changed - Fired when user commits a value change. The event is not triggered if `value` property is changed programmatically.
+ * @fires error-changed - Fired when user inputs an invalid value. The event is not triggered if `error` property is changed programmatically.
  *
  * @attr {boolean} disabled - Set disabled state
  * @prop {boolean} [disabled=false] - Set disabled state
@@ -108,8 +107,6 @@ __decorate([
     state()
 ], PasswordField.prototype, "isPasswordVisible", void 0);
 PasswordField = __decorate([
-    customElement('ef-password-field', {
-        alias: 'coral-password-field'
-    })
+    customElement('ef-password-field')
 ], PasswordField);
 export { PasswordField };

package/lib/password-field/themes/halo/dark/index.js

@@ -1,3 +1,3 @@
 import '@refinitiv-ui/elements/icon/themes/halo/dark';
 
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-password-field', styles: ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12rem;font-weight:400;height:24px;width:152px;max-width:100%;padding:0 8px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;border-radius:0;background-color:#0d0d0d;text-overflow:ellipsis;border:1px solid #404040;color:#ccc}:host([disabled]){border:1px solid rgba(64,64,64,.5);color:rgba(204,204,204,.5);background-color:rgba(13,13,13,.5)}:host([type=number]){padding-right:0}:host([warning]){border:1px solid #ffc800}:host([warning][disabled]){color:rgba(204,204,204,.5);border:1px solid rgba(127,100,0,.5)}:host([error]),:host([error][warning]){border:1px solid #f5475b}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(204,204,204,.5);border:1px solid rgba(160,28,43,.5)}:host ::-ms-clear{display:none}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;user-select:none}:host ::-moz-selection{color:#fff;background-color:#334bff}:host ::selection{color:#fff;background-color:#334bff}:host [part=icon]{margin-left:2px;color:#ccc;min-width:1em}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover){border-color:grey;color:#fff}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover) [part=icon]{color:#6678ff}:host([warning]:hover:not([readonly]):not([focused])){color:#fff;border-color:#ffe999}:host([warning][disabled]),:host([warning][readonly]:not([focused])){border-color:rgba(255,233,153,.5)}:host([error]:hover:not([readonly]):not([focused])){color:#fff;border-color:#faa8b1}:host([error][disabled]),:host([error][readonly]:not([focused])),:host([error][warning][disabled]){border-color:rgba(250,168,177,.5)}:host([readonly]:not([focused])){border-color:rgba(64,64,64,.5);background-color:rgba(13,13,13,.5)}:host([readonly]:not([focused])) [part=icon]{color:rgba(204,204,204,.5)}:host([focused]),:host([focused][error][warning]){border-color:#334bff;color:#fff}:host([focused]) [part=icon],:host([focused][error][warning]) [part=icon]{color:#6678ff}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host [part=icon]:hover{cursor:pointer}:host [part=input]::-ms-reveal{display:none}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-password-field', styles: ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12px;font-weight:400;height:24px;width:152px;max-width:100%;padding:0 8px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;border-radius:0;background-color:#0d0d0d;text-overflow:ellipsis;border:1px solid #404040;color:#ccc}:host([disabled]){border:1px solid rgba(64,64,64,.5);color:rgba(204,204,204,.5);background-color:rgba(13,13,13,.5)}:host([type=number]){padding-right:0}:host([warning]){border:1px solid #ffc800}:host([warning][disabled]){color:rgba(204,204,204,.5);border:1px solid rgba(127,100,0,.5)}:host([error]),:host([error][warning]){border:1px solid #f5475b}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(204,204,204,.5);border:1px solid rgba(160,28,43,.5)}:host ::-ms-clear{display:none}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;user-select:none}:host ::-moz-selection{color:#fff;background-color:#334bff}:host ::selection{color:#fff;background-color:#334bff}:host [part=icon]{margin-left:2px;color:#ccc;min-width:1em}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover){border-color:grey;color:#fff}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover) [part=icon]{color:#6678ff}:host([warning]:hover:not([readonly]):not([focused])){color:#fff;border-color:#ffe999}:host([warning][disabled]),:host([warning][readonly]:not([focused])){border-color:rgba(255,233,153,.5)}:host([error]:hover:not([readonly]):not([focused])){color:#fff;border-color:#faa8b1}:host([error][disabled]),:host([error][readonly]:not([focused])),:host([error][warning][disabled]){border-color:rgba(250,168,177,.5)}:host([readonly]:not([focused])){border-color:rgba(64,64,64,.5);background-color:rgba(13,13,13,.5)}:host([readonly]:not([focused])) [part=icon]{color:rgba(204,204,204,.5)}:host([focused]),:host([focused][error][warning]){border-color:#334bff;color:#fff}:host([focused]) [part=icon],:host([focused][error][warning]) [part=icon]{color:#6678ff}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host [part=icon]:hover{cursor:pointer}:host [part=input]::-ms-reveal{display:none}' }}));

package/lib/password-field/themes/halo/light/index.js

@@ -1,3 +1,3 @@
 import '@refinitiv-ui/elements/icon/themes/halo/light';
 
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-password-field', styles: ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12rem;font-weight:400;height:24px;width:152px;max-width:100%;padding:0 8px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;border-radius:0;background-color:#fff;text-overflow:ellipsis;border:1px solid #595959;color:#404040}:host([disabled]){border:1px solid rgba(89,89,89,.5);color:rgba(64,64,64,.5);background-color:rgba(255,255,255,.5)}:host([type=number]){padding-right:0}:host([warning]){border:1px solid #cca000}:host([warning][disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(204,160,0,.5)}:host([error]),:host([error][warning]){border:1px solid #d94255}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(182,50,67,.5)}:host ::-ms-clear{display:none}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;user-select:none}:host ::-moz-selection{color:#fff;background-color:#334bff}:host ::selection{color:#fff;background-color:#334bff}:host [part=icon]{margin-left:2px;color:#404040;min-width:1em}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover){border-color:#0d0d0d;color:#0d0d0d}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover) [part=icon]{color:#334bff}:host([warning]:hover:not([readonly]):not([focused])){color:#0d0d0d;border-color:#ffe999}:host([warning][disabled]),:host([warning][readonly]:not([focused])){border-color:rgba(255,233,153,.5)}:host([error]:hover:not([readonly]):not([focused])){color:#0d0d0d;border-color:#eeacb4}:host([error][disabled]),:host([error][readonly]:not([focused])),:host([error][warning][disabled]){border-color:rgba(238,172,180,.5)}:host([readonly]:not([focused])){border-color:rgba(89,89,89,.5);background-color:rgba(255,255,255,.5)}:host([readonly]:not([focused])) [part=icon]{color:rgba(64,64,64,.5)}:host([focused]),:host([focused][error][warning]){border-color:#334bff;color:#0d0d0d}:host([focused]) [part=icon],:host([focused][error][warning]) [part=icon]{color:#334bff}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host [part=icon]:hover{cursor:pointer}:host [part=input]::-ms-reveal{display:none}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-password-field', styles: ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12px;font-weight:400;height:24px;width:152px;max-width:100%;padding:0 8px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;border-radius:0;background-color:#fff;text-overflow:ellipsis;border:1px solid #595959;color:#404040}:host([disabled]){border:1px solid rgba(89,89,89,.5);color:rgba(64,64,64,.5);background-color:rgba(255,255,255,.5)}:host([type=number]){padding-right:0}:host([warning]){border:1px solid #cca000}:host([warning][disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(204,160,0,.5)}:host([error]),:host([error][warning]){border:1px solid #d94255}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(182,50,67,.5)}:host ::-ms-clear{display:none}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;user-select:none}:host ::-moz-selection{color:#fff;background-color:#334bff}:host ::selection{color:#fff;background-color:#334bff}:host [part=icon]{margin-left:2px;color:#404040;min-width:1em}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover){border-color:#0d0d0d;color:#0d0d0d}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover) [part=icon]{color:#334bff}:host([warning]:hover:not([readonly]):not([focused])){color:#0d0d0d;border-color:#ffe999}:host([warning][disabled]),:host([warning][readonly]:not([focused])){border-color:rgba(255,233,153,.5)}:host([error]:hover:not([readonly]):not([focused])){color:#0d0d0d;border-color:#eeacb4}:host([error][disabled]),:host([error][readonly]:not([focused])),:host([error][warning][disabled]){border-color:rgba(238,172,180,.5)}:host([readonly]:not([focused])){border-color:rgba(89,89,89,.5);background-color:rgba(255,255,255,.5)}:host([readonly]:not([focused])) [part=icon]{color:rgba(64,64,64,.5)}:host([focused]),:host([focused][error][warning]){border-color:#334bff;color:#0d0d0d}:host([focused]) [part=icon],:host([focused][error][warning]) [part=icon]{color:#334bff}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host [part=icon]:hover{cursor:pointer}:host [part=input]::-ms-reveal{display:none}' }}));

package/lib/password-field/themes/solar/charcoal/index.js

@@ -1,3 +1,3 @@
 import '@refinitiv-ui/elements/icon/themes/solar/charcoal';
 
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-password-field', styles: ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13rem;font-weight:400;height:23px;width:140px;max-width:100%;padding:0 5px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#c2c2c2;border-radius:0;text-overflow:ellipsis;background-color:#000;border:1px solid #4a4a52}:host([type=number]){padding-right:0}:host([error]),:host([error][warning]){border:1px solid #f5475b}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(194,194,194,.6);border:1px solid rgba(245,71,91,.6)}:host ::-ms-clear{display:none}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host [part=icon]{color:#e2e2e2;min-width:1em}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;user-select:none}:host([disabled]){border:1px solid rgba(74,74,82,.6);color:rgba(194,194,194,.6)}:host([readonly]){border:1px solid rgba(74,74,82,.6)}:host(:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #77777d}:host([warning]){background-color:#000;border:1px solid #f93}:host([warning][disabled]){border:1px solid rgba(255,153,51,.6);color:rgba(194,194,194,.6)}:host([warning][readonly]){border:1px solid rgba(255,153,51,.6)}:host([warning]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #ffb366}:host([error]),:host([error][warning]:not([focused])){background-color:#000;border:1px solid #f5475b}:host([error][disabled]),:host([error][warning]:not([focused])[disabled]){border:1px solid rgba(245,71,91,.6);color:rgba(194,194,194,.6)}:host([error][readonly]),:host([error][warning]:not([focused])[readonly]){border:1px solid rgba(245,71,91,.6)}:host([error]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover),:host([error][warning]:not([focused]):not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #f87584}:host([highlight]){background-color:#1b252f;border:1px solid #4a4a52}:host([highlight][disabled]){border:1px solid rgba(74,74,82,.6);color:rgba(194,194,194,.6);background-color:rgba(27,37,47,.6)}:host([highlight][readonly]){border:1px solid rgba(74,74,82,.6)}:host([highlight]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #77777d}:host([indirect]){color:#0fd;background-color:#000;border:1px solid #898623}:host([indirect][disabled]){border:1px solid rgba(137,134,35,.6);color:rgba(0,255,221,.6)}:host([indirect][readonly]){border:1px solid rgba(137,134,35,.6)}:host([indirect]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #a7a45a}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#f93;border-style:dotted}:host([disabled]) [part=input]::-webkit-input-placeholder{color:rgba(102,101,112,.6)}:host([disabled]) [part=input]::-moz-placeholder{color:rgba(102,101,112,.6)}:host([disabled]) [part=input]:-ms-input-placeholder{color:rgba(102,101,112,.6)}:host [part=icon]:hover{cursor:pointer}:host [part=input]::-ms-reveal{display:none}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-password-field', styles: ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13px;font-weight:400;height:23px;width:140px;max-width:100%;padding:0 5px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#c2c2c2;border-radius:0;text-overflow:ellipsis;background-color:#000;border:1px solid #4a4a52}:host([type=number]){padding-right:0}:host([error]),:host([error][warning]){border:1px solid #f5475b}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(194,194,194,.6);border:1px solid rgba(245,71,91,.6)}:host ::-ms-clear{display:none}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host [part=icon]{color:#e2e2e2;min-width:1em}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;user-select:none}:host([disabled]){border:1px solid rgba(74,74,82,.6);color:rgba(194,194,194,.6)}:host([readonly]){border:1px solid rgba(74,74,82,.6)}:host(:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #77777d}:host([warning]){background-color:#000;border:1px solid #f93}:host([warning][disabled]){border:1px solid rgba(255,153,51,.6);color:rgba(194,194,194,.6)}:host([warning][readonly]){border:1px solid rgba(255,153,51,.6)}:host([warning]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #ffb366}:host([error]),:host([error][warning]:not([focused])){background-color:#000;border:1px solid #f5475b}:host([error][disabled]),:host([error][warning]:not([focused])[disabled]){border:1px solid rgba(245,71,91,.6);color:rgba(194,194,194,.6)}:host([error][readonly]),:host([error][warning]:not([focused])[readonly]){border:1px solid rgba(245,71,91,.6)}:host([error]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover),:host([error][warning]:not([focused]):not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #f87584}:host([highlight]){background-color:#1b252f;border:1px solid #4a4a52}:host([highlight][disabled]){border:1px solid rgba(74,74,82,.6);color:rgba(194,194,194,.6);background-color:rgba(27,37,47,.6)}:host([highlight][readonly]){border:1px solid rgba(74,74,82,.6)}:host([highlight]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #77777d}:host([indirect]){color:#0fd;background-color:#000;border:1px solid #898623}:host([indirect][disabled]){border:1px solid rgba(137,134,35,.6);color:rgba(0,255,221,.6)}:host([indirect][readonly]){border:1px solid rgba(137,134,35,.6)}:host([indirect]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #a7a45a}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#f93;border-style:dotted}:host([disabled]) [part=input]::-webkit-input-placeholder{color:rgba(102,101,112,.6)}:host([disabled]) [part=input]::-moz-placeholder{color:rgba(102,101,112,.6)}:host([disabled]) [part=input]:-ms-input-placeholder{color:rgba(102,101,112,.6)}:host [part=icon]:hover{cursor:pointer}:host [part=input]::-ms-reveal{display:none}' }}));

package/lib/password-field/themes/solar/pearl/index.js

@@ -1,3 +1,3 @@
 import '@refinitiv-ui/elements/icon/themes/solar/pearl';
 
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-password-field', styles: ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13rem;font-weight:400;height:23px;width:140px;max-width:100%;padding:0 5px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#484848;border-radius:0;text-overflow:ellipsis;background-color:#fff;border:1px solid #a9afba}:host([type=number]){padding-right:0}:host([error]),:host([error][warning]){border:1px solid #d94255}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(72,72,72,.6);border:1px solid rgba(217,66,85,.6)}:host ::-ms-clear{display:none}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host [part=icon]{color:#acafb5;min-width:1em}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;user-select:none}:host([disabled]){border:1px solid rgba(169,175,186,.6);color:rgba(72,72,72,.6)}:host([readonly]){border:1px solid rgba(169,175,186,.6)}:host(:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #bfc3cb}:host([warning]){background-color:#fff;border:1px solid #f93}:host([warning][disabled]){border:1px solid rgba(255,153,51,.6);color:rgba(72,72,72,.6)}:host([warning][readonly]){border:1px solid rgba(255,153,51,.6)}:host([warning]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #ffb366}:host([error]),:host([error][warning]:not([focused])){background-color:#fff;border:1px solid #d94255}:host([error][disabled]),:host([error][warning]:not([focused])[disabled]){border:1px solid rgba(217,66,85,.6);color:rgba(72,72,72,.6)}:host([error][readonly]),:host([error][warning]:not([focused])[readonly]){border:1px solid rgba(217,66,85,.6)}:host([error]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover),:host([error][warning]:not([focused]):not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #e37180}:host([highlight]){background-color:#b0ffff;border:1px solid #a9afba}:host([highlight][disabled]){border:1px solid rgba(169,175,186,.6);color:rgba(72,72,72,.6);background-color:rgba(176,255,255,.6)}:host([highlight][readonly]){border:1px solid rgba(169,175,186,.6)}:host([highlight]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #bfc3cb}:host([indirect]){color:#009494;background-color:#effefe;border:1px solid #898623}:host([indirect][disabled]){border:1px solid rgba(137,134,35,.6);color:rgba(0,148,148,.6)}:host([indirect][readonly]){border:1px solid rgba(137,134,35,.6)}:host([indirect]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #a7a45a}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#ffb266;border-style:dotted}:host([disabled]) [part=input]::-webkit-input-placeholder{color:rgba(102,101,112,.6)}:host([disabled]) [part=input]::-moz-placeholder{color:rgba(102,101,112,.6)}:host([disabled]) [part=input]:-ms-input-placeholder{color:rgba(102,101,112,.6)}:host [part=icon]:hover{cursor:pointer}:host [part=input]::-ms-reveal{display:none}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-password-field', styles: ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13px;font-weight:400;height:23px;width:140px;max-width:100%;padding:0 5px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#484848;border-radius:0;text-overflow:ellipsis;background-color:#fff;border:1px solid #a9afba}:host([type=number]){padding-right:0}:host([error]),:host([error][warning]){border:1px solid #d94255}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(72,72,72,.6);border:1px solid rgba(217,66,85,.6)}:host ::-ms-clear{display:none}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host [part=icon]{color:#acafb5;min-width:1em}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;user-select:none}:host([disabled]){border:1px solid rgba(169,175,186,.6);color:rgba(72,72,72,.6)}:host([readonly]){border:1px solid rgba(169,175,186,.6)}:host(:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #bfc3cb}:host([warning]){background-color:#fff;border:1px solid #f93}:host([warning][disabled]){border:1px solid rgba(255,153,51,.6);color:rgba(72,72,72,.6)}:host([warning][readonly]){border:1px solid rgba(255,153,51,.6)}:host([warning]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #ffb366}:host([error]),:host([error][warning]:not([focused])){background-color:#fff;border:1px solid #d94255}:host([error][disabled]),:host([error][warning]:not([focused])[disabled]){border:1px solid rgba(217,66,85,.6);color:rgba(72,72,72,.6)}:host([error][readonly]),:host([error][warning]:not([focused])[readonly]){border:1px solid rgba(217,66,85,.6)}:host([error]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover),:host([error][warning]:not([focused]):not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #e37180}:host([highlight]){background-color:#b0ffff;border:1px solid #a9afba}:host([highlight][disabled]){border:1px solid rgba(169,175,186,.6);color:rgba(72,72,72,.6);background-color:rgba(176,255,255,.6)}:host([highlight][readonly]){border:1px solid rgba(169,175,186,.6)}:host([highlight]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #bfc3cb}:host([indirect]){color:#009494;background-color:#effefe;border:1px solid #898623}:host([indirect][disabled]){border:1px solid rgba(137,134,35,.6);color:rgba(0,148,148,.6)}:host([indirect][readonly]){border:1px solid rgba(137,134,35,.6)}:host([indirect]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #a7a45a}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#ffb266;border-style:dotted}:host([disabled]) [part=input]::-webkit-input-placeholder{color:rgba(102,101,112,.6)}:host([disabled]) [part=input]::-moz-placeholder{color:rgba(102,101,112,.6)}:host([disabled]) [part=input]:-ms-input-placeholder{color:rgba(102,101,112,.6)}:host [part=icon]:hover{cursor:pointer}:host [part=input]::-ms-reveal{display:none}' }}));

package/lib/pill/custom-elements.json

@@ -89,7 +89,7 @@
       "events": [
         {
           "name": "clear",
-          "description": "Dispatched when click on cross button occurs"
+          "description": "Fired when the user taps on clear button."
         }
       ]
     }

package/lib/pill/custom-elements.md

@@ -17,6 +17,6 @@ It is rarely used in the UI but inside other components to visualize multiple it
 
 ## Events
 
-| Event   | Description                                  |
-|---------|----------------------------------------------|
-| `clear` | Dispatched when click on cross button occurs |
+| Event   | Description                               |
+|---------|-------------------------------------------|
+| `clear` | Fired when the user taps on clear button. |

package/lib/pill/index.d.ts

@@ -14,7 +14,7 @@ import '../icon/index.js';
  * @attr {boolean} disabled - Set disabled state
  * @prop {boolean} [disabled=false] - Set disabled state
  *
- * @fires clear - Dispatched when click on cross button occurs
+ * @fires clear - Fired when the user taps on clear button.
  */
 export declare class Pill extends ControlElement {
     /**

package/lib/pill/index.js

@@ -20,7 +20,7 @@ import '../icon/index.js';
  * @attr {boolean} disabled - Set disabled state
  * @prop {boolean} [disabled=false] - Set disabled state
  *
- * @fires clear - Dispatched when click on cross button occurs
+ * @fires clear - Fired when the user taps on clear button.
  */
 let Pill = class Pill extends ControlElement {
     constructor() {
@@ -198,8 +198,6 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], Pill.prototype, "pressed", void 0);
 Pill = __decorate([
-    customElement('ef-pill', {
-        alias: 'coral-pill'
-    })
+    customElement('ef-pill')
 ], Pill);
 export { Pill };

package/lib/pill/themes/halo/dark/index.js

@@ -1,3 +1,3 @@
 import '@refinitiv-ui/elements/icon/themes/halo/dark';
 
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-pill', styles: ':host{touch-action:manipulation;background:#333;transition:120ms;color:#ccc;margin:2px;font-family:inherit;font-size:12rem;font-weight:400;padding:0 5px;min-width:21px;max-width:180px;outline:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;vertical-align:middle;position:relative;overflow:hidden}:host [part=close]{touch-action:manipulation;border-radius:100%;position:relative;display:flex;margin-left:4px;flex:none;width:12px;height:12px;box-sizing:border-box;cursor:pointer;background-clip:content-box;color:#ccc;min-width:12px;opacity:.4;background-color:initial}:host [part=close]:active{border:1px solid transparent}:host([focused=visible]){border:1px solid #334bff}:host{border-radius:10px;height:20px;line-height:20px;background-color:#1a1a1a;border:1px solid #333}:host(:hover),:host([active]:hover){background-color:#1429bd;border-color:#1429bd}:host([active]){border-color:#0d0d0d;background-color:#334bff}:host([toggles][active][pressed]),:host([toggles][pressed]){border-color:#0d0d0d}:host([toggles][pressed]),:host([toggles][pressed]:hover){background-color:#0f1e8a}:host(:hover),:host([active]),:host([pressed]){color:#fff}:host(:hover) [part=close],:host([active]) [part=close],:host([pressed]) [part=close]{color:#fff;opacity:1}:host([disabled]){border-color:#0d0d0d;color:#ccc;background-color:#333}@media (pointer:coarse){:host(:not([active])),:host([toggles]:not([active])){color:#ccc;background-color:#1a1a1a;border-color:#333}:host(:not([active])) [part=close],:host([toggles]:not([active])) [part=close]{color:#ccc;opacity:.4}}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-pill', styles: ':host{touch-action:manipulation;background:#333;transition:120ms;color:#ccc;margin:2px;font-family:inherit;font-size:12px;font-weight:400;padding:0 5px;min-width:21px;max-width:180px;outline:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;vertical-align:middle;position:relative;overflow:hidden}:host [part=close]{touch-action:manipulation;border-radius:100%;position:relative;display:flex;margin-left:4px;flex:none;width:12px;height:12px;box-sizing:border-box;cursor:pointer;background-clip:content-box;color:#ccc;min-width:12px;opacity:.4;background-color:initial}:host [part=close]:active{border:1px solid transparent}:host([focused=visible]){border:1px solid #334bff}:host{border-radius:10px;height:20px;line-height:20px;background-color:#1a1a1a;border:1px solid #333}:host(:hover),:host([active]:hover){background-color:#1429bd;border-color:#1429bd}:host([active]){border-color:#0d0d0d;background-color:#334bff}:host([toggles][active][pressed]),:host([toggles][pressed]){border-color:#0d0d0d}:host([toggles][pressed]),:host([toggles][pressed]:hover){background-color:#0f1e8a}:host(:hover),:host([active]),:host([pressed]){color:#fff}:host(:hover) [part=close],:host([active]) [part=close],:host([pressed]) [part=close]{color:#fff;opacity:1}:host([disabled]){border-color:#0d0d0d;color:#ccc;background-color:#333}@media (pointer:coarse){:host(:not([active])),:host([toggles]:not([active])){color:#ccc;background-color:#1a1a1a;border-color:#333}:host(:not([active])) [part=close],:host([toggles]:not([active])) [part=close]{color:#ccc;opacity:.4}}' }}));

package/lib/pill/themes/halo/light/index.js

@@ -1,3 +1,3 @@
 import '@refinitiv-ui/elements/icon/themes/halo/light';
 
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-pill', styles: ':host{touch-action:manipulation;background:#fafafa;transition:120ms;color:#0d0d0d;margin:2px;font-family:inherit;font-size:12rem;font-weight:400;padding:0 5px;min-width:21px;max-width:180px;outline:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;vertical-align:middle;position:relative;overflow:hidden}:host [part=close]{touch-action:manipulation;border-radius:100%;position:relative;display:flex;margin-left:4px;flex:none;width:12px;height:12px;box-sizing:border-box;cursor:pointer;background-clip:content-box;color:#595959;min-width:12px;opacity:.4;background-color:initial}:host [part=close]:active{border:1px solid transparent}:host([focused=visible]){border:1px solid #334bff}:host{border-radius:10px;height:20px;line-height:20px;background-color:#fafafa;border:1px solid #ccc}:host(:hover),:host([active]:hover){background-color:#1429bd;border-color:#1429bd}:host([active]){border-color:#ccc;background-color:#334bff}:host([toggles][active][pressed]),:host([toggles][pressed]){border-color:#ccc}:host([toggles][pressed]),:host([toggles][pressed]:hover){background-color:#0f1e8a}:host(:hover),:host([active]),:host([pressed]){color:#fff}:host(:hover) [part=close],:host([active]) [part=close],:host([pressed]) [part=close]{color:#fff;opacity:1}:host([disabled]){border-color:#ccc;color:#0d0d0d;background-color:#fafafa}@media (pointer:coarse){:host(:not([active])),:host([toggles]:not([active])){color:#0d0d0d;background-color:#fafafa;border-color:#ccc}:host(:not([active])) [part=close],:host([toggles]:not([active])) [part=close]{color:#0d0d0d;opacity:.4}}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-pill', styles: ':host{touch-action:manipulation;background:#fafafa;transition:120ms;color:#0d0d0d;margin:2px;font-family:inherit;font-size:12px;font-weight:400;padding:0 5px;min-width:21px;max-width:180px;outline:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;vertical-align:middle;position:relative;overflow:hidden}:host [part=close]{touch-action:manipulation;border-radius:100%;position:relative;display:flex;margin-left:4px;flex:none;width:12px;height:12px;box-sizing:border-box;cursor:pointer;background-clip:content-box;color:#595959;min-width:12px;opacity:.4;background-color:initial}:host [part=close]:active{border:1px solid transparent}:host([focused=visible]){border:1px solid #334bff}:host{border-radius:10px;height:20px;line-height:20px;background-color:#fafafa;border:1px solid #ccc}:host(:hover),:host([active]:hover){background-color:#1429bd;border-color:#1429bd}:host([active]){border-color:#ccc;background-color:#334bff}:host([toggles][active][pressed]),:host([toggles][pressed]){border-color:#ccc}:host([toggles][pressed]),:host([toggles][pressed]:hover){background-color:#0f1e8a}:host(:hover),:host([active]),:host([pressed]){color:#fff}:host(:hover) [part=close],:host([active]) [part=close],:host([pressed]) [part=close]{color:#fff;opacity:1}:host([disabled]){border-color:#ccc;color:#0d0d0d;background-color:#fafafa}@media (pointer:coarse){:host(:not([active])),:host([toggles]:not([active])){color:#0d0d0d;background-color:#fafafa;border-color:#ccc}:host(:not([active])) [part=close],:host([toggles]:not([active])) [part=close]{color:#0d0d0d;opacity:.4}}' }}));

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

@@ -1,3 +1,3 @@
 import '@refinitiv-ui/elements/icon/themes/solar/charcoal';
 
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-pill', styles: ':host{touch-action:manipulation;transition:70ms;font-family:inherit;font-size:13rem;font-weight:400;min-width:22px;max-width:180px;outline:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;vertical-align:middle;position:relative;overflow:hidden}:host [part=close]{touch-action:manipulation;border-radius:100%;position:relative;display:flex;margin-left:4px;flex:none;box-sizing:border-box;cursor:pointer;background-clip:content-box;width:11px;height:11px;color:#c2c2c2;background-color:#000}:host [part=close]:active{border:1px solid transparent}:host([clears]:hover) [part=close]{display:flex}:host([focused=visible]){border:1px solid #f93}:host{background:#c2c2c2;border-radius:2px;padding:0 4px;color:#000;height:17px;margin:3px 3px 0 0}:host [part=close]:active{border:none}:host([readonly]){background:#c2c2c2}:host([toggles][active]){background:#f93;color:#000}:host([toggles][active]) [part=close]{color:#f93}@media (-ms-high-contrast:none),(pointer:fine){:host(:hover){background:#fff}:host([toggles][active]:hover){background:#ffb366}}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-pill', styles: ':host{touch-action:manipulation;transition:70ms;font-family:inherit;font-size:13px;font-weight:400;min-width:22px;max-width:180px;outline:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;vertical-align:middle;position:relative;overflow:hidden}:host [part=close]{touch-action:manipulation;border-radius:100%;position:relative;display:flex;margin-left:4px;flex:none;box-sizing:border-box;cursor:pointer;background-clip:content-box;width:11px;height:11px;color:#c2c2c2;background-color:#000}:host [part=close]:active{border:1px solid transparent}:host([clears]:hover) [part=close]{display:flex}:host([focused=visible]){border:1px solid #f93}:host{background:#c2c2c2;border-radius:2px;padding:0 4px;color:#000;height:17px;margin:3px 3px 0 0}:host [part=close]:active{border:none}:host([readonly]){background:#c2c2c2}:host([toggles][active]){background:#f93;color:#000}:host([toggles][active]) [part=close]{color:#f93}@media (-ms-high-contrast:none),(pointer:fine){:host(:hover){background:#fff}:host([toggles][active]:hover){background:#ffb366}}' }}));

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

@@ -1,3 +1,3 @@
 import '@refinitiv-ui/elements/icon/themes/solar/pearl';
 
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-pill', styles: ':host{touch-action:manipulation;transition:70ms;font-family:inherit;font-size:13rem;font-weight:400;min-width:22px;max-width:180px;outline:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;vertical-align:middle;position:relative;overflow:hidden}:host [part=close]{touch-action:manipulation;border-radius:100%;position:relative;display:flex;margin-left:4px;flex:none;box-sizing:border-box;cursor:pointer;background-clip:content-box;width:11px;height:11px;color:#a9afba;background-color:#fff}:host [part=close]:active{border:1px solid transparent}:host([clears]:hover) [part=close]{display:flex}:host([focused=visible]){border:1px solid #f93}:host{background:#a9afba;border-radius:2px;padding:0 4px;color:#fff;height:17px;margin:3px 3px 0 0}:host [part=close]:active{border:none}:host([readonly]){background:#a9afba}:host([toggles][active]){background:#ee7600;color:#fff}:host([toggles][active]) [part=close]{color:#ee7600}@media (-ms-high-contrast:none),(pointer:fine){:host(:hover){background:#8a8a96}:host([toggles][active]:hover){background:#ee7600}}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-pill', styles: ':host{touch-action:manipulation;transition:70ms;font-family:inherit;font-size:13px;font-weight:400;min-width:22px;max-width:180px;outline:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;vertical-align:middle;position:relative;overflow:hidden}:host [part=close]{touch-action:manipulation;border-radius:100%;position:relative;display:flex;margin-left:4px;flex:none;box-sizing:border-box;cursor:pointer;background-clip:content-box;width:11px;height:11px;color:#a9afba;background-color:#fff}:host [part=close]:active{border:1px solid transparent}:host([clears]:hover) [part=close]{display:flex}:host([focused=visible]){border:1px solid #f93}:host{background:#a9afba;border-radius:2px;padding:0 4px;color:#fff;height:17px;margin:3px 3px 0 0}:host [part=close]:active{border:none}:host([readonly]){background:#a9afba}:host([toggles][active]){background:#ee7600;color:#fff}:host([toggles][active]) [part=close]{color:#ee7600}@media (-ms-high-contrast:none),(pointer:fine){:host(:hover){background:#8a8a96}:host([toggles][active]:hover){background:#ee7600}}' }}));

package/lib/progress-bar/index.js

@@ -150,8 +150,6 @@ __decorate([
     property({ type: String })
 ], ProgressBar.prototype, "label", void 0);
 ProgressBar = __decorate([
-    customElement('ef-progress-bar', {
-        alias: 'sapphire-bar'
-    })
+    customElement('ef-progress-bar')
 ], ProgressBar);
 export { ProgressBar };

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

@@ -76,7 +76,7 @@
       "events": [
         {
           "name": "checked-changed",
-          "description": "Fired when the `checked` property changes."
+          "description": "Fired when the user checks or unchecks the radio. The event is not fired if the `checked` property is changed programmatically."
         }
       ]
     }

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

@@ -14,6 +14,6 @@ Basic radio button
 
 ## Events
 
-| Event             | Description                                |
-|-------------------|--------------------------------------------|
-| `checked-changed` | Fired when the `checked` property changes. |
+| Event             | Description                                      |
+|-------------------|--------------------------------------------------|
+| `checked-changed` | Fired when the user checks or unchecks the radio. The event is not fired if the `checked` property is changed programmatically. |

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

@@ -3,7 +3,7 @@ import { CSSResultGroup, ControlElement, TemplateResult, PropertyValues } from '
 /**
  * Basic radio button
  *
- * @fires checked-changed - Fired when the `checked` property changes.
+ * @fires checked-changed - Fired when the user checks or unchecks the radio. The event is not fired if the `checked` property is changed programmatically.
  *
  * @attr {string} value - Value of the radio button
  * @prop {string} [value=""] - Value of the radio button

package/lib/radio-button/index.js

@@ -9,7 +9,7 @@ import { applyRegistry, removeFromRegistry, getRadioGroup } from './radio-button
 /**
  * Basic radio button
  *
- * @fires checked-changed - Fired when the `checked` property changes.
+ * @fires checked-changed - Fired when the user checks or unchecks the radio. The event is not fired if the `checked` property is changed programmatically.
  *
  * @attr {string} value - Value of the radio button
  * @prop {string} [value=""] - Value of the radio button
@@ -243,8 +243,6 @@ __decorate([
     query('[part=label]', true)
 ], RadioButton.prototype, "labelEl", void 0);
 RadioButton = __decorate([
-    customElement('ef-radio-button', {
-        alias: 'coral-radio-button'
-    })
+    customElement('ef-radio-button')
 ], RadioButton);
 export { RadioButton };

package/lib/rating/custom-elements.json

@@ -50,7 +50,7 @@
       "events": [
         {
           "name": "value-changed",
-          "description": "Fired when the `value` changes."
+          "description": "Fired when the user commits a value change. The event is not triggered if `value` property is changed programmatically."
         }
       ]
     }

package/lib/rating/custom-elements.md

@@ -12,6 +12,6 @@ Star visualisation component that is generally used for ranking
 
 ## Events
 
-| Event           | Description                     |
-|-----------------|---------------------------------|
-| `value-changed` | Fired when the `value` changes. |
+| Event           | Description                                      |
+|-----------------|--------------------------------------------------|
+| `value-changed` | Fired when the user commits a value change. The event is not triggered if `value` property is changed programmatically. |

package/lib/rating/index.d.ts

@@ -2,7 +2,7 @@ import { JSXInterface } from '../jsx';
 import { BasicElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
 /**
  * Star visualisation component that is generally used for ranking
- * @fires value-changed - Fired when the `value` changes.
+ * @fires value-changed - Fired when the user commits a value change. The event is not triggered if `value` property is changed programmatically.
  */
 export declare class Rating extends BasicElement {
     /**

package/lib/rating/index.js

@@ -6,7 +6,7 @@ import { VERSION } from '../version.js';
 import { clamp } from './utils.js';
 /**
  * Star visualisation component that is generally used for ranking
- * @fires value-changed - Fired when the `value` changes.
+ * @fires value-changed - Fired when the user commits a value change. The event is not triggered if `value` property is changed programmatically.
  */
 let Rating = class Rating extends BasicElement {
     constructor() {
@@ -279,8 +279,6 @@ __decorate([
     property({ type: String })
 ], Rating.prototype, "value", null);
 Rating = __decorate([
-    customElement('ef-rating', {
-        alias: 'sapphire-rating'
-    })
+    customElement('ef-rating')
 ], Rating);
 export { Rating };

package/lib/search-field/custom-elements.json

@@ -146,15 +146,15 @@
       "events": [
         {
           "name": "value-changed",
-          "description": "Dispatched when value changes"
+          "description": "Fired when the user commits a value change. The event is not triggered if `value` property is changed programmatically."
         },
         {
           "name": "error-changed",
-          "description": "Dispatched when error state changes"
+          "description": "Fired when the user inputs an invalid value. The event is not triggered if `error` property is changed programmatically."
         },
         {
           "name": "icon-click",
-          "description": "Dispatched when icon is clicked"
+          "description": "Fired when the user taps on icon added into control's slot."
         }
       ]
     }

package/lib/search-field/custom-elements.md

@@ -28,8 +28,8 @@ Form control to get a search input from users.
 
 ## Events
 
-| Event           | Description                         |
-|-----------------|-------------------------------------|
-| `error-changed` | Dispatched when error state changes |
-| `icon-click`    | Dispatched when icon is clicked     |
-| `value-changed` | Dispatched when value changes       |
+| Event           | Description                                      |
+|-----------------|--------------------------------------------------|
+| `error-changed` | Fired when the user inputs an invalid value. The event is not triggered if `error` property is changed programmatically. |
+| `icon-click`    | Fired when the user taps on icon added into control's slot. |
+| `value-changed` | Fired when the user commits a value change. The event is not triggered if `value` property is changed programmatically. |

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

@@ -8,9 +8,9 @@ import '@refinitiv-ui/phrasebook/locale/en/search-field.js';
 /**
  * Form control to get a search input from users.
  *
- * @fires value-changed - Dispatched when value changes
- * @fires error-changed - Dispatched when error state changes
- * @fires icon-click - Dispatched when icon is clicked
+ * @fires value-changed - Fired when the user commits a value change. The event is not triggered if `value` property is changed programmatically.
+ * @fires error-changed - Fired when the user inputs an invalid value. The event is not triggered if `error` property is changed programmatically.
+ * @fires icon-click - Fired when the user taps on icon added into control's slot.
  *
  * @attr {boolean} disabled - Set disabled state
  * @prop {boolean} [disabled=false] - Set disabled state

package/lib/search-field/index.js

@@ -9,9 +9,9 @@ import '@refinitiv-ui/phrasebook/locale/en/search-field.js';
 /**
  * Form control to get a search input from users.
  *
- * @fires value-changed - Dispatched when value changes
- * @fires error-changed - Dispatched when error state changes
- * @fires icon-click - Dispatched when icon is clicked
+ * @fires value-changed - Fired when the user commits a value change. The event is not triggered if `value` property is changed programmatically.
+ * @fires error-changed - Fired when the user inputs an invalid value. The event is not triggered if `error` property is changed programmatically.
+ * @fires icon-click - Fired when the user taps on icon added into control's slot.
  *
  * @attr {boolean} disabled - Set disabled state
  * @prop {boolean} [disabled=false] - Set disabled state
@@ -81,8 +81,6 @@ __decorate([
     translate({ scope: 'ef-search-field' })
 ], SearchField.prototype, "t", void 0);
 SearchField = __decorate([
-    customElement('ef-search-field', {
-        alias: 'coral-search-field'
-    })
+    customElement('ef-search-field')
 ], SearchField);
 export { SearchField };

package/lib/search-field/themes/halo/dark/index.js

@@ -1,3 +1,3 @@
 import '@refinitiv-ui/elements/icon/themes/halo/dark';
 
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-search-field', styles: ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12rem;font-weight:400;height:24px;width:152px;max-width:100%;padding:0 8px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;border-radius:0;background-color:#0d0d0d;text-overflow:ellipsis;border:1px solid #404040;color:#ccc}:host([disabled]){border:1px solid rgba(64,64,64,.5);color:rgba(204,204,204,.5);background-color:rgba(13,13,13,.5)}:host([type=number]){padding-right:0}:host([warning]){border:1px solid #ffc800}:host([warning][disabled]){color:rgba(204,204,204,.5);border:1px solid rgba(127,100,0,.5)}:host([error]),:host([error][warning]){border:1px solid #f5475b}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(204,204,204,.5);border:1px solid rgba(160,28,43,.5)}:host ::-ms-clear{display:none}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host [part=icon]{color:#ccc;min-width:1em;margin-left:2px}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;user-select:none}:host ::-moz-selection{color:#fff;background-color:#334bff}:host ::selection{color:#fff;background-color:#334bff}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover){border-color:grey;color:#fff}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover) [part=icon]{color:#6678ff}:host([warning]:hover:not([readonly]):not([focused])){color:#fff;border-color:#ffe999}:host([warning][disabled]),:host([warning][readonly]:not([focused])){border-color:rgba(255,233,153,.5)}:host([error]:hover:not([readonly]):not([focused])){color:#fff;border-color:#faa8b1}:host([error][disabled]),:host([error][readonly]:not([focused])),:host([error][warning][disabled]){border-color:rgba(250,168,177,.5)}:host([readonly]:not([focused])){border-color:rgba(64,64,64,.5);background-color:rgba(13,13,13,.5)}:host([readonly]:not([focused])) [part=icon]{color:rgba(204,204,204,.5)}:host([focused]),:host([focused][error][warning]){border-color:#334bff;color:#fff}:host([focused]) [part=icon],:host([focused][error][warning]) [part=icon]{color:#6678ff}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-search-field', styles: ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12px;font-weight:400;height:24px;width:152px;max-width:100%;padding:0 8px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;border-radius:0;background-color:#0d0d0d;text-overflow:ellipsis;border:1px solid #404040;color:#ccc}:host([disabled]){border:1px solid rgba(64,64,64,.5);color:rgba(204,204,204,.5);background-color:rgba(13,13,13,.5)}:host([type=number]){padding-right:0}:host([warning]){border:1px solid #ffc800}:host([warning][disabled]){color:rgba(204,204,204,.5);border:1px solid rgba(127,100,0,.5)}:host([error]),:host([error][warning]){border:1px solid #f5475b}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(204,204,204,.5);border:1px solid rgba(160,28,43,.5)}:host ::-ms-clear{display:none}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host [part=icon]{color:#ccc;min-width:1em;margin-left:2px}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;user-select:none}:host ::-moz-selection{color:#fff;background-color:#334bff}:host ::selection{color:#fff;background-color:#334bff}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover){border-color:grey;color:#fff}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover) [part=icon]{color:#6678ff}:host([warning]:hover:not([readonly]):not([focused])){color:#fff;border-color:#ffe999}:host([warning][disabled]),:host([warning][readonly]:not([focused])){border-color:rgba(255,233,153,.5)}:host([error]:hover:not([readonly]):not([focused])){color:#fff;border-color:#faa8b1}:host([error][disabled]),:host([error][readonly]:not([focused])),:host([error][warning][disabled]){border-color:rgba(250,168,177,.5)}:host([readonly]:not([focused])){border-color:rgba(64,64,64,.5);background-color:rgba(13,13,13,.5)}:host([readonly]:not([focused])) [part=icon]{color:rgba(204,204,204,.5)}:host([focused]),:host([focused][error][warning]){border-color:#334bff;color:#fff}:host([focused]) [part=icon],:host([focused][error][warning]) [part=icon]{color:#6678ff}' }}));

package/lib/search-field/themes/halo/light/index.js

@@ -1,3 +1,3 @@
 import '@refinitiv-ui/elements/icon/themes/halo/light';
 
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-search-field', styles: ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12rem;font-weight:400;height:24px;width:152px;max-width:100%;padding:0 8px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;border-radius:0;background-color:#fff;text-overflow:ellipsis;border:1px solid #595959;color:#404040}:host([disabled]){border:1px solid rgba(89,89,89,.5);color:rgba(64,64,64,.5);background-color:rgba(255,255,255,.5)}:host([type=number]){padding-right:0}:host([warning]){border:1px solid #cca000}:host([warning][disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(204,160,0,.5)}:host([error]),:host([error][warning]){border:1px solid #d94255}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(182,50,67,.5)}:host ::-ms-clear{display:none}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host [part=icon]{color:#404040;min-width:1em;margin-left:2px}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;user-select:none}:host ::-moz-selection{color:#fff;background-color:#334bff}:host ::selection{color:#fff;background-color:#334bff}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover){border-color:#0d0d0d;color:#0d0d0d}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover) [part=icon]{color:#334bff}:host([warning]:hover:not([readonly]):not([focused])){color:#0d0d0d;border-color:#ffe999}:host([warning][disabled]),:host([warning][readonly]:not([focused])){border-color:rgba(255,233,153,.5)}:host([error]:hover:not([readonly]):not([focused])){color:#0d0d0d;border-color:#eeacb4}:host([error][disabled]),:host([error][readonly]:not([focused])),:host([error][warning][disabled]){border-color:rgba(238,172,180,.5)}:host([readonly]:not([focused])){border-color:rgba(89,89,89,.5);background-color:rgba(255,255,255,.5)}:host([readonly]:not([focused])) [part=icon]{color:rgba(64,64,64,.5)}:host([focused]),:host([focused][error][warning]){border-color:#334bff;color:#0d0d0d}:host([focused]) [part=icon],:host([focused][error][warning]) [part=icon]{color:#334bff}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-search-field', styles: ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12px;font-weight:400;height:24px;width:152px;max-width:100%;padding:0 8px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;border-radius:0;background-color:#fff;text-overflow:ellipsis;border:1px solid #595959;color:#404040}:host([disabled]){border:1px solid rgba(89,89,89,.5);color:rgba(64,64,64,.5);background-color:rgba(255,255,255,.5)}:host([type=number]){padding-right:0}:host([warning]){border:1px solid #cca000}:host([warning][disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(204,160,0,.5)}:host([error]),:host([error][warning]){border:1px solid #d94255}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(182,50,67,.5)}:host ::-ms-clear{display:none}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host [part=icon]{color:#404040;min-width:1em;margin-left:2px}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;user-select:none}:host ::-moz-selection{color:#fff;background-color:#334bff}:host ::selection{color:#fff;background-color:#334bff}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover){border-color:#0d0d0d;color:#0d0d0d}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover) [part=icon]{color:#334bff}:host([warning]:hover:not([readonly]):not([focused])){color:#0d0d0d;border-color:#ffe999}:host([warning][disabled]),:host([warning][readonly]:not([focused])){border-color:rgba(255,233,153,.5)}:host([error]:hover:not([readonly]):not([focused])){color:#0d0d0d;border-color:#eeacb4}:host([error][disabled]),:host([error][readonly]:not([focused])),:host([error][warning][disabled]){border-color:rgba(238,172,180,.5)}:host([readonly]:not([focused])){border-color:rgba(89,89,89,.5);background-color:rgba(255,255,255,.5)}:host([readonly]:not([focused])) [part=icon]{color:rgba(64,64,64,.5)}:host([focused]),:host([focused][error][warning]){border-color:#334bff;color:#0d0d0d}:host([focused]) [part=icon],:host([focused][error][warning]) [part=icon]{color:#334bff}' }}));