@refinitiv-ui/elements 5.6.0 → 5.7.0

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

@@ -0,0 +1,35 @@
+# ef-combo-box
+
+Combines a popup with a filterable selection list
+
+## Properties
+
+| Property            | Attribute             | Modifiers | Type                        | Default                      | Description                                      |
+|---------------------|-----------------------|-----------|-----------------------------|------------------------------|--------------------------------------------------|
+| `clears`            | `clears`              |           | `boolean`                   | false                        | Show clears button                               |
+| `data`              |                       |           | `ComboBoxData<T>`           |                              | Data array to be displayed                       |
+| `disabled`          | `disabled`            |           | `boolean`                   | false                        | Set disabled state                               |
+| `error`             | `error`               |           | `boolean`                   | false                        | Set state to error                               |
+| `filter`            |                       |           | `ComboBoxFilter<T> \| null` | "defaultFilter<T>(this)"     | Custom filter for static data<br />Set this to null when data is filtered externally, eg XHR |
+| `freeText`          | `free-text`           |           | `boolean`                   |                              | Allow to enter any value                         |
+| `label`             |                       | readonly  | `string`                    |                              | Label of selected value                          |
+| `multiple`          | `multiple`            |           | `boolean`                   |                              | Multiple selection mode                          |
+| `name`              | `name`                |           | `string`                    | ""                           | Set name of the element                          |
+| `opened`            | `opened`              |           | `boolean`                   | false                        | Track opened state of popup                      |
+| `placeholder`       | `placeholder`         |           | `string`                    | ""                           | Placeholder for input field                      |
+| `query`             |                       |           | `string \| null`            |                              | Query string applied to combo-box<br />Set via internal text-field input |
+| `queryDebounceRate` | `query-debounce-rate` |           | `number`                    |                              | Control query rate, defaults to 0                |
+| `readonly`          | `readonly`            |           | `boolean`                   | false                        | Set readonly state                               |
+| `renderer`          |                       |           | `ComboBoxRenderer`          | "new ComboBoxRenderer(this)" | Renderer used to render list item elements       |
+| `value`             | `value`               |           | `string`                    |                              | Returns the first selected item value.<br />Use `values` when multiple selection mode is enabled. |
+| `values`            |                       |           | `string[]`                  |                              | Returns a values collection of the currently<br />selected item values |
+| `warning`           | `warning`             |           | `boolean`                   | false                        | Set state to warning                             |
+
+## Events
+
+| Event                | Description                          |
+|----------------------|--------------------------------------|
+| `animationiteration` |                                      |
+| `opened-changed`     | Dispatched when opened state changes |
+| `query-changed`      | Dispatched when query changes        |
+| `value-changed`      | Dispatched when value changes        |

package/lib/counter/custom-elements.md

@@ -0,0 +1,11 @@
+# ef-counter
+
+Counter is an item count badge,
+support maximun display number and notation of large numbers.
+
+## Properties
+
+| Property | Attribute | Type     | Description                                      |
+|----------|-----------|----------|--------------------------------------------------|
+| `max`    | `max`     | `string` | Set maximum counter value.<br />This value will be displayed with suffix `+` if count value is larger than max. |
+| `value`  | `value`   | `string` | The value of counter as string number            |

package/lib/datetime-picker/custom-elements.json

@@ -126,13 +126,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": [
@@ -293,14 +293,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/datetime-picker/custom-elements.md

@@ -0,0 +1,49 @@
+# ef-datetime-picker
+
+Control to pick date and time
+
+## Properties
+
+| Property               | Attribute                | Modifiers | Type                             | Default | Description                                      |
+|------------------------|--------------------------|-----------|----------------------------------|---------|--------------------------------------------------|
+| `amPm`                 | `am-pm`                  |           | `boolean`                        | false   | Toggles 12hr time display                        |
+| `disabled`             | `disabled`               |           | `boolean`                        | false   | Set disabled state                               |
+| `duplex`               | `duplex`                 |           | `"" \| "consecutive" \| "split"` | null    | Display two calendar pickers.                    |
+| `error`                | `error`                  |           | `boolean`                        | false   | Set state to error                               |
+| `filter`               |                          |           | `DatetimePickerFilter \| null`   | null    | Custom filter, used for enabling/disabling certain dates |
+| `firstDayOfWeek`       | `first-day-of-week`      |           | `number \| undefined`            |         | Set the first day of the week.<br />0 - for Sunday, 6 - for Saturday |
+| `format`               | `format`                 |           | `string`                         |         | Set the datetime format<br />Based on dane-fns datetime formats |
+| `inputDisabled`        | `input-disabled`         |           | `boolean`                        | false   | Disable input part of the picker                 |
+| `inputTriggerDisabled` | `input-trigger-disabled` |           | `boolean`                        | false   | Only open picker panel when calendar icon is clicked.<br />Clicking on the input will no longer open the picker. |
+| `max`                  | `max`                    |           | `string`                         |         | Set maximum date                                 |
+| `min`                  | `min`                    |           | `string`                         |         | Set minimum date                                 |
+| `multiple`             |                          | readonly  | `boolean`                        |         |                                                  |
+| `opened`               | `opened`                 |           | `boolean`                        | false   | Toggles the opened state of the list             |
+| `placeholder`          | `placeholder`            |           | `string`                         |         | Placeholder to display when no value is set      |
+| `popupDisabled`        | `popup-disabled`         |           | `boolean`                        | false   | Disable the popup                                |
+| `range`                | `range`                  |           | `boolean`                        | false   | Set to switch to range select mode               |
+| `readonly`             | `readonly`               |           | `boolean`                        | false   | Set readonly state                               |
+| `showSeconds`          | `show-seconds`           |           | `boolean`                        | false   | Flag to show seconds time segment in display.<br />Seconds are automatically shown when `hh:mm:ss` time format is provided as a value. |
+| `timepicker`           | `timepicker`             |           | `boolean`                        | false   | Toggle to display the time picker                |
+| `value`                | `value`                  |           | `string`                         |         | Current date time value                          |
+| `values`               | `values`                 |           | `string[]`                       |         | Set multiple selected values                     |
+| `view`                 | `view`                   |           | `string`                         |         | Set the current calendar view.<br />Accepted format: 'yyyy-MM' |
+| `views`                |                          |           | `string[]`                       |         | Set the current calendar views for duplex mode<br />Accepted format: 'yyyy-MM' |
+| `warning`              | `warning`                |           | `boolean`                        | false   | Set state to warning                             |
+| `weekdaysOnly`         | `weekdays-only`          |           | `boolean`                        | false   | Only enable weekdays                             |
+| `weekendsOnly`         | `weekends-only`          |           | `boolean`                        | false   | Only enable weekends                             |
+
+## Methods
+
+| Method          | Type       | Description                                      |
+|-----------------|------------|--------------------------------------------------|
+| `validateInput` | `(): void` | Validates the input, marking the element as invalid if its value does not meet the validation criteria. |
+
+## Events
+
+| Event            | Description                                      |
+|------------------|--------------------------------------------------|
+| `error-changed`  | Dispatched when error state changes              |
+| `opened-changed` | Dispatched when when opened attribute changes internally |
+| `value-changed`  | Dispatched when value changes                    |
+| `view-changed`   | Dispatched when internal view changes            |

package/lib/dialog/custom-elements.json

@@ -20,7 +20,7 @@
           "name": "opened",
           "description": "Set dialog to open",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "x",
@@ -36,7 +36,7 @@
           "name": "no-cancel-on-esc-key",
           "description": "Prevents dialog to close when user presses ESC key",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "full-screen",
@@ -73,13 +73,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",

package/lib/dialog/custom-elements.md

@@ -0,0 +1,47 @@
+# ef-dialog
+
+Popup window, designed to contain and show any HTML content.
+It provides modal and dragging functionality,
+and also allows custom footers and control buttons to be used.
+
+## Attributes
+
+| Attribute              | Type      | Default | Description                                      |
+|------------------------|-----------|---------|--------------------------------------------------|
+| `full-screen`          | `boolean` |         | Set dialog to full screen                        |
+| `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                                      |
+|--------------------------|-------------|------------------|---------|--------------------------------------------------|
+| `draggable`              | `draggable` | `boolean`        | false   | Should the dialog be draggable                   |
+| `fullScreen`             |             | `boolean`        |         | Set dialog to full screen                        |
+| `header`                 | `header`    | `string \| null` | null    | Set Header/Title of the dialog                   |
+| `noCancelOnEscKey`       |             | `boolean`        | false   | Prevents dialog to close when user presses ESC key |
+| `noCancelOnOutsideClick` |             | `boolean`        |         | 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`. |
+| `x`                      | `x`         | `string`         |         | Set a specific x coordinate of dialog            |
+| `y`                      | `y`         | `string`         |         | Set a specific y coordinate of dialog            |
+
+## Methods
+
+| Method  | Type       | Description                                      |
+|---------|------------|--------------------------------------------------|
+| `refit` | `(): void` | Clear all cached values and fit the popup.<br />Use this function only if maxWidth, maxHeight, minWidth, minHeight, height, width are changed |
+
+## Events
+
+| Event            | Description                                      |
+|------------------|--------------------------------------------------|
+| `cancel`         | Fired when dialog is closed by user clicked a default Cancel button, clicked outside to close dialog or press ESC to close the dialog. Prevent default to stop default action |
+| `confirm`        | Fired when dialog is closed by user clicked a default OK button. Prevent default to stop default action |
+| `opened-changed` | Fired when value of `opened` property is changed. Prevent default to stop default action |
+
+## Slots
+
+| Name     | Description                                      |
+|----------|--------------------------------------------------|
+| `footer` | Hide default OK and Cancel button and replace dialog's footer with your custom content. |

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

@@ -67,19 +67,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": [
@@ -156,21 +156,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/email-field/custom-elements.md

@@ -0,0 +1,35 @@
+# ef-email-field
+
+A form control element for email
+
+## Properties
+
+| Property        | Attribute         | Type             | Default | Description                                      |
+|-----------------|-------------------|------------------|---------|--------------------------------------------------|
+| `disabled`      | `disabled`        | `boolean`        | false   | Set disabled state                               |
+| `error`         | `error`           | `boolean`        | false   | Set state to error                               |
+| `icon`          | `icon`            | `string`         | ""      | Specify icon to display in input. Value can be icon name |
+| `iconHasAction` | `icon-has-action` | `boolean`        | false   | Specify when icon need to be clickable           |
+| `maxLength`     | `maxlength`       | `number \| null` | null    | Set character max limit                          |
+| `minLength`     | `minlength`       | `number \| null` | null    | Set character min limit                          |
+| `multiple`      | `multiple`        | `boolean`        | false   | Set to multiple mode, allows multiple emails in a single input |
+| `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              |
+| `icon-click`    | Dispatched only when element has icon-has-action attribute and icon is clicked |
+| `value-changed` | Dispatched when value changes                    |

package/lib/flag/custom-elements.md

@@ -0,0 +1,10 @@
+# ef-flag
+
+Provides a collection of flags.
+
+## Properties
+
+| Property | Attribute | Type             | Description                     |
+|----------|-----------|------------------|---------------------------------|
+| `flag`   | `flag`    | `string \| null` | Name of a known flag to render. |
+| `src`    | `src`     | `string \| null` | Src location of an svg flag.    |

package/lib/header/custom-elements.md

@@ -0,0 +1,18 @@
+# ef-header
+
+Use to identify and separate different sections of a page.
+Headers helps to organize the page layout content into
+a sensible hierarchy and improve the user experience.
+
+## Properties
+
+| Property | Attribute | Type                | Default | Description                  |
+|----------|-----------|---------------------|---------|------------------------------|
+| `level`  | `level`   | `"1" \| "2" \| "3"` | "2"     | Use level styling from theme |
+
+## Slots
+
+| Name    | Description                                      |
+|---------|--------------------------------------------------|
+| `left`  | Slot to add custom contents to the left side of header e.g. ef-icon, ef-checkbox |
+| `right` | Slot to add custom contents to the right side of header e.g. ef-icon, ef-checkbox |

package/lib/heatmap/custom-elements.md

@@ -0,0 +1,26 @@
+# ef-heatmap
+
+A graphical representation of data where the individual
+values contained in a matrix are represented as colors
+
+## Properties
+
+| Property          | Attribute      | Type                     | Default | Description                                      |
+|-------------------|----------------|--------------------------|---------|--------------------------------------------------|
+| `axisHidden`      | `axis-hidden`  | `boolean`                | false   | Hide all axes                                    |
+| `blend`           | `blend`        | `boolean`                | false   | Enable cell color blending                       |
+| `config`          | `config`       | `HeatmapConfig`          | null    | Heatmap configuration options.                   |
+| `labelHidden`     | `label-hidden` | `boolean`                | false   | Hide all labels in the cells                     |
+| `labelWidth`      | `label-width`  | `number`                 | 0       | Number of maximum label width that cell can paint in pixel.<br />e.g. label-width: 30px; cell label hides when text length reaches 30px. |
+| `maxPoint`        | `max-point`    | `number`                 | 1       | Maximum point of the cell coloring               |
+| `midPoint`        | `mid-point`    | `number`                 | 0       | Middle point of the cell coloring                |
+| `minPoint`        | `min-point`    | `number`                 | -1      | Minimum point of the cell coloring               |
+| `renderCallback`  |                | `HeatmapRenderCallback`  |         | Render callback function use for custom cell properties.<br />Accepts custom label, foreground and background color |
+| `saturation`      | `saturation`   | `number`                 | 0.4     | Cell minimum color saturation, value can be from 0 - 1 |
+| `tooltipCallback` |                | `HeatmapTooltipCallback` |         | A callback function that allows tooltip rendering on cell hover |
+
+## Methods
+
+| Method               | Type                | Description                                      |
+|----------------------|---------------------|--------------------------------------------------|
+| `getCellDataAtEvent` | `(event: any): any` | Returns data of interactive cell<br /><br />**event**: an event that occur while the user interacting with element |

package/lib/icon/custom-elements.md

@@ -0,0 +1,8 @@
+# ef-icon
+
+## Properties
+
+| Property | Attribute | Type             | Description                                      |
+|----------|-----------|------------------|--------------------------------------------------|
+| `icon`   | `icon`    | `string \| null` | Name of a known icon to render or URL of SVG icon. |
+| `src`    | `src`     | `string \| null` | Src location of an svg icon.                     |

package/lib/interactive-chart/custom-elements.md

@@ -0,0 +1,32 @@
+# ef-interactive-chart
+
+A charting component that allows you to create several use cases of financial chart.
+By lightweight-charts library.
+
+## Properties
+
+| Property             | Attribute              | Type                         | Default | Description                                      |
+|----------------------|------------------------|------------------------------|---------|--------------------------------------------------|
+| `config`             | `config`               | `InteractiveChartConfig`     | null    | Chart configurations for init chart              |
+| `disabledJumpButton` | `disabled-jump-button` | `boolean`                    | false   | Hide jump to latest data button                  |
+| `disabledLegend`     | `disabled-legend`      | `boolean`                    | false   | Hide legend                                      |
+| `legendStyle`        | `legend-style`         | `"vertical" \| "horizontal"` |         | Set legend style i.e. `horizontal`, `vertical`.<br />Default is `vertical`. |
+| `seriesList`         |                        | `object`                     | []      | Array of series instances in chart               |
+
+## Methods
+
+| Method   | Type         | Description                                    |
+|----------|--------------|------------------------------------------------|
+| `colors` | `(): object` | List of available chart colors from the theme. |
+
+## Events
+
+| Event         | Description                          |
+|---------------|--------------------------------------|
+| `initialized` | Dispatched when chart is initialized |
+
+## Slots
+
+| Name     | Description                                 |
+|----------|---------------------------------------------|
+| `legend` | Slot to use for implementing custom legend. |

package/lib/item/custom-elements.json

@@ -23,8 +23,7 @@
         {
           "name": "selected",
           "description": "Indicates that the item is selected",
-          "type": "boolean",
-          "default": "false"
+          "type": "boolean"
         },
         {
           "name": "multiple",
@@ -52,13 +51,13 @@
           "name": "value",
           "description": "The content of this attribute represents the value of the item.",
           "type": "string",
-          "default": "\"\""
+          "default": "0"
         },
         {
           "name": "disabled",
           "description": "Set disabled state.",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "properties": [
@@ -84,8 +83,7 @@
           "name": "selected",
           "attribute": "selected",
           "description": "Indicates that the item is selected",
-          "type": "boolean",
-          "default": "false"
+          "type": "boolean"
         },
         {
           "name": "multiple",
@@ -128,14 +126,14 @@
           "attribute": "value",
           "description": "The content of this attribute represents the value of the item.",
           "type": "string",
-          "default": "\"\""
+          "default": "0"
         },
         {
           "name": "disabled",
           "attribute": "disabled",
           "description": "Set disabled state.",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "slots": [

package/lib/item/custom-elements.md

@@ -0,0 +1,29 @@
+# ef-item
+
+Used as a basic building block to compose complex custom elements,
+additionally it can be used by applications
+to create simple menus or navigation panels.
+
+## Properties
+
+| Property        | Attribute     | Modifiers | Type               | Default | Description                                      |
+|-----------------|---------------|-----------|--------------------|---------|--------------------------------------------------|
+| `disabled`      | `disabled`    |           | `boolean`          | false   | Set disabled state.                              |
+| `for`           | `for`         |           | `string \| null`   | null    | Specifies which element an item is bound to      |
+| `highlightable` |               | readonly  | `boolean`          |         | Return true if the item can be highlighted. True if not disabled and type is Text |
+| `highlighted`   | `highlighted` |           | `boolean`          | false   | Highlight the item                               |
+| `icon`          | `icon`        |           | `string \| null`   | null    | Set the icon name from the ef-icon list          |
+| `isTruncated`   |               | readonly  | `boolean`          |         | Getter returning if the label is truncated       |
+| `label`         | `label`       |           | `string \| null`   | null    | The text for the label indicating the meaning of the item.<br />By having both `label` and content, `label` always takes priority |
+| `multiple`      | `multiple`    |           | `boolean`          | false   | Is the item part of a multiple selection         |
+| `selected`      | `selected`    |           | `boolean`          |         | Indicates that the item is selected              |
+| `subLabel`      | `sub-label`   |           | `string \| null`   | null    | The`subLabel` property represents the text beneath the label. |
+| `type`          | `type`        |           | `ItemType \| null` | null    | If defined value can be `text`, `header` or `divider` |
+| `value`         | `value`       |           | `string`           | 0       | The content of this attribute represents the value of the item. |
+
+## Slots
+
+| Name    | Description                                      |
+|---------|--------------------------------------------------|
+| `left`  | Used to render the content on the left of the label. |
+| `right` | Used to render the content on the right of the label. |

package/lib/item/index.d.ts

@@ -44,10 +44,18 @@ export declare class Item extends ControlElement {
      * Set the icon name from the ef-icon list
      */
     icon: string | null;
+    private _selected;
     /**
      * Indicates that the item is selected
+     * @param value selected value
      */
-    selected: boolean;
+    set selected(value: boolean);
+    get selected(): boolean;
+    /**
+     * Aria indicating current select state
+     * @ignore
+     */
+    ariaSelected: string;
     /**
      * Is the item part of a multiple selection
      */

package/lib/item/index.js

@@ -43,10 +43,12 @@ let Item = class Item extends ControlElement {
          * Set the icon name from the ef-icon list
          */
         this.icon = null;
+        this._selected = false;
         /**
-         * Indicates that the item is selected
+         * Aria indicating current select state
+         * @ignore
          */
-        this.selected = false;
+        this.ariaSelected = 'false';
         /**
          * Is the item part of a multiple selection
          */
@@ -112,6 +114,21 @@ let Item = class Item extends ControlElement {
       }
     `;
     }
+    /**
+     * Indicates that the item is selected
+     * @param value selected value
+     */
+    set selected(value) {
+        const oldValue = this._selected;
+        if (oldValue !== value) {
+            this._selected = value;
+            this.ariaSelected = String(value);
+            void this.requestUpdate('selected', oldValue);
+        }
+    }
+    get selected() {
+        return this._selected;
+    }
     /**
      * @param node that should be checked
      * @returns whether node can be ignored.
@@ -227,7 +244,10 @@ __decorate([
 ], Item.prototype, "icon", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], Item.prototype, "selected", void 0);
+], Item.prototype, "selected", null);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'aria-selected' })
+], Item.prototype, "ariaSelected", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], Item.prototype, "multiple", void 0);

package/lib/label/custom-elements.md

@@ -0,0 +1,11 @@
+# ef-label
+
+Displays a text with alternative truncation
+
+## Properties
+
+| Property    | Attribute    | Type      | Default | Description                                 |
+|-------------|--------------|-----------|---------|---------------------------------------------|
+| `error`     | `error`      | `boolean` | false   | Set state to error                          |
+| `lineClamp` | `line-clamp` | `number`  | 0       | Limit the number of lines before truncating |
+| `warning`   | `warning`    | `boolean` | false   | Set state to warning                        |

package/lib/layout/custom-elements.md

@@ -0,0 +1,26 @@
+# ef-layout
+
+Layout component for creating responsive applications and components
+
+## Properties
+
+| Property     | Attribute    | Type             | Default | Description                                      |
+|--------------|--------------|------------------|---------|--------------------------------------------------|
+| `basis`      | `basis`      | `string \| null` | null    | Sets the rough size of the element based on other siblings and content.<br />Value could be pixel, percents or auto. |
+| `container`  | `container`  | `boolean`        | false   | Tells the element to display as a container,<br />displaying children in a vertical nowrap layout. |
+| `debug`      | `debug`      | `boolean`        | false   | Displays debug lines.                            |
+| `flex`       | `flex`       | `boolean`        | false   | Tells the element to display flex,<br />displaying children in a row wrap layout. |
+| `maxHeight`  | `max-height` | `string \| null` | null    | Prevents the height from expanding past a certain point.<br />Value could be pixel, percents or _empty_. |
+| `maxWidth`   | `max-width`  | `string \| null` | null    | Prevents the width from expanding past a certain point.<br />Value could be pixel, percents or _empty_. |
+| `minHeight`  | `min-height` | `string \| null` | null    | Allows the height to shrink below its contents.<br />Also prevents the height from shrinking past a certain point.<br />Value could be pixel, percents or _empty_. |
+| `minWidth`   | `min-width`  | `string \| null` | null    | Allows the width to shrink below its contents.<br />Also prevents the width from shrinking past a certain point.<br />Value could be pixel, percents or _empty_. |
+| `noflex`     | `noflex`     | `boolean`        | false   | Prevents the element from being flexible,<br />when inside of another flex layout. |
+| `nowrap`     | `nowrap`     | `boolean`        | false   | Prevents wrapping flex items,<br />when the parent isn't a container. |
+| `scrollable` | `scrollable` | `boolean`        | false   | Makes the element a scrollable viewport.         |
+| `size`       | `size`       | `string \| null` | null    | Sets the fixed size of the element.<br />Value could be pixel, percents or auto. |
+
+## Events
+
+| Event    | Description                            |
+|----------|----------------------------------------|
+| `resize` | Fired when the element's size changes. |

package/lib/led-gauge/custom-elements.md

@@ -0,0 +1,17 @@
+# ef-led-gauge
+
+A component used to show data in a LED-like
+horizontal bar visualization.
+
+## Properties
+
+| Property       | Attribute       | Type             | Default  | Description                                      |
+|----------------|-----------------|------------------|----------|--------------------------------------------------|
+| `bottomLabel`  | `bottom-label`  | `string`         | ""       | Label to be displayed in the bottom legend       |
+| `bottomValue`  | `bottom-value`  | `number \| null` | null     | Value of bar for bottom legend position<br />Value can be -100 to 100 |
+| `neutralColor` | `neutral-color` | `boolean`        | "false"  | Turn off background color and use grey           |
+| `range`        | `range`         | `object`         | []       | Value of range. eg [-20, 70]                     |
+| `rangeLabel`   | `range-label`   | `string`         | ""       | Label to be displayed in the bottom legend<br />when a range is displayed<br />and no bottom text is already set. |
+| `topLabel`     | `top-label`     | `string`         | ""       | Label to be displayed in the top legend          |
+| `topValue`     | `top-value`     | `number \| null` | null     | Value of bar for top legend position<br />Value can be -100 to 100 |
+| `zero`         | `zero`          | `string`         | "center" | Sets the zero scale position. [center, left, right] |