wj-elements 0.4.0 → 0.4.2

package/dist/wje-select.js

@@ -9,7 +9,7 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _addedOptions, _htmlOptions, _Select_instances, htmlSelectedItem_fn, getSelectedOptions_fn, hasVisibleOptions_fn, updateEmptyState_fn, _applySearchFilter, _onMenuItemClickCapture, syncOptionCheckbox_fn;
+var _addedOptions, _htmlOptions, _portaledOptionRecords, _Select_instances, htmlSelectedItem_fn, getSelectedOptions_fn, hasVisibleOptions_fn, updateEmptyState_fn, _applySearchFilter, _handleOptionsLoad, _onMenuItemClickCapture, _syncPortalStyles, copyPortalCustomProperties_fn, syncOptionOwners_fn, portalOptions_fn, _restorePortaledOptions, syncOptionCheckbox_fn;
 import { F as FormAssociatedElement } from "./form-associated-element-DEQ4y-jn.js";
 import { event } from "./event.js";
 import { Localizer } from "./localize.js";
@@ -23,13 +23,14 @@ 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-DklicGea.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 1fr auto auto auto;\n    align-items: center;\n    background-color: var(--wje-select-background);\n    /*min-height: 28px;*/\n    color: var(--wje-select-color);\n    line-height: var(--wje-select-line-height);\n    appearance: none;\n    padding: 2px 0.5rem;\n    font-size: 14px !important;\n    font-weight: normal;\n    vertical-align: middle;\n    input[readonly] {\n        pointer-events: none;\n        caret-color: transparent;\n    }\n}\n\ninput {\n    color: var(--wje-select-color);\n    line-height: var(--wje-select-line-height);\n    font-size: 14px !important;\n    font-weight: 400;\n    letter-spacing: 0.01em;\n    border: medium;\n    height: 25px;\n    min-height: 25px;\n    padding: 0;\n    background: none;\n    box-shadow: none;\n    width: 100%;\n    outline: 0;\n    font-size: 14px !important;\n}\n\n::placeholder {\n    opacity: 1;\n}\n\n:host [active] {\n    .wrapper {\n        border-radius: var(--wje-select-border-radius);\n    }\n    [slot='arrow'] {\n        transform: rotate(180deg);\n        transition: all 0.2s ease-in;\n    }\n}\n\n.options-wrapper {\n    border-width: var(--wje-select-options-border-width);\n    border-style: var(--wje-select-options-border-style);\n    border-color: var(--wje-select-options-border-color);\n    border-radius: var(--wje-select-options-border-radius);\n    margin-top: calc(0px - var(--wje-select-border-width));\n    background-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]) .chips {\n    display: flex;\n    flex: 1;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: var(--wje-spacing-3x-small);\n}\n\n:host([disabled]) .input-wrapper {\n    opacity: 0.5;\n    pointer-events: none;\n    cursor: not-allowed;\n}\n\n.counter {\n    padding-inline: 0.5rem;\n}\n\nwje-chip {\n    --wje-chip-margin: 0 0.25rem 0 0;\n}\n\nwje-button {\n    --wje-padding-top: 0.25rem;\n    --wje-padding-start: 0.25rem;\n    --wje-padding-end: 0.25rem;\n    --wje-padding-bottom: 0.25rem;\n    --wje-button-margin-inline: 0 0.25rem;\n}\n\n.slot-start,\n.slot-end {\n    &:not(:empty) {\n        margin-right: 0.5rem;\n    }\n}\n\nslot[name='error'] {\n    display: none;\n}\n\n:host([invalid]) slot[name='error'] {\n    display: block;\n}\n\nslot[name='error'] {\n    display: none;\n    position: absolute;\n    max-width: 100%;\n    min-width: auto;\n    border-radius: 50px;\n    background: black;\n    padding: 0.25rem 0.5rem;\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: white;\n    font-size: var(--wje-font-size-small);\n    width: max-content;\n    line-height: normal;\n}\n\n.input-hidden{\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    padding: 0;\n    margin: 0;\n    opacity: 0;\n    z-index: -1;\n}\n\n:host([required]) .wrapper::after {\n    color: var(--wje-input-color-invalid);\n    content: var(--wje-input-required-symbol);\n    font-size: 24px;\n    position: absolute;\n    right: 12px;\n    top: 0;\n}\n\n:host([required]) .standard .input-wrapper::after {\n    right: 13px;\n    top: -20px;\n}\n";
+const styles = "/*\n[ WJ Select ]\n*/\n\n:host {\n    margin-bottom: var(--wje-select-margin-bottom);\n    width: 100%;\n    display: block;\n    [slot='arrow'] {\n        transform: rotate(0deg);\n        transition: all 0.2s ease-in;\n    }\n    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 1fr auto auto auto;\n    align-items: center;\n    background-color: var(--wje-select-background);\n    /*min-height: 28px;*/\n    color: var(--wje-select-color);\n    line-height: var(--wje-select-line-height);\n    appearance: none;\n    padding: 2px 0.5rem;\n    font-size: 14px !important;\n    font-weight: normal;\n    vertical-align: middle;\n    input[readonly] {\n        pointer-events: none;\n        caret-color: transparent;\n    }\n}\n\ninput {\n    color: var(--wje-select-color);\n    line-height: var(--wje-select-line-height);\n    font-size: 14px !important;\n    font-weight: 400;\n    letter-spacing: 0.01em;\n    border: medium;\n    height: 25px;\n    min-height: 25px;\n    padding: 0;\n    background: none;\n    box-shadow: none;\n    width: 100%;\n    outline: 0;\n    font-size: 14px !important;\n}\n\n::placeholder {\n    opacity: 1;\n}\n\n:host [active] {\n    .wrapper {\n        border-radius: var(--wje-select-border-radius);\n    }\n    [slot='arrow'] {\n        transform: rotate(180deg);\n        transition: all 0.2s ease-in;\n    }\n}\n\n.options-wrapper {\n    border-width: var(--wje-select-options-border-width);\n    border-style: var(--wje-select-options-border-style);\n    border-color: var(--wje-select-options-border-color);\n    border-radius: var(--wje-select-options-border-radius);\n    margin-top: calc(0px - var(--wje-select-border-width));\n    background-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]) .chips {\n    display: flex;\n    flex: 1;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: var(--wje-spacing-3x-small);\n}\n\n:host([disabled]) .input-wrapper {\n    opacity: 0.5;\n    pointer-events: none;\n    cursor: not-allowed;\n}\n\n.counter {\n    padding-inline: 0.5rem;\n}\n\nwje-chip {\n    --wje-chip-margin: 0 0.25rem 0 0;\n}\n\nwje-button {\n    --wje-padding-top: 0.25rem;\n    --wje-padding-start: 0.25rem;\n    --wje-padding-end: 0.25rem;\n    --wje-padding-bottom: 0.25rem;\n    --wje-button-margin-inline: 0 0.25rem;\n}\n\n.slot-start,\n.slot-end {\n    &:not(:empty) {\n        margin-right: 0.5rem;\n    }\n}\n\nslot[name='error'] {\n    display: none;\n}\n\n:host([invalid]) slot[name='error'] {\n    display: block;\n}\n\nslot[name='error'] {\n    display: none;\n    position: absolute;\n    max-width: 100%;\n    min-width: auto;\n    border-radius: 50px;\n    background-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 {
   constructor() {
     super();
     __privateAdd(this, _Select_instances);
     __privateAdd(this, _addedOptions, []);
     __privateAdd(this, _htmlOptions, []);
+    __privateAdd(this, _portaledOptionRecords, []);
     /**
      * An object representing component dependencies with their respective classes.
      * Each property in the object maps a custom component name (as a string key)
@@ -146,6 +147,30 @@ const _Select = class _Select extends FormAssociatedElement {
         __privateMethod(this, _Select_instances, updateEmptyState_fn).call(this);
       }
     });
+    __privateAdd(this, _handleOptionsLoad, (e) => {
+      var _a;
+      this.selectedOptions.forEach((option) => {
+        this.getAllOptions().forEach((el) => {
+          if (el.value === option.value) {
+            el.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.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");
+    });
     /**
      * 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.
@@ -163,6 +188,31 @@ const _Select = class _Select extends FormAssociatedElement {
       }
       e.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, _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, []);
+    });
     this.localizer = new Localizer(this);
     this.counterEl = null;
     this._wasOppened = false;
@@ -258,6 +308,32 @@ const _Select = class _Select extends FormAssociatedElement {
   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");
+    }
+  }
+  /**
+   * 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.
@@ -452,7 +528,7 @@ const _Select = class _Select extends FormAssociatedElement {
    * @returns {Array<string>}
    */
   static get observedAttributes() {
-    return ["active", "disabled", "readonly"];
+    return ["active", "disabled", "readonly", "portaled"];
   }
   /**
    * Sets up the attributes for the component.
@@ -558,6 +634,9 @@ const _Select = class _Select extends FormAssociatedElement {
       popup.setAttribute("size", "");
     popup.setAttribute("part", "popup");
     popup.setAttribute("offset", this.offset);
+    if (this.isPortaled) {
+      popup.setAttribute("portal", this.portaled);
+    }
     if ((this.lazy || this.querySelector("wje-options")) && !this._wasOppened) {
       popup.setAttribute("loader", "");
     } else {
@@ -634,8 +713,11 @@ const _Select = class _Select extends FormAssociatedElement {
     }
     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) {
@@ -700,28 +782,8 @@ const _Select = class _Select extends FormAssociatedElement {
       e.stopPropagation();
       this.clearSelections();
     });
-    this.list.addEventListener("wje-options:load", (e) => {
-      var _a2;
-      this.selectedOptions.forEach((option) => {
-        this.getAllOptions().forEach((el) => {
-          if (el.value === option.value) {
-            el.selected = true;
-          }
-        });
-      });
-      const attrValue = ((_a2 = this.getAttribute("value")) == null ? void 0 : _a2.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.selections(true);
-      __privateMethod(this, _Select_instances, updateEmptyState_fn).call(this);
-      this.list.scrollTo(0, 0);
-      event.dispatchCustomEvent(this.popup, "wje-popup:content-ready");
-    });
+    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));
@@ -733,7 +795,9 @@ const _Select = class _Select extends FormAssociatedElement {
    * @returns {NodeList} The options as HTML.
    */
   getAllOptions() {
-    return this.querySelectorAll("wje-option");
+    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,
@@ -993,6 +1057,7 @@ const _Select = class _Select extends FormAssociatedElement {
     }
   }
   disconnectedCallback() {
+    __privateGet(this, _restorePortaledOptions).call(this);
     document.removeEventListener("mousedown", __privateGet(this, _onMenuItemClickCapture), true);
   }
   /**
@@ -1014,6 +1079,7 @@ const _Select = class _Select extends FormAssociatedElement {
 };
 _addedOptions = new WeakMap();
 _htmlOptions = new WeakMap();
+_portaledOptionRecords = new WeakMap();
 _Select_instances = new WeakSet();
 /**
  * Processes the given item and retrieves the corresponding value from the selected options.
@@ -1032,7 +1098,7 @@ htmlSelectedItem_fn = function(item) {
  * @returns {Array<Element>} An array of elements representing the options that are currently selected.
  */
 getSelectedOptions_fn = function() {
-  return Array.from(this.querySelectorAll("wje-option[selected]"));
+  return this.getAllOptions().filter((option) => option.hasAttribute("selected"));
 };
 /**
  * Determines whether the select currently contains at least one visible option.
@@ -1055,7 +1121,41 @@ updateEmptyState_fn = function() {
   this.emptyState.hidden = __privateMethod(this, _Select_instances, hasVisibleOptions_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));
+    }
+  }
+};
+syncOptionOwners_fn = function() {
+  this.getAllOptions().forEach((option) => {
+    option.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);
+  });
+};
+_restorePortaledOptions = new WeakMap();
 syncOptionCheckbox_fn = function(option) {
   const checkbox = option.querySelector('wje-checkbox[slot="check"]');
   if (!checkbox) return;
@@ -1068,6 +1168,54 @@ syncOptionCheckbox_fn = function(option) {
   }
 };
 __publicField(_Select, "_instanceId", 0);
+__publicField(_Select, "portalStyles", `
+		[data-wje-select-portal] .options-wrapper {
+			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);
 export {