@aquera/nile-elements 1.4.8-beta-1.0 → 1.4.8-beta-1.2

package/src/nile-side-bar-action/portal-utils.ts

@@ -0,0 +1,270 @@
+import { 
+    type Placement,
+    type MiddlewareData
+  } from '@floating-ui/dom';
+  
+  export class PortalUtils {
+    static calculateAvailableSpace(referenceElement: HTMLElement): {
+      spaceAbove: number;
+      spaceBelow: number;
+      spaceLeft: number;
+      spaceRight: number;
+      viewportHeight: number;
+      viewportWidth: number;
+    } {
+      const rect = referenceElement.getBoundingClientRect();
+      const viewportHeight = window.innerHeight;
+      const viewportWidth = window.innerWidth;
+      const spaceBelow = viewportHeight - rect.bottom;
+      const spaceAbove = rect.top;
+      const spaceRight = viewportWidth - rect.right;
+      const spaceLeft = rect.left;
+      
+      return { spaceAbove, spaceBelow, spaceLeft, spaceRight, viewportHeight, viewportWidth };
+    }
+  
+    static getOptimalPlacement(referenceElement: HTMLElement): Placement {
+      const { spaceAbove, spaceBelow, spaceLeft, spaceRight } = this.calculateAvailableSpace(referenceElement);
+      
+      if (spaceBelow >= 200 && spaceBelow >= spaceAbove) {
+        return 'bottom';
+      } else if (spaceAbove >= 200 && spaceAbove > spaceBelow) {
+        return 'top';
+      }
+      
+      if (spaceRight >= 200 && spaceRight >= spaceLeft) {
+        return 'right';
+      } else if (spaceLeft >= 200) {
+        return 'left';
+      }
+      
+      return 'bottom';
+    }
+  
+    static findBoundaryElements(component: HTMLElement): Element[] | undefined {
+      const boundaryElements: Element[] = [];
+      
+      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: { x: number; y: number; width: number; height: number },
+      viewportHeight: number,
+      placement: Placement
+    ): number {
+      const spaceBelow = viewportHeight - (referenceRect.y + referenceRect.height);
+      const spaceAbove = referenceRect.y;
+      
+      if (placement.startsWith('top')) {
+        return Math.max(spaceAbove - 20, 100);
+      } else if (placement.startsWith('bottom')) {
+        return Math.max(spaceBelow - 20, 100);
+      } else if (placement.startsWith('left') || placement.startsWith('right')) {
+        return Math.max(Math.min(spaceAbove, spaceBelow) - 20, 100);
+      }
+      
+      return Math.max(Math.min(spaceAbove, spaceBelow) - 20, 100);
+    }
+  
+    static extractStylesAsCSS(styles: any): string {
+      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(): string {
+      return `nile-dropdown-styles-${Math.random().toString(36).substring(2, 11)}`;
+    }
+  
+    static isPositioningOptimal(
+      placement: Placement,
+      referenceElement: HTMLElement
+    ): boolean {
+      const { spaceAbove, spaceBelow, spaceLeft, spaceRight } = this.calculateAvailableSpace(referenceElement);
+      
+      const isAbove = placement.startsWith('top');
+      const isBelow = placement.startsWith('bottom');
+      const isLeft = placement.startsWith('left');
+      const isRight = placement.startsWith('right');
+      
+      if (isAbove && spaceBelow > spaceAbove) return false;
+      if (isBelow && spaceAbove > spaceBelow) return false;
+      if (isLeft && spaceRight > spaceLeft) return false;
+      if (isRight && spaceLeft > spaceRight) return false;
+      
+      return true;
+    }
+  
+    static applyCollisionData(
+      element: HTMLElement,
+      middlewareData: MiddlewareData,
+      placement: Placement
+    ): void {
+      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());
+        }
+      }
+    }
+  }
+  
+  export class PortalContentUtils {
+    static createPortalPanel(component: any): HTMLElement {
+      // Find the panel slot content (typically a nile-menu)
+      const panelSlot = component.shadowRoot?.querySelector('.dropdown__panel') as HTMLSlotElement;
+      if (!panelSlot) {
+        // Fallback: try to find in light DOM
+        const slot = component.querySelector('[slot]');
+        if (!slot || slot.getAttribute('slot') === 'trigger') {
+          return document.createElement('div');
+        }
+      }
+  
+      // Get assigned elements from the slot
+      let assignedElements: Element[] = panelSlot?.assignedElements({ flatten: true }) as Element[] || [];
+      
+      // If no assigned elements, try direct children that aren't in trigger slot
+      if (assignedElements.length === 0) {
+        const children = Array.from(component.children) as Element[];
+        assignedElements = children.filter(child => {
+          const slot = child.getAttribute('slot');
+          return !slot || slot !== 'trigger';
+        });
+      }
+  
+      // Create a container for the cloned panel
+      const panelContainer = document.createElement('div');
+      panelContainer.className = 'dropdown__panel';
+      panelContainer.setAttribute('part', 'panel');
+      panelContainer.setAttribute('aria-hidden', 'false');
+      panelContainer.setAttribute('aria-labelledby', 'dropdown');
+  
+      // Clone all assigned elements
+      assignedElements.forEach((element: Element) => {
+        const clonedElement = element.cloneNode(true) as HTMLElement;
+        panelContainer.appendChild(clonedElement);
+      });
+  
+      return panelContainer;
+    }
+  
+    static updatePortalPanel(clonedPanel: HTMLElement, component: any): void {
+      if (!clonedPanel) return;
+  
+      // Clear existing content
+      clonedPanel.innerHTML = '';
+  
+      // Re-clone the panel content
+      const panelSlot = component.shadowRoot?.querySelector('.dropdown__panel') as HTMLSlotElement;
+      let assignedElements: Element[] = panelSlot?.assignedElements({ flatten: true }) as Element[] || [];
+      
+      if (assignedElements.length === 0) {
+        const children = Array.from(component.children) as Element[];
+        assignedElements = children.filter(child => {
+          const slot = child.getAttribute('slot');
+          return !slot || slot !== 'trigger';
+        });
+      }
+  
+      assignedElements.forEach((element: Element) => {
+        const clonedElement = element.cloneNode(true) as HTMLElement;
+        clonedPanel.appendChild(clonedElement);
+      });
+    }
+  }
+  
+  export class PortalEventUtils {
+    static setupPortalEventListeners(clonedPanel: HTMLElement, component: any): void {
+      if (!clonedPanel) return;
+  
+      this.setupMenuSelectListeners(clonedPanel, component);
+      this.setupKeyDownListeners(clonedPanel, component);
+    }
+  
+    static setupMenuSelectListeners(clonedPanel: HTMLElement, component: any): void {
+      if (!clonedPanel) return;
+  
+      // Listen for nile-select events from menu items
+      clonedPanel.addEventListener('nile-select', (event: Event) => {
+        const customEvent = event as CustomEvent;
+        // Forward the event to the original component
+        if (component.handlePanelSelect) {
+          component.handlePanelSelect(customEvent);
+        }
+      });
+    }
+  
+    static setupKeyDownListeners(clonedPanel: HTMLElement, component: any): void {
+      if (!clonedPanel) return;
+  
+      // Listen for keydown events (like Escape)
+      clonedPanel.addEventListener('keydown', (event: KeyboardEvent) => {
+        if (component.handleKeyDown) {
+          component.handleKeyDown(event);
+        }
+      });
+    }
+  }
+  
+  

package/vscode-html-custom-data.json

@@ -2861,7 +2861,7 @@
     },
     {
       "name": "nile-lite-tooltip",
-      "description": "Nile lite-tooltip component.\n\nSupports wrapper, sibling (for), and singleton modes.\nAligns with Tippy.js props and Nile design system.\n\nEvents:\n\n  * `nile-show` {`CustomEvent<{ instance: Instance<Props>; target: ReferenceElement<Props>; }>`} - \n\n  * `nile-toggle` {`CustomEvent<{ open: boolean; instance: Instance<Props>; target: ReferenceElement<Props>; }>`} - \n\n  * `nile-hide` {`CustomEvent<{ instance: Instance<Props>; target: ReferenceElement<Props>; }>`} - \n\nAttributes:\n\n  * `for` {`string | null`} - ID of the target element (for sibling mode)\n\n  * `content` {`string`} - Tooltip content text or HTML\n\n  * `size` {`\"small\" | \"large\"`} - Tooltip size (applies CSS class)\n\n  * `duration` {`string | number | [number, number]`} - Animation duration for show/hide (ms). Can be a single value or [show, hide].\n\n  * `interactive` {`boolean`} - Interactive mode\n\n  * `placement` {`\"left\" | \"right\" | \"top\" | \"top-start\" | \"top-end\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left-start\" | \"left-end\" | \"auto\" | \"auto-start\" | \"auto-end\"`} - Placement of the tooltip\n\n  * `disabled` {`boolean`} - \n\n  * `distance` {`number`} - \n\n  * `skidding` {`number`} - \n\n  * `open` {`boolean`} - \n\n  * `trigger` {`string`} - \n\n  * `allowHTML` {`boolean`} - \n\n  * `followCursor` {`boolean | \"false\" | \"true\" | \"initial\" | \"horizontal\" | \"vertical\"`} - \n\n  * `arrow` {`\"small\" | \"none\" | \"default\" | \"large\" | \"narrow\" | \"round\" | \"wide\"`} - \n\n  * `singleton` {`boolean`} - \n\n  * `enableRecursiveMode` {`boolean`} - \n\n  * `delay` {`number | [number, number]`} - Not added in Doc\n\n  * `maxWidth` {`string | number`} - \n\n  * `zIndex` {`number`} - \n\n  * `hideOnClick` {`boolean | \"toggle\"`} - \n\n  * `inertia` {`boolean`} - \n\n  * `interactiveBorder` {`number`} - \n\n  * `enableVisibilityEffect` {`boolean`} - \n\n  * `enableTabClose` {`boolean`} - \n\nProperties:\n\n  * `for` {`string | null`} - ID of the target element (for sibling mode)\n\n  * `content` {`string`} - Tooltip content text or HTML\n\n  * `size` {`\"small\" | \"large\"`} - Tooltip size (applies CSS class)\n\n  * `duration` {`string | number | [number, number]`} - Animation duration for show/hide (ms). Can be a single value or [show, hide].\n\n  * `interactive` {`boolean`} - Interactive mode\n\n  * `placement` {`\"left\" | \"right\" | \"top\" | \"top-start\" | \"top-end\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left-start\" | \"left-end\" | \"auto\" | \"auto-start\" | \"auto-end\"`} - Placement of the tooltip\n\n  * `disabled` {`boolean`} - \n\n  * `distance` {`number`} - \n\n  * `skidding` {`number`} - \n\n  * `open` {`boolean`} - \n\n  * `trigger` {`string`} - \n\n  * `allowHTML` {`boolean`} - \n\n  * `followCursor` {`boolean | \"false\" | \"true\" | \"initial\" | \"horizontal\" | \"vertical\"`} - \n\n  * `arrow` {`\"small\" | \"none\" | \"default\" | \"large\" | \"narrow\" | \"round\" | \"wide\"`} - \n\n  * `singleton` {`boolean`} - \n\n  * `enableRecursiveMode` {`boolean`} - \n\n  * `delay` {`number | [number, number]`} - Not added in Doc\n\n  * `maxWidth` {`string | number`} - \n\n  * `zIndex` {`number`} - \n\n  * `hideOnClick` {`boolean | \"toggle\"`} - \n\n  * `inertia` {`boolean`} - \n\n  * `interactiveBorder` {`number`} - \n\n  * `visibilityManager` - \n\n  * `enableVisibilityEffect` {`boolean`} - \n\n  * `enableTabClose` {`boolean`} - \n\n  * `tooltipInstances` {`Instance<Props>[] | undefined`} - \n\n  * `singleInstance` {`Instance<Props> | undefined`} - \n\n  * `singletonInstance` {`Instance<Props> | undefined`} - \n\n  * `targetEl` {`HTMLElement | null | undefined`} - \n\n  * `generatedId` {`string | undefined`} - \n\n  * `prevDescribedby` {`string | null | undefined`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile lite-tooltip component.\n\nSupports wrapper, sibling (for), and singleton modes.\nAligns with Tippy.js props and Nile design system.\n\nEvents:\n\n  * `nile-show` {`CustomEvent<{ instance: Instance<Props>; target: ReferenceElement<Props>; }>`} - \n\n  * `nile-toggle` {`CustomEvent<{ open: boolean; instance: Instance<Props>; target: ReferenceElement<Props>; }>`} - \n\n  * `nile-hide` {`CustomEvent<{ instance: Instance<Props>; target: ReferenceElement<Props>; }>`} - \n\nAttributes:\n\n  * `for` {`string | null`} - ID of the target element (for sibling mode)\n\n  * `content` {`string`} - Tooltip content text or HTML\n\n  * `size` {`\"small\" | \"large\"`} - Tooltip size (applies CSS class)\n\n  * `duration` {`string | number | [number, number]`} - Animation duration for show/hide (ms). Can be a single value or [show, hide].\n\n  * `interactive` {`boolean`} - Interactive mode\n\n  * `placement` {`\"left\" | \"right\" | \"top\" | \"top-start\" | \"top-end\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left-start\" | \"left-end\" | \"auto\" | \"auto-start\" | \"auto-end\"`} - Placement of the tooltip\n\n  * `disabled` {`boolean`} - \n\n  * `distance` {`number`} - \n\n  * `skidding` {`number`} - \n\n  * `open` {`boolean`} - \n\n  * `trigger` {`string`} - \n\n  * `allowHTML` {`boolean`} - \n\n  * `followCursor` {`boolean | \"false\" | \"true\" | \"initial\" | \"horizontal\" | \"vertical\"`} - \n\n  * `arrow` {`\"small\" | \"none\" | \"default\" | \"large\" | \"narrow\" | \"round\" | \"wide\"`} - \n\n  * `singleton` {`boolean`} - \n\n  * `enableRecursiveMode` {`boolean`} - \n\n  * `delay` {`number | [number, number]`} - Not added in Doc\n\n  * `maxWidth` {`string | number`} - \n\n  * `zIndex` {`number`} - \n\n  * `hideOnClick` {`boolean | \"toggle\"`} - \n\n  * `inertia` {`boolean`} - \n\n  * `interactiveBorder` {`number`} - \n\n  * `enableVisibilityEffect` {`boolean`} - \n\n  * `enableTabClose` {`boolean`} - \n\n  * `width` {`string | undefined`} - \n\n  * `height` {`string | undefined`} - \n\nProperties:\n\n  * `for` {`string | null`} - ID of the target element (for sibling mode)\n\n  * `content` {`string`} - Tooltip content text or HTML\n\n  * `size` {`\"small\" | \"large\"`} - Tooltip size (applies CSS class)\n\n  * `duration` {`string | number | [number, number]`} - Animation duration for show/hide (ms). Can be a single value or [show, hide].\n\n  * `interactive` {`boolean`} - Interactive mode\n\n  * `placement` {`\"left\" | \"right\" | \"top\" | \"top-start\" | \"top-end\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left-start\" | \"left-end\" | \"auto\" | \"auto-start\" | \"auto-end\"`} - Placement of the tooltip\n\n  * `disabled` {`boolean`} - \n\n  * `distance` {`number`} - \n\n  * `skidding` {`number`} - \n\n  * `open` {`boolean`} - \n\n  * `trigger` {`string`} - \n\n  * `allowHTML` {`boolean`} - \n\n  * `followCursor` {`boolean | \"false\" | \"true\" | \"initial\" | \"horizontal\" | \"vertical\"`} - \n\n  * `arrow` {`\"small\" | \"none\" | \"default\" | \"large\" | \"narrow\" | \"round\" | \"wide\"`} - \n\n  * `singleton` {`boolean`} - \n\n  * `enableRecursiveMode` {`boolean`} - \n\n  * `delay` {`number | [number, number]`} - Not added in Doc\n\n  * `maxWidth` {`string | number`} - \n\n  * `zIndex` {`number`} - \n\n  * `hideOnClick` {`boolean | \"toggle\"`} - \n\n  * `inertia` {`boolean`} - \n\n  * `interactiveBorder` {`number`} - \n\n  * `visibilityManager` - \n\n  * `enableVisibilityEffect` {`boolean`} - \n\n  * `enableTabClose` {`boolean`} - \n\n  * `width` {`string | undefined`} - \n\n  * `height` {`string | undefined`} - \n\n  * `tooltipInstances` {`Instance<Props>[] | undefined`} - \n\n  * `singleInstance` {`Instance<Props> | undefined`} - \n\n  * `singletonInstance` {`Instance<Props> | undefined`} - \n\n  * `targetEl` {`HTMLElement | null | undefined`} - \n\n  * `generatedId` {`string | undefined`} - \n\n  * `prevDescribedby` {`string | null | undefined`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "for",
@@ -3072,6 +3072,16 @@
           "description": "`enableTabClose` {`boolean`} - \n\nProperty: enableTabClose\n\nDefault: false",
           "valueSet": "v"
         },
+        {
+          "name": "width",
+          "description": "`width` {`string | undefined`} - \n\nProperty: width",
+          "values": []
+        },
+        {
+          "name": "height",
+          "description": "`height` {`string | undefined`} - \n\nProperty: height",
+          "values": []
+        },
         {
           "name": "onnile-show",
           "description": "`nile-show` {`CustomEvent<{ instance: Instance<Props>; target: ReferenceElement<Props>; }>`} - "
@@ -3231,7 +3241,7 @@
     },
     {
       "name": "nile-option",
-      "description": "Slots:\n\n  * ` ` {} - The option's label.\n\n  * `prefix` {} - Used to prepend an icon or similar element to the menu item.\n\n  * `suffix` {} - Used to append an icon or similar element to the menu item.\n\nAttributes:\n\n  * `hidden` {`boolean`} - \n\n  * `value` {`string`} - The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\nmultiple values.\n\n  * `showCheckbox` {`boolean`} - \n\n  * `disabled` {`boolean`} - Draws the option in a disabled state, preventing selection.\n\n  * `selected` {`boolean`} - Indicates whether the option is selected.\n\n  * `groupName` {`string`} - \n\nProperties:\n\n  * `styles` - \n\n  * `cachedTextLabel` {`string`} - \n\n  * `defaultSlot` {`HTMLSlotElement`} - \n\n  * `current` {`boolean`} - \n\n  * `hasHover` {`boolean`} - \n\n  * `hidden` {`boolean`} - \n\n  * `isMultipleSelect` {`boolean`} - \n\n  * `value` {`string`} - The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\nmultiple values.\n\n  * `showCheckbox` {`boolean`} - \n\n  * `disabled` {`boolean`} - Draws the option in a disabled state, preventing selection.\n\n  * `selected` {`boolean`} - Indicates whether the option is selected.\n\n  * `groupName` {`string`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Slots:\n\n  * ` ` {} - The option's label.\n\n  * `prefix` {} - Used to prepend an icon or similar element to the menu item.\n\n  * `suffix` {} - Used to append an icon or similar element to the menu item.\n\nAttributes:\n\n  * `hidden` {`boolean`} - \n\n  * `value` {`string`} - The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\nmultiple values.\n\n  * `showCheckbox` {`boolean`} - \n\n  * `disabled` {`boolean`} - Draws the option in a disabled state, preventing selection.\n\n  * `selected` {`boolean`} - Indicates whether the option is selected.\n\n  * `groupName` {`string`} - \n\n  * `description` {`string`} - \n\nProperties:\n\n  * `styles` - \n\n  * `cachedTextLabel` {`string`} - \n\n  * `defaultSlot` {`HTMLSlotElement`} - \n\n  * `current` {`boolean`} - \n\n  * `hasHover` {`boolean`} - \n\n  * `hidden` {`boolean`} - \n\n  * `isMultipleSelect` {`boolean`} - \n\n  * `value` {`string`} - The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\nmultiple values.\n\n  * `showCheckbox` {`boolean`} - \n\n  * `disabled` {`boolean`} - Draws the option in a disabled state, preventing selection.\n\n  * `selected` {`boolean`} - Indicates whether the option is selected.\n\n  * `groupName` {`string`} - \n\n  * `description` {`string`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "hidden",
@@ -3260,6 +3270,10 @@
         {
           "name": "groupName",
           "description": "`groupName` {`string`} - \n\nProperty: groupName\n\nDefault: "
+        },
+        {
+          "name": "description",
+          "description": "`description` {`string`} - \n\nProperty: description\n\nDefault: "
         }
       ]
     },
@@ -4341,7 +4355,7 @@
     },
     {
       "name": "nile-side-bar-action",
-      "description": "Nile side-bar-action component.\n\nEvents:\n\n  * `nile-show` {} - Fired when dropdown opens.\n\n  * `nile-after-show` {} - Fired after dropdown + animations.\n\n  * `nile-hide` {} - Fired when dropdown closes.\n\n  * `nile-after-hide` {} - Fired after dropdown closes + animations.\n\nSlots:\n\n  * `trigger` {} - The clickable trigger (icon/button).\n\n  * ` ` {} - The dropdown panel content (menu, custom content).\n\nAttributes:\n\n  * `open` {`boolean`} - Whether the dropdown is open\n\n  * `placement` {`TooltipPosition`} - Preferred placement relative to trigger\n\n  * `disabled` {`boolean`} - Disable interaction\n\n  * `stay-open-on-select` {`boolean`} - Keep open on select\n\n  * `distance` {`number`} - Offsets\n\n  * `skidding` {`number`} - \n\n  * `sync` {`\"width\" | \"height\" | \"both\"`} - Sync size with trigger\n\n  * `hoist` {`boolean`} - Hoist above scroll containers\n\n  * `triggerDropdown` {`\"click\" | \"hover\"`} - \n\nProperties:\n\n  * `styles` {`CSSResultArray`} - \n\n  * `popup` - \n\n  * `trigger` {`HTMLSlotElement`} - \n\n  * `panel` {`HTMLSlotElement`} - \n\n  * `open` {`boolean`} - Whether the dropdown is open\n\n  * `placement` {`TooltipPosition`} - Preferred placement relative to trigger\n\n  * `disabled` {`boolean`} - Disable interaction\n\n  * `stayOpenOnSelect` {`boolean`} - Keep open on select\n\n  * `containingElement` {`HTMLElement | undefined`} - External containing element (default: self)\n\n  * `distance` {`number`} - Offsets\n\n  * `skidding` {`number`} - \n\n  * `sync` {`\"width\" | \"height\" | \"both\"`} - Sync size with trigger\n\n  * `hoist` {`boolean`} - Hoist above scroll containers\n\n  * `triggerDropdown` {`\"click\" | \"hover\"`} - \n\n  * `hoverTimeout` {`number | undefined`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile side-bar-action component.\n\nEvents:\n\n  * `nile-show` {} - Fired when dropdown opens.\n\n  * `nile-after-show` {} - Fired after dropdown + animations.\n\n  * `nile-hide` {} - Fired when dropdown closes.\n\n  * `nile-after-hide` {} - Fired after dropdown closes + animations.\n\nSlots:\n\n  * `trigger` {} - The clickable trigger (icon/button).\n\n  * ` ` {} - The dropdown panel content (menu, custom content).\n\nAttributes:\n\n  * `open` {`boolean`} - Whether the dropdown is open\n\n  * `placement` {`TooltipPosition`} - Preferred placement relative to trigger\n\n  * `disabled` {`boolean`} - Disable interaction\n\n  * `stay-open-on-select` {`boolean`} - Keep open on select\n\n  * `distance` {`number`} - Offsets\n\n  * `skidding` {`number`} - \n\n  * `sync` {`\"width\" | \"height\" | \"both\"`} - Sync size with trigger\n\n  * `hoist` {`boolean`} - Hoist above scroll containers\n\n  * `portal` {`boolean`} - Enable portal mode to render the dropdown panel in a portal outside the component's DOM tree.\nThis provides better positioning control and prevents clipping issues in complex layouts.\n\n  * `triggerDropdown` {`\"click\" | \"hover\"`} - \n\nProperties:\n\n  * `styles` {`CSSResultArray`} - \n\n  * `popup` - \n\n  * `trigger` {`HTMLSlotElement`} - \n\n  * `panel` {`HTMLSlotElement`} - \n\n  * `open` {`boolean`} - Whether the dropdown is open\n\n  * `placement` {`TooltipPosition`} - Preferred placement relative to trigger\n\n  * `disabled` {`boolean`} - Disable interaction\n\n  * `stayOpenOnSelect` {`boolean`} - Keep open on select\n\n  * `containingElement` {`HTMLElement | undefined`} - External containing element (default: self)\n\n  * `distance` {`number`} - Offsets\n\n  * `skidding` {`number`} - \n\n  * `sync` {`\"width\" | \"height\" | \"both\"`} - Sync size with trigger\n\n  * `hoist` {`boolean`} - Hoist above scroll containers\n\n  * `portal` {`boolean`} - Enable portal mode to render the dropdown panel in a portal outside the component's DOM tree.\nThis provides better positioning control and prevents clipping issues in complex layouts.\n\n  * `portalManager` - \n\n  * `triggerDropdown` {`\"click\" | \"hover\"`} - \n\n  * `hoverTimeout` {`number | undefined`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "open",
@@ -4428,6 +4442,11 @@
           "description": "`hoist` {`boolean`} - Hoist above scroll containers\n\nProperty: hoist\n\nDefault: false",
           "valueSet": "v"
         },
+        {
+          "name": "portal",
+          "description": "`portal` {`boolean`} - Enable portal mode to render the dropdown panel in a portal outside the component's DOM tree.\nThis provides better positioning control and prevents clipping issues in complex layouts.\n\nProperty: portal\n\nDefault: false",
+          "valueSet": "v"
+        },
         {
           "name": "triggerDropdown",
           "description": "`triggerDropdown` {`\"click\" | \"hover\"`} - \n\nProperty: triggerDropdown\n\nDefault: click",