@refinitiv-ui/elements 5.3.4 → 5.8.0

package/lib/toggle/custom-elements.json

@@ -27,13 +27,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": [
@@ -63,14 +63,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/toggle/custom-elements.md

@@ -0,0 +1,19 @@
+# ef-toggle
+
+Form control that can toggle between 2 states
+
+## Properties
+
+| Property       | Attribute       | Type      | Default | Description             |
+|----------------|-----------------|-----------|---------|-------------------------|
+| `checked`      | `checked`       | `boolean` | false   | Value of toggle         |
+| `checkedLabel` | `checked-label` | `string`  | ""      | Label of toggle checked |
+| `disabled`     | `disabled`      | `boolean` | false   | Set disabled state      |
+| `label`        | `label`         | `string`  | ""      | Label of toggle         |
+| `readonly`     | `readonly`      | `boolean` | false   | Set readonly state      |
+
+## Events
+
+| Event             | Description                                |
+|-------------------|--------------------------------------------|
+| `checked-changed` | Fired when the `checked` property changes. |

package/lib/toggle/index.d.ts

@@ -1,5 +1,5 @@
 import { JSXInterface } from '../jsx';
-import { ControlElement, TemplateResult, CSSResult, PropertyValues } from '@refinitiv-ui/core';
+import { ControlElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
 /**
  * Form control that can toggle between 2 states
  *
@@ -17,6 +17,7 @@ export declare class Toggle extends ControlElement {
      * @returns version number
      */
     static get version(): string;
+    protected readonly defaultRole: string | null;
     /**
      * Label of toggle checked
      */
@@ -25,17 +26,26 @@ export declare class Toggle extends ControlElement {
      * Label of toggle
      */
     label: string;
+    private _checked;
     /**
      * Value of toggle
+     * @param value new checked value
+     * @default false
      */
-    checked: boolean;
+    set checked(value: boolean);
+    get checked(): boolean;
     /**
-     * A `CSSResult` that will be used
+     * Aria indicating current state of toggle
+     * @ignore
+     */
+    ariaChecked: string;
+    /**
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @returns CSS template
      */
-    static get styles(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     /**
      * Invoked when the element is first updated. Implement to perform one time
      * work on the element after update.

package/lib/toggle/index.js

@@ -1,11 +1,8 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { ControlElement, html, css, customElement, property } from '@refinitiv-ui/core';
-import { VERSION } from '../';
+import { __decorate } from "tslib";
+import { ControlElement, html, css } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { VERSION } from '../version.js';
 /**
  * Return the attribute that converted from the property
  * Prevent empty string that reflected to attribute
@@ -30,6 +27,7 @@ const emptyStringToNull = function (value) {
 let Toggle = class Toggle extends ControlElement {
     constructor() {
         super(...arguments);
+        this.defaultRole = 'switch';
         /**
          * Label of toggle checked
          */
@@ -38,10 +36,12 @@ let Toggle = class Toggle extends ControlElement {
          * Label of toggle
          */
         this.label = '';
+        this._checked = false;
         /**
-         * Value of toggle
+         * Aria indicating current state of toggle
+         * @ignore
          */
-        this.checked = false;
+        this.ariaChecked = String(this.checked);
     }
     /**
      * Element version number
@@ -51,7 +51,23 @@ let Toggle = class Toggle extends ControlElement {
         return VERSION;
     }
     /**
-     * A `CSSResult` that will be used
+     * Value of toggle
+     * @param value new checked value
+     * @default false
+     */
+    set checked(value) {
+        const oldValue = this._checked;
+        if (oldValue !== value) {
+            this._checked = value;
+            this.ariaChecked = String(value);
+            void this.requestUpdate('checked', oldValue);
+        }
+    }
+    get checked() {
+        return this._checked;
+    }
+    /**
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @returns CSS template
@@ -125,7 +141,10 @@ __decorate([
 ], Toggle.prototype, "label", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], Toggle.prototype, "checked", void 0);
+], Toggle.prototype, "checked", null);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'aria-checked' })
+], Toggle.prototype, "ariaChecked", void 0);
 Toggle = __decorate([
     customElement('ef-toggle', {
         alias: 'coral-toggle'

package/lib/tooltip/custom-elements.md

@@ -0,0 +1,14 @@
+# ef-tooltip
+
+Tooltip displays extra information when the
+user hovers the pointer over an item.
+
+## Properties
+
+| Property          | Attribute          | Type                                             | Default | Description                                      |
+|-------------------|--------------------|--------------------------------------------------|---------|--------------------------------------------------|
+| `condition`       |                    | `TooltipCondition`                               |         | Provide a function to test against the target.<br />Return `true` if the target matches |
+| `position`        | `position`         | `"auto" \| "above" \| "right" \| "below" \| "left"` | "auto"  | The position of the tooltip. Use the following values:<br />`auto` (default) - display based on mouse enter coordinates<br />`above` - display above the element<br />`right` - display to the right of the element<br />`below` - display beneath the element<br />`left` - display to the left of the element |
+| `renderer`        |                    | `TooltipRenderer`                                |         | A renderer to define tooltip internal content.<br />Return undefined, `String`, `HTMLElement` or `DocumentFragment`.<br />If the content is not present, tooltip will not be displayed |
+| `selector`        | `selector`         | `string`                                         | ""      | CSS selector to match the tooltip                |
+| `transitionStyle` | `transition-style` | `TooltipTransitionStyle`                         | "fade"  | Set the transition style.<br />Value can be `fade`, `zoom`, `slide-down`, `slide-up`, `slide-right`,<br />`slide-left`, `slide-right-down`, `slide-right-up`, `slide-left-down`, `slide-left-up`, or null in case of no transition |

package/lib/tooltip/elements/title-tooltip.js

@@ -1,6 +1,6 @@
 import { matches } from '@refinitiv-ui/core';
-import { addTooltipCondition } from './tooltip-element';
-import { tooltipRenderer } from '../helpers/renderer';
+import { addTooltipCondition } from './tooltip-element.js';
+import { tooltipRenderer } from '../helpers/renderer.js';
 // Support title attribute
 Object.defineProperty(HTMLElement.prototype, 'title', {
     get: function () {

package/lib/tooltip/elements/tooltip-element.d.ts

@@ -1,5 +1,5 @@
 import type { Tooltip } from '../index';
-import { TooltipCondition, TooltipRenderer } from '../helpers/types';
+import type { TooltipCondition, TooltipRenderer } from '../helpers/types';
 /**
  * Add the new condition to the default tooltip
  * @param condition Condition to add

package/lib/tooltip/helpers/overflow-tooltip.d.ts

@@ -1,4 +1,4 @@
-import { TooltipRenderer } from './types';
+import type { TooltipRenderer } from './types';
 /**
  * Register the element to show a tooltip for overflow content
  * @param target Target element

package/lib/tooltip/helpers/overflow-tooltip.js

@@ -1,4 +1,4 @@
-import { addTooltipCondition } from '../elements/tooltip-element';
+import { addTooltipCondition } from '../elements/tooltip-element.js';
 const registry = new WeakMap();
 const overflowCondition = (target) => registry.has(target) && (target.scrollWidth - target.offsetWidth) > 1;
 const overflowRenderer = (target) => target.textContent;

package/lib/tooltip/helpers/renderer.d.ts

@@ -1,4 +1,4 @@
-import { TooltipRenderer } from './types';
+import type { TooltipRenderer } from './types';
 /**
  * A default renderer that renders `tooltip` attribute
  * @param target Target to check

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

@@ -1,4 +1,4 @@
-import { OverlayPosition } from '../../overlay';
+import type { OverlayPosition } from '../../overlay';
 export declare type TooltipCondition = (target: HTMLElement, paths: EventTarget[]) => boolean;
 export declare type TooltipRenderer = (target: HTMLElement) => undefined | null | string | HTMLElement | DocumentFragment;
 export declare type TooltipPosition = 'auto' | 'above' | 'right' | 'below' | 'left';

package/lib/tooltip/index.d.ts

@@ -1,10 +1,10 @@
 import { JSXInterface } from '../jsx';
-import { BasicElement, TemplateResult, CSSResult, PropertyValues } from '@refinitiv-ui/core';
-import '../overlay';
-import { OverlayTransitionStyle as TooltipTransitionStyle } from '../overlay';
-import './elements/title-tooltip';
-import { TooltipCondition, TooltipRenderer, TooltipPosition } from './helpers/types';
-import { register as registerOverflowTooltip } from './helpers/overflow-tooltip';
+import { BasicElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
+import '../overlay/index.js';
+import type { OverlayTransitionStyle as TooltipTransitionStyle } from '../overlay';
+import './elements/title-tooltip.js';
+import { TooltipCondition, TooltipRenderer, TooltipPosition } from './helpers/types.js';
+import { register as registerOverflowTooltip } from './helpers/overflow-tooltip.js';
 /**
  * Tooltip displays extra information when the
  * user hovers the pointer over an item.
@@ -23,12 +23,12 @@ declare class Tooltip extends BasicElement {
     private timerTimeout?;
     private contentNodes?;
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template
      */
-    static get styles(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     /**
      * True if an element is an iframe
      * @param relatedTarget Element to check
@@ -214,7 +214,7 @@ declare class Tooltip extends BasicElement {
      */
     private get opened();
 }
-export * from './elements/tooltip-element';
+export * from './elements/tooltip-element.js';
 export { registerOverflowTooltip, Tooltip, TooltipCondition, TooltipRenderer, TooltipPosition, TooltipTransitionStyle };
 
 declare global {

package/lib/tooltip/index.js

@@ -1,18 +1,16 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
 var Tooltip_1;
-import { BasicElement, html, css, customElement, property, query, matches } from '@refinitiv-ui/core';
-import { isSlotEmpty } from '@refinitiv-ui/utils';
-import '../overlay';
-import './elements/title-tooltip';
-import { register, deregister } from './managers/tooltip-manager';
-import { tooltipRenderer } from './helpers/renderer';
-import { register as registerOverflowTooltip } from './helpers/overflow-tooltip';
-import { VERSION } from '../';
+import { __decorate } from "tslib";
+import { BasicElement, html, css, matches } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { VERSION } from '../version.js';
+import { isSlotEmpty } from '@refinitiv-ui/utils/lib/is-slot-empty.js';
+import '../overlay/index.js';
+import './elements/title-tooltip.js';
+import { register, deregister } from './managers/tooltip-manager.js';
+import { tooltipRenderer } from './helpers/renderer.js';
+import { register as registerOverflowTooltip } from './helpers/overflow-tooltip.js';
 const TooltipPositionMap = {
     'auto': ['bottom-start', 'top-start'],
     'above': ['top-middle'],
@@ -108,7 +106,7 @@ let Tooltip = Tooltip_1 = class Tooltip extends BasicElement {
         return VERSION;
     }
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template
@@ -166,7 +164,7 @@ let Tooltip = Tooltip_1 = class Tooltip extends BasicElement {
         const oldX = this._x;
         if (oldX !== x) {
             this._x = x;
-            void this.requestUpdate('x', oldX);
+            this.requestUpdate('x', oldX);
         }
     }
     /**
@@ -177,7 +175,7 @@ let Tooltip = Tooltip_1 = class Tooltip extends BasicElement {
         const oldY = this._y;
         if (oldY !== y) {
             this._y = y;
-            void this.requestUpdate('y', oldY);
+            this.requestUpdate('y', oldY);
         }
     }
     /**
@@ -188,7 +186,7 @@ let Tooltip = Tooltip_1 = class Tooltip extends BasicElement {
         const oldPositionTarget = this._positionTarget;
         if (positionTarget !== oldPositionTarget) {
             this._positionTarget = positionTarget;
-            void this.requestUpdate('positionTarget', oldPositionTarget);
+            this.requestUpdate('positionTarget', oldPositionTarget);
         }
     }
     /**
@@ -200,7 +198,7 @@ let Tooltip = Tooltip_1 = class Tooltip extends BasicElement {
         const oldOpened = this._opened;
         if (oldOpened !== opened) {
             this._opened = opened;
-            void this.requestUpdate('opened', oldOpened);
+            this.requestUpdate('opened', oldOpened);
         }
     }
     connectedCallback() {
@@ -475,5 +473,5 @@ Tooltip = Tooltip_1 = __decorate([
         alias: 'coral-tooltip'
     })
 ], Tooltip);
-export * from './elements/tooltip-element';
+export * from './elements/tooltip-element.js';
 export { registerOverflowTooltip, Tooltip };

package/lib/tooltip/managers/tooltip-manager.d.ts

@@ -1,5 +1,5 @@
-import type { Tooltip } from '../index';
-import { DocumentCallbacks } from '../helpers/types';
+import type { Tooltip } from '../index.js';
+import type { DocumentCallbacks } from '../helpers/types';
 /**
  * Register the new tooltip
  * @param tooltip Tooltip

package/lib/tooltip/managers/tooltip-manager.js

@@ -1,9 +1,5 @@
-import { TimeoutTaskRunner } from '@refinitiv-ui/utils';
-/**
- * Helper to check if the browser is IE
- * @returns True if the browser is IE
- */
-const isIE = () => !!navigator.userAgent.match(/Trident/g) || !!navigator.userAgent.match(/MSIE/g);
+import { TimeoutTaskRunner } from '@refinitiv-ui/utils/lib/async.js';
+import { isIE } from '@refinitiv-ui/utils/lib/browser.js';
 /**
  * Tooltip manager is here to avoid setting multiple
  * events on document and do expensive pre-processing
@@ -96,7 +92,7 @@ class TooltipManager {
     register(tooltip, documentCallbacks) {
         if (!this.registry.size) {
             // IE11 does not support event options
-            const supportOptions = !isIE();
+            const supportOptions = !isIE;
             const eventOptions = supportOptions ? { passive: true } : undefined;
             document.addEventListener('mousemove', this.onMouseMove, eventOptions);
             document.addEventListener('mouseout', this.onMouseOut, eventOptions);

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

@@ -0,0 +1,18 @@
+# ef-tornado-chart
+
+A data visualization that helps to
+show the differences or similarities between values
+
+## Properties
+
+| Property    | Attribute   | Type             | Default | Description                     |
+|-------------|-------------|------------------|---------|---------------------------------|
+| `primary`   | `primary`   | `string \| null` | null    | Primary bar chart legend text   |
+| `secondary` | `secondary` | `string \| null` | null    | Secondary bar chart legend text |
+
+## Slots
+
+| Name     | Description                                      |
+|----------|--------------------------------------------------|
+| `footer` | Any HTML contents to display at chart footer section |
+| `header` | Any HTML contents to display at chart header section |

package/lib/tornado-chart/elements/tornado-chart.d.ts

@@ -1,6 +1,6 @@
 import { JSXInterface } from '../../jsx';
-import { ResponsiveElement, TemplateResult, CSSResult, ElementSize } from '@refinitiv-ui/core';
-import './tornado-item';
+import { ResponsiveElement, TemplateResult, CSSResultGroup, ElementSize } from '@refinitiv-ui/core';
+import './tornado-item.js';
 /**
  * A data visualization that helps to
  * show the differences or similarities between values
@@ -49,12 +49,12 @@ export declare class TornadoChart extends ResponsiveElement {
      */
     resizedCallback(size: ElementSize): void;
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template
      */
-    static get styles(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     /**
      * A `TemplateResult` that will be used
      * to render the updated internal template.

package/lib/tornado-chart/elements/tornado-chart.js

@@ -1,12 +1,9 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { ResponsiveElement, html, css, customElement, property } from '@refinitiv-ui/core';
-import { VERSION } from '../../';
-import './tornado-item';
+import { __decorate } from "tslib";
+import { ResponsiveElement, html, css } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { VERSION } from '../../version.js';
+import './tornado-item.js';
 /**
  * A data visualization that helps to
  * show the differences or similarities between values
@@ -47,7 +44,7 @@ let TornadoChart = class TornadoChart extends ResponsiveElement {
      */
     setLegendAlignment(responsive) {
         this.legendAlignment = responsive;
-        void this.requestUpdate();
+        this.requestUpdate();
     }
     /**
      * Set ef-tornado-item's alignment
@@ -75,7 +72,7 @@ let TornadoChart = class TornadoChart extends ResponsiveElement {
         }
     }
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template

package/lib/tornado-chart/elements/tornado-item.d.ts

@@ -1,7 +1,7 @@
 import { JSXInterface } from '../../jsx';
-import { BasicElement, TemplateResult, CSSResult } from '@refinitiv-ui/core';
-import '../../progress-bar';
-import '../../layout';
+import { BasicElement, TemplateResult, CSSResultGroup } from '@refinitiv-ui/core';
+import '../../progress-bar/index.js';
+import '../../layout/index.js';
 /**
  * A part of <ef-tornado-chart />,
  * consists mainly of primary, secondary ef-progress-bar and labels.
@@ -81,12 +81,12 @@ export declare class TornadoItem extends BasicElement {
      */
     private showHorizontalMode;
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template
      */
-    static get styles(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     /**
      * A `TemplateResult` that will be used
      * to render the updated internal template.

package/lib/tornado-chart/elements/tornado-item.js

@@ -1,13 +1,11 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { BasicElement, html, css, property, customElement, ifDefined } from '@refinitiv-ui/core';
-import '../../progress-bar';
-import '../../layout';
-import { VERSION } from '../../';
+import { __decorate } from "tslib";
+import { BasicElement, html, css } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { ifDefined } from '@refinitiv-ui/core/lib/directives/if-defined.js';
+import { VERSION } from '../../version.js';
+import '../../progress-bar/index.js';
+import '../../layout/index.js';
 /**
  * A part of <ef-tornado-chart />,
  * consists mainly of primary, secondary ef-progress-bar and labels.
@@ -98,7 +96,7 @@ let TornadoItem = class TornadoItem extends BasicElement {
         else {
             this.showHorizontalMode();
         }
-        void this.requestUpdate('vertical', previousValue);
+        this.requestUpdate('vertical', previousValue);
     }
     /**
      * Triggers vertical layout mode
@@ -125,7 +123,7 @@ let TornadoItem = class TornadoItem extends BasicElement {
         this.secondaryBarAlignment = 'left';
     }
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template

package/lib/tornado-chart/index.d.ts

@@ -1,2 +1,2 @@
-export { TornadoChart } from './elements/tornado-chart';
-export { TornadoItem } from './elements/tornado-item';
+export { TornadoChart } from './elements/tornado-chart.js';
+export { TornadoItem } from './elements/tornado-item.js';

package/lib/tornado-chart/index.js

@@ -1,2 +1,2 @@
-export { TornadoChart } from './elements/tornado-chart';
-export { TornadoItem } from './elements/tornado-item';
+export { TornadoChart } from './elements/tornado-chart.js';
+export { TornadoItem } from './elements/tornado-item.js';

package/lib/tree/custom-elements.json

@@ -17,11 +17,17 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "query",
+          "description": "Query string applied to tree",
+          "type": "string",
+          "default": "\"\""
+        },
         {
           "name": "stateless",
           "description": "Disable selections",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "properties": [
@@ -39,6 +45,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "query",
+          "attribute": "query",
+          "description": "Query string applied to tree",
+          "type": "string",
+          "default": "\"\""
+        },
         {
           "name": "renderer",
           "description": "Renderer used for generating tree items",
@@ -48,7 +61,8 @@
         {
           "name": "values",
           "description": "Selected items in tree",
-          "type": "string[]"
+          "type": "string[]",
+          "default": "[]"
         },
         {
           "name": "data",
@@ -60,7 +74,7 @@
           "attribute": "stateless",
           "description": "Disable selections",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "events": [

package/lib/tree/custom-elements.md

@@ -0,0 +1,32 @@
+# ef-tree
+
+Displays a tree structure
+to be used for menus and group selections
+
+## Properties
+
+| Property     | Attribute     | Type           | Default                  | Description                                      |
+|--------------|---------------|----------------|--------------------------|--------------------------------------------------|
+| `data`       |               | `TreeData<T>`  |                          | Data object to be used for creating tree         |
+| `multiple`   | `multiple`    | `boolean`      | false                    | Allows multiple items to be selected             |
+| `noRelation` | `no-relation` | `boolean`      | false                    | Breaks the relationship when multiple<br />selection mode is enabled |
+| `query`      | `query`       | `string`       | ""                       | Query string applied to tree                     |
+| `renderer`   |               | `TreeRenderer` | "new TreeRenderer(this)" | Renderer used for generating tree items          |
+| `stateless`  | `stateless`   | `boolean`      | false                    | Disable selections                               |
+| `values`     |               | `string[]`     | []                       | Selected items in tree                           |
+
+## Methods
+
+| Method        | Type       | Description                 |
+|---------------|------------|-----------------------------|
+| `checkAll`    | `(): void` | Checks all editable items   |
+| `collapseAll` | `(): void` | Collapses all groups        |
+| `expandAll`   | `(): void` | Expands all groups          |
+| `uncheckAll`  | `(): void` | Unchecks all editable items |
+
+## Events
+
+| Event              | Description                                      |
+|--------------------|--------------------------------------------------|
+| `expanded-changed` | Fired when an item's expanded state has changed. |
+| `value-changed`    | Fired when the users changed selection item.     |