@aquera/nile-elements 0.1.73-beta-1.9 → 0.1.74-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.73-beta-1.9",
+  "version": "0.1.74-beta-1.0",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-filter-chip/nile-filter-chip.css.ts

@@ -131,6 +131,16 @@ export const styles = css`
   margin-right: 12px;  
 }
 
+.badge{
+  display: inline-flex;
+    align-items: center;
+    height: 20px; 
+}
+
+nile-badge::part(content) {
+ line-height: 20px;
+}
+
 `;
 
 export default [styles];

package/src/nile-filter-chip/nile-filter-chip.ts

@@ -88,7 +88,7 @@ export class NileFilterChip extends NileElement {
         ${this.viewMoreCount
           ? html`
           <span class="badge-wrapper">
-              <nile-badge variant="primary" pilltype="pill-color">
+              <nile-badge class="badge" part="badge" variant="primary" pilltype="pill-color" exportparts="content, base">
                 +${this.viewMoreCount}
               </nile-badge>
           </span>

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

@@ -118,7 +118,8 @@ export class NileSelect extends NileElement implements NileFormControl{
   private typeToSelectString = '';
   private typeToSelectTimeout: number;
   private scrollTimeout: number | undefined;
-  private scrolling = false
+  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);
@@ -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/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: "