@aquera/nile-elements 2.0.8 → 2.0.9

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

@@ -11,10 +11,12 @@ import { styles } from './nile-select.css';
 import '../nile-icon';
 import '../nile-popup/nile-popup';
 import '../nile-tag/nile-tag';
+import '../nile-lite-tooltip/nile-lite-tooltip';
 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';
@@ -22,7 +24,6 @@ import { scrollIntoView } from '../internal/scroll';
 import { waitForEvent } from '../internal/event';
 import { watch } from '../internal/watch';
 import NileElement from '../internal/nile-element';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import '../nile-virtual-select/nile-virtual-select';
 import { VirtualScrollHelper } from './virtual-scroll-helper';
@@ -88,6 +89,19 @@ import { VisibilityManager } from '../utilities/visibility-manager';
  * @csspart footer-area - The sticky wrapper around the custom footer and the built-in multi-select footer.
  */
 let NileSelect = class NileSelect 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;
@@ -103,10 +117,26 @@ let NileSelect = class NileSelect extends NileElement {
         this.typeToSelectString = '';
         this.scrolling = false;
         this.options = [];
+        this.resizeController = new ResizeController(this, {
+            callback: (entries) => {
+                for (const entry of entries) {
+                    if (entry.target.classList.contains('select__tags')) {
+                        this.calculateTotalWidthOfTags();
+                    }
+                }
+            }
+        });
+        this.chipFitFrame = 0;
+        this.lastChipLayout = { hidden: -1, visible: -1 };
+        this.clippedChips = [];
+        this.clipFrame = 0;
         this.hasFocus = false;
         this.displayLabel = '';
         this.selectedOptions = [];
         this.oldValue = '';
+        this.hiddenChipCount = 0;
+        /** Last measured width of the overflow button, in px. */
+        this.lastOverflowWidth = 0;
         /** The name of the select, submitted as a name/value pair with form data. */
         this.name = '';
         /**
@@ -141,6 +171,7 @@ let NileSelect = class NileSelect extends NileElement {
         this.multiple = false;
         this.helpText = '';
         this.help_text = '';
+        /** Re-runs the fitted-chip layout when the control's own width changes. */
         this.autoResize = false;
         this.errorMessage = '';
         /** Sets the input to a warning state, changing its visual appearance. */
@@ -153,7 +184,17 @@ let NileSelect = class NileSelect 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._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;
         /** Disables the select control. */
         this.disabled = false;
         /** Adds a clear button when the select is not empty. */
@@ -188,7 +229,6 @@ let NileSelect = class NileSelect extends NileElement {
         /** The select's required attribute. */
         this.required = false;
         this.showSelected = false;
-        this.oldMaxOptionsVisible = 1;
         this.enableTabClose = false;
         this.showNoResults = false;
         this.noResultsMessage = 'No results found';
@@ -238,21 +278,38 @@ let NileSelect = class NileSelect extends NileElement {
         this.visibilityManager?.cleanup();
         // Clean up body append elements
         this.portalManager.cleanupPortalAppend();
+        this.destroyChipFit();
         this.emit('nile-destroy');
     }
     setupResizeObserver() {
-        if (this.autoResize) {
-            const tagsContainer = this.shadowRoot?.querySelector('.select__tags');
-            if (tagsContainer) {
-                this.resizeController = new ResizeController(this, {
-                    callback: () => this.calculateTotalWidthOfTags()
-                });
-                this.resizeController.observe(tagsContainer);
-            }
+        const wanted = this.autoResize && this.chipFittingEnabled
+            ? this.shadowRoot?.querySelector('.select__tags') ??
+                undefined
+            : undefined;
+        if (wanted === this.observedTagsContainer) {
+            if (!this.chipFittingEnabled)
+                this.destroyChipFit();
+            return;
         }
-        else {
-            this.resizeController?.unobserve?.(this.shadowRoot?.querySelector('.select__tags'));
-            this.resizeController = undefined;
+        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();
+        }
+    }
+    syncVirtualSelectMaxOptionsVisible() {
+        if (!this.enableVirtualScroll || !this.maxOptionsVisibleExplicit)
+            return;
+        const inner = this.shadowRoot?.querySelector('nile-virtual-select');
+        if (inner && inner.maxOptionsVisible !== this._maxOptionsVisible) {
+            inner.maxOptionsVisible = this._maxOptionsVisible;
         }
     }
     updated(_changedProperties) {
@@ -268,12 +325,25 @@ let NileSelect = class NileSelect extends NileElement {
         if (_changedProperties.has('tickOnSelect')) {
             this.setTickOnSelectInOptions(this.tickOnSelect);
         }
-        if (_changedProperties.has('autoResize')) {
+        if (_changedProperties.has('autoResize') ||
+            _changedProperties.has('multiple') ||
+            _changedProperties.has('maxOptionsVisible')) {
             this.setupResizeObserver();
         }
+        this.syncVirtualSelectMaxOptionsVisible();
         if (_changedProperties.has('enableDescription')) {
             this.setEnableDescriptionInOptions();
         }
+        if (_changedProperties.has('chipMinWidth') ||
+            _changedProperties.has('chipMaxWidth')) {
+            this.destroyChipFit();
+        }
+        if (this.chipFittingEnabled) {
+            this.calculateTotalWidthOfTags();
+        }
+        if (this.multiple && this.showTooltip) {
+            this.scheduleClipCheck();
+        }
     }
     firstUpdated(_changedProperties) {
         if (this.enableGroupHeader) {
@@ -560,8 +630,10 @@ let NileSelect = class NileSelect extends NileElement {
     handleComboboxMouseDown(event) {
         const path = event.composedPath();
         const isIconButton = path.some(el => el instanceof Element && el.tagName.toLowerCase() === 'nile-icon-button');
+        const isOverflowButton = path.some(el => el instanceof HTMLButtonElement &&
+            el.classList.contains('select__tags-count'));
         // Ignore disabled controls and clicks on tags (remove buttons)
-        if (this.disabled || isIconButton) {
+        if (this.disabled || isIconButton || isOverflowButton) {
             return;
         }
         event.preventDefault();
@@ -727,22 +799,11 @@ let NileSelect = class NileSelect extends NileElement {
         }
         return options;
     }
-    getOptionPrefix(option) {
+    getOptionPrefixNodes(option) {
         const prefixSlot = option.shadowRoot?.querySelector('slot[name="prefix"]');
         if (!prefixSlot)
-            return '';
-        const assignedNodes = prefixSlot.assignedNodes();
-        const htmlStrings = [];
-        assignedNodes.forEach(node => {
-            if (node instanceof HTMLElement) {
-                htmlStrings.push(node.outerHTML);
-            }
-            else if (node.nodeType === Node.TEXT_NODE) {
-                // Text node
-                htmlStrings.push(node.textContent || '');
-            }
-        });
-        return htmlStrings.join('');
+            return [];
+        return prefixSlot.assignedElements().map(el => el.cloneNode(true));
     }
     // Gets the first <nile-option> element
     getFirstOption() {
@@ -799,13 +860,16 @@ let NileSelect = class NileSelect extends NileElement {
         this.selectedOptions = this.getAllOptions().filter(el => el.selected);
         // Update the value and display label
         if (this.multiple) {
-            this.value = this.selectedOptions.map(el => el.value);
-            if (this.placeholder && this.value.length === 0) {
-                // When no items are selected, keep the value empty so the placeholder shows
-                this.displayLabel = '';
-            }
-            else {
-                this.displayLabel = this.selectedOptions.length + ' selected';
+            const hasOptions = this.getAllOptions().length > 0;
+            if (hasOptions) {
+                this.value = this.selectedOptions.map(el => el.value);
+                if (this.placeholder && this.value.length === 0) {
+                    // When no items are selected, keep the value empty so the placeholder shows
+                    this.displayLabel = '';
+                }
+                else {
+                    this.displayLabel = this.selectedOptions.length + ' selected';
+                }
             }
             if (this.selectedOptions.length === 0) {
                 this.showSelected = false;
@@ -1070,49 +1134,293 @@ let NileSelect = class NileSelect extends NileElement {
         // This will stop the event from bubbling up to the parent `nile-select` component
         event.stopPropagation();
     }
-    calculateWidthOfSelectTagsDiv() {
-        if (this.shadowRoot) {
-            const selectTagsDiv = this.shadowRoot.querySelector('div.select__tags');
-            if (selectTagsDiv instanceof HTMLElement) {
-                const width = selectTagsDiv.offsetWidth;
-                return width - 70;
+    calculateTotalWidthOfTags() {
+        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];
             }
+            pool = pool.filter(i => capped[i] > share);
         }
-    }
-    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 (pool.length > 0) {
+            const share = remaining / pool.length;
+            if (share < min) {
+                return null;
             }
-            if (this.value.length !== widths.length) {
-                return;
+            const width = Math.floor(share);
+            for (const i of pool) {
+                widths[i] = width;
             }
-            let sum = widths.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
-            const widthOfSelectTagsDiv = this.calculateWidthOfSelectTagsDiv();
-            if (!widthOfSelectTagsDiv) {
-                return;
+        }
+        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 };
             }
-            let summ = 0;
-            let lastindex = 0;
-            for (let i = 0; i < widths.length; i++) {
-                summ += widths[i];
-                if (summ > widthOfSelectTagsDiv) {
-                    lastindex = i;
-                    break;
-                }
+        }
+        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';
             }
-            this.maxOptionsVisible = lastindex;
-        }, 1);
+        });
+        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;
+        if (this.open) {
+            this.hide();
+        }
+        else {
+            this.show();
+        }
+    }
+    handleOverflowKeyDown(event) {
+        if (event.key !== KeyCode.ENTER && event.key !== KeyCode.SPACE)
+            return;
+        this.handleOverflowActivate(event);
+    }
+    renderFittedTags() {
+        return html `
+      <div part="tags" class="select__tags select__tags--fitted">
+        ${this.selectedOptions.map((option, index) => {
+            const label = this.getChipLabel(option);
+            const prefixNodes = this.getOptionPrefixNodes(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)}
+            >
+              ${prefixNodes.length
+                ? html `<span class="tag__prefix" slot="prefix"
+                    >${prefixNodes}</span
+                  >`
+                : ''}
+              ${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>
+    `;
     }
     handleInputAfterInit() {
         this.shadowRoot?.querySelector('nile-input')?.inputFocus();
@@ -1130,9 +1438,9 @@ let NileSelect = class NileSelect extends NileElement {
         const isPlaceholderVisible = this.placeholder && this.value.length === 0;
         const hasHelpText = (this.helpText || this.help_text) ? true : false;
         const hasErrorMessage = this.errorMessage ? true : false;
-        const prefixContent = this.selectedOptions[0]
-            ? this.getOptionPrefix(this.selectedOptions[0])
-            : '';
+        const prefixNodes = this.selectedOptions[0]
+            ? this.getOptionPrefixNodes(this.selectedOptions[0])
+            : [];
         return html `
       <div
         part="form-control"
@@ -1206,9 +1514,9 @@ let NileSelect = class NileSelect extends NileElement {
               @keydown=${this.handleComboboxKeyDown}
               @mousedown=${this.handleComboboxMouseDown}
             >
-              ${prefixContent && !this.multiple
+              ${prefixNodes.length && !this.multiple
             ? html `<div class="select__prefix--from-options">
-                    ${unsafeHTML(prefixContent)}
+                    ${prefixNodes}
                   </div>`
             : html `<slot
                     part="prefix"
@@ -1243,18 +1551,21 @@ let NileSelect = class NileSelect extends NileElement {
               />
 
               ${this.multiple
-            ? html `
+            ? this.chipFittingEnabled
+                ? this.renderFittedTags()
+                : 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 `
+                    if (index < this.maxOptionsVisible ||
+                        this.maxOptionsVisible <= 0) {
+                        const prefixNodes = this.getOptionPrefixNodes(option);
+                        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,
@@ -1264,31 +1575,33 @@ let NileSelect = class NileSelect extends NileElement {
                                   prefix:tag__prefix,
                                   prefix_content_wrapper:tag__prefix_content_wrapper
                                 "
+                              style="max-width:${this.chipMaxWidth}px"
                               ?pill=${this.pill}
                               size=${this.size}
                               removable
                               @nile-remove=${(event) => this.handleTagRemove(event, option)}
                             >
-                              ${this.getOptionPrefix(option)
-                        ? html `<span class="tag__prefix" slot="prefix"
-                                    >${unsafeHTML(this.getOptionPrefix(option))}</span
+                              ${prefixNodes.length
+                            ? html `<span class="tag__prefix" slot="prefix"
+                                    >${prefixNodes}</span
                                   >`
-                        : ''}
+                            : ''}
                               ${option.getTextLabel()}
                             </nile-tag>
+                            </nile-lite-tooltip>
                           `;
-                }
-                else if (index === this.maxOptionsVisible) {
-                    return html `
+                    }
+                    else if (index === this.maxOptionsVisible) {
+                        return html `
                             <span class="select__tags-count"
                               >+${this.selectedOptions.length - index} More
                             </span>
                           `;
-                }
-                else {
-                    return null;
-                }
-            })}
+                    }
+                    else {
+                        return null;
+                    }
+                })}
                     </div>
                   `
             : ''}
@@ -1418,21 +1731,35 @@ let NileSelect = class NileSelect 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
                     ? html `<span
                                 class="select__clear"
                                 @click="${this.unSlectAll}"
-                                >Clear All</span
+                                title="Clear"
+                                ><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
                               >`
                     : ``}
                         </div>`
@@ -1464,6 +1791,9 @@ let NileSelect = class NileSelect extends NileElement {
     }
 };
 NileSelect.styles = styles;
+__decorate([
+    state()
+], NileSelect.prototype, "clippedChips", void 0);
 __decorate([
     query('.select')
 ], NileSelect.prototype, "popup", void 0);
@@ -1494,6 +1824,9 @@ __decorate([
 __decorate([
     state()
 ], NileSelect.prototype, "oldValue", void 0);
+__decorate([
+    state()
+], NileSelect.prototype, "hiddenChipCount", void 0);
 __decorate([
     property()
 ], NileSelect.prototype, "name", void 0);
@@ -1587,7 +1920,16 @@ __decorate([
 ], NileSelect.prototype, "success", void 0);
 __decorate([
     property({ attribute: 'max-options-visible', type: Number })
-], NileSelect.prototype, "maxOptionsVisible", void 0);
+], NileSelect.prototype, "maxOptionsVisible", null);
+__decorate([
+    property({ type: Number, reflect: true, attribute: true })
+], NileSelect.prototype, "chipMinWidth", void 0);
+__decorate([
+    property({ type: Number, reflect: true, attribute: true })
+], NileSelect.prototype, "chipMaxWidth", void 0);
+__decorate([
+    property({ type: Boolean, attribute: true, reflect: true })
+], NileSelect.prototype, "showTooltip", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NileSelect.prototype, "disabled", void 0);
@@ -1621,9 +1963,6 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], NileSelect.prototype, "showSelected", void 0);
-__decorate([
-    state()
-], NileSelect.prototype, "oldMaxOptionsVisible", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: true })
 ], NileSelect.prototype, "enableTabClose", void 0);