@refinitiv-ui/elements 5.3.4 → 5.8.0

package/lib/color-dialog/index.d.ts

@@ -1,13 +1,13 @@
 import { JSXInterface } from '../jsx';
-import { TemplateResult, CSSResult, PropertyValues } from '@refinitiv-ui/core';
+import { TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
+import '../button/index.js';
+import '../number-field/index.js';
+import '../text-field/index.js';
+import { Dialog } from '../dialog/index.js';
+import './elements/color-palettes.js';
+import './elements/grayscale-palettes.js';
 import { Translate } from '@refinitiv-ui/translate';
-import '@refinitiv-ui/phrasebook/lib/locale/en/color-dialog';
-import '../button';
-import '../number-field';
-import '../text-field';
-import { Dialog } from '../dialog';
-import './elements/color-palettes';
-import './elements/grayscale-palettes';
+import '@refinitiv-ui/phrasebook/lib/locale/en/color-dialog.js';
 /**
  * Displays a colour picker dialog,
  * for selecting a predefined range of colours.
@@ -15,8 +15,8 @@ import './elements/grayscale-palettes';
  * @fires value-changed - Fired when the `value` property changes.
  * @fires opened-changed - Fired when the `opened` property changes.
  *
- * @attr {string|null} header - Set Header/Title of the color dialog
- * @prop {string|null} header - Set Header/Title of the color dialog
+ * @attr {string | null} header - Set Header/Title of the color dialog
+ * @prop {string | null} [header=null] - Set Header/Title of the color dialog
  *
  * @attr {boolean} [opened=false] - Set dialog to open
  * @prop {boolean} [opened=false] - Set dialog to open
@@ -24,14 +24,14 @@ import './elements/grayscale-palettes';
  * @attr {boolean} [no-cancel-on-esc-key=false] - Prevents dialog to close when user presses ESC key
  * @prop {boolean} [noCancelOnEscKey=false] - Prevents dialog to close when user presses ESC key
  *
- * @attr {string} x - Set a specific x coordinate of dialog
- * @prop {string} x - Set a specific x coordinate of dialog
+ * @attr {string | undefined} x - Set a specific x coordinate of dialog
+ * @prop {string | undefined} x - Set a specific x coordinate of dialog
  *
- * @attr {string} y - Set a specific y coordinate of dialog
- * @prop {string} y - Set a specific y coordinate of dialog
+ * @attr {string | undefined} y - Set a specific y coordinate of dialog
+ * @prop {string | undefined} y - Set a specific y coordinate of dialog
  *
- * @attr {string} position-target - Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.
- * @prop {string} positionTarget - Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.
+ * @attr {string | undefined} position-target - Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.
+ * @prop {string | undefined} positionTarget - Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.
  *
  * @prop {boolean} [noCancelOnOutsideClick=true] - Prevents dialog to close when user clicks outside the dialog.
  *
@@ -48,12 +48,12 @@ export declare class ColorDialog extends Dialog {
      */
     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 {CSSResult | CSSResult[]} CSS template
+     * @return CSS template
      */
-    static get styles(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     /**
      * speed up rendering by not populating content on page load
      */

package/lib/color-dialog/index.js

@@ -1,21 +1,21 @@
-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 { html, css, customElement, property, WarningNotice, styleMap, query } from '@refinitiv-ui/core';
+import { __decorate } from "tslib";
+import { html, css, 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 { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { styleMap } from '@refinitiv-ui/core/lib/directives/style-map.js';
+import { rgb } from '@refinitiv-ui/utils/lib/color.js';
+import { VERSION } from '../version.js';
+import { ValueModel } from './helpers/value-model.js';
+import { isHex, removeHashSign } from './helpers/color-helpers.js';
+import '../button/index.js';
+import '../number-field/index.js';
+import '../text-field/index.js';
+import { Dialog } from '../dialog/index.js';
+import './elements/color-palettes.js';
+import './elements/grayscale-palettes.js';
 import { translate } from '@refinitiv-ui/translate';
-import '@refinitiv-ui/phrasebook/lib/locale/en/color-dialog';
-import '../button';
-import '../number-field';
-import '../text-field';
-import { Dialog } from '../dialog';
-import './elements/color-palettes';
-import './elements/grayscale-palettes';
-import { ColorHelpers } from './helpers/color-helpers';
-import { ValueModel } from './helpers/value-model';
-import { VERSION } from '../';
+import '@refinitiv-ui/phrasebook/lib/locale/en/color-dialog.js';
 /**
  * Displays a colour picker dialog,
  * for selecting a predefined range of colours.
@@ -23,8 +23,8 @@ import { VERSION } from '../';
  * @fires value-changed - Fired when the `value` property changes.
  * @fires opened-changed - Fired when the `opened` property changes.
  *
- * @attr {string|null} header - Set Header/Title of the color dialog
- * @prop {string|null} header - Set Header/Title of the color dialog
+ * @attr {string | null} header - Set Header/Title of the color dialog
+ * @prop {string | null} [header=null] - Set Header/Title of the color dialog
  *
  * @attr {boolean} [opened=false] - Set dialog to open
  * @prop {boolean} [opened=false] - Set dialog to open
@@ -32,14 +32,14 @@ import { VERSION } from '../';
  * @attr {boolean} [no-cancel-on-esc-key=false] - Prevents dialog to close when user presses ESC key
  * @prop {boolean} [noCancelOnEscKey=false] - Prevents dialog to close when user presses ESC key
  *
- * @attr {string} x - Set a specific x coordinate of dialog
- * @prop {string} x - Set a specific x coordinate of dialog
+ * @attr {string | undefined} x - Set a specific x coordinate of dialog
+ * @prop {string | undefined} x - Set a specific x coordinate of dialog
  *
- * @attr {string} y - Set a specific y coordinate of dialog
- * @prop {string} y - Set a specific y coordinate of dialog
+ * @attr {string | undefined} y - Set a specific y coordinate of dialog
+ * @prop {string | undefined} y - Set a specific y coordinate of dialog
  *
- * @attr {string} position-target - Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.
- * @prop {string} positionTarget - Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.
+ * @attr {string | undefined} position-target - Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.
+ * @prop {string | undefined} positionTarget - Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.
  *
  * @prop {boolean} [noCancelOnOutsideClick=true] - Prevents dialog to close when user clicks outside the dialog.
  *
@@ -79,13 +79,14 @@ let ColorDialog = class ColorDialog extends Dialog {
         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 {CSSResult | CSSResult[]} CSS template
+     * @return CSS template
      */
     static get styles() {
-        return [...Dialog.styles,
+        return [
+            super.styles,
             css `
         :host {
           display: block;
@@ -96,7 +97,8 @@ let ColorDialog = class ColorDialog extends Dialog {
           var(--no-color-line-color, #ff0000) calc(50% + 1px),
           transparent calc(50% + 2px));
         }
-    `];
+    `
+        ];
     }
     /**
      * Value of selected color from color dialog will be written here as hex value
@@ -111,7 +113,7 @@ let ColorDialog = class ColorDialog extends Dialog {
             value = '';
         }
         this._value = value;
-        void this.requestUpdate('value', oldValue);
+        this.requestUpdate('value', oldValue);
     }
     get value() {
         return this._value;
@@ -130,7 +132,7 @@ let ColorDialog = class ColorDialog extends Dialog {
     }
     get hex() {
         const value = this.value;
-        return value ? ColorHelpers.removeHashSign(value) : '';
+        return value ? removeHashSign(value) : '';
     }
     /**
      * Red value from 0 to 255
@@ -139,10 +141,10 @@ let ColorDialog = class ColorDialog extends Dialog {
      */
     set red(red) {
         red = String(red);
-        this.value = this.isValidRGB(red) ? ColorHelpers.rgbToHex(red, this.green, this.blue) : '';
+        this.value = this.isValidRGB(red) ? rgb(Number(red), Number(this.green), Number(this.blue)).formatHex() : '';
     }
     get red() {
-        return this.hex ? ColorHelpers.hexToRGB(this.hex).red : '';
+        return this.hex ? rgb(`#${this.hex}`).r.toString() : '';
     }
     /**
      * Green value from 0 to 255
@@ -151,10 +153,10 @@ let ColorDialog = class ColorDialog extends Dialog {
      */
     set green(green) {
         green = String(green);
-        this.value = this.isValidRGB(green) ? ColorHelpers.rgbToHex(this.red, green, this.blue) : '';
+        this.value = this.isValidRGB(green) ? rgb(Number(this.red), Number(green), Number(this.blue)).formatHex() : '';
     }
     get green() {
-        return this.hex ? ColorHelpers.hexToRGB(this.hex).green : '';
+        return this.hex ? rgb(`#${this.hex}`).g.toString() : '';
     }
     /**
      * Blue value from 0 to 255
@@ -163,10 +165,10 @@ let ColorDialog = class ColorDialog extends Dialog {
      */
     set blue(blue) {
         blue = String(blue);
-        this.value = this.isValidRGB(blue) ? ColorHelpers.rgbToHex(this.red, this.green, blue) : '';
+        this.value = this.isValidRGB(blue) ? rgb(Number(this.red), Number(this.green), Number(blue)).formatHex() : '';
     }
     get blue() {
-        return this.hex ? ColorHelpers.hexToRGB(this.hex).blue : '';
+        return this.hex ? rgb(`#${this.hex}`).b.toString() : '';
     }
     /**
      * Check if component should be updated
@@ -225,7 +227,7 @@ let ColorDialog = class ColorDialog extends Dialog {
      * @returns true if value is valid
      */
     isValidValue(value) {
-        const isValid = value === '' || ColorHelpers.isHex(value);
+        const isValid = value === '' || isHex(value);
         if (!isValid) {
             new WarningNotice(`The specified value "${value}" is not valid value. The correct value should look like "#fff" or "#ffffff".`).show();
         }
@@ -237,7 +239,7 @@ let ColorDialog = class ColorDialog extends Dialog {
      * @returns true if value is valid
      */
     isValidHex(value) {
-        const isValid = value === '' || (!value.includes('#') && ColorHelpers.isHex(`#${value}`));
+        const isValid = value === '' || (!value.includes('#') && isHex(`#${value}`));
         if (!isValid) {
             new WarningNotice(`The specified hex "${value}" is not valid color. The correct value should look like "fff" or "ffffff".`).show();
         }
@@ -249,7 +251,7 @@ let ColorDialog = class ColorDialog extends Dialog {
      * @returns true if value is within 0 - 255
      */
     isValidRGB(value) {
-        const isValid = value === '' || ColorHelpers.isValidDecimalForRGB(value);
+        const isValid = value === '' || Number(value) >= 0 && Number(value) <= 255;
         if (!isValid) {
             new WarningNotice(`The specified RGB "${value}" is not valid color. The value should be 0 - 255.`).show();
         }
@@ -261,8 +263,8 @@ let ColorDialog = class ColorDialog extends Dialog {
      * @return {void}
      */
     onColorChanged(event) {
-        this.valueModel.hex = ColorHelpers.removeHashSign(event.target.value);
-        void this.requestUpdate();
+        this.valueModel.hex = removeHashSign(event.target.value);
+        this.requestUpdate();
     }
     /**
      * update hex value when typing on hex input
@@ -271,7 +273,7 @@ let ColorDialog = class ColorDialog extends Dialog {
      */
     onHexChanged(event) {
         this.valueModel.hex = event.target.value;
-        void this.requestUpdate();
+        this.requestUpdate();
     }
     /**
      * update r,g,b value when typing on RGB inputs
@@ -289,7 +291,7 @@ let ColorDialog = class ColorDialog extends Dialog {
         else if (targetElem === this.blueInputEl) {
             this.valueModel.blue = this.blueInputEl.value;
         }
-        void this.requestUpdate();
+        this.requestUpdate();
     }
     /**
      * set opened state to false
@@ -346,7 +348,7 @@ let ColorDialog = class ColorDialog extends Dialog {
           <div
             part="preview-color"
             style=${styleMap({
-            backgroundColor: this.valueModel.value
+            backgroundColor: this.valueModel.value || undefined
         })}
             ?no-color=${!this.valueModel.value}></div>
           <div>${this.t('RED')}&nbsp;:

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

@@ -8,7 +8,8 @@
         {
           "name": "multiple",
           "description": "Multiple selection mode",
-          "type": "boolean"
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "opened",
@@ -31,7 +32,8 @@
         {
           "name": "free-text",
           "description": "Allow to enter any value",
-          "type": "boolean"
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "error",
@@ -53,25 +55,26 @@
         {
           "name": "value",
           "description": "Returns the first selected item value.\nUse `values` when multiple selection mode is enabled.",
-          "type": "string"
+          "type": "string",
+          "default": "\"\""
         },
         {
           "name": "readonly",
           "description": "Set readonly state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "disabled",
           "description": "Set disabled state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "name",
           "description": "Set name of the element",
           "type": "string",
-          "default": "\"''\""
+          "default": "\"\""
         }
       ],
       "properties": [
@@ -91,7 +94,8 @@
           "name": "multiple",
           "attribute": "multiple",
           "description": "Multiple selection mode",
-          "type": "boolean"
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "opened",
@@ -118,7 +122,8 @@
           "name": "freeText",
           "attribute": "free-text",
           "description": "Allow to enter any value",
-          "type": "boolean"
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "error",
@@ -143,18 +148,21 @@
         {
           "name": "data",
           "description": "Data array to be displayed",
-          "type": "ComboBoxData<T>"
+          "type": "ComboBoxData<T>",
+          "default": "[]"
         },
         {
           "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": "string[]"
+          "type": "string[]",
+          "default": "[]"
         },
         {
           "name": "query",
@@ -162,30 +170,31 @@
           "type": "string | null"
         },
         {
-          "name": "label",
+          "name": "label (readonly)",
           "description": "Label of selected value",
-          "type": "string"
+          "type": "string",
+          "default": "\"\""
         },
         {
           "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"
         },
         {
           "name": "name",
           "attribute": "name",
           "description": "Set name of the element",
           "type": "string",
-          "default": "\"''\""
+          "default": "\"\""
         }
       ],
       "events": [
@@ -200,6 +209,9 @@
         {
           "name": "opened-changed",
           "description": "Dispatched when opened state changes"
+        },
+        {
+          "name": "animationiteration"
         }
       ]
     }

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             | 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`                   | false                        | Allow to enter any value                         |
+| `label (readonly)`  |                       | `string`                    | ""                           | Label of selected value                          |
+| `multiple`          | `multiple`            | `boolean`                   | false                        | 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`            | 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/combo-box/helpers/filter.d.ts

@@ -1,7 +1,7 @@
-import { DataItem } from '@refinitiv-ui/utils';
-import { ComboBox } from '../index';
-import { ComboBoxFilter } from './types';
-import { ItemData } from '../../item';
+import type { DataItem } from '@refinitiv-ui/utils/lib/collection';
+import type { ComboBox } from '../index';
+import type { ComboBoxFilter } from './types';
+import type { ItemData } from '../../item';
 /**
  * Default filter used by combo box
  * @param el ComboBox instance to filter

package/lib/combo-box/helpers/types.d.ts

@@ -1,5 +1,5 @@
-import { DataItem } from '@refinitiv-ui/utils';
-import { ItemData } from '../../item';
+import type { DataItem } from '@refinitiv-ui/utils/lib/collection';
+import type { ItemData } from '../../item';
 /**
  * Predicate callback
  * Matches item against filter function

package/lib/combo-box/index.d.ts

@@ -1,21 +1,22 @@
 import { JSXInterface } from '../jsx';
-import { ControlElement, CSSResult, PropertyValues, TapEvent, TemplateResult, StyleMap } from '@refinitiv-ui/core';
+import { ControlElement, CSSResultGroup, PropertyValues, TapEvent, TemplateResult, StyleMap } from '@refinitiv-ui/core';
+import { CollectionComposer, DataItem } from '@refinitiv-ui/utils/lib/collection.js';
+import { AnimationTaskRunner } from '@refinitiv-ui/utils/lib/async.js';
+import type { ValueChangedEvent } from '../events';
+import type { ItemData } from '../item';
+import type { TextField } from '../text-field';
+import type { ComboBoxData, ComboBoxFilter } from './helpers/types';
+import { List, ListRenderer as ComboBoxRenderer } from '../list/index.js';
+import { CustomKeyboardEvent } from './helpers/keyboard-event.js';
+import '../icon/index.js';
+import '../overlay/index.js';
+import '../list/index.js';
+import '../counter/index.js';
+import '../text-field/index.js';
 import { TranslateDirective } from '@refinitiv-ui/translate';
-import { AnimationTaskRunner, CollectionComposer, DataItem } from '@refinitiv-ui/utils';
-import '@refinitiv-ui/phrasebook/lib/locale/en/combo-box';
-import { ValueChangedEvent } from '../events';
-import '../icon';
-import '../overlay';
-import '../list';
-import '../counter';
-import '../text-field';
-import '../tooltip';
-import { List, ListRenderer as ComboBoxRenderer } from '../list';
-import { ItemData } from '../item';
-import { TextField } from '../text-field';
-import { ComboBoxData, ComboBoxFilter } from './helpers/types';
-import { CustomKeyboardEvent } from './helpers/keyboard-event';
-export { ComboBoxRenderer, ComboBoxFilter, ComboBoxData };
+import '@refinitiv-ui/phrasebook/lib/locale/en/combo-box.js';
+export type { ComboBoxFilter, ComboBoxData };
+export { ComboBoxRenderer };
 /**
  * Combines a popup with a filterable selection list
  *
@@ -39,12 +40,12 @@ export declare class ComboBox<T extends DataItem = ItemData> extends ControlElem
      */
     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;
     /**
      * Custom filter for static data
      * Set this to null when data is filtered externally, eg XHR
@@ -60,6 +61,7 @@ export declare class ComboBox<T extends DataItem = ItemData> extends ControlElem
     /**
      * Multiple selection mode
      * @param multiple true to set multiple mode
+     * @default false
      */
     set multiple(multiple: boolean);
     get multiple(): boolean;
@@ -79,6 +81,7 @@ export declare class ComboBox<T extends DataItem = ItemData> extends ControlElem
     /**
      * Allow to enter any value
      * @param freeText true to set freeText mode
+     * @default false
      */
     set freeText(freeText: boolean);
     get freeText(): boolean;
@@ -101,6 +104,7 @@ export declare class ComboBox<T extends DataItem = ItemData> extends ControlElem
     /**
      * Data array to be displayed
      * @type {ComboBoxData<T>}
+     * @default []
      */
     get data(): ComboBoxData<T>;
     set data(value: ComboBoxData<T>);
@@ -112,6 +116,7 @@ export declare class ComboBox<T extends DataItem = ItemData> extends ControlElem
     /**
      * Returns the first selected item value.
      * Use `values` when multiple selection mode is enabled.
+     * @default -
      */
     get value(): string;
     set value(value: string);
@@ -119,6 +124,7 @@ export declare class ComboBox<T extends DataItem = ItemData> extends ControlElem
      * Returns a values collection of the currently
      * selected item values
      * @type {string[]}
+     * @default []
      */
     get values(): string[];
     set values(values: string[]);
@@ -133,12 +139,14 @@ export declare class ComboBox<T extends DataItem = ItemData> extends ControlElem
      * Query string applied to combo-box
      * Set via internal text-field input
      * @readonly
+     * @default null
      */
     get query(): string | null;
     set query(query: string | null);
     /**
      * Label of selected value
      * @returns Label to use, defaults to empty string
+     * @default -
      * @readonly
      */
     get label(): string;