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

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.2.6-beta-1.0",
+  "version": "1.2.6-beta-1.1",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-select/nile-select.ts

@@ -167,8 +167,6 @@ export class NileSelect extends NileElement implements NileFormControl{
 
   @property({attribute:'internal-search-placeholder'}) internalSearchPlaceHolder = 'Search...';
 
-  @property({ type: Boolean, reflect: true, attribute: true }) enableVisibilityEffect = false;
-
   @property({ type: Boolean, reflect: true }) blockValueChange = false;
 
   @property({ type: Boolean, reflect: true }) disableLocalSearch = false;
@@ -269,10 +267,6 @@ export class NileSelect extends NileElement implements NileFormControl{
 
   @state() oldMaxOptionsVisible: number = 1;
 
- 
-  @property({ type: Boolean, reflect: true, attribute: true }) enableTabClose = false;
-
-
   @property({ type: Boolean }) showNoResults: boolean = false;
 
   @property({ type: String }) noResultsMessage: string = 'No results found';
@@ -426,100 +420,6 @@ export class NileSelect extends NileElement implements NileFormControl{
     }
   }
 
-
-   /** All active IntersectionObservers for visibility detection */
-   private anchorVisibilityObservers: IntersectionObserver[] = [];
-
-   /** Utility: find ALL scrollable ancestors (not just the nearest) */
-   private getScrollableAncestors(element: HTMLElement): HTMLElement[] {
-     const scrollables: HTMLElement[] = [];
-     let parent = element.parentElement;
-     while (parent) {
-       const style = getComputedStyle(parent);
-       const canScroll =
-         /(auto|scroll)/.test(style.overflow + style.overflowY + style.overflowX);
-       if (canScroll) {
-         scrollables.push(parent);
-       }
-       parent = parent.parentElement;
-     }
-     return scrollables;
-   }
- 
-   /** Handles tab visibility (page hidden / tab switched) */
-   private handleDocumentVisibilityChange = (): void => {
-     if (!this.enableTabClose) return;
-     if (document.visibilityState === 'hidden' && this.open) {
-       this.hide();
-       this.emit('nile-visibility-change', {
-         visible: false,
-         reason: 'document-hidden',
-         name: this.name,
-       });
-     }
-   };
- 
-   /** Sets up visibility tracking for all relevant contexts */
-   private setupAnchorVisibilityObserver(): void {
-     if (!this.enableVisibilityEffect) return;
- 
-     this.cleanupAnchorVisibilityObserver();
- 
-     const combobox = this.combobox;
-     if (!combobox) return;
- 
-     // Get all scrollable ancestors and viewport
-     const scrollContainers = [...this.getScrollableAncestors(this), null];
- 
-     scrollContainers.forEach((rootContainer) => {
-       const observer = new IntersectionObserver(
-         (entries) => {
-           for (const entry of entries) {
-             if (!entry.isIntersecting && this.open) {
-               this.hide();
-               this.emit('nile-visibility-change', {
-                 visible: false,
-                 reason: 'anchor-out-of-view',
-                 name: this.name,
-                 root: rootContainer,
-               });
-               return; // stop further triggers
-             }
-           }
-         },
-         {
-           root: rootContainer,
-           threshold: 0.1, // 10% visible = visible
-         }
-       );
- 
-       observer.observe(combobox);
-       this.anchorVisibilityObservers.push(observer);
-     });
- 
-     // Attach tab visibility listener only if property enabled
-     if (this.enableTabClose) {
-       document.addEventListener(
-         'visibilitychange',
-         this.handleDocumentVisibilityChange
-       );
-     }
-   }
- 
-   /** Cleans up all visibility observers and listeners */
-   private cleanupAnchorVisibilityObserver(): void {
-     this.anchorVisibilityObservers.forEach((o) => o.disconnect());
-     this.anchorVisibilityObservers = [];
- 
-     // Always remove listener to avoid stale callbacks
-     document.removeEventListener(
-       'visibilitychange',
-       this.handleDocumentVisibilityChange
-     );
-   }
- 
- 
-
   /**
    * Handles the click event on the footer.
    * @param event - The click event.
@@ -1180,10 +1080,6 @@ export class NileSelect extends NileElement implements NileFormControl{
         this.setCurrentOption(this.currentOption);
       });
 
-      if (this.enableVisibilityEffect) {
-        this.setupAnchorVisibilityObserver();
-      }
-
       const { keyframes, options } = getAnimation(this, 'select.show', {
         dir: 'ltr',
       });

package/src/nile-select/virtual-scroll-helper.ts

@@ -27,11 +27,9 @@ export class VirtualScrollHelper {
           .disableLocalSearch=${component.disableLocalSearch}
           .optionsLoading=${component.optionsLoading}
           .multiple=${component.multiple}
-          .enableTabClose=${component.enableTabClose}
           .helpText=${component.helpText}
           .errorMessage=${component.errorMessage}
           .warning=${component.warning}
-          .enableVisibilityEffect=${component.enableVisibilityEffect}
           .error=${component.error}
           .success=${component.success}
           .disabled=${component.disabled}

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

@@ -162,8 +162,6 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
   /** Enable search functionality */
   @property({ type: Boolean, reflect: true }) searchEnabled = false;
 
-  @property({ type: Boolean, reflect: true, attribute: true }) enableVisibilityEffect = false;
-
   /** Search input placeholder */
   @property({attribute:'internal-search-placeholder'}) internalSearchPlaceHolder = 'Search...';
 
@@ -266,10 +264,6 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
   maxOptionsVisible = 3;
 
   @state() oldMaxOptionsVisible: number = 1;
-
-  @property({ type: Boolean, reflect: true, attribute: true }) enableTabClose = false;
-
-
   @state() showListbox: boolean = false;
   @state() private wasShowSelectedCheckedOnClose: boolean = false;
 
@@ -396,101 +390,6 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     this.emit('nile-blur');
   }
 
-   /** All active IntersectionObservers for visibility detection */
-   private anchorVisibilityObservers: IntersectionObserver[] = [];
-
-   /** Utility: find ALL scrollable ancestors (not just the nearest) */
-   private getScrollableAncestors(element: HTMLElement): HTMLElement[] {
-     const scrollables: HTMLElement[] = [];
-     let parent = element.parentElement;
-     while (parent) {
-       const style = getComputedStyle(parent);
-       const canScroll =
-         /(auto|scroll)/.test(style.overflow + style.overflowY + style.overflowX);
-       if (canScroll) {
-         scrollables.push(parent);
-       }
-       parent = parent.parentElement;
-     }
-     return scrollables;
-   }
- 
-   /** Handles tab visibility (page hidden / tab switched) */
-   private handleDocumentVisibilityChange = (): void => {
-     if (!this.enableTabClose) return;
-     if (document.visibilityState === 'hidden' && this.open) {
-       this.hide();
-       this.emit('nile-visibility-change', {
-         visible: false,
-         reason: 'document-hidden',
-         name: this.name,
-       });
-     }
-   };
- 
-   /** Sets up visibility tracking for all relevant contexts */
-   private setupAnchorVisibilityObserver(): void {
-     if (!this.enableVisibilityEffect) return;
- 
-     this.cleanupAnchorVisibilityObserver();
- 
-     const combobox = this.combobox;
-     if (!combobox) return;
- 
-     // Get all scrollable ancestors and viewport
-     const scrollContainers = [...this.getScrollableAncestors(this), null];
- 
-     scrollContainers.forEach((rootContainer) => {
-       const observer = new IntersectionObserver(
-         (entries) => {
-           for (const entry of entries) {
-             if (!entry.isIntersecting && this.open) {
-               this.hide();
-               this.emit('nile-visibility-change', {
-                 visible: false,
-                 reason: 'anchor-out-of-view',
-                 name: this.name,
-                 root: rootContainer,
-               });
-               return; // stop further triggers
-             }
-           }
-         },
-         {
-           root: rootContainer,
-           threshold: 0.1, // 10% visible = visible
-         }
-       );
- 
-       observer.observe(combobox);
-       this.anchorVisibilityObservers.push(observer);
-     });
- 
-     // Attach tab visibility listener only if property enabled
-     if (this.enableTabClose) {
-       document.addEventListener(
-         'visibilitychange',
-         this.handleDocumentVisibilityChange
-       );
-     }
-   }
- 
-   /** Cleans up all visibility observers and listeners */
-   private cleanupAnchorVisibilityObserver(): void {
-     this.anchorVisibilityObservers.forEach((o) => o.disconnect());
-     this.anchorVisibilityObservers = [];
- 
-     // Always remove listener to avoid stale callbacks
-     document.removeEventListener(
-       'visibilitychange',
-       this.handleDocumentVisibilityChange
-     );
-   }
- 
- 
-  
-
-
   private handleDocumentFocusIn(event: FocusEvent): void {
     if (!this.open) return;                         
     const path = event.composedPath(); 
@@ -831,6 +730,9 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
 
   handleSearchChange(e: any): void {
     this.searchValue = e.detail.value;
+    if (this.portal) {
+      this.portalManager.updatePortalAppendPosition();
+    }
     
     this.emit('nile-search', { 
       query: this.searchValue,
@@ -908,7 +810,18 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
       this.getDisplayText.bind(this),
       this.renderItemConfig?.getSearchText
     );
-
+    if (this.portal) {
+      this.portalManager.updatePortalAppendPosition();
+      this.updateComplete.then(() => {
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            this.resetScrollPosition();
+          });
+        });
+      });
+    } else {
+      this.resetScrollPosition();
+    }
     this.data = result.filteredItems;
     this.showNoResults = result.showNoResults;
     this.showSelected = false;
@@ -928,7 +841,6 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     }
   }
 
-  
   @watch('value', { waitUntilFirstUpdate: true })
   handleValueChange(): void {
     this.selectionChanged();
@@ -1033,10 +945,6 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
       this.data = [...this.originalOptionItems];
       this.wasShowSelectedCheckedOnClose = false;
     }
- 
-    if (this.enableVisibilityEffect) {
-      this.setupAnchorVisibilityObserver();
-    }
 
     this.filterVirtualOptions("");
     this.resetScrollPosition();
@@ -1044,7 +952,6 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
   }
 
   private async handleClose(): Promise<void> {
-    this.cleanupAnchorVisibilityObserver();
     this.emit('nile-hide', { value: this.value, name: this.name });
     this.removeOpenListeners();
 
@@ -1597,23 +1504,55 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     }, 1);
   }
 
-  private resetScrollPosition(): void {
-    this.updateComplete.then(() => {
-      if (this.virtualizedContainer && this.virtualizedContainer.isConnected) {
-        this.virtualizedContainer.scrollTop = 0;
-        
-        const listbox = this.shadowRoot?.querySelector('.select__listbox') as HTMLElement;
-        if (listbox && listbox.isConnected) {
-          listbox.scrollTop = 0;
+  private async resetScrollPosition(): Promise<void> {
+    await this.updateComplete;
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        let listbox: HTMLElement | null = null;
+  
+        // Select listbox (portal vs non-portal)
+        if (this.portal && this.portalManager.portalContainerElement) {
+          listbox = this.portalManager.portalContainerElement.querySelector('#listbox') as HTMLElement;
+        } else {
+          listbox = this.shadowRoot?.querySelector('#listbox') as HTMLElement;
         }
-        
-        const virtualizer = this.virtualizedContainer.querySelector('lit-virtualizer') as HTMLElement;
+  
+        if (!listbox || !listbox.isConnected) return;
+  
+        // Always reset scroll position
+        listbox.scrollTop = 0;
+  
+        // When very few items, collapse overflow completely
+        const virtualized = listbox.querySelector('.virtualized') as HTMLElement;
+        if (virtualized && virtualized.isConnected) {
+          const fewItems = this.data.length <= 5;
+  
+          if (fewItems) {
+            // 👇 Prevent *any* scrolling and let height shrink
+            virtualized.style.overflowY = 'hidden';
+            virtualized.style.maxHeight = 'none';
+            listbox.style.overflowY = 'hidden';
+            listbox.style.maxHeight = 'fit-content';
+          } else {
+            // 👇 Re-enable scrolling when many items
+            virtualized.style.overflowY = 'auto';
+            virtualized.style.maxHeight = '';
+            listbox.style.overflowY = 'auto';
+            listbox.style.maxHeight = '';
+          }
+  
+          virtualized.scrollTop = 0;
+        }
+  
+        // lit-virtualizer (if used)
+        const virtualizer = listbox.querySelector('lit-virtualizer') as HTMLElement;
         if (virtualizer && virtualizer.isConnected) {
           virtualizer.scrollTop = 0;
         }
-      }
+      });
     });
   }
+  
 
 }
 

package/vscode-html-custom-data.json

@@ -3465,7 +3465,7 @@
     },
     {
       "name": "nile-select",
-      "description": "Events:\n\n  * `nile-change` {} - Emitted when the control's value changes.\n\n  * `nile-clear` {} - Emitted when the control's value is cleared.\n\n  * `nile-input` {} - Emitted when the control receives input.\n\n  * `nile-focus` {} - Emitted when the control gains focus.\n\n  * `nile-blur` {} - Emitted when the control loses focus.\n\n  * `nile-show` {} - Emitted when the select's menu opens.\n\n  * `nile-after-show` {} - Emitted after the select's menu opens and all animations are complete.\n\n  * `nile-hide` {} - Emitted when the select's menu closes.\n\n  * `nile-after-hide` {} - Emitted after the select's menu closes and all animations are complete.\n\n  * `nile-invalid` {} - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n  * `nile-search` {} - Emitted when the user types in the search input. The event payload includes the search query for backend search functionality.\n\n  * `nile-scroll` {} - Emitted when the user scrolls within the listbox. The event payload includes scroll position information.\n\n  * `nile-scroll-start` {} - Emitted when the user starts scrolling within the listbox.\n\n  * `nile-scroll-end` {} - Emitted when the user stops scrolling and reaches the bottom of the listbox (debounced).\n\nSlots:\n\n  * ` ` {} - The listbox options. Must be `<nile-option>` elements. You can use `<nile-divider>` to group items visually.\n\n  * `label` {} - The input's label. Alternatively, you can use the `label` attribute.\n\n  * `prefix` {} - Used to prepend a presentational icon or similar element to the combobox.\n\n  * `clear-icon` {} - An icon to use in lieu of the default clear icon.\n\n  * `expand-icon` {} - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n\n  * `help-text` {} - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\nAttributes:\n\n  * `size` {`\"small\" | \"medium\" | \"large\"`} - The select's size.\n\n  * `placeholder` {`string`} - Placeholder text to show as a hint when the select is empty.\n\n  * `searchEnabled` {`boolean`} - \n\n  * `internal-search-placeholder` {`string`} - \n\n  * `enableVisibilityEffect` {`boolean`} - \n\n  * `blockValueChange` {`boolean`} - \n\n  * `disableLocalSearch` {`boolean`} - \n\n  * `optionsLoading` {`boolean`} - \n\n  * `noWidthSync` {`boolean`} - \n\n  * `portal` {`boolean`} - When true, the listbox will be appended to the document body instead of the parent container.\nThis is useful when the parent has overflow: hidden, clip-path, or transform applied.\n\n  * `multiple` {`string | boolean`} - Allows more than one option to be selected.\n\n  * `helpText` {`string`} - \n\n  * `help-text` {`string`} - \n\n  * `autoResize` {`boolean`} - \n\n  * `error-message` {`string`} - \n\n  * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n  * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n  * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n  * `max-options-visible` {`number`} - The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.\n\n  * `clearable` {`boolean`} - Adds a clear button when the select is not empty.\n\n  * `open` {`boolean`} - Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the select's open state.\n\n  * `hoist` {`boolean`} - Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n\n  * `filled` {`boolean`} - Draws a filled select.\n\n  * `pill` {`boolean`} - Draws a pill-style select with rounded edges.\n\n  * `label` {`string`} - The select's label. If you need to display HTML, use the `label` slot instead.\n\n  * `placement` {`\"top\" | \"bottom\"`} - The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.\n\n  * `showSelected` {`boolean`} - \n\n  * `enableTabClose` {`boolean`} - \n\n  * `showNoResults` {`boolean`} - \n\n  * `noResultsMessage` {`string`} - \n\n  * `data` - \n\n  * `enableVirtualScroll` {`boolean`} - \n\n  * `enableGroupHeader` {`boolean`} - To enable the group header in the select\n\n  * `autoFocusSearch` {`boolean`} - To auto focus the search input when the select is opened\n\n  * `loading` {`boolean`} - loading indicator for virtual select\n\n  * `name` {`string`} - The name of the select, submitted as a name/value pair with form data.\n\n  * `value` {`string | string[]`} - The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\nvalue will be a space-delimited list of values based on the options selected.\n\n  * `disabled` {`boolean`} - Disables the select control.\n\n  * `form` {`string`} - By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.\n\n  * `required` {`boolean`} - The select's required attribute.\n\nProperties:\n\n  * `styles` - \n\n  * `formControlController` - \n\n  * `virtualScrollHelper` - \n\n  * `portalManager` - \n\n  * `hasSlotController` - \n\n  * `typeToSelectString` {`string`} - \n\n  * `typeToSelectTimeout` {`number`} - \n\n  * `scrollTimeout` {`number | undefined`} - \n\n  * `scrolling` {`boolean`} - \n\n  * `options` {`NileOption[]`} - \n\n  * `resizeController` - \n\n  * `popup` - \n\n  * `combobox` {`HTMLSlotElement`} - \n\n  * `displayInput` {`HTMLInputElement`} - \n\n  * `valueInput` {`HTMLInputElement`} - \n\n  * `listbox` {`HTMLSlotElement`} - \n\n  * `hasFocus` {`boolean`} - \n\n  * `displayLabel` {`string`} - \n\n  * `currentOption` - \n\n  * `selectedOptions` {`NileOption[]`} - \n\n  * `oldValue` {`string | string[]`} - \n\n  * `size` {`\"small\" | \"medium\" | \"large\"`} - The select's size.\n\n  * `placeholder` {`string`} - Placeholder text to show as a hint when the select is empty.\n\n  * `searchValue` {`string`} - Placeholder text to show as a hint when the select is empty.\n\n  * `searchEnabled` {`boolean`} - \n\n  * `internalSearchPlaceHolder` {`string`} - \n\n  * `enableVisibilityEffect` {`boolean`} - \n\n  * `blockValueChange` {`boolean`} - \n\n  * `disableLocalSearch` {`boolean`} - \n\n  * `optionsLoading` {`boolean`} - \n\n  * `noWidthSync` {`boolean`} - \n\n  * `portal` {`boolean`} - When true, the listbox will be appended to the document body instead of the parent container.\nThis is useful when the parent has overflow: hidden, clip-path, or transform applied.\n\n  * `multiple` {`string | boolean`} - Allows more than one option to be selected.\n\n  * `helpText` {`string`} - \n\n  * `help_text` {`string`} - \n\n  * `autoResize` {`boolean`} - \n\n  * `errorMessage` {`string`} - \n\n  * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n  * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n  * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n  * `maxOptionsVisible` {`number`} - The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.\n\n  * `clearable` {`boolean`} - Adds a clear button when the select is not empty.\n\n  * `open` {`boolean`} - Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the select's open state.\n\n  * `hoist` {`boolean`} - Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n\n  * `filled` {`boolean`} - Draws a filled select.\n\n  * `pill` {`boolean`} - Draws a pill-style select with rounded edges.\n\n  * `label` {`string`} - The select's label. If you need to display HTML, use the `label` slot instead.\n\n  * `placement` {`\"top\" | \"bottom\"`} - The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.\n\n  * `showSelected` {`boolean`} - \n\n  * `oldMaxOptionsVisible` {`number`} - \n\n  * `enableTabClose` {`boolean`} - \n\n  * `showNoResults` {`boolean`} - \n\n  * `noResultsMessage` {`string`} - \n\n  * `renderItemConfig` {`RenderItemConfig | undefined`} - Enhanced configuration for rendering items with support for display text, value, and search text\n\n  * `data` - \n\n  * `enableVirtualScroll` {`boolean`} - \n\n  * `enableGroupHeader` {`boolean`} - To enable the group header in the select\n\n  * `autoFocusSearch` {`boolean`} - To auto focus the search input when the select is opened\n\n  * `loading` {`boolean`} - loading indicator for virtual select\n\n  * `anchorVisibilityObservers` {`IntersectionObserver[]`} - All active IntersectionObservers for visibility detection\n\n  * `handleDocumentVisibilityChange` - Handles tab visibility (page hidden / tab switched)\n\n  * `handleWindowResize` - \n\n  * `handleWindowScroll` - \n\n  * `name` {`string`} - The name of the select, submitted as a name/value pair with form data.\n\n  * `value` {`string | string[]`} - The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\nvalue will be a space-delimited list of values based on the options selected.\n\n  * `disabled` {`boolean`} - Disables the select control.\n\n  * `defaultValue` {`string | string[]`} - The default value of the form control. Primarily used for resetting the form control.\n\n  * `defaultChecked` {`boolean | undefined`} - \n\n  * `form` {`string`} - By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.\n\n  * `pattern` {`string | undefined`} - \n\n  * `min` {`string | number | Date | undefined`} - \n\n  * `max` {`string | number | Date | undefined`} - \n\n  * `step` {`number | \"any\" | undefined`} - \n\n  * `required` {`boolean`} - The select's required attribute.\n\n  * `minlength` {`number | undefined`} - \n\n  * `maxlength` {`number | undefined`} - \n\n  * `validity` {`ValidityState`} - Gets the validity state object\n\n  * `validationMessage` {`string`} - Gets the validation message\n\n  * `checkValidity` - \n\n  * `getForm` - \n\n  * `reportValidity` - \n\n  * `setCustomValidity` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Events:\n\n  * `nile-change` {} - Emitted when the control's value changes.\n\n  * `nile-clear` {} - Emitted when the control's value is cleared.\n\n  * `nile-input` {} - Emitted when the control receives input.\n\n  * `nile-focus` {} - Emitted when the control gains focus.\n\n  * `nile-blur` {} - Emitted when the control loses focus.\n\n  * `nile-show` {} - Emitted when the select's menu opens.\n\n  * `nile-after-show` {} - Emitted after the select's menu opens and all animations are complete.\n\n  * `nile-hide` {} - Emitted when the select's menu closes.\n\n  * `nile-after-hide` {} - Emitted after the select's menu closes and all animations are complete.\n\n  * `nile-invalid` {} - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n  * `nile-search` {} - Emitted when the user types in the search input. The event payload includes the search query for backend search functionality.\n\n  * `nile-scroll` {} - Emitted when the user scrolls within the listbox. The event payload includes scroll position information.\n\n  * `nile-scroll-start` {} - Emitted when the user starts scrolling within the listbox.\n\n  * `nile-scroll-end` {} - Emitted when the user stops scrolling and reaches the bottom of the listbox (debounced).\n\nSlots:\n\n  * ` ` {} - The listbox options. Must be `<nile-option>` elements. You can use `<nile-divider>` to group items visually.\n\n  * `label` {} - The input's label. Alternatively, you can use the `label` attribute.\n\n  * `prefix` {} - Used to prepend a presentational icon or similar element to the combobox.\n\n  * `clear-icon` {} - An icon to use in lieu of the default clear icon.\n\n  * `expand-icon` {} - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n\n  * `help-text` {} - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\nAttributes:\n\n  * `size` {`\"small\" | \"medium\" | \"large\"`} - The select's size.\n\n  * `placeholder` {`string`} - Placeholder text to show as a hint when the select is empty.\n\n  * `searchEnabled` {`boolean`} - \n\n  * `internal-search-placeholder` {`string`} - \n\n  * `blockValueChange` {`boolean`} - \n\n  * `disableLocalSearch` {`boolean`} - \n\n  * `optionsLoading` {`boolean`} - \n\n  * `noWidthSync` {`boolean`} - \n\n  * `portal` {`boolean`} - When true, the listbox will be appended to the document body instead of the parent container.\nThis is useful when the parent has overflow: hidden, clip-path, or transform applied.\n\n  * `multiple` {`string | boolean`} - Allows more than one option to be selected.\n\n  * `helpText` {`string`} - \n\n  * `help-text` {`string`} - \n\n  * `autoResize` {`boolean`} - \n\n  * `error-message` {`string`} - \n\n  * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n  * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n  * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n  * `max-options-visible` {`number`} - The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.\n\n  * `clearable` {`boolean`} - Adds a clear button when the select is not empty.\n\n  * `open` {`boolean`} - Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the select's open state.\n\n  * `hoist` {`boolean`} - Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n\n  * `filled` {`boolean`} - Draws a filled select.\n\n  * `pill` {`boolean`} - Draws a pill-style select with rounded edges.\n\n  * `label` {`string`} - The select's label. If you need to display HTML, use the `label` slot instead.\n\n  * `placement` {`\"top\" | \"bottom\"`} - The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.\n\n  * `showSelected` {`boolean`} - \n\n  * `showNoResults` {`boolean`} - \n\n  * `noResultsMessage` {`string`} - \n\n  * `data` - \n\n  * `enableVirtualScroll` {`boolean`} - \n\n  * `enableGroupHeader` {`boolean`} - To enable the group header in the select\n\n  * `autoFocusSearch` {`boolean`} - To auto focus the search input when the select is opened\n\n  * `loading` {`boolean`} - loading indicator for virtual select\n\n  * `name` {`string`} - The name of the select, submitted as a name/value pair with form data.\n\n  * `value` {`string | string[]`} - The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\nvalue will be a space-delimited list of values based on the options selected.\n\n  * `disabled` {`boolean`} - Disables the select control.\n\n  * `form` {`string`} - By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.\n\n  * `required` {`boolean`} - The select's required attribute.\n\nProperties:\n\n  * `styles` - \n\n  * `formControlController` - \n\n  * `virtualScrollHelper` - \n\n  * `portalManager` - \n\n  * `hasSlotController` - \n\n  * `typeToSelectString` {`string`} - \n\n  * `typeToSelectTimeout` {`number`} - \n\n  * `scrollTimeout` {`number | undefined`} - \n\n  * `scrolling` {`boolean`} - \n\n  * `options` {`NileOption[]`} - \n\n  * `resizeController` - \n\n  * `popup` - \n\n  * `combobox` {`HTMLSlotElement`} - \n\n  * `displayInput` {`HTMLInputElement`} - \n\n  * `valueInput` {`HTMLInputElement`} - \n\n  * `listbox` {`HTMLSlotElement`} - \n\n  * `hasFocus` {`boolean`} - \n\n  * `displayLabel` {`string`} - \n\n  * `currentOption` - \n\n  * `selectedOptions` {`NileOption[]`} - \n\n  * `oldValue` {`string | string[]`} - \n\n  * `size` {`\"small\" | \"medium\" | \"large\"`} - The select's size.\n\n  * `placeholder` {`string`} - Placeholder text to show as a hint when the select is empty.\n\n  * `searchValue` {`string`} - Placeholder text to show as a hint when the select is empty.\n\n  * `searchEnabled` {`boolean`} - \n\n  * `internalSearchPlaceHolder` {`string`} - \n\n  * `blockValueChange` {`boolean`} - \n\n  * `disableLocalSearch` {`boolean`} - \n\n  * `optionsLoading` {`boolean`} - \n\n  * `noWidthSync` {`boolean`} - \n\n  * `portal` {`boolean`} - When true, the listbox will be appended to the document body instead of the parent container.\nThis is useful when the parent has overflow: hidden, clip-path, or transform applied.\n\n  * `multiple` {`string | boolean`} - Allows more than one option to be selected.\n\n  * `helpText` {`string`} - \n\n  * `help_text` {`string`} - \n\n  * `autoResize` {`boolean`} - \n\n  * `errorMessage` {`string`} - \n\n  * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n  * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n  * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n  * `maxOptionsVisible` {`number`} - The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.\n\n  * `clearable` {`boolean`} - Adds a clear button when the select is not empty.\n\n  * `open` {`boolean`} - Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the select's open state.\n\n  * `hoist` {`boolean`} - Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n\n  * `filled` {`boolean`} - Draws a filled select.\n\n  * `pill` {`boolean`} - Draws a pill-style select with rounded edges.\n\n  * `label` {`string`} - The select's label. If you need to display HTML, use the `label` slot instead.\n\n  * `placement` {`\"top\" | \"bottom\"`} - The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.\n\n  * `showSelected` {`boolean`} - \n\n  * `oldMaxOptionsVisible` {`number`} - \n\n  * `showNoResults` {`boolean`} - \n\n  * `noResultsMessage` {`string`} - \n\n  * `renderItemConfig` {`RenderItemConfig | undefined`} - Enhanced configuration for rendering items with support for display text, value, and search text\n\n  * `data` - \n\n  * `enableVirtualScroll` {`boolean`} - \n\n  * `enableGroupHeader` {`boolean`} - To enable the group header in the select\n\n  * `autoFocusSearch` {`boolean`} - To auto focus the search input when the select is opened\n\n  * `loading` {`boolean`} - loading indicator for virtual select\n\n  * `handleWindowResize` - \n\n  * `handleWindowScroll` - \n\n  * `name` {`string`} - The name of the select, submitted as a name/value pair with form data.\n\n  * `value` {`string | string[]`} - The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\nvalue will be a space-delimited list of values based on the options selected.\n\n  * `disabled` {`boolean`} - Disables the select control.\n\n  * `defaultValue` {`string | string[]`} - The default value of the form control. Primarily used for resetting the form control.\n\n  * `defaultChecked` {`boolean | undefined`} - \n\n  * `form` {`string`} - By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.\n\n  * `pattern` {`string | undefined`} - \n\n  * `min` {`string | number | Date | undefined`} - \n\n  * `max` {`string | number | Date | undefined`} - \n\n  * `step` {`number | \"any\" | undefined`} - \n\n  * `required` {`boolean`} - The select's required attribute.\n\n  * `minlength` {`number | undefined`} - \n\n  * `maxlength` {`number | undefined`} - \n\n  * `validity` {`ValidityState`} - Gets the validity state object\n\n  * `validationMessage` {`string`} - Gets the validation message\n\n  * `checkValidity` - \n\n  * `getForm` - \n\n  * `reportValidity` - \n\n  * `setCustomValidity` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "size",
@@ -3495,11 +3495,6 @@
           "name": "internal-search-placeholder",
           "description": "`internal-search-placeholder` {`string`} - \n\nProperty: internalSearchPlaceHolder\n\nDefault: Search..."
         },
-        {
-          "name": "enableVisibilityEffect",
-          "description": "`enableVisibilityEffect` {`boolean`} - \n\nProperty: enableVisibilityEffect\n\nDefault: false",
-          "valueSet": "v"
-        },
         {
           "name": "blockValueChange",
           "description": "`blockValueChange` {`boolean`} - \n\nProperty: blockValueChange\n\nDefault: false",
@@ -3612,11 +3607,6 @@
           "description": "`showSelected` {`boolean`} - \n\nProperty: showSelected\n\nDefault: false",
           "valueSet": "v"
         },
-        {
-          "name": "enableTabClose",
-          "description": "`enableTabClose` {`boolean`} - \n\nProperty: enableTabClose\n\nDefault: false",
-          "valueSet": "v"
-        },
         {
           "name": "showNoResults",
           "description": "`showNoResults` {`boolean`} - \n\nProperty: showNoResults\n\nDefault: false",
@@ -5179,7 +5169,7 @@
     },
     {
       "name": "nile-virtual-select",
-      "description": "Events:\n\n  * `nile-change` {} - Emitted when the control's value changes.\n\n  * `nile-clear` {} - Emitted when the control's value is cleared.\n\n  * `nile-input` {} - Emitted when the control receives input.\n\n  * `nile-focus` {} - Emitted when the control gains focus.\n\n  * `nile-blur` {} - Emitted when the control loses focus.\n\n  * `nile-show` {} - Emitted when the select's menu opens.\n\n  * `nile-after-show` {} - Emitted after the select's menu opens and all animations are complete.\n\n  * `nile-hide` {} - Emitted when the select's menu closes.\n\n  * `nile-after-hide` {} - Emitted after the select's menu closes and all animations are complete.\n\n  * `nile-invalid` {} - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n  * `nile-search` {} - Emitted when the user types in the search input. The event payload includes the search query for backend search functionality.\n\n  * `nile-scroll` {} - Emitted when the user scrolls within the virtualized container. The event payload includes scroll position information.\n\n  * `nile-scroll-start` {} - Emitted when the user starts scrolling within the virtualized container.\n\n  * `nile-scroll-end` {} - Emitted when the user stops scrolling and reaches the bottom of the virtualized container (debounced).\n\nSlots:\n\n  * `label` {} - The input's label. Alternatively, you can use the `label` attribute.\n\n  * `prefix` {} - Used to prepend a presentational icon or similar element to the combobox.\n\n  * `clear-icon` {} - An icon to use in lieu of the default clear icon.\n\n  * `expand-icon` {} - The icon to show when the control is expanded and collapsed.\n\n  * `help-text` {} - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\nAttributes:\n\n  * `data` - Array of all option items for virtual scrolling\n\n  * `size` {`\"small\" | \"medium\" | \"large\"`} - The select's size.\n\n  * `placeholder` {`string`} - Placeholder text to show as a hint when the select is empty.\n\n  * `autoResize` {`boolean`} - Enable automatic resizing of tags area\n\n  * `searchEnabled` {`boolean`} - Enable search functionality\n\n  * `enableVisibilityEffect` {`boolean`} - \n\n  * `internal-search-placeholder` {`string`} - Search input placeholder\n\n  * `disableLocalSearch` {`boolean`} - Disable local search filtering\n\n  * `optionsLoading` {`boolean`} - Show loading state\n\n  * `loading` {`boolean`} - Show loading state using nile-loader\n\n  * `multiple` {`boolean`} - Allows more than one option to be selected.\n\n  * `help-text` {`string`} - Help text\n\n  * `error-message` {`string`} - Error message\n\n  * `warning` {`boolean`} - Sets the input to a warning state\n\n  * `error` {`boolean`} - Sets the input to an error state\n\n  * `success` {`boolean`} - Sets the input to a success state\n\n  * `clearable` {`boolean`} - Adds a clear button when the select is not empty.\n\n  * `open` {`boolean`} - The select's open state.\n\n  * `hoist` {`boolean`} - Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n\n  * `filled` {`boolean`} - Draws a filled select.\n\n  * `pill` {`boolean`} - Draws a pill-style select with rounded edges.\n\n  * `label` {`string`} - The select's label. If you need to display HTML, use the `label` slot instead.\n\n  * `placement` {`\"top\" | \"bottom\"`} - The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.\n\n  * `showNoResults` {`boolean`} - Show no results message\n\n  * `noResultsMessage` {`string`} - No results message\n\n  * `showSelected` {`boolean`} - Show selected options only\n\n  * `blockValueChange` {`boolean`} - Block value change events\n\n  * `noWidthSync` {`boolean`} - Disable width synchronization\n\n  * `portal` {`boolean`} - When true, the listbox will be appended to the document body instead of the parent container.\nThis is useful when the parent has overflow: hidden, clip-path, or transform applied.\n\n  * `max-options-visible` {`number`} - The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.\n\n  * `enableTabClose` {`boolean`} - \n\n  * `name` {`string`} - The name of the select, submitted as a name/value pair with form data.\n\n  * `value` {`string | string[]`} - The current value of the select. When `multiple` is enabled, the value will be an array of selected values.\n\n  * `disabled` {`boolean`} - Disables the select control.\n\n  * `form` {`string`} - By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.\n\n  * `required` {`boolean`} - The select's required attribute.\n\nProperties:\n\n  * `styles` - \n\n  * `formControlController` - \n\n  * `hasSlotController` - \n\n  * `portalManager` - \n\n  * `popup` - \n\n  * `combobox` {`HTMLElement`} - \n\n  * `displayInput` {`HTMLInputElement`} - \n\n  * `valueInput` {`HTMLInputElement`} - \n\n  * `virtualizedContainer` {`HTMLElement`} - \n\n  * `hasFocus` {`boolean`} - \n\n  * `displayLabel` {`string`} - \n\n  * `selectedOptions` {`VirtualOption[]`} - \n\n  * `oldValue` {`string | string[]`} - \n\n  * `scrollTimeout` {`number | undefined`} - \n\n  * `scrolling` {`boolean`} - \n\n  * `data` - Array of all option items for virtual scrolling\n\n  * `originalOptionItems` - Original unfiltered option items for search functionality\n\n  * `size` {`\"small\" | \"medium\" | \"large\"`} - The select's size.\n\n  * `placeholder` {`string`} - Placeholder text to show as a hint when the select is empty.\n\n  * `autoResize` {`boolean`} - Enable automatic resizing of tags area\n\n  * `searchValue` {`string`} - Current search value\n\n  * `searchEnabled` {`boolean`} - Enable search functionality\n\n  * `enableVisibilityEffect` {`boolean`} - \n\n  * `internalSearchPlaceHolder` {`string`} - Search input placeholder\n\n  * `disableLocalSearch` {`boolean`} - Disable local search filtering\n\n  * `optionsLoading` {`boolean`} - Show loading state\n\n  * `loading` {`boolean`} - Show loading state using nile-loader\n\n  * `multiple` {`boolean`} - Allows more than one option to be selected.\n\n  * `helpText` {`string`} - Help text\n\n  * `errorMessage` {`string`} - Error message\n\n  * `warning` {`boolean`} - Sets the input to a warning state\n\n  * `error` {`boolean`} - Sets the input to an error state\n\n  * `success` {`boolean`} - Sets the input to a success state\n\n  * `clearable` {`boolean`} - Adds a clear button when the select is not empty.\n\n  * `open` {`boolean`} - The select's open state.\n\n  * `hoist` {`boolean`} - Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n\n  * `filled` {`boolean`} - Draws a filled select.\n\n  * `pill` {`boolean`} - Draws a pill-style select with rounded edges.\n\n  * `label` {`string`} - The select's label. If you need to display HTML, use the `label` slot instead.\n\n  * `placement` {`\"top\" | \"bottom\"`} - The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.\n\n  * `showNoResults` {`boolean`} - Show no results message\n\n  * `noResultsMessage` {`string`} - No results message\n\n  * `showSelected` {`boolean`} - Show selected options only\n\n  * `renderItemConfig` {`RenderItemConfig | undefined`} - Enhanced configuration for rendering items with support for display text, value, and search text\n\n  * `blockValueChange` {`boolean`} - Block value change events\n\n  * `noWidthSync` {`boolean`} - Disable width synchronization\n\n  * `portal` {`boolean`} - When true, the listbox will be appended to the document body instead of the parent container.\nThis is useful when the parent has overflow: hidden, clip-path, or transform applied.\n\n  * `maxOptionsVisible` {`number`} - The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.\n\n  * `oldMaxOptionsVisible` {`number`} - \n\n  * `enableTabClose` {`boolean`} - \n\n  * `showListbox` {`boolean`} - \n\n  * `wasShowSelectedCheckedOnClose` {`boolean`} - \n\n  * `anchorVisibilityObservers` {`IntersectionObserver[]`} - All active IntersectionObservers for visibility detection\n\n  * `handleDocumentVisibilityChange` - Handles tab visibility (page hidden / tab switched)\n\n  * `handleDocumentMouseDown` - \n\n  * `handleWindowError` - This is a workaround for an error in the Lit Labs virtualizer.\nSince there are no specific guidelines available to fix the issue,\nwe are catching only the error message related to the virtualizer.\n\n  * `handleWindowResize` - \n\n  * `handleWindowScroll` - \n\n  * `resizeController` - \n\n  * `name` {`string`} - The name of the select, submitted as a name/value pair with form data.\n\n  * `value` {`string | string[]`} - The current value of the select. When `multiple` is enabled, the value will be an array of selected values.\n\n  * `disabled` {`boolean`} - Disables the select control.\n\n  * `defaultValue` {`string | string[]`} - The default value of the form control. Primarily used for resetting the form control.\n\n  * `defaultChecked` {`boolean | undefined`} - \n\n  * `form` {`string`} - By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.\n\n  * `pattern` {`string | undefined`} - \n\n  * `min` {`string | number | Date | undefined`} - \n\n  * `max` {`string | number | Date | undefined`} - \n\n  * `step` {`number | \"any\" | undefined`} - \n\n  * `required` {`boolean`} - The select's required attribute.\n\n  * `minlength` {`number | undefined`} - \n\n  * `maxlength` {`number | undefined`} - \n\n  * `validity` {`ValidityState`} - Gets the validity state object\n\n  * `validationMessage` {`string`} - Gets the validation message\n\n  * `checkValidity` - \n\n  * `getForm` - \n\n  * `reportValidity` - \n\n  * `setCustomValidity` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Events:\n\n  * `nile-change` {} - Emitted when the control's value changes.\n\n  * `nile-clear` {} - Emitted when the control's value is cleared.\n\n  * `nile-input` {} - Emitted when the control receives input.\n\n  * `nile-focus` {} - Emitted when the control gains focus.\n\n  * `nile-blur` {} - Emitted when the control loses focus.\n\n  * `nile-show` {} - Emitted when the select's menu opens.\n\n  * `nile-after-show` {} - Emitted after the select's menu opens and all animations are complete.\n\n  * `nile-hide` {} - Emitted when the select's menu closes.\n\n  * `nile-after-hide` {} - Emitted after the select's menu closes and all animations are complete.\n\n  * `nile-invalid` {} - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n  * `nile-search` {} - Emitted when the user types in the search input. The event payload includes the search query for backend search functionality.\n\n  * `nile-scroll` {} - Emitted when the user scrolls within the virtualized container. The event payload includes scroll position information.\n\n  * `nile-scroll-start` {} - Emitted when the user starts scrolling within the virtualized container.\n\n  * `nile-scroll-end` {} - Emitted when the user stops scrolling and reaches the bottom of the virtualized container (debounced).\n\nSlots:\n\n  * `label` {} - The input's label. Alternatively, you can use the `label` attribute.\n\n  * `prefix` {} - Used to prepend a presentational icon or similar element to the combobox.\n\n  * `clear-icon` {} - An icon to use in lieu of the default clear icon.\n\n  * `expand-icon` {} - The icon to show when the control is expanded and collapsed.\n\n  * `help-text` {} - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\nAttributes:\n\n  * `data` - Array of all option items for virtual scrolling\n\n  * `size` {`\"small\" | \"medium\" | \"large\"`} - The select's size.\n\n  * `placeholder` {`string`} - Placeholder text to show as a hint when the select is empty.\n\n  * `autoResize` {`boolean`} - Enable automatic resizing of tags area\n\n  * `searchEnabled` {`boolean`} - Enable search functionality\n\n  * `internal-search-placeholder` {`string`} - Search input placeholder\n\n  * `disableLocalSearch` {`boolean`} - Disable local search filtering\n\n  * `optionsLoading` {`boolean`} - Show loading state\n\n  * `loading` {`boolean`} - Show loading state using nile-loader\n\n  * `multiple` {`boolean`} - Allows more than one option to be selected.\n\n  * `help-text` {`string`} - Help text\n\n  * `error-message` {`string`} - Error message\n\n  * `warning` {`boolean`} - Sets the input to a warning state\n\n  * `error` {`boolean`} - Sets the input to an error state\n\n  * `success` {`boolean`} - Sets the input to a success state\n\n  * `clearable` {`boolean`} - Adds a clear button when the select is not empty.\n\n  * `open` {`boolean`} - The select's open state.\n\n  * `hoist` {`boolean`} - Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n\n  * `filled` {`boolean`} - Draws a filled select.\n\n  * `pill` {`boolean`} - Draws a pill-style select with rounded edges.\n\n  * `label` {`string`} - The select's label. If you need to display HTML, use the `label` slot instead.\n\n  * `placement` {`\"top\" | \"bottom\"`} - The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.\n\n  * `showNoResults` {`boolean`} - Show no results message\n\n  * `noResultsMessage` {`string`} - No results message\n\n  * `showSelected` {`boolean`} - Show selected options only\n\n  * `blockValueChange` {`boolean`} - Block value change events\n\n  * `noWidthSync` {`boolean`} - Disable width synchronization\n\n  * `portal` {`boolean`} - When true, the listbox will be appended to the document body instead of the parent container.\nThis is useful when the parent has overflow: hidden, clip-path, or transform applied.\n\n  * `max-options-visible` {`number`} - The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.\n\n  * `name` {`string`} - The name of the select, submitted as a name/value pair with form data.\n\n  * `value` {`string | string[]`} - The current value of the select. When `multiple` is enabled, the value will be an array of selected values.\n\n  * `disabled` {`boolean`} - Disables the select control.\n\n  * `form` {`string`} - By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.\n\n  * `required` {`boolean`} - The select's required attribute.\n\nProperties:\n\n  * `styles` - \n\n  * `formControlController` - \n\n  * `hasSlotController` - \n\n  * `portalManager` - \n\n  * `popup` - \n\n  * `combobox` {`HTMLElement`} - \n\n  * `displayInput` {`HTMLInputElement`} - \n\n  * `valueInput` {`HTMLInputElement`} - \n\n  * `virtualizedContainer` {`HTMLElement`} - \n\n  * `hasFocus` {`boolean`} - \n\n  * `displayLabel` {`string`} - \n\n  * `selectedOptions` {`VirtualOption[]`} - \n\n  * `oldValue` {`string | string[]`} - \n\n  * `scrollTimeout` {`number | undefined`} - \n\n  * `scrolling` {`boolean`} - \n\n  * `data` - Array of all option items for virtual scrolling\n\n  * `originalOptionItems` - Original unfiltered option items for search functionality\n\n  * `size` {`\"small\" | \"medium\" | \"large\"`} - The select's size.\n\n  * `placeholder` {`string`} - Placeholder text to show as a hint when the select is empty.\n\n  * `autoResize` {`boolean`} - Enable automatic resizing of tags area\n\n  * `searchValue` {`string`} - Current search value\n\n  * `searchEnabled` {`boolean`} - Enable search functionality\n\n  * `internalSearchPlaceHolder` {`string`} - Search input placeholder\n\n  * `disableLocalSearch` {`boolean`} - Disable local search filtering\n\n  * `optionsLoading` {`boolean`} - Show loading state\n\n  * `loading` {`boolean`} - Show loading state using nile-loader\n\n  * `multiple` {`boolean`} - Allows more than one option to be selected.\n\n  * `helpText` {`string`} - Help text\n\n  * `errorMessage` {`string`} - Error message\n\n  * `warning` {`boolean`} - Sets the input to a warning state\n\n  * `error` {`boolean`} - Sets the input to an error state\n\n  * `success` {`boolean`} - Sets the input to a success state\n\n  * `clearable` {`boolean`} - Adds a clear button when the select is not empty.\n\n  * `open` {`boolean`} - The select's open state.\n\n  * `hoist` {`boolean`} - Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n\n  * `filled` {`boolean`} - Draws a filled select.\n\n  * `pill` {`boolean`} - Draws a pill-style select with rounded edges.\n\n  * `label` {`string`} - The select's label. If you need to display HTML, use the `label` slot instead.\n\n  * `placement` {`\"top\" | \"bottom\"`} - The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.\n\n  * `showNoResults` {`boolean`} - Show no results message\n\n  * `noResultsMessage` {`string`} - No results message\n\n  * `showSelected` {`boolean`} - Show selected options only\n\n  * `renderItemConfig` {`RenderItemConfig | undefined`} - Enhanced configuration for rendering items with support for display text, value, and search text\n\n  * `blockValueChange` {`boolean`} - Block value change events\n\n  * `noWidthSync` {`boolean`} - Disable width synchronization\n\n  * `portal` {`boolean`} - When true, the listbox will be appended to the document body instead of the parent container.\nThis is useful when the parent has overflow: hidden, clip-path, or transform applied.\n\n  * `maxOptionsVisible` {`number`} - The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.\n\n  * `oldMaxOptionsVisible` {`number`} - \n\n  * `showListbox` {`boolean`} - \n\n  * `wasShowSelectedCheckedOnClose` {`boolean`} - \n\n  * `handleDocumentMouseDown` - \n\n  * `handleWindowError` - This is a workaround for an error in the Lit Labs virtualizer.\nSince there are no specific guidelines available to fix the issue,\nwe are catching only the error message related to the virtualizer.\n\n  * `handleWindowResize` - \n\n  * `handleWindowScroll` - \n\n  * `resizeController` - \n\n  * `name` {`string`} - The name of the select, submitted as a name/value pair with form data.\n\n  * `value` {`string | string[]`} - The current value of the select. When `multiple` is enabled, the value will be an array of selected values.\n\n  * `disabled` {`boolean`} - Disables the select control.\n\n  * `defaultValue` {`string | string[]`} - The default value of the form control. Primarily used for resetting the form control.\n\n  * `defaultChecked` {`boolean | undefined`} - \n\n  * `form` {`string`} - By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.\n\n  * `pattern` {`string | undefined`} - \n\n  * `min` {`string | number | Date | undefined`} - \n\n  * `max` {`string | number | Date | undefined`} - \n\n  * `step` {`number | \"any\" | undefined`} - \n\n  * `required` {`boolean`} - The select's required attribute.\n\n  * `minlength` {`number | undefined`} - \n\n  * `maxlength` {`number | undefined`} - \n\n  * `validity` {`ValidityState`} - Gets the validity state object\n\n  * `validationMessage` {`string`} - Gets the validation message\n\n  * `checkValidity` - \n\n  * `getForm` - \n\n  * `reportValidity` - \n\n  * `setCustomValidity` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "data",
@@ -5214,11 +5204,6 @@
           "description": "`searchEnabled` {`boolean`} - Enable search functionality\n\nProperty: searchEnabled\n\nDefault: false",
           "valueSet": "v"
         },
-        {
-          "name": "enableVisibilityEffect",
-          "description": "`enableVisibilityEffect` {`boolean`} - \n\nProperty: enableVisibilityEffect\n\nDefault: false",
-          "valueSet": "v"
-        },
         {
           "name": "internal-search-placeholder",
           "description": "`internal-search-placeholder` {`string`} - Search input placeholder\n\nProperty: internalSearchPlaceHolder\n\nDefault: Search..."
@@ -5340,11 +5325,6 @@
           "name": "max-options-visible",
           "description": "`max-options-visible` {`number`} - The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.\n\nProperty: maxOptionsVisible\n\nDefault: 3"
         },
-        {
-          "name": "enableTabClose",
-          "description": "`enableTabClose` {`boolean`} - \n\nProperty: enableTabClose\n\nDefault: false",
-          "valueSet": "v"
-        },
         {
           "name": "name",
           "description": "`name` {`string`} - The name of the select, submitted as a name/value pair with form data.\n\nProperty: name\n\nDefault: "