@orangelogic/design-system 2.116.0 → 2.117.0

package/library/components/select.js

@@ -25,10 +25,10 @@ import U from "./popup.js";
 import M from "./spinner.js";
 import N from "./tag.js";
 const R = (t) => !(document.createElement(t.tagName).constructor === HTMLElement || customElements.get(t.tagName.toLowerCase())), W = T`:host{display:block}:host([data-user-invalid])::part(combobox){border-color:var(--cx-input-invalid-border-color)}:host([data-user-invalid]:focus-within)::part(combobox){border-color:var(--cx-input-invalid-border-color);box-shadow:var(--cx-input-invalid-shadow)}.select{vertical-align:middle;flex:auto;width:100%;display:inline-flex;position:relative}.select::part(popup){z-index:var(--cx-z-index-dropdown)}.select[data-current-placement^=top]::part(popup){transform-origin:bottom}.select[data-current-placement^=bottom]::part(popup){transform-origin:top}.select__combobox{font-family:var(--cx-input-font-family);font-weight:var(--cx-input-font-weight);letter-spacing:var(--cx-input-letter-spacing);vertical-align:middle;cursor:pointer;transition:var(--cx-transition-fast) color, var(--cx-transition-fast) border, var(--cx-transition-fast) box-shadow, var(--cx-transition-fast) background-color;flex:1;justify-content:start;align-items:center;width:20ch;min-width:0;display:flex;position:relative;overflow:hidden}.select__display-input{width:100%;font:inherit;color:var(--cx-input-color);cursor:inherit;-webkit-appearance:none;text-overflow:ellipsis;background:0 0;border:none;margin:0;padding:0;transition:padding-top .2s ease-in-out;position:relative;overflow:hidden}:host([allow-freetext]) .input-container,:host([allow-freetext]) .select__display-input{cursor:text}:host([allow-freetext]) .select--disabled .input-container,:host([allow-freetext]) .select--disabled .select__display-input{cursor:default}.select__tags+.select__display-input{padding-top:var(--cx-spacing-2x-small)}.select__display-input--small{line-height:var(--cx-line-height-small)}.select__display-input--medium{line-height:var(--cx-line-height-medium)}.select__display-input--large{line-height:var(--cx-line-height-large)}.select__display-input--hidden{visibility:hidden;height:0;padding-top:0!important}.form-control--has-label .select__display-input{padding-top:var(--cx-spacing-x-small);padding-bottom:var(--cx-spacing-2x-small)}.select__display-input::placeholder{color:var(--cx-input-placeholder-color)}.select:not(.select--disabled):hover .select__display-input{color:var(--cx-input-color-hover)}.select:not(.select--disabled):hover .select__combobox{border-color:var(--cx-input-border-color-hover)}.select__display-input:focus{outline:none}.select__value-input{opacity:0;z-index:-1;width:100%;height:100%;margin:0;padding:0;position:absolute;top:0;left:0}.select__tags{flex-wrap:wrap;align-items:center;max-width:100%;display:flex}.form-control--has-label .select__tags{margin-top:var(--cx-spacing-x-small)}.select--small:not(.select--placeholder-visible) .select__tags,.select--medium:not(.select--placeholder-visible) .select__tags,.select--large:not(.select--placeholder-visible) .select__tags{min-height:var(--cx-line-height-medium)}.select__tags::slotted(cx-tag){cursor:pointer!important}.select--disabled .select__tags,.select--disabled .select__tags::slotted(cx-tag){cursor:default!important}.select__tag-wrapper{line-height:1}.select--standard .select__combobox{background-color:var(--cx-input-background-color);border:solid var(--cx-input-border-width) var(--cx-input-border-color)}.select--standard.select--disabled .select__combobox{background-color:var(--cx-input-background-color-disabled);border-color:var(--cx-input-border-color-disabled);color:var(--cx-input-color-disabled);opacity:.5;cursor:default;outline:none}.select--standard:not(.select--disabled).select--open .select__combobox,.select--standard:not(.select--disabled).select--focused .select__combobox{background-color:var(--cx-input-background-color-focus);border-color:var(--cx-input-border-color-focus)}.select--filled .select__combobox{background-color:var(--cx-input-filled-background-color);color:var(--cx-input-color);border:none}.select--filled:hover:not(.select--disabled) .select__combobox{background-color:var(--cx-input-filled-background-color-hover)}.select--filled.select--disabled .select__combobox{background-color:var(--cx-input-filled-background-color-disabled);opacity:.5;cursor:default}.select--filled:not(.select--disabled).select--open .select__combobox,.select--filled:not(.select--disabled).select--focused .select__combobox{background-color:var(--cx-input-filled-background-color-focus);outline:var(--cx-focus-ring)}.select--small .select__combobox{border-radius:var(--cx-input-border-radius-small);font-size:var(--cx-input-font-size-small);min-height:var(--cx-input-height-small);padding-block:0;padding-inline:var(--cx-input-spacing-small)}.form-control:not(.form-control--has-label) .select--small.select--multiple .select__combobox{padding-block:2px}.form-control:not(.form-control--has-label) .select--multiple .select__display-input{margin-top:0}.form-control:not(.form-control--has-label) .input-container{justify-content:center}.form-control:not(.form-control--has-label) .input-container .select__display-input{margin-top:0}.select--small .select__clear{margin-inline-start:var(--cx-input-spacing-small)}.select--small .select__prefix::slotted(*){margin-inline-end:var(--cx-input-spacing-small)}.select--small .select__tags{gap:2px}.select--medium .select__combobox{border-radius:var(--cx-input-border-radius-medium);font-size:var(--cx-input-font-size-small);min-height:var(--cx-input-height-medium);padding-block:0;padding-inline:var(--cx-input-spacing-medium)}.form-control:not(.form-control--has-label) .select--medium.select--multiple .select__combobox{padding-block:3px}.select--medium .select__clear{margin-inline-start:var(--cx-input-spacing-medium)}.select--medium .select__prefix::slotted(*){margin-inline-end:var(--cx-input-spacing-medium)}.select--medium .select__tags{gap:3px}.select--large .select__combobox{border-radius:var(--cx-input-border-radius-large);font-size:var(--cx-input-font-size-small);min-height:var(--cx-input-height-large);padding-block:0;padding-inline:var(--cx-input-spacing-large)}.form-control:not(.form-control--has-label) .select--large.select--multiple .select__combobox{padding-block:4px}.select--large .select__clear{margin-inline-start:var(--cx-input-spacing-large)}.select--large .select__prefix::slotted(*){margin-inline-end:var(--cx-input-spacing-large)}.select--large .select__tags{gap:4px}.select--pill.select--small .select__combobox{border-radius:var(--cx-input-height-small)}.select--pill.select--medium .select__combobox{border-radius:var(--cx-input-height-medium)}.select--pill.select--large .select__combobox{border-radius:var(--cx-input-height-large)}.select__prefix,.select__suffix{color:var(--cx-input-placeholder-color);flex:0;align-items:center;display:inline-flex}.select__clear{font-size:inherit;color:var(--cx-input-icon-color);transition:var(--cx-transition-fast) color;cursor:pointer;z-index:1;background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:inline-flex}.select__clear:hover{color:var(--cx-input-icon-color-hover)}.select__clear:focus{outline:none}.select__expand-icon{transition:var(--cx-transition-medium) rotate ease;rotate:0;font-size:var(--cx-font-size-large);flex:none;align-items:center;margin-inline-start:var(--cx-spacing-small);display:flex}.select--open .select__expand-icon{rotate:var(--cx-select-expand-icon-rotate-open,-180deg)}.select__listbox{font-family:var(--cx-font-sans);font-size:var(--cx-font-size-medium);font-weight:var(--cx-font-weight-regular);box-shadow:var(--cx-shadow-large);background:var(--cx-panel-background-color);border:solid var(--cx-panel-border-width) var(--cx-panel-border-color);border-radius:var(--cx-border-radius-large);padding-block:var(--cx-spacing-x-small);overscroll-behavior:none;max-width:var(--auto-size-available-width);max-height:var(--auto-size-available-height);padding-inline:0;display:block;position:relative;overflow:auto}.select__listbox ::slotted(cx-divider){--spacing:var(--cx-spacing-x-small)}.select__listbox ::slotted(small){font-size:var(--cx-font-size-small);color:var(--cx-color-neutral-500);padding-block:var(--cx-spacing-2x-small);padding-inline:var(--cx-spacing-small);display:block}.select__no-options{font-size:var(--cx-font-size-small);color:var(--cx-color-neutral-500);padding-block:var(--cx-spacing-2x-small);padding-inline:var(--cx-spacing-small);text-align:left;cursor:default;user-select:none;display:block}.input-container{flex-direction:column;flex:1;align-self:stretch;width:0;display:inline-flex;position:relative}.input-container__display-value{column-gap:var(--cx-spacing-small);row-gap:var(--cx-spacing-3x-small);flex-flow:wrap;width:100%;height:100%;display:flex}.form-control__label{pointer-events:none;width:fit-content;line-height:1;-webkit-transition:transform .2s ease-in-out;-moz-transition:transform .2s ease-in-out;transition:transform .2s ease-in-out;position:relative}.select--small .form-control__label{transform:translateY(calc(( var(--cx-input-height-small) + 1.25rem - var(--cx-input-font-size-small) ) / 2));margin:0}.select--medium .form-control__label{transform:translateY(calc(( var(--cx-input-height-medium) / 2 + 1rem - var(--cx-input-font-size-medium) )));margin:0}.select--large .form-control__label{transform:translateY(calc(( var(--cx-input-height-large) + 1rem - var(--cx-input-font-size-large) ) / 2));margin:0}.form-control--has-label .select--small{min-height:calc(var(--cx-input-height-small) + 1rem)}.form-control--has-label .select--medium{min-height:calc(var(--cx-input-height-medium) + 1rem)}.form-control--has-label .select--large{min-height:calc(var(--cx-input-height-large) + 1rem)}.form-control--has-label .select--focused .form-control__label,.form-control--has-label .select--placeholder-visible .form-control__label,.form-control--has-label .select:not(.select--empty) .form-control__label{transform:translateY(calc(var(--cx-spacing-2x-small) + var(--cx-spacing-3x-small)))}.select__listbox slot{flex-direction:column;display:flex}:host([data-cx-input-group__input--first]:not([data-cx-input-group__input--last])) .select__combobox{border-start-end-radius:0;border-end-end-radius:0}:host([data-cx-input-group__input--inner]) .select__combobox{border-radius:0}:host([data-cx-input-group__input--last]:not([data-cx-input-group__input--first])) .select__combobox{border-start-start-radius:0;border-end-start-radius:0}:host([data-cx-input-group__input]:not([data-cx-input-group__input--first])){margin-inline-start:calc(-1 * var(--cx-input-border-width))}:host([data-cx-input-group__input--hover]){z-index:1}:host([data-cx-input-group__input--focus]),:host([data-cx-input-group__input][checked]){z-index:2}`;
-var H = Object.defineProperty, q = Object.getOwnPropertyDescriptor, o = (t, e, l, n) => {
-  for (var s = n > 1 ? void 0 : n ? q(e, l) : e, r = t.length - 1, c; r >= 0; r--)
-    (c = t[r]) && (s = (n ? c(e, l, s) : c(s)) || s);
-  return n && s && H(e, l, s), s;
+var H = Object.defineProperty, q = Object.getOwnPropertyDescriptor, s = (t, e, o, n) => {
+  for (var l = n > 1 ? void 0 : n ? q(e, o) : e, r = t.length - 1, c; r >= 0; r--)
+    (c = t[r]) && (l = (n ? c(e, o, l) : c(l)) || l);
+  return n && l && H(e, o, l), l;
 };
 let i = class extends S {
   constructor() {
@@ -39,7 +39,7 @@ let i = class extends S {
       "help-text",
       "label"
     ), this.localize = new I(this), this.typeToSelectString = "", this.hasFocus = !1, this.displayLabel = "", this.selectedOptions = [], this.name = "", this.value = "", this.fallbackOptionValue = "", this.defaultValue = "", this.size = "medium", this.placeholder = "", this.allowFreetext = !1, this.multiple = !1, this.maxOptionsVisible = 3, this.disabled = !1, this.clearable = !1, this.open = !1, this.hoist = !1, this.noFlip = !1, this.freeWidth = !1, this.autosizePadding = 10, this.filled = !1, this.pill = !1, this.label = "", this.placement = "bottom", this.helpText = "", this.form = void 0, this.required = !1, this.useTag = !1, this.noSelectOnEnter = !1, this.noResetCurrent = !1, this.noDropdown = !1, this.loading = !1, this.getTag = (t) => {
-      const e = this.hasSlotController.test("label"), n = (this.label ? !0 : !!e) ? this.size === "large" ? "medium" : "small" : this.size, s = (r) => {
+      const e = this.hasSlotController.test("label"), n = (this.label ? !0 : !!e) ? this.size === "large" ? "medium" : "small" : this.size, l = (r) => {
         this.handleTagRemove(r, t);
       };
       return u`<cx-tag part="tag" exportparts="
@@ -47,7 +47,7 @@ let i = class extends S {
               content:tag__content,
               remove-button:tag__remove-button,
               remove-button__base:tag__remove-button__base
-            " ?pill=${this.pill} size=${n} ?removable=${this.multiple} @cx-remove=${s}><cx-line-clamp lines="1">${this.getOptionLabel(t)}</cx-line-clamp></cx-tag>`;
+            " ?pill=${this.pill} size=${n} ?removable=${this.multiple} @cx-remove=${l}><cx-line-clamp lines="1">${this.getOptionLabel(t)}</cx-line-clamp></cx-tag>`;
     }, this.inputBehavior = "filter", this.getOptionValue = (t) => !t || !(t instanceof d) ? "" : t.value, this.getOptionLabel = (t) => !t || !(t instanceof d) ? "" : t.getTextLabel(), this.getOptionSelected = (t) => {
       if (!(!t || !(t instanceof d)))
         return t.selected;
@@ -58,8 +58,8 @@ let i = class extends S {
       const e = t.composedPath();
       this && !e.includes(this) && !this.stayOpenOnSelect && this.hide();
     }, this.handleDocumentKeyDown = (t) => {
-      const e = t.target, l = e.closest(".select__clear") !== null, n = e.closest("cx-icon-button") !== null;
-      if (!(l || n)) {
+      const e = t.target, o = e.closest(".select__clear") !== null, n = e.closest("cx-icon-button") !== null;
+      if (!(o || n)) {
         if (t.key === "Escape" && this.open && !this.closeWatcher) {
           (this.shouldShowNoOptionsMessage || this.getVisibleOptions().length > 0) && t.stopPropagation(), t.preventDefault(), this.hide(), this.displayInput.focus({ preventScroll: !0 });
           return;
@@ -95,11 +95,11 @@ let i = class extends S {
           return;
         }
         if (["ArrowUp", "ArrowDown", "Home", "End"].includes(t.key)) {
-          const s = this.getAllOptions().filter((h) => this.inputBehavior === "filter" ? !h.hidden : !0), r = this.currentOption ? s.indexOf(this.currentOption) : -1;
+          const l = this.getAllOptions().filter((h) => this.inputBehavior === "filter" ? !h.hidden : !0), r = this.currentOption ? l.indexOf(this.currentOption) : -1;
           let c = Math.max(0, r);
           if (t.preventDefault(), !this.open && (this.show(), this.currentOption))
             return;
-          t.key === "ArrowDown" ? (c = r + 1, c > s.length - 1 && (c = 0)) : t.key === "ArrowUp" ? (c = r - 1, c < 0 && (c = s.length - 1)) : t.key === "Home" ? c = 0 : t.key === "End" && (c = s.length - 1), this.setCurrentOption(s[c]);
+          t.key === "ArrowDown" ? (c = r + 1, c > l.length - 1 && (c = 0)) : t.key === "ArrowUp" ? (c = r - 1, c < 0 && (c = l.length - 1)) : t.key === "Home" ? c = 0 : t.key === "End" && (c = l.length - 1), this.setCurrentOption(l[c]);
         }
       }
     }, this.handleDocumentMouseDown = (t) => {
@@ -215,7 +215,7 @@ let i = class extends S {
   handleInput(t) {
     if (!this.open && (this.show(), t.data === " "))
       return;
-    const e = t.target, l = [
+    const e = t.target, o = [
       "ArrowUp",
       "ArrowDown",
       "Enter",
@@ -224,7 +224,7 @@ let i = class extends S {
       "Home",
       "End"
     ];
-    if (!(t.data && l.includes(t.data)))
+    if (!(t.data && o.includes(t.data)))
       switch (this.typeToSelectString = e.value.toLowerCase(), this.displayLabel = e.value, this.emit("cx-input"), this.inputBehavior) {
         case "filter": {
           this.filterOptionsByInput();
@@ -236,14 +236,14 @@ let i = class extends S {
   }
   handleComboboxMouseDown(t) {
     const e = t.composedPath();
-    let l = !1, n = !1;
-    e.forEach((s) => {
-      if (s instanceof HTMLElement && s.classList.contains("select__expand-icon")) {
+    let o = !1, n = !1;
+    e.forEach((l) => {
+      if (l instanceof HTMLElement && l.classList.contains("select__expand-icon")) {
         n = !0;
         return;
       }
-      s instanceof HTMLElement && s.tagName.toLowerCase() === "cx-icon-button" && (l = !0);
-    }), !(this.disabled || l) && (n || this.inputBehavior !== "filter" || !this.open || !this.multiple && !this.useTag ? (this.allowDefaultMouseDown || this.allowFreetext ? requestAnimationFrame(() => {
+      l instanceof HTMLElement && l.tagName.toLowerCase() === "cx-icon-button" && (o = !0);
+    }), !(this.disabled || o) && (n || this.inputBehavior !== "filter" || !this.open || !this.multiple && !this.useTag ? (this.allowDefaultMouseDown || this.allowFreetext ? requestAnimationFrame(() => {
       this.displayInput.focus({ preventScroll: !0 });
     }) : (t.preventDefault(), this.displayInput.focus({ preventScroll: !0 })), this.open = !this.open) : (this.allowFreetext || t.preventDefault(), this.displayInput.focus({ preventScroll: !0 })));
   }
@@ -259,36 +259,36 @@ let i = class extends S {
     t.stopPropagation(), t.preventDefault();
   }
   handleOptionClick(t) {
-    const l = t.target.closest('[role="option"], cx-option'), n = this.value, s = t.composedPath().some(
+    const o = t.target.closest('[role="option"], cx-option'), n = this.value, l = t.composedPath().some(
       (c) => c?.classList?.contains("tree-item__expand-button")
     ), r = t.composedPath().some(
       (c) => c?.classList?.contains("tree-item__actions")
     );
-    l && !this.getOptionDisabled(l) && !s && !r && (this.multiple ? this.toggleOptionSelection(l) : this.setSelectedOptions(l), this.updateComplete.then(
+    o && !this.getOptionDisabled(o) && !l && !r && (this.multiple ? this.toggleOptionSelection(o) : this.setSelectedOptions(o), this.updateComplete.then(
       () => this.displayInput.focus({ preventScroll: !0 })
     ), (this.value !== n || this.forceOnChange) && this.updateComplete.then(() => {
       this.emit("cx-input"), this.emit("cx-change");
     }), !this.multiple && !this.stayOpenOnSelect && (this.hide(), this.displayInput.focus({ preventScroll: !0 })));
   }
   handleDefaultSlotChange() {
-    const t = this.getAllOptions(), e = Array.isArray(this.value) ? this.value : [this.value], l = [];
+    const t = this.getAllOptions(), e = Array.isArray(this.value) ? this.value : [this.value], o = [];
     for (const r of t) {
       const c = this.getOptionValue(r);
       if (!c && !(r instanceof d))
         return;
-      l.push(c);
+      o.push(c);
       const h = r.tagName.toLowerCase();
       if (!R(r) && !customElements.get(h)) {
         customElements.whenDefined(h).then(() => this.handleDefaultSlotChange());
         return;
       }
     }
-    t.forEach((r) => l.push(this.getOptionValue(r)));
-    const { options: n, preserveValue: s } = this.getOptionsForValue(
+    t.forEach((r) => o.push(this.getOptionValue(r)));
+    const { options: n, preserveValue: l } = this.getOptionsForValue(
       e,
       t
     );
-    this.setSelectedOptions(n, s ? this.value : void 0);
+    this.setSelectedOptions(n, l ? this.value : void 0);
   }
   handleTagRemove(t, e) {
     t.stopPropagation(), this.disabled || (this.toggleOptionSelection(e, !1), this.updateComplete.then(() => {
@@ -320,20 +320,20 @@ let i = class extends S {
    * when unmatched values exist and `fallbackOptionValue` is configured.
    */
   getOptionsForValue(t, e = this.getAllOptions()) {
-    const l = [], n = this.fallbackOptionValue ? e.find(
+    const o = [], n = this.fallbackOptionValue ? e.find(
       (r) => this.getOptionValue(r) === this.fallbackOptionValue
     ) : void 0;
-    let s = !1;
+    let l = !1;
     return t.forEach((r) => {
       if (r === "")
         return;
       const c = e.find(
         (h) => this.getOptionValue(h) === r
       );
-      c ? l.push(c) : s = !0;
-    }), s && n && l.push(n), {
-      options: l,
-      preserveValue: s && !!n
+      c ? o.push(c) : l = !0;
+    }), l && n && o.push(n), {
+      options: o,
+      preserveValue: l && !!n
     };
   }
   /**
@@ -341,43 +341,43 @@ let i = class extends S {
    * option may be "current" at a time.
    */
   setCurrentOption(t) {
-    this.getAllOptions().forEach((l) => {
-      this.setOptionCurrent(l, !1), l.tabIndex = -1;
+    this.getAllOptions().forEach((o) => {
+      this.setOptionCurrent(o, !1), o.tabIndex = -1;
     }), t && (this.currentOption = t, this.setOptionCurrent(t, !0), t.tabIndex = 0, t.scrollIntoView({ block: "nearest" }));
   }
   /**
    * Sets the selected option(s)
    */
   setSelectedOptions(t, e) {
-    const l = this.getAllOptions(), n = Array.isArray(t) ? t : [t];
-    l.forEach((s) => this.setOptionSelected(s, !1)), n.length && n.forEach((s) => this.setOptionSelected(s, !0)), this.selectionChanged(e);
+    const o = this.getAllOptions(), n = Array.isArray(t) ? t : [t];
+    o.forEach((l) => this.setOptionSelected(l, !1)), n.length && n.forEach((l) => this.setOptionSelected(l, !0)), this.selectionChanged(e, n);
   }
   /**
    * Toggles an option's selected state
    */
   toggleOptionSelection(t, e) {
-    this.setOptionSelected(t, e), this.selectionChanged();
+    this.setOptionSelected(t, e);
+    const o = this.getOptionSelected(t), n = new Set(this.selectedOptions);
+    o ? n.add(t) : n.delete(t), this.selectionChanged(void 0, [...n]);
   }
   /**
    * This method must be called whenever the selection changes. It will update the selected options cache, the current
    * value, and the display value
    */
-  selectionChanged(t) {
-    this.selectedOptions = this.getAllOptions().filter(
-      (e) => this.getOptionSelected(e)
-    ), this.multiple ? (this.value = t ?? this.selectedOptions.map((e) => this.getOptionValue(e)), this.displayLabel = "") : (this.value = t ?? this.getOptionValue(this.selectedOptions[0]) ?? "", this.displayLabel = this.getOptionLabel(this.selectedOptions[0]) ?? ""), this.updateComplete.then(() => {
+  selectionChanged(t, e) {
+    this.selectedOptions = e ?? this.getAllOptions().filter((o) => this.getOptionSelected(o)), this.multiple ? (this.value = t ?? this.selectedOptions.map((o) => this.getOptionValue(o)), this.displayLabel = "") : (this.value = t ?? this.getOptionValue(this.selectedOptions[0]) ?? "", this.displayLabel = this.getOptionLabel(this.selectedOptions[0]) ?? ""), this.updateComplete.then(() => {
       this.formControlController.updateValidity();
     });
   }
   get tags() {
-    const t = this.hasSlotController.test("label"), l = (this.label ? !0 : !!t) ? this.size === "large" ? "medium" : "small" : this.size;
-    return this.selectedOptions.map((n, s) => {
-      if (s < this.maxOptionsVisible || this.maxOptionsVisible <= 0) {
-        const r = this.getTag(n, s);
+    const t = this.hasSlotController.test("label"), o = (this.label ? !0 : !!t) ? this.size === "large" ? "medium" : "small" : this.size;
+    return this.selectedOptions.map((n, l) => {
+      if (l < this.maxOptionsVisible || this.maxOptionsVisible <= 0) {
+        const r = this.getTag(n, l);
         return u`${typeof r == "string" ? A(r) : r}`;
-      } else if (s === this.maxOptionsVisible)
-        return u`<cx-tag ?pill=${this.pill} size=${l}>
-          +${this.selectedOptions.length - s}</cx-tag>`;
+      } else if (l === this.maxOptionsVisible)
+        return u`<cx-tag ?pill=${this.pill} size=${o}>
+          +${this.selectedOptions.length - l}</cx-tag>`;
       return B;
     });
   }
@@ -388,11 +388,11 @@ let i = class extends S {
     this.disabled && (this.open = !1, this.handleOpenChange());
   }
   handleValueChange() {
-    const t = this.getAllOptions(), e = Array.isArray(this.value) ? this.value : [this.value], { options: l, preserveValue: n } = this.getOptionsForValue(
+    const t = this.getAllOptions(), e = Array.isArray(this.value) ? this.value : [this.value], { options: o, preserveValue: n } = this.getOptionsForValue(
       e,
       t
     );
-    this.setSelectedOptions(l, n ? this.value : void 0);
+    this.setSelectedOptions(o, n ? this.value : void 0);
   }
   async handleNoDropdownChange() {
     await this.updateComplete, this.noDropdown ? this.open = !1 : this.handleOpenChange();
@@ -471,11 +471,11 @@ let i = class extends S {
     this.displayInput.blur();
   }
   render() {
-    const t = this.hasSlotController.test("label"), e = this.hasSlotController.test("help-text"), l = this.label ? !0 : !!t, n = this.helpText ? !0 : !!e, s = this.clearable && !this.disabled && (this.displayLabel.length > 0 || this.selectedOptions.length > 0), r = this.placeholder && this.value.length === 0 && this.displayLabel.length === 0, c = this.value.length === 0 && this.displayLabel.length === 0 || (this.multiple || this.useTag) && this.tags.length === 0, h = (this.multiple || this.useTag) && this.selectedOptions.length > 0;
+    const t = this.hasSlotController.test("label"), e = this.hasSlotController.test("help-text"), o = this.label ? !0 : !!t, n = this.helpText ? !0 : !!e, l = this.clearable && !this.disabled && (this.displayLabel.length > 0 || this.selectedOptions.length > 0), r = this.placeholder && this.value.length === 0 && this.displayLabel.length === 0, c = this.value.length === 0 && this.displayLabel.length === 0 || (this.multiple || this.useTag) && this.tags.length === 0, h = (this.multiple || this.useTag) && this.selectedOptions.length > 0;
     return u`<div part="form-control" class=${b({
       "form-control": !0,
       "form-control--has-help-text": n,
-      "form-control--has-label": l,
+      "form-control--has-label": o,
       "form-control--large": this.size === "large",
       "form-control--medium": this.size === "medium",
       "form-control--small": this.size === "small"
@@ -495,7 +495,7 @@ let i = class extends S {
       "select--small": this.size === "small",
       "select--standard": !0,
       "select--top": this.placement === "top"
-    })} placement=${this.placement} strategy=${this.hoist ? "overlay" : "absolute"} ?flip=${!this.noFlip} shift sync=${this.freeWidth ? void 0 : "width"} auto-size="both" auto-size-padding=${this.autosizePadding} flip-padding="10"><div part="combobox" class="select__combobox" slot="anchor" @keydown=${this.handleComboboxKeyDown} @mousedown=${this.handleComboboxMouseDown}><slot part="prefix" name="prefix" class="select__prefix"></slot><span class="input-container" @click=${this.handleFocus}><label id="label" part="form-control-label" class="form-control__label" aria-hidden=${l ? "false" : "true"}><slot name="label">${this.label}</slot></label>${f(
+    })} placement=${this.placement} strategy=${this.hoist ? "overlay" : "absolute"} ?flip=${!this.noFlip} shift sync=${this.freeWidth ? void 0 : "width"} auto-size="both" auto-size-padding=${this.autosizePadding} flip-padding="10"><div part="combobox" class="select__combobox" slot="anchor" @keydown=${this.handleComboboxKeyDown} @mousedown=${this.handleComboboxMouseDown}><slot part="prefix" name="prefix" class="select__prefix"></slot><span class="input-container" @click=${this.handleFocus}><label id="label" part="form-control-label" class="form-control__label" aria-hidden=${o ? "false" : "true"}><slot name="label">${this.label}</slot></label>${f(
       h,
       () => u`<div part="tags" class="select__tags" @cx-remove=${this.handleTagRemove}>${this.tags}</div>`
     )}<input part="display-input" class=${b({
@@ -504,12 +504,12 @@ let i = class extends S {
       "select__display-input--large": this.size === "large",
       "select__display-input--medium": this.size === "medium",
       "select__display-input--small": this.size === "small"
-    })} type="text" placeholder=${this.placeholder} .disabled=${this.disabled} ?readonly=${this.inputBehavior === "none" && !this.allowFreetext} .value=${this.displayLabel} autocomplete="off" spellcheck="false" autocapitalize="off" aria-controls="listbox" aria-expanded=${this.open ? "true" : "false"} aria-haspopup="listbox" aria-label=${l ? void 0 : this.dataset.label} aria-labelledby="label" aria-disabled=${this.disabled ? "true" : "false"} aria-describedby="help-text" role="combobox" tabindex="0" @input=${this.handleInput} @blur=${this.handleBlur}></span><input class="select__value-input" type="text" ?disabled=${this.disabled} ?required=${this.required} .value=${Array.isArray(this.value) ? this.value.join(", ") : this.value} tabindex="-1" aria-hidden="true" @focus=${this.focus} @invalid=${this.handleInvalid}>${f(
+    })} type="text" placeholder=${this.placeholder} .disabled=${this.disabled} ?readonly=${this.inputBehavior === "none" && !this.allowFreetext} .value=${this.displayLabel} autocomplete="off" spellcheck="false" autocapitalize="off" aria-controls="listbox" aria-expanded=${this.open ? "true" : "false"} aria-haspopup="listbox" aria-label=${o ? void 0 : this.dataset.label} aria-labelledby="label" aria-disabled=${this.disabled ? "true" : "false"} aria-describedby="help-text" role="combobox" tabindex="0" @input=${this.handleInput} @blur=${this.handleBlur}></span><input class="select__value-input" type="text" ?disabled=${this.disabled} ?required=${this.required} .value=${Array.isArray(this.value) ? this.value.join(", ") : this.value} tabindex="-1" aria-hidden="true" @focus=${this.focus} @invalid=${this.handleInvalid}>${f(
       this.loading,
       () => u`<cx-spinner part="spinner" role="status" aria-live="polite"></cx-spinner>`
     )}
               ${f(
-      s,
+      l,
       () => u`<button part="clear-button" class="select__clear" type="button" aria-label=${this.localize.term("clearEntry")} @mousedown=${this.handleClearMouseDown} @click=${this.handleClearClick} tabindex="-1"><slot name="clear-icon"><cx-icon name="cancel"></cx-icon></slot></button>`
     )}<slot name="suffix" part="suffix" class="select__suffix"></slot><slot name="expand-icon" part="expand-icon" class="select__expand-icon"><cx-icon name="arrow_drop_down"></cx-icon></slot></div><div id="listbox" role="listbox" aria-expanded=${this.open ? "true" : "false"} ?hidden=${!this.open || this.disabled} aria-multiselectable=${this.multiple ? "true" : "false"} aria-labelledby="label" part="listbox" class="select__listbox" tabindex="-1" @mouseup=${this.handleOptionClick} @slotchange=${this.handleDefaultSlotChange}><slot></slot>${f(
       this.shouldShowNoOptionsMessage,
@@ -530,37 +530,37 @@ i.dependencies = {
   "cx-tag": N,
   "cx-typography": C
 };
-o([
+s([
   m(".select")
 ], i.prototype, "popup", 2);
-o([
+s([
   m(".select__combobox")
 ], i.prototype, "combobox", 2);
-o([
+s([
   m(".select__display-input")
 ], i.prototype, "displayInput", 2);
-o([
+s([
   m(".select__value-input")
 ], i.prototype, "valueInput", 2);
-o([
+s([
   m(".select__listbox")
 ], i.prototype, "listbox", 2);
-o([
+s([
   g()
 ], i.prototype, "hasFocus", 2);
-o([
+s([
   g()
 ], i.prototype, "displayLabel", 2);
-o([
+s([
   g()
 ], i.prototype, "currentOption", 2);
-o([
+s([
   g()
 ], i.prototype, "selectedOptions", 2);
-o([
+s([
   a()
 ], i.prototype, "name", 2);
-o([
+s([
   a({
     converter: {
       fromAttribute: (t) => t.split(" "),
@@ -568,153 +568,153 @@ o([
     }
   })
 ], i.prototype, "value", 2);
-o([
+s([
   a({ attribute: "fallback-option-value", type: String })
 ], i.prototype, "fallbackOptionValue", 2);
-o([
+s([
   $()
 ], i.prototype, "defaultValue", 2);
-o([
+s([
   a({ reflect: !0 })
 ], i.prototype, "size", 2);
-o([
+s([
   a()
 ], i.prototype, "placeholder", 2);
-o([
+s([
   a({ attribute: "allow-freetext", reflect: !0, type: Boolean })
 ], i.prototype, "allowFreetext", 2);
-o([
+s([
   a({ reflect: !0, type: Boolean })
 ], i.prototype, "multiple", 2);
-o([
+s([
   a({ attribute: "max-options-visible", type: Number })
 ], i.prototype, "maxOptionsVisible", 2);
-o([
+s([
   a({ reflect: !0, type: Boolean })
 ], i.prototype, "disabled", 2);
-o([
+s([
   a({ type: Boolean })
 ], i.prototype, "clearable", 2);
-o([
+s([
   a({ reflect: !0, type: Boolean })
 ], i.prototype, "open", 2);
-o([
+s([
   a({ type: Boolean })
 ], i.prototype, "hoist", 2);
-o([
+s([
   a({ attribute: "no-flip", reflect: !0, type: Boolean })
 ], i.prototype, "noFlip", 2);
-o([
+s([
   a({ attribute: "sync-element" })
 ], i.prototype, "syncElement", 2);
-o([
+s([
   a({ attribute: "free-width", reflect: !0, type: Boolean })
 ], i.prototype, "freeWidth", 2);
-o([
+s([
   a({ attribute: "auto-size-padding", type: Number })
 ], i.prototype, "autosizePadding", 2);
-o([
+s([
   a({ reflect: !0, type: Boolean })
 ], i.prototype, "filled", 2);
-o([
+s([
   a({ reflect: !0, type: Boolean })
 ], i.prototype, "pill", 2);
-o([
+s([
   a()
 ], i.prototype, "label", 2);
-o([
+s([
   a({ reflect: !0 })
 ], i.prototype, "placement", 2);
-o([
+s([
   a({ attribute: "help-text" })
 ], i.prototype, "helpText", 2);
-o([
+s([
   a({ reflect: !1 })
 ], i.prototype, "form", 2);
-o([
+s([
   a({ reflect: !0, type: Boolean })
 ], i.prototype, "required", 2);
-o([
+s([
   a({ attribute: "use-tag", reflect: !0, type: Boolean })
 ], i.prototype, "useTag", 2);
-o([
+s([
   a({
     attribute: "no-select-on-enter",
     reflect: !0,
     type: Boolean
   })
 ], i.prototype, "noSelectOnEnter", 2);
-o([
+s([
   a({
     attribute: "no-reset-current",
     reflect: !0,
     type: Boolean
   })
 ], i.prototype, "noResetCurrent", 2);
-o([
+s([
   a({
     attribute: "no-dropdown",
     reflect: !0,
     type: Boolean
   })
 ], i.prototype, "noDropdown", 2);
-o([
+s([
   a({
     attribute: "loading",
     reflect: !0,
     type: Boolean
   })
 ], i.prototype, "loading", 2);
-o([
+s([
   a({ attribute: "get-tag", type: Function })
 ], i.prototype, "getTag", 2);
-o([
+s([
   a({ attribute: "input-behavior" })
 ], i.prototype, "inputBehavior", 2);
-o([
+s([
   a({ attribute: "get-option-value", type: Function })
 ], i.prototype, "getOptionValue", 2);
-o([
+s([
   a({ attribute: "get-option-label", type: Function })
 ], i.prototype, "getOptionLabel", 2);
-o([
+s([
   a({ attribute: "get-option-selected", type: Function })
 ], i.prototype, "getOptionSelected", 2);
-o([
+s([
   a({ attribute: "get-option-disabled", type: Function })
 ], i.prototype, "getOptionDisabled", 2);
-o([
+s([
   a({ attribute: "stay-open-on-select", type: Boolean })
 ], i.prototype, "stayOpenOnSelect", 2);
-o([
+s([
   a({ attribute: "force-on-change", type: Boolean })
 ], i.prototype, "forceOnChange", 2);
-o([
+s([
   a({ attribute: "allow-default-mouse-down", type: Boolean })
 ], i.prototype, "allowDefaultMouseDown", 2);
-o([
+s([
   a({ attribute: "no-option-text", type: String })
 ], i.prototype, "noOptionText", 2);
-o([
+s([
   p("getOptionValue", { waitUntilFirstUpdate: !0 }),
   p("getOptionLabel", { waitUntilFirstUpdate: !0 }),
   p("getOptionSelected", { waitUntilFirstUpdate: !0 }),
   p("getOptionDisabled", { waitUntilFirstUpdate: !0 }),
   p("fallbackOptionValue", { waitUntilFirstUpdate: !0 })
 ], i.prototype, "handleDefaultSlotChange", 1);
-o([
+s([
   p("disabled", { waitUntilFirstUpdate: !0 })
 ], i.prototype, "handleDisabledChange", 1);
-o([
+s([
   p("value", { waitUntilFirstUpdate: !0 })
 ], i.prototype, "handleValueChange", 1);
-o([
+s([
   p("noDropdown", { waitUntilFirstUpdate: !0 })
 ], i.prototype, "handleNoDropdownChange", 1);
-o([
+s([
   p("open", { waitUntilFirstUpdate: !0 })
 ], i.prototype, "handleOpenChange", 1);
-i = o([
+i = s([
   z("cx-select")
 ], i);
 O("select.show", {