@refinitiv-ui/elements 6.5.3 → 6.6.0

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.6.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@6.5.3...@refinitiv-ui/elements@6.6.0) (2023-01-06)
+
+
+### Bug Fixes
+
+* **chart:** change chart property access modifier from private to public ([#565](https://github.com/Refinitiv/refinitiv-ui/issues/565)) ([a25a506](https://github.com/Refinitiv/refinitiv-ui/commit/a25a506e334dead2004ebaca4a815bbf284e9990))
+* **color-dialog:** can not change between default and black color ([#557](https://github.com/Refinitiv/refinitiv-ui/issues/557)) ([27d9f2c](https://github.com/Refinitiv/refinitiv-ui/commit/27d9f2c81336c5cc4ba5bde1b7e5b3918f8c78c8))
+
+
+### Features
+
+* remove alias ([#553](https://github.com/Refinitiv/refinitiv-ui/issues/553)) ([32ce300](https://github.com/Refinitiv/refinitiv-ui/commit/32ce300e6ea0f730abd95f305b15cce406dab1c7))
+
+
+
+
+
 ## [6.5.3](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@6.5.2...@refinitiv-ui/elements@6.5.3) (2022-12-19)
 
 

package/lib/accordion/index.js

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

package/lib/appstate-bar/custom-elements.json

@@ -35,13 +35,13 @@
       "events": [
         {
           "name": "clear",
-          "description": "fired when clear button is clicked"
+          "description": "Fired when the user taps clear button."
         }
       ],
       "slots": [
         {
           "name": "right",
-          "description": "place custom content on the right of bar."
+          "description": "Place custom content on the right of bar."
         }
       ]
     }

package/lib/appstate-bar/custom-elements.md

@@ -11,12 +11,12 @@ Used to display at the top of application to provide a status or information.
 
 ## Events
 
-| Event   | Description                        |
-|---------|------------------------------------|
-| `clear` | fired when clear button is clicked |
+| Event   | Description                            |
+|---------|----------------------------------------|
+| `clear` | Fired when the user taps clear button. |
 
 ## Slots
 
 | Name    | Description                               |
 |---------|-------------------------------------------|
-| `right` | place custom content on the right of bar. |
+| `right` | Place custom content on the right of bar. |

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

@@ -5,9 +5,9 @@ import '@refinitiv-ui/phrasebook/locale/en/appstate-bar.js';
 import '../icon/index.js';
 /**
  * Used to display at the top of application to provide a status or information.
- * @slot right - place custom content on the right of bar.
+ * @slot right - Place custom content on the right of bar.
  *
- * @fires clear - fired when clear button is clicked
+ * @fires clear - Fired when the user taps clear button.
  */
 export declare class AppstateBar extends BasicElement {
     /**

package/lib/appstate-bar/index.js

@@ -8,9 +8,9 @@ import '@refinitiv-ui/phrasebook/locale/en/appstate-bar.js';
 import '../icon/index.js';
 /**
  * Used to display at the top of application to provide a status or information.
- * @slot right - place custom content on the right of bar.
+ * @slot right - Place custom content on the right of bar.
  *
- * @fires clear - fired when clear button is clicked
+ * @fires clear - Fired when the user taps clear button.
  */
 let AppstateBar = class AppstateBar extends BasicElement {
     constructor() {
@@ -32,12 +32,6 @@ let AppstateBar = class AppstateBar extends BasicElement {
         this.clear = (event) => {
             event.stopPropagation();
             this.style.display = 'none';
-            /**
-             * Clear Event
-             * Fired when clear button is clicked
-             *
-             * @event clear
-             */
             this.dispatchEvent(new CustomEvent('clear'));
         };
     }
@@ -98,8 +92,6 @@ __decorate([
     translate()
 ], AppstateBar.prototype, "t", void 0);
 AppstateBar = __decorate([
-    customElement('ef-appstate-bar', {
-        alias: 'amber-appstate-bar'
-    })
+    customElement('ef-appstate-bar')
 ], AppstateBar);
 export { AppstateBar };

package/lib/appstate-bar/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-appstate-bar', styles: ':host{--heading-text-color:#CCCCCC;--heading-background-color:#334BFF;--text-color:#000000;--background-color:hsl(236, 77%, 92%);--border-color:#404040;display:flex;align-items:center;background:var(--background-color);color:var(--text-color);outline:solid 1px var(--border-color);font-size:12rem;height:28px;--heading-text-color:#FFFFFF;--heading-background-color:#0F1E8A;--text-color:#CCCCCC;--background-color:#262626}:host([state=highlight]){--heading-background-color:hsl(337, 80%, 49%);--heading-background-color:#334BFF}:host([state=info]){--heading-background-color:#6678FF;--heading-background-color:#007678}:host ::slotted(*){padding-right:10px}:host [part=heading]{display:flex;flex:0 0 auto;align-items:center;height:100%;text-transform:uppercase;font-weight:600;background:var(--heading-background-color);color:var(--heading-text-color);padding:0 8px}:host [part=message]{flex:1 1000000 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:10px;text-align:inherit}:host [part=right]{flex:0 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [part=close]{touch-action:manipulation;flex:0 0 auto;width:16px;height:16px;margin-right:10px;stroke-width:.11em;cursor:pointer}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-appstate-bar', styles: ':host{--heading-text-color:#CCCCCC;--heading-background-color:#334BFF;--text-color:#000000;--background-color:hsl(236, 77%, 92%);--border-color:#404040;display:flex;align-items:center;background:var(--background-color);color:var(--text-color);outline:solid 1px var(--border-color);font-size:12px;height:28px;--heading-text-color:#FFFFFF;--heading-background-color:#0F1E8A;--text-color:#CCCCCC;--background-color:#262626}:host([state=highlight]){--heading-background-color:hsl(337, 80%, 49%);--heading-background-color:#334BFF}:host([state=info]){--heading-background-color:#6678FF;--heading-background-color:#007678}:host ::slotted(*){padding-right:10px}:host [part=heading]{display:flex;flex:0 0 auto;align-items:center;height:100%;text-transform:uppercase;font-weight:600;background:var(--heading-background-color);color:var(--heading-text-color);padding:0 8px}:host [part=message]{flex:1 1000000 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:10px;text-align:inherit}:host [part=right]{flex:0 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [part=close]{touch-action:manipulation;flex:0 0 auto;width:16px;height:16px;margin-right:10px;stroke-width:.11em;cursor:pointer}' }}));

package/lib/appstate-bar/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-appstate-bar', styles: ':host{--heading-text-color:#0D0D0D;--heading-background-color:#334BFF;--text-color:#000000;--background-color:hsl(236, 77%, 92%);--border-color:#595959;display:flex;align-items:center;background:var(--background-color);color:var(--text-color);outline:solid 1px var(--border-color);font-size:12rem;height:28px;--heading-text-color:#FFFFFF;--heading-background-color:#0F1E8A;--text-color:#0D0D0D;--background-color:#F2F2F2;--border-color:#CCCCCC}:host([state=highlight]){--heading-background-color:hsl(337, 80%, 49%);--heading-background-color:#334BFF}:host([state=info]){--heading-background-color:#6678FF;--heading-background-color:#007678}:host ::slotted(*){padding-right:10px}:host [part=heading]{display:flex;flex:0 0 auto;align-items:center;height:100%;text-transform:uppercase;font-weight:600;background:var(--heading-background-color);color:var(--heading-text-color);padding:0 8px}:host [part=message]{flex:1 1000000 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:10px;text-align:inherit}:host [part=right]{flex:0 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [part=close]{touch-action:manipulation;flex:0 0 auto;width:16px;height:16px;margin-right:10px;stroke-width:.11em;cursor:pointer}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-appstate-bar', styles: ':host{--heading-text-color:#0D0D0D;--heading-background-color:#334BFF;--text-color:#000000;--background-color:hsl(236, 77%, 92%);--border-color:#595959;display:flex;align-items:center;background:var(--background-color);color:var(--text-color);outline:solid 1px var(--border-color);font-size:12px;height:28px;--heading-text-color:#FFFFFF;--heading-background-color:#0F1E8A;--text-color:#0D0D0D;--background-color:#F2F2F2;--border-color:#CCCCCC}:host([state=highlight]){--heading-background-color:hsl(337, 80%, 49%);--heading-background-color:#334BFF}:host([state=info]){--heading-background-color:#6678FF;--heading-background-color:#007678}:host ::slotted(*){padding-right:10px}:host [part=heading]{display:flex;flex:0 0 auto;align-items:center;height:100%;text-transform:uppercase;font-weight:600;background:var(--heading-background-color);color:var(--heading-text-color);padding:0 8px}:host [part=message]{flex:1 1000000 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:10px;text-align:inherit}:host [part=right]{flex:0 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [part=close]{touch-action:manipulation;flex:0 0 auto;width:16px;height:16px;margin-right:10px;stroke-width:.11em;cursor:pointer}' }}));

package/lib/appstate-bar/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-appstate-bar', styles: ':host{--heading-text-color:#E2E2E2;--heading-background-color:#FF9933;--text-color:#000000;--background-color:hsl(236, 77%, 92%);--border-color:#4A4A52;display:flex;align-items:center;background:var(--background-color);color:var(--text-color);outline:solid 1px var(--border-color);font-size:14rem;--heading-text-color:#46A0F0;--heading-background-color:#142E45;--text-color:#C2C2C2;--background-color:#0F2233;--border-color:#000000;height:24px}:host([state=highlight]){--heading-background-color:hsl(337, 80%, 49%);--heading-text-color:#000000;--heading-background-color:#FF9933}:host([state=info]){--heading-background-color:#b35900;--heading-text-color:#C2C2C2;--heading-background-color:#282E33}:host ::slotted(*){padding-right:10px}:host [part=heading]{display:flex;flex:0 0 auto;align-items:center;height:100%;text-transform:uppercase;font-weight:600;background:var(--heading-background-color);color:var(--heading-text-color);padding:0 10px}:host [part=message]{flex:1 1000000 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:10px;text-align:inherit}:host [part=right]{flex:0 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [part=close]{touch-action:manipulation;flex:0 0 auto;margin-right:10px;stroke-width:.11em;cursor:pointer;width:15px;height:15px;stroke-width:.12em}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-appstate-bar', styles: ':host{--heading-text-color:#E2E2E2;--heading-background-color:#FF9933;--text-color:#000000;--background-color:hsl(236, 77%, 92%);--border-color:#4A4A52;display:flex;align-items:center;background:var(--background-color);color:var(--text-color);outline:solid 1px var(--border-color);font-size:14px;--heading-text-color:#46A0F0;--heading-background-color:#142E45;--text-color:#C2C2C2;--background-color:#0F2233;--border-color:#000000;height:24px}:host([state=highlight]){--heading-background-color:hsl(337, 80%, 49%);--heading-text-color:#000000;--heading-background-color:#FF9933}:host([state=info]){--heading-background-color:#b35900;--heading-text-color:#C2C2C2;--heading-background-color:#282E33}:host ::slotted(*){padding-right:10px}:host [part=heading]{display:flex;flex:0 0 auto;align-items:center;height:100%;text-transform:uppercase;font-weight:600;background:var(--heading-background-color);color:var(--heading-text-color);padding:0 10px}:host [part=message]{flex:1 1000000 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:10px;text-align:inherit}:host [part=right]{flex:0 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [part=close]{touch-action:manipulation;flex:0 0 auto;margin-right:10px;stroke-width:.11em;cursor:pointer;width:15px;height:15px;stroke-width:.12em}' }}));

package/lib/appstate-bar/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-appstate-bar', styles: ':host{--heading-text-color:#484848;--heading-background-color:#FF9933;--text-color:#000000;--background-color:hsl(236, 77%, 92%);--border-color:#A9AFBA;display:flex;align-items:center;background:var(--background-color);color:var(--text-color);outline:solid 1px var(--border-color);font-size:14rem;--heading-text-color:#FFFFFF;--heading-background-color:#2A6090;--text-color:#484848;--background-color:#C1E3FE;--border-color:#FFFFFF;height:24px}:host([state=highlight]){--heading-background-color:hsl(337, 80%, 49%);--heading-text-color:#FFFFFF;--heading-background-color:#CC7F33}:host([state=info]){--heading-background-color:#EE7600;--heading-text-color:#FFFFFF;--heading-background-color:#666570}:host ::slotted(*){padding-right:10px}:host [part=heading]{display:flex;flex:0 0 auto;align-items:center;height:100%;text-transform:uppercase;font-weight:600;background:var(--heading-background-color);color:var(--heading-text-color);padding:0 10px}:host [part=message]{flex:1 1000000 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:10px;text-align:inherit}:host [part=right]{flex:0 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [part=close]{touch-action:manipulation;flex:0 0 auto;margin-right:10px;stroke-width:.11em;cursor:pointer;width:15px;height:15px;stroke-width:.12em}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-appstate-bar', styles: ':host{--heading-text-color:#484848;--heading-background-color:#FF9933;--text-color:#000000;--background-color:hsl(236, 77%, 92%);--border-color:#A9AFBA;display:flex;align-items:center;background:var(--background-color);color:var(--text-color);outline:solid 1px var(--border-color);font-size:14px;--heading-text-color:#FFFFFF;--heading-background-color:#2A6090;--text-color:#484848;--background-color:#C1E3FE;--border-color:#FFFFFF;height:24px}:host([state=highlight]){--heading-background-color:hsl(337, 80%, 49%);--heading-text-color:#FFFFFF;--heading-background-color:#CC7F33}:host([state=info]){--heading-background-color:#EE7600;--heading-text-color:#FFFFFF;--heading-background-color:#666570}:host ::slotted(*){padding-right:10px}:host [part=heading]{display:flex;flex:0 0 auto;align-items:center;height:100%;text-transform:uppercase;font-weight:600;background:var(--heading-background-color);color:var(--heading-text-color);padding:0 10px}:host [part=message]{flex:1 1000000 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:10px;text-align:inherit}:host [part=right]{flex:0 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [part=close]{touch-action:manipulation;flex:0 0 auto;margin-right:10px;stroke-width:.11em;cursor:pointer;width:15px;height:15px;stroke-width:.12em}' }}));

package/lib/autosuggest/custom-elements.json

@@ -136,35 +136,35 @@
       "events": [
         {
           "name": "item-highlight",
-          "description": "Fired when an item gets highlighted or highlight is removed"
+          "description": "Fired when the user highlights an item or removes highlight from the item."
         },
         {
           "name": "add-attach-target-events",
-          "description": "Fired when attach has been set"
+          "description": "Fired when `attach` has been set to bind the control with any custom inputs."
         },
         {
           "name": "remove-attach-target-events",
-          "description": "Fired when attach has been removed"
+          "description": "Fired when `attach` has been removed to unbind the control with the inputs."
         },
         {
           "name": "item-select",
-          "description": "Fired when an item gets selected"
+          "description": "Fired when the user selects an item on autosuggest."
         },
         {
           "name": "suggestions-fetch-requested",
-          "description": "Fired when auto suggest requests the data"
+          "description": "Fired when autosuggest requests the data. The event will be triggered when the value of the attached control has changed or when keyboard navigation is performed."
         },
         {
           "name": "suggestions-clear-requested",
-          "description": "Fired when auto suggest requests to clear the data. If used in reactive application, prevent default and set suggestions to []"
+          "description": "Fired when autosuggest requests to clear the data. If used in reactive application, prevent default and set suggestions to []."
         },
         {
           "name": "suggestions-query",
-          "description": "Fired when input value has changed and the query must be set"
+          "description": "Fired when the user changes value in input control and you might need to update suggestion items accordingly."
         },
         {
           "name": "suggestions-changed",
-          "description": "Fired when suggestions changed"
+          "description": "Fired when suggestion items changed."
         }
       ],
       "slots": [

package/lib/autosuggest/custom-elements.md

@@ -37,14 +37,14 @@ custom rendering, pagination, asynchronous data request, etc.
 
 | Event                         | Description                                      |
 |-------------------------------|--------------------------------------------------|
-| `add-attach-target-events`    | Fired when attach has been set                   |
-| `item-highlight`              | Fired when an item gets highlighted or highlight is removed |
-| `item-select`                 | Fired when an item gets selected                 |
-| `remove-attach-target-events` | Fired when attach has been removed               |
-| `suggestions-changed`         | Fired when suggestions changed                   |
-| `suggestions-clear-requested` | Fired when auto suggest requests to clear the data. If used in reactive application, prevent default and set suggestions to [] |
-| `suggestions-fetch-requested` | Fired when auto suggest requests the data        |
-| `suggestions-query`           | Fired when input value has changed and the query must be set |
+| `add-attach-target-events`    | Fired when `attach` has been set to bind the control with any custom inputs. |
+| `item-highlight`              | Fired when the user highlights an item or removes highlight from the item. |
+| `item-select`                 | Fired when the user selects an item on autosuggest. |
+| `remove-attach-target-events` | Fired when `attach` has been removed to unbind the control with the inputs. |
+| `suggestions-changed`         | Fired when suggestion items changed.             |
+| `suggestions-clear-requested` | Fired when autosuggest requests to clear the data. If used in reactive application, prevent default and set suggestions to []. |
+| `suggestions-fetch-requested` | Fired when autosuggest requests the data. The event will be triggered when the value of the attached control has changed or when keyboard navigation is performed. |
+| `suggestions-query`           | Fired when the user changes value in input control and you might need to update suggestion items accordingly. |
 
 ## Slots
 

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

@@ -1,17 +1,17 @@
 import type { ItemType } from '../../item';
-export declare type AutosuggestSelectItemEvent = CustomEvent<{
+export type AutosuggestSelectItemEvent = CustomEvent<{
     query: string;
     suggestion: Suggestion;
 }>;
-export declare type AutosuggestHighlightItem = HTMLElement & {
+export type AutosuggestHighlightItem = HTMLElement & {
     highlighted: boolean;
 };
-export declare type AutosuggestHighlightItemEvent = CustomEvent<{
+export type AutosuggestHighlightItemEvent = CustomEvent<{
     target: AutosuggestHighlightItem;
     oldTarget: AutosuggestHighlightItem;
 }>;
-export declare type AutosuggestQueryAction = (event: CustomEvent) => void;
-export declare type AutosuggestReason = 'value-changed' | 'input-focus' | 'suggestions-revealed' | 'escape-pressed' | 'enter-pressed' | 'more-results';
+export type AutosuggestQueryAction = (event: CustomEvent) => void;
+export type AutosuggestReason = 'value-changed' | 'input-focus' | 'suggestions-revealed' | 'escape-pressed' | 'enter-pressed' | 'more-results';
 export interface Suggestion {
     /**
      * Type of item. Value can be `text`, `header`, `divider`
@@ -46,21 +46,21 @@ export interface Suggestion {
      */
     id?: string;
 }
-export declare type AutosuggestItem = Suggestion | string | unknown;
+export type AutosuggestItem = Suggestion | string | unknown;
 export interface AutosuggestQuery {
     toString(): string;
 }
-export declare type AutosuggestTargetElement = HTMLElement & {
+export type AutosuggestTargetElement = HTMLElement & {
     value: string;
 };
-export declare type AutosuggestMethodType = 'click' | 'enter' | 'clear' | 'reset' | 'navigation';
-export declare type AutosuggestRenderer = (suggestion: AutosuggestItem, query: AutosuggestQuery | null) => HTMLElement;
-export declare type AutosuggestHighlightable = (suggestion: AutosuggestItem, target: HTMLElement) => boolean;
+export type AutosuggestMethodType = 'click' | 'enter' | 'clear' | 'reset' | 'navigation';
+export type AutosuggestRenderer = (suggestion: AutosuggestItem, query: AutosuggestQuery | null) => HTMLElement;
+export type AutosuggestHighlightable = (suggestion: AutosuggestItem, target: HTMLElement) => boolean;
 /**
  * @event item-highlight
  * Fired when an item gets highlighted or highlight is removed
  */
-export declare type ItemHighlightEvent = CustomEvent<{
+export type ItemHighlightEvent = CustomEvent<{
     /**
      * New highlight target
      */
@@ -83,18 +83,18 @@ export declare type ItemHighlightEvent = CustomEvent<{
  * Fired when attach has been set.
  * Add attach target listeners
  */
-export declare type AddAttachTargetEventsEvent = CustomEvent;
+export type AddAttachTargetEventsEvent = CustomEvent;
 /**
  * @event remove-attach-target-events
  * Fired when attach has been removed.
  * Remove attach target listeners
  */
-export declare type RemoveAttachTargetEventsEvent = CustomEvent;
+export type RemoveAttachTargetEventsEvent = CustomEvent;
 /**
  * @event item-select
  * Fired when an item gets selected
  */
-export declare type ItemSelectEvent = CustomEvent<{
+export type ItemSelectEvent = CustomEvent<{
     /**
      * Select method
      */
@@ -116,7 +116,7 @@ export declare type ItemSelectEvent = CustomEvent<{
  * @event suggestions-fetch-requested
  * Fired when auto suggest requests the data
  */
-export declare type SuggestionsFetchRequestedEvent = CustomEvent<{
+export type SuggestionsFetchRequestedEvent = CustomEvent<{
     /**
      * Input query
      */
@@ -131,12 +131,12 @@ export declare type SuggestionsFetchRequestedEvent = CustomEvent<{
  * Fired when auto suggest requests to clear the data.
  * If used in reactive application, prevent default and set suggestions to []
  */
-export declare type SuggestionsClearRequestedEvent = CustomEvent;
+export type SuggestionsClearRequestedEvent = CustomEvent;
 /**
  * @event suggestions-query
  * Fired when input value has changed and the query must be set.
  */
-export declare type SuggestionsQueryEvent = CustomEvent<{
+export type SuggestionsQueryEvent = CustomEvent<{
     /**
      * The reason to request query
      */
@@ -146,7 +146,7 @@ export declare type SuggestionsQueryEvent = CustomEvent<{
  * @event suggestions-changed
  * Fired when suggestions changed
  */
-export declare type SuggestionsChangedEvent = CustomEvent<{
+export type SuggestionsChangedEvent = CustomEvent<{
     /**
      * Suggestion Items
      */

package/lib/autosuggest/index.d.ts

@@ -19,14 +19,14 @@ export { itemHighlightable, escapeRegExp, queryWordSelect, renderer, renderer as
  * Autosuggest supports various use cases such as
  * custom rendering, pagination, asynchronous data request, etc.
  *
- * @fires item-highlight Fired when an item gets highlighted or highlight is removed
- * @fires add-attach-target-events Fired when attach has been set
- * @fires remove-attach-target-events Fired when attach has been removed
- * @fires item-select Fired when an item gets selected
- * @fires suggestions-fetch-requested Fired when auto suggest requests the data
- * @fires suggestions-clear-requested Fired when auto suggest requests to clear the data. If used in reactive application, prevent default and set suggestions to []
- * @fires suggestions-query Fired when input value has changed and the query must be set
- * @fires suggestions-changed Fired when suggestions changed
+ * @fires item-highlight - Fired when the user highlights an item or removes highlight from the item.
+ * @fires add-attach-target-events - Fired when `attach` has been set to bind the control with any custom inputs.
+ * @fires remove-attach-target-events - Fired when `attach` has been removed to unbind the control with the inputs.
+ * @fires item-select - Fired when the user selects an item on autosuggest.
+ * @fires suggestions-fetch-requested - Fired when autosuggest requests the data. The event will be triggered when the value of the attached control has changed or when keyboard navigation is performed.
+ * @fires suggestions-clear-requested - Fired when autosuggest requests to clear the data. If used in reactive application, prevent default and set suggestions to [].
+ * @fires suggestions-query - Fired when the user changes value in input control and you might need to update suggestion items accordingly.
+ * @fires suggestions-changed - Fired when suggestion items changed.
  *
  * @attr {boolean} opened - Set to open auto suggest popup
  * @prop {boolean} [opened=false] -  Auto suggest popup's open state

package/lib/autosuggest/index.js

@@ -26,14 +26,14 @@ export { itemHighlightable, escapeRegExp, queryWordSelect, renderer, renderer as
  * Autosuggest supports various use cases such as
  * custom rendering, pagination, asynchronous data request, etc.
  *
- * @fires item-highlight Fired when an item gets highlighted or highlight is removed
- * @fires add-attach-target-events Fired when attach has been set
- * @fires remove-attach-target-events Fired when attach has been removed
- * @fires item-select Fired when an item gets selected
- * @fires suggestions-fetch-requested Fired when auto suggest requests the data
- * @fires suggestions-clear-requested Fired when auto suggest requests to clear the data. If used in reactive application, prevent default and set suggestions to []
- * @fires suggestions-query Fired when input value has changed and the query must be set
- * @fires suggestions-changed Fired when suggestions changed
+ * @fires item-highlight - Fired when the user highlights an item or removes highlight from the item.
+ * @fires add-attach-target-events - Fired when `attach` has been set to bind the control with any custom inputs.
+ * @fires remove-attach-target-events - Fired when `attach` has been removed to unbind the control with the inputs.
+ * @fires item-select - Fired when the user selects an item on autosuggest.
+ * @fires suggestions-fetch-requested - Fired when autosuggest requests the data. The event will be triggered when the value of the attached control has changed or when keyboard navigation is performed.
+ * @fires suggestions-clear-requested - Fired when autosuggest requests to clear the data. If used in reactive application, prevent default and set suggestions to [].
+ * @fires suggestions-query - Fired when the user changes value in input control and you might need to update suggestion items accordingly.
+ * @fires suggestions-changed - Fired when suggestion items changed.
  *
  * @attr {boolean} opened - Set to open auto suggest popup
  * @prop {boolean} [opened=false] -  Auto suggest popup's open state
@@ -42,6 +42,76 @@ export { itemHighlightable, escapeRegExp, queryWordSelect, renderer, renderer as
  * @slot footer - Slot to add custom contents at the bottom of autosuggest popup
  */
 let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
+    /**
+     * A `CSSResultGroup` that will be used
+     * to style the host, slotted children
+     * and the internal template of the element.
+     * @return CSS template
+     */
+    static get styles() {
+        return [
+            super.styles,
+            css `
+        :host {
+          overflow: hidden;
+          display: flex;
+          flex-direction: column;
+        }
+        [part=content] {
+          flex: 1 1 auto;
+          overflow-x: hidden;
+          overflow-y: auto;
+          -webkit-overflow-scrolling: touch;
+        }
+        [part=header], [part=footer] {
+          flex: none;
+        }
+      `
+        ];
+    }
+    /**
+     * A basic regexp matching pattern to replace text based on string input.
+     * @param text Value to test against
+     * @param query The query
+     * @param [pattern=<mark>$1</mark>] Provide a pattern to replace string
+     * @returns innerHTML The text that can be used as innerHTML
+     */
+    static QueryWordSelect(text, query = '', pattern = '<mark>$1</mark>') {
+        return queryWordSelect(text, query, pattern);
+    }
+    /**
+     * Build item element from data object
+     * @param suggestion Suggestion data
+     * @param query A query data (usually string, but could be any entity )
+     * @returns item
+     */
+    static ItemRenderer(suggestion, query) {
+        return renderer(suggestion, query);
+    }
+    /**
+     * Replace forbidden characters in regular expressions
+     * @param string A string to process
+     * @returns clean string
+     */
+    static EscapeRegExp(string = '') {
+        return escapeRegExp(string);
+    }
+    /**
+     * Check whether item can be highlighted
+     * @param suggestion Suggestion object
+     * @param target item element
+     * @returns highlightable
+     */
+    static ItemHighlightable(suggestion, target) {
+        return itemHighlightable(suggestion, target);
+    }
     /**
      * creates auto-suggest
      */
@@ -200,76 +270,6 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
          */
         this.onOutsideClick = this.onOutsideClick.bind(this);
     }
-    /**
-     * Element version number
-     * @returns version number
-     */
-    static get version() {
-        return VERSION;
-    }
-    /**
-     * A `CSSResultGroup` that will be used
-     * to style the host, slotted children
-     * and the internal template of the element.
-     * @return CSS template
-     */
-    static get styles() {
-        return [
-            super.styles,
-            css `
-        :host {
-          overflow: hidden;
-          display: flex;
-          flex-direction: column;
-        }
-        [part=content] {
-          flex: 1 1 auto;
-          overflow-x: hidden;
-          overflow-y: auto;
-          -webkit-overflow-scrolling: touch;
-        }
-        [part=header], [part=footer] {
-          flex: none;
-        }
-      `
-        ];
-    }
-    /**
-     * A basic regexp matching pattern to replace text based on string input.
-     * @param text Value to test against
-     * @param query The query
-     * @param [pattern=<mark>$1</mark>] Provide a pattern to replace string
-     * @returns innerHTML The text that can be used as innerHTML
-     */
-    static QueryWordSelect(text, query = '', pattern = '<mark>$1</mark>') {
-        return queryWordSelect(text, query, pattern);
-    }
-    /**
-     * Build item element from data object
-     * @param suggestion Suggestion data
-     * @param query A query data (usually string, but could be any entity )
-     * @returns item
-     */
-    static ItemRenderer(suggestion, query) {
-        return renderer(suggestion, query);
-    }
-    /**
-     * Replace forbidden characters in regular expressions
-     * @param string A string to process
-     * @returns clean string
-     */
-    static EscapeRegExp(string = '') {
-        return escapeRegExp(string);
-    }
-    /**
-     * Check whether item can be highlighted
-     * @param suggestion Suggestion object
-     * @param target item element
-     * @returns highlightable
-     */
-    static ItemHighlightable(suggestion, target) {
-        return itemHighlightable(suggestion, target);
-    }
     disconnectedCallback() {
         this.dispatchAttachEventsRemoveAction();
         super.disconnectedCallback();
@@ -1302,8 +1302,6 @@ __decorate([
     query('#moreResults')
 ], Autosuggest.prototype, "moreResultsItem", void 0);
 Autosuggest = Autosuggest_1 = __decorate([
-    customElement('ef-autosuggest', {
-        alias: 'emerald-autosuggest'
-    })
+    customElement('ef-autosuggest')
 ], Autosuggest);
 export { Autosuggest };

package/lib/button/custom-elements.json

@@ -111,7 +111,7 @@
       "events": [
         {
           "name": "active-changed",
-          "description": "Dispatched on changing `active` property state by taping on button when property `toggles` is true."
+          "description": "Fired when `active` property changed by user taps on toggled button. It will not be triggered if `active` state is changed programmatically."
         }
       ]
     }

package/lib/button/custom-elements.md

@@ -20,4 +20,4 @@ and more with support for different states and styles.
 
 | Event            | Description                                      |
 |------------------|--------------------------------------------------|
-| `active-changed` | Dispatched on changing `active` property state by taping on button when property `toggles` is true. |
+| `active-changed` | Fired when `active` property changed by user taps on toggled button. It will not be triggered if `active` state is changed programmatically. |

package/lib/button/index.d.ts

@@ -6,7 +6,7 @@ import '../icon/index.js';
  * and more with support for different states and styles.
  * @attr {boolean} disabled - Set state to disabled
  * @prop {boolean} [disabled=false] - Set state to disabled
- * @fires active-changed - Dispatched on changing `active` property state by taping on button when property `toggles` is true.
+ * @fires active-changed - Fired when `active` property changed by user taps on toggled button. It will not be triggered if `active` state is changed programmatically.
  */
 export declare class Button extends ControlElement {
     /**

package/lib/button/index.js

@@ -12,7 +12,7 @@ import '../icon/index.js';
  * and more with support for different states and styles.
  * @attr {boolean} disabled - Set state to disabled
  * @prop {boolean} [disabled=false] - Set state to disabled
- * @fires active-changed - Dispatched on changing `active` property state by taping on button when property `toggles` is true.
+ * @fires active-changed - Fired when `active` property changed by user taps on toggled button. It will not be triggered if `active` state is changed programmatically.
  */
 let Button = class Button extends ControlElement {
     constructor() {
@@ -200,8 +200,6 @@ __decorate([
     query('[part="label"]')
 ], Button.prototype, "labelElement", void 0);
 Button = __decorate([
-    customElement('ef-button', {
-        alias: 'coral-button'
-    })
+    customElement('ef-button')
 ], Button);
 export { Button };