@aquera/nile-elements 1.6.2 → 1.6.3

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

@@ -69,6 +69,7 @@ type NileRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
  * @slot clear-icon - An icon to use in lieu of the default clear icon.
  * @slot expand-icon - The icon to show when the control is expanded and collapsed. Rotates on open and close.
  * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
+ * @slot pre-footer - Content to display at the bottom of the dropdown listbox. Useful for action buttons like "Create New". In multi-select mode, appears above the "Show Selected" / "Clear All" bar.
  *
  * @event nile-change - Emitted when the control's value changes.
  * @event nile-clear - Emitted when the control's value is cleared.
@@ -101,6 +102,8 @@ type NileRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
  * @csspart tag__remove-button__base - The tag's remove button base part.
  * @csspart clear-button - The clear button.
  * @csspart expand-icon - The container that wraps the expand icon.
+ * @csspart custom-footer - The container that wraps the custom footer slot content.
+ * @csspart footer-area - The sticky wrapper around the custom footer and the built-in multi-select footer.
  */
 
 @customElement('nile-select')
@@ -116,7 +119,8 @@ export class NileSelect extends NileElement implements NileFormControl{
   private readonly hasSlotController = new HasSlotController(
     this,
     'help-text',
-    'label'
+    'label',
+    'pre-footer'
   );
   private typeToSelectString = '';
   private typeToSelectTimeout: number;
@@ -522,6 +526,10 @@ export class NileSelect extends NileElement implements NileFormControl{
     event.preventDefault();
   }
 
+  private handlePreFooterClick(): void {
+    this.hide();
+  }
+
   /**
    * Toggles the display of selected options in the dropdown
    * @param event - the event object
@@ -1680,29 +1688,41 @@ export class NileSelect extends NileElement implements NileFormControl{
                 <slot></slot>
               </div>
 
-              ${this.multiple
-                ? html` <div
-                    part="footer"
-                    class="select__footer"
-                    @click="${this.handleFooterClick}"
-                  >
-                    <span
-                      @click="${this.toggleShowSelected}"
-                      style="cursor: pointer;"
-                    >
-                      <nile-checkbox
-                        ?disabled="${this.selectedOptions.length === 0}"
-                        ?checked="${this.showSelected}"
-                      >
-                        &nbsp; Show Selected</nile-checkbox
-                      >
-                    </span>
-                    ${this.selectedOptions.length !== 0
-                      ? html` <span
-                          class="select__clear"
-                          @click="${this.unSlectAll}"
-                          >Clear All</span
-                        >`
+              ${this.hasSlotController.test('pre-footer') || this.multiple
+                ? html`<div part="footer-area" class="select__pre-footer-area">
+                    ${this.hasSlotController.test('pre-footer')
+                      ? html`
+                      <div part="pre-footer" @click=${this.handlePreFooterClick}>  
+                        <slot
+                          name="pre-footer"
+                          class="select__custom-footer"
+                        ></slot> </div>`
+                      : ''}
+                    ${this.multiple
+                      ? html`<div
+                          part="footer"
+                          class="select__footer"
+                          @click="${this.handleFooterClick}"
+                        >
+                          <span
+                            @click="${this.toggleShowSelected}"
+                            style="cursor: pointer;"
+                          >
+                            <nile-checkbox
+                              ?disabled="${this.selectedOptions.length === 0}"
+                              ?checked="${this.showSelected}"
+                            >
+                              &nbsp; Show Selected</nile-checkbox
+                            >
+                          </span>
+                          ${this.selectedOptions.length !== 0
+                            ? html`<span
+                                class="select__clear"
+                                @click="${this.unSlectAll}"
+                                >Clear All</span
+                              >`
+                            : ``}
+                        </div>`
                       : ``}
                   </div>`
                 : ``}

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

@@ -248,10 +248,42 @@ export class PortalContentUtils {
   }
 
   static addFooterSection(listbox: HTMLElement, component: any): void {
-    if (!component.multiple) return;
+    const hasCustomFooter = component.querySelectorAll('[slot="pre-footer"]').length > 0;
+    const hasBuiltInFooter = component.multiple;
 
-    const footerDiv = this.createFooter(component);
-    listbox.appendChild(footerDiv);
+    if (!hasCustomFooter && !hasBuiltInFooter) return;
+
+    const footerArea = document.createElement('div');
+    footerArea.setAttribute('part', 'footer-area');
+    footerArea.className = 'select__footer-area';
+
+    if (hasCustomFooter) {
+      this.addCustomFooter(footerArea, component);
+    }
+
+    if (hasBuiltInFooter) {
+      const builtInFooter = this.createFooter(component);
+      footerArea.appendChild(builtInFooter);
+    }
+
+    listbox.appendChild(footerArea);
+  }
+
+  static addCustomFooter(container: HTMLElement, component: any): void {
+    const footerContent = Array.from(component.querySelectorAll('[slot="pre-footer"]'));
+    if (footerContent.length === 0) return;
+
+    const customFooter = document.createElement('div');
+    customFooter.className = 'select__custom-footer';
+    customFooter.setAttribute('part', 'custom-footer');
+
+    footerContent.forEach((el: Element) => {
+      customFooter.appendChild(el.cloneNode(true));
+    });
+
+    customFooter.addEventListener('click', () => component.hide());
+
+    container.appendChild(customFooter);
   }
 
   static createFooter(component: any): HTMLElement {
@@ -430,6 +462,17 @@ export class PortalEventUtils {
       this.setupShowSelectedToggle(footer, component);
       this.setupClearAllHandler(footer, component);
     }
+
+    this.setupCustomFooterListeners(clonedListbox, component);
+  }
+
+  static setupCustomFooterListeners(clonedListbox: HTMLElement, component: any): void {
+    const customFooter = clonedListbox.querySelector('.select__custom-footer') as HTMLElement;
+    if (!customFooter) return;
+
+    customFooter.addEventListener('click', (event) => {
+      event.stopPropagation();
+    });
   }
 
   static setupFooterClickHandlers(footer: HTMLElement): void {

package/vscode-html-custom-data.json

@@ -746,9 +746,97 @@
         }
       ]
     },
+    {
+      "name": "nile-checkbox-group",
+      "description": "Events:\n\n  * `change` {} - Emitted when the checkbox group's selected values change.\n\n  * `input` {} - Emitted when the checkbox group receives user input.\n\nSlots:\n\n  * ` ` {} - The default slot where `<nile-checkbox>` elements are placed (slotted mode).\n\n  * `label` {} - The checkbox group's label. Required for proper accessibility. Alternatively, use the `label` attribute.\n\nAttributes:\n\n  * `label` {`string`} - The checkbox group's label. Required for proper accessibility.\n\n  * `name` {`string`} - The name of the checkbox group, submitted as a name/value pair with form data.\n\n  * `value` {`string[]`} - The current selected values, as an array of checkbox value strings.\n\n  * `for` {`string`} - Group name for property-based association. When set, the group discovers\ncheckboxes anywhere in the DOM that have a matching `group` attribute\ninstead of relying on slotted children.\n\n  * `form` {`string`} - Associates the group with a `<form>` element by its `id`. The form must\nbe in the same document or shadow root.\n\n  * `required` {`boolean`} - At least one checkbox must be checked before the form can submit.\n\n  * `orientation` {`\"vertical\" | \"horizontal\"`} - Layout direction of the checkboxes.\n\n  * `labelInline` {`boolean`} - Display checkboxes in an inline (horizontal) layout. Alias for orientation=\"horizontal\".\n\n  * `disabled` {`boolean`} - Disables all associated checkboxes.\n\n  * `helpText` {`string`} - \n\n  * `errorMessage` {`string`} - \n\n  * `max` {`number | undefined`} - Maximum number of checkboxes that can be checked. Unchecked boxes are disabled when the limit is reached.\n\n  * `min` {`number | undefined`} - Minimum selections required for validation.\n\n  * `bordered` {`boolean`} - Shows a visible border around the fieldset wrapper.\n\n  * `legend` {`string`} - Legend text displayed at the top of the fieldset when bordered is enabled.\n\nProperties:\n\n  * `styles` - \n\n  * `hasSlotController` - \n\n  * `boundDocumentListener` - \n\n  * `defaultSlot` {`HTMLSlotElement`} - \n\n  * `defaultValue` {`string[]`} - \n\n  * `label` {`string`} - The checkbox group's label. Required for proper accessibility.\n\n  * `name` {`string`} - The name of the checkbox group, submitted as a name/value pair with form data.\n\n  * `value` {`string[]`} - The current selected values, as an array of checkbox value strings.\n\n  * `for` {`string`} - Group name for property-based association. When set, the group discovers\ncheckboxes anywhere in the DOM that have a matching `group` attribute\ninstead of relying on slotted children.\n\n  * `form` {`string`} - Associates the group with a `<form>` element by its `id`. The form must\nbe in the same document or shadow root.\n\n  * `required` {`boolean`} - At least one checkbox must be checked before the form can submit.\n\n  * `orientation` {`\"vertical\" | \"horizontal\"`} - Layout direction of the checkboxes.\n\n  * `labelInline` {`boolean`} - Display checkboxes in an inline (horizontal) layout. Alias for orientation=\"horizontal\".\n\n  * `disabled` {`boolean`} - Disables all associated checkboxes.\n\n  * `helpText` {`string`} - \n\n  * `errorMessage` {`string`} - \n\n  * `max` {`number | undefined`} - Maximum number of checkboxes that can be checked. Unchecked boxes are disabled when the limit is reached.\n\n  * `min` {`number | undefined`} - Minimum selections required for validation.\n\n  * `bordered` {`boolean`} - Shows a visible border around the fieldset wrapper.\n\n  * `legend` {`string`} - Legend text displayed at the top of the fieldset when bordered is enabled.\n\n  * `isHorizontal` {`boolean`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "attributes": [
+        {
+          "name": "label",
+          "description": "`label` {`string`} - The checkbox group's label. Required for proper accessibility.\n\nProperty: label\n\nDefault: "
+        },
+        {
+          "name": "name",
+          "description": "`name` {`string`} - The name of the checkbox group, submitted as a name/value pair with form data.\n\nProperty: name\n\nDefault: "
+        },
+        {
+          "name": "value",
+          "description": "`value` {`string[]`} - The current selected values, as an array of checkbox value strings.\n\nProperty: value\n\nDefault: "
+        },
+        {
+          "name": "for",
+          "description": "`for` {`string`} - Group name for property-based association. When set, the group discovers\ncheckboxes anywhere in the DOM that have a matching `group` attribute\ninstead of relying on slotted children.\n\nProperty: for\n\nDefault: "
+        },
+        {
+          "name": "form",
+          "description": "`form` {`string`} - Associates the group with a `<form>` element by its `id`. The form must\nbe in the same document or shadow root.\n\nProperty: form\n\nDefault: "
+        },
+        {
+          "name": "required",
+          "description": "`required` {`boolean`} - At least one checkbox must be checked before the form can submit.\n\nProperty: required\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "orientation",
+          "description": "`orientation` {`\"vertical\" | \"horizontal\"`} - Layout direction of the checkboxes.\n\nProperty: orientation\n\nDefault: vertical",
+          "values": [
+            {
+              "name": "vertical"
+            },
+            {
+              "name": "horizontal"
+            }
+          ]
+        },
+        {
+          "name": "labelInline",
+          "description": "`labelInline` {`boolean`} - Display checkboxes in an inline (horizontal) layout. Alias for orientation=\"horizontal\".\n\nProperty: labelInline\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "disabled",
+          "description": "`disabled` {`boolean`} - Disables all associated checkboxes.\n\nProperty: disabled\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "helpText",
+          "description": "`helpText` {`string`} - \n\nProperty: helpText\n\nDefault: "
+        },
+        {
+          "name": "errorMessage",
+          "description": "`errorMessage` {`string`} - \n\nProperty: errorMessage\n\nDefault: "
+        },
+        {
+          "name": "max",
+          "description": "`max` {`number | undefined`} - Maximum number of checkboxes that can be checked. Unchecked boxes are disabled when the limit is reached.\n\nProperty: max",
+          "values": []
+        },
+        {
+          "name": "min",
+          "description": "`min` {`number | undefined`} - Minimum selections required for validation.\n\nProperty: min",
+          "values": []
+        },
+        {
+          "name": "bordered",
+          "description": "`bordered` {`boolean`} - Shows a visible border around the fieldset wrapper.\n\nProperty: bordered\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "legend",
+          "description": "`legend` {`string`} - Legend text displayed at the top of the fieldset when bordered is enabled.\n\nProperty: legend\n\nDefault: "
+        },
+        {
+          "name": "onchange",
+          "description": "`change` {} - Emitted when the checkbox group's selected values change."
+        },
+        {
+          "name": "oninput",
+          "description": "`input` {} - Emitted when the checkbox group receives user input."
+        }
+      ]
+    },
     {
       "name": "nile-checkbox",
-      "description": "Nile icon component.\n\nAttributes:\n\n  * `title` {`string`} - \n\n  * `name` {`string`} - The name of the checkbox, submitted as a name/value pair with form data.\n\n  * `value` {`boolean`} - The current value of the checkbox, submitted as a name/value pair with form data.\n\n  * `size` {`\"small\" | \"medium\" | \"large\"`} - The checkbox's size.\n\n  * `disabled` {`boolean`} - Disables the checkbox.\n\n  * `checked` {`boolean`} - Draws the checkbox in a checked state.\n\n  * `label` {`string`} - Label, declared this property for backward compatibility of old component\n\n  * `indeterminate` {`boolean`} - Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.\n\n  * `help-text` {`string`} - \n\n  * `error-message` {`string`} - \n\n  * `showHelpText` {`boolean`} - \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`} - Makes the checkbox a required field.\n\nProperties:\n\n  * `styles` - \n\n  * `input` {`HTMLInputElement`} - \n\n  * `hasFocus` {`boolean`} - \n\n  * `title` {`string`} - \n\n  * `name` {`string`} - The name of the checkbox, submitted as a name/value pair with form data.\n\n  * `value` {`boolean`} - The current value of the checkbox, submitted as a name/value pair with form data.\n\n  * `size` {`\"small\" | \"medium\" | \"large\"`} - The checkbox's size.\n\n  * `disabled` {`boolean`} - Disables the checkbox.\n\n  * `checked` {`boolean`} - Draws the checkbox in a checked state.\n\n  * `label` {`string`} - Label, declared this property for backward compatibility of old component\n\n  * `indeterminate` {`boolean`} - Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.\n\n  * `defaultChecked` {`boolean`} - The default value of the form control. Primarily used for resetting the form control.\n\n  * `helpText` {`string`} - \n\n  * `errorMessage` {`string`} - \n\n  * `showHelpText` {`boolean`} - \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`} - Makes the checkbox a required field.\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile icon component.\n\nAttributes:\n\n  * `title` {`string`} - \n\n  * `name` {`string`} - The name of the checkbox, submitted as a name/value pair with form data.\n\n  * `value` {`boolean`} - The current value of the checkbox, submitted as a name/value pair with form data.\n\n  * `size` {`\"small\" | \"medium\" | \"large\"`} - The checkbox's size.\n\n  * `disabled` {`boolean`} - Disables the checkbox.\n\n  * `checked` {`boolean`} - Draws the checkbox in a checked state.\n\n  * `label` {`string`} - Label, declared this property for backward compatibility of old component\n\n  * `indeterminate` {`boolean`} - Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.\n\n  * `help-text` {`string`} - \n\n  * `error-message` {`string`} - \n\n  * `showHelpText` {`boolean`} - \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  * `group` {`string`} - Associates this checkbox with a nile-checkbox-group via a shared group name.\n\n  * `required` {`boolean`} - Makes the checkbox a required field.\n\nProperties:\n\n  * `styles` - \n\n  * `input` {`HTMLInputElement`} - \n\n  * `hasFocus` {`boolean`} - \n\n  * `title` {`string`} - \n\n  * `name` {`string`} - The name of the checkbox, submitted as a name/value pair with form data.\n\n  * `value` {`boolean`} - The current value of the checkbox, submitted as a name/value pair with form data.\n\n  * `size` {`\"small\" | \"medium\" | \"large\"`} - The checkbox's size.\n\n  * `disabled` {`boolean`} - Disables the checkbox.\n\n  * `checked` {`boolean`} - Draws the checkbox in a checked state.\n\n  * `label` {`string`} - Label, declared this property for backward compatibility of old component\n\n  * `indeterminate` {`boolean`} - Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.\n\n  * `defaultChecked` {`boolean`} - The default value of the form control. Primarily used for resetting the form control.\n\n  * `helpText` {`string`} - \n\n  * `errorMessage` {`string`} - \n\n  * `showHelpText` {`boolean`} - \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  * `group` {`string`} - Associates this checkbox with a nile-checkbox-group via a shared group name.\n\n  * `required` {`boolean`} - Makes the checkbox a required field.\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "title",
@@ -814,6 +902,10 @@
           "name": "form",
           "description": "`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\nProperty: form\n\nDefault: "
         },
+        {
+          "name": "group",
+          "description": "`group` {`string`} - Associates this checkbox with a nile-checkbox-group via a shared group name.\n\nProperty: group\n\nDefault: "
+        },
         {
           "name": "required",
           "description": "`required` {`boolean`} - Makes the checkbox a required field.\n\nProperty: required\n\nDefault: false",
@@ -1906,7 +1998,7 @@
     },
     {
       "name": "nile-floating-panel",
-      "description": "Nile floating-panel component.\n\nA popover that supports rich content (title, body, actions).\n\n**Wrapper mode** (default): first child element is the trigger.\n**For mode**: set `for=\"elementId\"` to attach to an external element.\n\nEvents:\n\n  * `nile-init` {} - Component initialized.\n\n  * `nile-destroy` {} - Component destroyed.\n\n  * `nile-show` {`CustomEvent<{ instance: Instance<Props>; target: ReferenceElement<Props>; }>`} - Panel opened.\n\n  * `nile-hide` {`CustomEvent<{ instance: Instance<Props>; target: ReferenceElement<Props>; }>`} - Panel closed.\n\n  * `nile-after-show` {`CustomEvent<{ instance: Instance<Props>; target: ReferenceElement<Props>; }>`} - Panel fully visible after animation.\n\n  * `nile-after-hide` {`CustomEvent<{ instance: Instance<Props>; target: ReferenceElement<Props>; }>`} - Panel fully hidden after animation.\n\n  * `nile-toggle` {`CustomEvent<{ open: boolean; instance: Instance<Props>; target: ReferenceElement<Props>; }>`} - Open/close transition (detail.open).\n\n  * `nile-visibility-change` {} - Hidden by scroll/tab change.\n\nAttributes:\n\n  * `placement` {`\"left\" | \"right\" | \"top\" | \"top-start\" | \"top-end\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left-start\" | \"left-end\" | \"auto\" | \"auto-start\" | \"auto-end\"`} - \n\n  * `trigger` {`string`} - \n\n  * `distance` {`number`} - \n\n  * `skidding` {`number`} - \n\n  * `arrow` {`\"none\" | \"default\" | \"round\"`} - \n\n  * `animation` {`string`} - \n\n  * `duration` {`string | number | [number, number]`} - \n\n  * `delay` {`number | [number, number]`} - \n\n  * `interactive` {`boolean`} - \n\n  * `interactiveBorder` {`number`} - \n\n  * `maxWidth` {`string | number`} - \n\n  * `zIndex` {`number`} - \n\n  * `followCursor` {`boolean | \"initial\" | \"horizontal\" | \"vertical\" | \"true\" | \"false\"`} - \n\n  * `hideOnClick` {`boolean | \"toggle\"`} - \n\n  * `inertia` {`boolean`} - \n\n  * `allowHTML` {`boolean`} - \n\n  * `flip` {`boolean`} - \n\n  * `for` {`string | null`} - \n\n  * `open` {`boolean`} - \n\n  * `preventOverlayClose` {`boolean`} - \n\n  * `title` {`string`} - \n\n  * `disabled` {`boolean`} - \n\n  * `width` {`string | undefined`} - \n\n  * `height` {`string | undefined`} - \n\n  * `group` {`string | null`} - When set, only one panel in the same group can be open at a time.\n\n  * `closeOnEscape` {`boolean`} - Close the panel when Escape is pressed.\n\n  * `panelClass` {`string`} - Custom CSS class(es) added to the Tippy popper element, allowing per-instance styling from the host.\n\n  * `enableVisibilityEffect` {`boolean`} - \n\n  * `enableTabClose` {`boolean`} - \n\nProperties:\n\n  * `_groups` {`Map<string, Set<NileFloatingPanel>>`} - \n\n  * `_reducedMotionQuery` {`MediaQueryList | null`} - \n\n  * `placement` {`\"left\" | \"right\" | \"top\" | \"top-start\" | \"top-end\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left-start\" | \"left-end\" | \"auto\" | \"auto-start\" | \"auto-end\"`} - \n\n  * `trigger` {`string`} - \n\n  * `distance` {`number`} - \n\n  * `skidding` {`number`} - \n\n  * `arrow` {`\"none\" | \"default\" | \"round\"`} - \n\n  * `animation` {`string`} - \n\n  * `duration` {`string | number | [number, number]`} - \n\n  * `delay` {`number | [number, number]`} - \n\n  * `interactive` {`boolean`} - \n\n  * `interactiveBorder` {`number`} - \n\n  * `maxWidth` {`string | number`} - \n\n  * `zIndex` {`number`} - \n\n  * `followCursor` {`boolean | \"initial\" | \"horizontal\" | \"vertical\" | \"true\" | \"false\"`} - \n\n  * `hideOnClick` {`boolean | \"toggle\"`} - \n\n  * `inertia` {`boolean`} - \n\n  * `allowHTML` {`boolean`} - \n\n  * `flip` {`boolean`} - \n\n  * `for` {`string | null`} - \n\n  * `open` {`boolean`} - \n\n  * `preventOverlayClose` {`boolean`} - \n\n  * `title` {`string`} - \n\n  * `disabled` {`boolean`} - \n\n  * `width` {`string | undefined`} - \n\n  * `height` {`string | undefined`} - \n\n  * `group` {`string | null`} - When set, only one panel in the same group can be open at a time.\n\n  * `closeOnEscape` {`boolean`} - Close the panel when Escape is pressed.\n\n  * `panelClass` {`string`} - Custom CSS class(es) added to the Tippy popper element, allowing per-instance styling from the host.\n\n  * `enableVisibilityEffect` {`boolean`} - \n\n  * `enableTabClose` {`boolean`} - \n\n  * `tippyInstance` {`Instance<Props> | null`} - \n\n  * `visibilityManager` - \n\n  * `panelContainer` {`HTMLElement | null`} - \n\n  * `anchorEl` {`HTMLElement | null`} - \n\n  * `_suppressOpenWatch` {`boolean`} - \n\n  * `_panelId` {`string`} - \n\n  * `_boundEscHandler` - \n\n  * `_pendingShowListener` - \n\n  * `_pendingHideListener` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile floating-panel component.\n\nA popover that supports rich content (title, body, actions).\n\n**Wrapper mode** (default): first child element is the trigger.\n**For mode**: set `for=\"elementId\"` to attach to an external element.\n\nEvents:\n\n  * `nile-init` {} - Component initialized.\n\n  * `nile-destroy` {} - Component destroyed.\n\n  * `nile-show` {`CustomEvent<{ instance: Instance<Props>; target: ReferenceElement<Props>; }>`} - Panel opened.\n\n  * `nile-hide` {`CustomEvent<{ instance: Instance<Props>; target: ReferenceElement<Props>; }>`} - Panel closed.\n\n  * `nile-after-show` {`CustomEvent<{ instance: Instance<Props>; target: ReferenceElement<Props>; }>`} - Panel fully visible after animation.\n\n  * `nile-after-hide` {`CustomEvent<{ instance: Instance<Props>; target: ReferenceElement<Props>; }>`} - Panel fully hidden after animation.\n\n  * `nile-toggle` {`CustomEvent<{ open: boolean; instance: Instance<Props>; target: ReferenceElement<Props>; }>`} - Open/close transition (detail.open).\n\n  * `nile-visibility-change` {} - Hidden by scroll/tab change.\n\nAttributes:\n\n  * `placement` {`\"left\" | \"right\" | \"top\" | \"top-start\" | \"top-end\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left-start\" | \"left-end\" | \"auto\" | \"auto-start\" | \"auto-end\"`} - \n\n  * `trigger` {`string`} - \n\n  * `distance` {`number`} - \n\n  * `skidding` {`number`} - \n\n  * `arrow` {`\"none\" | \"default\" | \"round\"`} - \n\n  * `animation` {`string`} - \n\n  * `duration` {`string | number | [number, number]`} - \n\n  * `delay` {`number | [number, number]`} - \n\n  * `interactive` {`boolean`} - \n\n  * `interactiveBorder` {`number`} - \n\n  * `maxWidth` {`string | number`} - \n\n  * `zIndex` {`number`} - \n\n  * `followCursor` {`boolean | \"vertical\" | \"horizontal\" | \"initial\" | \"true\" | \"false\"`} - \n\n  * `hideOnClick` {`boolean | \"toggle\"`} - \n\n  * `inertia` {`boolean`} - \n\n  * `allowHTML` {`boolean`} - \n\n  * `flip` {`boolean`} - \n\n  * `for` {`string | null`} - \n\n  * `open` {`boolean`} - \n\n  * `preventOverlayClose` {`boolean`} - \n\n  * `title` {`string`} - \n\n  * `disabled` {`boolean`} - \n\n  * `width` {`string | undefined`} - \n\n  * `height` {`string | undefined`} - \n\n  * `group` {`string | null`} - When set, only one panel in the same group can be open at a time.\n\n  * `closeOnEscape` {`boolean`} - Close the panel when Escape is pressed.\n\n  * `panelClass` {`string`} - Custom CSS class(es) added to the Tippy popper element, allowing per-instance styling from the host.\n\n  * `enableVisibilityEffect` {`boolean`} - \n\n  * `enableTabClose` {`boolean`} - \n\nProperties:\n\n  * `_groups` {`Map<string, Set<NileFloatingPanel>>`} - \n\n  * `_reducedMotionQuery` {`MediaQueryList | null`} - \n\n  * `placement` {`\"left\" | \"right\" | \"top\" | \"top-start\" | \"top-end\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left-start\" | \"left-end\" | \"auto\" | \"auto-start\" | \"auto-end\"`} - \n\n  * `trigger` {`string`} - \n\n  * `distance` {`number`} - \n\n  * `skidding` {`number`} - \n\n  * `arrow` {`\"none\" | \"default\" | \"round\"`} - \n\n  * `animation` {`string`} - \n\n  * `duration` {`string | number | [number, number]`} - \n\n  * `delay` {`number | [number, number]`} - \n\n  * `interactive` {`boolean`} - \n\n  * `interactiveBorder` {`number`} - \n\n  * `maxWidth` {`string | number`} - \n\n  * `zIndex` {`number`} - \n\n  * `followCursor` {`boolean | \"vertical\" | \"horizontal\" | \"initial\" | \"true\" | \"false\"`} - \n\n  * `hideOnClick` {`boolean | \"toggle\"`} - \n\n  * `inertia` {`boolean`} - \n\n  * `allowHTML` {`boolean`} - \n\n  * `flip` {`boolean`} - \n\n  * `for` {`string | null`} - \n\n  * `open` {`boolean`} - \n\n  * `preventOverlayClose` {`boolean`} - \n\n  * `title` {`string`} - \n\n  * `disabled` {`boolean`} - \n\n  * `width` {`string | undefined`} - \n\n  * `height` {`string | undefined`} - \n\n  * `group` {`string | null`} - When set, only one panel in the same group can be open at a time.\n\n  * `closeOnEscape` {`boolean`} - Close the panel when Escape is pressed.\n\n  * `panelClass` {`string`} - Custom CSS class(es) added to the Tippy popper element, allowing per-instance styling from the host.\n\n  * `enableVisibilityEffect` {`boolean`} - \n\n  * `enableTabClose` {`boolean`} - \n\n  * `tippyInstance` {`Instance<Props> | null`} - \n\n  * `visibilityManager` - \n\n  * `panelContainer` {`HTMLElement | null`} - \n\n  * `anchorEl` {`HTMLElement | null`} - \n\n  * `_suppressOpenWatch` {`boolean`} - \n\n  * `_panelId` {`string`} - \n\n  * `_boundEscHandler` - \n\n  * `_pendingShowListener` - \n\n  * `_pendingHideListener` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "placement",
@@ -2020,16 +2112,16 @@
         },
         {
           "name": "followCursor",
-          "description": "`followCursor` {`boolean | \"initial\" | \"horizontal\" | \"vertical\" | \"true\" | \"false\"`} - \n\nProperty: followCursor\n\nDefault: false",
+          "description": "`followCursor` {`boolean | \"vertical\" | \"horizontal\" | \"initial\" | \"true\" | \"false\"`} - \n\nProperty: followCursor\n\nDefault: false",
           "values": [
             {
-              "name": "initial"
+              "name": "vertical"
             },
             {
               "name": "horizontal"
             },
             {
-              "name": "vertical"
+              "name": "initial"
             },
             {
               "name": "true"
@@ -3137,7 +3229,7 @@
     },
     {
       "name": "nile-lite-tooltip",
-      "description": "Nile lite-tooltip component.\n\nSupports wrapper, sibling (for), and singleton modes.\nAligns with Tippy.js props and Nile design system.\n\nEvents:\n\n  * `nile-show` {`CustomEvent<{ instance: Instance<Props>; target: ReferenceElement<Props>; }>`} - \n\n  * `nile-toggle` {`CustomEvent<{ open: boolean; instance: Instance<Props>; target: ReferenceElement<Props>; }>`} - \n\n  * `nile-hide` {`CustomEvent<{ instance: Instance<Props>; target: ReferenceElement<Props>; }>`} - \n\nAttributes:\n\n  * `for` {`string | null`} - ID of the target element (for sibling mode)\n\n  * `content` {`string`} - Tooltip content text or HTML\n\n  * `size` {`\"small\" | \"large\"`} - Tooltip size (applies CSS class)\n\n  * `duration` {`string | number | [number, number]`} - Animation duration for show/hide (ms). Can be a single value or [show, hide].\n\n  * `interactive` {`boolean`} - Interactive mode\n\n  * `placement` {`\"left\" | \"right\" | \"top\" | \"top-start\" | \"top-end\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left-start\" | \"left-end\" | \"auto\" | \"auto-start\" | \"auto-end\"`} - Placement of the tooltip\n\n  * `disabled` {`boolean`} - \n\n  * `distance` {`number`} - \n\n  * `skidding` {`number`} - \n\n  * `open` {`boolean`} - \n\n  * `trigger` {`string`} - \n\n  * `allowHTML` {`boolean`} - \n\n  * `followCursor` {`boolean | \"initial\" | \"horizontal\" | \"vertical\" | \"true\" | \"false\"`} - \n\n  * `arrow` {`\"small\" | \"none\" | \"default\" | \"large\" | \"round\" | \"narrow\" | \"wide\"`} - \n\n  * `singleton` {`boolean`} - \n\n  * `enableRecursiveMode` {`boolean`} - \n\n  * `delay` {`number | [number, number]`} - Not added in Doc\n\n  * `maxWidth` {`string | number`} - \n\n  * `zIndex` {`number`} - \n\n  * `hideOnClick` {`boolean | \"toggle\"`} - \n\n  * `inertia` {`boolean`} - \n\n  * `interactiveBorder` {`number`} - \n\n  * `enableVisibilityEffect` {`boolean`} - \n\n  * `enableTabClose` {`boolean`} - \n\n  * `width` {`string | undefined`} - \n\n  * `height` {`string | undefined`} - \n\nProperties:\n\n  * `for` {`string | null`} - ID of the target element (for sibling mode)\n\n  * `content` {`string`} - Tooltip content text or HTML\n\n  * `size` {`\"small\" | \"large\"`} - Tooltip size (applies CSS class)\n\n  * `duration` {`string | number | [number, number]`} - Animation duration for show/hide (ms). Can be a single value or [show, hide].\n\n  * `interactive` {`boolean`} - Interactive mode\n\n  * `placement` {`\"left\" | \"right\" | \"top\" | \"top-start\" | \"top-end\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left-start\" | \"left-end\" | \"auto\" | \"auto-start\" | \"auto-end\"`} - Placement of the tooltip\n\n  * `disabled` {`boolean`} - \n\n  * `distance` {`number`} - \n\n  * `skidding` {`number`} - \n\n  * `open` {`boolean`} - \n\n  * `trigger` {`string`} - \n\n  * `allowHTML` {`boolean`} - \n\n  * `followCursor` {`boolean | \"initial\" | \"horizontal\" | \"vertical\" | \"true\" | \"false\"`} - \n\n  * `arrow` {`\"small\" | \"none\" | \"default\" | \"large\" | \"round\" | \"narrow\" | \"wide\"`} - \n\n  * `singleton` {`boolean`} - \n\n  * `enableRecursiveMode` {`boolean`} - \n\n  * `delay` {`number | [number, number]`} - Not added in Doc\n\n  * `maxWidth` {`string | number`} - \n\n  * `zIndex` {`number`} - \n\n  * `hideOnClick` {`boolean | \"toggle\"`} - \n\n  * `inertia` {`boolean`} - \n\n  * `interactiveBorder` {`number`} - \n\n  * `visibilityManager` - \n\n  * `enableVisibilityEffect` {`boolean`} - \n\n  * `enableTabClose` {`boolean`} - \n\n  * `width` {`string | undefined`} - \n\n  * `height` {`string | undefined`} - \n\n  * `tooltipInstances` {`Instance<Props>[] | undefined`} - \n\n  * `singleInstance` {`Instance<Props> | undefined`} - \n\n  * `singletonInstance` {`Instance<Props> | undefined`} - \n\n  * `targetEl` {`HTMLElement | null | undefined`} - \n\n  * `generatedId` {`string | undefined`} - \n\n  * `prevDescribedby` {`string | null | undefined`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile lite-tooltip component.\n\nSupports wrapper, sibling (for), and singleton modes.\nAligns with Tippy.js props and Nile design system.\n\nEvents:\n\n  * `nile-show` {`CustomEvent<{ instance: Instance<Props>; target: ReferenceElement<Props>; }>`} - \n\n  * `nile-toggle` {`CustomEvent<{ open: boolean; instance: Instance<Props>; target: ReferenceElement<Props>; }>`} - \n\n  * `nile-hide` {`CustomEvent<{ instance: Instance<Props>; target: ReferenceElement<Props>; }>`} - \n\nAttributes:\n\n  * `for` {`string | null`} - ID of the target element (for sibling mode)\n\n  * `content` {`string`} - Tooltip content text or HTML\n\n  * `size` {`\"small\" | \"large\"`} - Tooltip size (applies CSS class)\n\n  * `duration` {`string | number | [number, number]`} - Animation duration for show/hide (ms). Can be a single value or [show, hide].\n\n  * `interactive` {`boolean`} - Interactive mode\n\n  * `placement` {`\"left\" | \"right\" | \"top\" | \"top-start\" | \"top-end\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left-start\" | \"left-end\" | \"auto\" | \"auto-start\" | \"auto-end\"`} - Placement of the tooltip\n\n  * `disabled` {`boolean`} - \n\n  * `distance` {`number`} - \n\n  * `skidding` {`number`} - \n\n  * `open` {`boolean`} - \n\n  * `trigger` {`string`} - \n\n  * `allowHTML` {`boolean`} - \n\n  * `followCursor` {`boolean | \"vertical\" | \"horizontal\" | \"initial\" | \"true\" | \"false\"`} - \n\n  * `arrow` {`\"small\" | \"none\" | \"default\" | \"large\" | \"round\" | \"narrow\" | \"wide\"`} - \n\n  * `singleton` {`boolean`} - \n\n  * `enableRecursiveMode` {`boolean`} - \n\n  * `delay` {`number | [number, number]`} - Not added in Doc\n\n  * `maxWidth` {`string | number`} - \n\n  * `zIndex` {`number`} - \n\n  * `hideOnClick` {`boolean | \"toggle\"`} - \n\n  * `inertia` {`boolean`} - \n\n  * `interactiveBorder` {`number`} - \n\n  * `enableVisibilityEffect` {`boolean`} - \n\n  * `enableTabClose` {`boolean`} - \n\n  * `width` {`string | undefined`} - \n\n  * `height` {`string | undefined`} - \n\nProperties:\n\n  * `for` {`string | null`} - ID of the target element (for sibling mode)\n\n  * `content` {`string`} - Tooltip content text or HTML\n\n  * `size` {`\"small\" | \"large\"`} - Tooltip size (applies CSS class)\n\n  * `duration` {`string | number | [number, number]`} - Animation duration for show/hide (ms). Can be a single value or [show, hide].\n\n  * `interactive` {`boolean`} - Interactive mode\n\n  * `placement` {`\"left\" | \"right\" | \"top\" | \"top-start\" | \"top-end\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left-start\" | \"left-end\" | \"auto\" | \"auto-start\" | \"auto-end\"`} - Placement of the tooltip\n\n  * `disabled` {`boolean`} - \n\n  * `distance` {`number`} - \n\n  * `skidding` {`number`} - \n\n  * `open` {`boolean`} - \n\n  * `trigger` {`string`} - \n\n  * `allowHTML` {`boolean`} - \n\n  * `followCursor` {`boolean | \"vertical\" | \"horizontal\" | \"initial\" | \"true\" | \"false\"`} - \n\n  * `arrow` {`\"small\" | \"none\" | \"default\" | \"large\" | \"round\" | \"narrow\" | \"wide\"`} - \n\n  * `singleton` {`boolean`} - \n\n  * `enableRecursiveMode` {`boolean`} - \n\n  * `delay` {`number | [number, number]`} - Not added in Doc\n\n  * `maxWidth` {`string | number`} - \n\n  * `zIndex` {`number`} - \n\n  * `hideOnClick` {`boolean | \"toggle\"`} - \n\n  * `inertia` {`boolean`} - \n\n  * `interactiveBorder` {`number`} - \n\n  * `visibilityManager` - \n\n  * `enableVisibilityEffect` {`boolean`} - \n\n  * `enableTabClose` {`boolean`} - \n\n  * `width` {`string | undefined`} - \n\n  * `height` {`string | undefined`} - \n\n  * `tooltipInstances` {`Instance<Props>[] | undefined`} - \n\n  * `singleInstance` {`Instance<Props> | undefined`} - \n\n  * `singletonInstance` {`Instance<Props> | undefined`} - \n\n  * `targetEl` {`HTMLElement | null | undefined`} - \n\n  * `generatedId` {`string | undefined`} - \n\n  * `prevDescribedby` {`string | null | undefined`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "for",
@@ -3250,16 +3342,16 @@
         },
         {
           "name": "followCursor",
-          "description": "`followCursor` {`boolean | \"initial\" | \"horizontal\" | \"vertical\" | \"true\" | \"false\"`} - \n\nProperty: followCursor\n\nDefault: false",
+          "description": "`followCursor` {`boolean | \"vertical\" | \"horizontal\" | \"initial\" | \"true\" | \"false\"`} - \n\nProperty: followCursor\n\nDefault: false",
           "values": [
             {
-              "name": "initial"
+              "name": "vertical"
             },
             {
               "name": "horizontal"
             },
             {
-              "name": "vertical"
+              "name": "initial"
             },
             {
               "name": "true"
@@ -3901,7 +3993,7 @@
     },
     {
       "name": "nile-popup",
-      "description": "Nile icon component.\n\nAttributes:\n\n  * `anchor` {`string | Element`} - The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide its `id` or a\nreference to it here. If the anchor lives inside the popup, use the `anchor` slot instead.\n\n  * `active` {`boolean`} - Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn\ndown and the popup will be hidden.\n\n  * `placement` {`TooltipPosition`} - The preferred placement of the popup. Note that the actual placement will vary as configured to keep the\npanel inside of the viewport.\n\n  * `strategy` {`\"absolute\" | \"fixed\"`} - Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is\nclipped, using a `fixed` position strategy can often workaround it.\n\n  * `distance` {`number`} - The distance in pixels from which to offset the panel away from its anchor.\n\n  * `skidding` {`number`} - The distance in pixels from which to offset the panel along its anchor.\n\n  * `arrow` {`boolean`} - Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and\n`--arrow-color` custom properties. For additional customizations, you can also target the arrow using\n`::part(arrow)` in your stylesheet.\n\n  * `arrow-placement` {`\"end\" | \"start\" | \"center\" | \"anchor\"`} - The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the\nanchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will\nalign the arrow to the start, end, or center of the popover instead.\n\n  * `arrow-padding` {`number`} - The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,\nthis will prevent it from overflowing the corners.\n\n  * `flip` {`boolean`} - When set, placement of the popup will flip to the opposite site to keep it in view. You can use\n`flipFallbackPlacements` to further configure how the fallback placement is determined.\n\n  * `flip-fallback-placements` {`string`} - If the preferred placement doesn't fit, popup will be tested in these fallback placements until one fits. Must be a\nstring of any number of placements separated by a space, e.g. \"top bottom left\". If no placement fits, the flip\nfallback strategy will be used instead.\n\n  * `flip-fallback-strategy` {`\"initial\" | \"best-fit\"`} - When neither the preferred placement nor the fallback placements fit, this value will be used to determine whether\nthe popup should be positioned using the best available fit based on available space or as it was initially\npreferred.\n\n  * `flipBoundary` {`Element | Element[]`} - The flip boundary describes clipping element(s) that overflow will be checked relative to when flipping. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.\n\n  * `flip-padding` {`number`} - The amount of padding, in pixels, to exceed before the flip behavior will occur.\n\n  * `shift` {`boolean`} - Moves the popup along the axis to keep it in view when clipped.\n\n  * `shiftBoundary` {`Element | Element[]`} - The shift boundary describes clipping element(s) that overflow will be checked relative to when shifting. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.\n\n  * `shift-padding` {`number`} - The amount of padding, in pixels, to exceed before the shift behavior will occur.\n\n  * `auto-size` {`\"both\" | \"horizontal\" | \"vertical\"`} - When set, this will cause the popup to automatically resize itself to prevent it from overflowing.\n\n  * `sync` {`\"width\" | \"height\" | \"both\"`} - Syncs the popup's width or height to that of the anchor element.\n\n  * `autoSizeBoundary` {`Element | Element[]`} - The auto-size boundary describes clipping element(s) that overflow will be checked relative to when resizing. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.\n\n  * `auto-size-padding` {`number`} - The amount of padding, in pixels, to exceed before the auto-size behavior will occur.\n\nProperties:\n\n  * `styles` - \n\n  * `anchorEl` {`Element | null`} - \n\n  * `cleanup` - \n\n  * `popup` {`HTMLElement`} - A reference to the internal popup container. Useful for animating and styling the popup with JavaScript.\n\n  * `arrowEl` {`HTMLElement`} - \n\n  * `anchor` {`string | Element`} - The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide its `id` or a\nreference to it here. If the anchor lives inside the popup, use the `anchor` slot instead.\n\n  * `active` {`boolean`} - Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn\ndown and the popup will be hidden.\n\n  * `placement` {`TooltipPosition`} - The preferred placement of the popup. Note that the actual placement will vary as configured to keep the\npanel inside of the viewport.\n\n  * `strategy` {`\"absolute\" | \"fixed\"`} - Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is\nclipped, using a `fixed` position strategy can often workaround it.\n\n  * `distance` {`number`} - The distance in pixels from which to offset the panel away from its anchor.\n\n  * `skidding` {`number`} - The distance in pixels from which to offset the panel along its anchor.\n\n  * `arrow` {`boolean`} - Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and\n`--arrow-color` custom properties. For additional customizations, you can also target the arrow using\n`::part(arrow)` in your stylesheet.\n\n  * `arrowPlacement` {`\"end\" | \"start\" | \"center\" | \"anchor\"`} - The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the\nanchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will\nalign the arrow to the start, end, or center of the popover instead.\n\n  * `arrowPadding` {`number`} - The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,\nthis will prevent it from overflowing the corners.\n\n  * `flip` {`boolean`} - When set, placement of the popup will flip to the opposite site to keep it in view. You can use\n`flipFallbackPlacements` to further configure how the fallback placement is determined.\n\n  * `flipFallbackPlacements` {`string`} - If the preferred placement doesn't fit, popup will be tested in these fallback placements until one fits. Must be a\nstring of any number of placements separated by a space, e.g. \"top bottom left\". If no placement fits, the flip\nfallback strategy will be used instead.\n\n  * `flipFallbackStrategy` {`\"initial\" | \"best-fit\"`} - When neither the preferred placement nor the fallback placements fit, this value will be used to determine whether\nthe popup should be positioned using the best available fit based on available space or as it was initially\npreferred.\n\n  * `flipBoundary` {`Element | Element[]`} - The flip boundary describes clipping element(s) that overflow will be checked relative to when flipping. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.\n\n  * `flipPadding` {`number`} - The amount of padding, in pixels, to exceed before the flip behavior will occur.\n\n  * `shift` {`boolean`} - Moves the popup along the axis to keep it in view when clipped.\n\n  * `shiftBoundary` {`Element | Element[]`} - The shift boundary describes clipping element(s) that overflow will be checked relative to when shifting. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.\n\n  * `shiftPadding` {`number`} - The amount of padding, in pixels, to exceed before the shift behavior will occur.\n\n  * `autoSize` {`\"both\" | \"horizontal\" | \"vertical\"`} - When set, this will cause the popup to automatically resize itself to prevent it from overflowing.\n\n  * `sync` {`\"width\" | \"height\" | \"both\"`} - Syncs the popup's width or height to that of the anchor element.\n\n  * `autoSizeBoundary` {`Element | Element[]`} - The auto-size boundary describes clipping element(s) that overflow will be checked relative to when resizing. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.\n\n  * `autoSizePadding` {`number`} - The amount of padding, in pixels, to exceed before the auto-size behavior will occur.\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile icon component.\n\nAttributes:\n\n  * `anchor` {`string | Element`} - The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide its `id` or a\nreference to it here. If the anchor lives inside the popup, use the `anchor` slot instead.\n\n  * `active` {`boolean`} - Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn\ndown and the popup will be hidden.\n\n  * `placement` {`TooltipPosition`} - The preferred placement of the popup. Note that the actual placement will vary as configured to keep the\npanel inside of the viewport.\n\n  * `strategy` {`\"absolute\" | \"fixed\"`} - Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is\nclipped, using a `fixed` position strategy can often workaround it.\n\n  * `distance` {`number`} - The distance in pixels from which to offset the panel away from its anchor.\n\n  * `skidding` {`number`} - The distance in pixels from which to offset the panel along its anchor.\n\n  * `arrow` {`boolean`} - Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and\n`--arrow-color` custom properties. For additional customizations, you can also target the arrow using\n`::part(arrow)` in your stylesheet.\n\n  * `arrow-placement` {`\"end\" | \"start\" | \"center\" | \"anchor\"`} - The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the\nanchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will\nalign the arrow to the start, end, or center of the popover instead.\n\n  * `arrow-padding` {`number`} - The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,\nthis will prevent it from overflowing the corners.\n\n  * `flip` {`boolean`} - When set, placement of the popup will flip to the opposite site to keep it in view. You can use\n`flipFallbackPlacements` to further configure how the fallback placement is determined.\n\n  * `flip-fallback-placements` {`string`} - If the preferred placement doesn't fit, popup will be tested in these fallback placements until one fits. Must be a\nstring of any number of placements separated by a space, e.g. \"top bottom left\". If no placement fits, the flip\nfallback strategy will be used instead.\n\n  * `flip-fallback-strategy` {`\"initial\" | \"best-fit\"`} - When neither the preferred placement nor the fallback placements fit, this value will be used to determine whether\nthe popup should be positioned using the best available fit based on available space or as it was initially\npreferred.\n\n  * `flipBoundary` {`Element | Element[]`} - The flip boundary describes clipping element(s) that overflow will be checked relative to when flipping. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.\n\n  * `flip-padding` {`number`} - The amount of padding, in pixels, to exceed before the flip behavior will occur.\n\n  * `shift` {`boolean`} - Moves the popup along the axis to keep it in view when clipped.\n\n  * `shiftBoundary` {`Element | Element[]`} - The shift boundary describes clipping element(s) that overflow will be checked relative to when shifting. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.\n\n  * `shift-padding` {`number`} - The amount of padding, in pixels, to exceed before the shift behavior will occur.\n\n  * `auto-size` {`\"vertical\" | \"horizontal\" | \"both\"`} - When set, this will cause the popup to automatically resize itself to prevent it from overflowing.\n\n  * `sync` {`\"width\" | \"height\" | \"both\"`} - Syncs the popup's width or height to that of the anchor element.\n\n  * `autoSizeBoundary` {`Element | Element[]`} - The auto-size boundary describes clipping element(s) that overflow will be checked relative to when resizing. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.\n\n  * `auto-size-padding` {`number`} - The amount of padding, in pixels, to exceed before the auto-size behavior will occur.\n\nProperties:\n\n  * `styles` - \n\n  * `anchorEl` {`Element | null`} - \n\n  * `cleanup` - \n\n  * `popup` {`HTMLElement`} - A reference to the internal popup container. Useful for animating and styling the popup with JavaScript.\n\n  * `arrowEl` {`HTMLElement`} - \n\n  * `anchor` {`string | Element`} - The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide its `id` or a\nreference to it here. If the anchor lives inside the popup, use the `anchor` slot instead.\n\n  * `active` {`boolean`} - Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn\ndown and the popup will be hidden.\n\n  * `placement` {`TooltipPosition`} - The preferred placement of the popup. Note that the actual placement will vary as configured to keep the\npanel inside of the viewport.\n\n  * `strategy` {`\"absolute\" | \"fixed\"`} - Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is\nclipped, using a `fixed` position strategy can often workaround it.\n\n  * `distance` {`number`} - The distance in pixels from which to offset the panel away from its anchor.\n\n  * `skidding` {`number`} - The distance in pixels from which to offset the panel along its anchor.\n\n  * `arrow` {`boolean`} - Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and\n`--arrow-color` custom properties. For additional customizations, you can also target the arrow using\n`::part(arrow)` in your stylesheet.\n\n  * `arrowPlacement` {`\"end\" | \"start\" | \"center\" | \"anchor\"`} - The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the\nanchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will\nalign the arrow to the start, end, or center of the popover instead.\n\n  * `arrowPadding` {`number`} - The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,\nthis will prevent it from overflowing the corners.\n\n  * `flip` {`boolean`} - When set, placement of the popup will flip to the opposite site to keep it in view. You can use\n`flipFallbackPlacements` to further configure how the fallback placement is determined.\n\n  * `flipFallbackPlacements` {`string`} - If the preferred placement doesn't fit, popup will be tested in these fallback placements until one fits. Must be a\nstring of any number of placements separated by a space, e.g. \"top bottom left\". If no placement fits, the flip\nfallback strategy will be used instead.\n\n  * `flipFallbackStrategy` {`\"initial\" | \"best-fit\"`} - When neither the preferred placement nor the fallback placements fit, this value will be used to determine whether\nthe popup should be positioned using the best available fit based on available space or as it was initially\npreferred.\n\n  * `flipBoundary` {`Element | Element[]`} - The flip boundary describes clipping element(s) that overflow will be checked relative to when flipping. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.\n\n  * `flipPadding` {`number`} - The amount of padding, in pixels, to exceed before the flip behavior will occur.\n\n  * `shift` {`boolean`} - Moves the popup along the axis to keep it in view when clipped.\n\n  * `shiftBoundary` {`Element | Element[]`} - The shift boundary describes clipping element(s) that overflow will be checked relative to when shifting. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.\n\n  * `shiftPadding` {`number`} - The amount of padding, in pixels, to exceed before the shift behavior will occur.\n\n  * `autoSize` {`\"vertical\" | \"horizontal\" | \"both\"`} - When set, this will cause the popup to automatically resize itself to prevent it from overflowing.\n\n  * `sync` {`\"width\" | \"height\" | \"both\"`} - Syncs the popup's width or height to that of the anchor element.\n\n  * `autoSizeBoundary` {`Element | Element[]`} - The auto-size boundary describes clipping element(s) that overflow will be checked relative to when resizing. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.\n\n  * `autoSizePadding` {`number`} - The amount of padding, in pixels, to exceed before the auto-size behavior will occur.\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "anchor",
@@ -4048,16 +4140,16 @@
         },
         {
           "name": "auto-size",
-          "description": "`auto-size` {`\"both\" | \"horizontal\" | \"vertical\"`} - When set, this will cause the popup to automatically resize itself to prevent it from overflowing.\n\nProperty: autoSize",
+          "description": "`auto-size` {`\"vertical\" | \"horizontal\" | \"both\"`} - When set, this will cause the popup to automatically resize itself to prevent it from overflowing.\n\nProperty: autoSize",
           "values": [
             {
-              "name": "both"
+              "name": "vertical"
             },
             {
               "name": "horizontal"
             },
             {
-              "name": "vertical"
+              "name": "both"
             }
           ]
         },
@@ -4291,7 +4383,7 @@
     },
     {
       "name": "nile-rich-text-editor",
-      "description": "Events:\n\n  * `nile-change` {`CustomEvent<{ content: string; mention: any; }>`} - \n\nAttributes:\n\n  * `value` {`string`} - \n\n  * `noStyles` {`boolean`} - \n\n  * `disabled` {`boolean`} - \n\n  * `singlelineeditor` {`boolean`} - \n\n  * `placeholder` {`string`} - \n\n  * `mentions` - \n\n  * `whitelist` {`string[]`} - \n\nProperties:\n\n  * `value` {`string`} - \n\n  * `noStyles` {`boolean`} - \n\n  * `disabled` {`boolean`} - \n\n  * `singleLineEditor` {`boolean`} - \n\n  * `placeholder` {`string`} - \n\n  * `mentions` - \n\n  * `whitelist` {`string[]`} - \n\n  * `content` {`string`} - \n\n  * `editorEl` {`HTMLElement`} - \n\n  * `previewEl` {`HTMLElement | null`} - \n\n  * `toolbarEl` {`HTMLElement | null`} - \n\n  * `lastRange` {`Range | null`} - \n\n  * `buttonMap` {`Map<string, HTMLElement[]>`} - \n\n  * `headingSelect` {`HTMLSelectElement | null`} - \n\n  * `fontSelect` {`HTMLSelectElement | null`} - \n\n  * `colorInput` {`HTMLInputElement | null`} - \n\n  * `bgColorInput` {`HTMLInputElement | null`} - \n\n  * `colorSwatchEl` {`HTMLElement | null`} - \n\n  * `bgSwatchEl` {`HTMLElement | null`} - \n\n  * `containerEl` {`HTMLElement | null`} - \n\n  * `linkEl` {`HTMLElement | null`} - \n\n  * `mentionsEl` {`HTMLElement | null`} - \n\n  * `onEditorClick` - \n\n  * `onEditorInput` - \n\n  * `onEditorMouseup` - \n\n  * `onEditorKeyup` - \n\n  * `onEditorKeydown` - \n\n  * `onSelectionChange` - ",
+      "description": "Events:\n\n  * `nile-change` {`CustomEvent<{ content: string; mention: any; }>`} - \n\nAttributes:\n\n  * `value` {`string`} - \n\n  * `noStyles` {`boolean`} - \n\n  * `disabled` {`boolean`} - \n\n  * `singlelineeditor` {`boolean`} - \n\n  * `placeholder` {`string`} - \n\n  * `mentions` - \n\n  * `whitelist` {`string[]`} - \n\nProperties:\n\n  * `value` {`string`} - \n\n  * `noStyles` {`boolean`} - \n\n  * `disabled` {`boolean`} - \n\n  * `singleLineEditor` {`boolean`} - \n\n  * `placeholder` {`string`} - \n\n  * `mentions` - \n\n  * `whitelist` {`string[]`} - \n\n  * `content` {`string`} - \n\n  * `editorEl` {`HTMLElement`} - \n\n  * `previewEl` {`HTMLElement | null`} - \n\n  * `toolbarEl` {`HTMLElement | null`} - \n\n  * `lastRange` {`Range | null`} - \n\n  * `buttonMap` {`Map<string, HTMLElement[]>`} - \n\n  * `headingSelect` {`HTMLSelectElement | null`} - \n\n  * `fontSelect` {`HTMLSelectElement | null`} - \n\n  * `colorInput` {`HTMLInputElement | null`} - \n\n  * `bgColorInput` {`HTMLInputElement | null`} - \n\n  * `colorSwatchEl` {`HTMLElement | null`} - \n\n  * `bgSwatchEl` {`HTMLElement | null`} - \n\n  * `containerEl` {`HTMLElement | null`} - \n\n  * `linkEl` {`HTMLElement | null`} - \n\n  * `mentionsEl` {`HTMLElement | null`} - \n\n  * `onEditorClick` - \n\n  * `onEditorPaste` - \n\n  * `onEditorDrop` - \n\n  * `onEditorInput` - \n\n  * `onEditorMouseup` - \n\n  * `onEditorKeyup` - \n\n  * `onEditorKeydown` - \n\n  * `onSelectionChange` - ",
       "attributes": [
         {
           "name": "value",
@@ -4553,7 +4645,7 @@
     },
     {
       "name": "nile-select",
-      "description": "Events:\n\n  * `nile-change` {} - Emitted when the control's value changes.\n\n  * `nile-clear` {} - Emitted when the control's value is cleared.\n\n  * `nile-input` {} - Emitted when the control receives input.\n\n  * `nile-focus` {} - Emitted when the control gains focus.\n\n  * `nile-blur` {} - Emitted when the control loses focus.\n\n  * `nile-show` {} - Emitted when the select's menu opens.\n\n  * `nile-after-show` {} - Emitted after the select's menu opens and all animations are complete.\n\n  * `nile-hide` {} - Emitted when the select's menu closes.\n\n  * `nile-after-hide` {} - Emitted after the select's menu closes and all animations are complete.\n\n  * `nile-invalid` {} - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n  * `nile-search` {} - Emitted when the user types in the search input. The event payload includes the search query for backend search functionality.\n\n  * `nile-scroll` {} - Emitted when the user scrolls within the listbox. The event payload includes scroll position information.\n\n  * `nile-scroll-start` {} - Emitted when the user starts scrolling within the listbox.\n\n  * `nile-scroll-end` {} - Emitted when the user stops scrolling and reaches the bottom of the listbox (debounced).\n\nSlots:\n\n  * ` ` {} - The listbox options. Must be `<nile-option>` elements. You can use `<nile-divider>` to group items visually.\n\n  * `label` {} - The input's label. Alternatively, you can use the `label` attribute.\n\n  * `prefix` {} - Used to prepend a presentational icon or similar element to the combobox.\n\n  * `clear-icon` {} - An icon to use in lieu of the default clear icon.\n\n  * `expand-icon` {} - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n\n  * `help-text` {} - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\nAttributes:\n\n  * `size` {`\"small\" | \"medium\" | \"large\"`} - The select's size.\n\n  * `placeholder` {`string`} - Placeholder text to show as a hint when the select is empty.\n\n  * `searchEnabled` {`boolean`} - \n\n  * `internal-search-placeholder` {`string`} - \n\n  * `enableVisibilityEffect` {`boolean`} - \n\n  * `blockValueChange` {`boolean`} - \n\n  * `disableLocalSearch` {`boolean`} - \n\n  * `optionsLoading` {`boolean`} - \n\n  * `noWidthSync` {`boolean`} - \n\n  * `portal` {`boolean`} - When true, the listbox will be appended to the document body instead of the parent container.\nThis is useful when the parent has overflow: hidden, clip-path, or transform applied.\n\n  * `multiple` {`string | boolean`} - Allows more than one option to be selected.\n\n  * `helpText` {`string`} - \n\n  * `help-text` {`string`} - \n\n  * `autoResize` {`boolean`} - \n\n  * `error-message` {`string`} - \n\n  * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n  * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n  * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n  * `max-options-visible` {`number`} - The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.\n\n  * `clearable` {`boolean`} - Adds a clear button when the select is not empty.\n\n  * `open` {`boolean`} - Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the select's open state.\n\n  * `hoist` {`boolean`} - Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n\n  * `filled` {`boolean`} - Draws a filled select.\n\n  * `pill` {`boolean`} - Draws a pill-style select with rounded edges.\n\n  * `label` {`string`} - The select's label. If you need to display HTML, use the `label` slot instead.\n\n  * `placement` {`\"top\" | \"bottom\"`} - The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.\n\n  * `showSelected` {`boolean`} - \n\n  * `enableTabClose` {`boolean`} - \n\n  * `showNoResults` {`boolean`} - \n\n  * `noResultsMessage` {`string`} - \n\n  * `data` - \n\n  * `enableVirtualScroll` {`boolean`} - \n\n  * `enableGroupHeader` {`boolean`} - To enable the group header in the select\n\n  * `autoFocusSearch` {`boolean`} - To auto focus the search input when the select is opened\n\n  * `loading` {`boolean`} - loading indicator for virtual select\n\n  * `stickyHeader` {`boolean`} - \n\n  * `descriptionSearchEnabled` {`boolean`} - \n\n  * `enableDescription` {`boolean`} - \n\n  * `allowHtmlLabel` {`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  * `portalManager` - \n\n  * `hasSlotController` - \n\n  * `typeToSelectString` {`string`} - \n\n  * `typeToSelectTimeout` {`number`} - \n\n  * `scrollTimeout` {`number | undefined`} - \n\n  * `scrolling` {`boolean`} - \n\n  * `options` {`NileOption[]`} - \n\n  * `resizeController` - \n\n  * `visibilityManager` - \n\n  * `popup` - \n\n  * `combobox` {`HTMLSlotElement`} - \n\n  * `displayInput` {`HTMLInputElement`} - \n\n  * `valueInput` {`HTMLInputElement`} - \n\n  * `listbox` {`HTMLSlotElement`} - \n\n  * `hasFocus` {`boolean`} - \n\n  * `displayLabel` {`string`} - \n\n  * `currentOption` - \n\n  * `selectedOptions` {`NileOption[]`} - \n\n  * `oldValue` {`string | string[]`} - \n\n  * `size` {`\"small\" | \"medium\" | \"large\"`} - The select's size.\n\n  * `placeholder` {`string`} - Placeholder text to show as a hint when the select is empty.\n\n  * `searchValue` {`string`} - Placeholder text to show as a hint when the select is empty.\n\n  * `searchEnabled` {`boolean`} - \n\n  * `internalSearchPlaceHolder` {`string`} - \n\n  * `enableVisibilityEffect` {`boolean`} - \n\n  * `blockValueChange` {`boolean`} - \n\n  * `disableLocalSearch` {`boolean`} - \n\n  * `optionsLoading` {`boolean`} - \n\n  * `noWidthSync` {`boolean`} - \n\n  * `portal` {`boolean`} - When true, the listbox will be appended to the document body instead of the parent container.\nThis is useful when the parent has overflow: hidden, clip-path, or transform applied.\n\n  * `multiple` {`string | boolean`} - Allows more than one option to be selected.\n\n  * `helpText` {`string`} - \n\n  * `help_text` {`string`} - \n\n  * `autoResize` {`boolean`} - \n\n  * `errorMessage` {`string`} - \n\n  * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n  * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n  * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n  * `maxOptionsVisible` {`number`} - The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.\n\n  * `clearable` {`boolean`} - Adds a clear button when the select is not empty.\n\n  * `open` {`boolean`} - Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the select's open state.\n\n  * `hoist` {`boolean`} - Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n\n  * `filled` {`boolean`} - Draws a filled select.\n\n  * `pill` {`boolean`} - Draws a pill-style select with rounded edges.\n\n  * `label` {`string`} - The select's label. If you need to display HTML, use the `label` slot instead.\n\n  * `placement` {`\"top\" | \"bottom\"`} - The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.\n\n  * `showSelected` {`boolean`} - \n\n  * `oldMaxOptionsVisible` {`number`} - \n\n  * `enableTabClose` {`boolean`} - \n\n  * `showNoResults` {`boolean`} - \n\n  * `noResultsMessage` {`string`} - \n\n  * `renderItemConfig` {`RenderItemConfig | undefined`} - Enhanced configuration for rendering items with support for display text, value, and search text\n\n  * `data` - \n\n  * `enableVirtualScroll` {`boolean`} - \n\n  * `enableGroupHeader` {`boolean`} - To enable the group header in the select\n\n  * `autoFocusSearch` {`boolean`} - To auto focus the search input when the select is opened\n\n  * `loading` {`boolean`} - loading indicator for virtual select\n\n  * `stickyHeader` {`boolean`} - \n\n  * `descriptionSearchEnabled` {`boolean`} - \n\n  * `enableDescription` {`boolean`} - \n\n  * `allowHtmlLabel` {`boolean`} - \n\n  * `handleWindowResize` - \n\n  * `handleWindowScroll` - \n\n  * `name` {`string`} - The name of the select, submitted as a name/value pair with form data.\n\n  * `value` {`string | string[]`} - The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\nvalue will be a space-delimited list of values based on the options selected.\n\n  * `disabled` {`boolean`} - Disables the select control.\n\n  * `defaultValue` {`string | string[]`} - The default value of the form control. Primarily used for resetting the form control.\n\n  * `defaultChecked` {`boolean | undefined`} - \n\n  * `form` {`string`} - By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.\n\n  * `pattern` {`string | undefined`} - \n\n  * `min` {`string | number | Date | undefined`} - \n\n  * `max` {`string | number | Date | undefined`} - \n\n  * `step` {`number | \"any\" | undefined`} - \n\n  * `required` {`boolean`} - The select's required attribute.\n\n  * `minlength` {`number | undefined`} - \n\n  * `maxlength` {`number | undefined`} - \n\n  * `validity` {`ValidityState`} - Gets the validity state object\n\n  * `validationMessage` {`string`} - Gets the validation message\n\n  * `checkValidity` - \n\n  * `getForm` - \n\n  * `reportValidity` - \n\n  * `setCustomValidity` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Events:\n\n  * `nile-change` {} - Emitted when the control's value changes.\n\n  * `nile-clear` {} - Emitted when the control's value is cleared.\n\n  * `nile-input` {} - Emitted when the control receives input.\n\n  * `nile-focus` {} - Emitted when the control gains focus.\n\n  * `nile-blur` {} - Emitted when the control loses focus.\n\n  * `nile-show` {} - Emitted when the select's menu opens.\n\n  * `nile-after-show` {} - Emitted after the select's menu opens and all animations are complete.\n\n  * `nile-hide` {} - Emitted when the select's menu closes.\n\n  * `nile-after-hide` {} - Emitted after the select's menu closes and all animations are complete.\n\n  * `nile-invalid` {} - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n  * `nile-search` {} - Emitted when the user types in the search input. The event payload includes the search query for backend search functionality.\n\n  * `nile-scroll` {} - Emitted when the user scrolls within the listbox. The event payload includes scroll position information.\n\n  * `nile-scroll-start` {} - Emitted when the user starts scrolling within the listbox.\n\n  * `nile-scroll-end` {} - Emitted when the user stops scrolling and reaches the bottom of the listbox (debounced).\n\nSlots:\n\n  * ` ` {} - The listbox options. Must be `<nile-option>` elements. You can use `<nile-divider>` to group items visually.\n\n  * `label` {} - The input's label. Alternatively, you can use the `label` attribute.\n\n  * `prefix` {} - Used to prepend a presentational icon or similar element to the combobox.\n\n  * `clear-icon` {} - An icon to use in lieu of the default clear icon.\n\n  * `expand-icon` {} - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n\n  * `help-text` {} - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n  * `pre-footer` {} - Content to display at the bottom of the dropdown listbox. Useful for action buttons like \"Create New\". In multi-select mode, appears above the \"Show Selected\" / \"Clear All\" bar.\n\nAttributes:\n\n  * `size` {`\"small\" | \"medium\" | \"large\"`} - The select's size.\n\n  * `placeholder` {`string`} - Placeholder text to show as a hint when the select is empty.\n\n  * `searchEnabled` {`boolean`} - \n\n  * `internal-search-placeholder` {`string`} - \n\n  * `enableVisibilityEffect` {`boolean`} - \n\n  * `blockValueChange` {`boolean`} - \n\n  * `disableLocalSearch` {`boolean`} - \n\n  * `optionsLoading` {`boolean`} - \n\n  * `noWidthSync` {`boolean`} - \n\n  * `portal` {`boolean`} - When true, the listbox will be appended to the document body instead of the parent container.\nThis is useful when the parent has overflow: hidden, clip-path, or transform applied.\n\n  * `multiple` {`string | boolean`} - Allows more than one option to be selected.\n\n  * `helpText` {`string`} - \n\n  * `help-text` {`string`} - \n\n  * `autoResize` {`boolean`} - \n\n  * `error-message` {`string`} - \n\n  * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n  * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n  * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n  * `max-options-visible` {`number`} - The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.\n\n  * `clearable` {`boolean`} - Adds a clear button when the select is not empty.\n\n  * `open` {`boolean`} - Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the select's open state.\n\n  * `hoist` {`boolean`} - Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n\n  * `filled` {`boolean`} - Draws a filled select.\n\n  * `pill` {`boolean`} - Draws a pill-style select with rounded edges.\n\n  * `label` {`string`} - The select's label. If you need to display HTML, use the `label` slot instead.\n\n  * `placement` {`\"top\" | \"bottom\"`} - The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.\n\n  * `showSelected` {`boolean`} - \n\n  * `enableTabClose` {`boolean`} - \n\n  * `showNoResults` {`boolean`} - \n\n  * `noResultsMessage` {`string`} - \n\n  * `data` - \n\n  * `enableVirtualScroll` {`boolean`} - \n\n  * `enableGroupHeader` {`boolean`} - To enable the group header in the select\n\n  * `autoFocusSearch` {`boolean`} - To auto focus the search input when the select is opened\n\n  * `loading` {`boolean`} - loading indicator for virtual select\n\n  * `stickyHeader` {`boolean`} - \n\n  * `descriptionSearchEnabled` {`boolean`} - \n\n  * `enableDescription` {`boolean`} - \n\n  * `allowHtmlLabel` {`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  * `portalManager` - \n\n  * `hasSlotController` - \n\n  * `typeToSelectString` {`string`} - \n\n  * `typeToSelectTimeout` {`number`} - \n\n  * `scrollTimeout` {`number | undefined`} - \n\n  * `scrolling` {`boolean`} - \n\n  * `options` {`NileOption[]`} - \n\n  * `resizeController` - \n\n  * `visibilityManager` - \n\n  * `popup` - \n\n  * `combobox` {`HTMLSlotElement`} - \n\n  * `displayInput` {`HTMLInputElement`} - \n\n  * `valueInput` {`HTMLInputElement`} - \n\n  * `listbox` {`HTMLSlotElement`} - \n\n  * `hasFocus` {`boolean`} - \n\n  * `displayLabel` {`string`} - \n\n  * `currentOption` - \n\n  * `selectedOptions` {`NileOption[]`} - \n\n  * `oldValue` {`string | string[]`} - \n\n  * `size` {`\"small\" | \"medium\" | \"large\"`} - The select's size.\n\n  * `placeholder` {`string`} - Placeholder text to show as a hint when the select is empty.\n\n  * `searchValue` {`string`} - Placeholder text to show as a hint when the select is empty.\n\n  * `searchEnabled` {`boolean`} - \n\n  * `internalSearchPlaceHolder` {`string`} - \n\n  * `enableVisibilityEffect` {`boolean`} - \n\n  * `blockValueChange` {`boolean`} - \n\n  * `disableLocalSearch` {`boolean`} - \n\n  * `optionsLoading` {`boolean`} - \n\n  * `noWidthSync` {`boolean`} - \n\n  * `portal` {`boolean`} - When true, the listbox will be appended to the document body instead of the parent container.\nThis is useful when the parent has overflow: hidden, clip-path, or transform applied.\n\n  * `multiple` {`string | boolean`} - Allows more than one option to be selected.\n\n  * `helpText` {`string`} - \n\n  * `help_text` {`string`} - \n\n  * `autoResize` {`boolean`} - \n\n  * `errorMessage` {`string`} - \n\n  * `warning` {`boolean`} - Sets the input to a warning state, changing its visual appearance.\n\n  * `error` {`boolean`} - Sets the input to an error state, changing its visual appearance.\n\n  * `success` {`boolean`} - Sets the input to a success state, changing its visual appearance.\n\n  * `maxOptionsVisible` {`number`} - The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.\n\n  * `clearable` {`boolean`} - Adds a clear button when the select is not empty.\n\n  * `open` {`boolean`} - Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the select's open state.\n\n  * `hoist` {`boolean`} - Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n\n  * `filled` {`boolean`} - Draws a filled select.\n\n  * `pill` {`boolean`} - Draws a pill-style select with rounded edges.\n\n  * `label` {`string`} - The select's label. If you need to display HTML, use the `label` slot instead.\n\n  * `placement` {`\"top\" | \"bottom\"`} - The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.\n\n  * `showSelected` {`boolean`} - \n\n  * `oldMaxOptionsVisible` {`number`} - \n\n  * `enableTabClose` {`boolean`} - \n\n  * `showNoResults` {`boolean`} - \n\n  * `noResultsMessage` {`string`} - \n\n  * `renderItemConfig` {`RenderItemConfig | undefined`} - Enhanced configuration for rendering items with support for display text, value, and search text\n\n  * `data` - \n\n  * `enableVirtualScroll` {`boolean`} - \n\n  * `enableGroupHeader` {`boolean`} - To enable the group header in the select\n\n  * `autoFocusSearch` {`boolean`} - To auto focus the search input when the select is opened\n\n  * `loading` {`boolean`} - loading indicator for virtual select\n\n  * `stickyHeader` {`boolean`} - \n\n  * `descriptionSearchEnabled` {`boolean`} - \n\n  * `enableDescription` {`boolean`} - \n\n  * `allowHtmlLabel` {`boolean`} - \n\n  * `handleWindowResize` - \n\n  * `handleWindowScroll` - \n\n  * `name` {`string`} - The name of the select, submitted as a name/value pair with form data.\n\n  * `value` {`string | string[]`} - The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\nvalue will be a space-delimited list of values based on the options selected.\n\n  * `disabled` {`boolean`} - Disables the select control.\n\n  * `defaultValue` {`string | string[]`} - The default value of the form control. Primarily used for resetting the form control.\n\n  * `defaultChecked` {`boolean | undefined`} - \n\n  * `form` {`string`} - By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.\n\n  * `pattern` {`string | undefined`} - \n\n  * `min` {`string | number | Date | undefined`} - \n\n  * `max` {`string | number | Date | undefined`} - \n\n  * `step` {`number | \"any\" | undefined`} - \n\n  * `required` {`boolean`} - The select's required attribute.\n\n  * `minlength` {`number | undefined`} - \n\n  * `maxlength` {`number | undefined`} - \n\n  * `validity` {`ValidityState`} - Gets the validity state object\n\n  * `validationMessage` {`string`} - Gets the validation message\n\n  * `checkValidity` - \n\n  * `getForm` - \n\n  * `reportValidity` - \n\n  * `setCustomValidity` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "size",
@@ -5827,7 +5919,7 @@
     },
     {
       "name": "nile-textarea",
-      "description": "Events:\n\n  * `nile-blur` {} - Emitted when the control loses focus.\n\n  * `nile-change` {} - Emitted when an alteration to the control's value is committed by the user.\n\n  * `nile-focus` {} - Emitted when the control gains focus.\n\n  * `nile-input` {} - Emitted when the control receives input.\n\nSlots:\n\n  * `label` {} - The textarea's label. Alternatively, you can use the `label` attribute.\n\n  * `help-text` {} - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\nAttributes:\n\n  * `title` {`string`} - \n\n  * `name` {`string`} - The name of the textarea, submitted as a name/value pair with form data.\n\n  * `value` {`string`} - The current value of the textarea, submitted as a name/value pair with form data.\n\n  * `size` {`string`} - The textarea's size.\n\n  * `filled` {`boolean`} - Draws a filled textarea.\n\n  * `label` {`string`} - The textarea's label. If you need to display HTML, use the `label` slot instead.\n\n  * `help-text` {`string`} - \n\n  * `error-message` {`string`} - \n\n  * `placeholder` {`string`} - Placeholder text to show as a hint when the input is empty.\n\n  * `rows` {`number`} - The number of rows to display by default.\n\n  * `resize` {`\"none\" | \"auto\" | \"vertical\"`} - Controls how the textarea can be resized.\n\n  * `disabled` {`boolean`} - Disables the textarea.\n\n  * `readonly` {`boolean`} - Makes the textarea readonly.\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`} - Makes the textarea a required field.\n\n  * `minlength` {`number`} - \n\n  * `maxlength` {`number`} - \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  * `autocapitalize` {`\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\"`} - Controls whether and how text input is automatically capitalized as it is entered by the user.\n\n  * `autocorrect` {`string`} - Indicates whether the browser's autocorrect feature is on or off.\n\n  * `autocomplete` {`string`} - Specifies what permission the browser has to provide assistance in filling out form field values. Refer to\n[this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.\n\n  * `autofocus` {`boolean`} - Indicates that the input should receive focus on page load.\n\n  * `enterkeyhint` {`\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"send\"`} - Used to customize the label or icon of the Enter key on virtual keyboards.\n\n  * `spellcheck` {`boolean`} - Enables spell checking on the textarea.\n\n  * `inputmode` {`\"text\" | \"none\" | \"numeric\" | \"email\" | \"search\" | \"tel\" | \"url\" | \"decimal\"`} - Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual\nkeyboard on supportive devices.\n\n  * `fullHeight` {`boolean`} - \n\n  * `checkNonPrintableChar` {`boolean`} - \n\nProperties:\n\n  * `styles` - \n\n  * `hasSlotController` - \n\n  * `resizeObserver` - \n\n  * `input` {`HTMLTextAreaElement`} - \n\n  * `hasFocus` {`boolean`} - \n\n  * `title` {`string`} - \n\n  * `name` {`string`} - The name of the textarea, submitted as a name/value pair with form data.\n\n  * `value` {`string`} - The current value of the textarea, submitted as a name/value pair with form data.\n\n  * `size` {`string`} - The textarea's size.\n\n  * `filled` {`boolean`} - Draws a filled textarea.\n\n  * `label` {`string`} - The textarea's label. If you need to display HTML, use the `label` slot instead.\n\n  * `helpText` {`string`} - \n\n  * `errorMessage` {`string`} - \n\n  * `placeholder` {`string`} - Placeholder text to show as a hint when the input is empty.\n\n  * `rows` {`number`} - The number of rows to display by default.\n\n  * `resize` {`\"none\" | \"auto\" | \"vertical\"`} - Controls how the textarea can be resized.\n\n  * `disabled` {`boolean`} - Disables the textarea.\n\n  * `readonly` {`boolean`} - Makes the textarea readonly.\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`} - Makes the textarea a required field.\n\n  * `minlength` {`number`} - \n\n  * `maxlength` {`number`} - \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  * `autocapitalize` {`\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\"`} - Controls whether and how text input is automatically capitalized as it is entered by the user.\n\n  * `autocorrect` {`string`} - Indicates whether the browser's autocorrect feature is on or off.\n\n  * `autocomplete` {`string`} - Specifies what permission the browser has to provide assistance in filling out form field values. Refer to\n[this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.\n\n  * `autofocus` {`boolean`} - Indicates that the input should receive focus on page load.\n\n  * `enterkeyhint` {`\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"send\"`} - Used to customize the label or icon of the Enter key on virtual keyboards.\n\n  * `spellcheck` {`boolean`} - Enables spell checking on the textarea.\n\n  * `inputmode` {`\"text\" | \"none\" | \"numeric\" | \"email\" | \"search\" | \"tel\" | \"url\" | \"decimal\"`} - Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual\nkeyboard on supportive devices.\n\n  * `defaultValue` {`string`} - The default value of the form control. Primarily used for resetting the form control.\n\n  * `fullHeight` {`boolean`} - \n\n  * `checkNonPrintableChar` {`boolean`} - \n\n  * `hasPrintableCharacters` {`boolean`} - \n\n  * `markedValue` {`string`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Events:\n\n  * `nile-blur` {} - Emitted when the control loses focus.\n\n  * `nile-change` {} - Emitted when an alteration to the control's value is committed by the user.\n\n  * `nile-focus` {} - Emitted when the control gains focus.\n\n  * `nile-input` {} - Emitted when the control receives input.\n\nSlots:\n\n  * `label` {} - The textarea's label. Alternatively, you can use the `label` attribute.\n\n  * `help-text` {} - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\nAttributes:\n\n  * `title` {`string`} - \n\n  * `name` {`string`} - The name of the textarea, submitted as a name/value pair with form data.\n\n  * `value` {`string`} - The current value of the textarea, submitted as a name/value pair with form data.\n\n  * `size` {`string`} - The textarea's size.\n\n  * `filled` {`boolean`} - Draws a filled textarea.\n\n  * `label` {`string`} - The textarea's label. If you need to display HTML, use the `label` slot instead.\n\n  * `help-text` {`string`} - \n\n  * `error-message` {`string`} - \n\n  * `placeholder` {`string`} - Placeholder text to show as a hint when the input is empty.\n\n  * `rows` {`number`} - The number of rows to display by default.\n\n  * `resize` {`\"none\" | \"vertical\" | \"auto\"`} - Controls how the textarea can be resized.\n\n  * `disabled` {`boolean`} - Disables the textarea.\n\n  * `readonly` {`boolean`} - Makes the textarea readonly.\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`} - Makes the textarea a required field.\n\n  * `minlength` {`number`} - \n\n  * `maxlength` {`number`} - \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  * `autocapitalize` {`\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\"`} - Controls whether and how text input is automatically capitalized as it is entered by the user.\n\n  * `autocorrect` {`string`} - Indicates whether the browser's autocorrect feature is on or off.\n\n  * `autocomplete` {`string`} - Specifies what permission the browser has to provide assistance in filling out form field values. Refer to\n[this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.\n\n  * `autofocus` {`boolean`} - Indicates that the input should receive focus on page load.\n\n  * `enterkeyhint` {`\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"send\"`} - Used to customize the label or icon of the Enter key on virtual keyboards.\n\n  * `spellcheck` {`boolean`} - Enables spell checking on the textarea.\n\n  * `inputmode` {`\"text\" | \"none\" | \"numeric\" | \"email\" | \"search\" | \"tel\" | \"url\" | \"decimal\"`} - Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual\nkeyboard on supportive devices.\n\n  * `fullHeight` {`boolean`} - \n\n  * `checkNonPrintableChar` {`boolean`} - \n\nProperties:\n\n  * `styles` - \n\n  * `hasSlotController` - \n\n  * `resizeObserver` - \n\n  * `input` {`HTMLTextAreaElement`} - \n\n  * `hasFocus` {`boolean`} - \n\n  * `title` {`string`} - \n\n  * `name` {`string`} - The name of the textarea, submitted as a name/value pair with form data.\n\n  * `value` {`string`} - The current value of the textarea, submitted as a name/value pair with form data.\n\n  * `size` {`string`} - The textarea's size.\n\n  * `filled` {`boolean`} - Draws a filled textarea.\n\n  * `label` {`string`} - The textarea's label. If you need to display HTML, use the `label` slot instead.\n\n  * `helpText` {`string`} - \n\n  * `errorMessage` {`string`} - \n\n  * `placeholder` {`string`} - Placeholder text to show as a hint when the input is empty.\n\n  * `rows` {`number`} - The number of rows to display by default.\n\n  * `resize` {`\"none\" | \"vertical\" | \"auto\"`} - Controls how the textarea can be resized.\n\n  * `disabled` {`boolean`} - Disables the textarea.\n\n  * `readonly` {`boolean`} - Makes the textarea readonly.\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`} - Makes the textarea a required field.\n\n  * `minlength` {`number`} - \n\n  * `maxlength` {`number`} - \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  * `autocapitalize` {`\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\"`} - Controls whether and how text input is automatically capitalized as it is entered by the user.\n\n  * `autocorrect` {`string`} - Indicates whether the browser's autocorrect feature is on or off.\n\n  * `autocomplete` {`string`} - Specifies what permission the browser has to provide assistance in filling out form field values. Refer to\n[this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.\n\n  * `autofocus` {`boolean`} - Indicates that the input should receive focus on page load.\n\n  * `enterkeyhint` {`\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"send\"`} - Used to customize the label or icon of the Enter key on virtual keyboards.\n\n  * `spellcheck` {`boolean`} - Enables spell checking on the textarea.\n\n  * `inputmode` {`\"text\" | \"none\" | \"numeric\" | \"email\" | \"search\" | \"tel\" | \"url\" | \"decimal\"`} - Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual\nkeyboard on supportive devices.\n\n  * `defaultValue` {`string`} - The default value of the form control. Primarily used for resetting the form control.\n\n  * `fullHeight` {`boolean`} - \n\n  * `checkNonPrintableChar` {`boolean`} - \n\n  * `hasPrintableCharacters` {`boolean`} - \n\n  * `markedValue` {`string`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "title",
@@ -5872,16 +5964,16 @@
         },
         {
           "name": "resize",
-          "description": "`resize` {`\"none\" | \"auto\" | \"vertical\"`} - Controls how the textarea can be resized.\n\nProperty: resize\n\nDefault: vertical",
+          "description": "`resize` {`\"none\" | \"vertical\" | \"auto\"`} - Controls how the textarea can be resized.\n\nProperty: resize\n\nDefault: vertical",
           "values": [
             {
               "name": "none"
             },
             {
-              "name": "auto"
+              "name": "vertical"
             },
             {
-              "name": "vertical"
+              "name": "auto"
             }
           ]
         },