@refinitiv-ui/elements 7.9.0 → 7.10.0

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [7.10.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@7.9.1...@refinitiv-ui/elements@7.10.0) (2023-12-12)
+
+### Bug Fixes
+
+- **combo-box:** cannot set value in free text when data is empty ([#1046](https://github.com/Refinitiv/refinitiv-ui/issues/1046)) ([abdc6fc](https://github.com/Refinitiv/refinitiv-ui/commit/abdc6fca9c5f0991d0fdc69697624fabcdb81cdb))
+- resolve SonarCloud findings ([#1020](https://github.com/Refinitiv/refinitiv-ui/issues/1020)) ([81f65f9](https://github.com/Refinitiv/refinitiv-ui/commit/81f65f90f7c2fb69bbf68ec9e0d1f672618ff734))
+- voiceover and safari does not annouce selected value ([#1025](https://github.com/Refinitiv/refinitiv-ui/issues/1025)) ([21a946d](https://github.com/Refinitiv/refinitiv-ui/commit/21a946dfd2e509611364cca4748070b7baedf4dc))
+
+### Features
+
+- **datetime-picker:** cascade custom cell slot to calendar ([#1037](https://github.com/Refinitiv/refinitiv-ui/issues/1037)) ([a558478](https://github.com/Refinitiv/refinitiv-ui/commit/a55847877f11a8e4d4cf8dae7a8bb97e8d0eb968))
+- **slider:** support custom label ([#1021](https://github.com/Refinitiv/refinitiv-ui/issues/1021)) ([e2004dd](https://github.com/Refinitiv/refinitiv-ui/commit/e2004ddd95be2c62f9957fd6465c18c68f879042)), closes [#1022](https://github.com/Refinitiv/refinitiv-ui/issues/1022)
+
+## [7.9.1](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@7.9.0...@refinitiv-ui/elements@7.9.1) (2023-11-13)
+
+### Bug Fixes
+
+- **time-picker:** remove pre-populate value ([#995](https://github.com/Refinitiv/refinitiv-ui/issues/995)) ([afe008c](https://github.com/Refinitiv/refinitiv-ui/commit/afe008c1059031d28f6a6c6cff79caf8f301acaa))
+
 # [7.9.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@7.8.0...@refinitiv-ui/elements@7.9.0) (2023-11-06)
 
 ### Features

package/lib/calendar/custom-elements.json

@@ -196,7 +196,7 @@
       ],
       "slots": [
         {
-          "name": "yyyy-mm-dd",
+          "name": "yyyy-MM-dd",
           "description": "Adds slotted content into the specific date which use value in `ISO8601` date string format as a key e.g. `yyyy-MM-dd`, `yyyy-MM` and `yyyy`"
         },
         {

package/lib/calendar/custom-elements.md

@@ -34,4 +34,4 @@ Standard calendar element
 | Name         | Description                                      |
 |--------------|--------------------------------------------------|
 | `footer`     | Adds slotted content into the footer of the calendar control |
-| `yyyy-mm-dd` | Adds slotted content into the specific date which use value in `ISO8601` date string format as a key e.g. `yyyy-MM-dd`, `yyyy-MM` and `yyyy` |
+| `yyyy-MM-dd` | Adds slotted content into the specific date which use value in `ISO8601` date string format as a key e.g. `yyyy-MM-dd`, `yyyy-MM` and `yyyy` |

package/lib/calendar/index.d.ts

@@ -22,7 +22,7 @@ export type { CalendarFilter, BeforeCellRenderEvent };
  * @attr {boolean} disabled - Set disabled state
  * @prop {boolean} [disabled=false] - Set disabled state
  *
- * @slot yyyy-mm-dd - Adds slotted content into the specific date which use value in `ISO8601` date string format as a key e.g. `yyyy-MM-dd`, `yyyy-MM` and `yyyy`
+ * @slot yyyy-MM-dd - Adds slotted content into the specific date which use value in `ISO8601` date string format as a key e.g. `yyyy-MM-dd`, `yyyy-MM` and `yyyy`
  * @slot footer - Adds slotted content into the footer of the calendar control
  */
 export declare class Calendar extends ControlElement implements MultiValue {

package/lib/calendar/index.js

@@ -29,7 +29,7 @@ export { CalendarRenderView };
  * @attr {boolean} disabled - Set disabled state
  * @prop {boolean} [disabled=false] - Set disabled state
  *
- * @slot yyyy-mm-dd - Adds slotted content into the specific date which use value in `ISO8601` date string format as a key e.g. `yyyy-MM-dd`, `yyyy-MM` and `yyyy`
+ * @slot yyyy-MM-dd - Adds slotted content into the specific date which use value in `ISO8601` date string format as a key e.g. `yyyy-MM-dd`, `yyyy-MM` and `yyyy`
  * @slot footer - Adds slotted content into the footer of the calendar control
  */
 let Calendar = class Calendar extends ControlElement {
@@ -1154,7 +1154,8 @@ let Calendar = class Calendar extends ControlElement {
             cancelable: false,
             composed: true,
             detail: {
-                cell: calendarCell
+                cell: calendarCell,
+                calendar: this
             }
         });
         this.dispatchEvent(event);

package/lib/calendar/types.d.ts

@@ -1,5 +1,6 @@
 import { CellIndex } from '@refinitiv-ui/utils/navigation.js';
 import { CalendarRenderView } from './constants.js';
+import type { Calendar } from './index.js';
 export interface CellSelectionModel {
     selected?: boolean;
     range?: boolean;
@@ -48,4 +49,5 @@ export type CalendarCell = {
 };
 export type BeforeCellRenderEvent = CustomEvent<{
     cell: CalendarCell;
+    calendar: Calendar;
 }>;

package/lib/chart/elements/chart.js

@@ -421,7 +421,8 @@ let Chart = class Chart extends BasicElement {
      * @returns The value as a number, or, undefined if NaN.
      */
     cssVarAsNumber(...args) {
-        const result = Number(this.getComputedVariable(...args).replace(/\D/g, ''));
+        const cssComputeVar = this.getComputedVariable(...args);
+        const result = parseFloat(cssComputeVar);
         return isNaN(result) ? undefined : result;
     }
     /**

package/lib/combo-box/index.js

@@ -242,6 +242,10 @@ let ComboBox = class ComboBox extends FormFieldElement {
             this.values = [value];
         }
         else {
+            if (this.freeText && this.freeTextValue !== value) {
+                this.freeTextValue = value;
+                this.requestUpdate();
+            }
             this.cachedValue = value;
         }
     }

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

@@ -348,6 +348,18 @@
         {
           "name": "left",
           "description": "Slot to add custom contents at the left of popup"
+        },
+        {
+          "name": "yyyy-MM-dd",
+          "description": "Slot to add custom contents on any date cells e.g. `2023-01-01`. Use `yyyy` or `yyyy-MM` if the cell is year or month."
+        },
+        {
+          "name": "from-yyyy-MM-dd",
+          "description": "Slot to add custom contents on any date cells of left calendar in `duplex` mode e.g. `from-2023-01-01`. Use `from-yyyy` or `from-yyyy-MM` if the cell is year or month"
+        },
+        {
+          "name": "to-yyyy-MM-dd",
+          "description": "Slot to add custom contents on any date cells of right calendar in `duplex` mode e.g. `to-2023-01-01`. Use `to-yyyy` or `to-yyyy-MM` if the cell is year or month"
         }
       ],
       "methods": [
@@ -355,6 +367,11 @@
           "name": "validateInput",
           "description": "Validates the input, marking the element as invalid if its value does not meet the validation criteria.",
           "params": []
+        },
+        {
+          "name": "updateCalendarSlot",
+          "description": "Request to update slot on the calendar while the overlay is open",
+          "params": []
         }
       ]
     }

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

@@ -34,9 +34,10 @@ Control to pick date and time
 
 ## Methods
 
-| Method          | Type       | Description                                      |
-|-----------------|------------|--------------------------------------------------|
-| `validateInput` | `(): void` | Validates the input, marking the element as invalid if its value does not meet the validation criteria. |
+| Method               | Type       | Description                                      |
+|----------------------|------------|--------------------------------------------------|
+| `updateCalendarSlot` | `(): void` | Request to update slot on the calendar while the overlay is open |
+| `validateInput`      | `(): void` | Validates the input, marking the element as invalid if its value does not meet the validation criteria. |
 
 ## Events
 
@@ -49,9 +50,12 @@ Control to pick date and time
 
 ## Slots
 
-| Name     | Description                                      |
-|----------|--------------------------------------------------|
-| `footer` | Slot to add custom contents at the bottom of popup |
-| `header` | Slot to add custom contents at the top of popup  |
-| `left`   | Slot to add custom contents at the left of popup |
-| `right`  | Slot to add custom contents at the right of popup |
+| Name              | Description                                      |
+|-------------------|--------------------------------------------------|
+| `footer`          | Slot to add custom contents at the bottom of popup |
+| `from-yyyy-MM-dd` | Slot to add custom contents on any date cells of left calendar in `duplex` mode e.g. `from-2023-01-01`. Use `from-yyyy` or `from-yyyy-MM` if the cell is year or month |
+| `header`          | Slot to add custom contents at the top of popup  |
+| `left`            | Slot to add custom contents at the left of popup |
+| `right`           | Slot to add custom contents at the right of popup |
+| `to-yyyy-MM-dd`   | Slot to add custom contents on any date cells of right calendar in `duplex` mode e.g. `to-2023-01-01`. Use `to-yyyy` or `to-yyyy-MM` if the cell is year or month |
+| `yyyy-MM-dd`      | Slot to add custom contents on any date cells e.g. `2023-01-01`. Use `yyyy` or `yyyy-MM` if the cell is year or month. |

package/lib/datetime-picker/index.d.ts

@@ -26,6 +26,9 @@ export type { DatetimePickerFilter, DatetimePickerDuplex };
  * @slot right - Slot to add custom contents at the right of popup
  * @slot footer - Slot to add custom contents at the bottom of popup
  * @slot left - Slot to add custom contents at the left of popup
+ * @slot yyyy-MM-dd - Slot to add custom contents on any date cells e.g. `2023-01-01`. Use `yyyy` or `yyyy-MM` if the cell is year or month.
+ * @slot from-yyyy-MM-dd - Slot to add custom contents on any date cells of left calendar in `duplex` mode e.g. `from-2023-01-01`. Use `from-yyyy` or `from-yyyy-MM` if the cell is year or month
+ * @slot to-yyyy-MM-dd - Slot to add custom contents on any date cells of right calendar in `duplex` mode e.g. `to-2023-01-01`. Use `to-yyyy` or `to-yyyy-MM` if the cell is year or month
  */
 export declare class DatetimePicker extends ControlElement implements MultiValue {
     /**
@@ -203,10 +206,13 @@ export declare class DatetimePicker extends ControlElement implements MultiValue
     private iconEl;
     private popupEl?;
     private timepickerEl?;
+    private timepickerFromEl?;
     private timepickerToEl?;
     private calendarEl?;
+    private calendarFromEl?;
     private calendarToEl?;
     private inputEl?;
+    private inputFromEl?;
     private inputToEl?;
     /**
      * Updates the element
@@ -444,6 +450,11 @@ export declare class DatetimePicker extends ControlElement implements MultiValue
      * @returns {void}
      */
     private resetViews;
+    /**
+     * Request to update slot on the calendar while the overlay is open
+     * @returns void
+     */
+    updateCalendarSlot(): void;
     /**
      * Get time picker template
      * @param id Timepicker identifier
@@ -451,6 +462,12 @@ export declare class DatetimePicker extends ControlElement implements MultiValue
      * @returns template result
      */
     private getTimepickerTemplate;
+    /**
+     * Create calendar slot
+     * @param calendarId Calendar identifier
+     * @returns calendarSlots slots that will cascade to calendar
+     */
+    private createCalendarSlots;
     /**
      * Get calendar template
      * @param id Calendar identifier

package/lib/datetime-picker/index.js

@@ -24,6 +24,16 @@ const INPUT_FORMAT = {
     DATETIME_SECONDS: 'dd-MMM-yyyy HH:mm:ss',
     DATETIME_SECONDS_AM_PM: 'dd-MMM-yyyy hh:mm:ss aaa'
 };
+// public API
+const CALENDAR_ID = 'calendar';
+const CALENDAR_FROM_ID = 'calendar-from';
+const CALENDAR_TO_ID = 'calendar-to';
+const TIMEPICKER_ID = 'timepicker';
+const TIMEPICKER_FROM_ID = 'timepicker-from';
+const TIMEPICKER_TO_ID = 'timepicker-to';
+const INPUT_ID = 'input';
+const INPUT_FROM_ID = 'input-from';
+const INPUT_TO_ID = 'input-to';
 /**
  * Control to pick date and time
  *
@@ -42,6 +52,9 @@ const INPUT_FORMAT = {
  * @slot right - Slot to add custom contents at the right of popup
  * @slot footer - Slot to add custom contents at the bottom of popup
  * @slot left - Slot to add custom contents at the left of popup
+ * @slot yyyy-MM-dd - Slot to add custom contents on any date cells e.g. `2023-01-01`. Use `yyyy` or `yyyy-MM` if the cell is year or month.
+ * @slot from-yyyy-MM-dd - Slot to add custom contents on any date cells of left calendar in `duplex` mode e.g. `from-2023-01-01`. Use `from-yyyy` or `from-yyyy-MM` if the cell is year or month
+ * @slot to-yyyy-MM-dd - Slot to add custom contents on any date cells of right calendar in `duplex` mode e.g. `to-2023-01-01`. Use `to-yyyy` or `to-yyyy-MM` if the cell is year or month
  */
 let DatetimePicker = class DatetimePicker extends ControlElement {
     constructor() {
@@ -750,13 +763,19 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
         this.submitInterimSegments();
         // in duplex mode, avoid jumping on views
         // Therefore if any of values have changed, save the current view
-        if (this.isDuplex() && this.calendarEl && this.calendarToEl) {
-            this.notifyViewsChange([this.calendarEl?.view, this.calendarToEl?.view]);
+        if (this.isDuplex() && this.calendarFromEl && this.calendarToEl) {
+            this.notifyViewsChange([this.calendarFromEl.view, this.calendarToEl.view]);
         }
         // Close popup if there is no time picker
         const newValues = this.values;
         if (!this.timepicker && newValues[0] && (this.range ? newValues[1] : true)) {
             this.setOpened(false);
+            /**
+             * Custom cell selection delegates focus back to the text field when the overlay is closed,
+             * causing a sync problem between the calendar and text field.
+             * A workaround involves blurring the text field again.
+             */
+            this.isDuplex() ? this.inputFromEl?.blur() : this.inputEl?.blur();
         }
     }
     /**
@@ -929,6 +948,15 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
     resetViews() {
         this.notifyViewsChange([]);
     }
+    /**
+     * Request to update slot on the calendar while the overlay is open
+     * @returns void
+     */
+    updateCalendarSlot() {
+        if (this.opened) {
+            this.requestUpdate();
+        }
+    }
     /**
      * Get time picker template
      * @param id Timepicker identifier
@@ -945,6 +973,33 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
       @value-changed=${this.onTimePickerValueChanged}
     ></ef-time-picker>`;
     }
+    /**
+     * Create calendar slot
+     * @param calendarId Calendar identifier
+     * @returns calendarSlots slots that will cascade to calendar
+     */
+    createCalendarSlots(calendarId) {
+        if (!this.opened) {
+            return null;
+        }
+        const isValidDateSlot = (slot, prefix = '') => {
+            return new RegExp(`^${prefix}-?\\d{1,6}(-\\d{2}(-\\d{2})?)?$`).test(slot.slot);
+        };
+        const querySlots = Array.from(this.querySelectorAll('[slot]'));
+        return querySlots
+            .filter((slot) => {
+            const isToSlot = calendarId === CALENDAR_TO_ID && isValidDateSlot(slot, 'to-');
+            const isFromSlot = calendarId === CALENDAR_FROM_ID && isValidDateSlot(slot, 'from-');
+            const isISODateSlot = calendarId === CALENDAR_ID && isValidDateSlot(slot);
+            return isToSlot || isFromSlot || isISODateSlot;
+        })
+            .map((slot) => {
+            const newSlot = document.createElement('slot');
+            newSlot.name = slot.slot;
+            newSlot.slot = slot.slot.replace(/^(to|from)-/, '');
+            return newSlot;
+        });
+    }
     /**
      * Get calendar template
      * @param id Calendar identifier
@@ -952,6 +1007,7 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
      * @returns template result
      */
     getCalendarTemplate(id, view = '') {
+        const slotContent = this.createCalendarSlots(id);
         return html `<ef-calendar
       part="calendar"
       id=${id}
@@ -970,15 +1026,16 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
       @keydown=${this.onCalendarKeyDown}
       @view-changed=${this.onCalendarViewChanged}
       @value-changed=${this.onCalendarValueChanged}
-    ></ef-calendar>`;
+      >${slotContent}</ef-calendar
+    >`;
     }
     /**
      * Get calendar templates
      */
     get calendarsTemplate() {
         return html `
-      ${this.getCalendarTemplate('calendar', this.views[0])}
-      ${this.isDuplex() ? this.getCalendarTemplate('calendar-to', this.views[1]) : undefined}
+      ${this.getCalendarTemplate(this.isDuplex() ? CALENDAR_FROM_ID : CALENDAR_ID, this.views[0])}
+      ${this.isDuplex() ? this.getCalendarTemplate(CALENDAR_TO_ID, this.views[1]) : undefined}
     `;
     }
     /**
@@ -988,9 +1045,9 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
         // TODO: how can we add support timepicker with multiple?
         const values = this.timepickerValues;
         return html `
-      ${this.getTimepickerTemplate('timepicker', values[0])}
+      ${this.getTimepickerTemplate(this.range ? TIMEPICKER_FROM_ID : TIMEPICKER_ID, values[0])}
       ${this.range ? html `<div part="input-separator"></div>` : undefined}
-      ${this.range ? this.getTimepickerTemplate('timepicker-to', values[1]) : undefined}
+      ${this.range ? this.getTimepickerTemplate(TIMEPICKER_TO_ID, values[1]) : undefined}
     `;
     }
     /**
@@ -1030,9 +1087,9 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
         const values = this.inputValues;
         return html `
       <div part="input-wrapper">
-        ${this.getInputTemplate('input', values[0])}
+        ${this.getInputTemplate(this.range ? INPUT_FROM_ID : INPUT_ID, values[0])}
         ${this.range ? html `<div part="input-separator"></div>` : undefined}
-        ${this.range ? this.getInputTemplate('input-to', values[1]) : undefined}
+        ${this.range ? this.getInputTemplate(INPUT_TO_ID, values[1]) : undefined}
       </div>
     `;
     }
@@ -1169,18 +1226,27 @@ __decorate([
 __decorate([
     query('#timepicker')
 ], DatetimePicker.prototype, "timepickerEl", void 0);
+__decorate([
+    query('#timepicker-from')
+], DatetimePicker.prototype, "timepickerFromEl", void 0);
 __decorate([
     query('#timepicker-to')
 ], DatetimePicker.prototype, "timepickerToEl", void 0);
 __decorate([
     query('#calendar')
 ], DatetimePicker.prototype, "calendarEl", void 0);
+__decorate([
+    query('#calendar-from')
+], DatetimePicker.prototype, "calendarFromEl", void 0);
 __decorate([
     query('#calendar-to')
 ], DatetimePicker.prototype, "calendarToEl", void 0);
 __decorate([
     query('#input')
 ], DatetimePicker.prototype, "inputEl", void 0);
+__decorate([
+    query('#input-from')
+], DatetimePicker.prototype, "inputFromEl", void 0);
 __decorate([
     query('#input-to')
 ], DatetimePicker.prototype, "inputToEl", void 0);

package/lib/interactive-chart/index.js

@@ -973,7 +973,7 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
     cssVarAsNumber(...args) {
         args[args.length] = '';
         const cssComputeVar = this.getComputedVariable(...args);
-        const result = parseFloat(cssComputeVar.replace(/\D+$/, ''));
+        const result = parseFloat(cssComputeVar);
         return cssComputeVar && !isNaN(result) ? result : undefined;
     }
     /**

package/lib/select/custom-elements.json

@@ -5,12 +5,6 @@
       "name": "ef-select",
       "description": "Expands upon the native select element,\nproviding a fully themeable dropdown element.",
       "attributes": [
-        {
-          "name": "placeholder",
-          "description": "Placeholder to display when no value is set",
-          "type": "string",
-          "default": "\"\""
-        },
         {
           "name": "opened",
           "description": "Toggles the opened state of the list",
@@ -18,20 +12,26 @@
           "default": "false"
         },
         {
-          "name": "error",
-          "description": "Set error state",
+          "name": "disabled",
+          "description": "Set disabled state",
           "type": "boolean",
           "default": "false"
         },
         {
-          "name": "warning",
-          "description": "Set warning state",
+          "name": "placeholder",
+          "description": "Set placeholder text",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "error",
+          "description": "Set error state",
           "type": "boolean",
           "default": "false"
         },
         {
-          "name": "disabled",
-          "description": "Set disabled state",
+          "name": "warning",
+          "description": "Set warning state",
           "type": "boolean",
           "default": "false"
         }
@@ -42,13 +42,6 @@
           "description": "Current text content of the selected value",
           "type": "string | undefined"
         },
-        {
-          "name": "placeholder",
-          "attribute": "placeholder",
-          "description": "Placeholder to display when no value is set",
-          "type": "string",
-          "default": "\"\""
-        },
         {
           "name": "opened",
           "attribute": "opened",
@@ -56,20 +49,6 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "error",
-          "attribute": "error",
-          "description": "Set error state",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "warning",
-          "attribute": "warning",
-          "description": "Set warning state",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "data",
           "description": "Construct the menu from data object. Cannot be used with slotted content",
@@ -87,6 +66,27 @@
           "description": "Set disabled state",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "placeholder",
+          "attribute": "placeholder",
+          "description": "Set placeholder text",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "error",
+          "attribute": "error",
+          "description": "Set error state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "warning",
+          "attribute": "warning",
+          "description": "Set warning state",
+          "type": "boolean",
+          "default": "false"
         }
       ],
       "events": [

package/lib/select/custom-elements.md

@@ -12,7 +12,7 @@ providing a fully themeable dropdown element.
 | `error`            | `error`       | `boolean`             | false   | Set error state                                  |
 | `label (readonly)` |               | `string \| undefined` |         | Current text content of the selected value       |
 | `opened`           | `opened`      | `boolean`             | false   | Toggles the opened state of the list             |
-| `placeholder`      | `placeholder` | `string`              | ""      | Placeholder to display when no value is set      |
+| `placeholder`      | `placeholder` | `string`              | ""      | Set placeholder text                             |
 | `value`            |               | `string`              | ""      | Value of the element                             |
 | `warning`          | `warning`     | `boolean`             | false   | Set warning state                                |
 

package/lib/select/index.d.ts

@@ -1,5 +1,5 @@
 import { JSXInterface } from '../jsx';
-import { CSSResultGroup, ControlElement, MultiValue, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
+import { CSSResultGroup, FormFieldElement, MultiValue, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
 import '../icon/index.js';
 import '../item/index.js';
 import '../overlay/index.js';
@@ -12,16 +12,24 @@ export type { SelectData, SelectDataItem };
  * @attr {boolean} disabled - Set disabled state
  * @prop {boolean} [disabled=false] - Set disabled state
  *
+ * @attr {string} placeholder - Set placeholder text
+ * @prop {string} [placeholder=""] - Set placeholder text
+ *
+ * @attr {boolean} error - Set error state
+ * @prop {boolean} [error=false] - Set error state
+ *
+ * @attr {boolean} warning - Set warning state
+ * @prop {boolean} [warning=false] - Set warning state
+ *
  * @fires value-changed - Fired when the user commits a value change. The event is not triggered if `value` property is changed programmatically.
  * @fires opened-changed - Fired when the user opens or closes control's popup. The event is not triggered if `opened` property is changed programmatically.
  */
-export declare class Select extends ControlElement implements MultiValue {
+export declare class Select extends FormFieldElement implements MultiValue {
     /**
      * Element version number
      * @returns version number
      */
     static get version(): string;
-    protected readonly defaultRole: string | null;
     /**
      * A `CSSResultGroup` that will be used
      * to style the host, slotted children
@@ -51,22 +59,10 @@ export declare class Select extends ControlElement implements MultiValue {
      * @readonly
      */
     get labels(): string[];
-    /**
-     * Placeholder to display when no value is set
-     */
-    placeholder: string;
     /**
      * Toggles the opened state of the list
      */
     opened: boolean;
-    /**
-     * Set error state
-     */
-    error: boolean;
-    /**
-     * Set warning state
-     */
-    warning: boolean;
     /**
      * Switch to multiple select input
      * @ignore
@@ -111,11 +107,6 @@ export declare class Select extends ControlElement implements MultiValue {
      * Reference to the label element
      */
     private labelRef;
-    /**
-     * Called when connected to DOM
-     * @returns {void}
-     */
-    connectedCallback(): void;
     /**
      * Updates the element
      * @param changedProperties Properties that has changed
@@ -369,10 +360,6 @@ export declare class Select extends ControlElement implements MultiValue {
      * Template for label
      */
     private get labelTemplate();
-    /**
-     * Edit template when select is not readonly or disabled
-     */
-    private get editTemplate();
     /**
      * Get default slot template
      */
@@ -382,9 +369,17 @@ export declare class Select extends ControlElement implements MultiValue {
      */
     private get dataContent();
     /**
-     * Edit template when select is not readonly or disabled
+     * `ef-items` template generated from slot or `data`
+     */
+    private get itemsTemplate();
+    /**
+     * Template of a listbox containing ef-item(s)
+     */
+    private get listboxTemplate();
+    /**
+     * Area that allows select to be clickable and toggle between open and close
      */
-    private get popupTemplate();
+    private get triggerTemplate();
     /**
      * A `TemplateResult` that will be used
      * to render the updated internal template.
@@ -405,7 +400,7 @@ declare global {
 
   namespace JSX {
     interface IntrinsicElements {
-      'ef-select': Partial<Select> | JSXInterface.ControlHTMLAttributes<Select>;
+      'ef-select': Partial<Select> | JSXInterface.HTMLAttributes<Select>;
     }
   }
 }