@refinitiv-ui/elements 5.5.0 → 5.8.1

package/lib/list/index.js

@@ -1,14 +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, WarningNotice } from '@refinitiv-ui/core';
-import { CollectionComposer } from '@refinitiv-ui/utils';
-import '../item';
-import { ListRenderer } from './helpers/list-renderer';
-import { VERSION } from '../';
+import { __decorate } from "tslib";
+import { ControlElement, css, html, WarningNotice } 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 { CollectionComposer } from '@refinitiv-ui/utils/lib/collection.js';
+import { ListRenderer } from './helpers/list-renderer.js';
+import '../item/index.js';
 export { ListRenderer };
 /**
  * Key direction
@@ -26,6 +23,7 @@ const valueFormatWarning = new WarningNotice('The specified \'values\' format do
 let List = class List extends ControlElement {
     constructor() {
         super(...arguments);
+        this.defaultRole = 'listbox';
         /**
          * Used to timestamp renders.
          * This enables diff checking against item updates,
@@ -37,7 +35,7 @@ let List = class List extends ControlElement {
          * @returns Update promise.
          */
         this.modificationUpdate = () => {
-            void this.requestUpdate();
+            this.requestUpdate();
         };
         /**
          * Item map; used to link element nodes to data items.
@@ -85,6 +83,7 @@ let List = class List extends ControlElement {
     /**
      * The data object, used to render the list.
      * @type {ListData}
+     * @default null
      */
     get data() {
         return this._data;
@@ -108,11 +107,12 @@ let List = class List extends ControlElement {
         );
         this.clearMaps();
         this._data = value;
-        void this.requestUpdate('data', oldValue);
+        this.requestUpdate('data', oldValue);
     }
     /**
      * Returns the first selected item value.
      * Use `values` when multiple selection mode is enabled.
+     * @default -
      */
     get value() {
         return this.values[0] || '';
@@ -125,12 +125,14 @@ let List = class List extends ControlElement {
             if (item) {
                 this.composer.setItemPropertyValue(item, 'selected', true);
             }
-            void this.requestUpdate('value', oldValue);
+            this.requestUpdate('value', oldValue);
         }
     }
     /**
      * Returns a values collection of the currently
      * selected item values
+     * @type {string[]}
+     * @default []
      * @readonly
      */
     get values() {
@@ -157,7 +159,7 @@ let List = class List extends ControlElement {
                     matches.forEach((match) => this.composer.setItemPropertyValue(match, 'selected', true));
                     return !this.multiple; // Only set the fist value if multiple is not enabled
                 });
-                void this.requestUpdate('values', oldValue);
+                this.requestUpdate('values', oldValue);
             }
         }
     }
@@ -192,12 +194,28 @@ let List = class List extends ControlElement {
         this.highlightItem(this.getNextHighlightItem(Direction.UP), true);
     }
     /**
-     * Navigate up through the list items
+     * Navigate down through the list items
      * @returns {void}
      */
     down() {
         this.highlightItem(this.getNextHighlightItem(Direction.DOWN), true);
     }
+    /**
+     * Navigate to first focusable item of the list
+     * @returns {void}
+     */
+    first() {
+        const firstItem = this.itemMap.get(this.tabbableElements[0]);
+        this.highlightItem(firstItem, true);
+    }
+    /**
+     * Navigate to first focusable item of the list
+     * @returns {void}
+     */
+    last() {
+        const lastItem = this.itemMap.get(this.tabbableElements[this.tabbableElements.length - 1]);
+        this.highlightItem(lastItem, true);
+    }
     /**
      * Proxy for querying the composer
      * @param engine composer querying engine
@@ -355,6 +373,12 @@ let List = class List extends ControlElement {
             case 'ArrowDown':
                 this.down();
                 break;
+            case 'Home':
+                this.first();
+                break;
+            case 'End':
+                this.last();
+                break;
             default:
                 return;
         }
@@ -439,7 +463,7 @@ let List = class List extends ControlElement {
     clearSelection() {
         this.queryItemsByPropertyValue('selected', true)
             .forEach((item) => this.composer.setItemPropertyValue(item, 'selected', false));
-        void this.requestUpdate();
+        this.requestUpdate();
     }
     /**
      * Queries and returns all renderable items.
@@ -525,15 +549,14 @@ let List = class List extends ControlElement {
         const currentChildren = Array.from(this.children);
         const recyclableElements = this.calculateRecyclableElements(renderItems);
         const renderChildren = renderItems.map((item) => this.createListItem(item, recyclableElements));
-        const deletions = currentChildren.filter(item => !renderChildren.includes(item));
-        deletions.forEach(item => this.removeChild(item));
-        renderChildren.forEach(item => {
-            const index = renderChildren.indexOf(item);
+        const deletions = currentChildren.filter(element => !renderChildren.includes(element));
+        deletions.forEach(element => this.removeChild(element));
+        renderChildren.forEach((element, index) => {
             if (this.children.length === index) {
-                this.appendChild(item);
+                this.appendChild(element);
             }
-            else {
-                this.insertBefore(item, this.children[index]);
+            else if (element !== this.children[index]) {
+                this.insertBefore(element, this.children[index]);
             }
         });
     }
@@ -552,8 +575,14 @@ let List = class List extends ControlElement {
         }
         return super.update(changeProperties);
     }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('multiple')) {
+            this.setAttribute('aria-multiselectable', this.multiple ? 'true' : 'false');
+        }
+    }
     /**
-     * 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/list/renderer.d.ts

@@ -1,5 +1,5 @@
-import { ExtensibleFunction } from './extensible-function';
-import { DataItem, CollectionComposer } from '@refinitiv-ui/utils';
+import { ExtensibleFunction } from './extensible-function.js';
+import type { DataItem, CollectionComposer } from '@refinitiv-ui/utils/lib/collection.js';
 /**
  * Render function interface
  * TODO: Move this to @refinitiv-ui/utils

package/lib/list/renderer.js

@@ -1,4 +1,4 @@
-import { ExtensibleFunction } from './extensible-function';
+import { ExtensibleFunction } from './extensible-function.js';
 /**
  * Renderer base class.
  * Used for creating renderers to render data items.

package/lib/loader/custom-elements.md

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

package/lib/loader/index.js

@@ -1,11 +1,7 @@
-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, customElement, html } from '@refinitiv-ui/core';
-import { VERSION } from '../';
+import { __decorate } from "tslib";
+import { BasicElement, html } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { VERSION } from '../version.js';
 /**
  * Global cache for loader template parts
  */

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

@@ -49,13 +49,13 @@
           "name": "readonly",
           "description": "Hides text field and clear icon from all pills",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "disabled",
           "description": "Set disabled state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "value",
@@ -66,9 +66,10 @@
       ],
       "properties": [
         {
-          "name": "values",
+          "name": "values (readonly)",
           "description": "Array of item's values ( readonly )",
-          "type": "string[]"
+          "type": "string[]",
+          "default": "[]"
         },
         {
           "name": "pillsOnly",
@@ -137,14 +138,14 @@
           "attribute": "readonly",
           "description": "Hides text field and clear icon from all pills",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "disabled",
           "attribute": "disabled",
           "description": "Set disabled state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "value",

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

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

package/lib/multi-input/helpers/types.d.ts

@@ -1,4 +1,4 @@
-import { CollectionItem } from '@refinitiv-ui/utils';
+import type { CollectionItem } from '@refinitiv-ui/utils/lib/collection.js';
 export declare type SelectionIndex = number | null;
 export declare type MultiInputEvents = 'item-added' | 'item-removed' | 'item-error';
 export declare type MultiInputData = MultiInputDataItem[];

package/lib/multi-input/index.d.ts

@@ -1,9 +1,9 @@
 import { JSXInterface } from '../jsx';
-import { ControlElement, CSSResult, MultiValue, TemplateResult, PropertyValues } from '@refinitiv-ui/core';
-import '../pill';
-import '../text-field';
-import { MultiInputData, MultiInputDataItem, SelectionIndex } from './helpers/types';
-export { MultiInputData, MultiInputDataItem };
+import { ControlElement, CSSResultGroup, MultiValue, TemplateResult, PropertyValues } from '@refinitiv-ui/core';
+import type { MultiInputData, MultiInputDataItem, SelectionIndex } from './helpers/types';
+import '../pill/index.js';
+import '../text-field/index.js';
+export type { MultiInputData, MultiInputDataItem };
 /**
  * An input control component to display a selection of pills
  *
@@ -42,16 +42,17 @@ export declare class MultiInput extends ControlElement implements MultiValue {
      */
     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;
     /**
      * Array of item's values ( readonly )
      * @readonly
      * @type {string[]}
+     * @default []
      */
     get values(): string[];
     /**
@@ -84,17 +85,20 @@ export declare class MultiInput extends ControlElement implements MultiValue {
     minLength: number | null;
     /**
      * Selection start index
+     * @default null
      */
     get selectionStart(): number | null;
     set selectionStart(index: SelectionIndex);
     /**
      * Selection end index
+     * @default null
      */
     get selectionEnd(): number | null;
     set selectionEnd(index: SelectionIndex);
     /**
      * The data object, used to render the list.
      * @type {MultiInputData | null}
+     * @default null
      */
     get data(): MultiInputData | null;
     set data(value: MultiInputData | null);

package/lib/multi-input/index.js

@@ -1,14 +1,13 @@
-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, ifDefined } from '@refinitiv-ui/core';
-import { CollectionComposer } from '@refinitiv-ui/utils';
-import '../pill';
-import '../text-field';
-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 { ifDefined } from '@refinitiv-ui/core/lib/directives/if-defined.js';
+import { VERSION } from '../version.js';
+import { CollectionComposer } from '@refinitiv-ui/utils/lib/collection.js';
+import '../pill/index.js';
+import '../text-field/index.js';
 const hasChanged = (newVal, oldVal) => oldVal === undefined ? false : newVal !== oldVal;
 /**
  * An input control component to display a selection of pills
@@ -109,7 +108,7 @@ let MultiInput = class MultiInput extends ControlElement {
         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
@@ -146,12 +145,14 @@ let MultiInput = class MultiInput extends ControlElement {
      * Array of item's values ( readonly )
      * @readonly
      * @type {string[]}
+     * @default []
      */
     get values() {
         return this.composer.queryItems(() => true).map(({ value }) => value);
     }
     /**
      * Selection start index
+     * @default null
      */
     get selectionStart() {
         if (this.search) {
@@ -166,6 +167,7 @@ let MultiInput = class MultiInput extends ControlElement {
     }
     /**
      * Selection end index
+     * @default null
      */
     get selectionEnd() {
         if (this.search) {
@@ -181,6 +183,7 @@ let MultiInput = class MultiInput extends ControlElement {
     /**
      * The data object, used to render the list.
      * @type {MultiInputData | null}
+     * @default null
      */
     get data() {
         return this._data;
@@ -197,7 +200,7 @@ let MultiInput = class MultiInput extends ControlElement {
             this.composer = new CollectionComposer([]);
         }
         this._data = value;
-        void this.requestUpdate('data', oldValue);
+        this.requestUpdate('data', oldValue);
     }
     /**
      * Removes the item by the value and returns array of removed items
@@ -255,8 +258,7 @@ let MultiInput = class MultiInput extends ControlElement {
         }
         if (process) {
             this.composer.removeItem(item);
-            void this.requestUpdate();
-            this.focus(); /* keep focus on multi-input */
+            this.requestUpdate();
             return item;
         }
         return null;
@@ -289,7 +291,7 @@ let MultiInput = class MultiInput extends ControlElement {
         }
         if (process) {
             this.composer.addItem(item);
-            void this.requestUpdate();
+            this.requestUpdate();
             return item;
         }
         return null;
@@ -332,7 +334,7 @@ let MultiInput = class MultiInput extends ControlElement {
         }
         if (oldValue !== value) {
             this.oldValue = value;
-            void this.requestUpdate('value', oldValue);
+            this.requestUpdate('value', oldValue);
         }
     }
     get value() {
@@ -449,6 +451,7 @@ let MultiInput = class MultiInput extends ControlElement {
         const items = this.composer.queryItems(() => true);
         const item = items[Number(index)];
         this.removeItem(item, true);
+        this.focus(); // keep focus on multi-input
     }
     /**
      * the wrapper for item events

package/lib/notification/custom-elements.md

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

package/lib/notification/elements/notification-tray.d.ts

@@ -1,7 +1,7 @@
 import { JSXInterface } from '../../jsx';
 import { ResponsiveElement, ElementSize, TemplateResult, PropertyValues } from '@refinitiv-ui/core';
-import { Notification } from './notification';
-import { TaskOptions } from '../helpers/types';
+import type { Notification } from './notification';
+import type { TaskOptions } from '../helpers/types';
 export declare class NotificationTray extends ResponsiveElement {
     /**
      * Element version number

package/lib/notification/elements/notification-tray.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, customElement, property } from '@refinitiv-ui/core';
-import { TimeoutTaskRunner } from '@refinitiv-ui/utils';
-import { VERSION } from '../../';
+import { __decorate } from "tslib";
+import { ResponsiveElement, 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 { VERSION } from '../../version.js';
+import { TimeoutTaskRunner } from '@refinitiv-ui/utils/lib/async.js';
 let NotificationTray = class NotificationTray extends ResponsiveElement {
     constructor() {
         super(...arguments);

package/lib/notification/elements/notification.d.ts

@@ -1,6 +1,6 @@
 import { JSXInterface } from '../../jsx';
-import { BasicElement, TemplateResult, CSSResult, PropertyValues } from '@refinitiv-ui/core';
-import '../../icon';
+import { BasicElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
+import '../../icon/index.js';
 /**
  * Used to show informative content when something happens in the application
  *
@@ -59,13 +59,13 @@ export declare class Notification extends BasicElement {
      */
     private onAnimationEnd;
     /**
-     * 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 {(CSSResult|CSSResult[])} CSS template
+     * @returns 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/notification/elements/notification.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 '../../icon';
+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 '../../icon/index.js';
 /**
  * Used to show informative content when something happens in the application
  *
@@ -98,11 +95,11 @@ let Notification = class Notification extends BasicElement {
         }
     }
     /**
-     * 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 {(CSSResult|CSSResult[])} CSS template
+     * @returns CSS template
      */
     static get styles() {
         return css `

package/lib/notification/helpers/status.d.ts

@@ -1,4 +1,4 @@
-import { Notification } from '../elements/notification';
+import type { Notification } from '../elements/notification';
 /**
  * Show an info notification (default)
  * @param message Message to show in the notification.

package/lib/notification/helpers/status.js

@@ -1,4 +1,4 @@
-import { NotificationTray } from '../elements/notification-tray';
+import { NotificationTray } from '../elements/notification-tray.js';
 // TODO: Add to utils?
 const DEV_ENV = (/^(localhost|127\.0\.0\.1)$/).test(location.hostname);
 const NotificationType = {

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

@@ -1,4 +1,4 @@
-import { Notification } from '../elements/notification';
+import type { Notification } from '../elements/notification';
 export declare type Task = {
     el: Notification;
     options: TaskOptions;

package/lib/notification/index.d.ts

@@ -1,2 +1,2 @@
-export * from './elements/notification';
-export { info, confirm, warn, error } from './helpers/status';
+export * from './elements/notification.js';
+export { info, confirm, warn, error } from './helpers/status.js';

package/lib/notification/index.js

@@ -1,2 +1,2 @@
-export * from './elements/notification';
-export { info, confirm, warn, error } from './helpers/status';
+export * from './elements/notification.js';
+export { info, confirm, warn, error } from './helpers/status.js';