@aquera/nile-elements 0.1.73-beta-1.8 → 0.1.73

package/package.json

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

package/src/nile-input/nile-input.ts

@@ -179,7 +179,7 @@ export class NileInput extends NileElement implements NileFormControl {
   @property() autocomplete: string = 'off';
 
   /** Indicates that the input should receive focus on page load. */
-  @property({ type: Boolean }) autofocus: boolean;
+  @property({ type: Boolean, attribute: true, reflect: true }) autofocus: boolean;
 
   /** Used to customize the label or icon of the Enter key on virtual keyboards. */
   @property() enterkeyhint:
@@ -501,6 +501,10 @@ export class NileInput extends NileElement implements NileFormControl {
     this.formControlController.updateValidity();
   }
 
+  public inputFocus() {
+    this.input.focus();
+  }
+
   render() {
     const hasLabelSlot = this.hasSlotController.test('label');
     const hasHelpTextSlot = this.hasSlotController.test('help-text');

package/src/nile-option-group/nile-option-group.ts

@@ -19,7 +19,7 @@ export class NileOptionGroup extends NileElement {
 	}
 
 	@property({type: String, reflect: true, attribute: true}) name: string = "";
-	@property({type: Object, attribute: true}) data: OptionGroupData | null = null;
+	@property({ type: Object, reflect: true, attribute: true}) data: OptionGroupData | null = null;
 
 	private checkForImageOrIcon() {
 		return this.data?.prefix?.icon?.name || this.data?.prefix?.image?.src || this.data?.prefix?.prefixText;

package/src/nile-radio/nile-radio.ts

@@ -51,6 +51,9 @@ export class NileRadio extends NileElement {
   /** The radio's labelborder. */
   @property({ type: Boolean, reflect: true }) islabelborder = false;
 
+  
+  @property({ type: Boolean, reflect: true }) allowUncheck = false;
+
   connectedCallback() {
     super.connectedCallback();
     this.handleBlur = this.handleBlur.bind(this);
@@ -85,7 +88,10 @@ export class NileRadio extends NileElement {
   }
 
   private handleClick() {
-    if (!this.disabled) {
+
+    if(this.allowUncheck && !this.disabled) {
+      this.checked = !this.checked;
+    } else if (!this.disabled) {
       this.checked = true;
     }
   }

package/src/nile-radio-group/nile-radio-group.ts

@@ -6,7 +6,7 @@ import { html } from 'lit';
 import { watch } from '../internal/watch';
 import NileElement from '../internal/nile-element';
 import styles from './nile-radio-group.css';
-import type { CSSResultGroup } from 'lit';
+import type { CSSResultGroup, PropertyValues } from 'lit';
 import type NileRadio from '../nile-radio/nile-radio';
 
 /**
@@ -73,6 +73,9 @@ export class NileRadioGroup extends NileElement {
   /** The radio's labelborder for whole gp. */
   @property({ type: Boolean, reflect: true }) islabelborder = false;
 
+  /** Allow the radio to be unchecked. */
+  @property({ type: Boolean, reflect: true, attribute: true }) allowUncheckGroup = false;
+
   connectedCallback() {
     super.connectedCallback();
     this.defaultValue = this.value;
@@ -99,11 +102,30 @@ export class NileRadioGroup extends NileElement {
     }
 
     this.value = target.value;
-    radios.forEach(radio => (radio.checked = radio === target));
+    if (!this.allowUncheckGroup) {
+      radios.forEach(radio => {
+        radio.checked = radio === target;
+      });
+    }
 
-    if (this.value !== oldValue) {
-      this.emit('change',{value: this.value });
+    if (!this.allowUncheckGroup && this.value !== oldValue) {
+      this.emit('change', { value: this.value});
       this.emit('input');
+    } else if (this.allowUncheckGroup) { 
+      this.emit('change', { value: this.value , checked: target.checked});
+      this.emit('input');
+    }
+  }
+
+  protected updated(changedProperties: PropertyValues): void {
+    super.updated(changedProperties);
+
+    if (changedProperties.has('allowUncheckGroup')) {
+      if (this.allowUncheckGroup) {
+        this.getAllRadios().forEach(radio => {
+          radio.allowUncheck = true;
+        });
+      }
     }
   }
 

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

@@ -119,6 +119,7 @@ export class NileSelect extends NileElement implements NileFormControl{
   private typeToSelectTimeout: number;
   private scrollTimeout: number | undefined;
   private scrolling = false;
+  private options: NileOption[] = [];
 
   @query('.select') popup: NilePopup;
   @query('.select__combobox') combobox: HTMLSlotElement;
@@ -269,6 +270,9 @@ export class NileSelect extends NileElement implements NileFormControl{
   /** To enable the group header in the select */
   @property({ type: Boolean, reflect: true, attribute: true }) enableGroupHeader = false;
 
+  /** To auto focus the search input when the select is opened */
+  @property({ type: Boolean, reflect: true, attribute: true }) autoFocusSearch = false;
+
   /** Gets the validity state object */
   get validity() {
     return this.valueInput?.validity;
@@ -310,8 +314,6 @@ export class NileSelect extends NileElement implements NileFormControl{
     this.emit('nile-destroy');
   }
 
-  private options: NileOption[] = [];
-
   protected updated(_changedProperties: PropertyValues): void {
     if(_changedProperties.has('multiple')) {
       this.setCheckBoxInOption(this.multiple as boolean);
@@ -845,11 +847,11 @@ export class NileSelect extends NileElement implements NileFormControl{
 
   handleSearchChange(e: any) {
     this.searchValue = e.detail.value;
-    this.emit('nile-search', { 
+    this.emit('nile-search', {
       query: this.searchValue,
-      name: this.name 
+      name: this.name
     });
-    
+
     if(this.enableGroupHeader) {
       this.handleGroupSearchChange();
     }
@@ -866,7 +868,7 @@ 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,
@@ -891,12 +893,12 @@ export class NileSelect extends NileElement implements NileFormControl{
 
     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
-        });
+      this.emit('nile-scroll-end', {
+        scrollTop: target.scrollTop,
+        scrollLeft: target.scrollLeft,
+        name: this.name,
+        isAtBottom: true
+      });
     }
   }
 
@@ -986,6 +988,9 @@ export class NileSelect extends NileElement implements NileFormControl{
       this.filterOptions(this.searchValue);
 
       this.emit('nile-after-show', { value: this.value, name: this.name });
+      if (this.autoFocusSearch) {
+        this.handleInputAfterInit();
+      }
     } else {
       // Hide
       this.emit('nile-hide', { value: this.value, name: this.name });
@@ -1157,6 +1162,10 @@ export class NileSelect extends NileElement implements NileFormControl{
     }, 1);
   }
 
+  handleInputAfterInit() {
+    this.shadowRoot?.querySelector('nile-input')?.inputFocus();
+  }
+
   render() {
     if(this.enableVirtualScroll) {
       return this.virtualScrollHelper.renderVirtualizedContent();
@@ -1412,6 +1421,7 @@ export class NileSelect extends NileElement implements NileFormControl{
                       @nile-input=${this.handleSearchChange}
                       @nile-focus=${this.handleSearchFocus}
                       @nile-change="${this.onInputChange}"
+                      @nile-after-init=${this.handleInputAfterInit}
                     >
                       <nile-icon name="search" slot="suffix"> </nile-icon>
                     </nile-input>

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

@@ -29,7 +29,7 @@ import { HasSlotController } from '../internal/slot';
 import { waitForEvent } from '../internal/event';
 import { watch } from '../internal/watch';
 import NileElement from '../internal/nile-element';
-import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+import type { CSSResultGroup, TemplateResult } from 'lit';
 import type { NileFormControl } from '../internal/nile-element';
 import type NileOption from '../nile-option/nile-option';
 import type NilePopup from '../nile-popup/nile-popup';
@@ -73,10 +73,6 @@ 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.
@@ -115,9 +111,6 @@ 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 = '';
@@ -272,17 +265,6 @@ 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;
-    }
-  }
-
-  protected updated(changedProperties: PropertyValues): void {
-      if(changedProperties.has('value')) {
-         this.selectionChanged();
-      }
   }
 
   private initializeComponent(): void {
@@ -646,54 +628,12 @@ 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,
@@ -730,10 +670,6 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
 
   @watch('data', { waitUntilFirstUpdate: true })
   handleDataChange(): void {
-    if (this.data.length > 0 && this.open) {
-      this.originalOptionItems = [...this.data];
-    }
-    
     this.selectionChanged();
     // Show no results message when data is empty and not loading
     if (!this.optionsLoading && this.data.length === 0) {
@@ -742,6 +678,10 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
       this.showNoResults = false;
     }
     this.requestUpdate();
+    
+    if (this.open) {
+      this.resetScrollPosition();
+    }
   }
 
   @watch('renderItemConfig', { waitUntilFirstUpdate: true })
@@ -805,7 +745,7 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
   }
 
   private initializeOriginalItems(): void {
-    if (this.data.length > 0) {
+    if (this.originalOptionItems.length === 0 && this.data.length > 0) {
       this.originalOptionItems = [...this.data];
     }
   }
@@ -1257,8 +1197,7 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
       this.renderItemConfig?.getValue,
       this.showNoResults,
       this.noResultsMessage,
-      this.optionsLoading,
-      this.handleScroll.bind(this)
+      this.optionsLoading
     );
   }
 

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

@@ -21,8 +21,7 @@ export class VirtualSelectRenderer {
     getItemValue?: (item: any) => string,
     showNoResults?: boolean,
     noResultsMessage?: string,
-    optionsLoading?: boolean,
-    onScroll?: (e: Event) => void
+    optionsLoading?: boolean
   ): TemplateResult {
     return html`
       <div part="select-options" class="select__options ${
@@ -38,7 +37,6 @@ export class VirtualSelectRenderer {
               <div
                 class="virtualized"
                 part="virtualized"
-                @scroll=${onScroll}
               >
                 ${VirtualSelectRenderer.shouldUseVirtualizer(data)
                   ? html`
@@ -72,8 +70,8 @@ export class VirtualSelectRenderer {
     
     const optionValue = valueFn(item);
     const displayText = displayTextFn(item);
-    const isDisabled = item?.disabled || false;
-    const className = item?.className;
+    const isDisabled = item.disabled || false;
+    const className = item.className;
     
     let isSelected = false;
     if (multiple) {
@@ -97,9 +95,9 @@ export class VirtualSelectRenderer {
 
   /**
    * Determines whether to use virtualizer based on dataset size
-   * For small datasets (less than 5 items), use regular rendering for better sizing
+   * For small datasets (less than 50 items), use regular rendering for better sizing
    */
   private static shouldUseVirtualizer(data: any[]): boolean {
-    return data.length >= 5;
+    return data.length >= 50;
   }
 } 

package/vscode-html-custom-data.json

@@ -2867,7 +2867,7 @@
     },
     {
       "name": "nile-radio-group",
-      "description": "Events:\n\n  * `change` {} - Emitted when the radio group's selected value changes.\n\n  * `input` {} - Emitted when the radio group receives user input.\n\n  * `invalid` {} - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\nSlots:\n\n  * ` ` {} - The default slot where `<nile-radio>` or `<nile-radio-button>` elements are placed.\n\n  * `label` {} - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label`\nattribute.\n\nAttributes:\n\n  * `label` {`string`} - The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.\n\n  * `name` {`string`} - The name of the radio group, submitted as a name/value pair with form data.\n\n  * `value` {`string`} - The current value of the radio group, submitted as a name/value pair with form data.\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`} - Ensures a child radio is checked before allowing the containing form to submit.\n\n  * `labelInline` {`boolean`} - Used to show radio in inline or not\n\n  * `disabled` {`boolean`} - Used to disabled or not\n\n  * `help-text` {`string`} - \n\n  * `error-message` {`string`} - \n\n  * `islabelborder` {`boolean`} - The radio's labelborder for whole gp.\n\nProperties:\n\n  * `styles` - \n\n  * `hasSlotController` - \n\n  * `customValidityMessage` {`string`} - \n\n  * `defaultSlot` {`HTMLSlotElement`} - \n\n  * `hasButtonGroup` {`boolean`} - \n\n  * `defaultValue` {`string`} - \n\n  * `label` {`string`} - The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.\n\n  * `name` {`string`} - The name of the radio group, submitted as a name/value pair with form data.\n\n  * `value` {`string`} - The current value of the radio group, submitted as a name/value pair with form data.\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`} - Ensures a child radio is checked before allowing the containing form to submit.\n\n  * `labelInline` {`boolean`} - Used to show radio in inline or not\n\n  * `disabled` {`boolean`} - Used to disabled or not\n\n  * `helpText` {`string`} - \n\n  * `errorMessage` {`string`} - \n\n  * `islabelborder` {`boolean`} - The radio's labelborder for whole gp.\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Events:\n\n  * `change` {} - Emitted when the radio group's selected value changes.\n\n  * `input` {} - Emitted when the radio group receives user input.\n\n  * `invalid` {} - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\nSlots:\n\n  * ` ` {} - The default slot where `<nile-radio>` or `<nile-radio-button>` elements are placed.\n\n  * `label` {} - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label`\nattribute.\n\nAttributes:\n\n  * `label` {`string`} - The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.\n\n  * `name` {`string`} - The name of the radio group, submitted as a name/value pair with form data.\n\n  * `value` {`string`} - The current value of the radio group, submitted as a name/value pair with form data.\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`} - Ensures a child radio is checked before allowing the containing form to submit.\n\n  * `labelInline` {`boolean`} - Used to show radio in inline or not\n\n  * `disabled` {`boolean`} - Used to disabled or not\n\n  * `help-text` {`string`} - \n\n  * `error-message` {`string`} - \n\n  * `islabelborder` {`boolean`} - The radio's labelborder for whole gp.\n\n  * `allowUncheckGroup` {`boolean`} - Allow the radio to be unchecked.\n\nProperties:\n\n  * `styles` - \n\n  * `hasSlotController` - \n\n  * `customValidityMessage` {`string`} - \n\n  * `defaultSlot` {`HTMLSlotElement`} - \n\n  * `hasButtonGroup` {`boolean`} - \n\n  * `defaultValue` {`string`} - \n\n  * `label` {`string`} - The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.\n\n  * `name` {`string`} - The name of the radio group, submitted as a name/value pair with form data.\n\n  * `value` {`string`} - The current value of the radio group, submitted as a name/value pair with form data.\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`} - Ensures a child radio is checked before allowing the containing form to submit.\n\n  * `labelInline` {`boolean`} - Used to show radio in inline or not\n\n  * `disabled` {`boolean`} - Used to disabled or not\n\n  * `helpText` {`string`} - \n\n  * `errorMessage` {`string`} - \n\n  * `islabelborder` {`boolean`} - The radio's labelborder for whole gp.\n\n  * `allowUncheckGroup` {`boolean`} - Allow the radio to be unchecked.\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "label",
@@ -2913,6 +2913,11 @@
           "description": "`islabelborder` {`boolean`} - The radio's labelborder for whole gp.\n\nProperty: islabelborder\n\nDefault: false",
           "valueSet": "v"
         },
+        {
+          "name": "allowUncheckGroup",
+          "description": "`allowUncheckGroup` {`boolean`} - Allow the radio to be unchecked.\n\nProperty: allowUncheckGroup\n\nDefault: false",
+          "valueSet": "v"
+        },
         {
           "name": "onchange",
           "description": "`change` {} - Emitted when the radio group's selected value changes."
@@ -2929,7 +2934,7 @@
     },
     {
       "name": "nile-radio",
-      "description": "Nile icon component.\n\nEvents:\n\n  * `blur` {} - Emitted when the control loses focus.\n\n  * `focus` {} - Emitted when the control gains focus.\n\nSlots:\n\n  * ` ` {} - The radio's label.\n\nAttributes:\n\n  * `checked` {`boolean`} - \n\n  * `value` {`string`} - The radio's value. When selected, the radio group will receive this value.\n\n  * `size` {`\"medium\" | \"small\" | \"large\"`} - The radio's size.\n\n  * `disabled` {`boolean`} - Disables the radio.\n\n  * `islabelborder` {`boolean`} - The radio's labelborder.\n\nProperties:\n\n  * `styles` - \n\n  * `checked` {`boolean`} - \n\n  * `hasFocus` {`boolean`} - \n\n  * `value` {`string`} - The radio's value. When selected, the radio group will receive this value.\n\n  * `size` {`\"medium\" | \"small\" | \"large\"`} - The radio's size.\n\n  * `disabled` {`boolean`} - Disables the radio.\n\n  * `islabelborder` {`boolean`} - The radio's labelborder.\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile icon component.\n\nEvents:\n\n  * `blur` {} - Emitted when the control loses focus.\n\n  * `focus` {} - Emitted when the control gains focus.\n\nSlots:\n\n  * ` ` {} - The radio's label.\n\nAttributes:\n\n  * `checked` {`boolean`} - \n\n  * `value` {`string`} - The radio's value. When selected, the radio group will receive this value.\n\n  * `size` {`\"medium\" | \"small\" | \"large\"`} - The radio's size.\n\n  * `disabled` {`boolean`} - Disables the radio.\n\n  * `islabelborder` {`boolean`} - The radio's labelborder.\n\n  * `allowUncheck` {`boolean`} - \n\nProperties:\n\n  * `styles` - \n\n  * `checked` {`boolean`} - \n\n  * `hasFocus` {`boolean`} - \n\n  * `value` {`string`} - The radio's value. When selected, the radio group will receive this value.\n\n  * `size` {`\"medium\" | \"small\" | \"large\"`} - The radio's size.\n\n  * `disabled` {`boolean`} - Disables the radio.\n\n  * `islabelborder` {`boolean`} - The radio's labelborder.\n\n  * `allowUncheck` {`boolean`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "checked",
@@ -2965,6 +2970,11 @@
           "description": "`islabelborder` {`boolean`} - The radio's labelborder.\n\nProperty: islabelborder\n\nDefault: false",
           "valueSet": "v"
         },
+        {
+          "name": "allowUncheck",
+          "description": "`allowUncheck` {`boolean`} - \n\nProperty: allowUncheck\n\nDefault: false",
+          "valueSet": "v"
+        },
         {
           "name": "onblur",
           "description": "`blur` {} - Emitted when the control loses focus."
@@ -3013,7 +3023,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` {`\"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`} - ",
+      "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  * `autoFocusSearch` {`boolean`} - To auto focus the search input when the select is opened\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  * `options` {`NileOption[]`} - \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  * `autoFocusSearch` {`boolean`} - To auto focus the search input when the select is opened\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",
@@ -3164,6 +3174,11 @@
           "description": "`enableGroupHeader` {`boolean`} - To enable the group header in the select\n\nProperty: enableGroupHeader\n\nDefault: false",
           "valueSet": "v"
         },
+        {
+          "name": "autoFocusSearch",
+          "description": "`autoFocusSearch` {`boolean`} - To auto focus the search input when the select is opened\n\nProperty: autoFocusSearch\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: "
@@ -4356,7 +4371,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` {`\"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`} - ",
+      "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`} - ",
       "attributes": [
         {
           "name": "data",
@@ -4559,22 +4574,6 @@
         {
           "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)."
         }
       ]
     }