@aquera/nile-elements 2.0.18 → 2.0.19

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

@@ -1,4 +1,5 @@
-import { html } from 'lit';
+import { html, noChange, nothing } from 'lit';
+import { guard } from 'lit/directives/guard.js';
 import type NileElement from '../internal/nile-element';
 
 /**
@@ -13,12 +14,14 @@ export class VirtualScrollHelper {
 
   renderVirtualizedContent(): any {
     const component = this.component as any;
+    const tooltipPath = !!component.showTooltip;
 
     return html`
       <div class="virtual-select">
         <nile-virtual-select
           .name=${component.name}
           .value=${component.value}
+          .maxOptionsVisible=${tooltipPath || !component.maxOptionsVisibleExplicit ? noChange : component.maxOptionsVisible}
           .autoResize=${component.autoResize}
           .showTooltip=${component.showTooltip}
           .chipMinWidth=${component.chipMinWidth}
@@ -51,7 +54,7 @@ export class VirtualScrollHelper {
           .blockValueChange=${component.blockValueChange}
           .noWidthSync=${component.noWidthSync}
           .enableTabClose=${component.enableTabClose}
-          .data=${component.data}
+          .data=${tooltipPath ? guard([component.data], () => component.data) : component.data}
           .open=${component.open}
           .loading=${component.loading}
           .portal=${component.portal}
@@ -60,8 +63,8 @@ export class VirtualScrollHelper {
           .enableDescription=${component.enableDescription}
           .tickOnSelect=${component.tickOnSelect}
           .legacy=${component.legacy}
-          @nile-input=${(e: CustomEvent) => component.syncValueFromVirtualSelect(e)}
-          @nile-change=${(e: CustomEvent) => component.syncValueFromVirtualSelect(e)}
+          @nile-input=${tooltipPath ? (e: CustomEvent) => component.syncValueFromVirtualSelect(e) : nothing}
+          @nile-change=${tooltipPath ? (e: CustomEvent) => component.syncValueFromVirtualSelect(e) : nothing}
           exportparts="
             select-options,
             select-no-results,

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

@@ -1,4 +1,4 @@
-import { aTimeout, expect, fixture, html, nextFrame, waitUntil } from '@open-wc/testing';
+import { aTimeout, expect, fixture, html, nextFrame, oneEvent, waitUntil } from '@open-wc/testing';
 import './nile-virtual-select';
 import '../nile-input/nile-input';
 import type { NileVirtualSelect } from './nile-virtual-select';
@@ -843,3 +843,141 @@ describe('NileVirtualSelect showtooltip tooltip on sub-pixel truncation', () =>
     }
   });
 });
+
+
+describe('NileVirtualSelect external value while Selected is open', () => {
+  const OPTIONS = Array.from({ length: 200 }, (_, i) => ({ value: `option-${i + 1}`, label: `Option ${i + 1}` }));
+  let mounted: any;
+
+  // Let the dropdown finish hiding before the fixture is torn down, so the virtualizer is not still laying out
+  // a list that has already been detached.
+  afterEach(async () => {
+    if (mounted?.open) {
+      const hidden = oneEvent(mounted, 'nile-after-hide');
+      mounted.open = false;
+      await Promise.race([hidden, aTimeout(1500)]);
+      await nextFrame();
+      await nextFrame();
+    }
+    mounted = undefined;
+  });
+
+  // Known, pre-existing noise from @lit-labs/virtualizer (a "ResizeObserver loop" notice, and a detached-list error
+  // when the visible list swaps between a short and a long data set). The browser raises them as window errors,
+  // which would fail whichever test is running; the assertions below still decide pass or fail. The detached-list
+  // errors are matched on message AND a `virtualizer` frame in the stack, so the same message from anywhere else
+  // still fails the test. "ResizeObserver loop" is a browser notice with no stack.
+  const virtualizerErrors = ['ChildPart` has no `parentNode`', "reading 'insertBefore'"];
+  let previousOnError: OnErrorEventHandler;
+  before(() => {
+    previousOnError = window.onerror;
+    window.onerror = (message, source, lineno, colno, error) => {
+      if (typeof message === 'string') {
+        if (message.includes('ResizeObserver loop')) return true;
+        if (virtualizerErrors.some(known => message.includes(known)) && error?.stack?.toLowerCase().includes('virtualizer')) {
+          return true;
+        }
+      }
+      return previousOnError ? previousOnError.call(window, message, source, lineno, colno, error) : false;
+    };
+  });
+  after(() => {
+    window.onerror = previousOnError;
+  });
+
+  async function mount(showTooltip: boolean, value: string[] = ['option-1', 'option-2']) {
+    const el = await fixture<NileVirtualSelect>(html`<nile-virtual-select
+      multiple
+      ?showTooltip=${showTooltip}
+      .data=${OPTIONS}
+      .value=${value}
+    ></nile-virtual-select>`);
+    await el.updateComplete;
+    const shown = oneEvent(el, 'nile-after-show');
+    (el.shadowRoot!.querySelector('[part="combobox"]') as HTMLElement).dispatchEvent(
+      new MouseEvent('mousedown', { bubbles: true, composed: true, button: 0 })
+    );
+    await shown;
+    await aTimeout(50);
+    mounted = el;
+    return el as any;
+  }
+
+  async function toggleSelected(el: any) {
+    (el.shadowRoot.querySelector('.select__footer nile-checkbox') as HTMLElement).click();
+    await el.updateComplete;
+    await aTimeout(30);
+  }
+
+  // The standalone select has no sized container here, so its options are not laid out; drive the same
+  // selection handler the option click uses.
+  async function pick(el: any, value: string) {
+    el.handleOptionSelection({ value });
+    await el.updateComplete;
+    await aTimeout(30);
+  }
+
+  const values = (el: any) => el.data.map((item: any) => item.value);
+
+  it('E1. showtooltip: an external value replace recomputes the Selected list', async () => {
+    const el = await mount(true);
+    await toggleSelected(el);
+    expect(values(el)).to.deep.equal(['option-1', 'option-2']);
+
+    el.value = ['option-5'];
+    await el.updateComplete;
+    await aTimeout(30);
+
+    expect(el.showSelected).to.be.true;
+    expect(values(el)).to.deep.equal(['option-5']);
+  });
+
+  it('E2. showtooltip: an external value that adds or removes items follows the Selected list', async () => {
+    const el = await mount(true);
+    await toggleSelected(el);
+
+    el.value = ['option-1', 'option-2', 'option-7'];
+    await el.updateComplete;
+    await aTimeout(30);
+    expect(values(el)).to.deep.equal(['option-1', 'option-2', 'option-7']);
+
+    el.value = ['option-2'];
+    await el.updateComplete;
+    await aTimeout(30);
+    expect(values(el)).to.deep.equal(['option-2']);
+  });
+
+  it('E3. showtooltip: an external empty value leaves the Selected view', async () => {
+    const el = await mount(true);
+    await toggleSelected(el);
+
+    el.value = [];
+    await el.updateComplete;
+    await aTimeout(30);
+
+    expect(el.showSelected).to.be.false;
+    expect(el.data.length).to.equal(200);
+  });
+
+  it('E4. showtooltip: a normal uncheck in the Selected view is not treated as external', async () => {
+    const el = await mount(true);
+    await toggleSelected(el);
+
+    await pick(el, 'option-2');
+
+    expect(el.value).to.deep.equal(['option-1']);
+    expect(values(el)).to.deep.equal(['option-1', 'option-2']);
+  });
+
+  it('E5. without showtooltip an external value leaves the Selected list as it was (pre-2.0.9)', async () => {
+    const el = await mount(false);
+    await toggleSelected(el);
+
+    el.value = ['option-5'];
+    await el.updateComplete;
+    await aTimeout(30);
+
+    expect(el.showSelected).to.be.true;
+    expect(values(el)).to.deep.equal(['option-1', 'option-2']);
+  });
+});

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

@@ -135,9 +135,10 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
   /** The name of the select, submitted as a name/value pair with form data. */
   @property() name = '';
 
-  /** Array of all option items for virtual scrolling */
   @property({ type: Array }) data: any = [];
 
+  private lastSeenValue: string | string[] | undefined;
+
   /** Original unfiltered option items for search functionality */
   @state() private originalOptionItems: any = [];
 
@@ -658,6 +659,15 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     event.preventDefault();
   }
 
+  /** Narrows `data` to the items that are currently selected (the "Selected" view). */
+  private applySelectedFilter(): void {
+    const selectedValues = Array.isArray(this.value) ? this.value : [this.value];
+    this.data = this.originalOptionItems.filter((item: any) => {
+      const itemValue = this.getItemValue(item);
+      return selectedValues.some(val => String(val) === String(itemValue));
+    });
+  }
+
   private toggleShowSelected(event: Event): void {
     event.stopPropagation();
     event.preventDefault();
@@ -668,11 +678,7 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
 
     if (this.showSelected) {
       this.searchValue = "";
-      const selectedValues = Array.isArray(this.value) ? this.value : [this.value];
-      this.data = this.originalOptionItems.filter((item: any) => {
-        const itemValue = this.getItemValue(item);
-        return selectedValues.some(val => String(val) === String(itemValue));
-      });
+      this.applySelectedFilter();
     } else {
       this.data = [...this.originalOptionItems];
     }
@@ -859,6 +865,7 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
   }
 
   private selectionChanged(): void {
+    this.lastSeenValue = this.value;
     const itemsToSearch = this.originalOptionItems.length > 0 ? this.originalOptionItems : this.data;
     this.selectedOptions = VirtualSelectSelectionManager.createVirtualOptionsFromValues(
       this.value,
@@ -1018,7 +1025,11 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
 
   @watch('value', { waitUntilFirstUpdate: true })
   handleValueChange(): void {
+    const externalValueChange = this.value !== this.lastSeenValue;
     this.selectionChanged();
+    if (externalValueChange && this.showTooltip && this.showSelected) {
+      this.applySelectedFilter();
+    }
     this.requestUpdate();
 
     // Update body append content if it's active

package/vscode-html-custom-data.json

@@ -595,18 +595,43 @@
     },
     {
       "name": "nile-breadcrumb-item",
-      "description": "Nile BreadCrumb Item component.\n\nAttributes:\n\n  * `separator` {`string`} - Render method\n\nProperties:\n\n  * `isLast` {`boolean`} - \n\n  * `separator` {`string`} - Render method\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile BreadCrumb Item component.\n\nAttributes:\n\n  * `separator` {`string`} - Render method\n\n  * `variant` {`\"default\" | \"outlined\"`} - Visual style of the item. `outlined` wraps the text in an outlined chip.\nSet automatically from the parent `nile-breadcrumb`'s `variant`.\n\nProperties:\n\n  * `isLast` {`boolean`} - \n\n  * `separator` {`string`} - Render method\n\n  * `variant` {`\"default\" | \"outlined\"`} - Visual style of the item. `outlined` wraps the text in an outlined chip.\nSet automatically from the parent `nile-breadcrumb`'s `variant`.\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "separator",
           "description": "`separator` {`string`} - Render method\n\nProperty: separator\n\nDefault: var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))"
+        },
+        {
+          "name": "variant",
+          "description": "`variant` {`\"default\" | \"outlined\"`} - Visual style of the item. `outlined` wraps the text in an outlined chip.\nSet automatically from the parent `nile-breadcrumb`'s `variant`.\n\nProperty: variant\n\nDefault: default",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "outlined"
+            }
+          ]
         }
       ]
     },
     {
       "name": "nile-breadcrumb",
-      "description": "Nile BreadCrumb component.\n\nProperties:\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
-      "attributes": []
+      "description": "Nile BreadCrumb component.\n\nAttributes:\n\n  * `variant` {`\"default\" | \"outlined\"`} - Visual style of the items. `outlined` renders each item inside an outlined chip;\ntext colours are unchanged. Propagated to every slotted `nile-breadcrumb-item`.\n\nProperties:\n\n  * `variant` {`\"default\" | \"outlined\"`} - Visual style of the items. `outlined` renders each item inside an outlined chip;\ntext colours are unchanged. Propagated to every slotted `nile-breadcrumb-item`.\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "attributes": [
+        {
+          "name": "variant",
+          "description": "`variant` {`\"default\" | \"outlined\"`} - Visual style of the items. `outlined` renders each item inside an outlined chip;\ntext colours are unchanged. Propagated to every slotted `nile-breadcrumb-item`.\n\nProperty: variant\n\nDefault: default",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "outlined"
+            }
+          ]
+        }
+      ]
     },
     {
       "name": "nile-button-filter",
@@ -3212,7 +3237,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 | \"horizontal\" | \"vertical\" | \"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 | \"horizontal\" | \"vertical\" | \"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`} - ",
+      "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` {`\"default\" | \"none\" | \"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 | \"horizontal\" | \"vertical\" | \"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` {`\"default\" | \"none\" | \"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 | \"horizontal\" | \"vertical\" | \"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",
@@ -3279,13 +3304,13 @@
         },
         {
           "name": "arrow",
-          "description": "`arrow` {`\"none\" | \"default\" | \"round\"`} - \n\nProperty: arrow\n\nDefault: round",
+          "description": "`arrow` {`\"default\" | \"none\" | \"round\"`} - \n\nProperty: arrow\n\nDefault: round",
           "values": [
             {
-              "name": "none"
+              "name": "default"
             },
             {
-              "name": "default"
+              "name": "none"
             },
             {
               "name": "round"
@@ -4572,7 +4597,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 | \"horizontal\" | \"vertical\" | \"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 | \"horizontal\" | \"vertical\" | \"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`} - ",
+      "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 | \"horizontal\" | \"vertical\" | \"initial\" | \"true\" | \"false\"`} - \n\n  * `arrow` {`\"default\" | \"small\" | \"none\" | \"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 | \"horizontal\" | \"vertical\" | \"initial\" | \"true\" | \"false\"`} - \n\n  * `arrow` {`\"default\" | \"small\" | \"none\" | \"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",
@@ -4706,16 +4731,16 @@
         },
         {
           "name": "arrow",
-          "description": "`arrow` {`\"small\" | \"none\" | \"default\" | \"large\" | \"round\" | \"narrow\" | \"wide\"`} - \n\nProperty: arrow\n\nDefault: default",
+          "description": "`arrow` {`\"default\" | \"small\" | \"none\" | \"large\" | \"round\" | \"narrow\" | \"wide\"`} - \n\nProperty: arrow\n\nDefault: default",
           "values": [
             {
-              "name": "small"
+              "name": "default"
             },
             {
-              "name": "none"
+              "name": "small"
             },
             {
-              "name": "default"
+              "name": "none"
             },
             {
               "name": "large"
@@ -8536,11 +8561,11 @@
     },
     {
       "name": "nile-virtual-select",
-      "description": "Events:\n\n  * `nile-change` {} - Emitted when the control's value changes.\n\n  * `nile-clear` {} - Emitted when the control's value is cleared.\n\n  * `nile-input` {} - Emitted when the control receives input.\n\n  * `nile-focus` {} - Emitted when the control gains focus.\n\n  * `nile-blur` {} - Emitted when the control loses focus.\n\n  * `nile-show` {} - Emitted when the select's menu opens.\n\n  * `nile-after-show` {} - Emitted after the select's menu opens and all animations are complete.\n\n  * `nile-hide` {} - Emitted when the select's menu closes.\n\n  * `nile-after-hide` {} - Emitted after the select's menu closes and all animations are complete.\n\n  * `nile-invalid` {} - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n  * `nile-search` {} - Emitted when the user types in the search input. The event payload includes the search query for backend search functionality.\n\n  * `nile-scroll` {} - Emitted when the user scrolls within the virtualized container. The event payload includes scroll position information.\n\n  * `nile-scroll-start` {} - Emitted when the user starts scrolling within the virtualized container.\n\n  * `nile-scroll-end` {} - Emitted when the user stops scrolling and reaches the bottom of the virtualized container (debounced).\n\n  * `nile-remove` {`CustomEvent<unknown>`} - \n\nSlots:\n\n  * `label` {} - The input's label. Alternatively, you can use the `label` attribute.\n\n  * `prefix` {} - Used to prepend a presentational icon or similar element to the combobox.\n\n  * `clear-icon` {} - An icon to use in lieu of the default clear icon.\n\n  * `expand-icon` {} - The icon to show when the control is expanded and collapsed.\n\n  * `help-text` {} - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\nAttributes:\n\n  * `data` - Array of all option items for virtual scrolling\n\n  * `size` {`\"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  * `autoResize` {`boolean`} - Re-runs the fitted-chip layout when the control's own width changes.\n\n  * `searchEnabled` {`boolean`} - Enable search functionality\n\n  * `enableVisibilityEffect` {`boolean`} - \n\n  * `internal-search-placeholder` {`string`} - Search input placeholder\n\n  * `disableLocalSearch` {`boolean`} - Disable local search filtering\n\n  * `optionsLoading` {`boolean`} - Show loading state\n\n  * `loading` {`boolean`} - Show loading state using nile-loader\n\n  * `multiple` {`boolean`} - Allows more than one option to be selected.\n\n  * `help-text` {`string`} - Help text\n\n  * `error-message` {`string`} - Error message\n\n  * `warning` {`boolean`} - Sets the input to a warning state\n\n  * `error` {`boolean`} - Sets the input to an error state\n\n  * `success` {`boolean`} - Sets the input to a success state\n\n  * `clearable` {`boolean`} - Adds a clear button when the select is not empty.\n\n  * `open` {`boolean`} - The select's open state.\n\n  * `hoist` {`boolean`} - Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n\n  * `filled` {`boolean`} - Draws a filled select.\n\n  * `pill` {`boolean`} - Draws a pill-style select with rounded edges.\n\n  * `label` {`string`} - The select's label. If you need to display HTML, use the `label` slot instead.\n\n  * `placement` {`ComboboxPlacement`} - The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.\n\n  * `showNoResults` {`boolean`} - Show no results message\n\n  * `noResultsMessage` {`string`} - No results message\n\n  * `showSelected` {`boolean`} - Show selected options only\n\n  * `blockValueChange` {`boolean`} - Block value change events\n\n  * `noWidthSync` {`boolean`} - Disable width synchronization\n\n  * `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  * `max-options-visible` {`number`} - \n\n  * `chipMinWidth` {`number`} - Minimum width, in px, of a squeezed chip. Needs `showtooltip`.\n\n  * `chipMaxWidth` {`number`} - Maximum width, in px, of a squeezed chip. Needs `showtooltip`.\n\n  * `showTooltip` {`boolean`} - Opts into the fitted chip row: chips are sized between chipMinWidth and chipMaxWidth, the\nrest collapse into a +N button, and a clipped chip shows its full value in a tooltip.\nOff by default, which keeps the pre-2.0.9 chip row.\n\n  * `enableTabClose` {`boolean`} - \n\n  * `descriptionSearchEnabled` {`boolean`} - \n\n  * `allowHtmlLabel` {`boolean`} - \n\n  * `enableDescription` {`boolean`} - \n\n  * `legacy` {`boolean`} - Legacy: hide the option checkbox (the \"Show Selected\" footer is kept).\n\n  * `tickOnSelect` {`boolean`} - Variant: show a tick on the right of the selected option (single-select).\n\n  * `name` {`string`} - The name of the select, submitted as a name/value pair with form data.\n\n  * `value` {`string | string[]`} - The current value of the select. When `multiple` is enabled, the value will be an array of selected values.\n\n  * `disabled` {`boolean`} - Disables the select control.\n\n  * `form` {`string`} - By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.\n\n  * `required` {`boolean`} - The select's required attribute.\n\nProperties:\n\n  * `styles` - \n\n  * `formControlController` - \n\n  * `hasSlotController` - \n\n  * `portalManager` - \n\n  * `popup` - \n\n  * `combobox` {`HTMLElement`} - \n\n  * `displayInput` {`HTMLInputElement`} - \n\n  * `valueInput` {`HTMLInputElement`} - \n\n  * `virtualizedContainer` {`HTMLElement`} - \n\n  * `hasFocus` {`boolean`} - \n\n  * `displayLabel` {`string`} - \n\n  * `selectedOptions` {`VirtualOption[]`} - \n\n  * `oldValue` {`string | string[]`} - \n\n  * `scrollTimeout` {`number | undefined`} - \n\n  * `scrolling` {`boolean`} - \n\n  * `visibilityManager` - \n\n  * `data` - Array of all option items for virtual scrolling\n\n  * `originalOptionItems` - Original unfiltered option items for search functionality\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  * `autoResize` {`boolean`} - Re-runs the fitted-chip layout when the control's own width changes.\n\n  * `searchValue` {`string`} - Current search value\n\n  * `searchEnabled` {`boolean`} - Enable search functionality\n\n  * `enableVisibilityEffect` {`boolean`} - \n\n  * `internalSearchPlaceHolder` {`string`} - Search input placeholder\n\n  * `disableLocalSearch` {`boolean`} - Disable local search filtering\n\n  * `optionsLoading` {`boolean`} - Show loading state\n\n  * `loading` {`boolean`} - Show loading state using nile-loader\n\n  * `multiple` {`boolean`} - Allows more than one option to be selected.\n\n  * `helpText` {`string`} - Help text\n\n  * `errorMessage` {`string`} - Error message\n\n  * `warning` {`boolean`} - Sets the input to a warning state\n\n  * `error` {`boolean`} - Sets the input to an error state\n\n  * `success` {`boolean`} - Sets the input to a success state\n\n  * `clearable` {`boolean`} - Adds a clear button when the select is not empty.\n\n  * `open` {`boolean`} - The select's open state.\n\n  * `hoist` {`boolean`} - Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n\n  * `filled` {`boolean`} - Draws a filled select.\n\n  * `pill` {`boolean`} - Draws a pill-style select with rounded edges.\n\n  * `label` {`string`} - The select's label. If you need to display HTML, use the `label` slot instead.\n\n  * `placement` {`ComboboxPlacement`} - The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.\n\n  * `showNoResults` {`boolean`} - Show no results message\n\n  * `noResultsMessage` {`string`} - No results message\n\n  * `showSelected` {`boolean`} - Show selected options only\n\n  * `renderItemConfig` {`RenderItemConfig | undefined`} - Enhanced configuration for rendering items with support for display text, value, and search text\n\n  * `blockValueChange` {`boolean`} - Block value change events\n\n  * `noWidthSync` {`boolean`} - Disable width synchronization\n\n  * `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  * `_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  * `maxOptionsVisibleExplicit` {`boolean`} - \n\n  * `maxOptionsVisible` {`number`} - \n\n  * `chipFittingEnabled` {`boolean`} - \n\n  * `legacyTagFitEnabled` {`boolean`} - \n\n  * `chipMinWidth` {`number`} - Minimum width, in px, of a squeezed chip. Needs `showtooltip`.\n\n  * `chipMaxWidth` {`number`} - Maximum width, in px, of a squeezed chip. Needs `showtooltip`.\n\n  * `showTooltip` {`boolean`} - Opts into the fitted chip row: chips are sized between chipMinWidth and chipMaxWidth, the\nrest collapse into a +N button, and a clipped chip shows its full value in a tooltip.\nOff by default, which keeps the pre-2.0.9 chip row.\n\n  * `hiddenChipCount` {`number`} - \n\n  * `oldMaxOptionsVisible` {`number`} - \n\n  * `lastOverflowWidth` {`number`} - Last measured width of the overflow button, in px.\n\n  * `chipFitFrame` {`number`} - \n\n  * `lastChipLayout` {`{ hidden: number; visible: number; }`} - \n\n  * `clippedChips` {`boolean[]`} - \n\n  * `clipFrame` {`number`} - \n\n  * `enableTabClose` {`boolean`} - \n\n  * `descriptionSearchEnabled` {`boolean`} - \n\n  * `allowHtmlLabel` {`boolean`} - \n\n  * `enableDescription` {`boolean`} - \n\n  * `legacy` {`boolean`} - Legacy: hide the option checkbox (the \"Show Selected\" footer is kept).\n\n  * `tickOnSelect` {`boolean`} - Variant: show a tick on the right of the selected option (single-select).\n\n  * `showListbox` {`boolean`} - \n\n  * `wasShowSelectedCheckedOnClose` {`boolean`} - \n\n  * `handleDocumentMouseDown` - \n\n  * `handleWindowError` - This is a workaround for an error in the Lit Labs virtualizer.\nSince there are no specific guidelines available to fix the issue,\nwe are catching only the error message related to the virtualizer.\n\n  * `handleWindowResize` - \n\n  * `handleWindowScroll` - \n\n  * `observedTagsContainer` {`Element | undefined`} - \n\n  * `resizeController` - \n\n  * `name` {`string`} - The name of the select, submitted as a name/value pair with form data.\n\n  * `value` {`string | string[]`} - The current value of the select. When `multiple` is enabled, the value will be an array of selected values.\n\n  * `disabled` {`boolean`} - Disables the select control.\n\n  * `defaultValue` {`string | string[]`} - The default value of the form control. Primarily used for resetting the form control.\n\n  * `defaultChecked` {`boolean | undefined`} - \n\n  * `form` {`string`} - By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.\n\n  * `pattern` {`string | undefined`} - \n\n  * `min` {`string | number | Date | undefined`} - \n\n  * `max` {`string | number | Date | undefined`} - \n\n  * `step` {`number | \"any\" | undefined`} - \n\n  * `required` {`boolean`} - The select's required attribute.\n\n  * `minlength` {`number | undefined`} - \n\n  * `maxlength` {`number | undefined`} - \n\n  * `validity` {`ValidityState`} - Gets the validity state object\n\n  * `validationMessage` {`string`} - Gets the validation message\n\n  * `checkValidity` - \n\n  * `getForm` - \n\n  * `reportValidity` - \n\n  * `setCustomValidity` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Events:\n\n  * `nile-change` {} - Emitted when the control's value changes.\n\n  * `nile-clear` {} - Emitted when the control's value is cleared.\n\n  * `nile-input` {} - Emitted when the control receives input.\n\n  * `nile-focus` {} - Emitted when the control gains focus.\n\n  * `nile-blur` {} - Emitted when the control loses focus.\n\n  * `nile-show` {} - Emitted when the select's menu opens.\n\n  * `nile-after-show` {} - Emitted after the select's menu opens and all animations are complete.\n\n  * `nile-hide` {} - Emitted when the select's menu closes.\n\n  * `nile-after-hide` {} - Emitted after the select's menu closes and all animations are complete.\n\n  * `nile-invalid` {} - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n  * `nile-search` {} - Emitted when the user types in the search input. The event payload includes the search query for backend search functionality.\n\n  * `nile-scroll` {} - Emitted when the user scrolls within the virtualized container. The event payload includes scroll position information.\n\n  * `nile-scroll-start` {} - Emitted when the user starts scrolling within the virtualized container.\n\n  * `nile-scroll-end` {} - Emitted when the user stops scrolling and reaches the bottom of the virtualized container (debounced).\n\n  * `nile-remove` {`CustomEvent<unknown>`} - \n\nSlots:\n\n  * `label` {} - The input's label. Alternatively, you can use the `label` attribute.\n\n  * `prefix` {} - Used to prepend a presentational icon or similar element to the combobox.\n\n  * `clear-icon` {} - An icon to use in lieu of the default clear icon.\n\n  * `expand-icon` {} - The icon to show when the control is expanded and collapsed.\n\n  * `help-text` {} - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\nAttributes:\n\n  * `data` - \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  * `autoResize` {`boolean`} - Re-runs the fitted-chip layout when the control's own width changes.\n\n  * `searchEnabled` {`boolean`} - Enable search functionality\n\n  * `enableVisibilityEffect` {`boolean`} - \n\n  * `internal-search-placeholder` {`string`} - Search input placeholder\n\n  * `disableLocalSearch` {`boolean`} - Disable local search filtering\n\n  * `optionsLoading` {`boolean`} - Show loading state\n\n  * `loading` {`boolean`} - Show loading state using nile-loader\n\n  * `multiple` {`boolean`} - Allows more than one option to be selected.\n\n  * `help-text` {`string`} - Help text\n\n  * `error-message` {`string`} - Error message\n\n  * `warning` {`boolean`} - Sets the input to a warning state\n\n  * `error` {`boolean`} - Sets the input to an error state\n\n  * `success` {`boolean`} - Sets the input to a success state\n\n  * `clearable` {`boolean`} - Adds a clear button when the select is not empty.\n\n  * `open` {`boolean`} - The select's open state.\n\n  * `hoist` {`boolean`} - Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n\n  * `filled` {`boolean`} - Draws a filled select.\n\n  * `pill` {`boolean`} - Draws a pill-style select with rounded edges.\n\n  * `label` {`string`} - The select's label. If you need to display HTML, use the `label` slot instead.\n\n  * `placement` {`ComboboxPlacement`} - The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.\n\n  * `showNoResults` {`boolean`} - Show no results message\n\n  * `noResultsMessage` {`string`} - No results message\n\n  * `showSelected` {`boolean`} - Show selected options only\n\n  * `blockValueChange` {`boolean`} - Block value change events\n\n  * `noWidthSync` {`boolean`} - Disable width synchronization\n\n  * `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  * `max-options-visible` {`number`} - \n\n  * `chipMinWidth` {`number`} - Minimum width, in px, of a squeezed chip. Needs `showtooltip`.\n\n  * `chipMaxWidth` {`number`} - Maximum width, in px, of a squeezed chip. Needs `showtooltip`.\n\n  * `showTooltip` {`boolean`} - Opts into the fitted chip row: chips are sized between chipMinWidth and chipMaxWidth, the\nrest collapse into a +N button, and a clipped chip shows its full value in a tooltip.\nOff by default, which keeps the pre-2.0.9 chip row.\n\n  * `enableTabClose` {`boolean`} - \n\n  * `descriptionSearchEnabled` {`boolean`} - \n\n  * `allowHtmlLabel` {`boolean`} - \n\n  * `enableDescription` {`boolean`} - \n\n  * `legacy` {`boolean`} - Legacy: hide the option checkbox (the \"Show Selected\" footer is kept).\n\n  * `tickOnSelect` {`boolean`} - Variant: show a tick on the right of the selected option (single-select).\n\n  * `name` {`string`} - The name of the select, submitted as a name/value pair with form data.\n\n  * `value` {`string | string[]`} - The current value of the select. When `multiple` is enabled, the value will be an array of selected values.\n\n  * `disabled` {`boolean`} - Disables the select control.\n\n  * `form` {`string`} - By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.\n\n  * `required` {`boolean`} - The select's required attribute.\n\nProperties:\n\n  * `styles` - \n\n  * `formControlController` - \n\n  * `hasSlotController` - \n\n  * `portalManager` - \n\n  * `popup` - \n\n  * `combobox` {`HTMLElement`} - \n\n  * `displayInput` {`HTMLInputElement`} - \n\n  * `valueInput` {`HTMLInputElement`} - \n\n  * `virtualizedContainer` {`HTMLElement`} - \n\n  * `hasFocus` {`boolean`} - \n\n  * `displayLabel` {`string`} - \n\n  * `selectedOptions` {`VirtualOption[]`} - \n\n  * `oldValue` {`string | string[]`} - \n\n  * `scrollTimeout` {`number | undefined`} - \n\n  * `scrolling` {`boolean`} - \n\n  * `visibilityManager` - \n\n  * `data` - \n\n  * `lastSeenValue` {`string | string[] | undefined`} - \n\n  * `originalOptionItems` - Original unfiltered option items for search functionality\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  * `autoResize` {`boolean`} - Re-runs the fitted-chip layout when the control's own width changes.\n\n  * `searchValue` {`string`} - Current search value\n\n  * `searchEnabled` {`boolean`} - Enable search functionality\n\n  * `enableVisibilityEffect` {`boolean`} - \n\n  * `internalSearchPlaceHolder` {`string`} - Search input placeholder\n\n  * `disableLocalSearch` {`boolean`} - Disable local search filtering\n\n  * `optionsLoading` {`boolean`} - Show loading state\n\n  * `loading` {`boolean`} - Show loading state using nile-loader\n\n  * `multiple` {`boolean`} - Allows more than one option to be selected.\n\n  * `helpText` {`string`} - Help text\n\n  * `errorMessage` {`string`} - Error message\n\n  * `warning` {`boolean`} - Sets the input to a warning state\n\n  * `error` {`boolean`} - Sets the input to an error state\n\n  * `success` {`boolean`} - Sets the input to a success state\n\n  * `clearable` {`boolean`} - Adds a clear button when the select is not empty.\n\n  * `open` {`boolean`} - The select's open state.\n\n  * `hoist` {`boolean`} - Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n\n  * `filled` {`boolean`} - Draws a filled select.\n\n  * `pill` {`boolean`} - Draws a pill-style select with rounded edges.\n\n  * `label` {`string`} - The select's label. If you need to display HTML, use the `label` slot instead.\n\n  * `placement` {`ComboboxPlacement`} - The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.\n\n  * `showNoResults` {`boolean`} - Show no results message\n\n  * `noResultsMessage` {`string`} - No results message\n\n  * `showSelected` {`boolean`} - Show selected options only\n\n  * `renderItemConfig` {`RenderItemConfig | undefined`} - Enhanced configuration for rendering items with support for display text, value, and search text\n\n  * `blockValueChange` {`boolean`} - Block value change events\n\n  * `noWidthSync` {`boolean`} - Disable width synchronization\n\n  * `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  * `_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  * `maxOptionsVisibleExplicit` {`boolean`} - \n\n  * `maxOptionsVisible` {`number`} - \n\n  * `chipFittingEnabled` {`boolean`} - \n\n  * `legacyTagFitEnabled` {`boolean`} - \n\n  * `chipMinWidth` {`number`} - Minimum width, in px, of a squeezed chip. Needs `showtooltip`.\n\n  * `chipMaxWidth` {`number`} - Maximum width, in px, of a squeezed chip. Needs `showtooltip`.\n\n  * `showTooltip` {`boolean`} - Opts into the fitted chip row: chips are sized between chipMinWidth and chipMaxWidth, the\nrest collapse into a +N button, and a clipped chip shows its full value in a tooltip.\nOff by default, which keeps the pre-2.0.9 chip row.\n\n  * `hiddenChipCount` {`number`} - \n\n  * `oldMaxOptionsVisible` {`number`} - \n\n  * `lastOverflowWidth` {`number`} - Last measured width of the overflow button, in px.\n\n  * `chipFitFrame` {`number`} - \n\n  * `lastChipLayout` {`{ hidden: number; visible: number; }`} - \n\n  * `clippedChips` {`boolean[]`} - \n\n  * `clipFrame` {`number`} - \n\n  * `enableTabClose` {`boolean`} - \n\n  * `descriptionSearchEnabled` {`boolean`} - \n\n  * `allowHtmlLabel` {`boolean`} - \n\n  * `enableDescription` {`boolean`} - \n\n  * `legacy` {`boolean`} - Legacy: hide the option checkbox (the \"Show Selected\" footer is kept).\n\n  * `tickOnSelect` {`boolean`} - Variant: show a tick on the right of the selected option (single-select).\n\n  * `showListbox` {`boolean`} - \n\n  * `wasShowSelectedCheckedOnClose` {`boolean`} - \n\n  * `handleDocumentMouseDown` - \n\n  * `handleWindowError` - This is a workaround for an error in the Lit Labs virtualizer.\nSince there are no specific guidelines available to fix the issue,\nwe are catching only the error message related to the virtualizer.\n\n  * `handleWindowResize` - \n\n  * `handleWindowScroll` - \n\n  * `observedTagsContainer` {`Element | undefined`} - \n\n  * `resizeController` - \n\n  * `name` {`string`} - The name of the select, submitted as a name/value pair with form data.\n\n  * `value` {`string | string[]`} - The current value of the select. When `multiple` is enabled, the value will be an array of selected values.\n\n  * `disabled` {`boolean`} - Disables the select control.\n\n  * `defaultValue` {`string | string[]`} - The default value of the form control. Primarily used for resetting the form control.\n\n  * `defaultChecked` {`boolean | undefined`} - \n\n  * `form` {`string`} - By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.\n\n  * `pattern` {`string | undefined`} - \n\n  * `min` {`string | number | Date | undefined`} - \n\n  * `max` {`string | number | Date | undefined`} - \n\n  * `step` {`number | \"any\" | undefined`} - \n\n  * `required` {`boolean`} - The select's required attribute.\n\n  * `minlength` {`number | undefined`} - \n\n  * `maxlength` {`number | undefined`} - \n\n  * `validity` {`ValidityState`} - Gets the validity state object\n\n  * `validationMessage` {`string`} - Gets the validation message\n\n  * `checkValidity` - \n\n  * `getForm` - \n\n  * `reportValidity` - \n\n  * `setCustomValidity` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "data",
-          "description": "`data` - Array of all option items for virtual scrolling\n\nProperty: data\n\nDefault: "
+          "description": "`data` - \n\nProperty: data\n\nDefault: "
         },
         {
           "name": "size",