@refinitiv-ui/elements 7.9.1 → 7.10.1

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.10.1](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@7.10.0...@refinitiv-ui/elements@7.10.1) (2024-01-02)
+
+**Note:** Version bump only for package @refinitiv-ui/elements
+
+# [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

package/lib/autosuggest/custom-elements.md

@@ -25,13 +25,13 @@ custom rendering, pagination, asynchronous data request, etc.
 
 ## Methods
 
-| Method               | Type                 | Description                                      |
-|----------------------|----------------------|--------------------------------------------------|
-| `onInputBlur`        | `(event: any): void` | Run when input has lost focus<br /><br />**event**: by default `blur` event is listened |
-| `onInputFocus`       | `(event: any): void` | Run when input received focus<br /><br />**event**: by default `focus` event is listened |
-| `onInputKeyDown`     | `(event: any): void` | Run when input key down event has happened<br /><br />**event**: by default `keydown` event is listened |
-| `onInputValueChange` | `(event: any): void` | Run when attach target value changes.<br /><br />**event**: by default `value-changed` event is listened |
-| `refit`              | `(): void`           | Set the width                                    |
+| Method               | Type                           | Description                                      |
+|----------------------|--------------------------------|--------------------------------------------------|
+| `onInputBlur`        | `(event: FocusEvent): void`    | Run when input has lost focus<br /><br />**event**: by default `blur` event is listened |
+| `onInputFocus`       | `(event: FocusEvent): void`    | Run when input received focus<br /><br />**event**: by default `focus` event is listened |
+| `onInputKeyDown`     | `(event: KeyboardEvent): void` | Run when input key down event has happened<br /><br />**event**: by default `keydown` event is listened |
+| `onInputValueChange` | `(event: Event): void`         | Run when attach target value changes.<br /><br />**event**: by default `value-changed` event is listened |
+| `refit`              | `(): void`                     | Set the width                                    |
 
 ## Events
 

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-field/custom-elements.md

@@ -37,10 +37,10 @@ A form control element for datetime input.
 
 ## Methods
 
-| Method          | Type                             | Description                                      |
-|-----------------|----------------------------------|--------------------------------------------------|
-| `checkValidity` | `(): boolean`                    | Returns true if an input element contains valid data. |
-| `willUpdate`    | `(changedProperties: any): void` | Updates the element<br /><br />**changedProperties**: Properties that has changed |
+| Method          | Type                                        | Description                                      |
+|-----------------|---------------------------------------------|--------------------------------------------------|
+| `checkValidity` | `(): boolean`                               | Returns true if an input element contains valid data. |
+| `willUpdate`    | `(changedProperties: PropertyValues): void` | Updates the element<br /><br />**changedProperties**: Properties that has changed |
 
 ## Events
 

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/multi-input/custom-elements.md

@@ -25,9 +25,9 @@ An input control component to display a selection of pills
 
 | 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 |
+| `add`               | `(item: MultiInputDataItem): 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 |
+| `removeByValue`     | `(value: string): MultiInputData`                | 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 |

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                                |