@aquera/nile-elements 0.1.72 → 0.1.73-beta-1.4

package/package.json

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

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

@@ -77,6 +77,10 @@ type NileRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
  * @event nile-hide - Emitted when the select's menu closes.
  * @event nile-after-hide - Emitted after the select's menu closes and all animations are complete.
  * @event nile-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+ * @event nile-search - Emitted when the user types in the search input. The event payload includes the search query for backend search functionality.
+ * @event nile-scroll - Emitted when the user scrolls within the listbox. The event payload includes scroll position information.
+ * @event nile-scroll-start - Emitted when the user starts scrolling within the listbox.
+ * @event nile-scroll-end - Emitted when the user stops scrolling and reaches the bottom of the listbox (debounced).
  *
  * @csspart form-control - The form control that wraps the label, input, and help text.
  * @csspart form-control-label - The label's wrapper.
@@ -113,6 +117,8 @@ export class NileSelect extends NileElement implements NileFormControl{
   );
   private typeToSelectString = '';
   private typeToSelectTimeout: number;
+  private scrollTimeout: number | undefined;
+  private scrolling = false;
 
   @query('.select') popup: NilePopup;
   @query('.select__combobox') combobox: HTMLSlotElement;
@@ -296,6 +302,11 @@ export class NileSelect extends NileElement implements NileFormControl{
 
   disconnectedCallback() {
     super.disconnectedCallback();
+    // Clear any pending scroll timeout to prevent memory leaks
+    if (this.scrollTimeout) {
+      clearTimeout(this.scrollTimeout);
+      this.scrollTimeout = undefined;
+    }
     this.emit('nile-destroy');
   }
 
@@ -834,6 +845,11 @@ export class NileSelect extends NileElement implements NileFormControl{
 
   handleSearchChange(e: any) {
     this.searchValue = e.detail.value;
+    this.emit('nile-search', { 
+      query: this.searchValue,
+      name: this.name 
+    });
+    
     if(this.enableGroupHeader) {
       this.handleGroupSearchChange();
     }
@@ -848,6 +864,42 @@ export class NileSelect extends NileElement implements NileFormControl{
     }
   }
 
+  handleScroll(e: Event): void {
+    const target = e.target as HTMLElement;
+    
+    this.emit('nile-scroll', {
+      scrollTop: target.scrollTop,
+      scrollLeft: target.scrollLeft,
+      name: this.name
+    });
+
+    if (!this.scrolling) {
+      this.scrolling = true;
+      this.emit('nile-scroll-start', {
+        scrollTop: target.scrollTop,
+        scrollLeft: target.scrollLeft,
+        name: this.name
+      });
+    }
+
+    clearTimeout(this.scrollTimeout);
+    this.scrollTimeout = window.setTimeout(() => {
+      if (this.scrolling) {
+        this.scrolling = false;
+      }
+    }, 300);
+
+    const isAtBottom = Math.ceil(target.scrollTop) >= Math.floor(target.scrollHeight - target.offsetHeight);
+    if (isAtBottom) {
+        this.emit('nile-scroll-end', {
+          scrollTop: target.scrollTop,
+          scrollLeft: target.scrollLeft,
+          name: this.name,
+          isAtBottom: true
+        });
+    }
+  }
+
   filterOptions(searchValue: string) {
     const allOptions = this.getAllOptions();
     const lowerCaseSearchValue = searchValue.toLowerCase();
@@ -1348,6 +1400,7 @@ export class NileSelect extends NileElement implements NileFormControl{
               tabindex="-1"
               @mouseup=${this.handleOptionClick}
               @slotchange=${this.handleDefaultSlotChange}
+              @scroll=${this.handleScroll}
             >
               ${this.searchEnabled
                 ? html` <div class="select__search">

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

@@ -47,6 +47,7 @@ export class VirtualScrollHelper {
           .noWidthSync=${component.noWidthSync}
           .maxOptionsVisible=${component.maxOptionsVisible}
           .data=${component.data}
+          .open=${component.open}
           exportparts="
             select-options,
             select-no-results,

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

@@ -73,6 +73,10 @@ import { VirtualSelectRenderer } from './renderer.js';
  * @event nile-hide - Emitted when the select's menu closes.
  * @event nile-after-hide - Emitted after the select's menu closes and all animations are complete.
  * @event nile-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+ * @event nile-search - Emitted when the user types in the search input. The event payload includes the search query for backend search functionality.
+ * @event nile-scroll - Emitted when the user scrolls within the virtualized container. The event payload includes scroll position information.
+ * @event nile-scroll-start - Emitted when the user starts scrolling within the virtualized container.
+ * @event nile-scroll-end - Emitted when the user stops scrolling and reaches the bottom of the virtualized container (debounced).
  *
  * @csspart form-control - The form control that wraps the label, input, and help text.
  * @csspart form-control-label - The label's wrapper.
@@ -111,6 +115,9 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
   @state() displayLabel = '';
   @state() selectedOptions: VirtualOption[] = [];
   @state() oldValue: string | string[] = '';
+  
+  private scrollTimeout: number | undefined;
+  private scrolling = false;
 
   /** The name of the select, submitted as a name/value pair with form data. */
   @property() name = '';
@@ -265,6 +272,11 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
 
   disconnectedCallback() {
     this.removeOpenListeners();
+    // Clear any pending scroll timeout to prevent memory leaks
+    if (this.scrollTimeout) {
+      clearTimeout(this.scrollTimeout);
+      this.scrollTimeout = undefined;
+    }
   }
 
   private initializeComponent(): void {
@@ -628,12 +640,54 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
 
   handleSearchChange(e: any): void {
     this.searchValue = e.detail.value;
+    
+    this.emit('nile-search', { 
+      query: this.searchValue,
+      name: this.name 
+    });
+    
     if (!this.disableLocalSearch) {
       this.filterVirtualOptions(this.searchValue);
       this.resetScrollPosition();
     }
   }
 
+  handleScroll(e: Event): void {
+    const target = e.target as HTMLElement;
+    
+    this.emit('nile-scroll', {
+      scrollTop: target.scrollTop,
+      scrollLeft: target.scrollLeft,
+      name: this.name
+    });
+
+    if (!this.scrolling) {
+      this.scrolling = true;
+      this.emit('nile-scroll-start', {
+        scrollTop: target.scrollTop,
+        scrollLeft: target.scrollLeft,
+        name: this.name
+      });
+    }
+
+    clearTimeout(this.scrollTimeout);
+    this.scrollTimeout = window.setTimeout(() => {
+      if (this.scrolling) {
+        this.scrolling = false;
+      }
+    }, 300);
+
+    const isAtBottom = Math.ceil(target.scrollTop) >= Math.floor(target.scrollHeight - target.offsetHeight);
+    if (isAtBottom) {
+        this.emit('nile-scroll-end', {
+          scrollTop: target.scrollTop,
+          scrollLeft: target.scrollLeft,
+          name: this.name,
+          isAtBottom: true
+        });
+    }
+  }
+
   filterVirtualOptions(searchValue: string): void {
     const result = VirtualSelectSearchManager.filterVirtualOptions(
       searchValue,
@@ -1197,7 +1251,8 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
       this.renderItemConfig?.getValue,
       this.showNoResults,
       this.noResultsMessage,
-      this.optionsLoading
+      this.optionsLoading,
+      this.handleScroll.bind(this)
     );
   }
 

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

@@ -21,7 +21,8 @@ export class VirtualSelectRenderer {
     getItemValue?: (item: any) => string,
     showNoResults?: boolean,
     noResultsMessage?: string,
-    optionsLoading?: boolean
+    optionsLoading?: boolean,
+    onScroll?: (e: Event) => void
   ): TemplateResult {
     return html`
       <div part="select-options" class="select__options ${
@@ -37,6 +38,7 @@ export class VirtualSelectRenderer {
               <div
                 class="virtualized"
                 part="virtualized"
+                @scroll=${onScroll}
               >
                 ${VirtualSelectRenderer.shouldUseVirtualizer(data)
                   ? html`

package/vscode-html-custom-data.json

@@ -3013,7 +3013,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\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` {`\"medium\" | \"small\" | \"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  * `multiple` {`string | boolean`} - Allows more than one option to be selected.\n\n  * `help-text` {`string`} - \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  * `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  * `hasSlotController` - \n\n  * `typeToSelectString` {`string`} - \n\n  * `typeToSelectTimeout` {`number`} - \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` {`\"medium\" | \"small\" | \"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  * `multiple` {`string | boolean`} - Allows more than one option to be selected.\n\n  * `helpText` {`string`} - \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  * `options` {`NileOption[]`} - \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` {`\"medium\" | \"small\" | \"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  * `multiple` {`string | boolean`} - Allows more than one option to be selected.\n\n  * `help-text` {`string`} - \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  * `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  * `hasSlotController` - \n\n  * `typeToSelectString` {`string`} - \n\n  * `typeToSelectTimeout` {`number`} - \n\n  * `scrollTimeout` {`number | undefined`} - \n\n  * `scrolling` {`boolean`} - \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` {`\"medium\" | \"small\" | \"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  * `multiple` {`string | boolean`} - Allows more than one option to be selected.\n\n  * `helpText` {`string`} - \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  * `options` {`NileOption[]`} - \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",
@@ -3226,6 +3226,22 @@
         {
           "name": "onnile-invalid",
           "description": "`nile-invalid` {} - Emitted when the form control has been checked for validity and its constraints aren't satisfied."
+        },
+        {
+          "name": "onnile-search",
+          "description": "`nile-search` {} - Emitted when the user types in the search input. The event payload includes the search query for backend search functionality."
+        },
+        {
+          "name": "onnile-scroll",
+          "description": "`nile-scroll` {} - Emitted when the user scrolls within the listbox. The event payload includes scroll position information."
+        },
+        {
+          "name": "onnile-scroll-start",
+          "description": "`nile-scroll-start` {} - Emitted when the user starts scrolling within the listbox."
+        },
+        {
+          "name": "onnile-scroll-end",
+          "description": "`nile-scroll-end` {} - Emitted when the user stops scrolling and reaches the bottom of the listbox (debounced)."
         }
       ]
     },
@@ -4340,7 +4356,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\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` {`\"medium\" | \"small\" | \"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`} - 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  * `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  * `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  * `popup` - \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  * `data` - Array of all option items for virtual scrolling\n\n  * `originalOptionItems` - Original unfiltered option items for search functionality\n\n  * `size` {`\"medium\" | \"small\" | \"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`} - 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  * `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  * `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  * `handleDocumentMouseDown` - \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` {`\"medium\" | \"small\" | \"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`} - 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  * `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  * `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  * `popup` - \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` {`\"medium\" | \"small\" | \"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`} - 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  * `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  * `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  * `handleDocumentMouseDown` - \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",
@@ -4543,6 +4559,22 @@
         {
           "name": "onnile-invalid",
           "description": "`nile-invalid` {} - Emitted when the form control has been checked for validity and its constraints aren't satisfied."
+        },
+        {
+          "name": "onnile-search",
+          "description": "`nile-search` {} - Emitted when the user types in the search input. The event payload includes the search query for backend search functionality."
+        },
+        {
+          "name": "onnile-scroll",
+          "description": "`nile-scroll` {} - Emitted when the user scrolls within the virtualized container. The event payload includes scroll position information."
+        },
+        {
+          "name": "onnile-scroll-start",
+          "description": "`nile-scroll-start` {} - Emitted when the user starts scrolling within the virtualized container."
+        },
+        {
+          "name": "onnile-scroll-end",
+          "description": "`nile-scroll-end` {} - Emitted when the user stops scrolling and reaches the bottom of the virtualized container (debounced)."
         }
       ]
     }