@refinitiv-ui/elements 5.0.0-beta.3 → 5.0.0-dev.204

package/lib/accordion/index.js

@@ -1,11 +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 { 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.
@@ -51,10 +49,6 @@ let Accordion = class Accordion extends Collapse {
          * Add spacing to content section in all collapse items
          */
         this.spacing = false;
-        /**
-         * Allow the collapse animation to be disabled
-         */
-        this.collapseAnimationDisabled = false;
         /**
          * handle bubbled clicks from items
          * @param event the click event object
@@ -68,10 +62,17 @@ let Accordion = class Accordion extends Collapse {
         };
     }
     /**
-     * A `CSSResult` that will be used
+     * 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 {CSSResult | CSSResult[]} CSS template
+     * @return CSS template
      */
     static get styles() {
         return css `
@@ -127,13 +128,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], Accordion.prototype, "spacing", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'collapse-animation-disabled' })
-], Accordion.prototype, "collapseAnimationDisabled", void 0);
 Accordion = __decorate([
     customElement('ef-accordion', {
         alias: 'coral-accordion'
     })
 ], Accordion);
 export { Accordion };
-//# sourceMappingURL=index.js.map

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

@@ -35,7 +35,7 @@
       "events": [
         {
           "name": "clear",
-          "description": "Clear Event\nFired when clear button is clicked"
+          "description": "fired when clear button is clicked"
         }
       ],
       "slots": [

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,19 +1,26 @@
 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.
+ *
+ * @fires clear - fired when clear button is clicked
  */
 export declare class AppstateBar extends BasicElement {
     /**
-     * A `CSSResult` that will be used
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    /**
+     * 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.
      */
@@ -53,4 +60,6 @@ declare global {
       'ef-appstate-bar': Partial<AppstateBar> | JSXInterface.HTMLAttributes<AppstateBar>;
     }
   }
-}
+}
+
+export {};

package/lib/appstate-bar/index.js

@@ -1,14 +1,14 @@
-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 '../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.
+ *
+ * @fires clear - fired when clear button is clicked
  */
 let AppstateBar = class AppstateBar extends BasicElement {
     constructor() {
@@ -40,11 +40,18 @@ let AppstateBar = class AppstateBar extends BasicElement {
         };
     }
     /**
-     * A `CSSResult` that will be used
+     * 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.
      *
-     * @returns {(CSSResult|CSSResult[])} CSS template
+     * @returns CSS template
      */
     static get styles() {
         return css `
@@ -91,4 +98,3 @@ AppstateBar = __decorate([
     })
 ], AppstateBar);
 export { AppstateBar };
-//# sourceMappingURL=index.js.map

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;
@@ -13,12 +13,33 @@ export declare type AutosuggestHighlightItemEvent = CustomEvent<{
 export declare type AutosuggestQueryAction = (event: CustomEvent) => void;
 export declare 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`
+     */
     type?: ItemType;
+    /**
+     * The text for the label indicating the meaning of the item.
+     */
     label?: string;
+    /**
+     * The text for the pop-up of item when it's hover.
+     */
     title?: string;
+    /**
+     * Set the icon name from the coral-icon list
+     */
     icon?: string;
+    /**
+     * Sets the item to be disabled.
+     */
     disabled?: boolean;
+    /**
+     * Value of the data item.
+     */
     value?: string;
+    /**
+     * Sort data item into the group.
+     */
     group?: string;
 }
 export declare type AutosuggestItem = Suggestion | string | unknown;

package/lib/autosuggest/helpers/types.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=types.js.map

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;
@@ -74,4 +73,3 @@ export const itemRenderer = (suggestion, query) => {
     }
     return el;
 };
-//# sourceMappingURL=utils.js.map

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,15 +24,23 @@ 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 {
     /**
-     * A `CSSResult` that will be used
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    /**
+     * 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
@@ -77,6 +86,7 @@ export declare class Autosuggest extends Overlay {
     moreResults: boolean;
     /**
      * Custom text for More Search
+     * @default More results for {0}
      */
     moreSearchText: string;
     /**
@@ -523,4 +533,6 @@ declare global {
       'ef-autosuggest': Partial<Autosuggest> | JSXInterface.HTMLAttributes<Autosuggest>;
     }
   }
-}
+}
+
+export {};

package/lib/autosuggest/index.js

@@ -1,17 +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';
-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
@@ -30,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 {
     /**
@@ -52,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;
         /**
@@ -259,28 +264,38 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
         this.attachEventsRemoveAction = this.attachEventsRemoveAction.bind(this);
     }
     /**
-     * A `CSSResult` that will be used
+     * 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 [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.
@@ -1238,4 +1253,3 @@ Autosuggest = Autosuggest_1 = __decorate([
     })
 ], Autosuggest);
 export { Autosuggest };
-//# sourceMappingURL=index.js.map

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,13 +105,13 @@
           "attribute": "disabled",
           "description": "Set state to disabled",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "events": [
         {
           "name": "active-changed",
-          "description": "Fired on changing `active` property state by taping on button when property `toggles` is true.\nProvides new state of `active` property in detail.value field"
+          "description": "Dispatched on changing `active` property state by taping on button when property `toggles` is true."
         }
       ]
     }

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. |