@aquera/nile-elements 0.1.49-beta-1.4 → 0.1.50-beta-1.0

package/package.json

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

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

@@ -33,6 +33,7 @@ import type { CSSResultGroup, PropertyValues } 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';
+import type { RenderItemConfig } from '../nile-virtual-select/types.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import '../nile-virtual-select/nile-virtual-select';
@@ -236,7 +237,8 @@ export class NileSelect extends NileElement implements NileFormControl{
 
   @property({ type: String }) noResultsMessage: string = 'No results found';
 
-  @property({ attribute: false }) renderItemFunction: (item: any) => string = (item: any) => item?.label || item?.name || item;
+  /** Enhanced configuration for rendering items with support for display text, value, and search text */
+  @property({ attribute: false }) renderItemConfig?: RenderItemConfig;
 
   @property({ type: Array }) data: any = [];
 

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

@@ -42,7 +42,7 @@ export class VirtualScrollHelper {
           .required=${component.required}
           .showNoResults=${component.showNoResults}
           .noResultsMessage=${component.noResultsMessage}
-          .renderItemFunction=${component.renderItemFunction}
+          .renderItemConfig=${component.renderItemConfig}
           .blockValueChange=${component.blockValueChange}
           .noWidthSync=${component.noWidthSync}
           .maxOptionsVisible=${component.maxOptionsVisible}

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

@@ -24,7 +24,9 @@ describe('<nile-virtual-select>', () => {
         { value: 'option-3', label: 'Option 3' },
         { value: 'option-4', label: 'Option 4' }
       ];
-      el.renderItemFunction = (item: any) => item.label;
+      el.renderItemConfig = {
+        getDisplayText: (item: any) => item.label
+      };
 
       // Set multiple values
       el.value = ['option-1', 'option-2', 'option-3'];
@@ -50,7 +52,9 @@ describe('<nile-virtual-select>', () => {
         { value: 'option-2', label: 'Option 2' },
         { value: 'option-3', label: 'Option 3' }
       ];
-      el.renderItemFunction = (item: any) => item.label;
+      el.renderItemConfig = {
+        getDisplayText: (item: any) => item.label
+      };
 
       // Set values within limit
       el.value = ['option-1', 'option-2'];
@@ -76,7 +80,9 @@ describe('<nile-virtual-select>', () => {
         { value: 'option-3', label: 'Option 3' },
         { value: 'option-4', label: 'Option 4' }
       ];
-      el.renderItemFunction = (item: any) => item.label;
+      el.renderItemConfig = {
+        getDisplayText: (item: any) => item.label
+      };
 
       // Set multiple values
       el.value = ['option-1', 'option-2', 'option-3', 'option-4'];
@@ -107,7 +113,9 @@ describe('<nile-virtual-select>', () => {
         { value: 'option-2', label: 'Option 2' },
         { value: 'option-3', label: 'Option 3' }
       ];
-      el.renderItemFunction = (item: any) => item.label;
+      el.renderItemConfig = {
+        getDisplayText: (item: any) => item.label
+      };
 
       // Open the select to render options
       el.open = true;
@@ -139,7 +147,9 @@ describe('<nile-virtual-select>', () => {
         { value: 'option-1', label: 'Option 1' },
         { value: 'option-2', label: 'Option 2' }
       ];
-      el.renderItemFunction = (item: any) => item.label;
+      el.renderItemConfig = {
+        getDisplayText: (item: any) => item.label
+      };
 
       // Open the select to render options
       el.open = true;
@@ -171,7 +181,9 @@ describe('<nile-virtual-select>', () => {
         { value: 'option-2', label: 'Option 2' },
         { value: 'option-3', label: 'Option 3' }
       ];
-      el.renderItemFunction = (item: any) => item.label;
+      el.renderItemConfig = {
+        getDisplayText: (item: any) => item.label
+      };
 
       // Open the select to render options
       el.open = true;
@@ -207,7 +219,9 @@ describe('<nile-virtual-select>', () => {
         { value: 'option-2', label: 'Option 2' },
         { value: 'option-3', label: 'Option 3' }
       ];
-      el.renderItemFunction = (item: any) => item.label;
+      el.renderItemConfig = {
+        getDisplayText: (item: any) => item.label
+      };
 
       // Set a selected value
       el.value = 'option-2';
@@ -235,7 +249,9 @@ describe('<nile-virtual-select>', () => {
         { value: 'option-2', label: 'Option 2' },
         { value: 'option-3', label: 'Option 3' }
       ];
-      el.renderItemFunction = (item: any) => item.label;
+      el.renderItemConfig = {
+        getDisplayText: (item: any) => item.label
+      };
 
       // Set multiple selected values
       el.value = ['option-1', 'option-3'];
@@ -266,7 +282,9 @@ describe('<nile-virtual-select>', () => {
         { value: 'option-2', label: 'Option 2' },
         { value: 'option-3', label: 'Option 3' }
       ];
-      el.renderItemFunction = (item: any) => item.label;
+      el.renderItemConfig = {
+        getDisplayText: (item: any) => item.label
+      };
 
       // Set a selected value
       el.value = 'option-2';
@@ -289,7 +307,9 @@ describe('<nile-virtual-select>', () => {
       `);
 
       // Set renderItemFunction first
-      el.renderItemFunction = (item: any) => item.label;
+      el.renderItemConfig = {
+        getDisplayText: (item: any) => item.label
+      };
 
       // Set value before data
       el.value = ['option-1', 'option-3'];
@@ -326,7 +346,9 @@ describe('<nile-virtual-select>', () => {
       `);
 
       // Set up test data
-      el.renderItemFunction = (item: any) => item.label;
+      el.renderItemConfig = {
+        getDisplayText: (item: any) => item.label
+      };
       el.data = [
         { value: 'option-1', label: 'Option 1' },
         { value: 'option-2', label: 'Option 2' },
@@ -357,7 +379,9 @@ describe('<nile-virtual-select>', () => {
       `);
 
       // Set up test data
-      el.renderItemFunction = (item: any) => item.label;
+      el.renderItemConfig = {
+        getDisplayText: (item: any) => item.label
+      };
       el.data = [
         { value: 'option-1', label: 'Option 1' },
         { value: 'option-2', label: 'Option 2' },

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

@@ -35,7 +35,7 @@ import type NileOption from '../nile-option/nile-option';
 import type NilePopup from '../nile-popup/nile-popup';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
-import type { VirtualOption, NileRemoveEvent } from './types.js';
+import type { VirtualOption, NileRemoveEvent, RenderItemConfig } from './types.js';
 import { VirtualSelectSelectionManager } from './selection-manager.js';
 import { VirtualSelectSearchManager } from './search-manager.js';
 import { VirtualSelectRenderer } from './renderer.js';
@@ -222,8 +222,8 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
   /** Show selected options only */
   @property({ type: Boolean }) showSelected = false;
 
-  /** Function to render item value from data object */
-  @property({ attribute:false}) renderItemFunction: (item:any)=>string = (item:any)=>item?.label || item?.name || item;
+  /** Enhanced configuration for rendering items with support for display text, value, and search text */
+  @property({ attribute:false}) renderItemConfig?: RenderItemConfig;
 
   /** Block value change events */
   @property({ type: Boolean, reflect: true }) blockValueChange = false;
@@ -267,11 +267,41 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
   }
 
   private initializeComponent(): void {
-    this.renderItemFunction = (item:any) => item?.label || item?.name || item;
     this.open = false;
     this.emit('nile-init');
   }
 
+  /**
+   * Get display text for an item using renderItemConfig
+   */
+  private getDisplayText(item: any): string {
+    if (this.renderItemConfig?.getDisplayText) {
+      return this.renderItemConfig.getDisplayText(item);
+    }
+    // Fallback to basic display
+    return item?.label || item?.name || item?.toString() || '';
+  }
+
+  /**
+   * Get value for an item using renderItemConfig or fallback to item.value
+   */
+  private getItemValue(item: any): string {
+    if (this.renderItemConfig?.getValue) {
+      return this.renderItemConfig.getValue(item);
+    }
+    return item?.value || item;
+  }
+
+  /**
+   * Get search text for an item using renderItemConfig or fallback to display text
+   */
+  private getSearchText(item: any): string {
+    if (this.renderItemConfig?.getSearchText) {
+      return this.renderItemConfig.getSearchText(item);
+    }
+    return this.getDisplayText(item);
+  }
+
   private setupEventListeners(): void {
     this.handleDocumentFocusIn = this.handleDocumentFocusIn.bind(this);
     this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
@@ -560,7 +590,8 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     this.selectedOptions = VirtualSelectSelectionManager.createVirtualOptionsFromValues(
       this.value, 
       itemsToSearch, 
-      this.renderItemFunction
+      this.getDisplayText.bind(this),
+      this.renderItemConfig?.getValue
     );
 
     if (this.multiple) {
@@ -604,7 +635,8 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
       searchValue,
       this.originalOptionItems,
       this.data,
-      this.renderItemFunction
+      this.getDisplayText.bind(this),
+      this.renderItemConfig?.getSearchText
     );
 
     this.data = result.filteredItems;
@@ -637,8 +669,8 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     this.requestUpdate();
   }
 
-  @watch('renderItemFunction', { waitUntilFirstUpdate: true })
-  handleRenderItemFunctionChange(): void {
+  @watch('renderItemConfig', { waitUntilFirstUpdate: true })
+  handleRenderItemConfigChange(): void {
     if (this.value && this.data.length > 0) {
       this.selectionChanged();
       this.requestUpdate();
@@ -1133,9 +1165,11 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     return VirtualSelectRenderer.getVirtualizedContent(
       this.data,
       this.searchEnabled,
-      this.renderItemFunction,
+      this.getDisplayText.bind(this),
       this.value,
-      this.multiple
+      this.multiple,
+      this.renderItemConfig?.getDisplayText,
+      this.renderItemConfig?.getValue
     );
   }
 

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

@@ -15,7 +15,9 @@ export class VirtualSelectRenderer {
     searchEnabled: boolean, 
     renderItemFunction: (item: any) => string,
     value: string | string[],
-    multiple: boolean
+    multiple: boolean,
+    getDisplayText?: (item: any) => string,
+    getItemValue?: (item: any) => string
   ): TemplateResult {
     return html`
       <div class="select__options ${
@@ -27,7 +29,7 @@ export class VirtualSelectRenderer {
           ${virtualize({
             items: data,
             renderItem: (item: any): TemplateResult =>
-              VirtualSelectRenderer.getItemRenderFunction(item, renderItemFunction, value, multiple),
+              VirtualSelectRenderer.getItemRenderFunction(item, renderItemFunction, value, multiple, getDisplayText, getItemValue),
             scroller: true,
           })}
         </div>
@@ -38,10 +40,15 @@ export class VirtualSelectRenderer {
     item: any, 
     renderItemFunction: (item: any) => string, 
     value: string | string[], 
-    multiple: boolean
+    multiple: boolean,
+    getDisplayText?: (item: any) => string,
+    getItemValue?: (item: any) => string
   ): TemplateResult {
-    const optionValue = item.value;
-    const displayText = renderItemFunction(item);
+    const displayTextFn = getDisplayText || renderItemFunction;
+    const valueFn = getItemValue || ((item: any) => item?.value || item);
+    
+    const optionValue = valueFn(item);
+    const displayText = displayTextFn(item);
     const isDisabled = item.disabled || false;
     
     let isSelected = false;
@@ -57,6 +64,7 @@ export class VirtualSelectRenderer {
         .selected=${isSelected} 
         .multiple=${multiple}
         .disabled=${isDisabled}
+        .showCheckbox=${multiple}
       >
         ${unsafeHTML(displayText)}
       </nile-option>

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

@@ -10,7 +10,8 @@ export class VirtualSelectSearchManager {
     searchValue: string,
     originalOptionItems: any[],
     data: any[], 
-    renderItemFunction: (item: any) => string
+    renderItemFunction: (item: any) => string,
+    getSearchText?: (item: any) => string
   ): { filteredItems: any[], showNoResults: boolean } {
     if (originalOptionItems.length === 0 && data.length > 0) {
       return {
@@ -34,8 +35,9 @@ export class VirtualSelectSearchManager {
     }
 
     const lowerCaseSearchValue = searchValue.toLowerCase();
+    const searchTextFn = getSearchText || renderItemFunction;
     const filteredItems = originalOptionItems.filter((item: any) => {
-      const itemValue = renderItemFunction(item);
+      const itemValue = searchTextFn(item);
       const lowerCaseItemValue = itemValue.toLowerCase();
       return lowerCaseItemValue.includes(lowerCaseSearchValue);
     });

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

@@ -8,7 +8,12 @@
 import type { VirtualOption } from './types.js';
 
 export class VirtualSelectSelectionManager {
-  static createVirtualOptionsFromValues(value: string | string[], data: any[], renderItemFunction: (item: any) => string): VirtualOption[] {
+  static createVirtualOptionsFromValues(
+    value: string | string[], 
+    data: any[], 
+    getDisplayText: (item: any) => string,
+    getItemValue?: (item: any) => string
+  ): VirtualOption[] {
     if (!value || (Array.isArray(value) && value.length === 0)) {
       return [];
     }
@@ -16,11 +21,17 @@ export class VirtualSelectSelectionManager {
     const values = Array.isArray(value) ? value : [value];
     
     return values.map(valueItem => {
-      const item = data.find((item: any) => 
-        item.value === valueItem || renderItemFunction(item) === valueItem
-      );
+      // Use enhanced functions if available, otherwise fallback to basic logic
+      const displayTextFn = getDisplayText;
+      const valueFn = getItemValue || ((item: any) => item?.value || item);
       
-      const displayText = item ? renderItemFunction(item) : valueItem;
+      const item = data.find((item: any) => {
+        const itemValue = valueFn(item);
+        const itemDisplayText = displayTextFn(item);
+        return itemValue === valueItem || itemDisplayText === valueItem;
+      });
+      
+      const displayText = item ? displayTextFn(item) : valueItem;
       
       return {
         value: valueItem,

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

@@ -14,6 +14,12 @@ export interface VirtualOption {
   getOptionPrefix: () => string;
 }
 
+export interface RenderItemConfig {
+  getDisplayText: (item: any) => string;
+  getValue?: (item: any) => string;
+  getSearchText?: (item: any) => string;
+}
+
 export interface VirtualSelectProperties {
   name: string;
   data: any[];
@@ -42,7 +48,7 @@ export interface VirtualSelectProperties {
   required: boolean;
   showNoResults: boolean;
   noResultsMessage: string;
-  renderItemFunction: (item: any) => string;
+  renderItemConfig?: RenderItemConfig;
   blockValueChange: boolean;
   noWidthSync: boolean;
 } 

package/vscode-html-custom-data.json

@@ -2843,7 +2843,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` {`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  * `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` {`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  * `renderItemFunction` - \n\n  * `data` - \n\n  * `enableVirtualScroll` {`boolean`} - \n\n  * `name` {`string`} - The name of the select, submitted as a name/value pair with form data.\n\n  * `value` {`string | string[]`} - The current value of the select, 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\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` {`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  * `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` {`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  * `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",
@@ -4060,7 +4060,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  * `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  * `renderItemFunction` - Function to render item value from data object\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  * `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",