@refinitiv-ui/elements 5.6.0 → 5.7.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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)
 
 

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/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/autosuggest/custom-elements.json

@@ -50,10 +50,20 @@
           "name": "opened",
           "description": "Auto suggest popup's open state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "properties": [
+        {
+          "name": "defaultDebounceRate",
+          "type": "100",
+          "default": "100"
+        },
+        {
+          "name": "defaultMoreSearchText",
+          "type": "\"More results for {0}\"",
+          "default": "\"More results for {0}\""
+        },
         {
           "name": "attach",
           "attribute": "attach",
@@ -130,7 +140,7 @@
           "attribute": "opened",
           "description": "Auto suggest popup's open state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "events": [

package/lib/autosuggest/custom-elements.md

@@ -0,0 +1,47 @@
+# 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`                                     | "defaultMoreSearchText" | 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 |

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

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

@@ -0,0 +1,9 @@
+# ef-button-bar
+
+Used to display multiple buttons to create a list of commands bar.
+
+## Properties
+
+| Property  | Attribute | Type      | Default | Description                                      |
+|-----------|-----------|-----------|---------|--------------------------------------------------|
+| `managed` | `managed` | `boolean` | false   | Manages user interaction, only allowing one toggle button to be active at any one time. |

package/lib/calendar/custom-elements.json

@@ -73,13 +73,13 @@
           "name": "readonly",
           "description": "Set readonly state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "disabled",
           "description": "Set disabled state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "properties": [
@@ -168,14 +168,14 @@
           "attribute": "readonly",
           "description": "Set readonly state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "disabled",
           "attribute": "disabled",
           "description": "Set disabled state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "events": [

package/lib/calendar/custom-elements.md

@@ -0,0 +1,35 @@
+# ef-calendar
+
+Standard calendar element
+
+## Properties
+
+| Property         | Attribute           | Type                     | Default | Description                                      |
+|------------------|---------------------|--------------------------|---------|--------------------------------------------------|
+| `disabled`       | `disabled`          | `boolean`                | false   | Set disabled state                               |
+| `fillCells`      | `fill-cells`        | `boolean`                | false   | Fill head and tail cell dates                    |
+| `filter`         |                     | `CalendarFilter \| null` | null    | Custom filter, used for enabling/disabling certain dates |
+| `firstDayOfWeek` | `first-day-of-week` | `number \| null`         |         | Set the first day of the week.<br />0 - for Sunday, 6 - for Saturday |
+| `max`            | `max`               | `string`                 | ""      | Set maximum date                                 |
+| `min`            | `min`               | `string`                 | ""      | Set minimum date                                 |
+| `multiple`       | `multiple`          | `boolean`                | false   | Set to switch to multiple select mode            |
+| `range`          | `range`             | `boolean`                | false   | Set to switch to range select mode               |
+| `readonly`       | `readonly`          | `boolean`                | false   | Set readonly state                               |
+| `value`          | `value`             | `string`                 | ""      | Current date time value                          |
+| `values`         | `values`            | `string[]`               |         | Set multiple selected values                     |
+| `view`           | `view`              | `string`                 | ""      | Current calendar view date                       |
+| `weekdaysOnly`   | `weekdays-only`     | `boolean`                | false   | Only enable weekdays                             |
+| `weekendsOnly`   | `weekends-only`     | `boolean`                | false   | Only enable weekends                             |
+
+## Events
+
+| Event           | Description                     |
+|-----------------|---------------------------------|
+| `value-changed` | Fired when the `value` changes. |
+| `view-changed`  | Fired when the `view` changes.  |
+
+## Slots
+
+| Name     | Description                                      |
+|----------|--------------------------------------------------|
+| `footer` | Adds slotted content into the footer of the calendar control |

package/lib/canvas/custom-elements.md

@@ -0,0 +1,27 @@
+# ef-canvas
+
+A Component uses to draw graphics on a web page,
+it works similarly to the normal HTML5 Canvas element.
+
+## Properties
+
+| Property   | Attribute  | Modifiers | Type                               | Default | Description                                      |
+|------------|------------|-----------|------------------------------------|---------|--------------------------------------------------|
+| `autoloop` | `autoloop` |           | `boolean`                          |         | Starts an automatic animation loop.<br />Enabling the frame event. |
+| `canvas`   |            | readonly  | `HTMLCanvasElement`                |         | Html canvas element                              |
+| `context`  |            | readonly  | `CanvasRenderingContext2D \| null` |         | The 2 dimensional context of the canvas, used for drawing |
+| `ctx`      |            | readonly  | `CanvasRenderingContext2D \| null` |         | Alias of context                                 |
+| `height`   |            |           | `number`                           | 0       | Height of canvas                                 |
+| `width`    |            |           | `number`                           | 0       | Width of canvas                                  |
+
+## Methods
+
+| Method       | Type                     | Description                                      |
+|--------------|--------------------------|--------------------------------------------------|
+| `getContext` | `(mode: string): string` | Return context of canvas,<br />support only 2D mode<br /><br />**mode**: mode of canvas's context |
+
+## Events
+
+| Event   | Description                                      |
+|---------|--------------------------------------------------|
+| `frame` | dispatched when next Frame event occurs when autoloop is set to true |

package/lib/card/custom-elements.md

@@ -0,0 +1,24 @@
+# ef-card
+
+A card frame component.
+
+## Properties
+
+| Property | Attribute | Type     | Default | Description             |
+|----------|-----------|----------|---------|-------------------------|
+| `config` |           |          |         | Set card configurations |
+| `footer` | `footer`  | `string` | ""      | Set text on the footer  |
+| `header` | `header`  | `string` | ""      | Set text on the header  |
+
+## Events
+
+| Event          | Description                       |
+|----------------|-----------------------------------|
+| `item-trigger` | Fired when card menu is selected. |
+
+## Slots
+
+| Name     | Description                                      |
+|----------|--------------------------------------------------|
+| `footer` | Adds slotted content into the footer of the card. |
+| `header` | Adds slotted content into the header of the card. |

package/lib/chart/custom-elements.md

@@ -0,0 +1,16 @@
+# ef-chart
+
+Charting component that use ChartJS library
+
+## Properties
+
+| Property | Attribute | Modifiers | Type          | Default | Description                                      |
+|----------|-----------|-----------|---------------|---------|--------------------------------------------------|
+| `colors` |           | readonly  | `string[]`    |         | List of available chart colors                   |
+| `config` | `config`  |           | `ChartConfig` | null    | Chart configurations. Same configuration as ChartJS |
+
+## Methods
+
+| Method        | Type                                 | Description                                      |
+|---------------|--------------------------------------|--------------------------------------------------|
+| `updateChart` | `(config?: ChartUpdateProps=): void` | Update all data, title, scales, legends and re-render the chart based on its config<br /><br />**config**: Additional configuration for control an animation in the update process. |

package/lib/checkbox/custom-elements.json

@@ -19,13 +19,13 @@
           "name": "readonly",
           "description": "Set readonly state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "disabled",
           "description": "Set disabled state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "properties": [
@@ -46,14 +46,14 @@
           "attribute": "readonly",
           "description": "Set readonly state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "disabled",
           "attribute": "disabled",
           "description": "Set disabled state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "events": [

package/lib/checkbox/custom-elements.md

@@ -0,0 +1,18 @@
+# ef-checkbox
+
+Form control for selecting one or several options
+
+## Properties
+
+| Property        | Attribute       | Type      | Default | Description                |
+|-----------------|-----------------|-----------|---------|----------------------------|
+| `checked`       | `checked`       | `boolean` |         | Value of checkbox          |
+| `disabled`      | `disabled`      | `boolean` | false   | Set disabled state         |
+| `indeterminate` | `indeterminate` | `boolean` |         | Set state to indeterminate |
+| `readonly`      | `readonly`      | `boolean` | false   | Set readonly state         |
+
+## Events
+
+| Event             | Description                                |
+|-------------------|--------------------------------------------|
+| `checked-changed` | Fired when the `checked` property changes. |

package/lib/clock/custom-elements.md

@@ -0,0 +1,28 @@
+# ef-clock
+
+Display hours, minutes and seconds as clock interface
+
+## Properties
+
+| Property      | Attribute      | Type      | Default | Description                                      |
+|---------------|----------------|-----------|---------|--------------------------------------------------|
+| `amPm`        | `am-pm`        | `boolean` | false   | Display the digital clock in 12hr format.        |
+| `analogue`    | `analogue`     | `boolean` | false   | Display clock in analogue style.                 |
+| `interactive` | `interactive`  | `boolean` | false   | Enabled interactive mode. Allowing the user to offset the value. |
+| `offset`      | `offset`       | `number`  |         | Get offset value                                 |
+| `showSeconds` | `show-seconds` | `boolean` | false   | Display the seconds segment.                     |
+| `tick`        | `tick`         | `boolean` |         | Toggles clock ticking function.                  |
+| `value`       | `value`        | `string`  |         | Get time value in format `hh:mm:ss`              |
+
+## Methods
+
+| Method            | Type                | Description                                      |
+|-------------------|---------------------|--------------------------------------------------|
+| `resizedCallback` | `(size: any): void` | Called when the element's dimension have changed<br /><br />**size**: Element size |
+
+## Events
+
+| Event            | Description                                      |
+|------------------|--------------------------------------------------|
+| `offset-changed` | Fired when the the user offsets the clock in `interactive` mode. |
+| `value-changed`  | Fired when the value property changes while ticking. |

package/lib/collapse/custom-elements.md

@@ -0,0 +1,27 @@
+# ef-collapse
+
+Allows users to hide non-critical information
+or areas of the screen, maximizing the amount of real estate
+for their primary displays.
+
+## Properties
+
+| Property   | Attribute  | Type                | Default | Description                                      |
+|------------|------------|---------------------|---------|--------------------------------------------------|
+| `expanded` | `expanded` | `boolean`           | false   | Set to expand the item                           |
+| `header`   | `header`   | `string \| null`    | null    | Set text on the header                           |
+| `level`    | `level`    | `"1" \| "2" \| "3"` | "3"     | Use level styling from theme                     |
+| `spacing`  | `spacing`  | `boolean`           | false   | Set to apply padding from theme to content section |
+
+## Events
+
+| Event              | Description                                 |
+|--------------------|---------------------------------------------|
+| `expanded-changed` | Fired when the `expanded` property changes. |
+
+## 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/color-dialog/custom-elements.json

@@ -50,7 +50,7 @@
           "name": "opened",
           "description": "Set dialog to open",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "x",
@@ -66,7 +66,7 @@
           "name": "no-cancel-on-esc-key",
           "description": "Prevents dialog to close when user presses ESC key",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "position-target",
@@ -128,13 +128,13 @@
           "attribute": "opened",
           "description": "Set dialog to open",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "noCancelOnEscKey",
           "description": "Prevents dialog to close when user presses ESC key",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "x",
@@ -157,25 +157,25 @@
           "name": "noCancelOnOutsideClick",
           "description": "Prevents dialog to close when user clicks outside the dialog.",
           "type": "boolean",
-          "default": "\"true\""
+          "default": "true"
         },
         {
           "name": "withBackdrop",
           "description": "False to hide backdrop.",
           "type": "boolean",
-          "default": "\"true\""
+          "default": "true"
         },
         {
           "name": "draggable",
           "description": "False to make the dialog not draggable.",
           "type": "boolean",
-          "default": "\"true\""
+          "default": "true"
         },
         {
           "name": "withShadow",
           "description": "False to remove shadow for dialog component.",
           "type": "boolean",
-          "default": "\"true\""
+          "default": "true"
         }
       ],
       "events": [

package/lib/color-dialog/custom-elements.md

@@ -0,0 +1,39 @@
+# ef-color-dialog
+
+Displays a colour picker dialog,
+for selecting a predefined range of colours.
+
+## Attributes
+
+| Attribute              | Type      | Default | Description                                      |
+|------------------------|-----------|---------|--------------------------------------------------|
+| `no-cancel-on-esc-key` | `boolean` | false   | Prevents dialog to close when user presses ESC key |
+| `position-target`      | `string`  |         | Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`. |
+
+## Properties
+
+| Property                 | Attribute       | Type           | Default | Description                                      |
+|--------------------------|-----------------|----------------|---------|--------------------------------------------------|
+| `allowNocolor`           | `allow-nocolor` | `boolean`      | false   | Set the palettes to activate no-color option     |
+| `blue`                   | `blue`          | `string`       | ""      | Blue value from 0 to 255                         |
+| `draggable`              |                 | `boolean`      | true    | False to make the dialog not draggable.          |
+| `green`                  | `green`         | `string`       | ""      | Green value from 0 to 255                        |
+| `header`                 | `header`        | `string\|null` |         | Set Header/Title of the color dialog             |
+| `hex`                    | `hex`           | `string`       | ""      | Value of hex without # sign, supports both 3-digits shorthand hex and regular 6-digits hex |
+| `noCancelOnEscKey`       |                 | `boolean`      | false   | Prevents dialog to close when user presses ESC key |
+| `noCancelOnOutsideClick` |                 | `boolean`      | true    | Prevents dialog to close when user clicks outside the dialog. |
+| `opened`                 | `opened`        | `boolean`      | false   | Set dialog to open                               |
+| `positionTarget`         |                 | `string`       |         | Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`. |
+| `red`                    | `red`           | `string`       | ""      | Red value from 0 to 255                          |
+| `value`                  | `value`         | `string`       | ""      | Value of selected color from color dialog will be written here as hex value<br />e.g. "#00f" or "#0000ff" |
+| `withBackdrop`           |                 | `boolean`      | true    | False to hide backdrop.                          |
+| `withShadow`             |                 | `boolean`      | true    | False to remove shadow for dialog component.     |
+| `x`                      | `x`             | `string`       |         | Set a specific x coordinate of dialog            |
+| `y`                      | `y`             | `string`       |         | Set a specific y coordinate of dialog            |
+
+## Events
+
+| Event            | Description                               |
+|------------------|-------------------------------------------|
+| `opened-changed` | Fired when the `opened` property changes. |
+| `value-changed`  | Fired when the `value` property changes.  |

package/lib/combo-box/custom-elements.json

@@ -59,19 +59,19 @@
           "name": "readonly",
           "description": "Set readonly state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "disabled",
           "description": "Set disabled state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "name",
           "description": "Set name of the element",
           "type": "string",
-          "default": "\"''\""
+          "default": "\"\""
         }
       ],
       "properties": [
@@ -171,21 +171,21 @@
           "attribute": "readonly",
           "description": "Set readonly state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "disabled",
           "attribute": "disabled",
           "description": "Set disabled state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "name",
           "attribute": "name",
           "description": "Set name of the element",
           "type": "string",
-          "default": "\"''\""
+          "default": "\"\""
         }
       ],
       "events": [
@@ -200,6 +200,9 @@
         {
           "name": "opened-changed",
           "description": "Dispatched when opened state changes"
+        },
+        {
+          "name": "animationiteration"
         }
       ]
     }