wj-elements 0.1.190 → 0.1.191

package/dist/wje-select.js

@@ -9,8 +9,8 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _addedOptions, _htmlOptions, _Select_instances, htmlSelectedItem_fn, getSelected_fn, getSelectedOptions_fn, _applySearchFilter;
-import { F as FormAssociatedElement } from "./form-associated-element-CaIxmEod.js";
+var _addedOptions, _htmlOptions, _Select_instances, htmlSelectedItem_fn, getSelectedOptions_fn, _applySearchFilter;
+import { F as FormAssociatedElement } from "./form-associated-element-o0UjvdUp.js";
 import { event } from "./event.js";
 import Button from "./wje-button.js";
 import "./wje-popup.js";
@@ -22,7 +22,7 @@ import Option from "./wje-option.js";
 import Options from "./wje-options.js";
 import Checkbox from "./wje-checkbox.js";
 import { P as Popup } from "./popup.element-ZX3dWrG0.js";
-const styles = "/*\n[ WJ Select ]\n*/\n\n:host {\n    margin-bottom: var(--wje-select-margin-bottom);\n    width: 100%;\n    display: block;\n    [slot='arrow'] {\n        transform: rotate(0deg);\n        transition: all 0.2s ease-in;\n    }\n}\n\n.native-select {\n    position: relative;\n    &.default {\n        .wrapper {\n            display: block;\n						background-color: var(--wje-select-background);\n            border-width: var(--wje-select-border-width);\n            border-style: var(--wje-select-border-style);\n            border-color: var(--wje-select-border-color);\n            border-radius: var(--wje-select-border-radius);\n            padding-inline: 0.5rem;\n            padding-top: 0.125rem;\n            padding-bottom: 0.125rem;\n        }\n        .input-wrapper {\n            padding: 0;\n            min-height: 28px;\n            margin-top: -4px;\n        }\n        &.focused {\n            wje-label {\n                opacity: 0.67;\n                font-size: 12px;\n                letter-spacing: normal;\n            }\n        }\n        wje-label {\n            margin: 0;\n            display: block;\n            opacity: 1;\n            cursor: text;\n            transition: opacity 0.2s ease 0s;\n            line-height: var(--wje-select-line-height);\n            &.fade {\n                opacity: 0.5;\n                font-size: 12px;\n                letter-spacing: normal;\n            }\n        }\n    }\n    &.standard {\n        .wrapper {\n            background-color: var(--wje-select-background);\n            border-width: var(--wje-select-border-width);\n            border-style: var(--wje-select-border-style);\n            border-color: var(--wje-select-border-color);\n            border-radius: var(--wje-select-border-radius);\n        }\n        .input-wrapper {\n            background: transparent;\n            width: 100%;\n        }\n        slot[name='error'] {\n            position: static;\n\n            background: transparent;\n            padding: 0.25rem 0;\n            left: auto;\n            transform: none;\n            color: var(--wje-input-color-invalid);\n            font-size: 12px;\n            line-height: normal;\n        }\n    }\n}\n\n.wrapper {\n    display: flex;\n    width: 100%;\n}\n\n.input-wrapper {\n    display: grid;\n    grid-template-columns: auto 1fr auto auto auto;\n    align-items: center;\n    background-color: var(--wje-select-background);\n    min-height: 28px;\n    color: var(--wje-select-color);\n    line-height: var(--wje-select-line-height);\n    appearance: none;\n    padding: 2px 0.5rem;\n    font-size: 14px !important;\n    font-weight: normal;\n    vertical-align: middle;\n    input[readonly] {\n        pointer-events: none;\n        caret-color: transparent;\n    }\n}\n\ninput {\n    color: var(--wje-select-color);\n    line-height: var(--wje-select-line-height);\n    font-size: 14px !important;\n    font-weight: 400;\n    letter-spacing: 0.01em;\n    border: medium;\n    height: 25px;\n    min-height: 25px;\n    padding: 0;\n    background: none;\n    box-shadow: none;\n    width: 100%;\n    outline: 0;\n    font-size: 14px !important;\n}\n\n::placeholder {\n    opacity: 1;\n}\n\n:host [active] {\n    .wrapper {\n        border-radius: var(--wje-select-border-radius);\n    }\n    [slot='arrow'] {\n        transform: rotate(180deg);\n        transition: all 0.2s ease-in;\n    }\n}\n\n.options-wrapper {\n    border-width: var(--wje-select-options-border-width);\n    border-style: var(--wje-select-options-border-style);\n    border-color: var(--wje-select-options-border-color);\n    border-radius: var(--wje-select-options-border-radius);\n    margin-top: calc(0px - var(--wje-select-border-width));\n    background: var(--wje-select-background);\n    overflow: hidden;\n}\n\n.find {\n    margin-block: var(--wje-select-find-margin-block);\n    margin-inline: var(--wje-select-find-margin-inline);\n    width: var(--wje-select-find-width);\n}\n\n.list {\n    overflow: auto;\n    height: 100%;\n}\n\n.options-wrapper:has(.find) .list {\n    height: calc(100% - 32px - 2 * var(--wje-select-find-margin-block));\n}\n\n:host([multiple]) input {\n    position: absolute;\n    z-index: -1;\n    top: 0;\n    left: 0;\n    width: 0;\n    height: 0;\n    opacity: 0;\n}\n\n:host([multiple]) .chips {\n    display: flex;\n    flex: 1;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: var(--wje-spacing-3x-small);\n}\n\n:host([disabled]) .input-wrapper {\n    opacity: 0.5;\n    pointer-events: none;\n    cursor: not-allowed;\n}\n\n.counter {\n    padding-inline: 0.5rem;\n}\n\nwje-chip {\n    --wje-chip-margin: 0 0.25rem 0 0;\n}\n\nwje-button {\n    --wje-padding-top: 0.25rem;\n    --wje-padding-start: 0.25rem;\n    --wje-padding-end: 0.25rem;\n    --wje-padding-bottom: 0.25rem;\n    --wje-button-margin-inline: 0 0.25rem;\n}\n\n.slot-start,\n.slot-end {\n    &:not(:empty) {\n        margin-right: 0.5rem;\n    }\n}\n\nslot[name='error'] {\n    display: none;\n}\n\n:host([invalid]) slot[name='error'] {\n    display: block;\n}\n\nslot[name='error'] {\n    display: none;\n    position: absolute;\n    max-width: 100%;\n    min-width: auto;\n    border-radius: 50px;\n    background: black;\n    padding: 0.25rem 0.5rem;\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: white;\n    font-size: var(--wje-font-size-small);\n    width: max-content;\n    line-height: normal;\n}\n\n.input-hidden{\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    padding: 0;\n    margin: 0;\n    opacity: 0;\n    z-index: -1;\n}";
+const styles = "/*\n[ WJ Select ]\n*/\n\n:host {\n    margin-bottom: var(--wje-select-margin-bottom);\n    width: 100%;\n    display: block;\n    [slot='arrow'] {\n        transform: rotate(0deg);\n        transition: all 0.2s ease-in;\n    }\n}\n\n.native-select {\n    position: relative;\n    &.default {\n        .wrapper {\n            display: block;\n						background-color: var(--wje-select-background);\n            border-width: var(--wje-select-border-width);\n            border-style: var(--wje-select-border-style);\n            border-color: var(--wje-select-border-color);\n            border-radius: var(--wje-select-border-radius);\n            padding-inline: 0.5rem;\n            padding-top: 0.125rem;\n            padding-bottom: 0.125rem;\n        }\n        .input-wrapper {\n            padding: 0;\n            min-height: 28px;\n            margin-top: -4px;\n        }\n        &.focused {\n            wje-label {\n                opacity: 0.67;\n                font-size: 12px;\n                letter-spacing: normal;\n            }\n        }\n        wje-label {\n            margin: 0;\n            display: block;\n            opacity: 1;\n            cursor: text;\n            transition: opacity 0.2s ease 0s;\n            line-height: var(--wje-select-line-height);\n            &.fade {\n                opacity: 0.5;\n                font-size: 12px;\n                letter-spacing: normal;\n            }\n        }\n    }\n    &.standard {\n        .wrapper {\n            background-color: var(--wje-select-background);\n            border-width: var(--wje-select-border-width);\n            border-style: var(--wje-select-border-style);\n            border-color: var(--wje-select-border-color);\n            border-radius: var(--wje-select-border-radius);\n        }\n        wje-label {\n            line-height: var(--wje-line-height-normal);\n        }\n        .input-wrapper {\n            background: transparent;\n            width: 100%;\n        }\n        slot[name='error'] {\n            position: static;\n\n            background: transparent;\n            padding: 0.25rem 0;\n            left: auto;\n            transform: none;\n            color: var(--wje-input-color-invalid);\n            font-size: 12px;\n            line-height: normal;\n        }\n    }\n}\n\n.wrapper {\n    display: flex;\n    width: 100%;\n}\n\n.input-wrapper {\n    display: grid;\n    grid-template-columns: auto 1fr auto auto auto;\n    align-items: center;\n    background-color: var(--wje-select-background);\n    min-height: 28px;\n    color: var(--wje-select-color);\n    line-height: var(--wje-select-line-height);\n    appearance: none;\n    padding: 2px 0.5rem;\n    font-size: 14px !important;\n    font-weight: normal;\n    vertical-align: middle;\n    input[readonly] {\n        pointer-events: none;\n        caret-color: transparent;\n    }\n}\n\ninput {\n    color: var(--wje-select-color);\n    line-height: var(--wje-select-line-height);\n    font-size: 14px !important;\n    font-weight: 400;\n    letter-spacing: 0.01em;\n    border: medium;\n    height: 25px;\n    min-height: 25px;\n    padding: 0;\n    background: none;\n    box-shadow: none;\n    width: 100%;\n    outline: 0;\n    font-size: 14px !important;\n}\n\n::placeholder {\n    opacity: 1;\n}\n\n:host [active] {\n    .wrapper {\n        border-radius: var(--wje-select-border-radius);\n    }\n    [slot='arrow'] {\n        transform: rotate(180deg);\n        transition: all 0.2s ease-in;\n    }\n}\n\n.options-wrapper {\n    border-width: var(--wje-select-options-border-width);\n    border-style: var(--wje-select-options-border-style);\n    border-color: var(--wje-select-options-border-color);\n    border-radius: var(--wje-select-options-border-radius);\n    margin-top: calc(0px - var(--wje-select-border-width));\n    background: var(--wje-select-background);\n    overflow: hidden;\n}\n\n.find {\n    margin-block: var(--wje-select-find-margin-block);\n    margin-inline: var(--wje-select-find-margin-inline);\n    width: var(--wje-select-find-width);\n}\n\n.list {\n    overflow: auto;\n    height: 100%;\n}\n\n.options-wrapper:has(.find) .list {\n    height: calc(100% - 32px - 2 * var(--wje-select-find-margin-block));\n}\n\n:host([multiple]) input {\n    position: absolute;\n    z-index: -1;\n    top: 0;\n    left: 0;\n    width: 0;\n    height: 0;\n    opacity: 0;\n}\n\n:host([multiple]) .chips {\n    display: flex;\n    flex: 1;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: var(--wje-spacing-3x-small);\n}\n\n:host([disabled]) .input-wrapper {\n    opacity: 0.5;\n    pointer-events: none;\n    cursor: not-allowed;\n}\n\n.counter {\n    padding-inline: 0.5rem;\n}\n\nwje-chip {\n    --wje-chip-margin: 0 0.25rem 0 0;\n}\n\nwje-button {\n    --wje-padding-top: 0.25rem;\n    --wje-padding-start: 0.25rem;\n    --wje-padding-end: 0.25rem;\n    --wje-padding-bottom: 0.25rem;\n    --wje-button-margin-inline: 0 0.25rem;\n}\n\n.slot-start,\n.slot-end {\n    &:not(:empty) {\n        margin-right: 0.5rem;\n    }\n}\n\nslot[name='error'] {\n    display: none;\n}\n\n:host([invalid]) slot[name='error'] {\n    display: block;\n}\n\nslot[name='error'] {\n    display: none;\n    position: absolute;\n    max-width: 100%;\n    min-width: auto;\n    border-radius: 50px;\n    background: black;\n    padding: 0.25rem 0.5rem;\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: white;\n    font-size: var(--wje-font-size-small);\n    width: max-content;\n    line-height: normal;\n}\n\n.input-hidden{\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    padding: 0;\n    margin: 0;\n    opacity: 0;\n    z-index: -1;\n}\n\n:host([required]) .wrapper::after {\n    color: var(--wje-input-color-invalid);\n    content: var(--wje-input-required-symbol);\n    font-size: 24px;\n    position: absolute;\n    right: 12px;\n    top: 0;\n}\n\n:host([required]) .standard .input-wrapper::after {\n    right: 13px;\n    top: -20px;\n}";
 class Select extends FormAssociatedElement {
   constructor() {
     super();
@@ -56,8 +56,22 @@ class Select extends FormAssociatedElement {
     });
     __publicField(this, "className", "Select");
     /**
-     * Handles the option change event.
-     * @param {Event} e The event.
+     * Handles the change event for an option element within a select-like component.
+     * This method processes user interactions with options and updates the state of the component,
+     * including selection management, validation, and UI updates. Behavior differs based on
+     * whether the component supports multiple selections.
+     * Key functionality:
+     * - Prevents the default behavior, event propagation, and immediate propagation of the event.
+     * - Retrieves all options within the component.
+     * - If the component doesn't support multiple selection:
+     *   - Marks only the clicked option as selected and deselects others.
+     *   - Hides the option popup.
+     * - If the component supports multiple selection:
+     *   - Processes the clicked option without deselecting others.
+     * - Updates the selected options and triggers validation.
+     * - Marks the form state as non-pristine.
+     * - Propagates the validation state to other relevant parts of the component or system.
+     * @param {Event} e The event object representing the option change interaction.
      */
     __publicField(this, "optionChange", (e) => {
       e.preventDefault();
@@ -82,42 +96,37 @@ class Select extends FormAssociatedElement {
       this.propagateValidation();
     });
     /**
-     * Handles the selection and deselection of an option element.
-     * @param {HTMLElement} option The option element that was clicked.
-     * @param {boolean} [multiple] Indicates whether multiple selection is allowed.
+     * Handles the logic for processing the selection state of a clicked option element.
+     * @function processClickedOption
+     * @param {Element} option The option element that is clicked.
+     * @param {boolean} [multiple] A Boolean indicating whether multiple options can be selected. Defaults to false.
+     * Changes the selected state of the passed option and updates the selected options list.
+     * Checks if the option already has a "selected" attribute, toggles its state,
+     * and updates the internal selected options.
      */
     __publicField(this, "processClickedOption", (option, multiple = false) => {
       const isSelected = option.hasAttribute("selected");
       option.selected = !isSelected;
-      if (isSelected) {
-        this.filterOutOption(option);
-      } else {
-        this.selectedOptions = multiple ? [...this.selectedOptions, option] : [option];
-      }
-    });
-    /**
-     * Filters out a specified option from the `selectedOptions` array.
-     * This function removes an option from the `selectedOptions` array if its value
-     * matches the value of the option provided as an argument. It allows for dynamically
-     * updating the selected options by excluding the specified option.
-     * @param {object} option The option to be removed from the `selectedOptions` array.
-     * Should be an object containing a `value` property that is compared to the
-     * `value` property of objects in the `selectedOptions` array.
-     */
-    __publicField(this, "filterOutOption", (option) => {
-      this.selectedOptions = this.selectedOptions.filter((sOption) => {
-        return sOption.value !== option.value;
-      });
+      this.selectedOptions = __privateMethod(this, _Select_instances, getSelectedOptions_fn).call(this);
     });
     /**
-     * Handles the chip remove event.
-     * @param {Event} e The event.
+     * Handles the removal of a chip element from the DOM and updates the related state.
+     * @param {Event} e The event object triggered by the chip removal action.
+     * The target of the event is expected to be the chip element itself.
      */
     __publicField(this, "removeChip", (e) => {
       e.target.parentNode.removeChild(e.target);
       this.processClickedOption(e.target.option, true);
       this.selections();
     });
+    /**
+     * Filters option elements based on the search input value.
+     * This function applies a search filter to a list of options. If a `wj-options` element exists and has
+     * the `lazy` attribute, the search value is passed to the `wj-options` element, enabling infinite scroll
+     * functionality to handle the filtering. If the `lazy` attribute is not present, it performs a local
+     * search to show or hide options depending on whether their text content matches the search input.
+     * @param {Event} e The input event containing the search input value from the user.
+     */
     __privateAdd(this, _applySearchFilter, (e) => {
       const optionsElement = this.querySelector("wje-options");
       if (optionsElement && optionsElement.hasAttribute("lazy")) {
@@ -141,12 +150,10 @@ class Select extends FormAssociatedElement {
     this.slotStart = null;
     this.slotEnd = null;
     this.input = null;
-    this.optionsWrapper = null;
     this.chips = null;
     this.clear = null;
     this.list = null;
     this._value = [];
-    this._selected = [];
     this._selectedOptions = [];
   }
   /**
@@ -157,22 +164,23 @@ class Select extends FormAssociatedElement {
    * split into an array by spaces) or an array of values.
    */
   set value(value) {
+    const formData = new FormData();
     if (value) {
       let data = value;
       if (!Array.isArray(data)) {
         data = data.split(" ");
       }
-      const formData = new FormData();
       data.forEach((v) => {
         formData.append(this.name, v);
       });
       value = formData;
       this._value = data;
-      this.selected = data;
-      this.internals.setFormValue(value);
     } else {
+      formData.delete(this.name);
+      value = formData;
       this._value = [];
     }
+    this.internals.setFormValue(value);
   }
   /**
    * Retrieves the current value.
@@ -181,24 +189,6 @@ class Select extends FormAssociatedElement {
   get value() {
     return this._value;
   }
-  /**
-   * Sets the `validate-on-change` attribute on the element. When the attribute is present, it typically indicates that validation should occur when the value of the input changes.
-   * @param {boolean} value A boolean indicating whether to enable or disable the `validate-on-change` attribute.
-   */
-  set validateOnChange(value) {
-    if (value) {
-      this.setAttribute("validate-on-change", "");
-    } else {
-      this.removeAttribute("validate-on-change");
-    }
-  }
-  /**
-   * Getter for the validateOnChange attribute.
-   * @returns {boolean} Whether the attribute is present.
-   */
-  get validateOnChange() {
-    return this.hasAttribute("validate-on-change");
-  }
   /**
    * Sets the maximum number of options allowed.
    * @param { number | object} value The value to set as the maximum number of options.
@@ -268,20 +258,6 @@ class Select extends FormAssociatedElement {
   get offset() {
     return this.getAttribute("offset") || "5";
   }
-  /**
-   * Sets the label value.
-   * @param {Array} value The selected value to set.
-   */
-  set selected(value) {
-    this._selected = value;
-  }
-  /**
-   * Returns the selected value.
-   * @returns {Array} The selected value.
-   */
-  get selected() {
-    return this._selected;
-  }
   /**
    * Sets the selected options for the object.
    * @param {Array|object} value The new value for the selected options. It can be an array or object containing the selected options.
@@ -497,22 +473,21 @@ class Select extends FormAssociatedElement {
     this.slotStart = slotStart;
     this.slotEnd = slotEnd;
     this.input = input;
-    this.display = display;
-    this.optionsWrapper = optionsWrapper;
+    this.displayInput = display;
     this.chips = chips;
     this.clear = clear;
     this.list = list;
     return fragment;
   }
   /**
-   * Performs actions and binds events after the component's markup and state are initialized.
-   * Actions include setting up event listeners, managing option elements, handling focus and blur behaviors,
-   * synchronizing the selected options, and managing a find functionality for filtering options.
-   * @returns {void} Does not return a value. The method operates by updating the state and behavior of the component.
+   * Executes post-render logic for the custom element.
+   * This includes validation, event listener registration, managing custom attributes, and
+   * handling options initialization for the component.
+   * @returns {void} This method does not return any value.
    */
   afterDraw() {
     var _a, _b;
-    this.validate(this.selectedOptions);
+    this.validate();
     if (this.hasAttribute("invalid")) {
       this.showInvalidMessage();
     }
@@ -521,8 +496,6 @@ class Select extends FormAssociatedElement {
     });
     this.selectedOptions = __privateMethod(this, _Select_instances, getSelectedOptions_fn).call(this);
     this.selectOptions(this.value);
-    this.selected = __privateMethod(this, _Select_instances, getSelected_fn).call(this);
-    this.selections(true);
     if (this.lazy) {
       event.addListener(this.popup, "wje-popup:show", null, (e) => {
         if (this._wasOppened) return;
@@ -589,16 +562,17 @@ class Select extends FormAssociatedElement {
     return this.querySelectorAll("wje-option");
   }
   /**
-   * Handles the selection change.
-   * @param {Element[]} options The option that changed.
-   * @param {number} length The length of the selected options.
+   * Handles changes in the selection for a component, updating internal values, input fields,
+   * and visual presentation (like chips or slots) as per the given selection options.
+   * @param {Array|null} options The collection of selected option elements. If null, no options are selected.
+   * @param {number} length The total number of selected options.
+   * @returns {void}
    */
   selectionChanged(options = null, length = 0) {
-    var _a, _b, _c, _d, _e;
-    this.selected = __privateMethod(this, _Select_instances, getSelected_fn).call(this);
+    var _a, _b, _c;
     if (this.hasAttribute("multiple")) {
-      this.value = this.selectedOptions.map((el) => el.value).reverse();
-      this.input.value = this.selected.map((a) => a.value).join(" ").trim();
+      this.value = options.map((el) => el.value).reverse();
+      this.input.value = this.value.map((a) => a).join(" ").trim();
       if (this.placeholder && length === 0) {
         this.chips.innerHTML = this.placeholder;
       } else {
@@ -609,39 +583,32 @@ class Select extends FormAssociatedElement {
       }
     } else {
       const option = options == null ? void 0 : options.at(0);
-      this.value = (_b = (_a = this.selectedOptions) == null ? void 0 : _a.map((el) => el.value)) == null ? void 0 : _b.at(0);
-      this.input.value = ((_c = this.selected[0]) == null ? void 0 : _c.value) || "";
-      this.display.value = ((_e = (_d = this.selectedOptions[0]) == null ? void 0 : _d.textContent) == null ? void 0 : _e.trim()) || "";
+      this.value = ((_a = options == null ? void 0 : options.map((el) => el.value)) == null ? void 0 : _a.at(0)) || "";
+      this.input.value = this.value[0] || "";
+      this.displayInput.value = ((_c = (_b = options[0]) == null ? void 0 : _b.textContent) == null ? void 0 : _c.trim()) || "";
+      this.slotStart.innerHTML = "";
+      this.slotEnd.innerHTML = "";
       if (option && option instanceof HTMLElement) {
-        this.slotStart.innerHTML = "";
         let optionSlotStart = option == null ? void 0 : option.querySelector("wje-option > [slot=start]");
         if (optionSlotStart) {
-          this.slotStart.appendChild(optionSlotStart.cloneNode(true));
+          setTimeout(() => {
+            this.slotStart.append(optionSlotStart.cloneNode(true));
+          }, 0);
         }
-        this.slotEnd.innerHTML = "";
         let optionSlotEnd = option == null ? void 0 : option.querySelector("wje-option > [slot=end]");
         if (optionSlotEnd) {
-          this.slotEnd.appendChild(optionSlotEnd.cloneNode(true));
+          setTimeout(() => {
+            this.slotEnd.append(optionSlotEnd.cloneNode(true));
+          }, 0);
         }
       }
     }
   }
   /**
-   * Updates the selected options and their corresponding chips.
-   * @param {boolean} [silence] Determines whether to suppress the "wje-select:change" event.
-   * @returns {void}
-   * @description
-   * This method fetches the currently selected options and updates the `selectedOptions` array.
-   * It clears and rebuilds the chips representing the selected items in the UI.
-   * If the number of selected options reaches the maximum allowed (`maxOptions`), it stops updating the counter.
-   * Optionally, it dispatches a custom event when the selection changes unless `silence` is set to `true`.
-   * //@fires wje-select:change - Dispatched when the selection changes, unless `silence` is `true`.
-   * @example
-   * // Call the method and allow event dispatch
-   * selections();
-   * @example
-   * // Call the method without dispatching the event
-   * selections(true);
+   * Handles the logic for updating selections based on the current selected options,
+   * updating chips content, and dispatching change events if necessary.
+   * @param {boolean} [silence] If true, suppresses the dispatch of a custom change event.
+   * @returns {void} This method does not return a value.
    */
   selections(silence = false) {
     if (this.selectedOptions.length >= +this.maxOptions) {
@@ -659,9 +626,9 @@ class Select extends FormAssociatedElement {
     event.dispatchCustomEvent(this, "wje-select:change");
   }
   /**
-   * Manages the display of a counter element to indicate the number of items exceeding the maximum allowed options.
-   * - If the number of selected items equals the maximum allowed, the counter element is removed.
-   * - If the counter element doesn't exist and the number of items exceeds the maximum, it is created and updated.
+   * Updates the counter element to reflect the current state of selected values relative to the maximum allowed options.
+   * If the maximum options are selected, the counter element is removed. If it does not already exist and needs to be displayed, it is created.
+   * @returns {void} Does not return a value.
    */
   counter() {
     if (this.counterEl && this.value.length === +this.maxOptions) {
@@ -677,9 +644,9 @@ class Select extends FormAssociatedElement {
     this.counterEl.innerText = `+${this.value.length - +this.maxOptions}`;
   }
   /**
-   * Returns a chip element.
-   * @param {Element} option The option to get the chip for.
-   * @returns {Element} The chip element.
+   * Creates and returns a chip element with specified properties and a label.
+   * @param {object} option The configuration object for the chip. Typically includes properties such as value and textContent to set up the chip's label and data.
+   * @returns {HTMLElement} The newly created chip element with a label and default properties.
    */
   getChip(option) {
     let chip = document.createElement("wje-chip");
@@ -723,10 +690,13 @@ class Select extends FormAssociatedElement {
     return item;
   }
   /**
-   * Adds an option to the select element.
-   * @param {any} optionData The data for the option to be added.
-   * @param {boolean} [silent] Whether to suppress any events triggered by the addition of the option.
-   * @param {object} [map] The mapping object specifying the properties of the option data to be used for the value and text of the option.
+   * Adds a new option to the component.
+   * @param {object} optionData The data used to create the new option.
+   * @param {boolean} [silent] Whether the addition should trigger events or not.
+   * @param {object} [map] Mapping of keys to identify value and text in the optionData.
+   * @param {string} [map.value] The key in optionData that represents the value of the option.
+   * @param {string} [map.text] The key in optionData that represents the text of the option.
+   * @returns {void}
    */
   addOption(optionData, silent = false, map = { value: "value", text: "text" }) {
     if (!optionData) return;
@@ -739,10 +709,14 @@ class Select extends FormAssociatedElement {
     this.appendChild(option);
   }
   /**
-   * Adds options to the select element.
-   * @param {Array | object} optionsData The options data to be added. Can be an array of objects or a single object.
-   * @param {boolean} [silent] Indicates whether to trigger events when adding options. Default is false.
-   * @param {object} [map] The mapping object that specifies the properties of the options data object. Default is { value: "value", text: "text" }.
+   * Adds one or more options to a collection. If the input is an array, it adds each option within the array.
+   * Otherwise, it adds a single option.
+   * @param {Array | object} optionsData The data representing the options to be added. It can be a single object or an array of objects.
+   * @param {boolean} [silent] Optional flag to determine if events or notifications should be suppressed while adding options.
+   * @param {object} [map] An optional mapping object specifying how to map data properties to value and text for the options.
+   * @param {string} [map.value] The property in the optionsData that represents the value of the option.
+   * @param {string} [map.text] The property in the optionsData that represents the text of the option.
+   * @returns {void}
    */
   addOptions(optionsData, silent = false, map = { value: "value", text: "text" }) {
     if (!Array.isArray(optionsData)) {
@@ -754,9 +728,10 @@ class Select extends FormAssociatedElement {
     }
   }
   /**
-   * Selects an option with the specified value.
+   * Selects an option from the available options within the component.
    * @param {string} value The value of the option to be selected.
-   * @param {boolean} [silent] Whether to suppress firing events.
+   * @param {boolean} [silent] Determines whether the selection should trigger notification or updates. Defaults to false.
+   * @returns {void} Does not return a value.
    */
   selectOption(value, silent = false) {
     if (!value) return;
@@ -767,9 +742,11 @@ class Select extends FormAssociatedElement {
     if (this.drawingStatus > this.drawingStatuses.START) this.selections(silent);
   }
   /**
-   * Selects one or multiple options in the select element.
-   * @param {Array|any} values The value(s) of the option(s) to be selected.
-   * @param {boolean} [silent] Whether to trigger the change event or not.
+   * Selects multiple options based on the provided values. If a single value is provided, it selects that option.
+   * If an array of values is provided, it iterates through the array and selects each option.
+   * @param {any|any[]} values A single value or an array of values to be selected.
+   * @param {boolean} [silent] Determines whether the selection action should occur silently without triggering other side effects or events.
+   * @returns {void} This method does not return a value.
    */
   selectOptions(values, silent = false) {
     if (!Array.isArray(values)) {
@@ -781,9 +758,9 @@ class Select extends FormAssociatedElement {
     }
   }
   /**
-   * Clones and appends an icon from a template with slot "check" to the given option element.
-   * @param {HTMLElement} option The target option element where the "check" icon will be added.
-   * @returns {void}
+   * Clones and appends an icon with the "check" slot to the specified option element.
+   * @param {HTMLElement} option The target HTML element to which the cloned "check" icon will be appended.
+   * @returns {void} This method does not return a value, but it modifies the DOM by appending a cloned "check" icon to the provided option element.
    */
   optionCheckSlot(option) {
     var _a;
@@ -796,35 +773,31 @@ class Select extends FormAssociatedElement {
     option.append(iconClone);
   }
   /**
-   * Checks if all elements in the `elements` array are present in the `options` array based on their `option` property.
-   * @param {Array} elements The array of elements to check. Each element should have an `option` property.
-   * @param {Array} options The array of options to verify against.
-   * @returns {boolean} Returns true if all elements in the `elements` array are found within the `options` array, otherwise returns false.
+   * Clears all selected options and resets selections.
+   * The method ensures that all options are deselected, updates the internal state, validates the selections,
+   * propagates the validation status, and indicates invalid state if necessary.
+   * @returns {void} No value is returned by this method.
    */
-  areAllElementsInOptions(elements, options) {
-    if (elements.length === 0) return false;
-    return elements.every(
-      (el) => options.some((opt) => JSON.stringify(opt) === JSON.stringify(el.option))
-    );
-  }
   clearSelections() {
-    this.selected = [];
     this.selectedOptions = [];
     this.getAllOptions().forEach((option) => {
       option.selected = false;
     });
     this.selections();
+    this.validate();
+    this.propagateValidation();
+    if (this.hasAttribute("invalid")) {
+      this.showInvalidMessage();
+    }
   }
 }
 _addedOptions = new WeakMap();
 _htmlOptions = new WeakMap();
 _Select_instances = new WeakSet();
 /**
- * Processes the provided item to retrieve its corresponding value and text
- * based on the configuration of `wje-options`, then updates and returns
- * the selected item's HTML representation.
- * @param {any} item The input item for which the value and text are determined.
- * @returns {string} The HTML representation of the selected item's value.
+ * Processes the given item and retrieves the corresponding value from the selected options.
+ * @param {string} item The key to search for in the selected options.
+ * @returns {string} The text content associated with the selected item, or an empty string if not found.
  */
 htmlSelectedItem_fn = function(item) {
   var _a;
@@ -834,21 +807,8 @@ htmlSelectedItem_fn = function(item) {
   return this.htmlSelectedItem(value);
 };
 /**
- * Returns the selected options.
- * @returns {Array} The selected options.
- */
-getSelected_fn = function() {
-  return this.selectedOptions.map((option) => {
-    return {
-      value: option.value,
-      text: __privateMethod(this, _Select_instances, htmlSelectedItem_fn).call(this, option.value)
-      // option.textContent.trim(),
-    };
-  });
-};
-/**
- * Returns the selected options as HTML.
- * @returns {NodeList} The selected options as HTML.
+ * Retrieves the list of selected options within the component.
+ * @returns {Array<Element>} An array of elements representing the options that are currently selected.
  */
 getSelectedOptions_fn = function() {
   return Array.from(this.querySelectorAll("wje-option[selected]"));