@carbon/web-components 2.52.0 → 2.53.0

package/es-custom/components/multi-select/multi-select-item.js

@@ -5,16 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { prefix } from "../../globals/settings.js";
+import "../../globals/settings.js";
 import { carbonElement } from "../../globals/decorators/carbon-element.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.112.0/helpers/decorate.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
 import dropdown_item_default from "../dropdown/dropdown-item.js";
 import "../checkbox/index.js";
 import multi_select_default from "./multi-select.scss.js";
 import { html } from "lit";
 import { property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
-
 //#region src/components/multi-select/multi-select-item.ts
 /**
 * Copyright IBM Corp. 2019, 2025
@@ -37,10 +36,10 @@ let CDSMultiSelectItem = class CDSMultiSelectItem extends dropdown_item_default
 	render() {
 		const { disabled, selected, selectionName, value, indeterminate } = this;
 		return html`
-      <div class="${prefix}--list-box__menu-item__option">
+      <div class="${"cds-custom"}--list-box__menu-item__option">
         <cds-custom-checkbox
           tabindex="-1"
-          class="${prefix}--form-item ${prefix}--checkbox-wrapper"
+          class="${"cds-custom"}--form-item ${"cds-custom"}--checkbox-wrapper"
           .checked=${selected}
           .indeterminate=${indeterminate}
           ?disabled=${disabled}
@@ -55,7 +54,7 @@ let CDSMultiSelectItem = class CDSMultiSelectItem extends dropdown_item_default
 	* A selector that will return multi select.
 	*/
 	static get selectorList() {
-		return `${prefix}-multi-select`;
+		return `cds-custom-multi-select`;
 	}
 	static {
 		this.styles = multi_select_default;
@@ -72,9 +71,9 @@ __decorate([property({
 	reflect: true
 })], CDSMultiSelectItem.prototype, "indeterminate", void 0);
 __decorate([property({ attribute: "selection-name" })], CDSMultiSelectItem.prototype, "selectionName", void 0);
-CDSMultiSelectItem = __decorate([carbonElement(`${prefix}-multi-select-item`)], CDSMultiSelectItem);
+CDSMultiSelectItem = __decorate([carbonElement(`cds-custom-multi-select-item`)], CDSMultiSelectItem);
 var multi_select_item_default = CDSMultiSelectItem;
-
 //#endregion
 export { multi_select_item_default as default };
+
 //# sourceMappingURL=multi-select-item.js.map

package/es-custom/components/multi-select/multi-select-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"multi-select-item.js","names":["CDSDropdownItem","styles","customElement"],"sources":["../../../src/components/multi-select/multi-select-item.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2025\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { prefix } from '../../globals/settings';\nimport CDSDropdownItem from '../dropdown/dropdown-item';\nimport styles from './multi-select.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport '../checkbox';\n/**\n * Multi select item.\n *\n * @element cds-custom-multi-select-item\n */\n@customElement(`${prefix}-multi-select-item`)\nclass CDSMultiSelectItem extends CDSDropdownItem {\n  /**\n   * The property to hide when item is filtered from input\n   */\n  @property({ type: Boolean })\n  filtered;\n\n  /**\n   * Marks this item as the “select all” item.\n   */\n  @property({ type: Boolean, attribute: 'is-select-all', reflect: true })\n  isSelectAll = false;\n\n  /**\n   * When `true`, renders the checkbox in its indeterminate state.\n   */\n  @property({ type: Boolean, reflect: true })\n  indeterminate = false;\n\n  /**\n   * The `name` attribute for the `<input>` for selection.\n   */\n  @property({ attribute: 'selection-name' })\n  selectionName = '';\n\n  render() {\n    const { disabled, selected, selectionName, value, indeterminate } = this;\n    return html`\n      <div class=\"${prefix}--list-box__menu-item__option\">\n        <cds-custom-checkbox\n          tabindex=\"-1\"\n          class=\"${prefix}--form-item ${prefix}--checkbox-wrapper\"\n          .checked=${selected}\n          .indeterminate=${indeterminate}\n          ?disabled=${disabled}\n          name=${ifDefined(selectionName || undefined)}\n          value=${value}>\n          <slot></slot>\n        </cds-custom-checkbox>\n      </div>\n    `;\n  }\n\n  /**\n   * A selector that will return multi select.\n   */\n  static get selectorList() {\n    return `${prefix}-multi-select`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSMultiSelectItem;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,+BACM,2BAA2BA,sBAAgB;;;qBAWjC;uBAME;uBAMA;;CAEhB,SAAS;EACP,MAAM,EAAE,UAAU,UAAU,eAAe,OAAO,kBAAkB;AACpE,SAAO,IAAI;oBACK,OAAO;;;mBAGR,OAAO,cAAc,OAAO;qBAC1B,SAAS;2BACH,cAAc;sBACnB,SAAS;iBACd,UAAU,iBAAiB,OAAU,CAAC;kBACrC,MAAM;;;;;;;;;CAUtB,WAAW,eAAe;AACxB,SAAO,GAAG,OAAO;;;gBAGHC;;;YA9Cf,SAAS,EAAE,MAAM,SAAS,CAAC;YAM3B,SAAS;CAAE,MAAM;CAAS,WAAW;CAAiB,SAAS;CAAM,CAAC;YAMtE,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC;YAM1C,SAAS,EAAE,WAAW,kBAAkB,CAAC;iCAvB3CC,cAAc,GAAG,OAAO,oBAAoB;AAsD7C,gCAAe"}
+{"version":3,"file":"multi-select-item.js","names":["CDSDropdownItem","styles","customElement"],"sources":["../../../src/components/multi-select/multi-select-item.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2025\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { prefix } from '../../globals/settings';\nimport CDSDropdownItem from '../dropdown/dropdown-item';\nimport styles from './multi-select.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport '../checkbox';\n/**\n * Multi select item.\n *\n * @element cds-custom-multi-select-item\n */\n@customElement(`${prefix}-multi-select-item`)\nclass CDSMultiSelectItem extends CDSDropdownItem {\n  /**\n   * The property to hide when item is filtered from input\n   */\n  @property({ type: Boolean })\n  filtered;\n\n  /**\n   * Marks this item as the “select all” item.\n   */\n  @property({ type: Boolean, attribute: 'is-select-all', reflect: true })\n  isSelectAll = false;\n\n  /**\n   * When `true`, renders the checkbox in its indeterminate state.\n   */\n  @property({ type: Boolean, reflect: true })\n  indeterminate = false;\n\n  /**\n   * The `name` attribute for the `<input>` for selection.\n   */\n  @property({ attribute: 'selection-name' })\n  selectionName = '';\n\n  render() {\n    const { disabled, selected, selectionName, value, indeterminate } = this;\n    return html`\n      <div class=\"${prefix}--list-box__menu-item__option\">\n        <cds-custom-checkbox\n          tabindex=\"-1\"\n          class=\"${prefix}--form-item ${prefix}--checkbox-wrapper\"\n          .checked=${selected}\n          .indeterminate=${indeterminate}\n          ?disabled=${disabled}\n          name=${ifDefined(selectionName || undefined)}\n          value=${value}>\n          <slot></slot>\n        </cds-custom-checkbox>\n      </div>\n    `;\n  }\n\n  /**\n   * A selector that will return multi select.\n   */\n  static get selectorList() {\n    return `${prefix}-multi-select`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSMultiSelectItem;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,IAAA,qBAAA,MACM,2BAA2BA,sBAAgB;;;qBAWjC;uBAME;uBAMA;;CAEhB,SAAS;EACP,MAAM,EAAE,UAAU,UAAU,eAAe,OAAO,kBAAkB;AACpE,SAAO,IAAI;0BACY;;;yBAGD,cAAA,MAAqB;qBAC1B,SAAS;2BACH,cAAc;sBACnB,SAAS;iBACd,UAAU,iBAAiB,KAAA,EAAU,CAAC;kBACrC,MAAM;;;;;;;;;CAUtB,WAAW,eAAe;AACxB,SAAO;;;gBAGOC;;;YA9Cf,SAAS,EAAE,MAAM,SAAS,CAAC,CAAA,EAAA,mBAAA,WAAA,YAAA,KAAA,EAAA;YAM3B,SAAS;CAAE,MAAM;CAAS,WAAW;CAAiB,SAAS;CAAM,CAAC,CAAA,EAAA,mBAAA,WAAA,eAAA,KAAA,EAAA;YAMtE,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,mBAAA,WAAA,iBAAA,KAAA,EAAA;YAM1C,SAAS,EAAE,WAAW,kBAAkB,CAAC,CAAA,EAAA,mBAAA,WAAA,iBAAA,KAAA,EAAA;iCAvB3CC,cAAc,wBAA8B,CAAA,EAAA,mBAAA;AAsD7C,IAAA,4BAAe"}

package/es-custom/components/multi-select/multi-select.js

@@ -5,10 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { prefix } from "../../globals/settings.js";
+import "../../globals/settings.js";
 import { filter, forEach } from "../../globals/internal/collection-helpers.js";
 import { carbonElement } from "../../globals/decorators/carbon-element.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.112.0/helpers/decorate.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
 import iconLoader from "../../globals/internal/icon-loader.js";
 import HostListener from "../../globals/decorators/host-listener.js";
 import { DROPDOWN_DIRECTION, DROPDOWN_KEYBOARD_ACTION, DROPDOWN_SIZE, DROPDOWN_TYPE } from "../dropdown/defs.js";
@@ -19,7 +19,6 @@ import { html } from "lit";
 import { property, query } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import Close16 from "@carbon/icons/es/close/16.js";
-
 //#region src/components/multi-select/multi-select.ts
 /**
 * Copyright IBM Corp. 2020, 2026
@@ -50,7 +49,7 @@ let CDSMultiSelect = class CDSMultiSelect extends dropdown_default {
 		this.clearSelectionText = "To clear selection, press Delete or Backspace.";
 		this.locale = "en";
 		this.selectAll = false;
-		this.selectionFeedback = SELECTION_FEEDBACK_OPTION.TOP_AFTER_REOPEN;
+		this.selectionFeedback = "top-after-reopen";
 		this.compareItems = (itemA, itemB, { locale }) => {
 			itemA.localeCompare(itemB, locale, { numeric: true });
 		};
@@ -119,13 +118,13 @@ let CDSMultiSelect = class CDSMultiSelect extends dropdown_default {
 		return !item;
 	}
 	_handleClickInner(event) {
-		const clickedItem = event.target.closest(`${prefix}-multi-select-item`);
+		const clickedItem = event.target.closest(`cds-custom-multi-select-item`);
 		if (this._selectionButtonNode?.contains(event.target) && !this.readOnly) {
 			this._handleUserInitiatedSelectItem();
 			if (this.filterable) this._filterInputNode.focus();
 			else this._triggerNode.focus();
 		} else if (clickedItem && !clickedItem.hasAttribute("disabled")) {
-			this.querySelectorAll(`${prefix}-multi-select-item`).forEach((el) => el.removeAttribute("highlighted"));
+			this.querySelectorAll(`cds-custom-multi-select-item`).forEach((el) => el.removeAttribute("highlighted"));
 			clickedItem.setAttribute("highlighted", "");
 			this._handleUserInitiatedSelectItem(clickedItem);
 			this.setAttribute("item-clicked", "");
@@ -191,7 +190,7 @@ let CDSMultiSelect = class CDSMultiSelect extends dropdown_default {
 		const { key } = event;
 		const action = this.constructor.getAction(key);
 		if (!this.open) switch (action) {
-			case DROPDOWN_KEYBOARD_ACTION.TRIGGERING:
+			case "triggering":
 				this._handleUserInitiatedToggle(true);
 				break;
 			default: break;
@@ -214,16 +213,16 @@ let CDSMultiSelect = class CDSMultiSelect extends dropdown_default {
       <label
         part="title-text"
         class="${classMap({
-			[`${prefix}--label`]: true,
-			[`${prefix}--label--disabled`]: disabled,
-			[`${prefix}--visually-hidden`]: hideLabel
+			[`cds-custom--label`]: true,
+			[`cds-custom--label--disabled`]: disabled,
+			[`cds-custom--visually-hidden`]: hideLabel
 		})}"
         ?hidden="${!(titleText || slotTitleTextNode && slotTitleTextNode.assignedNodes().length > 0)}">
         <slot name="title-text" @slotchange="${handleSlotchangeLabelText}"
           >${titleText}</slot
         >
         ${selectedItemsCount > 0 ? html`
-              <span class="${prefix}--visually-hidden">
+              <span class="${"cds-custom"}--visually-hidden">
                 ${clearSelectionDescription} ${selectedItemsCount},
                 ${clearSelectionText}
               </span>
@@ -234,12 +233,12 @@ let CDSMultiSelect = class CDSMultiSelect extends dropdown_default {
 	_renderPrecedingLabel() {
 		const { disabled, readOnly, clearSelectionLabel, _selectedItemsCount: selectedItemsCount } = this;
 		const selectionButtonClasses = classMap({
-			[`${prefix}--list-box__selection`]: true,
-			[`${prefix}--list-box__selection--multi`]: true,
-			[`${prefix}--tag`]: true,
-			[`${prefix}--tag--filter`]: true,
-			[`${prefix}--tag--high-contrast`]: true,
-			[`${prefix}--tag--disabled`]: disabled
+			[`cds-custom--list-box__selection`]: true,
+			[`cds-custom--list-box__selection--multi`]: true,
+			[`cds-custom--tag`]: true,
+			[`cds-custom--tag--filter`]: true,
+			[`cds-custom--tag--high-contrast`]: true,
+			[`cds-custom--tag--disabled`]: disabled
 		});
 		return selectedItemsCount === 0 ? void 0 : html`
           <div
@@ -252,7 +251,7 @@ let CDSMultiSelect = class CDSMultiSelect extends dropdown_default {
             ${selectedItemsCount}
             ${iconLoader(Close16, {
 			"aria-label": clearSelectionLabel,
-			class: `${prefix}--tag__close-icon`
+			class: `cds-custom--tag__close-icon`
 		})}
           </div>
         `;
@@ -263,11 +262,11 @@ let CDSMultiSelect = class CDSMultiSelect extends dropdown_default {
 	_renderLabel() {
 		const { label, value, _selectedItemContent: selectedItemContent } = this;
 		const inputClasses = classMap({
-			[`${prefix}--text-input`]: true,
-			[`${prefix}--text-input--empty`]: !value
+			[`cds-custom--text-input`]: true,
+			[`cds-custom--text-input--empty`]: !value
 		});
 		return !this.filterable ? html`
-          <span id="trigger-label" class="${prefix}--list-box__label"
+          <span id="trigger-label" class="${"cds-custom"}--list-box__label"
             >${selectedItemContent || label}</span
           >
         ` : html`
@@ -288,7 +287,7 @@ let CDSMultiSelect = class CDSMultiSelect extends dropdown_default {
           <div
             id="clear-button"
             role="button"
-            class="${prefix}--list-box__selection"
+            class="${"cds-custom"}--list-box__selection"
             tabindex="-1"
             title="${clearSelectionLabel}">
             ${iconLoader(Close16, { "aria-label": clearSelectionLabel })}
@@ -315,7 +314,7 @@ let CDSMultiSelect = class CDSMultiSelect extends dropdown_default {
 		});
 		this.requestUpdate();
 		if (this.selectAll) {
-			const selectAllItem = this.querySelector(`${prefix}-multi-select-item[is-select-all]`);
+			const selectAllItem = this.querySelector(`cds-custom-multi-select-item[is-select-all]`);
 			if (selectAllItem) if (Array.from(this.querySelectorAll(this.constructor.selectorItemResults)).filter((i) => !i.isSelectAll && !i.disabled).length === 0) selectAllItem.setAttribute("filtered", "");
 			else {
 				selectAllItem.removeAttribute("filtered");
@@ -363,26 +362,26 @@ let CDSMultiSelect = class CDSMultiSelect extends dropdown_default {
 	*/
 	get _classes() {
 		const { disabled, size, type, invalid, readOnly, open, warn, _selectedItemsCount: selectedItemsCount } = this;
-		const inline = type === DROPDOWN_TYPE.INLINE;
+		const inline = type === "inline";
 		const isInteractive = !readOnly && !disabled;
 		const normalizedProps = {
 			invalid: isInteractive && invalid,
 			warn: isInteractive && !invalid && warn
 		};
 		return classMap({
-			[`${prefix}--multi-select`]: true,
-			[`${prefix}--list-box`]: true,
-			[`${prefix}--list-box--disabled`]: disabled,
-			[`${prefix}--list-box--inline`]: inline,
-			[`${prefix}--list-box--expanded`]: open,
-			[`${prefix}--list-box--${size}`]: size,
-			[`${prefix}--multi-select--invalid`]: normalizedProps.invalid,
-			[`${prefix}--multi-select--warn`]: normalizedProps.warn,
-			[`${prefix}--multi-select--inline`]: inline,
-			[`${prefix}--multi-select--readonly`]: readOnly,
-			[`${prefix}--multi-select--selected`]: selectedItemsCount > 0,
-			[`${prefix}--list-box__wrapper--decorator`]: this._hasAILabel,
-			[`${prefix}--multi-select--selectall`]: this.selectAll
+			[`cds-custom--multi-select`]: true,
+			[`cds-custom--list-box`]: true,
+			[`cds-custom--list-box--disabled`]: disabled,
+			[`cds-custom--list-box--inline`]: inline,
+			[`cds-custom--list-box--expanded`]: open,
+			[`cds-custom--list-box--${size}`]: size,
+			[`cds-custom--multi-select--invalid`]: normalizedProps.invalid,
+			[`cds-custom--multi-select--warn`]: normalizedProps.warn,
+			[`cds-custom--multi-select--inline`]: inline,
+			[`cds-custom--multi-select--readonly`]: readOnly,
+			[`cds-custom--multi-select--selected`]: selectedItemsCount > 0,
+			[`cds-custom--list-box__wrapper--decorator`]: this._hasAILabel,
+			[`cds-custom--multi-select--selectall`]: this.selectAll
 		});
 	}
 	shouldUpdate(changedProperties) {
@@ -399,7 +398,7 @@ let CDSMultiSelect = class CDSMultiSelect extends dropdown_default {
 				elem.selected = values.indexOf(elem.value) >= 0;
 			});
 			this._selectedItemsCount = filter(items, (elem) => values.indexOf(elem.value) >= 0 && !elem.isSelectAll).length;
-			if (this.selectionFeedback === SELECTION_FEEDBACK_OPTION.TOP) {
+			if (this.selectionFeedback === "top") {
 				const sortedMenuItems = this.sortItems(items, {
 					values,
 					compareItems: this.compareItems,
@@ -410,7 +409,7 @@ let CDSMultiSelect = class CDSMultiSelect extends dropdown_default {
 			}
 		}
 		if (changedProperties.has("open")) {
-			if (this.selectionFeedback === SELECTION_FEEDBACK_OPTION.TOP_AFTER_REOPEN) {
+			if (this.selectionFeedback === "top-after-reopen") {
 				const sortedMenuItems = this.sortItems(items, {
 					values,
 					compareItems: this.compareItems,
@@ -427,10 +426,10 @@ let CDSMultiSelect = class CDSMultiSelect extends dropdown_default {
 	updated(changedProperties) {
 		super.updated(changedProperties);
 		if (changedProperties.has("open") && this.open) {
-			const selectedItems = Array.from(this.querySelectorAll(`${prefix}-multi-select-item[selected]`));
+			const selectedItems = Array.from(this.querySelectorAll(`cds-custom-multi-select-item[selected]`));
 			if (selectedItems.length > 0) {
 				let itemToFocus = null;
-				if (this.selectAll) itemToFocus = this.querySelector(`${prefix}-multi-select-item[is-select-all]`);
+				if (this.selectAll) itemToFocus = this.querySelector(`cds-custom-multi-select-item[is-select-all]`);
 				if (!itemToFocus) itemToFocus = selectedItems[0];
 				this.setAttribute("item-clicked", "");
 				itemToFocus.focus();
@@ -503,58 +502,58 @@ let CDSMultiSelect = class CDSMultiSelect extends dropdown_default {
 	* A selector that will return highlighted items.
 	*/
 	static get selectorItemHighlighted() {
-		return `${prefix}-multi-select-item[highlighted]`;
+		return `cds-custom-multi-select-item[highlighted]`;
 	}
 	/**
 	* A selector that will return multi select items.
 	* We use a separate property from `.itemTagName` due to the nature in difference of tag name vs. selector.
 	*/
 	static get selectorItem() {
-		return `${prefix}-multi-select-item`;
+		return `cds-custom-multi-select-item`;
 	}
 	/**
 	* A selector that will return remaining items after a filter.
 	*/
 	static get selectorItemFiltered() {
-		return `${prefix}-multi-select-item[filtered]`;
+		return `cds-custom-multi-select-item[filtered]`;
 	}
 	/**
 	* A selector that will return remaining items after a filter.
 	*/
 	static get selectorItemResults() {
-		return `${prefix}-multi-select-item:not([filtered])`;
+		return `cds-custom-multi-select-item:not([filtered])`;
 	}
 	/**
 	* A selector that will return selected items.
 	*/
 	static get selectorItemSelected() {
-		return `${prefix}-multi-select-item[selected]`;
+		return `cds-custom-multi-select-item[selected]`;
 	}
 	/**
 	* The name of the custom event fired before this multi select item is being toggled upon a user gesture.
 	* Cancellation of this event stops the user-initiated action of toggling this multi select item.
 	*/
 	static get eventBeforeToggle() {
-		return `${prefix}-multi-select-beingtoggled`;
+		return `cds-custom-multi-select-beingtoggled`;
 	}
 	/**
 	* The name of the custom event fired after this multi select item is toggled upon a user gesture.
 	*/
 	static get eventToggle() {
-		return `${prefix}-multi-select-toggled`;
+		return `cds-custom-multi-select-toggled`;
 	}
 	/**
 	* The name of the custom event fired before a multi select item is selected upon a user gesture.
 	* Cancellation of this event stops changing the user-initiated selection.
 	*/
 	static get eventBeforeSelect() {
-		return `${prefix}-multi-select-beingselected`;
+		return `cds-custom-multi-select-beingselected`;
 	}
 	/**
 	* The name of the custom event fired after a a multi select item is selected upon a user gesture.
 	*/
 	static get eventSelect() {
-		return `${prefix}-multi-select-selected`;
+		return `cds-custom-multi-select-selected`;
 	}
 	static {
 		this.styles = multi_select_default$1;
@@ -564,7 +563,7 @@ __decorate([property({ type: Boolean })], CDSMultiSelect.prototype, "filterable"
 __decorate([query("#clear-button")], CDSMultiSelect.prototype, "_clearButtonNode", void 0);
 __decorate([query("#selection-button")], CDSMultiSelect.prototype, "_selectionButtonNode", void 0);
 __decorate([query("input")], CDSMultiSelect.prototype, "_filterInputNode", void 0);
-__decorate([query(`.${prefix}--list-box__field`)], CDSMultiSelect.prototype, "_triggerNode", void 0);
+__decorate([query(`.cds-custom--list-box__field`)], CDSMultiSelect.prototype, "_triggerNode", void 0);
 __decorate([HostListener("focusout")], CDSMultiSelect.prototype, "_handleFocusOut", null);
 __decorate([property({ attribute: "clear-selection-label" })], CDSMultiSelect.prototype, "clearSelectionLabel", void 0);
 __decorate([property({ attribute: "clear-selection-description" })], CDSMultiSelect.prototype, "clearSelectionDescription", void 0);
@@ -576,9 +575,9 @@ __decorate([property({
 	attribute: "select-all"
 })], CDSMultiSelect.prototype, "selectAll", void 0);
 __decorate([property({ attribute: "selection-feedback" })], CDSMultiSelect.prototype, "selectionFeedback", void 0);
-CDSMultiSelect = __decorate([carbonElement(`${prefix}-multi-select`)], CDSMultiSelect);
+CDSMultiSelect = __decorate([carbonElement(`cds-custom-multi-select`)], CDSMultiSelect);
 var multi_select_default = CDSMultiSelect;
-
 //#endregion
 export { DROPDOWN_DIRECTION, DROPDOWN_SIZE, DROPDOWN_TYPE, SELECTION_FEEDBACK_OPTION, multi_select_default as default };
+
 //# sourceMappingURL=multi-select.js.map

package/es-custom/components/multi-select/multi-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"multi-select.js","names":["CDSDropdown","styles","customElement"],"sources":["../../../src/components/multi-select/multi-select.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2020, 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, PropertyValues, TemplateResult } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { prefix } from '../../globals/settings';\nimport Close16 from '@carbon/icons/es/close/16.js';\nimport { filter, forEach } from '../../globals/internal/collection-helpers';\nimport CDSDropdown, {\n  DROPDOWN_KEYBOARD_ACTION,\n  DROPDOWN_TYPE,\n} from '../dropdown/dropdown';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport { SELECTION_FEEDBACK_OPTION } from './defs';\nimport CDSMultiSelectItem from './multi-select-item';\nimport styles from './multi-select.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport HostListener from '../../globals/decorators/host-listener';\n\nexport {\n  DROPDOWN_SIZE,\n  DROPDOWN_TYPE,\n  DROPDOWN_DIRECTION,\n} from '../dropdown/dropdown';\n\nexport { SELECTION_FEEDBACK_OPTION };\n\n/**\n * Multi select.\n *\n * @element cds-custom-multi-select\n * @fires cds-custom-multi-select-beingselected\n *   The custom event fired before a multi select item is selected upon a user gesture.\n *   Cancellation of this event stops changing the user-initiated selection.\n * @fires cds-custom-multi-select-selected - The custom event fired after a multi select item is selected upon a user gesture.\n * @fires cds-custom-multi-select-beingtoggled\n *   The custom event fired before the open state of this multi select is toggled upon a user gesture.\n *   Cancellation of this event stops the user-initiated toggling.\n * @fires cds-custom-multi-select-toggled\n *   The custom event fired after the open state of this multi select is toggled upon a user gesture.\n */\n@customElement(`${prefix}-multi-select`)\nclass CDSMultiSelect extends CDSDropdown {\n  @property({ type: Boolean })\n  filterable;\n\n  /**\n   * The count of selected items.\n   */\n  private _selectedItemsCount = 0;\n\n  /**\n   * The clear button.\n   */\n  @query('#clear-button')\n  private _clearButtonNode!: HTMLElement;\n\n  /**\n   * The selection button.\n   */\n  @query('#selection-button')\n  private _selectionButtonNode!: HTMLElement;\n\n  /**\n   * The `<input>` for filtering.\n   */\n  @query('input')\n  private _filterInputNode!: HTMLInputElement;\n\n  protected get _supportsMenuInputFiltering() {\n    return Boolean(this.filterable);\n  }\n\n  protected willUpdate(changedProperties: PropertyValues) {\n    this._shouldTriggerBeFocusable = !this.filterable;\n    super.willUpdate(changedProperties);\n  }\n\n  protected get _menuInputNode(): HTMLInputElement | null {\n    return this.filterable ? (this._filterInputNode ?? null) : null;\n  }\n\n  protected _clearMenuInputFiltering() {\n    if (this.filterable) {\n      this._handleUserInitiatedClearInput();\n    }\n  }\n\n  protected _shouldClearMenuInputOnEscape({\n    menuOpen,\n    isInputTarget,\n  }: {\n    event: KeyboardEvent;\n    menuOpen: boolean;\n    isInputTarget: boolean;\n  }) {\n    if (!isInputTarget) {\n      return false;\n    }\n\n    if (menuOpen) {\n      return false;\n    }\n\n    if (!menuOpen) {\n      if (this._selectedItemsCount > 0) {\n        this._handleUserInitiatedSelectItem();\n      }\n\n      return Boolean(this._filterInputNode?.value);\n    }\n\n    return false;\n  }\n\n  /**\n   * The trigger button.\n   */\n  @query(`.${prefix}--list-box__field`)\n  private _triggerNode!: HTMLElement;\n\n  protected _selectionShouldChange(itemToSelect?: CDSMultiSelectItem) {\n    // If we are selecting an item, assumes we always toggle\n    return Boolean(this.value || itemToSelect);\n  }\n\n  protected _selectionDidChange(itemToSelect?: CDSMultiSelectItem) {\n    const allItems = Array.from(\n      this.querySelectorAll(\n        (this.constructor as typeof CDSMultiSelect).selectorItem\n      )\n    ) as CDSMultiSelectItem[];\n\n    // clicked \"select all\" when it was indeterminate\n    if (itemToSelect?.isSelectAll && itemToSelect.indeterminate) {\n      allItems.forEach((i) => {\n        i.selected = false;\n        i.indeterminate = false;\n      });\n      this.value = '';\n      return;\n    }\n\n    if (itemToSelect) {\n      // clicked select all\n      if (itemToSelect.isSelectAll) {\n        const items = this.filterable\n          ? Array.from(\n              this.querySelectorAll(\n                (this.constructor as typeof CDSMultiSelect).selectorItemResults\n              )\n            )\n          : allItems;\n        items.forEach((i) => {\n          if (\n            !(i as CDSMultiSelectItem).isSelectAll &&\n            !(i as CDSMultiSelectItem).disabled\n          ) {\n            (i as CDSMultiSelectItem).selected = !itemToSelect.selected;\n          }\n          (i as CDSMultiSelectItem).indeterminate = false;\n        });\n        itemToSelect.selected = !itemToSelect.selected;\n        // clicked regular item\n      } else {\n        itemToSelect.selected = !itemToSelect.selected;\n      }\n    } else {\n      forEach(\n        this.querySelectorAll(\n          (this.constructor as typeof CDSMultiSelect).selectorItemSelected\n        ),\n        (item) => {\n          (item as CDSMultiSelectItem).selected = false;\n        }\n      );\n      this._handleUserInitiatedToggle(false);\n    }\n    if (this.selectAll) this._computeSelectAllState();\n    // Change in `.selected` hasn't been reflected to the corresponding attribute yet\n    this.value = filter(\n      this.querySelectorAll(\n        (this.constructor as typeof CDSMultiSelect).selectorItem\n      ),\n      (item) => (item as CDSMultiSelectItem).selected\n    )\n      .map((item) => (item as CDSMultiSelectItem).value)\n      .join(',');\n  }\n\n  // Keep the menu open for individual selections, close only when clearing.\n\n  protected _shouldCloseAfterSelection(item?: CDSMultiSelectItem) {\n    return !item;\n  }\n\n  protected _handleClickInner(event: MouseEvent) {\n    const clickedItem = (event.target as HTMLElement).closest(\n      `${prefix}-multi-select-item`\n    ) as CDSMultiSelectItem | null;\n    if (\n      this._selectionButtonNode?.contains(event.target as Node) &&\n      !this.readOnly\n    ) {\n      this._handleUserInitiatedSelectItem();\n      if (this.filterable) {\n        this._filterInputNode.focus();\n      } else {\n        this._triggerNode.focus();\n      }\n    } else if (clickedItem && !clickedItem.hasAttribute('disabled')) {\n      // Handle focus highlight\n      const allItems = this.querySelectorAll(`${prefix}-multi-select-item`);\n      allItems.forEach((el) => el.removeAttribute('highlighted'));\n      clickedItem.setAttribute('highlighted', '');\n      this._handleUserInitiatedSelectItem(clickedItem);\n      this.setAttribute('item-clicked', '');\n      if (this.filterable) {\n        this._filterInputNode.focus();\n      }\n    } else if (this._clearButtonNode?.contains(event.target as Node)) {\n      this._handleUserInitiatedClearInput();\n    } else if (\n      !(event.target as HTMLElement)?.matches(\n        (this.constructor as typeof CDSMultiSelect).aiLabelItem\n      ) &&\n      // remove reference to slug in v12\n      !(event.target as HTMLElement)?.matches(\n        (this.constructor as typeof CDSMultiSelect).slugItem\n      )\n    ) {\n      super._handleClickInner(event);\n      if (this.filterable) {\n        if (!this.open && this._filterInputNode) {\n          this._clearInput();\n        }\n        this._filterInputNode.focus();\n      }\n    }\n  }\n\n  /**\n   * Clears selections on Escape click\n   */\n  protected _handleKeydownInner(event: KeyboardEvent) {\n    const { key } = event;\n    if (\n      key === 'Escape' &&\n      !this.filterable &&\n      !this.open &&\n      this._selectedItemsCount > 0\n    ) {\n      this._handleUserInitiatedSelectItem();\n      return;\n    }\n    super._handleKeydownInner(event);\n  }\n\n  @HostListener('focusout')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  protected _handleFocusOut(event: FocusEvent) {\n    if (\n      this.filterable &&\n      this._filterInputNode &&\n      !this.contains(event.relatedTarget as Node)\n    ) {\n      this._clearInput();\n    }\n    super._handleFocusOut(event);\n  }\n\n  /**\n   * Handler for the `keypress` event, ensures filter still works upon entering space\n   */\n  protected _handleKeypressInner(event: KeyboardEvent) {\n    const { key } = event;\n    const action = (this.constructor as typeof CDSDropdown).getAction(key);\n    const { TRIGGERING } = DROPDOWN_KEYBOARD_ACTION;\n\n    if (\n      this._clearButtonNode?.contains(event.target as Node) &&\n      // Space key should be handled by `<input>` unless \"clear selection\" button has focus\n      (action === TRIGGERING || key === ' ')\n    ) {\n      this._handleUserInitiatedClearInput();\n    } else if (this._selectionButtonNode?.contains(event.target as Node)) {\n      this._handleUserInitiatedSelectItem();\n      this.open = true;\n      if (this.filterable) {\n        this._filterInputNode.focus();\n      } else {\n        this._triggerNode.focus();\n      }\n    } else if (this.filterable) {\n      this._handleKeypressInnerFlterable(event);\n    } else {\n      super._handleKeypressInner(event);\n    }\n  }\n\n  protected _handleMouseoverInner(event: MouseEvent) {\n    const item = this._getDropdownItemFromEvent(event);\n    const isFiltering =\n      this.filterable && Boolean(this._filterInputNode?.value.length);\n\n    if (\n      !item ||\n      isFiltering ||\n      !item.hasAttribute('selected') ||\n      !item.hasAttribute('highlighted')\n    ) {\n      return;\n    }\n\n    super._handleMouseoverInner(event);\n  }\n\n  protected _handleMouseleaveInner(event: MouseEvent) {\n    const constructor = this.constructor as typeof CDSMultiSelect;\n    const isFiltering =\n      this.filterable && Boolean(this._filterInputNode?.value.length);\n    const highlightedItem = this.querySelector(\n      constructor.selectorItemHighlighted\n    ) as CDSMultiSelectItem | null;\n\n    if (isFiltering || highlightedItem?.hasAttribute('selected')) {\n      return;\n    }\n\n    super._handleMouseleaveInner(event);\n  }\n\n  /**\n   * Special andler for the `keypress` event, ensures space selection for filterable\n   * variation is disabled\n   */\n\n  protected _handleKeypressInnerFlterable(event: KeyboardEvent) {\n    const { key } = event;\n    const action = (this.constructor as typeof CDSDropdown).getAction(key);\n    if (!this.open) {\n      switch (action) {\n        case DROPDOWN_KEYBOARD_ACTION.TRIGGERING:\n          this._handleUserInitiatedToggle(true);\n          break;\n        default:\n          break;\n      }\n    } else {\n      switch (key) {\n        case 'Enter':\n          {\n            const constructor = this.constructor as typeof CDSDropdown;\n            const highlightedItem = this.querySelector(\n              constructor.selectorItemHighlighted\n            ) as CDSMultiSelectItem;\n            if (highlightedItem) {\n              this._handleUserInitiatedSelectItem(highlightedItem);\n            } else {\n              this._handleUserInitiatedToggle(false);\n            }\n          }\n          break;\n        default:\n          break;\n      }\n    }\n  }\n\n  protected _renderTitleLabel() {\n    const {\n      clearSelectionDescription,\n      clearSelectionText,\n      disabled,\n      hideLabel,\n      titleText,\n      _selectedItemsCount: selectedItemsCount,\n      _slotTitleTextNode: slotTitleTextNode,\n      _handleSlotchangeLabelText: handleSlotchangeLabelText,\n    } = this;\n\n    const labelClasses = classMap({\n      [`${prefix}--label`]: true,\n      [`${prefix}--label--disabled`]: disabled,\n      [`${prefix}--visually-hidden`]: hideLabel,\n    });\n\n    const hasTitleText =\n      titleText ||\n      (slotTitleTextNode && slotTitleTextNode.assignedNodes().length > 0);\n\n    return html`\n      <label\n        part=\"title-text\"\n        class=\"${labelClasses}\"\n        ?hidden=\"${!hasTitleText}\">\n        <slot name=\"title-text\" @slotchange=\"${handleSlotchangeLabelText}\"\n          >${titleText}</slot\n        >\n        ${selectedItemsCount > 0\n          ? html`\n              <span class=\"${prefix}--visually-hidden\">\n                ${clearSelectionDescription} ${selectedItemsCount},\n                ${clearSelectionText}\n              </span>\n            `\n          : null}\n      </label>\n    `;\n  }\n\n  protected _renderPrecedingLabel() {\n    const {\n      disabled,\n      readOnly,\n      clearSelectionLabel,\n      _selectedItemsCount: selectedItemsCount,\n    } = this;\n\n    const selectionButtonClasses = classMap({\n      [`${prefix}--list-box__selection`]: true,\n      [`${prefix}--list-box__selection--multi`]: true,\n      [`${prefix}--tag`]: true,\n      [`${prefix}--tag--filter`]: true,\n      [`${prefix}--tag--high-contrast`]: true,\n      [`${prefix}--tag--disabled`]: disabled,\n    });\n    return selectedItemsCount === 0\n      ? undefined\n      : html`\n          <div\n            id=\"selection-button\"\n            role=\"button\"\n            class=\"${selectionButtonClasses}\"\n            tabindex=\"-1\"\n            aria-disabled=${readOnly}\n            title=\"${clearSelectionLabel}\">\n            ${selectedItemsCount}\n            ${iconLoader(Close16, {\n              'aria-label': clearSelectionLabel,\n              class: `${prefix}--tag__close-icon`,\n            })}\n          </div>\n        `;\n  }\n\n  /**\n    @returns The main content of the trigger button.\n   */\n  protected _renderLabel(): TemplateResult {\n    const { label, value, _selectedItemContent: selectedItemContent } = this;\n\n    const inputClasses = classMap({\n      [`${prefix}--text-input`]: true,\n      [`${prefix}--text-input--empty`]: !value,\n    });\n\n    return !this.filterable\n      ? html`\n          <span id=\"trigger-label\" class=\"${prefix}--list-box__label\"\n            >${selectedItemContent || label}</span\n          >\n        `\n      : html`\n          <input\n            id=\"trigger-label\"\n            class=\"${inputClasses}\"\n            placeholder=\"${label}\"\n            role=\"combobox\"\n            aria-controls=\"menu-body\"\n            aria-expanded=\"${String(this.open)}\"\n            aria-autocomplete=\"list\"\n            @input=\"${this._handleInput}\" />\n        `;\n  }\n\n  protected _renderFollowingLabel(): TemplateResult | undefined {\n    const { clearSelectionLabel, _filterInputNode: filterInputNode } = this;\n    return filterInputNode &&\n      filterInputNode.value.length > 0 &&\n      this.filterable\n      ? html`\n          <div\n            id=\"clear-button\"\n            role=\"button\"\n            class=\"${prefix}--list-box__selection\"\n            tabindex=\"-1\"\n            title=\"${clearSelectionLabel}\">\n            ${iconLoader(Close16, { 'aria-label': clearSelectionLabel })}\n          </div>\n        `\n      : undefined;\n  }\n\n  /**\n   * Handles `input` event on the `<input>` for filtering.\n   */\n  protected _handleInput() {\n    const items = this.querySelectorAll(\n      (this.constructor as typeof CDSMultiSelect).selectorItem\n    );\n    const inputValue = this._filterInputNode.value.toLocaleLowerCase();\n    this.toggleAttribute('has-value', inputValue.length > 0);\n\n    if (!this.open && inputValue.length > 0) {\n      this.open = true;\n    }\n\n    forEach(items, (item) => {\n      // always show the selectAll item\n      if ((item as CDSMultiSelectItem).isSelectAll) {\n        item.removeAttribute('filtered');\n        return;\n      }\n      const itemValue = (item as HTMLElement).innerText.toLocaleLowerCase();\n\n      if (!itemValue.includes(inputValue)) {\n        (item as CDSMultiSelectItem).setAttribute('filtered', '');\n        (item as CDSMultiSelectItem).removeAttribute('highlighted');\n      } else {\n        (item as CDSMultiSelectItem).removeAttribute('filtered');\n      }\n    });\n\n    this.requestUpdate();\n\n    if (this.selectAll) {\n      const selectAllItem = this.querySelector(\n        `${prefix}-multi-select-item[is-select-all]`\n      ) as CDSMultiSelectItem;\n      if (selectAllItem) {\n        const visible = Array.from(\n          this.querySelectorAll(\n            (this.constructor as typeof CDSMultiSelect).selectorItemResults\n          )\n        ) as CDSMultiSelectItem[];\n        const actionable = visible.filter((i) => !i.isSelectAll && !i.disabled);\n        if (actionable.length === 0) {\n          selectAllItem.setAttribute('filtered', '');\n        } else {\n          selectAllItem.removeAttribute('filtered');\n          this._computeSelectAllState();\n        }\n      }\n    }\n\n    const constructor = this.constructor as typeof CDSMultiSelect;\n    const visibleItems = Array.from(\n      this.querySelectorAll(constructor.selectorItemResults)\n    ) as CDSMultiSelectItem[];\n\n    if (visibleItems.length > 0) {\n      visibleItems.forEach((i) => i.removeAttribute('highlighted'));\n      this.toggleAttribute('item-clicked', inputValue.length > 0);\n      const first = visibleItems[0] as HTMLElement;\n      first.setAttribute('highlighted', '');\n      first.focus();\n    } else {\n      this._filterInputNode.focus();\n    }\n  }\n\n  /**\n   * Navigate through dropdown items.\n   *\n   * @param direction `-1` to navigate backward, `1` to navigate forward.\n   */\n  protected _navigate(direction: number) {\n    super._navigate(direction);\n    if (this.filterable) {\n      this.setAttribute('item-clicked', '');\n    } else {\n      this._triggerNode.classList.add('no-focus-style');\n    }\n  }\n\n  /**\n   * Handles user-initiated clearing the `<input>` for filtering.\n   */\n  protected _handleUserInitiatedClearInput() {\n    const constructor = this.constructor as typeof CDSMultiSelect;\n    const items = this.querySelectorAll(constructor.selectorItemFiltered);\n    this._filterInputNode.value = '';\n    this._filterInputNode.focus();\n    forEach(items, (item) => {\n      (item as CDSMultiSelectItem).removeAttribute('filtered');\n    });\n    this._filterInputNode.dispatchEvent(\n      new Event('input', { bubbles: true, composed: true })\n    );\n  }\n\n  /**\n   * The `aria-label` attribute for the icon to clear selection.\n   */\n  @property({ attribute: 'clear-selection-label' })\n  clearSelectionLabel = '';\n\n  /**\n   * Specify the text that should be read for screen readers that describes total items selected\n   */\n  @property({ attribute: 'clear-selection-description' })\n  clearSelectionDescription = 'Total items selected: ';\n\n  /**\n   * Specify the text that should be read for screen readers to clear selection.\n   */\n  @property({ attribute: 'clear-selection-text' })\n  clearSelectionText = 'To clear selection, press Delete or Backspace.';\n\n  /**\n   * Specify the locale of the control. Used for the default compareItems used for sorting the list of items in the control.\n   */\n  @property()\n  locale = 'en';\n\n  /**\n   * Enables rendering of a “Select all” multi-select-item\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'select-all' })\n  selectAll = false;\n\n  /**\n   * Specify feedback (mode) of the selection.\n   * `top`: selected item jumps to top\n   * `fixed`: selected item stays at it's position\n   * `top-after-reopen`: selected item jump to top after reopen dropdown\n   */\n  @property({ attribute: 'selection-feedback' })\n  selectionFeedback = SELECTION_FEEDBACK_OPTION.TOP_AFTER_REOPEN;\n\n  /**\n   * The CSS class list for multi-select listbox\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452\n  protected get _classes(): any {\n    const {\n      disabled,\n      size,\n      type,\n      invalid,\n      readOnly,\n      open,\n      warn,\n      _selectedItemsCount: selectedItemsCount,\n    } = this;\n    const inline = type === DROPDOWN_TYPE.INLINE;\n\n    const isInteractive = !readOnly && !disabled;\n\n    const normalizedProps: {\n      invalid: boolean;\n      warn: boolean;\n    } = {\n      invalid: isInteractive && invalid,\n      warn: isInteractive && !invalid && warn,\n    };\n\n    return classMap({\n      [`${prefix}--multi-select`]: true,\n      [`${prefix}--list-box`]: true,\n      [`${prefix}--list-box--disabled`]: disabled,\n      [`${prefix}--list-box--inline`]: inline,\n      [`${prefix}--list-box--expanded`]: open,\n      [`${prefix}--list-box--${size}`]: size,\n      [`${prefix}--multi-select--invalid`]: normalizedProps.invalid,\n      [`${prefix}--multi-select--warn`]: normalizedProps.warn,\n      [`${prefix}--multi-select--inline`]: inline,\n      [`${prefix}--multi-select--readonly`]: readOnly,\n      [`${prefix}--multi-select--selected`]: selectedItemsCount > 0,\n      [`${prefix}--list-box__wrapper--decorator`]: this._hasAILabel, // inherited from CDSDropdown\n      [`${prefix}--multi-select--selectall`]: this.selectAll,\n    });\n  }\n\n  protected compareItems = (itemA, itemB, { locale }) => {\n    itemA.localeCompare(itemB, locale, { numeric: true });\n  };\n\n  protected sortItems = (\n    menuItems: NodeList,\n    { values, compareItems, locale = 'en' }\n  ) => {\n    const menuItemsArray = Array.from(menuItems);\n\n    const sortedArray = menuItemsArray.sort((itemA, itemB) => {\n      const hasItemA = values.includes((itemA as HTMLInputElement).value);\n      const hasItemB = values.includes((itemB as HTMLInputElement).value);\n\n      // Prefer whichever item is in the `value` array first\n      if (hasItemA && !hasItemB) {\n        return -1;\n      }\n\n      if (hasItemB && !hasItemA) {\n        return 1;\n      }\n\n      return compareItems(\n        (itemA as HTMLInputElement).value,\n        (itemB as HTMLInputElement).value,\n        {\n          locale,\n        }\n      );\n    });\n\n    return sortedArray;\n  };\n\n  shouldUpdate(changedProperties) {\n    const { selectorItem, aiLabelItem, slugItem } = this\n      .constructor as typeof CDSMultiSelect;\n    const aiLabel =\n      this.querySelector(aiLabelItem) || this.querySelector(slugItem);\n    const items = this.querySelectorAll(selectorItem);\n\n    const { value, locale } = this;\n    const values = !value ? [] : value.split(',');\n\n    if (changedProperties.has('size')) {\n      forEach(this.querySelectorAll(selectorItem), (elem) => {\n        (elem as CDSMultiSelectItem).size = this.size;\n      });\n    }\n    if (changedProperties.has('value')) {\n      // Updates selection beforehand because our rendering logic for `<cds-custom-multi-select>` looks for selected items via `qSA()`\n      forEach(items, (elem) => {\n        (elem as CDSMultiSelectItem).selected =\n          values.indexOf((elem as CDSMultiSelectItem).value) >= 0;\n      });\n      this._selectedItemsCount = filter(\n        items,\n        (elem) =>\n          values.indexOf((elem as CDSMultiSelectItem).value) >= 0 &&\n          !(elem as CDSMultiSelectItem).isSelectAll\n      ).length;\n\n      if (this.selectionFeedback === SELECTION_FEEDBACK_OPTION.TOP) {\n        const sortedMenuItems = this.sortItems(items, {\n          values,\n          compareItems: this.compareItems,\n          locale,\n        });\n\n        if (aiLabel) {\n          sortedMenuItems.unshift(aiLabel);\n        }\n\n        this.replaceChildren(...sortedMenuItems);\n      }\n    }\n    if (changedProperties.has('open')) {\n      if (\n        this.selectionFeedback === SELECTION_FEEDBACK_OPTION.TOP_AFTER_REOPEN\n      ) {\n        const sortedMenuItems = this.sortItems(items, {\n          values,\n          compareItems: this.compareItems,\n          locale,\n        });\n\n        if (aiLabel) {\n          sortedMenuItems.unshift(aiLabel);\n        }\n        sortedMenuItems.forEach((item) => {\n          this.appendChild(item);\n        });\n      }\n    }\n    return true;\n  }\n\n  updated(changedProperties) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('open') && this.open) {\n      const selectedItems = Array.from(\n        this.querySelectorAll(`${prefix}-multi-select-item[selected]`)\n      ) as CDSMultiSelectItem[];\n\n      if (selectedItems.length > 0) {\n        let itemToFocus: HTMLElement | null = null;\n        if (this.selectAll) {\n          itemToFocus = this.querySelector(\n            `${prefix}-multi-select-item[is-select-all]`\n          ) as CDSMultiSelectItem;\n        }\n        if (!itemToFocus) {\n          itemToFocus = selectedItems[0] as HTMLElement;\n        }\n        this.setAttribute('item-clicked', '');\n        itemToFocus.focus();\n        itemToFocus.setAttribute('highlighted', '');\n      } else {\n        if (this.filterable) {\n          this._filterInputNode.focus();\n        } else {\n          this._triggerNode.focus();\n        }\n      }\n    }\n    // reorder items so that select all is always at the top of the list\n    if (this.selectAll && changedProperties.has('open') && this.open) {\n      const items = Array.from(\n        this.querySelectorAll('cds-custom-multi-select-item')\n      ) as CDSMultiSelectItem[];\n\n      const selectAllItem = items.find((i) => i.isSelectAll);\n      if (selectAllItem) {\n        this.appendChild(selectAllItem);\n        items\n          .filter((i) => i !== selectAllItem)\n          .forEach((i) => this.appendChild(i));\n      }\n    }\n\n    // flush the top of the first element\n    Array.from(this.querySelectorAll('cds-custom-multi-select-item')).forEach(\n      (item, index) => {\n        if (index === 0 && !item.hasAttribute('is-select-all')) {\n          item.setAttribute('flush-top', '');\n        } else if (index === 1 && this.selectAll) {\n          item.setAttribute('flush-top', '');\n        } else {\n          item.removeAttribute('flush-top');\n        }\n      }\n    );\n\n    if (changedProperties.has('open') && !this.open) {\n      this._triggerNode.classList.remove('no-focus-style');\n      this.removeAttribute('item-clicked');\n    }\n  }\n\n  firstUpdated(changedProperties) {\n    super.firstUpdated?.(changedProperties);\n\n    // whenever more items are added/removed, recompute the state of the select all option\n    if (!this.selectAll) return;\n    const defaultSlot =\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n      this.shadowRoot!.querySelector<HTMLSlotElement>('slot:not([name])')!;\n    defaultSlot.addEventListener('slotchange', () =>\n      this._computeSelectAllState()\n    );\n  }\n\n  /**\n   * Computes the state of the select all option and sets it to either\n   * 'selected' or 'indeterminate'\n   */\n  private _computeSelectAllState() {\n    if (!this.selectAll) return;\n\n    const allItems = Array.from(\n      this.querySelectorAll(\n        (this.constructor as typeof CDSMultiSelect).selectorItem\n      )\n    ) as CDSMultiSelectItem[];\n    const selectAllItem = allItems.find((i) => i.isSelectAll);\n    if (!selectAllItem || selectAllItem.hasAttribute('filtered')) {\n      return;\n    }\n\n    const enabledItems = allItems\n      .filter((i) => !i.isSelectAll && !i.disabled)\n      .filter((i) => !this.filterable || !i.hasAttribute('filtered'));\n    const selectedCount = enabledItems.filter((i) => i.selected).length;\n    const allSelected = selectedCount === enabledItems.length;\n\n    selectAllItem.selected = allSelected;\n    selectAllItem.indeterminate = selectedCount > 0 && !allSelected;\n  }\n\n  /**\n   * Clears the filterable input field\n   */\n  private _clearInput() {\n    this._filterInputNode.value = '';\n    this.toggleAttribute('has-value', false);\n\n    const items = this.querySelectorAll(\n      (this.constructor as typeof CDSMultiSelect).selectorItemFiltered\n    );\n    forEach(items, (item) => {\n      (item as CDSMultiSelectItem).removeAttribute('filtered');\n    });\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    /**\n     * Detect if multi-select already has initially selected items\n     */\n    this.value = filter(\n      this.querySelectorAll(\n        (this.constructor as typeof CDSMultiSelect).selectorItem\n      ),\n      (item) => (item as CDSMultiSelectItem).hasAttribute('selected')\n    )\n      .map((item) => (item as CDSMultiSelectItem).getAttribute('value'))\n      .join(',');\n  }\n\n  /**\n   * A selector that will return menu body.\n   */\n  static get selectorMenuBody() {\n    return `div[part=\"menu-body\"]`;\n  }\n\n  /**\n   * A selector that will return highlighted items.\n   */\n  static get selectorItemHighlighted() {\n    return `${prefix}-multi-select-item[highlighted]`;\n  }\n\n  /**\n   * A selector that will return multi select items.\n   * We use a separate property from `.itemTagName` due to the nature in difference of tag name vs. selector.\n   */\n  static get selectorItem() {\n    return `${prefix}-multi-select-item`;\n  }\n\n  /**\n   * A selector that will return remaining items after a filter.\n   */\n  static get selectorItemFiltered() {\n    return `${prefix}-multi-select-item[filtered]`;\n  }\n\n  /**\n   * A selector that will return remaining items after a filter.\n   */\n  static get selectorItemResults() {\n    return `${prefix}-multi-select-item:not([filtered])`;\n  }\n\n  /**\n   * A selector that will return selected items.\n   */\n  static get selectorItemSelected() {\n    return `${prefix}-multi-select-item[selected]`;\n  }\n\n  /**\n   * The name of the custom event fired before this multi select item is being toggled upon a user gesture.\n   * Cancellation of this event stops the user-initiated action of toggling this multi select item.\n   */\n  static get eventBeforeToggle() {\n    return `${prefix}-multi-select-beingtoggled`;\n  }\n\n  /**\n   * The name of the custom event fired after this multi select item is toggled upon a user gesture.\n   */\n  static get eventToggle() {\n    return `${prefix}-multi-select-toggled`;\n  }\n\n  /**\n   * The name of the custom event fired before a multi select item is selected upon a user gesture.\n   * Cancellation of this event stops changing the user-initiated selection.\n   */\n  static get eventBeforeSelect() {\n    return `${prefix}-multi-select-beingselected`;\n  }\n\n  /**\n   * The name of the custom event fired after a a multi select item is selected upon a user gesture.\n   */\n  static get eventSelect() {\n    return `${prefix}-multi-select-selected`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSMultiSelect;\n"],"mappings":"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"}
+{"version":3,"file":"multi-select.js","names":["CDSDropdown","styles","customElement"],"sources":["../../../src/components/multi-select/multi-select.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2020, 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, PropertyValues, TemplateResult } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { prefix } from '../../globals/settings';\nimport Close16 from '@carbon/icons/es/close/16.js';\nimport { filter, forEach } from '../../globals/internal/collection-helpers';\nimport CDSDropdown, {\n  DROPDOWN_KEYBOARD_ACTION,\n  DROPDOWN_TYPE,\n} from '../dropdown/dropdown';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport { SELECTION_FEEDBACK_OPTION } from './defs';\nimport CDSMultiSelectItem from './multi-select-item';\nimport styles from './multi-select.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport HostListener from '../../globals/decorators/host-listener';\n\nexport {\n  DROPDOWN_SIZE,\n  DROPDOWN_TYPE,\n  DROPDOWN_DIRECTION,\n} from '../dropdown/dropdown';\n\nexport { SELECTION_FEEDBACK_OPTION };\n\n/**\n * Multi select.\n *\n * @element cds-custom-multi-select\n * @fires cds-custom-multi-select-beingselected\n *   The custom event fired before a multi select item is selected upon a user gesture.\n *   Cancellation of this event stops changing the user-initiated selection.\n * @fires cds-custom-multi-select-selected - The custom event fired after a multi select item is selected upon a user gesture.\n * @fires cds-custom-multi-select-beingtoggled\n *   The custom event fired before the open state of this multi select is toggled upon a user gesture.\n *   Cancellation of this event stops the user-initiated toggling.\n * @fires cds-custom-multi-select-toggled\n *   The custom event fired after the open state of this multi select is toggled upon a user gesture.\n */\n@customElement(`${prefix}-multi-select`)\nclass CDSMultiSelect extends CDSDropdown {\n  @property({ type: Boolean })\n  filterable;\n\n  /**\n   * The count of selected items.\n   */\n  private _selectedItemsCount = 0;\n\n  /**\n   * The clear button.\n   */\n  @query('#clear-button')\n  private _clearButtonNode!: HTMLElement;\n\n  /**\n   * The selection button.\n   */\n  @query('#selection-button')\n  private _selectionButtonNode!: HTMLElement;\n\n  /**\n   * The `<input>` for filtering.\n   */\n  @query('input')\n  private _filterInputNode!: HTMLInputElement;\n\n  protected get _supportsMenuInputFiltering() {\n    return Boolean(this.filterable);\n  }\n\n  protected willUpdate(changedProperties: PropertyValues) {\n    this._shouldTriggerBeFocusable = !this.filterable;\n    super.willUpdate(changedProperties);\n  }\n\n  protected get _menuInputNode(): HTMLInputElement | null {\n    return this.filterable ? (this._filterInputNode ?? null) : null;\n  }\n\n  protected _clearMenuInputFiltering() {\n    if (this.filterable) {\n      this._handleUserInitiatedClearInput();\n    }\n  }\n\n  protected _shouldClearMenuInputOnEscape({\n    menuOpen,\n    isInputTarget,\n  }: {\n    event: KeyboardEvent;\n    menuOpen: boolean;\n    isInputTarget: boolean;\n  }) {\n    if (!isInputTarget) {\n      return false;\n    }\n\n    if (menuOpen) {\n      return false;\n    }\n\n    if (!menuOpen) {\n      if (this._selectedItemsCount > 0) {\n        this._handleUserInitiatedSelectItem();\n      }\n\n      return Boolean(this._filterInputNode?.value);\n    }\n\n    return false;\n  }\n\n  /**\n   * The trigger button.\n   */\n  @query(`.${prefix}--list-box__field`)\n  private _triggerNode!: HTMLElement;\n\n  protected _selectionShouldChange(itemToSelect?: CDSMultiSelectItem) {\n    // If we are selecting an item, assumes we always toggle\n    return Boolean(this.value || itemToSelect);\n  }\n\n  protected _selectionDidChange(itemToSelect?: CDSMultiSelectItem) {\n    const allItems = Array.from(\n      this.querySelectorAll(\n        (this.constructor as typeof CDSMultiSelect).selectorItem\n      )\n    ) as CDSMultiSelectItem[];\n\n    // clicked \"select all\" when it was indeterminate\n    if (itemToSelect?.isSelectAll && itemToSelect.indeterminate) {\n      allItems.forEach((i) => {\n        i.selected = false;\n        i.indeterminate = false;\n      });\n      this.value = '';\n      return;\n    }\n\n    if (itemToSelect) {\n      // clicked select all\n      if (itemToSelect.isSelectAll) {\n        const items = this.filterable\n          ? Array.from(\n              this.querySelectorAll(\n                (this.constructor as typeof CDSMultiSelect).selectorItemResults\n              )\n            )\n          : allItems;\n        items.forEach((i) => {\n          if (\n            !(i as CDSMultiSelectItem).isSelectAll &&\n            !(i as CDSMultiSelectItem).disabled\n          ) {\n            (i as CDSMultiSelectItem).selected = !itemToSelect.selected;\n          }\n          (i as CDSMultiSelectItem).indeterminate = false;\n        });\n        itemToSelect.selected = !itemToSelect.selected;\n        // clicked regular item\n      } else {\n        itemToSelect.selected = !itemToSelect.selected;\n      }\n    } else {\n      forEach(\n        this.querySelectorAll(\n          (this.constructor as typeof CDSMultiSelect).selectorItemSelected\n        ),\n        (item) => {\n          (item as CDSMultiSelectItem).selected = false;\n        }\n      );\n      this._handleUserInitiatedToggle(false);\n    }\n    if (this.selectAll) this._computeSelectAllState();\n    // Change in `.selected` hasn't been reflected to the corresponding attribute yet\n    this.value = filter(\n      this.querySelectorAll(\n        (this.constructor as typeof CDSMultiSelect).selectorItem\n      ),\n      (item) => (item as CDSMultiSelectItem).selected\n    )\n      .map((item) => (item as CDSMultiSelectItem).value)\n      .join(',');\n  }\n\n  // Keep the menu open for individual selections, close only when clearing.\n\n  protected _shouldCloseAfterSelection(item?: CDSMultiSelectItem) {\n    return !item;\n  }\n\n  protected _handleClickInner(event: MouseEvent) {\n    const clickedItem = (event.target as HTMLElement).closest(\n      `${prefix}-multi-select-item`\n    ) as CDSMultiSelectItem | null;\n    if (\n      this._selectionButtonNode?.contains(event.target as Node) &&\n      !this.readOnly\n    ) {\n      this._handleUserInitiatedSelectItem();\n      if (this.filterable) {\n        this._filterInputNode.focus();\n      } else {\n        this._triggerNode.focus();\n      }\n    } else if (clickedItem && !clickedItem.hasAttribute('disabled')) {\n      // Handle focus highlight\n      const allItems = this.querySelectorAll(`${prefix}-multi-select-item`);\n      allItems.forEach((el) => el.removeAttribute('highlighted'));\n      clickedItem.setAttribute('highlighted', '');\n      this._handleUserInitiatedSelectItem(clickedItem);\n      this.setAttribute('item-clicked', '');\n      if (this.filterable) {\n        this._filterInputNode.focus();\n      }\n    } else if (this._clearButtonNode?.contains(event.target as Node)) {\n      this._handleUserInitiatedClearInput();\n    } else if (\n      !(event.target as HTMLElement)?.matches(\n        (this.constructor as typeof CDSMultiSelect).aiLabelItem\n      ) &&\n      // remove reference to slug in v12\n      !(event.target as HTMLElement)?.matches(\n        (this.constructor as typeof CDSMultiSelect).slugItem\n      )\n    ) {\n      super._handleClickInner(event);\n      if (this.filterable) {\n        if (!this.open && this._filterInputNode) {\n          this._clearInput();\n        }\n        this._filterInputNode.focus();\n      }\n    }\n  }\n\n  /**\n   * Clears selections on Escape click\n   */\n  protected _handleKeydownInner(event: KeyboardEvent) {\n    const { key } = event;\n    if (\n      key === 'Escape' &&\n      !this.filterable &&\n      !this.open &&\n      this._selectedItemsCount > 0\n    ) {\n      this._handleUserInitiatedSelectItem();\n      return;\n    }\n    super._handleKeydownInner(event);\n  }\n\n  @HostListener('focusout')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  protected _handleFocusOut(event: FocusEvent) {\n    if (\n      this.filterable &&\n      this._filterInputNode &&\n      !this.contains(event.relatedTarget as Node)\n    ) {\n      this._clearInput();\n    }\n    super._handleFocusOut(event);\n  }\n\n  /**\n   * Handler for the `keypress` event, ensures filter still works upon entering space\n   */\n  protected _handleKeypressInner(event: KeyboardEvent) {\n    const { key } = event;\n    const action = (this.constructor as typeof CDSDropdown).getAction(key);\n    const { TRIGGERING } = DROPDOWN_KEYBOARD_ACTION;\n\n    if (\n      this._clearButtonNode?.contains(event.target as Node) &&\n      // Space key should be handled by `<input>` unless \"clear selection\" button has focus\n      (action === TRIGGERING || key === ' ')\n    ) {\n      this._handleUserInitiatedClearInput();\n    } else if (this._selectionButtonNode?.contains(event.target as Node)) {\n      this._handleUserInitiatedSelectItem();\n      this.open = true;\n      if (this.filterable) {\n        this._filterInputNode.focus();\n      } else {\n        this._triggerNode.focus();\n      }\n    } else if (this.filterable) {\n      this._handleKeypressInnerFlterable(event);\n    } else {\n      super._handleKeypressInner(event);\n    }\n  }\n\n  protected _handleMouseoverInner(event: MouseEvent) {\n    const item = this._getDropdownItemFromEvent(event);\n    const isFiltering =\n      this.filterable && Boolean(this._filterInputNode?.value.length);\n\n    if (\n      !item ||\n      isFiltering ||\n      !item.hasAttribute('selected') ||\n      !item.hasAttribute('highlighted')\n    ) {\n      return;\n    }\n\n    super._handleMouseoverInner(event);\n  }\n\n  protected _handleMouseleaveInner(event: MouseEvent) {\n    const constructor = this.constructor as typeof CDSMultiSelect;\n    const isFiltering =\n      this.filterable && Boolean(this._filterInputNode?.value.length);\n    const highlightedItem = this.querySelector(\n      constructor.selectorItemHighlighted\n    ) as CDSMultiSelectItem | null;\n\n    if (isFiltering || highlightedItem?.hasAttribute('selected')) {\n      return;\n    }\n\n    super._handleMouseleaveInner(event);\n  }\n\n  /**\n   * Special andler for the `keypress` event, ensures space selection for filterable\n   * variation is disabled\n   */\n\n  protected _handleKeypressInnerFlterable(event: KeyboardEvent) {\n    const { key } = event;\n    const action = (this.constructor as typeof CDSDropdown).getAction(key);\n    if (!this.open) {\n      switch (action) {\n        case DROPDOWN_KEYBOARD_ACTION.TRIGGERING:\n          this._handleUserInitiatedToggle(true);\n          break;\n        default:\n          break;\n      }\n    } else {\n      switch (key) {\n        case 'Enter':\n          {\n            const constructor = this.constructor as typeof CDSDropdown;\n            const highlightedItem = this.querySelector(\n              constructor.selectorItemHighlighted\n            ) as CDSMultiSelectItem;\n            if (highlightedItem) {\n              this._handleUserInitiatedSelectItem(highlightedItem);\n            } else {\n              this._handleUserInitiatedToggle(false);\n            }\n          }\n          break;\n        default:\n          break;\n      }\n    }\n  }\n\n  protected _renderTitleLabel() {\n    const {\n      clearSelectionDescription,\n      clearSelectionText,\n      disabled,\n      hideLabel,\n      titleText,\n      _selectedItemsCount: selectedItemsCount,\n      _slotTitleTextNode: slotTitleTextNode,\n      _handleSlotchangeLabelText: handleSlotchangeLabelText,\n    } = this;\n\n    const labelClasses = classMap({\n      [`${prefix}--label`]: true,\n      [`${prefix}--label--disabled`]: disabled,\n      [`${prefix}--visually-hidden`]: hideLabel,\n    });\n\n    const hasTitleText =\n      titleText ||\n      (slotTitleTextNode && slotTitleTextNode.assignedNodes().length > 0);\n\n    return html`\n      <label\n        part=\"title-text\"\n        class=\"${labelClasses}\"\n        ?hidden=\"${!hasTitleText}\">\n        <slot name=\"title-text\" @slotchange=\"${handleSlotchangeLabelText}\"\n          >${titleText}</slot\n        >\n        ${selectedItemsCount > 0\n          ? html`\n              <span class=\"${prefix}--visually-hidden\">\n                ${clearSelectionDescription} ${selectedItemsCount},\n                ${clearSelectionText}\n              </span>\n            `\n          : null}\n      </label>\n    `;\n  }\n\n  protected _renderPrecedingLabel() {\n    const {\n      disabled,\n      readOnly,\n      clearSelectionLabel,\n      _selectedItemsCount: selectedItemsCount,\n    } = this;\n\n    const selectionButtonClasses = classMap({\n      [`${prefix}--list-box__selection`]: true,\n      [`${prefix}--list-box__selection--multi`]: true,\n      [`${prefix}--tag`]: true,\n      [`${prefix}--tag--filter`]: true,\n      [`${prefix}--tag--high-contrast`]: true,\n      [`${prefix}--tag--disabled`]: disabled,\n    });\n    return selectedItemsCount === 0\n      ? undefined\n      : html`\n          <div\n            id=\"selection-button\"\n            role=\"button\"\n            class=\"${selectionButtonClasses}\"\n            tabindex=\"-1\"\n            aria-disabled=${readOnly}\n            title=\"${clearSelectionLabel}\">\n            ${selectedItemsCount}\n            ${iconLoader(Close16, {\n              'aria-label': clearSelectionLabel,\n              class: `${prefix}--tag__close-icon`,\n            })}\n          </div>\n        `;\n  }\n\n  /**\n    @returns The main content of the trigger button.\n   */\n  protected _renderLabel(): TemplateResult {\n    const { label, value, _selectedItemContent: selectedItemContent } = this;\n\n    const inputClasses = classMap({\n      [`${prefix}--text-input`]: true,\n      [`${prefix}--text-input--empty`]: !value,\n    });\n\n    return !this.filterable\n      ? html`\n          <span id=\"trigger-label\" class=\"${prefix}--list-box__label\"\n            >${selectedItemContent || label}</span\n          >\n        `\n      : html`\n          <input\n            id=\"trigger-label\"\n            class=\"${inputClasses}\"\n            placeholder=\"${label}\"\n            role=\"combobox\"\n            aria-controls=\"menu-body\"\n            aria-expanded=\"${String(this.open)}\"\n            aria-autocomplete=\"list\"\n            @input=\"${this._handleInput}\" />\n        `;\n  }\n\n  protected _renderFollowingLabel(): TemplateResult | undefined {\n    const { clearSelectionLabel, _filterInputNode: filterInputNode } = this;\n    return filterInputNode &&\n      filterInputNode.value.length > 0 &&\n      this.filterable\n      ? html`\n          <div\n            id=\"clear-button\"\n            role=\"button\"\n            class=\"${prefix}--list-box__selection\"\n            tabindex=\"-1\"\n            title=\"${clearSelectionLabel}\">\n            ${iconLoader(Close16, { 'aria-label': clearSelectionLabel })}\n          </div>\n        `\n      : undefined;\n  }\n\n  /**\n   * Handles `input` event on the `<input>` for filtering.\n   */\n  protected _handleInput() {\n    const items = this.querySelectorAll(\n      (this.constructor as typeof CDSMultiSelect).selectorItem\n    );\n    const inputValue = this._filterInputNode.value.toLocaleLowerCase();\n    this.toggleAttribute('has-value', inputValue.length > 0);\n\n    if (!this.open && inputValue.length > 0) {\n      this.open = true;\n    }\n\n    forEach(items, (item) => {\n      // always show the selectAll item\n      if ((item as CDSMultiSelectItem).isSelectAll) {\n        item.removeAttribute('filtered');\n        return;\n      }\n      const itemValue = (item as HTMLElement).innerText.toLocaleLowerCase();\n\n      if (!itemValue.includes(inputValue)) {\n        (item as CDSMultiSelectItem).setAttribute('filtered', '');\n        (item as CDSMultiSelectItem).removeAttribute('highlighted');\n      } else {\n        (item as CDSMultiSelectItem).removeAttribute('filtered');\n      }\n    });\n\n    this.requestUpdate();\n\n    if (this.selectAll) {\n      const selectAllItem = this.querySelector(\n        `${prefix}-multi-select-item[is-select-all]`\n      ) as CDSMultiSelectItem;\n      if (selectAllItem) {\n        const visible = Array.from(\n          this.querySelectorAll(\n            (this.constructor as typeof CDSMultiSelect).selectorItemResults\n          )\n        ) as CDSMultiSelectItem[];\n        const actionable = visible.filter((i) => !i.isSelectAll && !i.disabled);\n        if (actionable.length === 0) {\n          selectAllItem.setAttribute('filtered', '');\n        } else {\n          selectAllItem.removeAttribute('filtered');\n          this._computeSelectAllState();\n        }\n      }\n    }\n\n    const constructor = this.constructor as typeof CDSMultiSelect;\n    const visibleItems = Array.from(\n      this.querySelectorAll(constructor.selectorItemResults)\n    ) as CDSMultiSelectItem[];\n\n    if (visibleItems.length > 0) {\n      visibleItems.forEach((i) => i.removeAttribute('highlighted'));\n      this.toggleAttribute('item-clicked', inputValue.length > 0);\n      const first = visibleItems[0] as HTMLElement;\n      first.setAttribute('highlighted', '');\n      first.focus();\n    } else {\n      this._filterInputNode.focus();\n    }\n  }\n\n  /**\n   * Navigate through dropdown items.\n   *\n   * @param direction `-1` to navigate backward, `1` to navigate forward.\n   */\n  protected _navigate(direction: number) {\n    super._navigate(direction);\n    if (this.filterable) {\n      this.setAttribute('item-clicked', '');\n    } else {\n      this._triggerNode.classList.add('no-focus-style');\n    }\n  }\n\n  /**\n   * Handles user-initiated clearing the `<input>` for filtering.\n   */\n  protected _handleUserInitiatedClearInput() {\n    const constructor = this.constructor as typeof CDSMultiSelect;\n    const items = this.querySelectorAll(constructor.selectorItemFiltered);\n    this._filterInputNode.value = '';\n    this._filterInputNode.focus();\n    forEach(items, (item) => {\n      (item as CDSMultiSelectItem).removeAttribute('filtered');\n    });\n    this._filterInputNode.dispatchEvent(\n      new Event('input', { bubbles: true, composed: true })\n    );\n  }\n\n  /**\n   * The `aria-label` attribute for the icon to clear selection.\n   */\n  @property({ attribute: 'clear-selection-label' })\n  clearSelectionLabel = '';\n\n  /**\n   * Specify the text that should be read for screen readers that describes total items selected\n   */\n  @property({ attribute: 'clear-selection-description' })\n  clearSelectionDescription = 'Total items selected: ';\n\n  /**\n   * Specify the text that should be read for screen readers to clear selection.\n   */\n  @property({ attribute: 'clear-selection-text' })\n  clearSelectionText = 'To clear selection, press Delete or Backspace.';\n\n  /**\n   * Specify the locale of the control. Used for the default compareItems used for sorting the list of items in the control.\n   */\n  @property()\n  locale = 'en';\n\n  /**\n   * Enables rendering of a “Select all” multi-select-item\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'select-all' })\n  selectAll = false;\n\n  /**\n   * Specify feedback (mode) of the selection.\n   * `top`: selected item jumps to top\n   * `fixed`: selected item stays at it's position\n   * `top-after-reopen`: selected item jump to top after reopen dropdown\n   */\n  @property({ attribute: 'selection-feedback' })\n  selectionFeedback = SELECTION_FEEDBACK_OPTION.TOP_AFTER_REOPEN;\n\n  /**\n   * The CSS class list for multi-select listbox\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452\n  protected get _classes(): any {\n    const {\n      disabled,\n      size,\n      type,\n      invalid,\n      readOnly,\n      open,\n      warn,\n      _selectedItemsCount: selectedItemsCount,\n    } = this;\n    const inline = type === DROPDOWN_TYPE.INLINE;\n\n    const isInteractive = !readOnly && !disabled;\n\n    const normalizedProps: {\n      invalid: boolean;\n      warn: boolean;\n    } = {\n      invalid: isInteractive && invalid,\n      warn: isInteractive && !invalid && warn,\n    };\n\n    return classMap({\n      [`${prefix}--multi-select`]: true,\n      [`${prefix}--list-box`]: true,\n      [`${prefix}--list-box--disabled`]: disabled,\n      [`${prefix}--list-box--inline`]: inline,\n      [`${prefix}--list-box--expanded`]: open,\n      [`${prefix}--list-box--${size}`]: size,\n      [`${prefix}--multi-select--invalid`]: normalizedProps.invalid,\n      [`${prefix}--multi-select--warn`]: normalizedProps.warn,\n      [`${prefix}--multi-select--inline`]: inline,\n      [`${prefix}--multi-select--readonly`]: readOnly,\n      [`${prefix}--multi-select--selected`]: selectedItemsCount > 0,\n      [`${prefix}--list-box__wrapper--decorator`]: this._hasAILabel, // inherited from CDSDropdown\n      [`${prefix}--multi-select--selectall`]: this.selectAll,\n    });\n  }\n\n  protected compareItems = (itemA, itemB, { locale }) => {\n    itemA.localeCompare(itemB, locale, { numeric: true });\n  };\n\n  protected sortItems = (\n    menuItems: NodeList,\n    { values, compareItems, locale = 'en' }\n  ) => {\n    const menuItemsArray = Array.from(menuItems);\n\n    const sortedArray = menuItemsArray.sort((itemA, itemB) => {\n      const hasItemA = values.includes((itemA as HTMLInputElement).value);\n      const hasItemB = values.includes((itemB as HTMLInputElement).value);\n\n      // Prefer whichever item is in the `value` array first\n      if (hasItemA && !hasItemB) {\n        return -1;\n      }\n\n      if (hasItemB && !hasItemA) {\n        return 1;\n      }\n\n      return compareItems(\n        (itemA as HTMLInputElement).value,\n        (itemB as HTMLInputElement).value,\n        {\n          locale,\n        }\n      );\n    });\n\n    return sortedArray;\n  };\n\n  shouldUpdate(changedProperties) {\n    const { selectorItem, aiLabelItem, slugItem } = this\n      .constructor as typeof CDSMultiSelect;\n    const aiLabel =\n      this.querySelector(aiLabelItem) || this.querySelector(slugItem);\n    const items = this.querySelectorAll(selectorItem);\n\n    const { value, locale } = this;\n    const values = !value ? [] : value.split(',');\n\n    if (changedProperties.has('size')) {\n      forEach(this.querySelectorAll(selectorItem), (elem) => {\n        (elem as CDSMultiSelectItem).size = this.size;\n      });\n    }\n    if (changedProperties.has('value')) {\n      // Updates selection beforehand because our rendering logic for `<cds-custom-multi-select>` looks for selected items via `qSA()`\n      forEach(items, (elem) => {\n        (elem as CDSMultiSelectItem).selected =\n          values.indexOf((elem as CDSMultiSelectItem).value) >= 0;\n      });\n      this._selectedItemsCount = filter(\n        items,\n        (elem) =>\n          values.indexOf((elem as CDSMultiSelectItem).value) >= 0 &&\n          !(elem as CDSMultiSelectItem).isSelectAll\n      ).length;\n\n      if (this.selectionFeedback === SELECTION_FEEDBACK_OPTION.TOP) {\n        const sortedMenuItems = this.sortItems(items, {\n          values,\n          compareItems: this.compareItems,\n          locale,\n        });\n\n        if (aiLabel) {\n          sortedMenuItems.unshift(aiLabel);\n        }\n\n        this.replaceChildren(...sortedMenuItems);\n      }\n    }\n    if (changedProperties.has('open')) {\n      if (\n        this.selectionFeedback === SELECTION_FEEDBACK_OPTION.TOP_AFTER_REOPEN\n      ) {\n        const sortedMenuItems = this.sortItems(items, {\n          values,\n          compareItems: this.compareItems,\n          locale,\n        });\n\n        if (aiLabel) {\n          sortedMenuItems.unshift(aiLabel);\n        }\n        sortedMenuItems.forEach((item) => {\n          this.appendChild(item);\n        });\n      }\n    }\n    return true;\n  }\n\n  updated(changedProperties) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('open') && this.open) {\n      const selectedItems = Array.from(\n        this.querySelectorAll(`${prefix}-multi-select-item[selected]`)\n      ) as CDSMultiSelectItem[];\n\n      if (selectedItems.length > 0) {\n        let itemToFocus: HTMLElement | null = null;\n        if (this.selectAll) {\n          itemToFocus = this.querySelector(\n            `${prefix}-multi-select-item[is-select-all]`\n          ) as CDSMultiSelectItem;\n        }\n        if (!itemToFocus) {\n          itemToFocus = selectedItems[0] as HTMLElement;\n        }\n        this.setAttribute('item-clicked', '');\n        itemToFocus.focus();\n        itemToFocus.setAttribute('highlighted', '');\n      } else {\n        if (this.filterable) {\n          this._filterInputNode.focus();\n        } else {\n          this._triggerNode.focus();\n        }\n      }\n    }\n    // reorder items so that select all is always at the top of the list\n    if (this.selectAll && changedProperties.has('open') && this.open) {\n      const items = Array.from(\n        this.querySelectorAll('cds-custom-multi-select-item')\n      ) as CDSMultiSelectItem[];\n\n      const selectAllItem = items.find((i) => i.isSelectAll);\n      if (selectAllItem) {\n        this.appendChild(selectAllItem);\n        items\n          .filter((i) => i !== selectAllItem)\n          .forEach((i) => this.appendChild(i));\n      }\n    }\n\n    // flush the top of the first element\n    Array.from(this.querySelectorAll('cds-custom-multi-select-item')).forEach(\n      (item, index) => {\n        if (index === 0 && !item.hasAttribute('is-select-all')) {\n          item.setAttribute('flush-top', '');\n        } else if (index === 1 && this.selectAll) {\n          item.setAttribute('flush-top', '');\n        } else {\n          item.removeAttribute('flush-top');\n        }\n      }\n    );\n\n    if (changedProperties.has('open') && !this.open) {\n      this._triggerNode.classList.remove('no-focus-style');\n      this.removeAttribute('item-clicked');\n    }\n  }\n\n  firstUpdated(changedProperties) {\n    super.firstUpdated?.(changedProperties);\n\n    // whenever more items are added/removed, recompute the state of the select all option\n    if (!this.selectAll) return;\n    const defaultSlot =\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n      this.shadowRoot!.querySelector<HTMLSlotElement>('slot:not([name])')!;\n    defaultSlot.addEventListener('slotchange', () =>\n      this._computeSelectAllState()\n    );\n  }\n\n  /**\n   * Computes the state of the select all option and sets it to either\n   * 'selected' or 'indeterminate'\n   */\n  private _computeSelectAllState() {\n    if (!this.selectAll) return;\n\n    const allItems = Array.from(\n      this.querySelectorAll(\n        (this.constructor as typeof CDSMultiSelect).selectorItem\n      )\n    ) as CDSMultiSelectItem[];\n    const selectAllItem = allItems.find((i) => i.isSelectAll);\n    if (!selectAllItem || selectAllItem.hasAttribute('filtered')) {\n      return;\n    }\n\n    const enabledItems = allItems\n      .filter((i) => !i.isSelectAll && !i.disabled)\n      .filter((i) => !this.filterable || !i.hasAttribute('filtered'));\n    const selectedCount = enabledItems.filter((i) => i.selected).length;\n    const allSelected = selectedCount === enabledItems.length;\n\n    selectAllItem.selected = allSelected;\n    selectAllItem.indeterminate = selectedCount > 0 && !allSelected;\n  }\n\n  /**\n   * Clears the filterable input field\n   */\n  private _clearInput() {\n    this._filterInputNode.value = '';\n    this.toggleAttribute('has-value', false);\n\n    const items = this.querySelectorAll(\n      (this.constructor as typeof CDSMultiSelect).selectorItemFiltered\n    );\n    forEach(items, (item) => {\n      (item as CDSMultiSelectItem).removeAttribute('filtered');\n    });\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    /**\n     * Detect if multi-select already has initially selected items\n     */\n    this.value = filter(\n      this.querySelectorAll(\n        (this.constructor as typeof CDSMultiSelect).selectorItem\n      ),\n      (item) => (item as CDSMultiSelectItem).hasAttribute('selected')\n    )\n      .map((item) => (item as CDSMultiSelectItem).getAttribute('value'))\n      .join(',');\n  }\n\n  /**\n   * A selector that will return menu body.\n   */\n  static get selectorMenuBody() {\n    return `div[part=\"menu-body\"]`;\n  }\n\n  /**\n   * A selector that will return highlighted items.\n   */\n  static get selectorItemHighlighted() {\n    return `${prefix}-multi-select-item[highlighted]`;\n  }\n\n  /**\n   * A selector that will return multi select items.\n   * We use a separate property from `.itemTagName` due to the nature in difference of tag name vs. selector.\n   */\n  static get selectorItem() {\n    return `${prefix}-multi-select-item`;\n  }\n\n  /**\n   * A selector that will return remaining items after a filter.\n   */\n  static get selectorItemFiltered() {\n    return `${prefix}-multi-select-item[filtered]`;\n  }\n\n  /**\n   * A selector that will return remaining items after a filter.\n   */\n  static get selectorItemResults() {\n    return `${prefix}-multi-select-item:not([filtered])`;\n  }\n\n  /**\n   * A selector that will return selected items.\n   */\n  static get selectorItemSelected() {\n    return `${prefix}-multi-select-item[selected]`;\n  }\n\n  /**\n   * The name of the custom event fired before this multi select item is being toggled upon a user gesture.\n   * Cancellation of this event stops the user-initiated action of toggling this multi select item.\n   */\n  static get eventBeforeToggle() {\n    return `${prefix}-multi-select-beingtoggled`;\n  }\n\n  /**\n   * The name of the custom event fired after this multi select item is toggled upon a user gesture.\n   */\n  static get eventToggle() {\n    return `${prefix}-multi-select-toggled`;\n  }\n\n  /**\n   * The name of the custom event fired before a multi select item is selected upon a user gesture.\n   * Cancellation of this event stops changing the user-initiated selection.\n   */\n  static get eventBeforeSelect() {\n    return `${prefix}-multi-select-beingselected`;\n  }\n\n  /**\n   * The name of the custom event fired after a a multi select item is selected upon a user gesture.\n   */\n  static get eventSelect() {\n    return `${prefix}-multi-select-selected`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSMultiSelect;\n"],"mappings":"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"}