@refinitiv-ui/elements 5.5.0 → 5.8.1

package/CHANGELOG.md

@@ -3,27 +3,84 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [5.5.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@5.3.3...@refinitiv-ui/elements@5.5.0) (2021-10-25)
+## [5.8.1](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@5.8.0...@refinitiv-ui/elements@5.8.1) (2021-12-07)
+
+**Note:** Version bump only for package @refinitiv-ui/elements
+
+
+
+
+
+# [5.8.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@5.7.0...@refinitiv-ui/elements@5.8.0) (2021-12-03)
 
 
 ### Bug Fixes
 
-* dev server should start with source maps and declaration maps ([3e81b33](https://github.com/Refinitiv/refinitiv-ui/commit/3e81b33d4fb2136af2b18eeaf1fc1d740bd38105))
-* **overlay-menu:** interactiveElements list is not reset in some scenarios ([6e17cce](https://github.com/Refinitiv/refinitiv-ui/commit/6e17cce224eafe3e54ee9c2fdfa7bf9bce5dcbfc))
-* **overlay-menu:** remove wrong super call ([0a63e1f](https://github.com/Refinitiv/refinitiv-ui/commit/0a63e1fc9c0bb8a161010fd15df47198a9101bfa))
-* **overlay:** incorrect change check for `interactiveElements` property ([d1da5b6](https://github.com/Refinitiv/refinitiv-ui/commit/d1da5b692df070f0bb8f08644dd30b43673ffb49))
+* change default role to more generic type for better extendibility ([#100](https://github.com/Refinitiv/refinitiv-ui/issues/100)) ([fe999dc](https://github.com/Refinitiv/refinitiv-ui/commit/fe999dc66b5f42581a37329ced697ae6ac2dc929))
+* **combo-box:** fix arrow icon not show in Solar when disabled ([55c1008](https://github.com/Refinitiv/refinitiv-ui/commit/55c1008b7b63f915a7575059c6539e63a757e389))
+* **combo-box:** import counter instead of pill ([6410c03](https://github.com/Refinitiv/refinitiv-ui/commit/6410c03dd12077f25347dddb249b6a6700186abc))
 
 
 ### Features
 
-* add browsers option to test command ([#27](https://github.com/Refinitiv/refinitiv-ui/issues/27)) ([64a1d46](https://github.com/Refinitiv/refinitiv-ui/commit/64a1d464fb3c4a1f1cf851c3ab070cd9f615fb6c))
-* **tree:** query attribute and property ([ce067c7](https://github.com/Refinitiv/refinitiv-ui/commit/ce067c723cf42a57545589dea4feb57ac1e08822))
+* **list:** improve screen reader ([0bc3a8c](https://github.com/Refinitiv/refinitiv-ui/commit/0bc3a8c9c4051200cd1a5c8ed655d1d3ebbd9021))
+* **select:** improve screen reader support ([#80](https://github.com/Refinitiv/refinitiv-ui/issues/80)) ([a43fbcd](https://github.com/Refinitiv/refinitiv-ui/commit/a43fbcd4b23b2f508ddc94b8007913f66da1ae89))
+
+
+
+
+
+# [5.7.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@5.6.0...@refinitiv-ui/elements@5.7.0) (2021-11-22)
+
+
+### Bug Fixes
 
+* **tree:** correctly update dependant checked states ([#82](https://github.com/Refinitiv/refinitiv-ui/issues/82)) ([fdb7018](https://github.com/Refinitiv/refinitiv-ui/commit/fdb7018f9446f933f428448ada60f4a8cacc1acf))
 
 
+### Features
+
+* **item:** improve screen reader support ([#74](https://github.com/Refinitiv/refinitiv-ui/issues/74)) ([b14b950](https://github.com/Refinitiv/refinitiv-ui/commit/b14b950897cb96cdc957e12d93b510cc4361c4f3))
+
+
+
+
+
+# [5.6.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@5.5.0...@refinitiv-ui/elements@5.6.0) (2021-11-08)
+
+
+### Bug Fixes
+
+* **datetime-picker:** values are not update synchronously ([#59](https://github.com/Refinitiv/refinitiv-ui/issues/59)) ([55500a3](https://github.com/Refinitiv/refinitiv-ui/commit/55500a30f4daab1110d7664b6c244dd2b83995cb))
+* incorrect tap behaviour ([#57](https://github.com/Refinitiv/refinitiv-ui/issues/57)) ([a245fbe](https://github.com/Refinitiv/refinitiv-ui/commit/a245fbe1999057de0525313e35d5156cc497135f))
+* **multi-input:** only focus input on click clear button ([#64](https://github.com/Refinitiv/refinitiv-ui/issues/64)) ([214452a](https://github.com/Refinitiv/refinitiv-ui/commit/214452ac02f77c91090226597c2c02e95fc3d084))
+* **tree-select:** update selectAll condition when search no match ([#53](https://github.com/Refinitiv/refinitiv-ui/issues/53)) ([c3b5e46](https://github.com/Refinitiv/refinitiv-ui/commit/c3b5e461bdf56ad9d17ae921d1c5f980d44754ac))
 
 
-# [5.4.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@5.3.3...@refinitiv-ui/elements@5.4.0) (2021-10-25)
+### Features
+
+* **button:** improve accessibility for screen readers ([#33](https://github.com/Refinitiv/refinitiv-ui/issues/33)) ([89f2e19](https://github.com/Refinitiv/refinitiv-ui/commit/89f2e19f631257e5572d2c74cf7449f9be265aca))
+* **checkbox:** improve accessibility for screen readers ([#37](https://github.com/Refinitiv/refinitiv-ui/issues/37)) ([93509d0](https://github.com/Refinitiv/refinitiv-ui/commit/93509d0ec801b880b9bf68013d83c140075c59dd))
+* **clock:** small analogue clock face ([#54](https://github.com/Refinitiv/refinitiv-ui/issues/54)) ([bc4b2a8](https://github.com/Refinitiv/refinitiv-ui/commit/bc4b2a816135ef70819d826d15ba9b36dda99207))
+* **core:** add latest lit directives, add focused-changed event ([69168f6](https://github.com/Refinitiv/refinitiv-ui/commit/69168f6fe3e6eea8e9abb2a875a2f283eb06d42b))
+* **icon:** support icon names and icon urls ([6d3a92d](https://github.com/Refinitiv/refinitiv-ui/commit/6d3a92db329c5198d56aeed4a1944ef3d0e29f1d))
+* Lit@2 upgrade ([dbda63b](https://github.com/Refinitiv/refinitiv-ui/commit/dbda63be97257f891cb1f2c5ff46b638c70e0b15))
+* **radio-button:** improve radio button accessibility ([#43](https://github.com/Refinitiv/refinitiv-ui/issues/43)) ([12d2b23](https://github.com/Refinitiv/refinitiv-ui/commit/12d2b238c988e880d8055afe280cfb93ace6dd51))
+* **text-field:** improve screen reader support ([#65](https://github.com/Refinitiv/refinitiv-ui/issues/65)) ([65bfa44](https://github.com/Refinitiv/refinitiv-ui/commit/65bfa4404bb4b462f20163c733b75fd509485b1b))
+* **toggle:** improve accessibility for screen readers ([#42](https://github.com/Refinitiv/refinitiv-ui/issues/42)) ([7554471](https://github.com/Refinitiv/refinitiv-ui/commit/755447104777606247bb06bfba5e97accb893ccf))
+
+
+### Performance Improvements
+
+* **icon:** cache svg template results ([463c6ba](https://github.com/Refinitiv/refinitiv-ui/commit/463c6ba1f0403aa25605fd363ac863159ee4c492))
+* **list:** check before positioning element in dom ([244b44f](https://github.com/Refinitiv/refinitiv-ui/commit/244b44fba553e1f40e0a55ecda93e7d943b13994))
+* **tree:** reduce calculations for visible items ([c231f06](https://github.com/Refinitiv/refinitiv-ui/commit/c231f06a1a4a901bafefdee7dcc1e009a7902ac5))
+
+
+
+
+
+# [5.5.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@5.3.3...@refinitiv-ui/elements@5.5.0) (2021-10-25)
 
 
 ### Bug Fixes

package/lib/accordion/custom-elements.md

@@ -0,0 +1,18 @@
+# ef-accordion
+
+Used to display a group of `Collapse` control.
+Only one item will be able to expand by default but you can customize its behavior.
+
+## Properties
+
+| Property               | Attribute                | Type      | Default | Description                                      |
+|------------------------|--------------------------|-----------|---------|--------------------------------------------------|
+| `autoCollapseDisabled` | `auto-collapse-disabled` | `boolean` | false   | Allow multiple sections expand at the same time  |
+| `spacing`              | `spacing`                | `boolean` | false   | Add spacing to content section in all collapse items |
+
+## Slots
+
+| Name           | Description                                      |
+|----------------|--------------------------------------------------|
+| `header-left`  | Slot to add custom contents to the left side of header e.g. ef-icon, ef-checkbox |
+| `header-right` | Slot to add custom contents to the right side of header e.g. ef-icon, ef-checkbox |

package/lib/accordion/index.d.ts

@@ -1,6 +1,6 @@
 import { JSXInterface } from '../jsx';
-import { PropertyValues, TemplateResult, CSSResult } from '@refinitiv-ui/core';
-import { Collapse } from '../collapse';
+import { PropertyValues, TemplateResult, CSSResultGroup } from '@refinitiv-ui/core';
+import { Collapse } from '../collapse/index.js';
 /**
  * Used to display a group of `Collapse` control.
  * Only one item will be able to expand by default but you can customize its behavior.
@@ -16,12 +16,12 @@ export declare class Accordion extends Collapse {
      */
     static get version(): string;
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
-     * @return {CSSResult | CSSResult[]} CSS template
+     * @return CSS template
      */
-    static get styles(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     /**
      * Allow multiple sections expand at the same time
      */

package/lib/accordion/index.js

@@ -1,12 +1,9 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { html, css, customElement, property } from '@refinitiv-ui/core';
-import { VERSION } from '../';
-import { Collapse } from '../collapse';
+import { __decorate } from "tslib";
+import { html, css } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { VERSION } from '../version.js';
+import { Collapse } from '../collapse/index.js';
 /**
  * Finds closest accordion parent of element.
  * Created, because IE11 doesn't support closest() method.
@@ -72,10 +69,10 @@ let Accordion = class Accordion extends Collapse {
         return VERSION;
     }
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
-     * @return {CSSResult | CSSResult[]} CSS template
+     * @return CSS template
      */
     static get styles() {
         return css `

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

@@ -0,0 +1,22 @@
+# ef-appstate-bar
+
+Used to display at the top of application to provide a status or information.
+
+## Properties
+
+| Property  | Attribute | Type                            | Default | Description                                      |
+|-----------|-----------|---------------------------------|---------|--------------------------------------------------|
+| `heading` | `heading` | `string`                        | ""      | Text to display in heading section.              |
+| `state`   | `state`   | `"info" \| "highlight" \| null` | null    | (optional) Type of state bar. Supported value are `info`, `highlight`. |
+
+## Events
+
+| Event   | Description                        |
+|---------|------------------------------------|
+| `clear` | fired when clear button is clicked |
+
+## Slots
+
+| Name    | Description                               |
+|---------|-------------------------------------------|
+| `right` | place custom content on the right of bar. |

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

@@ -1,6 +1,6 @@
 import { JSXInterface } from '../jsx';
-import { BasicElement, TemplateResult, CSSResult, PropertyValues } from '@refinitiv-ui/core';
-import '../icon';
+import { BasicElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
+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.
@@ -14,13 +14,13 @@ export declare class AppstateBar extends BasicElement {
      */
     static get version(): string;
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      *
-     * @returns {(CSSResult|CSSResult[])} CSS template
+     * @returns CSS template
      */
-    static get styles(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     /**
      * Text to display in heading section.
      */

package/lib/appstate-bar/index.js

@@ -1,12 +1,9 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { BasicElement, html, css, customElement, property } from '@refinitiv-ui/core';
-import { VERSION } from '../';
-import '../icon';
+import { __decorate } from "tslib";
+import { BasicElement, html, css } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { VERSION } from '../version.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.
@@ -50,11 +47,11 @@ let AppstateBar = class AppstateBar extends BasicElement {
         return VERSION;
     }
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      *
-     * @returns {(CSSResult|CSSResult[])} CSS template
+     * @returns CSS template
      */
     static get styles() {
         return css `

package/lib/autosuggest/custom-elements.json

@@ -26,7 +26,7 @@
           "name": "more-search-text",
           "description": "Custom text for More Search",
           "type": "string",
-          "default": "\"defaultMoreSearchText\""
+          "default": "\"More results for {0}\""
         },
         {
           "name": "loading",
@@ -50,10 +50,20 @@
           "name": "opened",
           "description": "Auto suggest popup's open state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "properties": [
+        {
+          "name": "defaultDebounceRate (readonly)",
+          "type": "100",
+          "default": "100"
+        },
+        {
+          "name": "defaultMoreSearchText (readonly)",
+          "type": "\"More results for {0}\"",
+          "default": "\"More results for {0}\""
+        },
         {
           "name": "attach",
           "attribute": "attach",
@@ -79,7 +89,7 @@
           "attribute": "more-search-text",
           "description": "Custom text for More Search",
           "type": "string",
-          "default": "\"defaultMoreSearchText\""
+          "default": "\"More results for {0}\""
         },
         {
           "name": "loading",
@@ -130,7 +140,7 @@
           "attribute": "opened",
           "description": "Auto suggest popup's open state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "events": [
@@ -167,6 +177,16 @@
           "description": "Fired when suggestions changed"
         }
       ],
+      "slots": [
+        {
+          "name": "header",
+          "description": "Slot to add custom contents at the top of autosuggest popup"
+        },
+        {
+          "name": "footer",
+          "description": "Slot to add custom contents at the bottom of autosuggest popup"
+        }
+      ],
       "methods": [
         {
           "name": "onInputValueChange",

package/lib/autosuggest/custom-elements.md

@@ -0,0 +1,54 @@
+# ef-autosuggest
+
+Shows suggestions based on users' query.
+It can be used by attaching to text form control
+such as TextField, Multi Input, etc.
+Autosuggest supports various use cases such as
+custom rendering, pagination, asynchronous data request, etc.
+
+## Properties
+
+| Property         | Attribute          | Type                                         | Default                | Description                                      |
+|------------------|--------------------|----------------------------------------------|------------------------|--------------------------------------------------|
+| `attach`         | `attach`           | `AutosuggestTargetElement \| string \| null` | null                   | An HTML Element or CSS selector                  |
+| `debounceRate`   | `debounce-rate`    | `number`                                     | "100"                  | Debounce rate in ms of the filter as a number.<br />Used to throttle the filter rate so as not to trigger unneeded filtering |
+| `highlightable`  |                    | `AutosuggestHighlightable`                   | "itemHighlightable"    | A function that is applied to every suggestion during the render process<br />to say whether the item can be highlighted and selected. Only items that return true are considered.<br />By default the function checks for `item` `highlightable` property. |
+| `htmlRenderer`   | `html-renderer`    | `boolean`                                    | false                  | If set to true, the render function is not called. Instead the wrapper element<br />should populate and destroy suggestion elements. Rendering items manually<br />may have performance benefits in frameworks that use virtual DOM (such as `Vue`, `React`, `hyperHTML` and others) |
+| `loading`        | `loading`          | `boolean`                                    | false                  | If set to true show loading mask                 |
+| `moreResults`    | `more-results`     | `boolean`                                    | false                  | If set to true display 'Has more results' item   |
+| `moreSearchText` | `more-search-text` | `string`                                     | "More results for {0}" | Custom text for More Search                      |
+| `opened`         | `opened`           | `boolean`                                    | false                  | Auto suggest popup's open state                  |
+| `query`          |                    | `AutosuggestQuery \| null`                   | null                   | An object that represents a query from attach target |
+| `renderer`       |                    | `AutosuggestRenderer`                        | "itemRenderer"         | A renderer applied to suggestion.<br />By default a render maps data to item attributes |
+| `requestOnFocus` | `request-on-focus` | `boolean`                                    | false                  | Request suggestions when attach target is focused |
+| `suggestions`    |                    | `AutosuggestItem[]`                          | []                     | A list of suggestion items                       |
+
+## Methods
+
+| Method               | Type                 | Description                                      |
+|----------------------|----------------------|--------------------------------------------------|
+| `onInputBlur`        | `(event: any): void` | Run when input has lost focus<br /><br />**event**: by default `blur` event is listened |
+| `onInputFocus`       | `(event: any): void` | Run when input received focus<br /><br />**event**: by default `focus` event is listened |
+| `onInputKeyDown`     | `(event: any): void` | Run when input key down event has happened<br /><br />**event**: by default `keydown` event is listened |
+| `onInputValueChange` | `(event: any): void` | Run when attach target value changes.<br /><br />**event**: by default `value-changed` event is listened |
+| `refit`              | `(): void`           | Set the width                                    |
+
+## Events
+
+| 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 |
+
+## Slots
+
+| Name     | Description                                      |
+|----------|--------------------------------------------------|
+| `footer` | Slot to add custom contents at the bottom of autosuggest popup |
+| `header` | Slot to add custom contents at the top of autosuggest popup |

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

@@ -1,4 +1,4 @@
-import { ItemType } from '../../item';
+import type { ItemType } from '../../item';
 export declare type AutosuggestSelectItemEvent = CustomEvent<{
     query: string;
     suggestion: Suggestion;

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

@@ -1,5 +1,5 @@
-import { Item } from '../../item';
-import { AutosuggestHighlightable, AutosuggestRenderer } from './types';
+import type { Item } from '../../item';
+import type { AutosuggestHighlightable, AutosuggestRenderer } from './types';
 /**
  * Check whether item can be highlighted
  * @param suggestion Suggestion object

package/lib/autosuggest/helpers/utils.js

@@ -1,4 +1,3 @@
-import { Item } from '../../item';
 /**
  * Check whether item can be highlighted
  * @param suggestion Suggestion object
@@ -54,7 +53,7 @@ export const updateElementContent = (el, query, label, value) => {
  * @returns item
  */
 export const itemRenderer = (suggestion, query) => {
-    const el = new Item();
+    const el = document.createElement('ef-item');
     if (typeof suggestion === 'object') {
         const { type, label, title, icon, disabled, value } = suggestion;
         el.type = type || null;

package/lib/autosuggest/index.d.ts

@@ -1,10 +1,11 @@
 import { JSXInterface } from '../jsx';
-import { CSSResult, ElementSize, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
-import { Overlay } from '../overlay';
-import '../loader';
-import { AutosuggestTargetElement, AutosuggestHighlightable, AutosuggestMethodType, AutosuggestQuery, AutosuggestRenderer, AutosuggestReason, AutosuggestItem, AutosuggestSelectItemEvent, AutosuggestHighlightItemEvent } from './helpers/types';
-export { AutosuggestTargetElement, AutosuggestHighlightable, AutosuggestMethodType, AutosuggestQuery, AutosuggestRenderer, AutosuggestReason, AutosuggestItem } from './helpers/types';
-export { queryWordSelect, itemRenderer, escapeRegExp, itemHighlightable, updateElementContent } from './helpers/utils';
+import { CSSResultGroup, ElementSize, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
+import type { AutosuggestTargetElement, AutosuggestHighlightable, AutosuggestMethodType, AutosuggestQuery, AutosuggestRenderer, AutosuggestReason, AutosuggestItem, AutosuggestSelectItemEvent, AutosuggestHighlightItemEvent } from './helpers/types';
+import { Overlay } from '../overlay/index.js';
+import '../loader/index.js';
+import '../item/index.js';
+export type { AutosuggestTargetElement, AutosuggestHighlightable, AutosuggestMethodType, AutosuggestQuery, AutosuggestRenderer, AutosuggestReason, AutosuggestItem } from './helpers/types';
+export { queryWordSelect, itemRenderer, escapeRegExp, itemHighlightable, updateElementContent } from './helpers/utils.js';
 /**
  * Shows suggestions based on users' query.
  * It can be used by attaching to text form control
@@ -23,6 +24,9 @@ export { queryWordSelect, itemRenderer, escapeRegExp, itemHighlightable, updateE
  *
  * @attr {boolean} opened - Set to open auto suggest popup
  * @prop {boolean} [opened=false] -  Auto suggest popup's open state
+ *
+ * @slot header - Slot to add custom contents at the top of autosuggest popup
+ * @slot footer - Slot to add custom contents at the bottom of autosuggest popup
  */
 export declare class Autosuggest extends Overlay {
     /**
@@ -31,12 +35,12 @@ export declare class Autosuggest extends Overlay {
      */
     static get version(): string;
     /**
-     * A `CSSResult` that will be used
+     * 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(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     /**
      * A basic regexp matching pattern to replace text based on string input.
      * @param text Value to test against
@@ -82,6 +86,7 @@ export declare class Autosuggest extends Overlay {
     moreResults: boolean;
     /**
      * Custom text for More Search
+     * @default More results for {0}
      */
     moreSearchText: string;
     /**

package/lib/autosuggest/index.js

@@ -1,18 +1,18 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
 var Autosuggest_1;
-import { css, customElement, html, property, query, unsafeHTML } from '@refinitiv-ui/core';
-import { AnimationTaskRunner, TimeoutTaskRunner } from '@refinitiv-ui/utils';
-import { Overlay } from '../overlay';
-import '../loader';
-import { escapeRegExp, itemHighlightable, itemRenderer, queryWordSelect } from './helpers/utils';
-import { isIE, isMobile } from './helpers/const';
-import { VERSION } from '../';
-export { queryWordSelect, itemRenderer, escapeRegExp, itemHighlightable, updateElementContent } from './helpers/utils';
+import { __decorate } from "tslib";
+import { css, html } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { unsafeHTML } from '@refinitiv-ui/core/lib/directives/unsafe-html.js';
+import { VERSION } from '../version.js';
+import { AnimationTaskRunner, TimeoutTaskRunner } from '@refinitiv-ui/utils/lib/async.js';
+import { escapeRegExp, itemHighlightable, itemRenderer, queryWordSelect } from './helpers/utils.js';
+import { isIE, isMobile } from '@refinitiv-ui/utils/lib/browser.js';
+import { Overlay } from '../overlay/index.js';
+import '../loader/index.js';
+import '../item/index.js';
+export { queryWordSelect, itemRenderer, escapeRegExp, itemHighlightable, updateElementContent } from './helpers/utils.js';
 /**
  * Shows suggestions based on users' query.
  * It can be used by attaching to text form control
@@ -31,6 +31,9 @@ export { queryWordSelect, itemRenderer, escapeRegExp, itemHighlightable, updateE
  *
  * @attr {boolean} opened - Set to open auto suggest popup
  * @prop {boolean} [opened=false] -  Auto suggest popup's open state
+ *
+ * @slot header - Slot to add custom contents at the top of autosuggest popup
+ * @slot footer - Slot to add custom contents at the bottom of autosuggest popup
  */
 let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
     /**
@@ -53,6 +56,7 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
         this.moreResults = false;
         /**
          * Custom text for More Search
+         * @default More results for {0}
          */
         this.moreSearchText = Autosuggest_1.defaultMoreSearchText;
         /**
@@ -267,28 +271,31 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
         return VERSION;
     }
     /**
-     * A `CSSResult` that will be used
+     * 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 [Overlay.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;
-      }
-    `];
+        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.

package/lib/button/custom-elements.json

@@ -49,7 +49,7 @@
           "name": "disabled",
           "description": "Set state to disabled",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "properties": [
@@ -105,7 +105,7 @@
           "attribute": "disabled",
           "description": "Set state to disabled",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "events": [

package/lib/button/custom-elements.md

@@ -0,0 +1,23 @@
+# ef-button
+
+Use button for actions in forms, dialogs,
+and more with support for different states and styles.
+
+## Properties
+
+| Property      | Attribute     | Type                  | Default | Description                                      |
+|---------------|---------------|-----------------------|---------|--------------------------------------------------|
+| `active`      | `active`      | `boolean`             | false   | An active or inactive state, can only be used with toggles property/attribute |
+| `cta`         | `cta`         | `boolean`             | false   | Set state to call-to-action                      |
+| `disabled`    | `disabled`    | `boolean`             | false   | Set state to disabled                            |
+| `hoverIcon`   | `hover-icon`  | `string \| null`      | null    | Specify icon to display when hovering. Value can be icon name |
+| `icon`        | `icon`        | `string \| null`      | null    | Specify icon to display in button. Value can be icon name |
+| `textpos`     | `textpos`     | `"before" \| "after"` | "after" | Customises text alignment when specified alongside `icon` property<br />Value can be `before` or `after` |
+| `toggles`     | `toggles`     | `boolean`             | false   | Enable or disable ability to be toggled          |
+| `transparent` | `transparent` | `boolean`             | false   | Removes background when specified alongside `icon` property |
+
+## Events
+
+| Event            | Description                                      |
+|------------------|--------------------------------------------------|
+| `active-changed` | Dispatched on changing `active` property state by taping on button when property `toggles` is true. |