@refinitiv-ui/elements 5.5.0 → 5.8.1

package/lib/item/index.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 { ControlElement, css, customElement, html, property, query } from '@refinitiv-ui/core';
-import '../icon';
-import '../checkbox';
-import { VERSION } from '../';
+import { __decorate } from "tslib";
+import { ControlElement, css, html } 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 '../icon/index.js';
+import '../checkbox/index.js';
 export * from './helpers/types';
 const isAllWhitespaceTextNode = (node) => {
     var _a;
@@ -20,7 +18,7 @@ const isAllWhitespaceTextNode = (node) => {
  * to create simple menus or navigation panels.
  *
  * @attr {string} value - The content of this attribute represents the value of the item.
- * @prop {string} [value=] - The content of this attribute represents the value of the item.
+ * @prop {string} [value=""] - The content of this attribute represents the value of the item.
  *
  * @attr {boolean} disabled - Set disabled state.
  * @prop {boolean} [disabled=false] - Set disabled state.
@@ -45,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
          */
@@ -77,7 +77,7 @@ let Item = class Item extends ControlElement {
         this.checkSlotChildren = (event) => {
             const slot = event.target;
             this.isSlotEmpty = !slot.assignedNodes().filter(node => !this.isIgnorable(node)).length;
-            void this.requestUpdate();
+            this.requestUpdate();
         };
     }
     /**
@@ -88,8 +88,9 @@ let Item = class Item extends ControlElement {
         return VERSION;
     }
     /**
-     * @returns `CSSResult` that will be used to style the host,
+     * `CSSResultGroup` that will be used to style the host,
      * slotted children and the internal template of the element.
+     * @returns CSS template
      */
     static get styles() {
         return css `
@@ -113,6 +114,22 @@ let Item = class Item extends ControlElement {
       }
     `;
     }
+    /**
+     * Indicates that the item is selected
+     * @param value selected value
+     * @default false
+     */
+    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.
@@ -228,7 +245,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/label/index.d.ts

@@ -1,5 +1,5 @@
 import { JSXInterface } from '../jsx';
-import { BasicElement, TemplateResult, CSSResult } from '@refinitiv-ui/core';
+import { BasicElement, TemplateResult, CSSResultGroup } from '@refinitiv-ui/core';
 /**
  * Displays a text with alternative truncation
  */
@@ -10,12 +10,12 @@ export declare class Label extends BasicElement {
      */
     static get version(): string;
     /**
-     * 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.
      * @returns CSS template
      */
-    static get styles(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     /**
      * Limit the number of lines before truncating
      */

package/lib/label/index.js

@@ -1,12 +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, customElement, property, styleMap } from '@refinitiv-ui/core';
-import { VERSION } from '../';
-import { addTooltipCondition, removeTooltipCondition } from '../tooltip';
+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 { styleMap } from '@refinitiv-ui/core/lib/directives/style-map.js';
+import { VERSION } from '../version.js';
+import { isIE } from '@refinitiv-ui/utils/lib/browser.js';
+import { addTooltipCondition, removeTooltipCondition } from '../tooltip/index.js';
 /**
  * Configuration object
  * for mutations observers
@@ -20,16 +19,11 @@ const observerOptions = {
  * Reusable SPACE
  */
 const _ = ' ';
-/**
- * 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);
 /**
  * Determines if the browser is legacy or modern.
  */
 /* istanbul ignore next */
-const browserType = isIE() ? 'legacy' : 'modern';
+const browserType = isIE ? 'legacy' : 'modern';
 /**
  * Displays a text with alternative truncation
  */
@@ -76,7 +70,7 @@ let Label = class Label 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.
      * @returns CSS template
@@ -130,7 +124,7 @@ let Label = class Label extends BasicElement {
         super.connectedCallback();
         addTooltipCondition(this.tooltipCondition, this.tooltipRenderer);
         this.mutationObserver.observe(this, observerOptions);
-        !isIE() && this.recalculate(); // In IE the mutation will trigger
+        !isIE && this.recalculate(); // In IE the mutation will trigger
     }
     /**
      * @override
@@ -165,7 +159,7 @@ let Label = class Label extends BasicElement {
         this.chunks = raw.split(_).map(chunk => chunk.trim()).filter(chunk => chunk);
         const newValue = this.text;
         if (oldValue !== newValue) {
-            void this.requestUpdate('text', oldValue);
+            this.requestUpdate('text', oldValue);
         }
     }
     /**
@@ -204,8 +198,6 @@ let Label = class Label extends BasicElement {
      */
     get clampTemplate() {
         const styles = {
-            maxHeight: '',
-            whiteSpace: '',
             lineClamp: `${this.lineClamp}`,
             '-webkit-line-clamp': `${this.lineClamp}`
         };

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/layout/index.d.ts

@@ -1,5 +1,5 @@
 import { JSXInterface } from '../jsx';
-import { ResponsiveElement, TemplateResult, CSSResult, PropertyValues } from '@refinitiv-ui/core';
+import { ResponsiveElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
 /**
  * Layout component for creating responsive applications and components
  * @fires resize - Fired when the element's size changes.
@@ -11,12 +11,12 @@ export declare class Layout extends ResponsiveElement {
      */
     static get version(): string;
     /**
-   * 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;
     /**
      * Displays debug lines.
      * @type {boolean}

package/lib/layout/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 { ResponsiveElement, html, css, customElement, property } from '@refinitiv-ui/core';
-import { VERSION } from '../';
+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';
 /**
  * Layout component for creating responsive applications and components
  * @fires resize - Fired when the element's size changes.
@@ -83,7 +80,7 @@ let Layout = class Layout extends ResponsiveElement {
         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

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

@@ -18,7 +18,7 @@
         {
           "name": "range",
           "description": "Value of range. eg [-20, 70]",
-          "type": "object",
+          "type": "number[]",
           "default": "[]"
         },
         {
@@ -43,7 +43,7 @@
           "name": "neutral-color",
           "description": "Turn off background color and use grey",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "zero",
@@ -69,7 +69,7 @@
           "name": "range",
           "attribute": "range",
           "description": "Value of range. eg [-20, 70]",
-          "type": "object",
+          "type": "number[]",
           "default": "[]"
         },
         {
@@ -98,7 +98,7 @@
           "attribute": "neutral-color",
           "description": "Turn off background color and use grey",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "zero",

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`         | `number[]`       | []       | 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] |

package/lib/led-gauge/index.d.ts

@@ -1,6 +1,6 @@
 import { JSXInterface } from '../jsx';
-import { BasicElement, TemplateResult, CSSResult, PropertyValues } from '@refinitiv-ui/core';
-import '../canvas';
+import { BasicElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
+import '../canvas/index.js';
 /**
  * A component used to show data in a LED-like
  * horizontal bar visualization.
@@ -14,12 +14,12 @@ export declare class LedGauge extends BasicElement {
     private _zero;
     constructor();
     /**
-     * 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;
+    static get styles(): CSSResultGroup;
     /**
      * Value of bar for top legend position
      * Value can be -100 to 100
@@ -32,6 +32,7 @@ export declare class LedGauge extends BasicElement {
     bottomValue: number | null;
     /**
      * Value of range. eg [-20, 70]
+     * @type {number[]}
      */
     range: number[];
     /**

package/lib/led-gauge/index.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 { BasicElement, html, css, customElement, property } from '@refinitiv-ui/core';
-import { VERSION } from '../';
-import '../canvas';
+import { __decorate } from "tslib";
+import { BasicElement, html, css } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { VERSION } from '../version.js';
+import '../canvas/index.js';
 const ZERO_MAP = {
     LEFT: 'left',
     CENTER: 'center',
@@ -33,6 +30,7 @@ let LedGauge = class LedGauge extends BasicElement {
         this.bottomValue = null;
         /**
          * Value of range. eg [-20, 70]
+         * @type {number[]}
          */
         this.range = [];
         /**
@@ -64,7 +62,7 @@ let LedGauge = class LedGauge 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
@@ -139,7 +137,7 @@ let LedGauge = class LedGauge extends BasicElement {
         else {
             this._zero = ZERO_MAP.CENTER;
         }
-        void this.requestUpdate('zero', oldValue);
+        this.requestUpdate('zero', oldValue);
     }
     get _shadowRoot() {
         if (!this.shadowRoot) {

package/lib/list/custom-elements.json

@@ -20,12 +20,13 @@
         {
           "name": "value",
           "description": "Returns the first selected item value.\nUse `values` when multiple selection mode is enabled.",
-          "type": "string"
+          "type": "string",
+          "default": "\"\""
         }
       ],
       "properties": [
         {
-          "name": "delegatesFocus",
+          "name": "delegatesFocus (readonly)",
           "description": "Element focus delegation.\nSet to `false` and relies on native focusing.",
           "type": "false",
           "default": "false"
@@ -59,12 +60,14 @@
           "name": "value",
           "attribute": "value",
           "description": "Returns the first selected item value.\nUse `values` when multiple selection mode is enabled.",
-          "type": "string"
+          "type": "string",
+          "default": "\"\""
         },
         {
           "name": "values",
           "description": "Returns a values collection of the currently\nselected item values",
-          "type": "object"
+          "type": "string[]",
+          "default": "[]"
         }
       ],
       "events": [
@@ -91,7 +94,17 @@
         },
         {
           "name": "down",
-          "description": "Navigate up through the list items",
+          "description": "Navigate down through the list items",
+          "params": []
+        },
+        {
+          "name": "first",
+          "description": "Navigate to first focusable item of the list",
+          "params": []
+        },
+        {
+          "name": "last",
+          "description": "Navigate to first focusable item of the list",
           "params": []
         },
         {

package/lib/list/custom-elements.md

@@ -0,0 +1,32 @@
+# ef-list
+
+Provides listing and immutable selection
+
+## Properties
+
+| Property                    | Attribute   | Type           | Default                  | Description                                      |
+|-----------------------------|-------------|----------------|--------------------------|--------------------------------------------------|
+| `data`                      |             | `ListData`     | null                     | 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`                    |             | `string[]`     | []                       | Returns a values collection of the currently<br />selected item values |
+
+## Methods
+
+| Method         | Type                    | Description                                      |
+|----------------|-------------------------|--------------------------------------------------|
+| `down`         | `(): void`              | Navigate down through the list items             |
+| `first`        | `(): void`              | Navigate to first focusable item of the list     |
+| `last`         | `(): void`              | Navigate to first focusable item of the list     |
+| `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/list/helpers/list-renderer.d.ts

@@ -1,5 +1,5 @@
-import '../../item';
-import { Renderer } from '../renderer';
+import '../../item/index.js';
+import { Renderer } from '../renderer.js';
 /**
  * Renders list items as `ef-item` elements.
  * This is the default renderer for lists.

package/lib/list/helpers/list-renderer.js

@@ -1,5 +1,5 @@
-import '../../item';
-import { Renderer } from '../renderer';
+import '../../item/index.js';
+import { Renderer } from '../renderer.js';
 /**
  * Renders list items as `ef-item` elements.
  * This is the default renderer for lists.
@@ -28,6 +28,8 @@ export class ListRenderer extends Renderer {
             el.hidden = composer.getItemPropertyValue(item, 'hidden') === true;
             el.type = composer.getItemPropertyValue(item, 'type');
             el.multiple = !!context && context.multiple === true;
+            const itemRole = el.type === 'text' || !el.type ? 'option' : 'presentation';
+            el.setAttribute('role', itemRole);
             tooltip ? el.setAttribute('title', tooltip) : el.removeAttribute('title');
             return el;
         });

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

@@ -1,3 +1,3 @@
-import { CollectionComposer, DataItem } from '@refinitiv-ui/utils';
-import { ItemData } from '../../item';
+import type { CollectionComposer, DataItem } from '@refinitiv-ui/utils/lib/collection.js';
+import type { ItemData } from '../../item';
 export declare type ListData<T extends DataItem = ItemData> = T[] | CollectionComposer<T> | null;

package/lib/list/index.d.ts

@@ -1,11 +1,12 @@
 import { JSXInterface } from '../jsx';
-import { ControlElement, CSSResult, PropertyValues, TapEvent, TemplateResult } from '@refinitiv-ui/core';
-import { CollectionComposer, DataItem } from '@refinitiv-ui/utils';
-import '../item';
-import { ItemData } from '../item';
-import { ListData } from './helpers/types';
-import { ListRenderer } from './helpers/list-renderer';
-export { ListData, ListRenderer };
+import { ControlElement, CSSResultGroup, PropertyValues, TapEvent, TemplateResult } from '@refinitiv-ui/core';
+import { CollectionComposer, DataItem } from '@refinitiv-ui/utils/lib/collection.js';
+import type { ItemData } from '../item';
+import type { ListData } from './helpers/types';
+import { ListRenderer } from './helpers/list-renderer.js';
+import '../item/index.js';
+export type { ListData };
+export { ListRenderer };
 /**
  * Key direction
  */
@@ -23,6 +24,7 @@ export declare class List<T extends DataItem = ItemData> extends ControlElement
      * @returns version number
      */
     static get version(): string;
+    protected readonly defaultRole: string | null;
     /**
      * Used to timestamp renders.
      * This enables diff checking against item updates,
@@ -71,6 +73,7 @@ export declare class List<T extends DataItem = ItemData> extends ControlElement
     /**
      * The data object, used to render the list.
      * @type {ListData}
+     * @default null
      */
     get data(): ListData<T>;
     set data(value: ListData<T>);
@@ -78,12 +81,15 @@ export declare class List<T extends DataItem = ItemData> extends ControlElement
     /**
      * Returns the first selected item value.
      * Use `values` when multiple selection mode is enabled.
+     * @default -
      */
     get value(): string;
     set value(value: string);
     /**
      * Returns a values collection of the currently
      * selected item values
+     * @type {string[]}
+     * @default []
      * @readonly
      */
     get values(): string[];
@@ -100,10 +106,20 @@ export declare class List<T extends DataItem = ItemData> extends ControlElement
      */
     up(): void;
     /**
-     * Navigate up through the list items
+     * Navigate down through the list items
      * @returns {void}
      */
     down(): void;
+    /**
+     * Navigate to first focusable item of the list
+     * @returns {void}
+     */
+    first(): void;
+    /**
+     * Navigate to first focusable item of the list
+     * @returns {void}
+     */
+    last(): void;
     /**
      * Proxy for querying the composer
      * @param engine composer querying engine
@@ -262,13 +278,14 @@ export declare class List<T extends DataItem = ItemData> extends ControlElement
     protected renderLightDOM(): void;
     protected firstUpdated(changeProperties: PropertyValues): void;
     protected update(changeProperties: PropertyValues): void;
+    protected updated(changedProperties: PropertyValues): 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.