wj-elements 0.7.6 → 0.8.0

package/dist/wje-select.js

@@ -9,1279 +9,453 @@ 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, _portaledOptionRecords, _remoteOptionsLoaded, _isRemoteOptionsLoading, _Select_instances, htmlSelectedItem_fn, getSelectedOptions_fn, hasVisibleOptions_fn, updateEmptyState_fn, _applySearchFilter, _handleOptionsLoad, _onMenuItemClickCapture, _syncPortalStyles, copyPortalCustomProperties_fn, syncOptionOwners_fn, portalOptions_fn, _restorePortaledOptions, focusFindInput_fn, syncOptionCheckbox_fn;
-import { F as FormAssociatedElement } from "./form-associated-element-DEQ4y-jn.js";
-import { event } from "./event.js";
-import { Localizer } from "./localize.js";
-import Button from "./wje-button.js";
+var _t, _e, _i, _s, _r, _c_instances, m_fn, o_fn, b_fn, c_fn, _h, _p, _n, _a, g_fn, w_fn, v_fn, _l, d_fn, u_fn;
+import { F as t } from "./form-associated-element-BjeJn7j8.js";
+import { event as e } from "./event.js";
+import { Localizer as i } from "./localize.js";
+import s from "./wje-button.js";
 import "./wje-popup.js";
-import { I as Icon } from "./icon-CReYMzAK.js";
-import Label from "./wje-label.js";
-import Chip from "./wje-chip.js";
-import Input from "./wje-input.js";
-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-CwXvVFK7.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    label {\n        margin: var(--wje-select-label-margin);\n        padding: var(--wje-select-label-padding);\n        display: var(--wje-select-label-display);\n        opacity: 1;\n        cursor: text;\n        transition: opacity 0.2s ease;\n        line-height: var(--wje-select-label-line-height);\n        font-size: var(--wje-select-label-font-size);\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        label {\n            &.fade {\n                opacity: 0.5;\n                font-size: 12px;\n                letter-spacing: normal;\n            }\n        }\n    }\n    &.standard {\n        .wrapper {\n            height: var(--wje-select-height);\n            box-sizing: border-box;\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 minmax(0, 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    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    outline: 0;\n    font-size: 14px !important;\n}\n\n.display-wrapper {\n    display: block;\n    min-width: 0;\n    width: 100%;\n    position: relative;\n}\n\n.display-input {\n    position: absolute;\n    inset: 0;\n    opacity: 0;\n    pointer-events: none;\n}\n\n.display-text {\n    display: block;\n    min-width: 0;\n    width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\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}\n\n.display-text[data-placeholder-visible]::before {\n    content: attr(data-placeholder);\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    box-sizing: border-box;\n    min-width: 100%;\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-color: var(--wje-select-options-background-color);\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    position: relative;\n}\n\n.list:has(.empty:not([hidden])) {\n    min-height: 44px;\n}\n\n.empty {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: var(--wje-spacing-small);\n    color: var(--wje-select-color);\n    text-align: center;\n    background-color: var(--wje-select-options-background-color);\n    pointer-events: none;\n}\n\n.empty[hidden] {\n    display: none;\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]) .display-wrapper {\n    display: none;\n}\n\n:host([multiple]) .chips {\n    display: flex;\n    grid-column: 2;\n    grid-row: 1;\n    flex: 1 1 auto;\n    min-width: 0;\n    max-width: 100%;\n    align-items: center;\n    flex-wrap: nowrap;\n    gap: var(--wje-spacing-3x-small);\n    overflow: hidden;\n    white-space: nowrap;\n}\n\n:host([disabled]) .input-wrapper {\n    opacity: 0.5;\n    pointer-events: none;\n    cursor: not-allowed;\n}\n\n.counter {\n    flex: 0 0 auto;\n    padding-inline: 0.5rem;\n}\n\nwje-chip {\n    --wje-chip-margin: 0 0.25rem 0 0;\n}\n\n:host([multiple]) wje-chip {\n    flex: 0 1 auto;\n    min-width: var(--wje-select-chip-min-width, 2.5rem);\n    max-width: 100%;\n}\n\n:host([multiple]) wje-chip:first-of-type {\n    flex-shrink: 10;\n}\n\n:host([multiple]) wje-button[part='clear'] {\n    grid-column: 3;\n    grid-row: 1;\n}\n\n:host([multiple]) .slot-end {\n    grid-column: 4;\n    grid-row: 1;\n}\n\n:host([multiple]) [slot='arrow'] {\n    grid-column: 5;\n    grid-row: 1;\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-color: var(--wje-select-error-background-color, var(--wje-tooltip-background));\n    padding: 0.25rem 0.5rem;\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: var(--wje-select-error-color, var(--wje-tooltip-color));\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}\n";
-const _Select = class _Select extends FormAssociatedElement {
+import { I as r } from "./icon-DmsqtDpL.js";
+import o from "./wje-label.js";
+import n from "./wje-chip.js";
+import a from "./wje-input.js";
+import l from "./wje-option.js";
+import d from "./wje-options.js";
+import p from "./wje-checkbox.js";
+import { P as h } from "./popup.element-CbkhthPP.js";
+const _c = class _c extends t {
   constructor() {
     super();
-    __privateAdd(this, _Select_instances);
-    __privateAdd(this, _addedOptions, []);
-    __privateAdd(this, _htmlOptions, []);
-    __privateAdd(this, _portaledOptionRecords, []);
-    __privateAdd(this, _remoteOptionsLoaded, false);
-    __privateAdd(this, _isRemoteOptionsLoading, false);
-    /**
-     * An object representing component dependencies with their respective classes.
-     * Each property in the object maps a custom component name (as a string key)
-     * to its corresponding class or constructor.
-     * @typedef {{[key: string]: Function}} Dependencies
-     * @property {Function} 'wje-button' Represents the Button component class.
-     * @property {Function} 'wje-popup' Represents the Popup component class.
-     * @property {Function} 'wje-icon' Represents the Icon component class.
-     * @property {Function} 'wje-label' Represents the Label component class.
-     * @property {Function} 'wje-chip' Represents the Chip component class.
-     * @property {Function} 'wje-input' Represents the Input component class.
-     * @property {Function} 'wje-option' Represents the Option component class.
-     * @property {Function} 'wje-checkbox' Represents the Checkbox component class.
-     */
-    __publicField(this, "dependencies", {
-      "wje-button": Button,
-      "wje-popup": Popup,
-      "wje-icon": Icon,
-      "wje-label": Label,
-      "wje-chip": Chip,
-      "wje-input": Input,
-      "wje-option": Option,
-      "wje-options": Options,
-      "wje-checkbox": Checkbox
-    });
+    __privateAdd(this, _c_instances);
+    __privateAdd(this, _t, []);
+    __privateAdd(this, _e, []);
+    __privateAdd(this, _i, []);
+    __privateAdd(this, _s, false);
+    __privateAdd(this, _r, false);
+    __publicField(this, "dependencies", { "wje-button": s, "wje-popup": h, "wje-icon": r, "wje-label": o, "wje-chip": n, "wje-input": a, "wje-option": l, "wje-options": d, "wje-checkbox": p });
     __publicField(this, "className", "Select");
-    /**
-     * 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();
-      e.stopPropagation();
-      e.stopImmediatePropagation();
-      if (this.readonly || this.disabled) return;
-      let allOptions = this.getAllOptions();
-      if (!this.hasAttribute("multiple")) {
-        allOptions.forEach((option) => {
-          if (option.value === e.target.value) {
-            this.processClickedOption(option);
-          } else {
-            option.selected = false;
-          }
-        });
-        this.popup.hide(false);
-      } else {
-        this.processClickedOption(e.target, true);
-      }
-      this.selections();
-      this.validate(this.selectedOptions);
-      this.pristine = false;
-      this.propagateValidation();
+    __publicField(this, "optionChange", (t2) => {
+      if (t2.preventDefault(), t2.stopPropagation(), t2.stopImmediatePropagation(), this.readonly || this.disabled) return;
+      let e2 = this.getAllOptions();
+      this.hasAttribute("multiple") ? this.processClickedOption(t2.target, true) : (e2.forEach((e3) => {
+        e3.value === t2.target.value ? this.processClickedOption(e3) : e3.selected = false;
+      }), this.popup.hide(false)), this.selections(), this.validate(this.selectedOptions), this.pristine = false, this.propagateValidation();
     });
-    /**
-     * 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;
-      this.selectedOptions = __privateMethod(this, _Select_instances, getSelectedOptions_fn).call(this, multiple ? this.selectedOptions : []);
-      this.syncAria();
+    __publicField(this, "processClickedOption", (t2, e2 = false) => {
+      const i2 = t2.hasAttribute("selected");
+      t2.selected = !i2, this.selectedOptions = __privateMethod(this, _c_instances, o_fn).call(this, e2 ? this.selectedOptions : []), this.syncAria();
     });
-    /**
-     * 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();
+    __publicField(this, "removeChip", (t2) => {
+      t2.target.parentNode.removeChild(t2.target), this.processClickedOption(t2.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")) {
-        optionsElement.setAttribute("search", e.target.value);
-      } else {
-        let value = e.target.value.trim().toLowerCase();
-        this.getAllOptions().forEach((option) => {
-          if (option.textContent.trim().toLowerCase().includes(value)) {
-            option.style.display = "block";
-          } else {
-            option.style.display = "none";
-          }
-        });
-        __privateMethod(this, _Select_instances, updateEmptyState_fn).call(this);
+    __privateAdd(this, _h, (t2) => {
+      const e2 = this.querySelector("wje-options");
+      if (e2 && e2.hasAttribute("lazy")) e2.setAttribute("search", t2.target.value);
+      else {
+        let e3 = t2.target.value.trim().toLowerCase();
+        this.getAllOptions().forEach((t3) => {
+          t3.textContent.trim().toLowerCase().includes(e3) ? t3.style.display = "block" : t3.style.display = "none";
+        }), __privateMethod(this, _c_instances, c_fn).call(this);
       }
     });
-    __privateAdd(this, _handleOptionsLoad, (e) => {
-      var _a;
-      __privateSet(this, _remoteOptionsLoaded, true);
-      __privateSet(this, _isRemoteOptionsLoading, false);
-      this.selectedOptions.forEach((option) => {
-        this.getAllOptions().forEach((el) => {
-          if (el.value === option.value) {
-            el.selected = true;
-          }
+    __privateAdd(this, _p, (t2) => {
+      var _a2;
+      __privateSet(this, _s, true), __privateSet(this, _r, false), this.selectedOptions.forEach((t3) => {
+        this.getAllOptions().forEach((e2) => {
+          e2.value === t3.value && (e2.selected = true);
         });
       });
-      const attrValue = ((_a = this.getAttribute("value")) == null ? void 0 : _a.split(" ")) || [];
-      attrValue.forEach((val) => {
-        const existingOption = Array.from(this.getAllOptions()).find((el) => el.value === val);
-        if (existingOption) {
-          existingOption.selected = true;
-        }
-      });
-      this.selectedOptions = __privateMethod(this, _Select_instances, getSelectedOptions_fn).call(this, this.selectedOptions);
-      this.selections(true);
-      __privateMethod(this, _Select_instances, updateEmptyState_fn).call(this);
-      __privateMethod(this, _Select_instances, syncOptionOwners_fn).call(this);
-      __privateMethod(this, _Select_instances, portalOptions_fn).call(this);
-      this.list.scrollTo(0, 0);
-      event.dispatchCustomEvent(this.popup, "wje-popup:content-ready");
+      (((_a2 = this.getAttribute("value")) == null ? void 0 : _a2.split(" ")) || []).forEach((t3) => {
+        const e2 = Array.from(this.getAllOptions()).find((e3) => e3.value === t3);
+        e2 && (e2.selected = true);
+      }), this.selectedOptions = __privateMethod(this, _c_instances, o_fn).call(this, this.selectedOptions), this.selections(true), __privateMethod(this, _c_instances, c_fn).call(this), __privateMethod(this, _c_instances, w_fn).call(this), __privateMethod(this, _c_instances, v_fn).call(this), this.list.scrollTo(0, 0), e.dispatchCustomEvent(this.popup, "wje-popup:content-ready");
     });
-    /**
-     * Prevent closing the parent <wje-select>'s popup when a nested <wje-dropdown>
-     * menu item is clicked. Closes only the dropdown that owns the clicked item.
-     * This captures the event at the document level (useCapture=true) so it can
-     * stop the global outside-click logic that would otherwise hide the select's popup.
-     */
-    __privateAdd(this, _onMenuItemClickCapture, (e) => {
-      const target = e.target;
-      if (!target || !target.closest) return;
-      const menuItem = target.closest("wje-menu-item");
-      if (!menuItem) return;
-      const dropdown = target.closest("wje-dropdown");
-      if (dropdown && typeof dropdown.hide === "function") {
-        dropdown.hide();
-      }
-      e.stopPropagation();
+    __privateAdd(this, _n, (t2) => {
+      const e2 = t2.target;
+      if (!e2 || !e2.closest) return;
+      if (!e2.closest("wje-menu-item")) return;
+      const i2 = e2.closest("wje-dropdown");
+      i2 && "function" == typeof i2.hide && i2.hide(), t2.stopPropagation();
     });
-    __privateAdd(this, _syncPortalStyles, (e) => {
-      var _a;
-      const container = (_a = e.detail) == null ? void 0 : _a.container;
-      if (!(container instanceof HTMLElement)) return;
-      container.setAttribute("data-wje-select-portal", "");
-      __privateMethod(this, _Select_instances, copyPortalCustomProperties_fn).call(this, container);
-      __privateMethod(this, _Select_instances, portalOptions_fn).call(this, container);
-      if (container.querySelector("style[data-wje-select-portal-style]")) return;
-      const style = document.createElement("style");
-      style.setAttribute("data-wje-select-portal-style", "");
-      style.textContent = _Select.portalStyles;
-      container.prepend(style);
+    __privateAdd(this, _a, (t2) => {
+      var _a2;
+      const e2 = (_a2 = t2.detail) == null ? void 0 : _a2.container;
+      if (!(e2 instanceof HTMLElement)) return;
+      if (e2.setAttribute("data-wje-select-portal", ""), __privateMethod(this, _c_instances, g_fn).call(this, e2), __privateMethod(this, _c_instances, v_fn).call(this, e2), e2.querySelector("style[data-wje-select-portal-style]")) return;
+      const i2 = document.createElement("style");
+      i2.setAttribute("data-wje-select-portal-style", ""), i2.textContent = _c.portalStyles, e2.prepend(i2);
     });
-    __privateAdd(this, _restorePortaledOptions, () => {
-      if (__privateGet(this, _portaledOptionRecords).length === 0) return;
-      __privateGet(this, _portaledOptionRecords).forEach(({ option, placeholder }) => {
-        option.removeEventListener("wje-option:change", this.optionChange);
-        option.removeAttribute("data-wje-select-portaled-option");
-        if (placeholder.parentNode) {
-          placeholder.parentNode.insertBefore(option, placeholder);
-          placeholder.remove();
-        }
-      });
-      __privateSet(this, _portaledOptionRecords, []);
+    __privateAdd(this, _l, () => {
+      0 !== __privateGet(this, _i).length && (__privateGet(this, _i).forEach(({ option: t2, placeholder: e2 }) => {
+        t2.removeEventListener("wje-option:change", this.optionChange), t2.removeAttribute("data-wje-select-portaled-option"), e2.parentNode && (e2.parentNode.insertBefore(t2, e2), e2.remove());
+      }), __privateSet(this, _i, []));
     });
-    this.localizer = new Localizer(this);
-    this.counterEl = null;
-    this._wasOppened = false;
-    this.native = null;
-    this.popup = null;
-    this.labelElement = null;
-    this.slotStart = null;
-    this.slotEnd = null;
-    this.input = null;
-    this.displayText = null;
-    this.chips = null;
-    this.clear = null;
-    this.list = null;
-    this.emptyState = null;
-    this._value = [];
-    this._selectedOptions = [];
-    this._instanceId = ++_Select._instanceId;
+    this.localizer = new i(this), this.counterEl = null, this._wasOppened = false, this.native = null, this.popup = null, this.labelElement = null, this.slotStart = null, this.slotEnd = null, this.input = null, this.displayText = null, this.chips = null, this.clear = null, this.list = null, this.emptyState = null, this._value = [], this._selectedOptions = [], this._instanceId = ++_c._instanceId;
+  }
+  set value(t2) {
+    const e2 = new FormData();
+    if (t2) {
+      let i2 = t2, s2 = t2;
+      Array.isArray(i2) ? s2 = i2.join(" ") : i2 = i2.split(" "), i2.forEach((t3) => {
+        e2.append(this.name, t3);
+      }), t2 = e2, this._value = i2, this.setAttribute("value", s2);
+    } else e2.delete(this.name), t2 = e2, this._value = [], this.removeAttribute("value");
+    this.internals.setFormValue(t2);
   }
-  /**
-   * Sets the value for the form field. Converts the input value into a FormData object
-   * if it is not already an array, splitting by spaces if necessary, and sets the
-   * internal form value as well as the selected values.
-   * @param {string|Array} value The value to be set. Can be a string (which will be
-   * split into an array by spaces) or an array of values.
-   */
-  set value(value) {
-    const formData = new FormData();
-    if (value) {
-      let data = value;
-      let dataString = value;
-      if (!Array.isArray(data)) {
-        data = data.split(" ");
-      } else {
-        dataString = data.join(" ");
-      }
-      data.forEach((v) => {
-        formData.append(this.name, v);
-      });
-      value = formData;
-      this._value = data;
-      this.setAttribute("value", dataString);
-    } else {
-      formData.delete(this.name);
-      value = formData;
-      this._value = [];
-      this.removeAttribute("value");
-    }
-    this.internals.setFormValue(value);
-  }
-  /**
-   * Retrieves the current value.
-   * @returns {any} The value of the `_value` property.
-   */
   get value() {
     return this._value;
   }
-  /**
-   * Sets the maximum number of options allowed.
-   * @param { number | object} value The value to set as the maximum number of options.
-   * If null, the 'max-options' attribute will be removed.
-   */
-  set maxOptions(value) {
-    if (value) {
-      this.setAttribute("max-options", value);
-    } else {
-      this.removeAttribute("max-options");
-    }
+  set maxOptions(t2) {
+    t2 ? this.setAttribute("max-options", t2) : this.removeAttribute("max-options");
   }
-  /**
-   * Retrieves the maximum number of options allowed.
-   * Parses the value of the 'max-options' attribute from the element and converts it to a number.
-   * If the attribute is not present or cannot be converted to a valid number, defaults to 1.
-   * @returns {number} The maximum number of options, or 0 if the attribute is not set or invalid.
-   */
   get maxOptions() {
     return +this.getAttribute("max-options") || 1;
   }
-  /**
-   * @summary Setter for the defaultValue attribute.
-   * This method sets the 'value' attribute of the custom input element to the provided value.
-   * The 'value' attribute represents the default value of the input element.
-   * @param {string} value The value to set as the default value.
-   */
-  set defaultValue(value) {
-    this.setAttribute("value", value);
+  set defaultValue(t2) {
+    this.setAttribute("value", t2);
   }
-  /**
-   * @summary Getter for the defaultValue attribute.
-   * This method retrieves the 'value' attribute of the custom input element.
-   * The 'value' attribute represents the default value of the input element.
-   * If the 'value' attribute is not set, it returns an empty string.
-   * @returns {string} The default value of the input element.
-   */
   get defaultValue() {
     return this.getAttribute("value") ?? "";
   }
-  /**
-   * Sets or removes the `portaled` attribute on the select.
-   * Mirrors the dropdown API so popup content can be rendered in a portal root.
-   * @param {boolean|string} value Determines whether and where the popup should be portaled.
-   */
-  set portaled(value) {
-    if (value) {
-      this.setAttribute("portaled", value);
-    } else {
-      this.removeAttribute("portaled");
-    }
+  set portaled(t2) {
+    t2 ? this.setAttribute("portaled", t2) : this.removeAttribute("portaled");
   }
-  /**
-   * Getter for the `portaled` attribute value.
-   * @returns {string} The configured portal target or an empty string for the default body portal.
-   */
   get portaled() {
     return this.getAttribute("portaled") || "";
   }
-  /**
-   * Checks whether popup content should be portaled.
-   * @returns {boolean} True when the `portaled` attribute is present.
-   */
   get isPortaled() {
     return this.hasAttribute("portaled");
   }
-  /**
-   * Sets the trigger value.
-   * @param {string} value The trigger value to set.
-   */
-  set trigger(value) {
-    this.setAttribute("trigger", value);
+  set trigger(t2) {
+    this.setAttribute("trigger", t2);
   }
-  /**
-   * Returns the trigger value.
-   * @returns {string} The trigger value.
-   */
   get trigger() {
     return this.getAttribute("trigger") || "click";
   }
-  /**
-   * Sets or removes the disabled state for the associated elements.
-   * @param {boolean} value A boolean indicating whether the elements should be disabled.
-   * If true, the disabled attribute is added to the elements. If false, the disabled attribute is removed.
-   */
-  set disabled(value) {
-    var _a, _b, _c, _d, _e, _f;
-    if (value) {
-      this.setAttribute("disabled", "");
-      (_a = this.input) == null ? void 0 : _a.setAttribute("disabled", "");
-      (_b = this.displayInput) == null ? void 0 : _b.setAttribute("disabled", "");
-      (_c = this.popup) == null ? void 0 : _c.setAttribute("disabled", "");
-    } else {
-      this.removeAttribute("disabled");
-      (_d = this.input) == null ? void 0 : _d.removeAttribute("disabled");
-      (_e = this.displayInput) == null ? void 0 : _e.removeAttribute("disabled");
-      (_f = this.popup) == null ? void 0 : _f.removeAttribute("disabled");
-    }
+  set disabled(t2) {
+    var _a2, _b, _c2, _d, _e2, _f;
+    t2 ? (this.setAttribute("disabled", ""), (_a2 = this.input) == null ? void 0 : _a2.setAttribute("disabled", ""), (_b = this.displayInput) == null ? void 0 : _b.setAttribute("disabled", ""), (_c2 = this.popup) == null ? void 0 : _c2.setAttribute("disabled", "")) : (this.removeAttribute("disabled"), (_d = this.input) == null ? void 0 : _d.removeAttribute("disabled"), (_e2 = this.displayInput) == null ? void 0 : _e2.removeAttribute("disabled"), (_f = this.popup) == null ? void 0 : _f.removeAttribute("disabled"));
   }
-  /**
-   * Retrieves the current state of the 'disabled' attribute.
-   * @returns {boolean} Returns true if the 'disabled' attribute is present, otherwise false.
-   */
   get disabled() {
     return this.hasAttribute("disabled");
   }
-  /**
-   * Sets the readonly state of the element. When set to true,
-   * the element and its associated inputs are marked as readonly or disabled.
-   * When set to false, the readonly and disabled attributes are removed,
-   * allowing user interaction.
-   * @param {boolean} value A boolean value indicating whether to set the
-   * element and its associated inputs to readonly (true) or not (false).
-   */
-  set readonly(value) {
-    var _a, _b, _c, _d, _e, _f;
-    if (value) {
-      this.setAttribute("readonly", "");
-      (_a = this.input) == null ? void 0 : _a.setAttribute("readonly", "");
-      (_b = this.displayInput) == null ? void 0 : _b.setAttribute("readonly", "");
-      (_c = this.popup) == null ? void 0 : _c.setAttribute("disabled", "");
-    } else {
-      this.removeAttribute("readonly");
-      (_d = this.input) == null ? void 0 : _d.removeAttribute("readonly");
-      (_e = this.displayInput) == null ? void 0 : _e.removeAttribute("readonly");
-      (_f = this.popup) == null ? void 0 : _f.removeAttribute("disabled");
-    }
+  set readonly(t2) {
+    var _a2, _b, _c2, _d, _e2, _f;
+    t2 ? (this.setAttribute("readonly", ""), (_a2 = this.input) == null ? void 0 : _a2.setAttribute("readonly", ""), (_b = this.displayInput) == null ? void 0 : _b.setAttribute("readonly", ""), (_c2 = this.popup) == null ? void 0 : _c2.setAttribute("disabled", "")) : (this.removeAttribute("readonly"), (_d = this.input) == null ? void 0 : _d.removeAttribute("readonly"), (_e2 = this.displayInput) == null ? void 0 : _e2.removeAttribute("readonly"), (_f = this.popup) == null ? void 0 : _f.removeAttribute("disabled"));
   }
-  /**
-   * Checks if the 'readonly' attribute is present on the element.
-   * @returns {boolean} Returns true if the 'readonly' attribute is set, otherwise false.
-   */
   get readonly() {
     return this.hasAttribute("readonly");
   }
-  /**
-   * Sets the maximum height value for the element.
-   * If a value is provided, it sets the 'max-height' attribute on the element.
-   * If no value is provided, it removes the 'max-height' attribute from the element.
-   * @param {string|null} value The maximum height to be set. If null or undefined, the attribute is removed.
-   */
-  set maxHeight(value) {
-    if (value) {
-      this.setAttribute("max-height", value);
-    } else {
-      this.removeAttribute("max-height");
-    }
+  set maxHeight(t2) {
+    t2 ? this.setAttribute("max-height", t2) : this.removeAttribute("max-height");
   }
-  /**
-   * Retrieves the maximum height value, which is determined by the 'max-height' attribute.
-   * If the attribute is not set, a default value of '200px' is returned.
-   * @returns {string} The maximum height value as a string.
-   */
   get maxHeight() {
     return this.getAttribute("max-height") || "auto";
   }
-  /**
-   * Sets the offset attribute for the element.
-   * @param {string} value The value to assign to the offset attribute.
-   */
-  set offset(value) {
-    this.setAttribute("offset", value);
+  set offset(t2) {
+    this.setAttribute("offset", t2);
   }
-  /**
-   * Gets the value of the offset attribute of the current element.
-   * If the offset attribute is not present, returns a default value of '0'.
-   * @returns {string} The value of the offset attribute or the default value '0'.
-   */
   get offset() {
     return this.getAttribute("offset") || "5";
   }
-  /**
-   * 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.
-   */
-  set selectedOptions(value) {
-    this._selectedOptions = value;
+  set selectedOptions(t2) {
+    this._selectedOptions = t2;
   }
-  /**
-   * Retrieves the selected options.
-   * @returns {Array} An array containing the currently selected options. If no options are selected, an empty array is returned.
-   */
   get selectedOptions() {
     return this._selectedOptions || [];
   }
-  /**
-   * Sets the `lazy` attribute on the element. If the provided value is truthy, the `lazy` attribute is added. If the value is falsy, the `lazy` attribute is removed.
-   * @param {boolean} value A boolean value indicating whether to add or remove the `lazy` attribute. If `true`, the attribute is added; if `false`, it is removed.
-   */
-  set lazy(value) {
-    if (value) {
-      this.setAttribute("lazy", "");
-    } else {
-      this.removeAttribute("lazy");
-    }
+  set lazy(t2) {
+    t2 ? this.setAttribute("lazy", "") : this.removeAttribute("lazy");
   }
-  /**
-   * Getter for the 'lazy' property.
-   * @returns {boolean} Returns true if the 'lazy' attribute is present on the element, otherwise false.
-   */
   get lazy() {
     return this.hasAttribute("lazy");
   }
-  /**
-   * Sets or removes the 'no-size' attribute on an element.
-   * @param {boolean} value A boolean indicating whether to add or remove the 'no-size' attribute. If true, the attribute is added; if false, the attribute is removed.
-   */
-  set noSize(value) {
-    if (value) {
-      this.setAttribute("no-size", "");
-    } else {
-      this.removeAttribute("no-size");
-    }
+  set noSize(t2) {
+    t2 ? this.setAttribute("no-size", "") : this.removeAttribute("no-size");
   }
-  /**
-   * Gets the value of the 'no-size' attribute for the element.
-   * @returns {boolean} True if the 'no-size' attribute is present, otherwise false.
-   */
   get noSize() {
     return this.hasAttribute("no-size");
   }
-  /**
-   * Getter for the customErrorDisplay attribute.
-   * @returns {boolean} Whether the attribute is present.
-   */
   get customErrorDisplay() {
     return this.hasAttribute("custom-error-display");
   }
-  /**
-   * Retrieves the complete list of options available for the component.
-   * The options are determined by combining elements from various sources, including loaded options, added options, and HTML-sourced options.
-   * If a `wje-options` element is present within the component, its loaded options are included in the merged list.
-   * In the absence of a `wje-options` element, duplicates among the added and HTML options are removed, retaining their order.
-   * @returns {Array<object>} An array containing all the available options, combining the loaded, added, and HTML-based options, with duplicates removed where applicable.
-   */
   get options() {
     if (this.querySelector("wje-options")) {
-      const allOptions = [...this.querySelector("wje-options").loadedOptions, ...__privateGet(this, _addedOptions), ...__privateGet(this, _htmlOptions)];
-      return allOptions;
-    } else {
-      const allOptions = [...__privateGet(this, _addedOptions), ...__privateGet(this, _htmlOptions)];
-      return Array.from(
-        new Map(allOptions.reverse().map((obj) => [obj.value, obj])).values()
-      ).reverse();
+      return [...this.querySelector("wje-options").loadedOptions, ...__privateGet(this, _t), ...__privateGet(this, _e)];
+    }
+    {
+      const t2 = [...__privateGet(this, _t), ...__privateGet(this, _e)];
+      return Array.from(new Map(t2.reverse().map((t3) => [t3.value, t3])).values()).reverse();
     }
   }
-  /**
-   * Returns the CSS styles for the component.
-   * @static
-   * @returns {CSSStyleSheet}
-   */
   static get cssStyleSheet() {
-    return styles;
+    return ":host{margin-bottom:var(--wje-select-margin-bottom);width:100%;display:block}:host [slot=arrow]{transform:rotate(0);transition:all .2s ease-in}:host label{margin:var(--wje-select-label-margin);padding:var(--wje-select-label-padding);display:var(--wje-select-label-display);opacity:1;cursor:text;transition:opacity .2s ease;line-height:var(--wje-select-label-line-height);font-size:var(--wje-select-label-font-size)}.native-select{position:relative}.native-select.default .wrapper{display:block;background-color:var(--wje-select-background);border-width:var(--wje-select-border-width);border-style:var(--wje-select-border-style);border-color:var(--wje-select-border-color);border-radius:var(--wje-select-border-radius);padding-inline:.5rem;padding-top:.125rem;padding-bottom:.125rem}.native-select.default .input-wrapper{padding:0;min-height:28px;margin-top:-4px}.native-select.default.focused wje-label{opacity:.67;font-size:12px;letter-spacing:normal}.native-select.default label.fade{opacity:.5;font-size:12px;letter-spacing:normal}.native-select.standard .wrapper{height:var(--wje-select-height);box-sizing:border-box;background-color:var(--wje-select-background);border-width:var(--wje-select-border-width);border-style:var(--wje-select-border-style);border-color:var(--wje-select-border-color);border-radius:var(--wje-select-border-radius)}.native-select.standard .input-wrapper{background:transparent;width:100%}.native-select.standard slot[name=error]{position:static;background:transparent;padding:.25rem 0;left:auto;transform:none;color:var(--wje-input-color-invalid);font-size:12px;line-height:normal}.wrapper{display:flex;width:100%}.input-wrapper{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;align-items:center;background-color:var(--wje-select-background);color:var(--wje-select-color);line-height:var(--wje-select-line-height);-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:2px .5rem;font-size:14px!important;font-weight:400;vertical-align:middle}.input-wrapper input[readonly]{pointer-events:none;caret-color:transparent}input{color:var(--wje-select-color);line-height:var(--wje-select-line-height);font-weight:400;letter-spacing:.01em;border:medium;height:25px;min-height:25px;padding:0;background:none;box-shadow:none;width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;outline:0;font-size:14px!important}.display-wrapper{display:block;min-width:0;width:100%;position:relative}.display-input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;pointer-events:none}.display-text{display:block;min-width:0;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--wje-select-color);line-height:var(--wje-select-line-height);font-size:14px!important;font-weight:400;letter-spacing:.01em}.display-text[data-placeholder-visible]:before{content:attr(data-placeholder)}::placeholder{opacity:1}:host [active] .wrapper{border-radius:var(--wje-select-border-radius)}:host [active] [slot=arrow]{transform:rotate(180deg);transition:all .2s ease-in}.options-wrapper{box-sizing:border-box;min-width:100%;border-width:var(--wje-select-options-border-width);border-style:var(--wje-select-options-border-style);border-color:var(--wje-select-options-border-color);border-radius:var(--wje-select-options-border-radius);margin-top:calc(0px - var(--wje-select-border-width));background-color:var(--wje-select-options-background-color);overflow:hidden}.find{margin-block:var(--wje-select-find-margin-block);margin-inline:var(--wje-select-find-margin-inline);width:var(--wje-select-find-width)}.list{overflow:auto;height:100%;position:relative}.list:has(.empty:not([hidden])){min-height:44px}.empty{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;padding:var(--wje-spacing-small);color:var(--wje-select-color);text-align:center;background-color:var(--wje-select-options-background-color);pointer-events:none}.empty[hidden]{display:none}.options-wrapper:has(.find) .list{height:calc(100% - 32px - 2 * var(--wje-select-find-margin-block))}:host([multiple]) input{position:absolute;z-index:-1;top:0;left:0;width:0;height:0;opacity:0}:host([multiple]) .display-wrapper{display:none}:host([multiple]) .chips{display:flex;grid-column:2;grid-row:1;flex:1 1 auto;min-width:0;max-width:100%;align-items:center;flex-wrap:nowrap;gap:var(--wje-spacing-3x-small);overflow:hidden;white-space:nowrap}:host([disabled]) .input-wrapper{opacity:.5;pointer-events:none;cursor:not-allowed}.counter{flex:0 0 auto;padding-inline:.5rem}wje-chip{--wje-chip-margin: 0 .25rem 0 0}:host([multiple]) wje-chip{flex:0 1 auto;min-width:var(--wje-select-chip-min-width, 2.5rem);max-width:100%}:host([multiple]) wje-chip:first-of-type{flex-shrink:10}:host([multiple]) wje-button[part=clear]{grid-column:3;grid-row:1}:host([multiple]) .slot-end{grid-column:4;grid-row:1}:host([multiple]) [slot=arrow]{grid-column:5;grid-row:1}wje-button{--wje-padding-top: .25rem;--wje-padding-start: .25rem;--wje-padding-end: .25rem;--wje-padding-bottom: .25rem;--wje-button-margin-inline: 0 .25rem}.slot-start:not(:empty),.slot-end:not(:empty){margin-right:.5rem}slot[name=error]{display:none}:host([invalid]) slot[name=error]{display:block}slot[name=error]{display:none;position:absolute;max-width:100%;min-width:auto;border-radius:50px;background-color:var(--wje-select-error-background-color, var(--wje-tooltip-background));padding:.25rem .5rem;top:0;left:50%;transform:translate(-50%,-50%);color:var(--wje-select-error-color, var(--wje-tooltip-color));font-size:var(--wje-font-size-small);width:max-content;line-height:normal}.input-hidden{position:absolute;top:0;left:0;width:100%;height:100%;padding:0;margin:0;opacity:0;z-index:-1}:host([required]) .wrapper:after{color:var(--wje-input-color-invalid);content:var(--wje-input-required-symbol);font-size:24px;position:absolute;right:12px;top:0}:host([required]) .standard .input-wrapper:after{right:13px;top:-20px}";
   }
-  /**
-   * Returns the list of attributes to observe for changes.
-   * @static
-   * @returns {Array<string>}
-   */
   static get observedAttributes() {
     return ["active", "disabled", "readonly", "portaled"];
   }
-  /**
-   * Sets up the attributes for the component.
-   */
   setupAttributes() {
-    this.isShadowRoot = "open";
-    this.syncAria();
+    this.isShadowRoot = "open", this.syncAria();
   }
   beforeDraw() {
-    if (this.hasAttribute("value")) {
-      this.value = this.getAttribute("value");
-    } else {
-      const selectedOptions = __privateMethod(this, _Select_instances, getSelectedOptions_fn).call(this);
-      if (selectedOptions.length > 0) {
-        const values = selectedOptions.map((opt) => opt.value);
-        this.value = this.hasAttribute("multiple") ? values : values[0];
+    if (this.hasAttribute("value")) this.value = this.getAttribute("value");
+    else {
+      const t2 = __privateMethod(this, _c_instances, o_fn).call(this);
+      if (t2.length > 0) {
+        const e2 = t2.map((t3) => t3.value);
+        this.value = this.hasAttribute("multiple") ? e2 : e2[0];
       }
     }
   }
-  /**
-   * Draws the component for the select.
-   * @returns {DocumentFragment}
-   */
   draw() {
-    let fragment = document.createDocumentFragment();
+    let t2 = document.createDocumentFragment();
     this.classList.add("wje-placement", this.placement ? "wje-" + this.placement : "wje-start");
-    let native = document.createElement("div");
-    native.setAttribute("part", "native");
-    native.classList.add("native-select", this.variant || "default");
-    let wrapper = document.createElement("div");
-    wrapper.classList.add("wrapper");
-    wrapper.setAttribute("slot", "anchor");
-    let label = document.createElement("label");
-    label.setAttribute("part", "label");
-    label.innerText = this.label || "";
-    let inputWrapper = document.createElement("div");
-    inputWrapper.setAttribute("part", "input-wrapper");
-    inputWrapper.classList.add("input-wrapper");
-    let slotStart = document.createElement("div");
-    slotStart.classList.add("slot-start");
-    let input = document.createElement("input");
-    input.setAttribute("type", "text");
-    input.value = this.value.join(" ").trim();
-    input.classList.add("input-hidden");
-    let display = document.createElement("input");
-    display.setAttribute("type", "text");
-    display.setAttribute("part", "input");
-    display.setAttribute("autocomplete", "off");
-    display.setAttribute("readonly", "");
-    display.setAttribute("placeholder", this.placeholder || "");
-    display.classList.add("display-input");
-    let displayWrapper = document.createElement("span");
-    displayWrapper.classList.add("display-wrapper");
-    let displayText = document.createElement("span");
-    displayText.setAttribute("part", "input selected-text");
-    displayText.classList.add("display-text");
-    displayText.dataset.placeholder = this.placeholder || "";
-    displayText.toggleAttribute("data-placeholder-visible", Boolean(this.placeholder));
-    displayText.setAttribute("aria-hidden", "true");
-    displayWrapper.append(display, displayText);
-    if (this.required) {
-      input.setAttribute("required", "");
-      display.setAttribute("required", "");
-    }
-    if (this.disabled) {
-      input.setAttribute("disabled", "");
-      display.setAttribute("disabled", "");
-    }
-    if (this.readonly) {
-      input.setAttribute("readonly", "");
-      display.setAttribute("readonly", "");
-    }
-    let slotEnd = document.createElement("div");
-    slotEnd.classList.add("slot-end");
-    let arrow = document.createElement("wje-icon");
-    arrow.setAttribute("name", "chevron-down");
-    arrow.setAttribute("slot", "arrow");
-    let chips = document.createElement("div");
-    chips.classList.add("chips");
-    chips.innerText = this.placeholder || "";
-    let optionsWrapper = document.createElement("div");
-    optionsWrapper.setAttribute("part", "options-wrapper");
-    optionsWrapper.classList.add("options-wrapper");
-    optionsWrapper.style.setProperty("height", this.maxHeight);
-    let list = document.createElement("div");
-    list.classList.add("list");
-    this._ariaListId = this.id ? `${this.id}-listbox` : `wje-select-${this._instanceId}-listbox`;
-    list.id = this._ariaListId;
-    list.setAttribute("role", "listbox");
-    if (this.hasAttribute("multiple")) list.setAttribute("aria-multiselectable", "true");
-    let slot = document.createElement("slot");
-    let emptyState = document.createElement("div");
-    emptyState.setAttribute("part", "empty");
-    emptyState.setAttribute("role", "option");
-    emptyState.setAttribute("aria-disabled", "true");
-    emptyState.setAttribute("aria-selected", "false");
-    emptyState.classList.add("empty");
-    emptyState.hidden = true;
-    emptyState.textContent = this.localizer.translate("wj.select.empty");
-    let clear = document.createElement("wje-button");
-    clear.setAttribute("fill", "link");
-    clear.setAttribute("part", "clear");
-    clear.setAttribute("stop-propagation", "");
-    let clearIcon = document.createElement("wje-icon");
-    clearIcon.setAttribute("name", "x");
-    let error = document.createElement("div");
-    error.setAttribute("slot", "error");
-    let errorSlot = document.createElement("slot");
-    errorSlot.setAttribute("name", "error");
-    const optionsElement = this.querySelector("wje-options");
-    const hasRemoteOptions = optionsElement instanceof HTMLElement;
-    if (hasRemoteOptions) {
-      __privateSet(this, _isRemoteOptionsLoading, !__privateGet(this, _remoteOptionsLoaded));
-    } else {
-      __privateSet(this, _remoteOptionsLoaded, false);
-      __privateSet(this, _isRemoteOptionsLoading, false);
-    }
-    let popup = document.createElement("wje-popup");
-    popup.setAttribute("placement", "bottom-start");
-    if (!this.noSize) {
-      popup.setAttribute("size", "");
-      popup.contentAwareSize = true;
-      popup.style.setProperty("--wje-popup-loader-inset", "var(--wje-select-options-border-width, 1px)");
-    }
-    popup.setAttribute("part", "popup");
-    popup.setAttribute("offset", this.offset);
-    if (this.isPortaled) {
-      popup.setAttribute("portal", this.portaled);
-    }
-    if (this.lazy && !this._wasOppened || hasRemoteOptions && !__privateGet(this, _remoteOptionsLoaded)) {
-      popup.setAttribute("loader", "");
-    } else {
-      popup.removeAttribute("loader");
-    }
-    if (this.disabled) {
-      popup.setAttribute("disabled", "");
-    } else {
-      popup.removeAttribute("disabled");
-    }
-    if (this.variant === "standard") {
-      if (this.hasAttribute("label")) native.appendChild(label);
-    } else {
-      wrapper.appendChild(label);
-    }
-    inputWrapper.append(slotStart);
-    inputWrapper.append(displayWrapper);
-    inputWrapper.append(input);
-    clear.append(clearIcon);
-    if (this.hasAttribute("multiple")) inputWrapper.append(chips);
-    if (this.hasAttribute("clearable")) inputWrapper.append(clear);
-    inputWrapper.appendChild(slotEnd);
-    inputWrapper.appendChild(arrow);
-    list.append(slot, emptyState);
-    if (this.hasAttribute("find")) {
-      let find = document.createElement("wje-input");
-      find.setAttribute("variant", "standard");
-      find.setAttribute("placeholder", "Hľadať");
-      find.setAttribute("part", "find");
-      find.clearable = true;
-      find.classList.add("find");
-      optionsWrapper.append(find);
-      this.findEl = find;
-    }
-    let slotFooter = document.createElement("slot");
-    slotFooter.setAttribute("name", "footer");
-    optionsWrapper.append(list);
-    optionsWrapper.append(slotFooter);
-    wrapper.append(inputWrapper);
-    popup.append(wrapper);
-    popup.append(optionsWrapper);
-    if (this.trigger === "click") popup.setAttribute("manual", "");
-    this.append(error);
-    native.append(popup);
-    native.append(errorSlot);
-    fragment.appendChild(native);
-    this.native = native;
-    this.popup = popup;
-    this.labelElement = label;
-    this.slotStart = slotStart;
-    this.slotEnd = slotEnd;
-    this.input = input;
-    this.displayInput = display;
-    this.displayText = displayText;
-    this.chips = chips;
-    this.clear = clear;
-    this.list = list;
-    this.emptyState = emptyState;
-    this.slotFooter = slotFooter;
-    this.syncAria();
-    return fragment;
+    let e2 = document.createElement("div");
+    e2.setAttribute("part", "native"), e2.classList.add("native-select", this.variant || "default");
+    let i2 = document.createElement("div");
+    i2.classList.add("wrapper"), i2.setAttribute("slot", "anchor");
+    let s2 = document.createElement("label");
+    s2.setAttribute("part", "label"), s2.innerText = this.label || "";
+    let r2 = document.createElement("div");
+    r2.setAttribute("part", "input-wrapper"), r2.classList.add("input-wrapper");
+    let o2 = document.createElement("div");
+    o2.classList.add("slot-start");
+    let n2 = document.createElement("input");
+    n2.setAttribute("type", "text"), n2.value = this.value.join(" ").trim(), n2.classList.add("input-hidden");
+    let a2 = document.createElement("input");
+    a2.setAttribute("type", "text"), a2.setAttribute("part", "input"), a2.setAttribute("autocomplete", "off"), a2.setAttribute("readonly", ""), a2.setAttribute("placeholder", this.placeholder || ""), a2.classList.add("display-input");
+    let l2 = document.createElement("span");
+    l2.classList.add("display-wrapper");
+    let d2 = document.createElement("span");
+    d2.setAttribute("part", "input selected-text"), d2.classList.add("display-text"), d2.dataset.placeholder = this.placeholder || "", d2.toggleAttribute("data-placeholder-visible", Boolean(this.placeholder)), d2.setAttribute("aria-hidden", "true"), l2.append(a2, d2), this.required && (n2.setAttribute("required", ""), a2.setAttribute("required", "")), this.disabled && (n2.setAttribute("disabled", ""), a2.setAttribute("disabled", "")), this.readonly && (n2.setAttribute("readonly", ""), a2.setAttribute("readonly", ""));
+    let p2 = document.createElement("div");
+    p2.classList.add("slot-end");
+    let h2 = document.createElement("wje-icon");
+    h2.setAttribute("name", "chevron-down"), h2.setAttribute("slot", "arrow");
+    let c2 = document.createElement("div");
+    c2.classList.add("chips"), c2.innerText = this.placeholder || "";
+    let u = document.createElement("div");
+    u.setAttribute("part", "options-wrapper"), u.classList.add("options-wrapper"), u.style.setProperty("height", this.maxHeight);
+    let m = document.createElement("div");
+    m.classList.add("list"), this._ariaListId = this.id ? `${this.id}-listbox` : `wje-select-${this._instanceId}-listbox`, m.id = this._ariaListId, m.setAttribute("role", "listbox"), this.hasAttribute("multiple") && m.setAttribute("aria-multiselectable", "true");
+    let b = document.createElement("slot"), w = document.createElement("div");
+    w.setAttribute("part", "empty"), w.setAttribute("role", "option"), w.setAttribute("aria-disabled", "true"), w.setAttribute("aria-selected", "false"), w.classList.add("empty"), w.hidden = true, w.textContent = this.localizer.translate("wj.select.empty");
+    let v = document.createElement("wje-button");
+    v.setAttribute("fill", "link"), v.setAttribute("part", "clear"), v.setAttribute("stop-propagation", "");
+    let g = document.createElement("wje-icon");
+    g.setAttribute("name", "x");
+    let f = document.createElement("div");
+    f.setAttribute("slot", "error");
+    let y = document.createElement("slot");
+    y.setAttribute("name", "error");
+    const A = this.querySelector("wje-options") instanceof HTMLElement;
+    A ? __privateSet(this, _r, !__privateGet(this, _s)) : (__privateSet(this, _s, false), __privateSet(this, _r, false));
+    let j = document.createElement("wje-popup");
+    if (j.setAttribute("placement", "bottom-start"), this.noSize || (j.setAttribute("size", ""), j.contentAwareSize = true, j.style.setProperty("--wje-popup-loader-inset", "var(--wje-select-options-border-width, 1px)")), j.setAttribute("part", "popup"), j.setAttribute("offset", this.offset), this.isPortaled && j.setAttribute("portal", this.portaled), this.lazy && !this._wasOppened || A && !__privateGet(this, _s) ? j.setAttribute("loader", "") : j.removeAttribute("loader"), this.disabled ? j.setAttribute("disabled", "") : j.removeAttribute("disabled"), "standard" === this.variant ? this.hasAttribute("label") && e2.appendChild(s2) : i2.appendChild(s2), r2.append(o2), r2.append(l2), r2.append(n2), v.append(g), this.hasAttribute("multiple") && r2.append(c2), this.hasAttribute("clearable") && r2.append(v), r2.appendChild(p2), r2.appendChild(h2), m.append(b, w), this.hasAttribute("find")) {
+      let t3 = document.createElement("wje-input");
+      t3.setAttribute("variant", "standard"), t3.setAttribute("placeholder", "Hľadať"), t3.setAttribute("part", "find"), t3.clearable = true, t3.classList.add("find"), u.append(t3), this.findEl = t3;
+    }
+    let x = document.createElement("slot");
+    return x.setAttribute("name", "footer"), u.append(m), u.append(x), i2.append(r2), j.append(i2), j.append(u), "click" === this.trigger && j.setAttribute("manual", ""), this.append(f), e2.append(j), e2.append(y), t2.appendChild(e2), this.native = e2, this.popup = j, this.labelElement = s2, this.slotStart = o2, this.slotEnd = p2, this.input = n2, this.displayInput = a2, this.displayText = d2, this.chips = c2, this.clear = v, this.list = m, this.emptyState = w, this.slotFooter = x, this.syncAria(), t2;
   }
-  /**
-   * 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;
-    document.addEventListener("mousedown", __privateGet(this, _onMenuItemClickCapture), true);
-    this.validate();
-    if (this.hasAttribute("invalid")) {
-      this.showInvalidMessage();
-    }
-    this.syncAria();
-    (_a = this.getAllOptions()) == null ? void 0 : _a.forEach((option) => {
-      option.ownerSelect = this;
-      this.optionCheckSlot(option);
-    });
-    event.addListener(this.popup, "wje-router:rebind", null, __privateGet(this, _syncPortalStyles));
-    event.addListener(this.popup, "wje-portal:restored", null, __privateGet(this, _restorePortaledOptions));
-    this.selectedOptions = __privateMethod(this, _Select_instances, getSelectedOptions_fn).call(this);
-    this.selectOptions(this.value, true);
-    if (this.lazy) {
-      event.addListener(this.popup, "wje-popup:show", null, (e) => {
-        if (this._wasOppened) return;
-        this._wasOppened = true;
-        const optionsElement = this.querySelector("wje-options");
-        optionsElement.setAttribute("lazy", "");
-        optionsElement.setAttribute("attached", "");
-      });
-    }
-    event.addListener(this.popup, "wje-popup:aftershow", null, () => {
-      const assignedElements = this.slotFooter.assignedElements();
-      if (assignedElements.length > 0) {
-        const el = assignedElements[0];
-        const rect = el.getBoundingClientRect();
-        let totalHeight = 0;
+    var _a2, _b;
+    document.addEventListener("mousedown", __privateGet(this, _n), true), this.validate(), this.hasAttribute("invalid") && this.showInvalidMessage(), this.syncAria(), (_a2 = this.getAllOptions()) == null ? void 0 : _a2.forEach((t2) => {
+      t2.ownerSelect = this, this.optionCheckSlot(t2);
+    }), e.addListener(this.popup, "wje-router:rebind", null, __privateGet(this, _a)), e.addListener(this.popup, "wje-portal:restored", null, __privateGet(this, _l)), this.selectedOptions = __privateMethod(this, _c_instances, o_fn).call(this), this.selectOptions(this.value, true), this.lazy && e.addListener(this.popup, "wje-popup:show", null, (t2) => {
+      if (this._wasOppened) return;
+      this._wasOppened = true;
+      const e2 = this.querySelector("wje-options");
+      e2.setAttribute("lazy", ""), e2.setAttribute("attached", "");
+    }), e.addListener(this.popup, "wje-popup:aftershow", null, () => {
+      const t2 = this.slotFooter.assignedElements();
+      if (t2.length > 0) {
+        const e2 = t2[0].getBoundingClientRect();
+        let i2 = 0;
         if (this.hasAttribute("find")) {
-          let style = getComputedStyle(this.findEl);
-          let height = this.findEl.offsetHeight;
-          let marginTop = parseFloat(style.marginTop);
-          let marginBottom = parseFloat(style.marginBottom);
-          totalHeight = height + marginTop + marginBottom;
+          let t3 = getComputedStyle(this.findEl);
+          i2 = this.findEl.offsetHeight + parseFloat(t3.marginTop) + parseFloat(t3.marginBottom);
         }
-        let subtractHeight = rect.height + totalHeight;
-        this.list.style.height = `calc(100% - ${subtractHeight}px)`;
+        let s2 = e2.height + i2;
+        this.list.style.height = `calc(100% - ${s2}px)`;
       }
-      __privateMethod(this, _Select_instances, focusFindInput_fn).call(this);
-    });
-    __privateSet(this, _htmlOptions, Array.from(this.querySelectorAll(":scope > wje-option")).map((option) => {
-      return {
-        value: option.value,
-        text: option.textContent.trim()
-      };
-    }));
-    this.input.addEventListener("focus", (e) => {
-      var _a2;
-      (_a2 = this.labelElement) == null ? void 0 : _a2.classList.add("fade");
-      this.native.classList.add("focused");
-    });
-    this.input.addEventListener("blur", (e) => {
-      var _a2;
-      this.native.classList.remove("focused");
-      if (!e.target.value) (_a2 = this.labelElement) == null ? void 0 : _a2.classList.remove("fade");
-    });
-    this.input.addEventListener("input", (e) => {
+      __privateMethod(this, _c_instances, d_fn).call(this);
+    }), __privateSet(this, _e, Array.from(this.querySelectorAll(":scope > wje-option")).map((t2) => ({ value: t2.value, text: t2.textContent.trim() }))), this.input.addEventListener("focus", (t2) => {
+      var _a3;
+      (_a3 = this.labelElement) == null ? void 0 : _a3.classList.add("fade"), this.native.classList.add("focused");
+    }), this.input.addEventListener("blur", (t2) => {
+      var _a3;
+      this.native.classList.remove("focused"), t2.target.value || ((_a3 = this.labelElement) == null ? void 0 : _a3.classList.remove("fade"));
+    }), this.input.addEventListener("input", (t2) => {
       this.propagateValidation();
-    });
-    this.addEventListener("wje-option:change", this.optionChange);
-    event.addListener(this.popup, "wje-popup:show", null, () => this.syncAria());
-    event.addListener(this.popup, "wje-popup:hide", null, () => this.syncAria());
-    this.addEventListener("invalid", (e) => {
-      this.invalid = true;
-      this.pristine = false;
-      this.showInvalidMessage();
-      if (this.customErrorDisplay) {
-        e.preventDefault();
-      }
-    });
-    (_b = this.clear) == null ? void 0 : _b.addEventListener("wje-button:click", (e) => {
-      if (this.readonly || this.disabled) return;
-      e.preventDefault();
-      e.stopPropagation();
-      this.clearSelections();
-    });
-    this.list.addEventListener("wje-options:load", __privateGet(this, _handleOptionsLoad));
-    this.addEventListener("wje-options:load", __privateGet(this, _handleOptionsLoad));
-    if (this.hasAttribute("find") && this.findEl instanceof HTMLElement) {
-      event.addListener(this.findEl, "keyup", "", __privateGet(this, _applySearchFilter));
-      event.addListener(this.findEl, "wje-input:clear", "", __privateGet(this, _applySearchFilter));
-    }
-    __privateMethod(this, _Select_instances, updateEmptyState_fn).call(this);
+    }), this.addEventListener("wje-option:change", this.optionChange), e.addListener(this.popup, "wje-popup:show", null, () => this.syncAria()), e.addListener(this.popup, "wje-popup:hide", null, () => this.syncAria()), this.addEventListener("invalid", (t2) => {
+      this.invalid = true, this.pristine = false, this.showInvalidMessage(), this.customErrorDisplay && t2.preventDefault();
+    }), (_b = this.clear) == null ? void 0 : _b.addEventListener("wje-button:click", (t2) => {
+      this.readonly || this.disabled || (t2.preventDefault(), t2.stopPropagation(), this.clearSelections());
+    }), this.list.addEventListener("wje-options:load", __privateGet(this, _p)), this.addEventListener("wje-options:load", __privateGet(this, _p)), this.hasAttribute("find") && this.findEl instanceof HTMLElement && (e.addListener(this.findEl, "keyup", "", __privateGet(this, _h)), e.addListener(this.findEl, "wje-input:clear", "", __privateGet(this, _h))), __privateMethod(this, _c_instances, c_fn).call(this);
   }
-  /**
-   * Returns all the options as HTML.
-   * @returns {NodeList} The options as HTML.
-   */
   getAllOptions() {
-    const localOptions = Array.from(this.querySelectorAll("wje-option"));
-    const portaledOptions = __privateGet(this, _portaledOptionRecords).map(({ option }) => option);
-    return Array.from(/* @__PURE__ */ new Set([...localOptions, ...portaledOptions]));
-  }
-  /**
-   * 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;
-    if (this.hasAttribute("multiple")) {
-      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 {
-        if (options !== null) Array.from(options).slice(0, +this.maxOptions).forEach((option) => this.chips.appendChild(this.getChip(option)));
-        if (this.counterEl instanceof HTMLElement || !this.maxOptions || length > +this.maxOptions) {
-          this.counter();
-        }
-      }
-      this.getAllOptions().forEach((o) => __privateMethod(this, _Select_instances, syncOptionCheckbox_fn).call(this, o));
-    } else {
-      const option = options == null ? void 0 : options.at(0);
-      this.value = ((_a = options == null ? void 0 : options.map((el) => el.value)) == null ? void 0 : _a.at(0)) || "";
-      this.input.value = this.value[0] || "";
-      const displayValue = ((_c = (_b = options[0]) == null ? void 0 : _b.textContent) == null ? void 0 : _c.trim()) || "";
-      this.displayInput.value = displayValue;
-      this.displayText.textContent = displayValue;
-      this.displayText.toggleAttribute("data-placeholder-visible", !displayValue && Boolean(this.placeholder));
-      this.slotStart.innerHTML = "";
-      this.slotEnd.innerHTML = "";
-      if (option && option instanceof HTMLElement) {
-        let optionSlotStart = option == null ? void 0 : option.querySelector("wje-option > [slot=start]");
-        if (optionSlotStart) {
-          setTimeout(() => {
-            this.slotStart.append(optionSlotStart.cloneNode(true));
-          }, 0);
-        }
-        let optionSlotEnd = option == null ? void 0 : option.querySelector("wje-option > [slot=end]");
-        if (optionSlotEnd && optionSlotEnd instanceof HTMLElement && optionSlotEnd.tagName !== "WJE-DROPDOWN" && optionSlotEnd.tagName !== "WJE-BUTTON") {
-          setTimeout(() => {
-            this.slotEnd.append(optionSlotEnd.cloneNode(true));
-          }, 0);
-        }
+    const t2 = Array.from(this.querySelectorAll("wje-option")), e2 = __privateGet(this, _i).map(({ option: t3 }) => t3);
+    return Array.from(/* @__PURE__ */ new Set([...t2, ...e2]));
+  }
+  selectionChanged(t2 = null, e2 = 0) {
+    var _a2, _b, _c2;
+    if (this.hasAttribute("multiple")) this.value = t2.map((t3) => t3.value).reverse(), this.input.value = this.value.map((t3) => t3).join(" ").trim(), this.placeholder && 0 === e2 ? this.chips.innerHTML = this.placeholder : (null !== t2 && Array.from(t2).slice(0, +this.maxOptions).forEach((t3) => this.chips.appendChild(this.getChip(t3))), (this.counterEl instanceof HTMLElement || !this.maxOptions || e2 > +this.maxOptions) && this.counter()), this.getAllOptions().forEach((t3) => __privateMethod(this, _c_instances, u_fn).call(this, t3));
+    else {
+      const e3 = t2 == null ? void 0 : t2.at(0);
+      this.value = ((_a2 = t2 == null ? void 0 : t2.map((t3) => t3.value)) == null ? void 0 : _a2.at(0)) || "", this.input.value = this.value[0] || "";
+      const i2 = ((_c2 = (_b = t2[0]) == null ? void 0 : _b.textContent) == null ? void 0 : _c2.trim()) || "";
+      if (this.displayInput.value = i2, this.displayText.textContent = i2, this.displayText.toggleAttribute("data-placeholder-visible", !i2 && Boolean(this.placeholder)), this.slotStart.innerHTML = "", this.slotEnd.innerHTML = "", e3 && e3 instanceof HTMLElement) {
+        let t3 = e3 == null ? void 0 : e3.querySelector("wje-option > [slot=start]");
+        t3 && setTimeout(() => {
+          this.slotStart.append(t3.cloneNode(true));
+        }, 0);
+        let i3 = e3 == null ? void 0 : e3.querySelector("wje-option > [slot=end]");
+        i3 && i3 instanceof HTMLElement && "WJE-DROPDOWN" !== i3.tagName && "WJE-BUTTON" !== i3.tagName && setTimeout(() => {
+          this.slotEnd.append(i3.cloneNode(true));
+        }, 0);
       }
     }
     this.syncAria();
   }
-  /**
-   * 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) {
-      this.counterEl = null;
-    }
-    if (this.chips) {
-      this.chips.innerHTML = "";
-    }
-    if (this.selectedOptions.length > 0) {
-      this.selectionChanged(this.selectedOptions, this.selectedOptions.length);
-    } else {
-      this.selectionChanged(this.selectedOptions);
-    }
-    if (silence) return;
-    event.dispatchCustomEvent(this, "wje-select:change");
+  selections(t2 = false) {
+    this.selectedOptions.length >= +this.maxOptions && (this.counterEl = null), this.chips && (this.chips.innerHTML = ""), this.selectedOptions.length > 0 ? this.selectionChanged(this.selectedOptions, this.selectedOptions.length) : this.selectionChanged(this.selectedOptions), t2 || e.dispatchCustomEvent(this, "wje-select:change");
   }
-  /**
-   * 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) {
-      this.counterEl.remove();
-      this.counterEl = null;
-      return;
-    }
-    if (!this.counterEl) {
-      this.counterEl = document.createElement("span");
-      this.counterEl.classList.add("counter");
-      this.chips.appendChild(this.counterEl);
-    }
-    this.counterEl.innerText = `+${this.value.length - +this.maxOptions}`;
-  }
-  /**
-   * 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");
-    chip.size = "small";
-    chip.removable = !this.readonly;
-    chip.round = true;
-    chip.addEventListener("wje:chip-remove", this.removeChip);
-    chip.option = option;
-    let label = document.createElement("wje-label");
-    label.innerText = __privateMethod(this, _Select_instances, htmlSelectedItem_fn).call(this, option.value);
-    chip.appendChild(label);
-    return chip;
-  }
-  /**
-   * Generates an HTML option element based on the provided item and mapping.
-   * @param {object} item The item to generate the option for.
-   * @param {object} [map] The mapping object that specifies the properties of the item to use for the option's value and text.
-   * @param {string} [map.value] The property of the item to use for the option's value.
-   * @param {string} [map.text] The property of the item to use for the option's text.
-   * @returns {HTMLElement} The generated HTML option element.
-   */
-  htmlOption(item, map = { value: "value", text: "text" }) {
-    let option = document.createElement("wje-option");
-    if (item[map.value] === null) {
-      console.warn(`The item ${JSON.stringify(item)} does not have the property ${map.value}`);
-    }
-    if (item[map.text] === null) {
-      console.warn(`The item ${JSON.stringify(item)} does not have the property ${map.text}`);
-    }
-    option.setAttribute("value", item[map.value] ?? "");
-    option.innerText = item[map.text] ?? "";
-    __privateGet(this, _addedOptions).push({ [map.value]: item[map.value], [map.text]: item[map.text] });
-    return option;
-  }
-  /**
-   * Returns the provided item.
-   * @param {any} item The item to be returned.
-   * @returns {any} The same item that was passed as input.
-   */
-  htmlSelectedItem(item) {
-    return item;
-  }
-  /**
-   * 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;
-    const optionsElement = this.querySelector("wje-options");
-    if (optionsElement) {
-      optionsElement.addOption(optionData, silent, map);
-      __privateMethod(this, _Select_instances, updateEmptyState_fn).call(this);
-      return;
-    }
-    let option = this.htmlOption(optionData, map);
-    this.appendChild(option);
-    __privateMethod(this, _Select_instances, updateEmptyState_fn).call(this);
-  }
-  /**
-   * 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)) {
-      this.addOption(optionsData, silent, map);
-    } else {
-      optionsData.forEach((item) => {
-        this.addOption(item, silent, map);
-      });
-    }
+    if (this.counterEl && this.value.length === +this.maxOptions) return this.counterEl.remove(), void (this.counterEl = null);
+    this.counterEl || (this.counterEl = document.createElement("span"), this.counterEl.classList.add("counter"), this.chips.appendChild(this.counterEl)), this.counterEl.innerText = "+" + (this.value.length - +this.maxOptions);
+  }
+  getChip(t2) {
+    let e2 = document.createElement("wje-chip");
+    e2.size = "small", e2.removable = !this.readonly, e2.round = true, e2.addEventListener("wje:chip-remove", this.removeChip), e2.option = t2;
+    let i2 = document.createElement("wje-label");
+    return i2.innerText = __privateMethod(this, _c_instances, m_fn).call(this, t2.value), e2.appendChild(i2), e2;
+  }
+  htmlOption(t2, e2 = { value: "value", text: "text" }) {
+    let i2 = document.createElement("wje-option");
+    return null === t2[e2.value] && console.warn(`The item ${JSON.stringify(t2)} does not have the property ${e2.value}`), null === t2[e2.text] && console.warn(`The item ${JSON.stringify(t2)} does not have the property ${e2.text}`), i2.setAttribute("value", t2[e2.value] ?? ""), i2.innerText = t2[e2.text] ?? "", __privateGet(this, _t).push({ [e2.value]: t2[e2.value], [e2.text]: t2[e2.text] }), i2;
+  }
+  htmlSelectedItem(t2) {
+    return t2;
+  }
+  addOption(t2, e2 = false, i2 = { value: "value", text: "text" }) {
+    if (!t2) return;
+    const s2 = this.querySelector("wje-options");
+    if (s2) return s2.addOption(t2, e2, i2), void __privateMethod(this, _c_instances, c_fn).call(this);
+    let r2 = this.htmlOption(t2, i2);
+    this.appendChild(r2), __privateMethod(this, _c_instances, c_fn).call(this);
+  }
+  addOptions(t2, e2 = false, i2 = { value: "value", text: "text" }) {
+    Array.isArray(t2) ? t2.forEach((t3) => {
+      this.addOption(t3, e2, i2);
+    }) : this.addOption(t2, e2, i2);
+  }
+  selectOption(t2, e2 = false) {
+    if (!t2) return;
+    const i2 = this.querySelector(`wje-option[value="${t2}"]`);
+    i2 && (e2 ? (i2.hasAttribute("selected") || (i2.selected = true), this.selectedOptions = __privateMethod(this, _c_instances, o_fn).call(this, this.hasAttribute("multiple") ? this.selectedOptions : [])) : this.processClickedOption(i2, this.hasAttribute("multiple")), this.drawingStatus > this.drawingStatuses.START && this.selections(e2));
+  }
+  selectOptions(t2, e2 = false) {
+    Array.isArray(t2) ? t2.forEach((t3) => {
+      this.selectOption(t3, e2);
+    }) : this.selectOption(t2, e2);
+  }
+  optionCheckSlot(t2) {
+    var _a2;
+    let e2 = t2.querySelector('[slot="check"]');
+    if (e2 && "WJE-CHECKBOX" !== e2.tagName) return;
+    if (e2 && "WJE-CHECKBOX" === e2.tagName) {
+      const i3 = t2.hasAttribute("selected");
+      return e2.checked = i3, void (i3 ? e2.setAttribute("checked", "") : e2.removeAttribute("checked"));
+    }
+    let i2 = (_a2 = this.querySelector("template")) == null ? void 0 : _a2.content.querySelector('[slot="check"]');
+    if (!i2) return void console.warn('Icon with slot "check" was not found.');
+    let s2 = i2.cloneNode(true);
+    t2.append(s2);
   }
-  /**
-   * Selects an option from the available options within the component.
-   * @param {string} value The value of the option to be selected.
-   * @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;
-    const option = this.querySelector(`wje-option[value="${value}"]`);
-    if (!option) return;
-    if (silent) {
-      if (!option.hasAttribute("selected")) {
-        option.selected = true;
-      }
-      this.selectedOptions = __privateMethod(this, _Select_instances, getSelectedOptions_fn).call(this, this.hasAttribute("multiple") ? this.selectedOptions : []);
-    } else {
-      this.processClickedOption(option, this.hasAttribute("multiple"));
-    }
-    if (this.drawingStatus > this.drawingStatuses.START) {
-      this.selections(silent);
-    }
-  }
-  /**
-   * 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)) {
-      this.selectOption(values, silent);
-    } else {
-      values.forEach((value) => {
-        this.selectOption(value, silent);
-      });
-    }
-  }
-  /**
-   * Clones and appends an icon with the "check" slot to the specified option element.
-   * If the option already contains a custom element with slot="check" (e.g. <wje-status slot="check">),
-   * it is left untouched and no template icon is added.
-   * @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;
-    let existingCheckSlot = option.querySelector('[slot="check"]');
-    if (existingCheckSlot && existingCheckSlot.tagName !== "WJE-CHECKBOX") {
-      return;
-    }
-    if (existingCheckSlot && existingCheckSlot.tagName === "WJE-CHECKBOX") {
-      const isSelectedExisting = option.hasAttribute("selected");
-      existingCheckSlot.checked = isSelectedExisting;
-      if (isSelectedExisting) {
-        existingCheckSlot.setAttribute("checked", "");
-      } else {
-        existingCheckSlot.removeAttribute("checked");
-      }
-      return;
-    }
-    let icon = (_a = this.querySelector("template")) == null ? void 0 : _a.content.querySelector('[slot="check"]');
-    if (!icon) {
-      console.warn('Icon with slot "check" was not found.');
-      return;
-    }
-    let iconClone = icon.cloneNode(true);
-    option.append(iconClone);
-  }
-  /**
-   * 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.
-   */
   clearSelections() {
-    this.selectedOptions = [];
-    this.getAllOptions().forEach((option) => {
-      option.selected = false;
-    });
-    this.selections();
-    this.validate();
-    this.propagateValidation();
-    if (this.hasAttribute("invalid")) {
-      this.showInvalidMessage();
-    }
+    this.selectedOptions = [], this.getAllOptions().forEach((t2) => {
+      t2.selected = false;
+    }), this.selections(), this.validate(), this.propagateValidation(), this.hasAttribute("invalid") && this.showInvalidMessage();
   }
   disconnectedCallback() {
-    __privateGet(this, _restorePortaledOptions).call(this);
-    document.removeEventListener("mousedown", __privateGet(this, _onMenuItemClickCapture), true);
+    __privateGet(this, _l).call(this), document.removeEventListener("mousedown", __privateGet(this, _n), true);
   }
-  /**
-   * Syncs ARIA attributes on the host element.
-   */
   syncAria() {
-    var _a;
-    const expanded = ((_a = this.popup) == null ? void 0 : _a.hasAttribute("active")) || this.classList.contains("active");
-    this.setAriaState({
-      role: "combobox",
-      haspopup: "listbox",
-      expanded,
-      controls: this._ariaListId,
-      disabled: this.disabled,
-      required: this.required,
-      invalid: this.invalid || this.hasAttribute("invalid")
-    });
+    var _a2;
+    const t2 = ((_a2 = this.popup) == null ? void 0 : _a2.hasAttribute("active")) || this.classList.contains("active");
+    this.setAriaState({ role: "combobox", haspopup: "listbox", expanded: t2, controls: this._ariaListId, disabled: this.disabled, required: this.required, invalid: this.invalid || this.hasAttribute("invalid") });
   }
 };
-_addedOptions = new WeakMap();
-_htmlOptions = new WeakMap();
-_portaledOptionRecords = new WeakMap();
-_remoteOptionsLoaded = new WeakMap();
-_isRemoteOptionsLoading = new WeakMap();
-_Select_instances = new WeakSet();
-/**
- * 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;
-  const keyValue = "value";
-  const textValue = "textContent";
-  const value = ((_a = this.selectedOptions.find((option) => option[keyValue] === item)) == null ? void 0 : _a[textValue]) ?? "";
-  return this.htmlSelectedItem(value);
+_t = new WeakMap();
+_e = new WeakMap();
+_i = new WeakMap();
+_s = new WeakMap();
+_r = new WeakMap();
+_c_instances = new WeakSet();
+m_fn = function(t2) {
+  var _a2;
+  const e2 = ((_a2 = this.selectedOptions.find((e3) => e3.value === t2)) == null ? void 0 : _a2.textContent) ?? "";
+  return this.htmlSelectedItem(e2);
 };
-/**
- * Retrieves the selected options while retaining selections that are temporarily absent from the rendered list.
- * Lazy search and pagination replace option elements, so the currently rendered DOM cannot be the sole source of
- * truth for a multiple selection. Rendered options override retained options with the same value, including when
- * a rendered option has been explicitly deselected.
- * @param {Array<Element>} [retainedOptions] Previously selected option elements that may no longer be rendered.
- * @returns {Array<Element>} An array of selected option elements, deduplicated by value.
- */
-getSelectedOptions_fn = function(retainedOptions = []) {
-  const renderedOptions = this.getAllOptions();
-  const renderedValues = new Set(renderedOptions.map((option) => option.value));
-  const selectedByValue = new Map(
-    renderedOptions.filter((option) => option.hasAttribute("selected")).map((option) => [option.value, option])
-  );
-  retainedOptions.forEach((option) => {
-    if ((option == null ? void 0 : option.hasAttribute("selected")) && !renderedValues.has(option.value)) {
-      selectedByValue.set(option.value, option);
-    }
-  });
-  return Array.from(selectedByValue.values());
+o_fn = function(t2 = []) {
+  const e2 = this.getAllOptions(), i2 = new Set(e2.map((t3) => t3.value)), s2 = new Map(e2.filter((t3) => t3.hasAttribute("selected")).map((t3) => [t3.value, t3]));
+  return t2.forEach((t3) => {
+    (t3 == null ? void 0 : t3.hasAttribute("selected")) && !i2.has(t3.value) && s2.set(t3.value, t3);
+  }), Array.from(s2.values());
 };
-/**
- * Determines whether the select currently contains at least one visible option.
- * @returns {boolean} Returns true when at least one option is visible, otherwise false.
- */
-hasVisibleOptions_fn = function() {
-  return Array.from(this.getAllOptions()).some((option) => {
-    if (option.hidden || option.hasAttribute("hidden")) {
-      return false;
-    }
-    return getComputedStyle(option).display !== "none";
-  });
+b_fn = function() {
+  return Array.from(this.getAllOptions()).some((t2) => !t2.hidden && !t2.hasAttribute("hidden") && "none" !== getComputedStyle(t2).display);
 };
-/**
- * Toggles the empty state message based on whether any visible options are available.
- * @returns {void} Does not return a value.
- */
-updateEmptyState_fn = function() {
-  if (!(this.emptyState instanceof HTMLElement)) return;
-  if (__privateGet(this, _isRemoteOptionsLoading)) {
-    this.emptyState.hidden = true;
-    return;
-  }
-  this.emptyState.hidden = __privateMethod(this, _Select_instances, hasVisibleOptions_fn).call(this);
+c_fn = function() {
+  this.emptyState instanceof HTMLElement && (__privateGet(this, _r) ? this.emptyState.hidden = true : this.emptyState.hidden = __privateMethod(this, _c_instances, b_fn).call(this));
 };
-_applySearchFilter = new WeakMap();
-_handleOptionsLoad = new WeakMap();
-_onMenuItemClickCapture = new WeakMap();
-_syncPortalStyles = new WeakMap();
-copyPortalCustomProperties_fn = function(container) {
-  const style = getComputedStyle(this);
-  for (let i = 0; i < style.length; i++) {
-    const prop = style[i];
-    if (prop.startsWith("--")) {
-      container.style.setProperty(prop, style.getPropertyValue(prop));
-    }
+_h = new WeakMap();
+_p = new WeakMap();
+_n = new WeakMap();
+_a = new WeakMap();
+g_fn = function(t2) {
+  const e2 = getComputedStyle(this);
+  for (let i2 = 0; i2 < e2.length; i2++) {
+    const s2 = e2[i2];
+    s2.startsWith("--") && t2.style.setProperty(s2, e2.getPropertyValue(s2));
   }
 };
-syncOptionOwners_fn = function() {
-  this.getAllOptions().forEach((option) => {
-    option.ownerSelect = this;
+w_fn = function() {
+  this.getAllOptions().forEach((t2) => {
+    t2.ownerSelect = this;
   });
 };
-portalOptions_fn = function(container = ((_a) => (_a = this.popup) == null ? void 0 : _a._portalContainer)()) {
-  if (!(container instanceof HTMLElement)) return;
-  const list = container.querySelector(".list");
-  if (!(list instanceof HTMLElement)) return;
-  const options = this.getAllOptions();
-  options.forEach((option) => {
-    if (__privateGet(this, _portaledOptionRecords).some((record) => record.option === option)) return;
-    if (!option.parentNode) return;
-    const placeholder = document.createComment("wje-select-portaled-option");
-    option.parentNode.insertBefore(placeholder, option);
-    option.ownerSelect = this;
-    option.setAttribute("data-wje-select-portaled-option", "");
-    option.addEventListener("wje-option:change", this.optionChange);
-    __privateGet(this, _portaledOptionRecords).push({ option, placeholder });
-    list.insertBefore(option, this.emptyState);
+v_fn = function(t2 = ((_a2) => (_a2 = this.popup) == null ? void 0 : _a2._portalContainer)()) {
+  if (!(t2 instanceof HTMLElement)) return;
+  const e2 = t2.querySelector(".list");
+  if (!(e2 instanceof HTMLElement)) return;
+  this.getAllOptions().forEach((t3) => {
+    if (__privateGet(this, _i).some((e3) => e3.option === t3)) return;
+    if (!t3.parentNode) return;
+    const i2 = document.createComment("wje-select-portaled-option");
+    t3.parentNode.insertBefore(i2, t3), t3.ownerSelect = this, t3.setAttribute("data-wje-select-portaled-option", ""), t3.addEventListener("wje-option:change", this.optionChange), __privateGet(this, _i).push({ option: t3, placeholder: i2 }), e2.insertBefore(t3, this.emptyState);
   });
 };
-_restorePortaledOptions = new WeakMap();
-focusFindInput_fn = function() {
-  if (!this.hasAttribute("find") || !(this.findEl instanceof HTMLElement)) return;
-  requestAnimationFrame(() => {
-    var _a;
-    const input = this.findEl.input || ((_a = this.findEl.shadowRoot) == null ? void 0 : _a.querySelector("input"));
-    if (input instanceof HTMLElement) {
-      input.focus();
-    }
+_l = new WeakMap();
+d_fn = function() {
+  this.hasAttribute("find") && this.findEl instanceof HTMLElement && requestAnimationFrame(() => {
+    var _a2;
+    const t2 = this.findEl.input || ((_a2 = this.findEl.shadowRoot) == null ? void 0 : _a2.querySelector("input"));
+    t2 instanceof HTMLElement && t2.focus();
   });
 };
-syncOptionCheckbox_fn = function(option) {
-  const checkbox = option.querySelector('wje-checkbox[slot="check"]');
-  if (!checkbox) return;
-  const isSelected = option.hasAttribute("selected");
-  checkbox.checked = isSelected;
-  if (isSelected) {
-    checkbox.setAttribute("checked", "");
-  } else {
-    checkbox.removeAttribute("checked");
-  }
+u_fn = function(t2) {
+  const e2 = t2.querySelector('wje-checkbox[slot="check"]');
+  if (!e2) return;
+  const i2 = t2.hasAttribute("selected");
+  e2.checked = i2, i2 ? e2.setAttribute("checked", "") : e2.removeAttribute("checked");
 };
-__publicField(_Select, "_instanceId", 0);
-__publicField(_Select, "portalStyles", `
-		[data-wje-select-portal] .options-wrapper {
-			box-sizing: border-box;
-			min-width: 100%;
-			border-width: var(--wje-select-options-border-width, 1px);
-			border-style: var(--wje-select-options-border-style, solid);
-			border-color: var(--wje-select-options-border-color, var(--wje-border-color, #dcdfe3));
-			border-radius: var(--wje-select-options-border-radius, var(--wje-border-radius, 4px));
-			margin-top: calc(0px - var(--wje-select-border-width, 1px));
-			background-color: var(--wje-select-options-background-color, var(--wje-color-contrast-0, #fff));
-			overflow: hidden;
-		}
-
-		[data-wje-select-portal] .find {
-			margin-block: var(--wje-select-find-margin-block, .5rem);
-			margin-inline: var(--wje-select-find-margin-inline, .5rem);
-			width: var(--wje-select-find-width, calc(100% - 1rem));
-		}
-
-		[data-wje-select-portal] .list {
-			overflow: auto;
-			height: 100%;
-			position: relative;
-		}
-
-		[data-wje-select-portal] .list:has(.empty:not([hidden])) {
-			min-height: 44px;
-		}
-
-		[data-wje-select-portal] .empty {
-			position: absolute;
-			inset: 0;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			padding: var(--wje-spacing-small, 1rem);
-			color: var(--wje-select-color, inherit);
-			text-align: center;
-			background-color: var(--wje-select-options-background-color, var(--wje-color-contrast-0, #fff));
-			pointer-events: none;
-		}
-
-		[data-wje-select-portal] .empty[hidden] {
-			display: none;
-		}
-
-		[data-wje-select-portal] .options-wrapper:has(.find) .list {
-			height: calc(100% - 32px - 2 * var(--wje-select-find-margin-block, .5rem));
-		}
-	`);
-let Select = _Select;
-Select.define("wje-select", Select);
+__publicField(_c, "_instanceId", 0);
+__publicField(_c, "portalStyles", "\n		[data-wje-select-portal] .options-wrapper {\n			box-sizing: border-box;\n			min-width: 100%;\n			border-width: var(--wje-select-options-border-width, 1px);\n			border-style: var(--wje-select-options-border-style, solid);\n			border-color: var(--wje-select-options-border-color, var(--wje-border-color, #dcdfe3));\n			border-radius: var(--wje-select-options-border-radius, var(--wje-border-radius, 4px));\n			margin-top: calc(0px - var(--wje-select-border-width, 1px));\n			background-color: var(--wje-select-options-background-color, var(--wje-color-contrast-0, #fff));\n			overflow: hidden;\n		}\n\n		[data-wje-select-portal] .find {\n			margin-block: var(--wje-select-find-margin-block, .5rem);\n			margin-inline: var(--wje-select-find-margin-inline, .5rem);\n			width: var(--wje-select-find-width, calc(100% - 1rem));\n		}\n\n		[data-wje-select-portal] .list {\n			overflow: auto;\n			height: 100%;\n			position: relative;\n		}\n\n		[data-wje-select-portal] .list:has(.empty:not([hidden])) {\n			min-height: 44px;\n		}\n\n		[data-wje-select-portal] .empty {\n			position: absolute;\n			inset: 0;\n			display: flex;\n			align-items: center;\n			justify-content: center;\n			padding: var(--wje-spacing-small, 1rem);\n			color: var(--wje-select-color, inherit);\n			text-align: center;\n			background-color: var(--wje-select-options-background-color, var(--wje-color-contrast-0, #fff));\n			pointer-events: none;\n		}\n\n		[data-wje-select-portal] .empty[hidden] {\n			display: none;\n		}\n\n		[data-wje-select-portal] .options-wrapper:has(.find) .list {\n			height: calc(100% - 32px - 2 * var(--wje-select-find-margin-block, .5rem));\n		}\n	");
+let c = _c;
+c.define("wje-select", c);
 export {
-  Select as default
+  c as default
 };
 //# sourceMappingURL=wje-select.js.map