@aquera/nile-elements 2.0.8 → 2.0.9

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

@@ -15,10 +15,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,
@@ -34,7 +36,6 @@ import type { NileFormControl } from '../internal/nile-element';
 import type NileOption from '../nile-option/nile-option';
 import type NilePopup from '../nile-popup/nile-popup';
 import type { RenderItemConfig } from '../nile-virtual-select/types.js';
-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';
@@ -127,8 +128,22 @@ export class NileSelect extends NileElement implements NileFormControl{
   private scrollTimeout: number | undefined;
   private scrolling = false;
   private options: NileOption[] = [];
-  private resizeController?: ResizeController;
+  private observedTagsContainer?: Element;
+
+  private resizeController = new ResizeController(this, {
+    callback: (entries: ResizeObserverEntry[]) => {
+      for (const entry of entries) {
+        if (entry.target.classList.contains('select__tags')) {
+          this.calculateTotalWidthOfTags();
+        }
+      }
+    }
+  });
   private visibilityManager?: VisibilityManager;
+  private chipFitFrame = 0;
+  private lastChipLayout = { hidden: -1, visible: -1 };
+  @state() private clippedChips: boolean[] = [];
+  private clipFrame = 0;
 
 
   @query('.select') popup: NilePopup;
@@ -142,6 +157,10 @@ export class NileSelect extends NileElement implements NileFormControl{
   @state() currentOption: NileOption;
   @state() selectedOptions: NileOption[] = [];
   @state() oldValue: string | string[] = '';
+  @state() private hiddenChipCount = 0;
+
+  /** Last measured width of the overflow button, in px. */
+  private lastOverflowWidth = 0;
 
   /** The name of the select, submitted as a name/value pair with form data. */
   @property() name = '';
@@ -214,6 +233,7 @@ export class NileSelect extends NileElement implements NileFormControl{
 
   @property({ attribute: true, reflect: true }) helpText = '';
   @property({ attribute: 'help-text', reflect: true }) help_text = '';
+  /** Re-runs the fitted-chip layout when the control's own width changes. */
   @property({ type: Boolean, attribute: true, reflect: true }) autoResize = false;
 
   @property({ attribute: 'error-message', reflect: true }) errorMessage = '';
@@ -231,8 +251,39 @@ export class NileSelect extends NileElement implements NileFormControl{
    * 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.
    */
+  private _maxOptionsVisible = 3;
+
+  private maxOptionsVisibleExplicit = false;
+
   @property({ attribute: 'max-options-visible', type: Number })
-  maxOptionsVisible = 3;
+  get maxOptionsVisible(): number {
+    return this._maxOptionsVisible;
+  }
+
+  set maxOptionsVisible(value: number) {
+    const previous = this._maxOptionsVisible;
+    this._maxOptionsVisible = value;
+    // Any assignment opts this instance out of automatic chip fitting.
+    this.maxOptionsVisibleExplicit = true;
+    this.requestUpdate('maxOptionsVisible', previous);
+  }
+
+  private get chipFittingEnabled(): boolean {
+    return !!this.multiple && !this.maxOptionsVisibleExplicit;
+  }
+
+  /** Minimum width, in px, of a squeezed chip. Needs `showtooltip`. */
+  @property({ type: Number, reflect: true, attribute: true }) chipMinWidth = 110;
+
+  /** Maximum width, in px, of a squeezed chip. Needs `showtooltip`. */
+  @property({ type: Number, reflect: true, attribute: true }) 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.
+   */
+  @property({ type: Boolean, attribute: true, reflect: true }) showTooltip = false;
+
 
   /** Disables the select control. */
   @property({ type: Boolean, reflect: true }) disabled = false;
@@ -278,9 +329,6 @@ export class NileSelect extends NileElement implements NileFormControl{
   @property({ type: Boolean, reflect: true }) required = false;
 
   @property({ type: Boolean }) showSelected = false;
-
-  @state() oldMaxOptionsVisible: number = 1;
-
  
   @property({ type: Boolean, reflect: true, attribute: true }) enableTabClose = false;
 
@@ -364,23 +412,47 @@ export class NileSelect extends NileElement implements NileFormControl{
     this.visibilityManager?.cleanup();
     // Clean up body append elements
     this.portalManager.cleanupPortalAppend();
+    this.destroyChipFit();
     this.emit('nile-destroy');
   }
 
-  private 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);
+  private setupResizeObserver(): void {
+    const wanted =
+      this.autoResize && this.chipFittingEnabled
+        ? (this.shadowRoot?.querySelector('.select__tags') as HTMLElement | null) ??
+          undefined
+        : undefined;
+
+    if (wanted === this.observedTagsContainer) {
+      if (!this.chipFittingEnabled) this.destroyChipFit();
+      return;
       }
-    } else {
-      this.resizeController?.unobserve?.(
-        this.shadowRoot?.querySelector('.select__tags') as Element
-      );
-      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();
+    }
+  }
+
+  private syncVirtualSelectMaxOptionsVisible() {
+    if (!this.enableVirtualScroll || !this.maxOptionsVisibleExplicit) return;
+
+    const inner = this.shadowRoot?.querySelector('nile-virtual-select') as
+      | { maxOptionsVisible: number }
+      | null;
+
+    if (inner && inner.maxOptionsVisible !== this._maxOptionsVisible) {
+      inner.maxOptionsVisible = this._maxOptionsVisible;
     }
   }
 
@@ -397,12 +469,29 @@ export class NileSelect extends NileElement implements NileFormControl{
     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();
+    }
   }
 
   protected firstUpdated(_changedProperties: PropertyValues): void {
@@ -751,9 +840,14 @@ export class NileSelect extends NileElement implements NileFormControl{
       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;
     }
 
@@ -951,25 +1045,13 @@ export class NileSelect extends NileElement implements NileFormControl{
     return options;
   }
 
-  private getOptionPrefix(option: NileOption): string {
+  private getOptionPrefixNodes(option: NileOption): Node[] {
     const prefixSlot = option.shadowRoot?.querySelector(
       'slot[name="prefix"]'
-    ) as HTMLSlotElement;
-    if (!prefixSlot) return '';
-
-    const assignedNodes = prefixSlot.assignedNodes();
-    const htmlStrings: string[] = [];
-
-    assignedNodes.forEach(node => {
-      if (node instanceof HTMLElement) {
-        htmlStrings.push(node.outerHTML);
-      } else if (node.nodeType === Node.TEXT_NODE) {
-        // Text node
-        htmlStrings.push(node.textContent || '');
-      }
-    });
+    ) as HTMLSlotElement | null;
+    if (!prefixSlot) return [];
 
-    return htmlStrings.join('');
+    return prefixSlot.assignedElements().map(el => el.cloneNode(true));
   }
 
   // Gets the first <nile-option> element
@@ -1038,6 +1120,9 @@ export class NileSelect extends NileElement implements NileFormControl{
 
     // Update the value and display label
     if (this.multiple) {
+      const hasOptions = this.getAllOptions().length > 0;
+
+      if (hasOptions) {
       this.value = this.selectedOptions.map(el => el.value);
 
       if (this.placeholder && this.value.length === 0) {
@@ -1045,6 +1130,7 @@ export class NileSelect extends NileElement implements NileFormControl{
         this.displayLabel = '';
       } else {
         this.displayLabel = this.selectedOptions.length + ' selected';
+        }
       }
 
       if (this.selectedOptions.length === 0) {
@@ -1371,58 +1457,363 @@ export class NileSelect extends NileElement implements NileFormControl{
     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();
+    });
       }
+
+  private allocateChipWidths(
+    natural: number[],
+    available: number
+  ): number[] | null {
+    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<number>(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);
+    }
+
+    if (pool.length > 0) {
+      const share = remaining / pool.length;
+      if (share < min) {
+        return null;
+      }
+
+      const width = Math.floor(share);
+      for (const i of pool) {
+        widths[i] = width;
     }
   }
 
-  calculateTotalWidthOfTags() {
-    if (this.maxOptionsVisible !== Infinity) {
-      this.oldMaxOptionsVisible = this.maxOptionsVisible;
-    }
-
-    this.maxOptionsVisible = Infinity;
-    setTimeout(() => {
-      let widths: number[] = [];
-      if (this.shadowRoot) {
-        const tags = this.shadowRoot.querySelectorAll('nile-tag');
-        tags.forEach(tag => {
-          if (tag instanceof HTMLElement) {
-            widths.push(tag.offsetWidth);
+    return widths;
+    }
+
+  private computeChipFit(
+    natural: number[],
+    available: number,
+    overflowWidth: number,
+    gap: number
+  ): { visibleCount: number; widths: number[]; hiddenCount: number } {
+    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 };
       }
-      if (this.value.length !== widths.length) {
+    }
+
+    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 };
+  }
+
+  private layoutChips(): void {
+    const root = this.shadowRoot;
+    if (!root) return;
+
+    const container = root.querySelector('.select__tags') as HTMLElement | null;
+    if (!container) return;
+
+    const chips = Array.from(
+      container.querySelectorAll('nile-tag')
+    ) as HTMLElement[];
+    if (chips.length === 0) {
+      this.hiddenChipCount = 0;
         return;
       }
 
-      let sum = widths.reduce(
-        (accumulator, currentValue) => accumulator + currentValue,
-        0
+    const overflowEl = container.querySelector(
+      '.select__tags-count'
+    ) as HTMLElement | null;
+
+    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)
       );
-      const widthOfSelectTagsDiv = this.calculateWidthOfSelectTagsDiv();
-      if (!widthOfSelectTagsDiv) {
-        return;
+    // 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';
       }
+    });
 
-      let summ = 0;
-      let lastindex = 0;
+    if (
+      this.lastChipLayout.hidden !== fit.hiddenCount ||
+      this.lastChipLayout.visible !== fit.visibleCount
+    ) {
+      this.lastChipLayout = {
+        hidden: fit.hiddenCount,
+        visible: fit.visibleCount
+      };
+      this.hiddenChipCount = fit.hiddenCount;
+      }
 
-      for (let i = 0; i < widths.length; i++) {
-        summ += widths[i];
+    this.refreshClippedChips();
+  }
 
-        if (summ > widthOfSelectTagsDiv) {
-          lastindex = i;
-          break;
+  private isChipClipped(el: HTMLElement | null | undefined): boolean {
+    if (!el) return false;
+
+    const root = el.shadowRoot;
+    if (root) {
+      const content = root.querySelector(
+        '[part="content"]'
+      ) as HTMLElement | null;
+      if (content && content.scrollWidth > content.clientWidth + 1) return true;
+
+      const inner = root.querySelector(
+        '[part="prefix_content_wrapper"]'
+      ) as HTMLElement | null;
+      if (inner && inner.scrollWidth > inner.clientWidth + 1) return true;
+    }
+
+    return el.scrollWidth > el.clientWidth + 1;
+  }
+
+  private refreshClippedChips(): void {
+    if (!this.multiple) return;
+
+    const root = this.shadowRoot;
+    if (!root) return;
+
+    const chips = Array.from(
+      root.querySelectorAll('.select__tags nile-tag')
+    ) as HTMLElement[];
+
+    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;
         }
       }
-      this.maxOptionsVisible = lastindex;
-    }, 1);
+
+  private scheduleClipCheck(): void {
+    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. */
+  private chipTooltipDisabled(index: number): boolean {
+    return !this.showTooltip || !(this.clippedChips[index] ?? false);
+  }
+
+  private destroyChipFit(): void {
+    if (this.chipFitFrame) cancelAnimationFrame(this.chipFitFrame);
+    this.chipFitFrame = 0;
+    if (this.clipFrame) cancelAnimationFrame(this.clipFrame);
+    this.clipFrame = 0;
+    this.lastChipLayout = { hidden: -1, visible: -1 };
+  }
+
+  private getChipLabel(option: NileOption): string {
+    return (option.getTextLabel?.() ?? '').trim();
+  }
+
+  private handleChipKeyDown(event: KeyboardEvent, option: NileOption): void {
+    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') as unknown as NileRemoveEvent,
+      option
+    );
+
+    this.restoreFocusAfterChipRemoval(removedIndex);
+  }
+
+  /** Moves focus to the next chip, the last chip, or the field after a removal. */
+  private async restoreFocusAfterChipRemoval(
+    removedIndex: number
+  ): Promise<void> {
+    if (removedIndex < 0) return;
+
+    await this.updateComplete;
+
+    // Wait for the fit pass so hidden chips are not focused.
+    await new Promise<void>(resolve => requestAnimationFrame(() => resolve()));
+
+    const visibleChips = Array.from(
+      this.shadowRoot?.querySelectorAll<HTMLElement>('.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 });
+    }
+  }
+
+  private handleOverflowActivate(event: Event): void {
+    event.preventDefault();
+    event.stopPropagation();
+    if (this.disabled) return;
+    if (this.open) {
+      this.hide();
+    } else {
+      this.show();
+    }
+  }
+
+  private handleOverflowKeyDown(event: KeyboardEvent): void {
+    if (event.key !== KeyCode.ENTER && event.key !== KeyCode.SPACE) return;
+    this.handleOverflowActivate(event);
+  }
+
+  private 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: NileRemoveEvent) =>
+                this.handleTagRemove(event, option)}
+              @keydown=${(event: KeyboardEvent) =>
+                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() {
@@ -1444,9 +1835,9 @@ export class NileSelect extends NileElement implements NileFormControl{
     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
@@ -1521,9 +1912,9 @@ export class NileSelect extends NileElement implements NileFormControl{
               @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"
@@ -1558,21 +1949,24 @@ export class NileSelect extends NileElement implements NileFormControl{
               />
 
               ${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,
-                          };
+                          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,
@@ -1582,21 +1976,21 @@ export class NileSelect extends NileElement implements NileFormControl{
                                   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: NileRemoveEvent) =>
                                 this.handleTagRemove(event, option)}
                             >
-                              ${this.getOptionPrefix(option)
+                              ${prefixNodes.length
                                 ? html`<span class="tag__prefix" slot="prefix"
-                                    >${unsafeHTML(
-                                      this.getOptionPrefix(option)
-                                    )}</span
+                                    >${prefixNodes}</span
                                   >`
                                 : ''}
                               ${option.getTextLabel()}
                             </nile-tag>
+                            </nile-lite-tooltip>
                           `;
                         } else if (index === this.maxOptionsVisible) {
                           return html`
@@ -1737,21 +2131,35 @@ export class NileSelect extends NileElement implements NileFormControl{
                           @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>`