@refinitiv-ui/elements 5.6.0 → 5.7.0

package/lib/list/custom-elements.md

@@ -0,0 +1,30 @@
+# ef-list
+
+Provides listing and immutable selection
+
+## Properties
+
+| Property         | Attribute   | Modifiers | Type           | Default                  | Description                                      |
+|------------------|-------------|-----------|----------------|--------------------------|--------------------------------------------------|
+| `data`           |             |           | `ListData`     |                          | The data object, used to render the list.        |
+| `delegatesFocus` |             | readonly  | `false`        | false                    | Element focus delegation.<br />Set to `false` and relies on native focusing. |
+| `multiple`       | `multiple`  |           | `boolean`      | false                    | Allow multiple selections                        |
+| `renderer`       |             |           | `ListRenderer` | "new ListRenderer(this)" | Renderer used to render list item elements       |
+| `stateless`      | `stateless` |           | `boolean`      | false                    | Disable selections                               |
+| `value`          | `value`     |           | `string`       |                          | Returns the first selected item value.<br />Use `values` when multiple selection mode is enabled. |
+| `values`         |             |           | `object`       |                          | Returns a values collection of the currently<br />selected item values |
+
+## Methods
+
+| Method         | Type                    | Description                                      |
+|----------------|-------------------------|--------------------------------------------------|
+| `down`         | `(): void`              | Navigate up through the list items               |
+| `scrollToItem` | `(item: T): void`       | Scroll to list item element<br /><br />**item**: Data item to scroll to |
+| `selectItem`   | `(item?: any): boolean` | Selects an item in the list<br /><br />**item**: Data Item or Item Element |
+| `up`           | `(): void`              | Navigate up through the list items               |
+
+## Events
+
+| Event           | Description                   |
+|-----------------|-------------------------------|
+| `value-changed` | Dispatched when value changes |

package/lib/loader/custom-elements.md

@@ -0,0 +1,5 @@
+# ef-loader
+
+An animated graphical component,
+used to show that an app is performing an action
+in the background such as downloading content.

package/lib/multi-input/custom-elements.json

@@ -49,13 +49,13 @@
           "name": "readonly",
           "description": "Hides text field and clear icon from all pills",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "disabled",
           "description": "Set disabled state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "value",
@@ -137,14 +137,14 @@
           "attribute": "readonly",
           "description": "Hides text field and clear icon from all pills",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "disabled",
           "attribute": "disabled",
           "description": "Set disabled state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "value",

package/lib/multi-input/custom-elements.md

@@ -0,0 +1,43 @@
+# ef-multi-input
+
+An input control component to display a selection of pills
+
+## Properties
+
+| Property         | Attribute     | Modifiers | Type                     | Default | Description                                    |
+|------------------|---------------|-----------|--------------------------|---------|------------------------------------------------|
+| `data`           |               |           | `MultiInputData \| null` |         | The data object, used to render the list.      |
+| `disabled`       | `disabled`    |           | `boolean`                | false   | Set disabled state                             |
+| `error`          | `error`       |           | `boolean`                | false   | Set state to error                             |
+| `icon`           | `icon`        |           | `string`                 | ""      | Specify icon to display inside input box       |
+| `maxLength`      | `maxlength`   |           | `number \| null`         | null    | Set character max limit                        |
+| `minLength`      | `minlength`   |           | `number \| null`         | null    | Set character min limit                        |
+| `pillsOnly`      | `pills-only`  |           | `boolean`                | false   | Hide text input box                            |
+| `placeholder`    | `placeholder` |           | `string`                 | ""      | Placeholder text to display in input box       |
+| `readonly`       | `readonly`    |           | `boolean`                | false   | Hides text field and clear icon from all pills |
+| `selectionEnd`   |               |           | `number \| null`         |         | Selection end index                            |
+| `selectionStart` |               |           | `number \| null`         |         | Selection start index                          |
+| `value`          | `value`       |           | `string`                 | ""      | Current value of text field                    |
+| `values`         |               | readonly  | `string[]`               |         | Array of item's values ( readonly )            |
+| `warning`        | `warning`     |           | `boolean`                | false   | Set state to warning                           |
+
+## Methods
+
+| Method              | Type                                             | Description                                      |
+|---------------------|--------------------------------------------------|--------------------------------------------------|
+| `add`               | `(item: any): MultiInputDataItem \| null`        | Add a new item to the input. Return newly added object or null if added invalid object.<br /><br />**item**: to add. Object must have at least value and label |
+| `removeByIndex`     | `(index: number): MultiInputDataItem \| null`    | Removes pill by index. Returns item that removed or null if list was empty<br /><br />**index**: of pill to be removed |
+| `removeByValue`     | `(value: string): string`                        | Removes the item by the value and returns array of removed items<br /><br />**value**: Value of item to remove |
+| `removeLastItem`    | `(): MultiInputDataItem \| null`                 | Removes last item. Returns item that removed or null if list was empty |
+| `select`            | `(): void`                                       | Select the contents of input                     |
+| `setSelectionRange` | `(startSelection: number, endSelection: number): void` | Set the selection range<br /><br />**startSelection**: Start of selection<br />**endSelection**: End of the selection |
+
+## Events
+
+| Event           | Description                                      |
+|-----------------|--------------------------------------------------|
+| `error-changed` | Dispatched when error state changes.<br />Property `detail.error` is error from validation. |
+| `item-added`    | Fired when new pill is added.<br />Property `detail.item` is new added pill.<br />Property `detail.items` is new list of all pills. |
+| `item-error`    | Fired when item that attempt to add is invalid.<br />Property `detail.item` is item with an error.<br />Property `detail.items` a current list of pills. |
+| `item-removed`  | Fired when item is removed.<br />Property `detail.item` is pill that removed.<br />Property `detail.items` is new list of all pills. |
+| `value-changed` | Fired when new value of text field is changed.<br />Property `detail.value` will be the new value. |

package/lib/notification/custom-elements.md

@@ -0,0 +1,26 @@
+# ef-notification
+
+Used to show informative content when something happens in the application
+
+## Properties
+
+| Property    | Attribute   | Type      | Default | Description                              |
+|-------------|-------------|-----------|---------|------------------------------------------|
+| `collapsed` | `collapsed` | `boolean` | false   | Toggles the collapsed state.             |
+| `confirm`   | `confirm`   | `boolean` | false   | Notification style: Confirm              |
+| `error`     | `error`     | `boolean` | false   | Notification style: Error                |
+| `message`   | `message`   | `string`  | ""      | The message to show in the notification. |
+| `warning`   | `warning`   | `boolean` | false   | Notification style: Warning              |
+
+## Methods
+
+| Method    | Type       | Description                                      |
+|-----------|------------|--------------------------------------------------|
+| `dismiss` | `(): void` | Dismisses the notification, firing a `dismiss` event and collapsing the notification. |
+
+## Events
+
+| Event       | Description                               |
+|-------------|-------------------------------------------|
+| `collapsed` | Dispatched when notification is collapsed |
+| `dismiss`   | Dispatched when notification is dismissed |

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

@@ -53,19 +53,19 @@
           "name": "value",
           "description": "The value of the number entered into the input.",
           "type": "string",
-          "default": "\"\""
+          "default": "0"
         },
         {
           "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": [
@@ -131,21 +131,21 @@
           "attribute": "value",
           "description": "The value of the number entered into the input.",
           "type": "string",
-          "default": "\"\""
+          "default": "0"
         },
         {
           "name": "readonly",
           "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/number-field/custom-elements.md

@@ -0,0 +1,37 @@
+# ef-number-field
+
+Form control element for numbers
+
+## Properties
+
+| Property        | Attribute     | Modifiers | Type             | Default | Description                                      |
+|-----------------|---------------|-----------|------------------|---------|--------------------------------------------------|
+| `disabled`      | `disabled`    |           | `boolean`        | false   | Set disabled state                               |
+| `error`         | `error`       |           | `boolean`        | false   | Set state to error                               |
+| `max`           | `max`         |           | `string \| null` | null    | Set maximum value.<br />This value must be greater than or equal to the value of the `min` attribute |
+| `min`           | `min`         |           | `string \| null` | null    | Set minimum value.<br />This value must be less than or equal to the value of the `max` attribute |
+| `noSpinner`     | `no-spinner`  |           | `boolean`        | false   | Set spinner's visibility                         |
+| `placeholder`   | `placeholder` |           | `string \| null` | null    | Set placeholder text                             |
+| `readonly`      | `readonly`    |           | `boolean`        | false   | Set readonly state                               |
+| `step`          | `step`        |           | `string \| null` | null    | Set step value                                   |
+| `transparent`   | `transparent` |           | `boolean`        | false   | Set state to transparent                         |
+| `value`         | `value`       |           | `string`         | 0       | The value of the number entered into the input.  |
+| `valueAsNumber` |               | readonly  | `number`         |         | Returns the value of the element, interpreted as double number |
+| `warning`       | `warning`     |           | `boolean`        | false   | Set state to warning                             |
+
+## Methods
+
+| Method           | Type                                          | Description                                      |
+|------------------|-----------------------------------------------|--------------------------------------------------|
+| `checkValidity`  | `(): boolean`                                 | Returns true if an input element contains valid data. |
+| `reportValidity` | `(): boolean`                                 | Validate input. Mark as error if input is invalid |
+| `select`         | `(): void`                                    | Select the contents of input                     |
+| `stepDown`       | `(stepIncrement?: number \| undefined): void` | Decreases the input value by amount of step<br /><br />**stepIncrement**: The stepIncrement parameter is a numeric value. If no parameter is passed, stepIncrement defaults to 1. |
+| `stepUp`         | `(stepIncrement?: number \| undefined): void` | Increases the input value by amount of step<br /><br />**stepIncrement**: The stepIncrement parameter is a numeric value. If no parameter is passed, stepIncrement defaults to 1. |
+
+## Events
+
+| Event           | Description                         |
+|-----------------|-------------------------------------|
+| `error-changed` | Dispatched when error state changes |
+| `value-changed` | Dispatched when value changes       |

package/lib/overlay/custom-elements.json

@@ -313,6 +313,9 @@
         {
           "name": "opened-changed",
           "description": "Dispatched when when open attribute changes internally. Prevent default to stop opening/closing pipeline"
+        },
+        {
+          "name": "animationiteration"
         }
       ],
       "methods": [

package/lib/overlay/custom-elements.md

@@ -0,0 +1,54 @@
+# ef-overlay
+
+Element to help building modals, dialogs and other overlay content
+
+## Properties
+
+| Property                 | Attribute                    | Modifiers | Type              | Default | Description                                      |
+|--------------------------|------------------------------|-----------|-------------------|---------|--------------------------------------------------|
+| `focusBoundary`          |                              |           |                   | "this"  | Set focus boundary to restrict tabbing. Default's overlay itself.<br />If external focus is required, set to null |
+| `fullScreen`             | `full-screen`                |           | `boolean`         | false   | Set to true to show overlay in full screen mode  |
+| `fullyOpened`            |                              | readonly  | `boolean`         |         | Returns true if the overlay is opened and animation is not running.<br />Returns false if overlay is closed and animation is not running |
+| `horizontalOffset`       | `horizontal-offset`          |           | `number`          | 0       | A pixel value that will be added to the position calculated on the horizontal axis.<br />The offset will be applied either to the `left` or `right` depending on the `positionTarget` |
+| `interactiveElements`    |                              |           | `object`          | []      | A list of elements, which are active when overlay is opened<br />Valid only if noInteractionLock is false (default) |
+| `lockPositionTarget`     | `lock-position-target`       |           | `boolean`         | false   | True to lock position target<br />Valid only if noInteractionLock is false (default) |
+| `noAutofocus`            | `no-autofocus`               |           | `boolean`         | false   | Set to true to disable autofocusing the overlay or open |
+| `noCancelOnEscKey`       | `no-cancel-on-esc-key`       |           | `boolean`         | false   | Set to true to disable canceling the overlay with the ESC key |
+| `noCancelOnOutsideClick` | `no-cancel-on-outside-click` |           | `boolean`         | false   | Set to true to disable canceling the overlay by clicking outside it |
+| `noFocusManagement`      | `no-focus-management`        |           | `boolean`         | false   | True to not apply focus management.<br />The overlay will not limit Tab behaviour or do auto-focusing |
+| `noInteractionLock`      | `no-interaction-lock`        |           | `boolean`         | false   | Stop preventing user interaction when overlay is visible |
+| `noOverlap`              | `no-overlap`                 |           | `boolean`         | false   | True to not overlap positionTarget               |
+| `offset`                 | `offset`                     |           | `number`          | 0       | A pixel value that will be added to the position calculated on the vertical or horizontal axis.<br />The offset is applied dynamically depending on the `positionTarget` |
+| `opened`                 | `opened`                     |           | `boolean`         | false   | True if the overlay is currently displayed       |
+| `position`               | `position`                   |           | `{} \| undefined` |         | Set position and align against the attach target.<br />Position may contain a single word or a comma separated list to set the priority.<br />Position is not applied if `attachTarget` is not HTML Element.<br />For instance: `[bottom-middle, top-middle]` - default position is bottom-middle, if cannot fit position top-middle;<br />or `[left, right]` - align is not set, set best position on the left or right<br /><br />Position can be: `top`, `right`, `bottom`, `left`, `center`<br />Align can be: `start`, `middle`, `end` |
+| `positionTarget`         | `position-target`            |           |                   |         | Set the position target as follows:<br />- HTMLElement if overlay is position next to the HTML element<br />- String containing `top`, `right`, `left`, `bottom`, `center` combinations to position against the screen.<br />For instance: `top left` - put the overlay at `top left` point of the screen; `bottom` - put overlay at `bottom center` point of the screen |
+| `positionTargetConfig`   |                              | readonly  |                   |         | Get position target configuration based on positionTarget and fullScreen properties<br />Used for caching and calculations |
+| `spacing`                | `spacing`                    |           | `boolean`         | false   | True to apply spacing for overlay content        |
+| `transitionStyle`        | `transition-style`           |           |                   |         | Set the transition style                         |
+| `transitioning`          |                              | readonly  | `boolean`         |         | Returns true if overlay is doing opening or closing transition |
+| `transparent`            | `transparent`                |           | `boolean`         | false   | True to make overlay background transparent      |
+| `verticalOffset`         | `vertical-offset`            |           | `number`          | 0       | A pixel value that will be added to the position calculated on the vertical axis.<br />The offset will be applied either to the `top` or `bottom` depending on the `positionTarget` |
+| `withBackdrop`           | `with-backdrop`              |           | `boolean`         | false   | True to show backdrop                            |
+| `withShadow`             | `with-shadow`                |           | `boolean`         | false   | True to add shadow                               |
+| `x`                      | `x`                          |           |                   |         | Set a specific x coordinate                      |
+| `y`                      | `y`                          |           |                   |         | Set a specific y coordinate                      |
+| `zIndex`                 | `z-index`                    |           |                   |         | Set a preferable z-index to override automatically calculated z-index |
+
+## Methods
+
+| Method        | Type       | Description                                      |
+|---------------|------------|--------------------------------------------------|
+| `clearCached` | `(): void` | Clear all cached values.<br />Run when external changes occur to styles to re-calculate position. |
+| `fit`         | `(): void` | Fit the overlay panel                            |
+| `refit`       | `(): void` | Clear all cached values and fit the overlay.<br />Use this function if any of `maxWidth`, `maxHeight`, `minWidth`, `minHeight`, `height` or `width` changed |
+| `toFront`     | `(): void` | Move overlay to front of other overlays          |
+
+## Events
+
+| Event                | Description                                      |
+|----------------------|--------------------------------------------------|
+| `animationiteration` |                                                  |
+| `closed`             | Dispatched when overlay becomes invisible and close animation finishes |
+| `opened`             | Dispatched when the overlay becomes visible and the open animation finishes |
+| `opened-changed`     | Dispatched when when open attribute changes internally. Prevent default to stop opening/closing pipeline |
+| `refit`              | Dispatched when refit algorithm finishes calculations |

package/lib/overlay-menu/custom-elements.json

@@ -15,13 +15,13 @@
           "name": "opened",
           "description": "True if the menu is currently displayed",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "value",
           "description": "Returns the first selected item value.",
           "type": "string",
-          "default": "\"\""
+          "default": "0"
         },
         {
           "name": "x",
@@ -101,50 +101,48 @@
           "attribute": "opened",
           "description": "True if the menu is currently displayed",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "withBackdrop",
           "description": "True to show backdrop",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "noCancelOnEscKey",
           "description": "Set to true to disable canceling the overlay with the ESC key",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "noCancelOnOutsideClick",
           "description": "Set to true to disable canceling the overlay by clicking outside it",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "lockPositionTarget",
           "description": "Set to true to lock position target",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "positionTarget",
           "description": "Position next to the HTML element",
-          "type": "HTMLElement|null",
-          "default": "\"null\""
+          "type": "HTMLElement|null"
         },
         {
           "name": "transitionStyle",
           "description": "Set the transition style",
-          "type": "string|null",
-          "default": "\"null\""
+          "type": "string|null"
         },
         {
           "name": "value",
           "attribute": "value",
           "description": "Returns the first selected item value.",
           "type": "string",
-          "default": "\"\""
+          "default": "0"
         },
         {
           "name": "x",

package/lib/overlay-menu/custom-elements.md

@@ -0,0 +1,44 @@
+# ef-overlay-menu
+
+Overlay that supports single-level and multi-level menus
+
+## Attributes
+
+| Attribute                    | Type      | Description                                      |
+|------------------------------|-----------|--------------------------------------------------|
+| `horizontal-offset`          | `number`  | A pixel value that will be added to the position calculated on the horizontal axis. The offset will be applied either to the `left` or `right` depending on the `positionTarget` |
+| `lock-position-target`       | `boolean` | Set to true to lock position target              |
+| `no-cancel-on-esc-key`       | `boolean` | Set to true to disable canceling the overlay with the ESC key |
+| `no-cancel-on-outside-click` | `boolean` | Set to true to disable canceling the overlay by clicking outside it |
+| `transition-style`           | `string`  | Set the transition style                         |
+| `vertical-offset`            | `number`  | A pixel value that will be added to the position calculated on the vertical axis. The offset will be applied either to the `top` or `bottom` depending on the `positionTarget` |
+| `with-backdrop`              | `boolean` | True to show backdrop                            |
+
+## Properties
+
+| Property                 | Attribute  | Type                | Default | Description                                      |
+|--------------------------|------------|---------------------|---------|--------------------------------------------------|
+| `compact`                | `compact`  | `boolean`           | false   | Switch to compact style menu                     |
+| `data`                   |            |                     |         | Construct the menu from data object.<br />Cannot be used with internal content |
+| `horizontalOffset`       |            | `number`            |         | A pixel value that will be added to the position calculated on the horizontal axis. The offset will be applied either to the `left` or `right` depending on the `positionTarget` |
+| `lockPositionTarget`     |            | `boolean`           | false   | Set to true to lock position target              |
+| `noCancelOnEscKey`       |            | `boolean`           | false   | Set to true to disable canceling the overlay with the ESC key |
+| `noCancelOnOutsideClick` |            | `boolean`           | false   | Set to true to disable canceling the overlay by clicking outside it |
+| `offset`                 | `offset`   | `number`            |         | A pixel value that will be added to the position calculated on the vertical or horizontal axis. The offset is applied dynamically depending on the `positionTarget` |
+| `opened`                 | `opened`   | `boolean`           | false   | True if the menu is currently displayed          |
+| `position`               | `position` | `{} \| undefined`   |         | Set position and align against the attach target. |
+| `positionTarget`         |            | `HTMLElement\|null` | null    | Position next to the HTML element                |
+| `transitionStyle`        |            | `string\|null`      | null    | Set the transition style                         |
+| `value`                  | `value`    | `string`            | 0       | Returns the first selected item value.           |
+| `values`                 |            | `string[]`          |         | Array of item's values                           |
+| `verticalOffset`         |            | `number`            |         | A pixel value that will be added to the position calculated on the vertical axis. The offset will be applied either to the `top` or `bottom` depending on the `positionTarget` |
+| `withBackdrop`           |            | `boolean`           | false   | True to show backdrop                            |
+| `x`                      | `x`        | `number`            |         | Set a specific x coordinate                      |
+| `y`                      | `y`        | `number`            |         | Set a specific y coordinate                      |
+
+## Events
+
+| Event            | Description                                      |
+|------------------|--------------------------------------------------|
+| `item-trigger`   | Dispatched when user clicks on item              |
+| `opened-changed` | Dispatched when when opened attribute changes internally. Prevent default to stop opening/closing pipeline |

package/lib/pagination/custom-elements.md

@@ -0,0 +1,27 @@
+# ef-pagination
+
+Used to control and navigate through multiple pages
+
+## Properties
+
+| Property     | Attribute     | Type      | Default | Description             |
+|--------------|---------------|-----------|---------|-------------------------|
+| `disabled`   | `disabled`    | `boolean` | false   | Set state to disable    |
+| `page`       | `page`        | `string`  | "1"     | Set current page        |
+| `pageSize`   | `page-size`   | `string`  | "10"    | Number of item per page |
+| `totalItems` | `total-items` | `string`  | "10"    | Total items             |
+
+## Methods
+
+| Method     | Type       | Description             |
+|------------|------------|-------------------------|
+| `first`    | `(): void` | Go to the first page    |
+| `last`     | `(): void` | Go to the last page     |
+| `next`     | `(): void` | Go to the next page     |
+| `previous` | `(): void` | Go to the previous page |
+
+## Events
+
+| Event          | Description                               |
+|----------------|-------------------------------------------|
+| `page-changed` | Fired when the `page` property is changed |

package/lib/panel/custom-elements.md

@@ -0,0 +1,11 @@
+# ef-panel
+
+A container for components.
+It provides a standard background color and padding, depends on theme.
+
+## Properties
+
+| Property      | Attribute     | Type      | Default | Description                         |
+|---------------|---------------|-----------|---------|-------------------------------------|
+| `spacing`     | `spacing`     | `boolean` | false   | Apply default padding from theme    |
+| `transparent` | `transparent` | `boolean` | false   | Set panel background to transparent |

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

@@ -49,19 +49,19 @@
           "name": "value",
           "description": "Input's value",
           "type": "string",
-          "default": "\"\""
+          "default": "0"
         },
         {
           "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": [
@@ -117,21 +117,21 @@
           "attribute": "value",
           "description": "Input's value",
           "type": "string",
-          "default": "\"\""
+          "default": "0"
         },
         {
           "name": "readonly",
           "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/password-field/custom-elements.md

@@ -0,0 +1,31 @@
+# ef-password-field
+
+A form control element for password
+
+## Properties
+
+| Property      | Attribute     | Type             | Default | Description                                      |
+|---------------|---------------|------------------|---------|--------------------------------------------------|
+| `disabled`    | `disabled`    | `boolean`        | false   | Set disabled state                               |
+| `error`       | `error`       | `boolean`        | false   | Set state to error                               |
+| `maxLength`   | `maxlength`   | `number \| null` | null    | Set character maximum limit                      |
+| `minLength`   | `minlength`   | `number \| null` | null    | Set character minimum limit                      |
+| `pattern`     | `pattern`     | `string`         | ""      | Set regular expression for input validation      |
+| `placeholder` | `placeholder` | `string`         | ""      | Set placeholder text                             |
+| `readonly`    | `readonly`    | `boolean`        | false   | Set readonly state                               |
+| `transparent` | `transparent` | `boolean`        | false   | Disables all other states and border/background styles.<br />Use with advanced composite elements requiring e.g. multi selection in<br />combo-box when parent container handles element states. |
+| `value`       | `value`       | `string`         | 0       | Input's value                                    |
+| `warning`     | `warning`     | `boolean`        | false   | Set state to warning                             |
+
+## Methods
+
+| Method   | Type       | Description                  |
+|----------|------------|------------------------------|
+| `select` | `(): void` | Select the contents of input |
+
+## Events
+
+| Event           | Description                         |
+|-----------------|-------------------------------------|
+| `error-changed` | Dispatched when error state changes |
+| `value-changed` | Dispatched when value changes       |

package/lib/pill/custom-elements.json

@@ -32,13 +32,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": [
@@ -74,14 +74,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/pill/custom-elements.md

@@ -0,0 +1,22 @@
+# ef-pill
+
+A small button style component
+which is used to show one or multiple selected item.
+It is rarely used in the UI but inside other components to visualize multiple item selection item.
+
+## Properties
+
+| Property   | Attribute  | Type      | Default | Description                  |
+|------------|------------|-----------|---------|------------------------------|
+| `active`   | `active`   | `boolean` | false   | Add to pill for active state |
+| `clears`   | `clears`   | `boolean` | false   | Set pill to clearable        |
+| `disabled` | `disabled` | `boolean` | false   | Set disabled state           |
+| `readonly` | `readonly` | `boolean` | false   | Set readonly state           |
+| `toggles`  | `toggles`  | `boolean` | false   | Set pill to toggle mode      |
+| `value`    | `value`    | `string`  |         | Value of pill                |
+
+## Events
+
+| Event   | Description                                  |
+|---------|----------------------------------------------|
+| `clear` | Dispatched when click on cross button occurs |

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

@@ -0,0 +1,18 @@
+# ef-progress-bar
+
+Data visualisation component,
+showing a simple percentage bar.
+
+## Properties
+
+| Property    | Attribute   | Type     | Default | Description                                      |
+|-------------|-------------|----------|---------|--------------------------------------------------|
+| `alignment` | `alignment` | `string` | "left"  | The alignment of the bar.<br />The bar can either start from the `left` or `right`. |
+| `label`     | `label`     | `string` | ""      | The current label to be displayed next to the bar.<br />This is affixed to the end of the bar, so make sure to cater for this. |
+| `value`     | `value`     | `string` | "100"   | The current value of the bar.<br />This can range from `0-100` and<br />will be represented as a percentage bar |
+
+## Slots
+
+| Name    | Description                                      |
+|---------|--------------------------------------------------|
+| `label` | Overrides the label property and places custom content. Useful for modifying the color, or, adding icons. |