@aquera/nile-elements 2.0.8 → 2.0.9

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

@@ -7,6 +7,7 @@
 import '../nile-icon';
 import '../nile-popup/nile-popup';
 import '../nile-tag/nile-tag';
+import '../nile-lite-tooltip/nile-lite-tooltip';
 import '../nile-checkbox/nile-checkbox';
 import '../nile-loader/nile-loader';
 import NileElement from '../internal/nile-element';
@@ -61,6 +62,10 @@ import type { VirtualOption, RenderItemConfig } from './types.js';
  * @csspart listbox - The listbox container where options are slotted.
  * @csspart tags - The container that houses option tags when `multiple` is used.
  * @csspart tag - The individual tags that represent each multiselect option.
+ * @csspart tag__base - The tag's base part.
+ * @csspart tag__content - The tag's content part.
+ * @csspart tag__remove-button - The tag's remove button.
+ * @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 footer - The footer container with show selected and clear all options.
@@ -98,7 +103,7 @@ export declare class NileVirtualSelect extends NileElement implements NileFormCo
     size: 'small' | 'medium' | 'large';
     /** Placeholder text to show as a hint when the select is empty. */
     placeholder: string;
-    /** Enable automatic resizing of tags area */
+    /** Re-runs the fitted-chip layout when the control's own width changes. */
     autoResize: boolean;
     /** Current search value */
     searchValue: string;
@@ -176,8 +181,27 @@ export declare class NileVirtualSelect extends NileElement implements NileFormCo
      * The maximum number of selected options to show when `multiple` is true. After the maximum, "+n" will be shown to
      * indicate the number of additional items that are selected. Set to 0 to remove the limit.
      */
-    maxOptionsVisible: number;
-    oldMaxOptionsVisible: number;
+    private _maxOptionsVisible;
+    private maxOptionsVisibleExplicit;
+    get maxOptionsVisible(): number;
+    set maxOptionsVisible(value: number);
+    private get chipFittingEnabled();
+    /** Minimum width, in px, of a squeezed chip. Needs `showtooltip`. */
+    chipMinWidth: number;
+    /** Maximum width, in px, of a squeezed chip. Needs `showtooltip`. */
+    chipMaxWidth: number;
+    /**
+     * Shows a chip's full value in a tooltip when its text is clipped, and is
+     * what allows a chip to be truncated at all.
+     */
+    showTooltip: boolean;
+    private hiddenChipCount;
+    /** Last measured width of the overflow button, in px. */
+    private lastOverflowWidth;
+    private chipFitFrame;
+    private lastChipLayout;
+    private clippedChips;
+    private clipFrame;
     enableTabClose: boolean;
     descriptionSearchEnabled: boolean;
     allowHtmlLabel: boolean;
@@ -247,6 +271,7 @@ export declare class NileVirtualSelect extends NileElement implements NileFormCo
     private unSelectAll;
     private handleLabelClick;
     private handleComboboxMouseDown;
+    private observedTagsContainer?;
     private resizeController;
     private shouldIgnoreComboboxClick;
     private handleComboboxKeyDown;
@@ -295,6 +320,7 @@ export declare class NileVirtualSelect extends NileElement implements NileFormCo
     private renderCombobox;
     private renderPrefix;
     private renderDisplayInput;
+    private renderFittedTags;
     private renderTags;
     private renderValueInput;
     private renderClearButton;
@@ -309,8 +335,23 @@ export declare class NileVirtualSelect extends NileElement implements NileFormCo
     nileInput(value: any): void;
     nileChange(value: any): void;
     private updateValidity;
-    private calculateWidthOfSelectTagsDiv;
+    private setupResizeObserver;
     private calculateTotalWidthOfTags;
+    private allocateChipWidths;
+    private computeChipFit;
+    private layoutChips;
+    private isChipClipped;
+    private refreshClippedChips;
+    private scheduleClipCheck;
+    /** A chip gets a tooltip only while its text is measured as clipped. */
+    private chipTooltipDisabled;
+    private destroyChipFit;
+    private getChipLabel;
+    private handleChipKeyDown;
+    /** Moves focus to the next chip, the last chip, or the field after a removal. */
+    private restoreFocusAfterChipRemoval;
+    private handleOverflowActivate;
+    private handleOverflowKeyDown;
     private resetScrollPosition;
 }
 export default NileVirtualSelect;

package/dist/src/nile-virtual-select/nile-virtual-select.js

@@ -11,12 +11,14 @@ import { styles } from './nile-virtual-select.css';
 import '../nile-icon';
 import '../nile-popup/nile-popup';
 import '../nile-tag/nile-tag';
+import '../nile-lite-tooltip/nile-lite-tooltip';
 import '../nile-checkbox/nile-checkbox';
 import '../nile-loader/nile-loader';
 import { animateTo, stopAnimations } from '../internal/animate';
 import { classMap } from 'lit/directives/class-map.js';
 import { query, state } from 'lit/decorators.js';
 import { defaultValue } from '../internal/default-value';
+import { KeyCode } from '../internal/enum';
 import { FormControlController } from '../internal/form';
 import { getAnimation, setDefaultAnimation, } from '../utilities/animation-registry';
 import { HasSlotController } from '../internal/slot';
@@ -77,6 +79,10 @@ import { VisibilityManager } from '../utilities/visibility-manager.js';
  * @csspart listbox - The listbox container where options are slotted.
  * @csspart tags - The container that houses option tags when `multiple` is used.
  * @csspart tag - The individual tags that represent each multiselect option.
+ * @csspart tag__base - The tag's base part.
+ * @csspart tag__content - The tag's content part.
+ * @csspart tag__remove-button - The tag's remove button.
+ * @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 footer - The footer container with show selected and clear all options.
@@ -110,7 +116,7 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
         this.size = 'medium';
         /** Placeholder text to show as a hint when the select is empty. */
         this.placeholder = 'Select...';
-        /** Enable automatic resizing of tags area */
+        /** Re-runs the fitted-chip layout when the control's own width changes. */
         this.autoResize = false;
         /** Current search value */
         this.searchValue = '';
@@ -186,8 +192,24 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
          * The maximum number of selected options to show when `multiple` is true. After the maximum, "+n" will be shown to
          * indicate the number of additional items that are selected. Set to 0 to remove the limit.
          */
-        this.maxOptionsVisible = 3;
-        this.oldMaxOptionsVisible = 1;
+        this._maxOptionsVisible = 3;
+        this.maxOptionsVisibleExplicit = false;
+        /** Minimum width, in px, of a squeezed chip. Needs `showtooltip`. */
+        this.chipMinWidth = 110;
+        /** Maximum width, in px, of a squeezed chip. Needs `showtooltip`. */
+        this.chipMaxWidth = 180;
+        /**
+         * Shows a chip's full value in a tooltip when its text is clipped, and is
+         * what allows a chip to be truncated at all.
+         */
+        this.showTooltip = false;
+        this.hiddenChipCount = 0;
+        /** Last measured width of the overflow button, in px. */
+        this.lastOverflowWidth = 0;
+        this.chipFitFrame = 0;
+        this.lastChipLayout = { hidden: -1, visible: -1 };
+        this.clippedChips = [];
+        this.clipFrame = 0;
         this.enableTabClose = false;
         this.descriptionSearchEnabled = false;
         this.allowHtmlLabel = true;
@@ -237,6 +259,19 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
             }
         });
     }
+    get maxOptionsVisible() {
+        return this._maxOptionsVisible;
+    }
+    set maxOptionsVisible(value) {
+        const previous = this._maxOptionsVisible;
+        this._maxOptionsVisible = value;
+        // Any assignment opts this instance out of automatic chip fitting.
+        this.maxOptionsVisibleExplicit = true;
+        this.requestUpdate('maxOptionsVisible', previous);
+    }
+    get chipFittingEnabled() {
+        return !!this.multiple && !this.maxOptionsVisibleExplicit;
+    }
     /** Gets the validity state object */
     get validity() {
         return this.valueInput?.validity;
@@ -265,19 +300,26 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
         }
         // Clean up body append elements
         this.portalManager.cleanupPortalAppend();
+        this.destroyChipFit();
     }
     updated(changedProperties) {
         if (changedProperties.has('value')) {
             this.selectionChanged();
         }
-        if (changedProperties.has('autoResize')) {
-            const tagsDiv = this.shadowRoot?.querySelector('.select__tags');
-            if (this.autoResize && tagsDiv) {
-                this.resizeController.observe(tagsDiv);
-            }
-            else if (tagsDiv) {
-                this.resizeController.unobserve(tagsDiv);
-            }
+        if (changedProperties.has('autoResize') ||
+            changedProperties.has('multiple') ||
+            changedProperties.has('maxOptionsVisible')) {
+            this.setupResizeObserver();
+        }
+        if (changedProperties.has('chipMinWidth') ||
+            changedProperties.has('chipMaxWidth')) {
+            this.destroyChipFit();
+        }
+        if (this.chipFittingEnabled) {
+            this.calculateTotalWidthOfTags();
+        }
+        if (this.multiple && this.showTooltip) {
+            this.scheduleClipCheck();
         }
     }
     initializeComponent() {
@@ -502,7 +544,9 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
     shouldIgnoreComboboxClick(event) {
         const path = event.composedPath();
         const isIconButton = path.some(el => el instanceof Element && el.tagName.toLowerCase() === 'nile-icon-button');
-        return this.disabled || isIconButton;
+        const isOverflowButton = path.some(el => el instanceof HTMLButtonElement &&
+            el.classList.contains('select__tags-count'));
+        return this.disabled || isIconButton || isOverflowButton;
     }
     handleComboboxKeyDown(event) {
         if (this.isEnterOrSpaceKey(event)) {
@@ -1048,20 +1092,74 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
       />
     `;
     }
+    renderFittedTags() {
+        return html `
+      <div part="tags" class="select__tags select__tags--fitted">
+        ${this.selectedOptions.map((option, index) => {
+            const label = this.getChipLabel(option);
+            return html `
+            <nile-lite-tooltip
+              class="select__tag-tip"
+              .content=${label}
+              ?disabled=${this.chipTooltipDisabled(index)}
+            >
+            <nile-tag
+              part="tag"
+              exportparts="
+                  base:tag__base,
+                  content:tag__content,
+                  remove-button:tag__remove-button,
+                  remove-button__base:tag__remove-button__base,
+                  prefix:tag__prefix,
+                  prefix_content_wrapper:tag__prefix_content_wrapper
+                "
+              ?pill=${this.pill}
+              size=${this.size}
+              removable
+              tabindex="0"
+              aria-label=${`${label}. Press Backspace or Delete to remove.`}
+              @nile-remove=${(event) => this.handleTagRemove(event, option)}
+              @keydown=${(event) => this.handleChipKeyDown(event, option)}
+            >
+              ${label}
+            </nile-tag>
+            </nile-lite-tooltip>
+          `;
+        })}
+        ${this.hiddenChipCount > 0
+            ? html `<button
+              type="button"
+              class="select__tags-count"
+              ?disabled=${this.disabled}
+              aria-controls="listbox"
+              aria-expanded=${this.open ? 'true' : 'false'}
+              aria-haspopup="listbox"
+              aria-label=${`${this.hiddenChipCount} more selected`}
+              @click=${this.handleOverflowActivate}
+              @keydown=${this.handleOverflowKeyDown}
+              >+${this.hiddenChipCount}</button
+            >`
+            : ''}
+      </div>
+    `;
+    }
     renderTags() {
+        if (this.chipFittingEnabled) {
+            return this.renderFittedTags();
+        }
         return this.multiple
             ? html `
           <div part="tags" class="select__tags">
             ${this.selectedOptions.map((option, index) => {
                 if (index < this.maxOptionsVisible ||
                     this.maxOptionsVisible <= 0) {
-                    const classes = {
-                        select__invisible: index + 1 > this.oldMaxOptionsVisible &&
-                            this.maxOptionsVisible === Infinity,
-                    };
                     return html `
+                  <nile-lite-tooltip
+                    class="select__tag-tip"
+                    .content=${option.getTextLabel()}
+                    ?disabled=${this.chipTooltipDisabled(index)}
+                  >
                   <nile-tag
-                    class=${classMap(classes)}
                     part="tag"
                     exportparts="
                         base:tag__base,
@@ -1069,6 +1167,7 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
                         remove-button:tag__remove-button,
                         remove-button__base:tag__remove-button__base
                       "
+                    style="max-width:${this.chipMaxWidth}px"
                     ?pill=${this.pill}
                     size=${this.size}
                     removable
@@ -1076,6 +1175,7 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
                   >
                     ${option.getTextLabel()}
                   </nile-tag>
+                  </nile-lite-tooltip>
                 `;
                 }
                 else if (index === this.maxOptionsVisible) {
@@ -1222,14 +1322,16 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
             @click="${this.handleFooterClick}"
           >
             <span
+              class="select__footer-action"
               @click="${this.toggleShowSelected}"
               style="cursor: pointer;"
+              title="Show selected"
             >
               <nile-checkbox
                 ?disabled="${this.selectedOptions.length === 0}"
                 ?checked="${this.showSelected}"
               >
-                &nbsp; Show Selected</nile-checkbox
+                              <span class="select__footer-label">Selected</span></nile-checkbox
               >
             </span>
             ${this.selectedOptions.length !== 0
@@ -1237,8 +1339,16 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
                   <span
                     class="select__clear"
                     @click="${this.unSelectAll}"
+                    title="Clear"
                   >
-                    Clear All
+                    <nile-glyph
+                      class="select__footer-glyph"
+                      name="ng-eraser"
+                      size="16"
+                      method="var(--nile-svg-method-stroke, var(--ng-svg-method-stroke))"
+                      color="var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700))"
+                    ></nile-glyph
+                    ><span class="select__footer-label">Clear</span>
                   </span>
                 `
                 : ``}
@@ -1274,50 +1384,254 @@ let NileVirtualSelect = class NileVirtualSelect extends NileElement {
             this.formControlController.updateValidity();
         });
     }
-    calculateWidthOfSelectTagsDiv() {
-        if (this.shadowRoot) {
-            const selectTagsDiv = this.shadowRoot.querySelector('.select__tags');
-            if (selectTagsDiv) {
-                const width = selectTagsDiv.offsetWidth;
-                return width - 70;
-            }
+    setupResizeObserver() {
+        const wanted = this.autoResize && this.chipFittingEnabled
+            ? this.shadowRoot?.querySelector('.select__tags') ??
+                undefined
+            : undefined;
+        if (wanted === this.observedTagsContainer) {
+            if (!this.chipFittingEnabled)
+                this.destroyChipFit();
+            return;
+        }
+        if (this.observedTagsContainer) {
+            this.resizeController.unobserve(this.observedTagsContainer);
+            this.observedTagsContainer = undefined;
+        }
+        if (wanted) {
+            this.resizeController.observe(wanted);
+            this.observedTagsContainer = wanted;
+            return;
+        }
+        if (!this.chipFittingEnabled) {
+            this.destroyChipFit();
         }
-        return null;
     }
     calculateTotalWidthOfTags() {
-        if (this.maxOptionsVisible !== Infinity) {
-            this.oldMaxOptionsVisible = this.maxOptionsVisible;
-        }
-        this.maxOptionsVisible = Infinity;
-        setTimeout(() => {
-            let widths = [];
-            if (this.shadowRoot) {
-                const tags = this.shadowRoot.querySelectorAll('nile-tag');
-                tags.forEach(tag => {
-                    if (tag instanceof HTMLElement) {
-                        widths.push(tag.offsetWidth);
-                    }
-                });
+        if (!this.chipFittingEnabled)
+            return;
+        if (this.chipFitFrame)
+            cancelAnimationFrame(this.chipFitFrame);
+        this.chipFitFrame = requestAnimationFrame(() => {
+            this.chipFitFrame = 0;
+            this.layoutChips();
+        });
+    }
+    allocateChipWidths(natural, available) {
+        const min = this.chipMinWidth;
+        const max = this.chipMaxWidth;
+        const total = natural.reduce((sum, w) => sum + w, 0);
+        if (total <= available) {
+            return natural.slice();
+        }
+        // Nothing reveals a truncated value without a tooltip, so chips keep their
+        // natural width and the surplus moves into the +N button instead.
+        if (!this.showTooltip)
+            return null;
+        const capped = natural.map(w => Math.min(w, max));
+        const cappedTotal = capped.reduce((sum, w) => sum + w, 0);
+        if (cappedTotal <= available) {
+            return capped;
+        }
+        const widths = new Array(natural.length).fill(0);
+        let pool = capped.map((_, i) => i);
+        let remaining = available;
+        for (;;) {
+            if (pool.length === 0)
+                break;
+            const share = remaining / pool.length;
+            const settled = pool.filter(i => capped[i] <= share);
+            if (settled.length === 0)
+                break;
+            for (const i of settled) {
+                widths[i] = capped[i];
+                remaining -= capped[i];
             }
-            if (this.value.length !== widths.length) {
-                return;
+            pool = pool.filter(i => capped[i] > share);
+        }
+        if (pool.length > 0) {
+            const share = remaining / pool.length;
+            if (share < min) {
+                return null;
             }
-            let sum = widths.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
-            const widthOfSelectTagsDiv = this.calculateWidthOfSelectTagsDiv();
-            if (!widthOfSelectTagsDiv) {
-                return;
+            const width = Math.floor(share);
+            for (const i of pool) {
+                widths[i] = width;
             }
-            let summ = 0;
-            let lastindex = 0;
-            for (let i = 0; i < widths.length; i++) {
-                summ += widths[i];
-                if (summ > widthOfSelectTagsDiv) {
-                    lastindex = i;
-                    break;
-                }
+        }
+        return widths;
+    }
+    computeChipFit(natural, available, overflowWidth, gap) {
+        const total = natural.length;
+        if (total === 0) {
+            return { visibleCount: 0, widths: [], hiddenCount: 0 };
+        }
+        for (let count = total; count >= 1; count--) {
+            const hidden = total - count;
+            const reserved = hidden > 0 ? overflowWidth + gap : 0;
+            const row = available - reserved - gap * (count - 1);
+            if (row <= 0)
+                continue;
+            const widths = this.allocateChipWidths(natural.slice(0, count), row);
+            if (widths) {
+                return { visibleCount: count, widths, hiddenCount: hidden };
             }
-            this.maxOptionsVisible = lastindex;
-        }, 1);
+        }
+        const room = available - overflowWidth - gap;
+        const fallback = Math.max(0, 
+        // A single chip too wide for the row has to be clipped either way; only
+        // the tooltip variant squeezes it to chipMinWidth.
+        Math.min(natural[0], this.showTooltip ? Math.max(this.chipMinWidth, room) : room));
+        return { visibleCount: 1, widths: [fallback], hiddenCount: total - 1 };
+    }
+    layoutChips() {
+        const root = this.shadowRoot;
+        if (!root)
+            return;
+        const container = root.querySelector('.select__tags');
+        if (!container)
+            return;
+        const chips = Array.from(container.querySelectorAll('nile-tag'));
+        if (chips.length === 0) {
+            this.hiddenChipCount = 0;
+            return;
+        }
+        const overflowEl = container.querySelector('.select__tags-count');
+        for (const chip of chips) {
+            chip.style.display = '';
+            chip.style.width = 'auto';
+            chip.style.maxWidth = 'none';
+            chip.style.minWidth = '0';
+            chip.style.flex = '0 0 auto';
+        }
+        const natural = chips.map(chip => Math.ceil(chip.getBoundingClientRect().width));
+        // Not rendered yet on the pass that first finds an overflow; reuse the last width.
+        const overflowWidth = overflowEl
+            ? Math.ceil(overflowEl.getBoundingClientRect().width)
+            : this.lastOverflowWidth;
+        if (overflowEl)
+            this.lastOverflowWidth = overflowWidth;
+        const containerStyles = getComputedStyle(container);
+        const gap = parseFloat(containerStyles.columnGap || containerStyles.gap || '0') || 0;
+        const fit = this.computeChipFit(natural, container.clientWidth, overflowWidth, gap);
+        chips.forEach((chip, index) => {
+            if (index < fit.visibleCount) {
+                // Never squeeze a chip below chipMinWidth: narrower than that it is
+                // also narrower than the tag's own box - the label is already at zero
+                // while the remove button is fixed - so the box overflows the chip and
+                // paints the X over the next chip or the +N button. A chip whose
+                // natural width is already smaller is left alone, not padded out.
+                const width = Math.min(natural[index], Math.max(fit.widths[index], this.chipMinWidth));
+                chip.style.display = '';
+                chip.style.width = `${width}px`;
+                chip.style.maxWidth = `${width}px`;
+                chip.style.flex = '0 0 auto';
+            }
+            else {
+                chip.style.display = 'none';
+            }
+        });
+        if (this.lastChipLayout.hidden !== fit.hiddenCount ||
+            this.lastChipLayout.visible !== fit.visibleCount) {
+            this.lastChipLayout = {
+                hidden: fit.hiddenCount,
+                visible: fit.visibleCount
+            };
+            this.hiddenChipCount = fit.hiddenCount;
+        }
+        this.refreshClippedChips();
+    }
+    isChipClipped(el) {
+        if (!el)
+            return false;
+        const root = el.shadowRoot;
+        if (root) {
+            const content = root.querySelector('[part="content"]');
+            if (content && content.scrollWidth > content.clientWidth + 1)
+                return true;
+            const inner = root.querySelector('[part="prefix_content_wrapper"]');
+            if (inner && inner.scrollWidth > inner.clientWidth + 1)
+                return true;
+        }
+        return el.scrollWidth > el.clientWidth + 1;
+    }
+    refreshClippedChips() {
+        if (!this.multiple)
+            return;
+        const root = this.shadowRoot;
+        if (!root)
+            return;
+        const chips = Array.from(root.querySelectorAll('.select__tags nile-tag'));
+        const next = chips.map(chip => this.isChipClipped(chip));
+        const same = next.length === this.clippedChips.length &&
+            next.every((v, i) => v === this.clippedChips[i]);
+        if (!same) {
+            this.clippedChips = next;
+        }
+    }
+    scheduleClipCheck() {
+        if (this.clipFrame)
+            cancelAnimationFrame(this.clipFrame);
+        this.clipFrame = requestAnimationFrame(() => {
+            this.clipFrame = 0;
+            this.refreshClippedChips();
+        });
+    }
+    /** A chip gets a tooltip only while its text is measured as clipped. */
+    chipTooltipDisabled(index) {
+        return !this.showTooltip || !(this.clippedChips[index] ?? false);
+    }
+    destroyChipFit() {
+        if (this.chipFitFrame)
+            cancelAnimationFrame(this.chipFitFrame);
+        this.chipFitFrame = 0;
+        if (this.clipFrame)
+            cancelAnimationFrame(this.clipFrame);
+        this.clipFrame = 0;
+        this.lastChipLayout = { hidden: -1, visible: -1 };
+    }
+    getChipLabel(option) {
+        return (option.getTextLabel?.() ?? '').trim();
+    }
+    handleChipKeyDown(event, option) {
+        if (event.key !== KeyCode.BACKSPACE && event.key !== KeyCode.DELETE)
+            return;
+        if (this.disabled)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const removedIndex = this.selectedOptions.indexOf(option);
+        this.handleTagRemove(new CustomEvent('nile-remove'), option);
+        this.restoreFocusAfterChipRemoval(removedIndex);
+    }
+    /** Moves focus to the next chip, the last chip, or the field after a removal. */
+    async restoreFocusAfterChipRemoval(removedIndex) {
+        if (removedIndex < 0)
+            return;
+        await this.updateComplete;
+        // Wait for the fit pass so hidden chips are not focused.
+        await new Promise(resolve => requestAnimationFrame(() => resolve()));
+        const visibleChips = Array.from(this.shadowRoot?.querySelectorAll('.select__tags nile-tag') ??
+            []).filter(chip => chip.style.display !== 'none');
+        const target = visibleChips[removedIndex] ?? visibleChips[visibleChips.length - 1];
+        if (target) {
+            target.focus({ preventScroll: true });
+        }
+        else {
+            this.displayInput?.focus({ preventScroll: true });
+        }
+    }
+    handleOverflowActivate(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.disabled)
+            return;
+        this.open = !this.open;
+    }
+    handleOverflowKeyDown(event) {
+        if (event.key !== KeyCode.ENTER && event.key !== KeyCode.SPACE)
+            return;
+        this.handleOverflowActivate(event);
     }
     async resetScrollPosition() {
         await this.portalManager.resetScrollPosition();
@@ -1378,7 +1692,7 @@ __decorate([
     property()
 ], NileVirtualSelect.prototype, "placeholder", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, attribute: true, reflect: true })
 ], NileVirtualSelect.prototype, "autoResize", void 0);
 __decorate([
     state()
@@ -1472,10 +1786,22 @@ __decorate([
 ], NileVirtualSelect.prototype, "portal", void 0);
 __decorate([
     property({ attribute: 'max-options-visible', type: Number })
-], NileVirtualSelect.prototype, "maxOptionsVisible", void 0);
+], NileVirtualSelect.prototype, "maxOptionsVisible", null);
+__decorate([
+    property({ type: Number, reflect: true, attribute: true })
+], NileVirtualSelect.prototype, "chipMinWidth", void 0);
+__decorate([
+    property({ type: Number, reflect: true, attribute: true })
+], NileVirtualSelect.prototype, "chipMaxWidth", void 0);
+__decorate([
+    property({ type: Boolean, attribute: true, reflect: true })
+], NileVirtualSelect.prototype, "showTooltip", void 0);
+__decorate([
+    state()
+], NileVirtualSelect.prototype, "hiddenChipCount", void 0);
 __decorate([
     state()
-], NileVirtualSelect.prototype, "oldMaxOptionsVisible", void 0);
+], NileVirtualSelect.prototype, "clippedChips", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: true })
 ], NileVirtualSelect.prototype, "enableTabClose", void 0);