@aquera/nile-elements 1.3.0-beta-1.0 → 1.3.0-beta-1.1

package/dist/src/nile-menu/portal-utils.d.ts

@@ -0,0 +1,21 @@
+import { type Placement, type MiddlewareData } from '@floating-ui/dom';
+export declare class PortalUtils {
+    static calculateAvailableSpace(referenceElement: HTMLElement): {
+        spaceAbove: number;
+        spaceBelow: number;
+        viewportHeight: number;
+    };
+    static getOptimalPlacement(referenceElement: HTMLElement): Placement;
+    static findBoundaryElements(component: HTMLElement): Element[] | undefined;
+    static calculateOptimalHeight(referenceRect: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }, viewportHeight: number, placement: Placement): number;
+    static extractStylesAsCSS(styles: any): string;
+    static generateStyleId(): string;
+    static isPositioningOptimal(placement: Placement, referenceElement: HTMLElement): boolean;
+    static applyCollisionData(element: HTMLElement, middlewareData: MiddlewareData, placement: Placement): void;
+    static findReferenceElement(menu: HTMLElement): HTMLElement | null;
+}

package/dist/src/nile-menu/portal-utils.js

@@ -0,0 +1,128 @@
+export class PortalUtils {
+    static calculateAvailableSpace(referenceElement) {
+        const rect = referenceElement.getBoundingClientRect();
+        const viewportHeight = window.innerHeight;
+        const spaceBelow = viewportHeight - rect.bottom;
+        const spaceAbove = rect.top;
+        return { spaceAbove, spaceBelow, viewportHeight };
+    }
+    static getOptimalPlacement(referenceElement) {
+        const { spaceAbove, spaceBelow } = this.calculateAvailableSpace(referenceElement);
+        if (spaceBelow < 200 && spaceAbove > spaceBelow) {
+            return 'top';
+        }
+        return 'bottom';
+    }
+    static findBoundaryElements(component) {
+        const boundaryElements = [];
+        let currentElement = component.parentElement;
+        while (currentElement && currentElement !== document.body) {
+            const computedStyle = window.getComputedStyle(currentElement);
+            const overflow = computedStyle.overflow;
+            const overflowY = computedStyle.overflowY;
+            const overflowX = computedStyle.overflowX;
+            if (overflow === 'auto' || overflow === 'scroll' ||
+                overflowY === 'auto' || overflowY === 'scroll' ||
+                overflowX === 'auto' || overflowX === 'scroll') {
+                boundaryElements.push(currentElement);
+            }
+            if (currentElement.hasAttribute('data-floating-boundary') ||
+                currentElement.classList.contains('floating-boundary') ||
+                currentElement.classList.contains('scroll-container')) {
+                boundaryElements.push(currentElement);
+            }
+            currentElement = currentElement.parentElement;
+        }
+        return boundaryElements.length > 0 ? boundaryElements : undefined;
+    }
+    static calculateOptimalHeight(referenceRect, viewportHeight, placement) {
+        const spaceBelow = viewportHeight - (referenceRect.y + referenceRect.height);
+        const spaceAbove = referenceRect.y;
+        if (spaceAbove > spaceBelow) {
+            return Math.max(spaceAbove - 20, 100);
+        }
+        else if (spaceBelow > spaceAbove) {
+            return Math.max(spaceBelow - 20, 100);
+        }
+        return Math.max(Math.min(spaceAbove, spaceBelow) - 20, 100);
+    }
+    static extractStylesAsCSS(styles) {
+        if (typeof styles === 'string') {
+            return styles;
+        }
+        if (Array.isArray(styles)) {
+            return styles.map(style => this.extractStylesAsCSS(style)).join('\n');
+        }
+        if (styles && typeof styles === 'object' && styles.cssText) {
+            return styles.cssText;
+        }
+        return '';
+    }
+    static generateStyleId() {
+        return `nile-menu-styles-${Math.random().toString(36).substring(2, 11)}`;
+    }
+    static isPositioningOptimal(placement, referenceElement) {
+        const { spaceAbove, spaceBelow } = this.calculateAvailableSpace(referenceElement);
+        const isAbove = placement.startsWith('top');
+        const isBelow = placement.startsWith('bottom');
+        if (isAbove && spaceBelow > spaceAbove)
+            return false;
+        if (isBelow && spaceAbove > spaceBelow)
+            return false;
+        return true;
+    }
+    static applyCollisionData(element, middlewareData, placement) {
+        if (middlewareData.flip) {
+            const { overflows } = middlewareData.flip;
+            element.setAttribute('data-placement', placement);
+            if (overflows && overflows.length > 0) {
+                const overflowPlacements = overflows.map(overflow => overflow.placement).join(',');
+                element.setAttribute('data-overflow', overflowPlacements);
+            }
+            else {
+                element.removeAttribute('data-overflow');
+            }
+        }
+        if (middlewareData.shift) {
+            const { x, y } = middlewareData.shift;
+            if (x !== undefined && y !== undefined && (x !== 0 || y !== 0)) {
+                element.setAttribute('data-shift', `${x},${y}`);
+            }
+            else {
+                element.removeAttribute('data-shift');
+            }
+        }
+        if (middlewareData.size) {
+            const { availableWidth, availableHeight } = middlewareData.size;
+            if (availableWidth !== undefined) {
+                element.setAttribute('data-available-width', availableWidth.toString());
+            }
+            if (availableHeight !== undefined) {
+                element.setAttribute('data-available-height', availableHeight.toString());
+            }
+        }
+    }
+    static findReferenceElement(menu) {
+        // Try to find nile-dropdown parent first (common use case)
+        let current = menu.parentElement;
+        while (current && current !== document.body) {
+            if (current.tagName.toLowerCase() === 'nile-dropdown') {
+                // Get the trigger element from the dropdown
+                const dropdown = current;
+                const triggerSlot = dropdown.shadowRoot?.querySelector('.dropdown__trigger');
+                if (triggerSlot) {
+                    const triggerElements = triggerSlot.assignedElements({ flatten: true });
+                    if (triggerElements.length > 0) {
+                        return triggerElements[0];
+                    }
+                }
+                // Fallback to parent container itself
+                return current;
+            }
+            current = current.parentElement;
+        }
+        // If no parent container found, try to find closest parent element
+        return menu.parentElement || menu;
+    }
+}
+//# sourceMappingURL=portal-utils.js.map

package/dist/src/nile-menu/portal-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"portal-utils.js","sourceRoot":"","sources":["../../../src/nile-menu/portal-utils.ts"],"names":[],"mappings":"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","sourcesContent":["import { \n  type Placement,\n  type MiddlewareData\n} from '@floating-ui/dom';\n\nexport class PortalUtils {\n  static calculateAvailableSpace(referenceElement: HTMLElement): {\n    spaceAbove: number;\n    spaceBelow: number;\n    viewportHeight: number;\n  } {\n    const rect = referenceElement.getBoundingClientRect();\n    const viewportHeight = window.innerHeight;\n    const spaceBelow = viewportHeight - rect.bottom;\n    const spaceAbove = rect.top;\n    \n    return { spaceAbove, spaceBelow, viewportHeight };\n  }\n\n  static getOptimalPlacement(referenceElement: HTMLElement): Placement {\n    const { spaceAbove, spaceBelow } = this.calculateAvailableSpace(referenceElement);\n    \n    if (spaceBelow < 200 && spaceAbove > spaceBelow) {\n      return 'top';\n    }\n    \n    return 'bottom';\n  }\n\n  static findBoundaryElements(component: HTMLElement): Element[] | undefined {\n    const boundaryElements: Element[] = [];\n    \n    let currentElement = component.parentElement;\n    \n    while (currentElement && currentElement !== document.body) {\n      const computedStyle = window.getComputedStyle(currentElement);\n      const overflow = computedStyle.overflow;\n      const overflowY = computedStyle.overflowY;\n      const overflowX = computedStyle.overflowX;\n      \n      if (overflow === 'auto' || overflow === 'scroll' || \n          overflowY === 'auto' || overflowY === 'scroll' ||\n          overflowX === 'auto' || overflowX === 'scroll') {\n        boundaryElements.push(currentElement);\n      }\n      \n      if (currentElement.hasAttribute('data-floating-boundary') ||\n          currentElement.classList.contains('floating-boundary') ||\n          currentElement.classList.contains('scroll-container')) {\n        boundaryElements.push(currentElement);\n      }\n      \n      currentElement = currentElement.parentElement;\n    }\n    \n    return boundaryElements.length > 0 ? boundaryElements : undefined;\n  }\n\n  static calculateOptimalHeight(\n    referenceRect: { x: number; y: number; width: number; height: number },\n    viewportHeight: number,\n    placement: Placement\n  ): number {\n    const spaceBelow = viewportHeight - (referenceRect.y + referenceRect.height);\n    const spaceAbove = referenceRect.y;\n    \n    if (spaceAbove > spaceBelow) {\n      return Math.max(spaceAbove - 20, 100);\n    }\n    else if (spaceBelow > spaceAbove) {\n      return Math.max(spaceBelow - 20, 100);\n    }\n    \n    return Math.max(Math.min(spaceAbove, spaceBelow) - 20, 100);\n  }\n\n  static extractStylesAsCSS(styles: any): string {\n    if (typeof styles === 'string') {\n      return styles;\n    }\n    \n    if (Array.isArray(styles)) {\n      return styles.map(style => this.extractStylesAsCSS(style)).join('\\n');\n    }\n    \n    if (styles && typeof styles === 'object' && styles.cssText) {\n      return styles.cssText;\n    }\n    \n    return '';\n  }\n\n  static generateStyleId(): string {\n    return `nile-menu-styles-${Math.random().toString(36).substring(2, 11)}`;\n  }\n\n  static isPositioningOptimal(\n    placement: Placement,\n    referenceElement: HTMLElement\n  ): boolean {\n    const { spaceAbove, spaceBelow } = this.calculateAvailableSpace(referenceElement);\n    \n    const isAbove = placement.startsWith('top');\n    const isBelow = placement.startsWith('bottom');\n    \n    if (isAbove && spaceBelow > spaceAbove) return false;\n    if (isBelow && spaceAbove > spaceBelow) return false;\n    \n    return true;\n  }\n\n  static applyCollisionData(\n    element: HTMLElement,\n    middlewareData: MiddlewareData,\n    placement: Placement\n  ): void {\n    if (middlewareData.flip) {\n      const { overflows } = middlewareData.flip;\n      \n      element.setAttribute('data-placement', placement);\n      \n      if (overflows && overflows.length > 0) {\n        const overflowPlacements = overflows.map(overflow => overflow.placement).join(',');\n        element.setAttribute('data-overflow', overflowPlacements);\n      } else {\n        element.removeAttribute('data-overflow');\n      }\n    }\n\n    if (middlewareData.shift) {\n      const { x, y } = middlewareData.shift;\n      \n      if (x !== undefined && y !== undefined && (x !== 0 || y !== 0)) {\n        element.setAttribute('data-shift', `${x},${y}`);\n      } else {\n        element.removeAttribute('data-shift');\n      }\n    }\n\n    if (middlewareData.size) {\n      const { availableWidth, availableHeight } = middlewareData.size;\n      \n      if (availableWidth !== undefined) {\n        element.setAttribute('data-available-width', availableWidth.toString());\n      }\n      if (availableHeight !== undefined) {\n        element.setAttribute('data-available-height', availableHeight.toString());\n      }\n    }\n  }\n\n  static findReferenceElement(menu: HTMLElement): HTMLElement | null {\n    // Try to find nile-dropdown parent first (common use case)\n    let current = menu.parentElement;\n    while (current && current !== document.body) {\n      if (current.tagName.toLowerCase() === 'nile-dropdown') {\n        // Get the trigger element from the dropdown\n        const dropdown = current as any;\n        const triggerSlot = dropdown.shadowRoot?.querySelector('.dropdown__trigger') as HTMLSlotElement;\n        if (triggerSlot) {\n          const triggerElements = triggerSlot.assignedElements({ flatten: true });\n          if (triggerElements.length > 0) {\n            return triggerElements[0] as HTMLElement;\n          }\n        }\n        // Fallback to parent container itself\n        return current as HTMLElement;\n      }\n      current = current.parentElement;\n    }\n    \n    // If no parent container found, try to find closest parent element\n    return menu.parentElement || menu;\n  }\n}\n\n"]}

package/dist/src/nile-popover/__snapshots__/nile-popover.test.snap.js

@@ -0,0 +1,22 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["NilePopover renders correctly"] = 
+`<nile-popup
+  active=""
+  arrowplacement="anchor"
+  distance="18"
+  placement="top"
+  shift=""
+  strategy="absolute"
+>
+  <slot
+    aria-describedby="tooltip"
+    name="anchor"
+    slot="anchor"
+  >
+  </slot>
+</nile-popup>
+`;
+/* end snapshot NilePopover renders correctly */
+

package/dist/src/nile-popover/popover-portal-handler.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { PortalContentHandler, PortalConfig } from '../internal/portal-manager';
+import type { CSSResultGroup } from 'lit';
+export declare class PopoverPortalHandler implements PortalContentHandler {
+    private component;
+    private config;
+    private clonedPopoverContent;
+    constructor(component: any, config?: PortalConfig);
+    createPortalContent(): HTMLElement;
+    private createFallbackContent;
+    updatePortalContent(portalElement: HTMLElement): void;
+    setupEventListeners(portalElement: HTMLElement): void;
+    cleanupEventListeners(portalElement: HTMLElement): void;
+    getReferenceElement(): HTMLElement;
+    getComponentStyles(): CSSResultGroup | undefined;
+}

package/dist/src/nile-popover/popover-portal-handler.js

@@ -0,0 +1,106 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export class PopoverPortalHandler {
+    constructor(component, config = {}) {
+        this.component = component;
+        this.config = config;
+        this.clonedPopoverContent = null;
+    }
+    createPortalContent() {
+        // Find the popover content in the shadow DOM (now it's always rendered but hidden when portal is enabled)
+        const popoverBox = this.component.shadowRoot?.querySelector('.popover__box');
+        if (!popoverBox) {
+            // Fallback: create content directly
+            return this.createFallbackContent();
+        }
+        // Clone the popover content for portal
+        this.clonedPopoverContent = popoverBox.cloneNode(true);
+        this.clonedPopoverContent.style.display = 'block';
+        this.clonedPopoverContent.style.position = 'relative';
+        return this.clonedPopoverContent;
+    }
+    createFallbackContent() {
+        // Create the popover content directly as fallback
+        this.clonedPopoverContent = document.createElement('div');
+        this.clonedPopoverContent.className = 'popover__box';
+        this.clonedPopoverContent.setAttribute('part', 'popover');
+        this.clonedPopoverContent.style.display = 'block';
+        this.clonedPopoverContent.style.position = 'relative';
+        // Create the title element
+        const titleElement = document.createElement('div');
+        titleElement.className = 'popover__title';
+        titleElement.textContent = this.component.title;
+        // Create the base content slot
+        const baseSlot = document.createElement('div');
+        baseSlot.setAttribute('part', 'base');
+        // Create the action slot
+        const actionSlot = document.createElement('div');
+        actionSlot.className = 'popover__action';
+        // Append elements
+        this.clonedPopoverContent.appendChild(titleElement);
+        this.clonedPopoverContent.appendChild(baseSlot);
+        this.clonedPopoverContent.appendChild(actionSlot);
+        return this.clonedPopoverContent;
+    }
+    updatePortalContent(portalElement) {
+        if (!this.component.isShow) {
+            portalElement.style.display = 'none';
+            return;
+        }
+        portalElement.style.display = 'block';
+        // Update the content by cloning from the shadow DOM again
+        const originalPopoverBox = this.component.shadowRoot?.querySelector('.popover__box');
+        if (originalPopoverBox) {
+            // Clone the updated content
+            const updatedContent = originalPopoverBox.cloneNode(true);
+            updatedContent.style.display = 'block';
+            updatedContent.style.position = 'relative';
+            // Replace the content
+            portalElement.innerHTML = updatedContent.innerHTML;
+        }
+    }
+    setupEventListeners(portalElement) {
+        // Handle click events to prevent them from bubbling up
+        portalElement.addEventListener('click', (event) => {
+            event.stopPropagation();
+        });
+        // Handle any other popover-specific events
+        // For example, if the popover has action buttons, we might need to handle those
+        const actionSlot = portalElement.querySelector('slot[name="action"]');
+        if (actionSlot) {
+            actionSlot.addEventListener('click', (event) => {
+                event.stopPropagation();
+                // Forward the event to the original component if needed
+                this.component.dispatchEvent(new CustomEvent('nile-popover-action', {
+                    detail: { originalEvent: event },
+                    bubbles: true
+                }));
+            });
+        }
+    }
+    cleanupEventListeners(portalElement) {
+        // Remove all event listeners
+        const newElement = portalElement.cloneNode(true);
+        portalElement.parentNode?.replaceChild(newElement, portalElement);
+    }
+    getReferenceElement() {
+        // Get the anchor element from the slot
+        const anchorSlot = this.component.shadowRoot?.querySelector('slot[name="anchor"]');
+        if (anchorSlot) {
+            const assignedElements = anchorSlot.assignedElements();
+            if (assignedElements.length > 0) {
+                return assignedElements[0];
+            }
+        }
+        // Fallback to the component itself
+        return this.component;
+    }
+    getComponentStyles() {
+        return this.component.constructor.styles;
+    }
+}
+//# sourceMappingURL=popover-portal-handler.js.map

package/dist/src/nile-popover/popover-portal-handler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-portal-handler.js","sourceRoot":"","sources":["../../../src/nile-popover/popover-portal-handler.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2025\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 { PortalContentHandler, PortalConfig } from '../internal/portal-manager';\nimport type { CSSResultGroup } from 'lit';\n\nexport class PopoverPortalHandler implements PortalContentHandler {\n  private clonedPopoverContent: HTMLElement | null = null;\n\n  constructor(\n    private component: any,\n    private config: PortalConfig = {}\n  ) {}\n\n  createPortalContent(): HTMLElement {\n    // Find the popover content in the shadow DOM (now it's always rendered but hidden when portal is enabled)\n    const popoverBox = this.component.shadowRoot?.querySelector('.popover__box') as HTMLElement;\n    if (!popoverBox) {\n      // Fallback: create content directly\n      return this.createFallbackContent();\n    }\n\n    // Clone the popover content for portal\n    this.clonedPopoverContent = popoverBox.cloneNode(true) as HTMLElement;\n    this.clonedPopoverContent.style.display = 'block';\n    this.clonedPopoverContent.style.position = 'relative';\n    \n    return this.clonedPopoverContent;\n  }\n\n  private createFallbackContent(): HTMLElement {\n    // Create the popover content directly as fallback\n    this.clonedPopoverContent = document.createElement('div');\n    this.clonedPopoverContent.className = 'popover__box';\n    this.clonedPopoverContent.setAttribute('part', 'popover');\n    this.clonedPopoverContent.style.display = 'block';\n    this.clonedPopoverContent.style.position = 'relative';\n    \n    // Create the title element\n    const titleElement = document.createElement('div');\n    titleElement.className = 'popover__title';\n    titleElement.textContent = this.component.title;\n    \n    // Create the base content slot\n    const baseSlot = document.createElement('div');\n    baseSlot.setAttribute('part', 'base');\n    \n    // Create the action slot\n    const actionSlot = document.createElement('div');\n    actionSlot.className = 'popover__action';\n    \n    // Append elements\n    this.clonedPopoverContent.appendChild(titleElement);\n    this.clonedPopoverContent.appendChild(baseSlot);\n    this.clonedPopoverContent.appendChild(actionSlot);\n    \n    return this.clonedPopoverContent;\n  }\n\n  updatePortalContent(portalElement: HTMLElement): void {\n    if (!this.component.isShow) {\n      portalElement.style.display = 'none';\n      return;\n    }\n\n    portalElement.style.display = 'block';\n\n    // Update the content by cloning from the shadow DOM again\n    const originalPopoverBox = this.component.shadowRoot?.querySelector('.popover__box') as HTMLElement;\n    if (originalPopoverBox) {\n      // Clone the updated content\n      const updatedContent = originalPopoverBox.cloneNode(true) as HTMLElement;\n      updatedContent.style.display = 'block';\n      updatedContent.style.position = 'relative';\n      \n      // Replace the content\n      portalElement.innerHTML = updatedContent.innerHTML;\n    }\n  }\n\n  setupEventListeners(portalElement: HTMLElement): void {\n    // Handle click events to prevent them from bubbling up\n    portalElement.addEventListener('click', (event) => {\n      event.stopPropagation();\n    });\n\n    // Handle any other popover-specific events\n    // For example, if the popover has action buttons, we might need to handle those\n    const actionSlot = portalElement.querySelector('slot[name=\"action\"]');\n    if (actionSlot) {\n      actionSlot.addEventListener('click', (event) => {\n        event.stopPropagation();\n        // Forward the event to the original component if needed\n        this.component.dispatchEvent(new CustomEvent('nile-popover-action', {\n          detail: { originalEvent: event },\n          bubbles: true\n        }));\n      });\n    }\n  }\n\n  cleanupEventListeners(portalElement: HTMLElement): void {\n    // Remove all event listeners\n    const newElement = portalElement.cloneNode(true) as HTMLElement;\n    portalElement.parentNode?.replaceChild(newElement, portalElement);\n  }\n\n  getReferenceElement(): HTMLElement {\n    // Get the anchor element from the slot\n    const anchorSlot = this.component.shadowRoot?.querySelector('slot[name=\"anchor\"]') as HTMLSlotElement;\n    if (anchorSlot) {\n      const assignedElements = anchorSlot.assignedElements();\n      if (assignedElements.length > 0) {\n        return assignedElements[0] as HTMLElement;\n      }\n    }\n    \n    // Fallback to the component itself\n    return this.component;\n  }\n\n  getComponentStyles(): CSSResultGroup | undefined {\n    return (this.component.constructor as any).styles;\n  }\n}\n"]}

package/dist/src/nile-portal-wrapper/index.d.ts

@@ -0,0 +1 @@
+export { NilePortalWrapper } from './nile-portal-wrapper.js';

package/dist/src/nile-portal-wrapper/index.js

@@ -0,0 +1,2 @@
+export { NilePortalWrapper } from './nile-portal-wrapper.js';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-portal-wrapper/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-portal-wrapper/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC","sourcesContent":["export { NilePortalWrapper } from './nile-portal-wrapper.js';\n"]}

package/dist/src/nile-portal-wrapper/nile-portal-wrapper.d.ts

@@ -0,0 +1,47 @@
+import { LitElement } from 'lit';
+import { type Placement, type Boundary } from '@floating-ui/dom';
+export declare class NilePortalWrapper extends LitElement {
+    enabled: boolean;
+    targetElement: HTMLElement | null;
+    content: HTMLElement | null;
+    placement: Placement;
+    offset: number;
+    padding: number;
+    boundary: Boundary;
+    fallbackPlacements: Placement[];
+    strategy: 'absolute' | 'fixed';
+    className: string;
+    zIndex: number;
+    preserveStyles: boolean;
+    cloneContent: boolean;
+    private portalContainer;
+    private clonedContent;
+    private currentPlacement;
+    private currentMiddlewareData;
+    private measuredHeight;
+    private cleanupAutoUpdate;
+    private injectedStyleId;
+    private resizeObserver;
+    static styles: import("lit").CSSResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    private setupPortal;
+    private createPortalContainer;
+    private createClonedContent;
+    private createPortalListbox;
+    private cloneOption;
+    private positionPortal;
+    private handleSizeMiddleware;
+    private applyPosition;
+    private fallbackPositioning;
+    private setupAutoUpdate;
+    private setupEventListeners;
+    private handleOptionClick;
+    private forwardEvent;
+    private findOriginalElement;
+    private injectStyles;
+    private extractStylesAsCSS;
+    private cleanup;
+    render(): import("lit-html").TemplateResult<1>;
+}