@aquera/nile-elements 1.1.3-beta-1.2 → 1.1.3-beta-2.0

package/dist/src/nile-vertical-stepper-item/nile-vertical-stepper-item.js

@@ -22,6 +22,8 @@ let NileVerticalStepperItem = class NileVerticalStepperItem extends NileElement
         /* Properties passed directly */
         this.title = '';
         this.subtitle = '';
+        this.completed = false;
+        this.current = false;
         /* Properties passed to parent component: NileStepper */
         this.contentBelow = false;
         this.size = 'lg';
@@ -31,6 +33,7 @@ let NileVerticalStepperItem = class NileVerticalStepperItem extends NileElement
         this.isLast = false;
         this.isComplete = false;
         this.isCurrent = false;
+        this.isManualMode = false;
         this.haveFlex = true;
         /* #endregion */
     }
@@ -50,8 +53,8 @@ let NileVerticalStepperItem = class NileVerticalStepperItem extends NileElement
     render() {
         if (this.isLast)
             this.style.setProperty('--vertical-stepper-flex-val', `0`);
-        const isCurrent = this.isCurrent;
-        const isComplete = this.isComplete;
+        const isCurrent = this.isManualMode ? this.current : this.isCurrent;
+        const isComplete = this.isManualMode ? this.completed : this.isComplete;
         let showCompletedIcon = false;
         if (isComplete && !isCurrent || this.completedStepValue == this.value)
             showCompletedIcon = true;
@@ -104,6 +107,12 @@ __decorate([
 __decorate([
     property({ attribute: true, reflect: true })
 ], NileVerticalStepperItem.prototype, "subtitle", void 0);
+__decorate([
+    property({ attribute: true, reflect: true })
+], NileVerticalStepperItem.prototype, "completed", void 0);
+__decorate([
+    property({ attribute: true, reflect: true })
+], NileVerticalStepperItem.prototype, "current", void 0);
 __decorate([
     state()
 ], NileVerticalStepperItem.prototype, "contentBelow", void 0);
@@ -125,6 +134,9 @@ __decorate([
 __decorate([
     state()
 ], NileVerticalStepperItem.prototype, "isCurrent", void 0);
+__decorate([
+    state()
+], NileVerticalStepperItem.prototype, "isManualMode", void 0);
 __decorate([
     state()
 ], NileVerticalStepperItem.prototype, "currentStepValue", void 0);

package/dist/src/nile-vertical-stepper-item/nile-vertical-stepper-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-vertical-stepper-item.js","sourceRoot":"","sources":["../../../src/nile-vertical-stepper-item/nile-vertical-stepper-item.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {LitElement, nothing, html, CSSResultArray, TemplateResult} from 'lit';\nimport { customElement, state, property } from 'lit/decorators.js';\nimport {styles} from './nile-vertical-stepper-item.css';\nimport NileElement from '../internal/nile-element';\nimport { classMap } from 'lit/directives/class-map.js';\n\n\n/**\n * Nile vertical-stepper-item component.\n *\n * @tag nile-vertical-stepper-item\n *\n */\n@customElement('nile-vertical-stepper-item')\nexport class NileVerticalStepperItem extends NileElement {\n\t/* Properties passed directly */\n\t@property({attribute: true, reflect: true}) title: string = '';\n\t@property({attribute: true, reflect: true}) subtitle: string = '';\n\n\n\t/* Properties passed to parent component: NileStepper */\n\t@state() private contentBelow = false;\n\t@state() private size : 'sm' | 'lg' = 'lg';\n\t@state() private icon = 'tick';\n\n\n\t/* Properties Computed at parent level component NileStepper */\n\t@state() private isFirst = false;\n\t@state() private isLast = false;\n\n\t@state() private isComplete = false;\n\t@state() private isCurrent = false;\n\t@state() private currentStepValue :Number;\n\t@state() private completedStepValue :Number;\n\t@state() private calculatedCompletedStepValue :Number;\n\n\t@state() private value :Number;\n\t@state() private haveFlex :Boolean=true;\n\n\t/**\n\t * The styles for nile-vertical-stepper-item\n\t * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n\t */\n\tpublic static get styles(): CSSResultArray {\n\t\treturn [styles];\n\t}\n\n\t/* #endregion */\n\n\t/* #region Methods */\n\n\t/**\n\t * Render method\n\t * @slot This is a slot test\n\t */\n\tpublic render(): TemplateResult {\n\t\tif (this.isLast) this.style.setProperty('--vertical-stepper-flex-val', `0`);\n\t\tconst isCurrent = this.isCurrent;\n\t\tconst isComplete = this.isComplete;\n\n\t\tlet showCompletedIcon=false;\n\t\tif(isComplete && !isCurrent || this.completedStepValue==this.value) showCompletedIcon=true;\n\n\t\tlet suffixStepperLineActive = false;\n\t\tif (isComplete) {\n\t\t\tsuffixStepperLineActive = true;\n\t\t\tif (this.calculatedCompletedStepValue == this.value) suffixStepperLineActive = false;\n\t\t}\n\n\t\tlet iconSize = this.size == 'sm'?14:this.size == 'lg'?16:20;\n\t\treturn html`\n\t\t\t<div \n\t\t\tpart=\"item\"\n\t\t\tclass=\"${classMap({\n\t\t\t\t'stepper__item':true,\n\t\t\t\t'stepper__item--selected':isCurrent,\n\t\t\t\t'stepper__item--default':!isCurrent,\n\t\t\t\t'stepper__item--sm':this.size=='sm',\n\t\t\t\t'stepper__item--lg':this.size=='lg',\n\t\t\t})}\">\n\t\t\t\t<div part=\"connector\" class=\"stepper-item__connector-content\">\n\t\t\t\t\t<div part=\"bulletin\" class=\"stepper__item__bulletin\">\n\t\t\t\t\t\t${showCompletedIcon ? \n\t\t\t\t\t\t\thtml`<div part=\"bulletin-icon\" class=\"${classMap({ 'stepper__bulletin--icon':true, 'stepper__bulletin__icon--active':isCurrent })}\">${this.getSvg()}</div>`\n\t\t\t\t\t\t\t: html`<div part=\"bulletin-dot\" class=\"${classMap({ 'stepper__bulletin--dot':true, 'stepper__bulletin__dot--active':isCurrent })}\"></div>`\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div part=\"line-container\" class=\"stepper__item__line__container\">\n\t\t\t\t\t\t${this.isLast?nothing : html`<div part=\"line\" class=\"${classMap({ 'stepper__item__line':true, 'stepper__item__line--active':suffixStepperLineActive })}\"></div>`}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div part=\"content\" class=\"stepper__item__content\">\n\t\t\t\t\t<div part=\"title\" class=\"${classMap({ 'stepper__content__title':true, \"stepper__content__title--alone\": !this.subtitle, 'stepper__content__title--active':isCurrent })}\">${this.title}</div>\n\t\t\t\t\t<div part=\"subtitle\" class=\"${classMap({ 'stepper__content__subtitle':true, \"stepper__content__subtitle--alone\": !this.title, 'stepper__content__subtitle--active':isCurrent })}\">${this.subtitle}</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t`;\n\t}\n\n\tgetSvg():TemplateResult{\n\t\tlet iconSize = this.size == 'sm' ? 20 : this.size == 'lg' ? 24 : 28;\n\t\treturn html`\n\t\t<svg width=\"${iconSize}\" height=\"${iconSize}\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M22.7953 9.85334L13.2487 19.0667L10.7153 16.36C10.2487 15.92 9.51534 15.8933 8.982 16.2667C8.462 16.6533 8.31534 17.3333 8.63534 17.88L11.6353 22.76C11.9287 23.2133 12.4353 23.4933 13.0087 23.4933C13.5553 23.4933 14.0753 23.2133 14.3687 22.76C14.8487 22.1333 24.0087 11.2133 24.0087 11.2133C25.2087 9.98668 23.7553 8.90668 22.7953 9.84001V9.85334Z\" fill=\"white\"/>\n\t\t</svg>\n\t\t`\n\t}\n\n\n\t/* #endregion */\n}\n\nexport default NileVerticalStepperItem;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-vertical-stepper-item': NileVerticalStepperItem;\n  }\n}"]}
+{"version":3,"file":"nile-vertical-stepper-item.js","sourceRoot":"","sources":["../../../src/nile-vertical-stepper-item/nile-vertical-stepper-item.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {LitElement, nothing, html, CSSResultArray, TemplateResult} from 'lit';\nimport { customElement, state, property } from 'lit/decorators.js';\nimport {styles} from './nile-vertical-stepper-item.css';\nimport NileElement from '../internal/nile-element';\nimport { classMap } from 'lit/directives/class-map.js';\n\n\n/**\n * Nile vertical-stepper-item component.\n *\n * @tag nile-vertical-stepper-item\n *\n */\n@customElement('nile-vertical-stepper-item')\nexport class NileVerticalStepperItem extends NileElement {\n\t/* Properties passed directly */\n\t@property({attribute: true, reflect: true}) title: string = '';\n\t@property({attribute: true, reflect: true}) subtitle: string = '';\n\t@property({attribute: true, reflect: true}) completed: boolean = false;\n\t@property({attribute: true, reflect: true}) current: boolean = false;\n\n\n\t/* Properties passed to parent component: NileStepper */\n\t@state() private contentBelow = false;\n\t@state() private size : 'sm' | 'lg' = 'lg';\n\t@state() private icon = 'tick';\n\n\n\t/* Properties Computed at parent level component NileStepper */\n\t@state() private isFirst = false;\n\t@state() private isLast = false;\n\n\t@state() private isComplete = false;\n\t@state() private isCurrent = false;\n\t@state() private isManualMode = false;\n\t@state() private currentStepValue :Number;\n\t@state() private completedStepValue :Number;\n\t@state() private calculatedCompletedStepValue :Number;\n\n\t@state() private value :Number;\n\t@state() private haveFlex :Boolean=true;\n\n\t/**\n\t * The styles for nile-vertical-stepper-item\n\t * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n\t */\n\tpublic static get styles(): CSSResultArray {\n\t\treturn [styles];\n\t}\n\n\t/* #endregion */\n\n\t/* #region Methods */\n\n\t/**\n\t * Render method\n\t * @slot This is a slot test\n\t */\n\tpublic render(): TemplateResult {\n\t\tif (this.isLast) this.style.setProperty('--vertical-stepper-flex-val', `0`);\n\t\tconst isCurrent = this.isManualMode ? this.current : this.isCurrent;\n\t\tconst isComplete = this.isManualMode ? this.completed : this.isComplete;\n\n\t\tlet showCompletedIcon=false;\n\t\tif(isComplete && !isCurrent || this.completedStepValue==this.value) showCompletedIcon=true;\n\n\t\tlet suffixStepperLineActive = false;\n\t\tif (isComplete) {\n\t\t\tsuffixStepperLineActive = true;\n\t\t\tif (this.calculatedCompletedStepValue == this.value) suffixStepperLineActive = false;\n\t\t}\n\n\t\tlet iconSize = this.size == 'sm'?14:this.size == 'lg'?16:20;\n\t\treturn html`\n\t\t\t<div \n\t\t\tpart=\"item\"\n\t\t\tclass=\"${classMap({\n\t\t\t\t'stepper__item':true,\n\t\t\t\t'stepper__item--selected':isCurrent,\n\t\t\t\t'stepper__item--default':!isCurrent,\n\t\t\t\t'stepper__item--sm':this.size=='sm',\n\t\t\t\t'stepper__item--lg':this.size=='lg',\n\t\t\t})}\">\n\t\t\t\t<div part=\"connector\" class=\"stepper-item__connector-content\">\n\t\t\t\t\t<div part=\"bulletin\" class=\"stepper__item__bulletin\">\n\t\t\t\t\t\t${showCompletedIcon ? \n\t\t\t\t\t\t\thtml`<div part=\"bulletin-icon\" class=\"${classMap({ 'stepper__bulletin--icon':true, 'stepper__bulletin__icon--active':isCurrent })}\">${this.getSvg()}</div>`\n\t\t\t\t\t\t\t: html`<div part=\"bulletin-dot\" class=\"${classMap({ 'stepper__bulletin--dot':true, 'stepper__bulletin__dot--active':isCurrent })}\"></div>`\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div part=\"line-container\" class=\"stepper__item__line__container\">\n\t\t\t\t\t\t${this.isLast?nothing : html`<div part=\"line\" class=\"${classMap({ 'stepper__item__line':true, 'stepper__item__line--active':suffixStepperLineActive })}\"></div>`}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div part=\"content\" class=\"stepper__item__content\">\n\t\t\t\t\t<div part=\"title\" class=\"${classMap({ 'stepper__content__title':true, \"stepper__content__title--alone\": !this.subtitle, 'stepper__content__title--active':isCurrent })}\">${this.title}</div>\n\t\t\t\t\t<div part=\"subtitle\" class=\"${classMap({ 'stepper__content__subtitle':true, \"stepper__content__subtitle--alone\": !this.title, 'stepper__content__subtitle--active':isCurrent })}\">${this.subtitle}</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t`;\n\t}\n\n\tgetSvg():TemplateResult{\n\t\tlet iconSize = this.size == 'sm' ? 20 : this.size == 'lg' ? 24 : 28;\n\t\treturn html`\n\t\t<svg width=\"${iconSize}\" height=\"${iconSize}\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M22.7953 9.85334L13.2487 19.0667L10.7153 16.36C10.2487 15.92 9.51534 15.8933 8.982 16.2667C8.462 16.6533 8.31534 17.3333 8.63534 17.88L11.6353 22.76C11.9287 23.2133 12.4353 23.4933 13.0087 23.4933C13.5553 23.4933 14.0753 23.2133 14.3687 22.76C14.8487 22.1333 24.0087 11.2133 24.0087 11.2133C25.2087 9.98668 23.7553 8.90668 22.7953 9.84001V9.85334Z\" fill=\"white\"/>\n\t\t</svg>\n\t\t`\n\t}\n\n\n\t/* #endregion */\n}\n\nexport default NileVerticalStepperItem;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-vertical-stepper-item': NileVerticalStepperItem;\n  }\n}\n"]}

package/dist/src/nile-virtual-select/nile-virtual-select.d.ts

@@ -163,6 +163,11 @@ export declare class NileVirtualSelect extends NileElement implements NileFormCo
     blockValueChange: boolean;
     /** Disable width synchronization */
     noWidthSync: boolean;
+    /**
+     * When true, the listbox will be appended to the document body instead of the parent container.
+     * This is useful when the parent has overflow: hidden, clip-path, or transform applied.
+     */
+    bodyAppend: boolean;
     /**
      * The maximum number of selected options to show when `multiple` is true. After the maximum, "+n" will be shown to
      * indicate the number of additional items that are selected. Set to 0 to remove the limit.
@@ -170,6 +175,8 @@ export declare class NileVirtualSelect extends NileElement implements NileFormCo
     maxOptionsVisible: number;
     oldMaxOptionsVisible: number;
     showListbox: boolean;
+    private bodyAppendContainer;
+    private bodyAppendListbox;
     /** Gets the validity state object */
     get validity(): ValidityState;
     /** Gets the validation message */
@@ -209,6 +216,8 @@ export declare class NileVirtualSelect extends NileElement implements NileFormCo
      * we are catching only the error message related to the virtualizer.
      */
     private handleWindowError;
+    private handleWindowResize;
+    private handleWindowScroll;
     private handleFooterClick;
     private toggleShowSelected;
     private unSelectAll;
@@ -232,6 +241,7 @@ export declare class NileVirtualSelect extends NileElement implements NileFormCo
     handleSearchFocus(): void;
     handleSearchBlur(): void;
     handleSearchChange(e: any): void;
+    repaintOptionsContainer(): void;
     handleScroll(e: Event): void;
     filterVirtualOptions(searchValue: string): void;
     private handleInvalid;
@@ -240,6 +250,7 @@ export declare class NileVirtualSelect extends NileElement implements NileFormCo
     handleDataChange(): void;
     handleRenderItemConfigChange(): void;
     handleOptionsLoadingChange(): void;
+    handleBodyAppendChange(): void;
     handleOpenChange(): Promise<void>;
     private handleOpen;
     private handleClose;
@@ -278,6 +289,14 @@ export declare class NileVirtualSelect extends NileElement implements NileFormCo
     private calculateWidthOfSelectTagsDiv;
     private calculateTotalWidthOfTags;
     private resetScrollPosition;
+    private createBodyAppendContainer;
+    private createBodyAppendListbox;
+    private positionBodyAppend;
+    private updateBodyAppendPosition;
+    private updateBodyAppendContent;
+    private attachBodyAppendEventListeners;
+    private setupBodyAppend;
+    private cleanupBodyAppend;
 }
 export default NileVirtualSelect;
 declare global {

package/dist/src/nile-virtual-select/nile-virtual-select.js

@@ -173,6 +173,11 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
         this.blockValueChange = false;
         /** Disable width synchronization */
         this.noWidthSync = false;
+        /**
+         * When true, the listbox will be appended to the document body instead of the parent container.
+         * This is useful when the parent has overflow: hidden, clip-path, or transform applied.
+         */
+        this.bodyAppend = false;
         /**
          * The maximum number of selected options to show when `multiple` is true. After the maximum, "+n" will be shown to
          * indicate the number of additional items that are selected. Set to 0 to remove the limit.
@@ -180,13 +185,17 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
         this.maxOptionsVisible = 3;
         this.oldMaxOptionsVisible = 1;
         this.showListbox = false;
+        // Body append-related state
+        this.bodyAppendContainer = null;
+        this.bodyAppendListbox = null;
         this.handleDocumentMouseDown = (event) => {
             if (!this.open)
                 return;
             const path = event.composedPath();
             const hitSelf = path.includes(this);
             const hitPopup = this.popup && path.includes(this.popup);
-            if (!hitSelf && !hitPopup) {
+            const hitBodyAppend = this.bodyAppend && this.bodyAppendContainer && path.includes(this.bodyAppendContainer);
+            if (!hitSelf && !hitPopup && !hitBodyAppend) {
                 this.hide();
             }
         };
@@ -202,6 +211,12 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
                 return;
             }
         };
+        this.handleWindowResize = () => {
+            this.updateBodyAppendPosition();
+        };
+        this.handleWindowScroll = () => {
+            this.updateBodyAppendPosition();
+        };
         this.resizeController = new ResizeController(this, {
             callback: (entries) => {
                 for (const entry of entries) {
@@ -237,6 +252,8 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
             clearTimeout(this.scrollTimeout);
             this.scrollTimeout = undefined;
         }
+        // Clean up body append elements
+        this.cleanupBodyAppend();
     }
     updated(changedProperties) {
         if (changedProperties.has('value')) {
@@ -289,18 +306,26 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
         this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
         this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
         this.handleWindowError = this.handleWindowError.bind(this);
+        this.handleWindowResize = this.handleWindowResize.bind(this);
+        this.handleWindowScroll = this.handleWindowScroll.bind(this);
     }
     addOpenListeners() {
         document.addEventListener('focusin', this.handleDocumentFocusIn);
         document.addEventListener('keydown', this.handleDocumentKeyDown);
         document.addEventListener('mousedown', this.handleDocumentMouseDown);
         window.addEventListener('error', this.handleWindowError);
+        if (this.bodyAppend) {
+            window.addEventListener('resize', this.handleWindowResize);
+            window.addEventListener('scroll', this.handleWindowScroll, true);
+        }
     }
     removeOpenListeners() {
         document.removeEventListener('focusin', this.handleDocumentFocusIn);
         document.removeEventListener('keydown', this.handleDocumentKeyDown);
         document.removeEventListener('mousedown', this.handleDocumentMouseDown);
         window.removeEventListener('error', this.handleWindowError);
+        window.removeEventListener('resize', this.handleWindowResize);
+        window.removeEventListener('scroll', this.handleWindowScroll, true);
     }
     handleFocus() {
         this.hasFocus = true;
@@ -316,7 +341,8 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
         const path = event.composedPath();
         const hitSelf = path.includes(this);
         const hitPopup = this.popup && path.includes(this.popup);
-        if (!hitSelf && !hitPopup) {
+        const hitBodyAppend = this.bodyAppend && this.bodyAppendContainer && path.includes(this.bodyAppendContainer);
+        if (!hitSelf && !hitPopup && !hitBodyAppend) {
             this.hide();
         }
     }
@@ -383,7 +409,7 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
             this.data = [...this.originalOptionItems];
         }
         this.requestUpdate();
-        this.resetScrollPosition();
+        this.repaintOptionsContainer();
     }
     unSelectAll() {
         this.showSelected = false;
@@ -530,6 +556,8 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
         this.updateValidity();
         if (this.selectedOptions.length === 0) {
             this.showSelected = false;
+            this.filterVirtualOptions('');
+            this.repaintOptionsContainer();
         }
         this.calculateTotalWidthOfTags();
     }
@@ -547,20 +575,23 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
         });
         if (!this.disableLocalSearch) {
             this.filterVirtualOptions(this.searchValue);
-            this.resetScrollPosition();
-            this.updateComplete.then(() => {
-                const virtualized = this.shadowRoot?.querySelector('.virtualized');
-                if (virtualized) {
-                    if (this.data.length <= 5) {
-                        virtualized.classList.add('no-scroll');
-                    }
-                    else {
-                        virtualized.classList.remove('no-scroll');
-                    }
-                }
-            });
+            this.repaintOptionsContainer();
         }
     }
+    repaintOptionsContainer() {
+        this.resetScrollPosition();
+        this.updateComplete.then(() => {
+            const virtualized = this.shadowRoot?.querySelector('.virtualized');
+            if (virtualized) {
+                if (this.data.length <= 5) {
+                    virtualized.classList.add('no-scroll');
+                }
+                else {
+                    virtualized.classList.remove('no-scroll');
+                }
+            }
+        });
+    }
     handleScroll(e) {
         if (this.showSelected) {
             return;
@@ -629,6 +660,10 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
             this.showNoResults = false;
         }
         this.requestUpdate();
+        // Update body append content if it's active
+        if (this.bodyAppend && this.bodyAppendContainer) {
+            this.updateBodyAppendContent();
+        }
     }
     handleRenderItemConfigChange() {
         if (this.value && this.data.length > 0) {
@@ -642,15 +677,35 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
             this.showNoResults = true;
         }
         this.requestUpdate();
+        // Update body append content if it's active
+        if (this.bodyAppend && this.bodyAppendContainer) {
+            this.updateBodyAppendContent();
+        }
+    }
+    handleBodyAppendChange() {
+        if (this.open) {
+            if (this.bodyAppend) {
+                this.setupBodyAppend();
+            }
+            else {
+                this.cleanupBodyAppend();
+            }
+        }
     }
     async handleOpenChange() {
         if (this.open && !this.disabled) {
             await this.handleOpen();
             this.showListbox = true;
+            if (this.bodyAppend) {
+                this.setupBodyAppend();
+            }
         }
         else {
             await this.handleClose();
             this.showListbox = false;
+            if (this.bodyAppend) {
+                this.cleanupBodyAppend();
+            }
         }
     }
     async handleOpen() {
@@ -993,9 +1048,10 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
         part="listbox"
         class="select__listbox ${this.searchEnabled
             ? 'select__search-enabled '
-            : ''}"
+            : ''} ${this.bodyAppend ? 'select__body-append-hidden' : ''}"
         tabindex="-1"
         @mouseup=${this.handleOptionClick}
+        style=${this.bodyAppend ? 'display: none;' : ''}
       >
         ${this.renderSearch()}
         ${this.renderLoader()}
@@ -1164,6 +1220,170 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
             }
         });
     }
+    createBodyAppendContainer() {
+        const container = document.createElement('div');
+        container.style.position = 'absolute';
+        container.style.zIndex = '9999';
+        container.style.pointerEvents = 'none';
+        container.className = 'nile-virtual-select-body-append';
+        // Apply additional styling to match the original popup
+        container.style.background = 'white';
+        container.style.border = '1px solid #e0e0e0';
+        container.style.borderRadius = '4px';
+        container.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)';
+        container.style.maxHeight = '300px';
+        container.style.overflow = 'hidden';
+        return container;
+    }
+    createBodyAppendListbox() {
+        const listbox = document.createElement('div');
+        listbox.id = 'listbox';
+        listbox.setAttribute('role', 'listbox');
+        listbox.setAttribute('aria-expanded', this.open ? 'true' : 'false');
+        listbox.setAttribute('aria-multiselectable', this.multiple ? 'true' : 'false');
+        listbox.setAttribute('aria-labelledby', 'label');
+        listbox.setAttribute('part', 'listbox');
+        listbox.className = `select__listbox ${this.searchEnabled ? 'select__search-enabled ' : ''}`;
+        listbox.setAttribute('tabindex', '-1');
+        // Apply styling to match the original listbox
+        listbox.style.background = 'white';
+        listbox.style.border = 'none';
+        listbox.style.borderRadius = '4px';
+        listbox.style.maxHeight = '300px';
+        listbox.style.overflowY = 'auto';
+        listbox.addEventListener('mouseup', this.handleOptionClick.bind(this));
+        return listbox;
+    }
+    positionBodyAppend() {
+        if (!this.bodyAppendContainer || !this.popup)
+            return;
+        const rect = this.getBoundingClientRect();
+        // Position the body append container to match the popup position
+        this.bodyAppendContainer.style.left = `${rect.left}px`;
+        this.bodyAppendContainer.style.top = `${rect.bottom + 6}px`; // 6px is the distance from the popup
+        this.bodyAppendContainer.style.width = `${rect.width}px`;
+        this.bodyAppendContainer.style.pointerEvents = 'auto';
+    }
+    updateBodyAppendPosition() {
+        if (this.bodyAppend && this.bodyAppendContainer) {
+            this.positionBodyAppend();
+        }
+    }
+    async updateBodyAppendContent() {
+        if (!this.bodyAppendListbox)
+            return;
+        // Clear the body append listbox
+        this.bodyAppendListbox.innerHTML = '';
+        // Create a new listbox element
+        const listbox = document.createElement('div');
+        listbox.id = 'listbox';
+        listbox.setAttribute('role', 'listbox');
+        listbox.setAttribute('aria-expanded', this.open ? 'true' : 'false');
+        listbox.setAttribute('aria-multiselectable', this.multiple ? 'true' : 'false');
+        listbox.setAttribute('aria-labelledby', 'label');
+        listbox.setAttribute('part', 'listbox');
+        listbox.className = `select__listbox ${this.searchEnabled ? 'select__search-enabled ' : ''}`;
+        listbox.setAttribute('tabindex', '-1');
+        // Render the content using Lit's render function
+        const { render } = await import('lit');
+        // Render search
+        if (this.searchEnabled) {
+            const searchContent = this.renderSearch();
+            const searchDiv = document.createElement('div');
+            render(searchContent, searchDiv);
+            listbox.appendChild(searchDiv.firstElementChild);
+        }
+        // Render loader
+        const loaderContent = this.renderLoader();
+        const loaderDiv = document.createElement('div');
+        render(loaderContent, loaderDiv);
+        if (loaderDiv.firstElementChild) {
+            listbox.appendChild(loaderDiv.firstElementChild);
+        }
+        // Render virtualized content
+        const virtualizedContent = this.getVirtualizedContent();
+        const virtualizedDiv = document.createElement('div');
+        render(virtualizedContent, virtualizedDiv);
+        if (virtualizedDiv.firstElementChild) {
+            listbox.appendChild(virtualizedDiv.firstElementChild);
+        }
+        // Render footer
+        if (this.multiple) {
+            const footerContent = this.renderFooter();
+            const footerDiv = document.createElement('div');
+            render(footerContent, footerDiv);
+            if (footerDiv.firstElementChild) {
+                listbox.appendChild(footerDiv.firstElementChild);
+            }
+        }
+        // Append the listbox to the body append container
+        this.bodyAppendListbox.appendChild(listbox);
+        // Re-attach event listeners
+        this.attachBodyAppendEventListeners();
+    }
+    attachBodyAppendEventListeners() {
+        if (!this.bodyAppendListbox)
+            return;
+        // Find the cloned listbox within the body append container
+        const clonedListbox = this.bodyAppendListbox.querySelector('.select__listbox');
+        if (!clonedListbox)
+            return;
+        // Re-attach the option click handler - use event delegation for better performance
+        clonedListbox.addEventListener('mouseup', this.handleOptionClick.bind(this));
+        // Also add click handler for nile-option elements specifically
+        clonedListbox.addEventListener('click', (event) => {
+            const target = event.target;
+            const option = target.closest('nile-option');
+            if (option) {
+                event.preventDefault();
+                event.stopPropagation();
+                this.handleOptionClick(event);
+            }
+        });
+        // Re-attach search handlers if search is enabled
+        const searchInput = clonedListbox.querySelector('nile-input');
+        if (searchInput) {
+            searchInput.addEventListener('nile-input', this.handleSearchChange.bind(this));
+            searchInput.addEventListener('nile-focus', this.handleSearchFocus.bind(this));
+            searchInput.addEventListener('nile-change', this.onInputChange.bind(this));
+        }
+        // Re-attach scroll handler
+        const virtualizedContainer = clonedListbox.querySelector('.virtualized');
+        if (virtualizedContainer) {
+            virtualizedContainer.addEventListener('scroll', this.handleScroll.bind(this));
+        }
+        // Re-attach footer handlers if multiple
+        if (this.multiple) {
+            const showSelectedSpan = clonedListbox.querySelector('.select__footer span[style*="cursor: pointer"]');
+            if (showSelectedSpan) {
+                showSelectedSpan.addEventListener('click', this.toggleShowSelected.bind(this));
+            }
+            const clearSpan = clonedListbox.querySelector('.select__clear');
+            if (clearSpan) {
+                clearSpan.addEventListener('click', this.unSelectAll.bind(this));
+            }
+        }
+    }
+    setupBodyAppend() {
+        if (!this.bodyAppend)
+            return;
+        this.bodyAppendContainer = this.createBodyAppendContainer();
+        this.bodyAppendListbox = this.createBodyAppendListbox();
+        this.bodyAppendContainer.appendChild(this.bodyAppendListbox);
+        document.body.appendChild(this.bodyAppendContainer);
+        this.positionBodyAppend();
+        // Wait for the next tick to ensure the original listbox is rendered
+        this.updateComplete.then(async () => {
+            await this.updateBodyAppendContent();
+        });
+    }
+    cleanupBodyAppend() {
+        if (this.bodyAppendContainer && this.bodyAppendContainer.parentNode) {
+            this.bodyAppendContainer.parentNode.removeChild(this.bodyAppendContainer);
+        }
+        this.bodyAppendContainer = null;
+        this.bodyAppendListbox = null;
+    }
 };
 NileVirtualSelect.styles = styles;
 __decorate([
@@ -1303,6 +1523,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NileVirtualSelect.prototype, "noWidthSync", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileVirtualSelect.prototype, "bodyAppend", void 0);
 __decorate([
     property({ attribute: 'max-options-visible', type: Number })
 ], NileVirtualSelect.prototype, "maxOptionsVisible", void 0);
@@ -1312,6 +1535,12 @@ __decorate([
 __decorate([
     state()
 ], NileVirtualSelect.prototype, "showListbox", void 0);
+__decorate([
+    state()
+], NileVirtualSelect.prototype, "bodyAppendContainer", void 0);
+__decorate([
+    state()
+], NileVirtualSelect.prototype, "bodyAppendListbox", void 0);
 __decorate([
     watch('disabled', { waitUntilFirstUpdate: true })
 ], NileVirtualSelect.prototype, "handleDisabledChange", null);
@@ -1327,6 +1556,9 @@ __decorate([
 __decorate([
     watch('optionsLoading', { waitUntilFirstUpdate: true })
 ], NileVirtualSelect.prototype, "handleOptionsLoadingChange", null);
+__decorate([
+    watch('bodyAppend', { waitUntilFirstUpdate: true })
+], NileVirtualSelect.prototype, "handleBodyAppendChange", null);
 __decorate([
     watch('open', { waitUntilFirstUpdate: true })
 ], NileVirtualSelect.prototype, "handleOpenChange", null);