@carbon/web-components 2.55.0-rc.0 → 2.55.0

package/es/components/menu/menu-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.js","names":["styles","customElement"],"sources":["../../../src/components/menu/menu-item.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 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 { LitElement, html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport styles from './menu-item.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { consume } from '@lit/context';\nimport { MenuContext } from './menu-context';\nimport Checkmark16 from '@carbon/icons/es/checkmark/16.js';\nimport CaretLeft16 from '@carbon/icons/es/caret--left/16.js';\nimport CaretRight16 from '@carbon/icons/es/caret--right/16.js';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { MENU_ITEM_KIND, MENU_SIZE } from './defs';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport CDSMenu from './menu';\n\nexport { MENU_ITEM_KIND, MENU_SIZE };\nexport const MENU_CLOSE_ROOT_EVENT = `${prefix}-menu-close-root-request`;\n\n/**\n * Menu Item.\n *\n * @element cds-menu-item\n */\n@customElement(`${prefix}-menu-item`)\nclass CDSmenuItem extends HostListenerMixin(HostListenerMixin(LitElement)) {\n  @consume({ context: MenuContext })\n  context;\n\n  readonly hoverIntentDelay = 150; // in ms\n  hoverIntentTimeout;\n\n  /**\n   * The parent cds-menu element\n   */\n  private _parentMenu: CDSMenu | null = null;\n\n  /**\n   * MutationObserver that observes the parent cds-menu element\n   */\n  private _parentMenuObserver?: MutationObserver;\n\n  /**\n   * Label for the menu item.\n   */\n  @property({ type: String })\n  label;\n  /**\n   * Shortcut for the menu item.\n   */\n  @property({ type: String })\n  shortcut;\n  /**\n   * Disabled property for the menu item.\n   */\n  @property({ type: Boolean })\n  disabled;\n\n  /**\n   * Specify the message read by screen readers for the danger menu item variant\n   */\n  @property({ type: String, attribute: 'danger-description' })\n  dangerDescription = 'danger';\n\n  /**\n   * Whether the menu submen for an item is open or not.\n   */\n  @property({ type: Boolean })\n  submenuOpen = false;\n\n  @property()\n  kind = MENU_ITEM_KIND.DEFAULT;\n  /**\n   * Menu boundaries.\n   */\n  @property()\n  boundaries: {\n    x: number | [number, number];\n    y: number | [number, number];\n  } = { x: -1, y: -1 };\n\n  @property({ attribute: 'aria-checked' })\n  ariaChecked: string | null = this.getAttribute('selected') ?? 'false';\n\n  /**\n   * Entrypoint.\n   */\n  @state()\n  submenuEntry;\n  /**\n   * Checks if document direction is rtl.\n   */\n  @state()\n  isRtl = false;\n  /**\n   * Checks if document direction is rtl.\n   */\n  @state()\n  hasSubmenu = false;\n\n  async dispatchIconDetect() {\n    const hasRenderIcon = !!this.querySelector('[slot=\"render-icon\"]');\n    if (hasRenderIcon) {\n      await undefined; // this is used to replace setTimeout with 0 time out, which is much fater.\n      this.dispatchEvent(\n        new CustomEvent('icon-detect', {\n          bubbles: true, // Allows event to bubble up the DOM\n          composed: true, // Allows event to cross shadow DOM boundary\n        })\n      );\n    }\n  }\n\n  private _updateAttributes() {\n    if (this.disabled && !this.hasSubmenu) {\n      this.setAttribute('aria-disabled', this.disabled);\n      this.setAttribute('tabindex', '-1');\n    } else if (this._parentMenu && !(this._parentMenu as CDSMenu).open) {\n      this.removeAttribute('aria-disabled');\n      this.setAttribute('tabindex', '-1');\n    } else {\n      this.removeAttribute('aria-disabled');\n      this.setAttribute('tabindex', '0');\n    }\n    if (this.hasSubmenu) {\n      this.setAttribute('aria-haspopup', this.hasSubmenu + '');\n    } else {\n      this.removeAttribute('aria-haspopup');\n    }\n    if (this.closest(`${prefix}-menu-item-radio-group`)) {\n      this.setAttribute('role', 'menuitemradio');\n      this.setAttribute('aria-checked', this.ariaChecked + '');\n    } else if (!this.getAttribute('role')) {\n      this.setAttribute('role', 'menuitem');\n    }\n  }\n\n  firstUpdated() {\n    this.hasSubmenu = !!this.querySelector('[slot=\"submenu\"]');\n\n    this.dispatchIconDetect();\n    this.isRtl = document.dir === 'rtl';\n    this._registerSubMenuItems();\n    this._parentMenu = this.closest(`${prefix}-menu`);\n\n    this._updateAttributes();\n\n    this.addEventListener(`${prefix}-menu-closed`, () => {\n      this.focus();\n      this._closeSubmenu();\n    });\n\n    if (this._parentMenu) {\n      this._parentMenuObserver = new MutationObserver(() => {\n        this._updateAttributes();\n      });\n\n      this._parentMenuObserver.observe(this._parentMenu, {\n        attributes: true,\n        attributeFilter: ['open'],\n      });\n    }\n  }\n\n  disconnectedCallback() {\n    this._parentMenuObserver?.disconnect();\n  }\n\n  updated(): void {\n    if (this.hasSubmenu) {\n      this.setAttribute('aria-expanded', this.hasSubmenu + '');\n    } else {\n      this.removeAttribute('aria-expanded');\n    }\n    if (this.kind === MENU_ITEM_KIND.DANGER)\n      this.classList.toggle(`${prefix}--menu-item--danger`);\n  }\n\n  @HostListener('click', { capture: true })\n  handleClick(event: MouseEvent) {\n    this._handleClick(event);\n  }\n\n  @HostListener('mousedown')\n  handleMouseDown(event: MouseEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n    }\n  }\n\n  @HostListener('mouseenter')\n  handleMouseEnter() {\n    if (this.hasSubmenu) {\n      this._handleMouseEnter();\n    }\n  }\n\n  @HostListener('mouseleave')\n  handleMouseLeave() {\n    if (this.hasSubmenu) {\n      this._handleMouseLeave();\n    }\n  }\n\n  @HostListener('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    this._handleKeyDown(event);\n  }\n\n  render() {\n    const {\n      label,\n      shortcut,\n      submenuOpen,\n      boundaries,\n      isRtl,\n      kind,\n      dangerDescription,\n    } = this;\n\n    const isDanger = kind === MENU_ITEM_KIND.DANGER && !this.hasSubmenu;\n\n    const menuClassName = this.context?.hasSelectableItems\n      ? `${prefix}--menu--with-selectable-items`\n      : '';\n\n    return html`\n      <div class=\"${prefix}--menu-item__selection-icon\">\n        ${this.ariaChecked === 'true' ? iconLoader(Checkmark16) : undefined}\n      </div>\n\n      <div class=\"${prefix}--menu-item__icon\">\n        <slot name=\"render-icon\"></slot>\n      </div>\n      <div class=\"${prefix}--menu-item__label\">${label}</div>\n      ${isDanger\n        ? html`<span id=\"danger-description\" class=\"${prefix}--visually-hidden\"\n            >${dangerDescription}</span\n          >`\n        : html``}\n      ${shortcut && !this.hasSubmenu\n        ? html` <div class=\"${prefix}--menu-item__shortcut\">${shortcut}</div> `\n        : html``}\n      ${this.hasSubmenu\n        ? html`\n            <div class=\"${prefix}--menu-item__shortcut\">\n              ${isRtl ? iconLoader(CaretLeft16) : iconLoader(CaretRight16)}\n            </div>\n            <cds-menu\n              className=${menuClassName}\n              size=${this.parentElement?.getAttribute('size') ??\n              MENU_SIZE.LARGE}\n              ?isChild=\"${this.hasSubmenu}\"\n              label=\"${label}\"\n              .open=\"${submenuOpen}\"\n              .x=\"${boundaries.x}\"\n              .y=\"${boundaries.y}\">\n              <slot name=\"submenu\"></slot>\n            </cds-menu>\n          `\n        : html``}\n    `;\n  }\n\n  _handleClick = (e: MouseEvent | KeyboardEvent): void => {\n    if (this.disabled) {\n      return;\n    }\n\n    if (this.hasSubmenu) {\n      this._openSubmenu();\n      return;\n    }\n\n    if (e.type === 'keydown') {\n      this.click();\n      return;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent(MENU_CLOSE_ROOT_EVENT, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          triggerEvent: e,\n        },\n      })\n    );\n  };\n  _handleMouseEnter = () => {\n    this.hoverIntentTimeout = setTimeout(() => {\n      this._openSubmenu();\n    }, this.hoverIntentDelay);\n  };\n  _handleMouseLeave = () => {\n    if (this.hoverIntentTimeout) {\n      clearTimeout(this.hoverIntentTimeout);\n      this._closeSubmenu();\n      this.focus();\n    }\n  };\n  _openSubmenu = () => {\n    const { x, y, width, height } = this.getBoundingClientRect();\n    if (this.isRtl) {\n      this.boundaries = {\n        x: [-x, x - width],\n        y: [y, y + height],\n      };\n    } else {\n      this.boundaries = {\n        x: [x, x + width],\n        y: [y, y + height],\n      };\n    }\n    this.submenuOpen = true;\n  };\n  _registerSubMenuItems = () => {\n    const observer = new MutationObserver((mutationsList) => {\n      for (const mutation of mutationsList) {\n        if (mutation.type === 'childList') {\n          const submenuSlot = this.shadowRoot?.querySelector(\n            'slot[name=\"submenu\"]'\n          ) as HTMLSlotElement;\n\n          const item = submenuSlot?.assignedElements?.()?.[0];\n          if (item) {\n            switch (item.tagName) {\n              case 'CDS-MENU-ITEM-RADIO-GROUP':\n                this.submenuEntry = item.querySelector(`${prefix}-menu-item`);\n                break;\n              case 'CDS-MENU-ITEM-GROUP': {\n                const slotElements = item.shadowRoot\n                  ?.querySelector('slot')\n                  ?.assignedElements();\n                const firstElement = slotElements?.length && slotElements[0];\n                this.submenuEntry = firstElement;\n                break;\n              }\n              case 'CDS-MENU-ITEM':\n                this.submenuEntry = item;\n                break;\n            }\n          }\n        }\n      }\n    });\n    observer.observe(this.shadowRoot as Node, {\n      childList: true,\n      subtree: true,\n    });\n  };\n  _closeSubmenu = () => {\n    this.boundaries = {\n      x: -1,\n      y: -1,\n    };\n    this.submenuOpen = false;\n    (\n      this.shadowRoot?.querySelector(`.${prefix}--menu-item`) as HTMLLIElement\n    )?.focus();\n  };\n  _handleKeyDown = (e: KeyboardEvent) => {\n    if (this.hasSubmenu && ['ArrowRight', 'Enter', ' '].includes(e.key)) {\n      this._openSubmenu();\n      setTimeout(() => {\n        this.submenuEntry.focus();\n      });\n      e.stopPropagation();\n    } else if (e.key === 'Enter' || e.key === ' ') {\n      this._handleClick(e);\n    }\n  };\n\n  static styles = styles;\n}\nexport default CDSmenuItem;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBA,MAAa,wBAAwB;;;;;;AAOrC,IAAA,cAAA,MACM,oBAAoB,kBAAkB,kBAAkB,WAAW,CAAC,CAAC;;;0BAI7C;qBAMU;2BA2BlB;qBAMN;;oBAWV;GAAE,GAAG;GAAI,GAAG;GAAI;qBAGS,KAAK,aAAa,WAAW,IAAI;eAWtD;oBAKK;uBAsKG,MAAwC;AACtD,OAAI,KAAK,SACP;AAGF,OAAI,KAAK,YAAY;AACnB,SAAK,cAAc;AACnB;;AAGF,OAAI,EAAE,SAAS,WAAW;AACxB,SAAK,OAAO;AACZ;;AAGF,QAAK,cACH,IAAI,YAAY,uBAAuB;IACrC,SAAS;IACT,UAAU;IACV,QAAQ,EACN,cAAc,GACf;IACF,CAAC,CACH;;iCAEuB;AACxB,QAAK,qBAAqB,iBAAiB;AACzC,SAAK,cAAc;MAClB,KAAK,iBAAiB;;iCAED;AACxB,OAAI,KAAK,oBAAoB;AAC3B,iBAAa,KAAK,mBAAmB;AACrC,SAAK,eAAe;AACpB,SAAK,OAAO;;;4BAGK;GACnB,MAAM,EAAE,GAAG,GAAG,OAAO,WAAW,KAAK,uBAAuB;AAC5D,OAAI,KAAK,MACP,MAAK,aAAa;IAChB,GAAG,CAAC,CAAC,GAAG,IAAI,MAAM;IAClB,GAAG,CAAC,GAAG,IAAI,OAAO;IACnB;OAED,MAAK,aAAa;IAChB,GAAG,CAAC,GAAG,IAAI,MAAM;IACjB,GAAG,CAAC,GAAG,IAAI,OAAO;IACnB;AAEH,QAAK,cAAc;;qCAES;AACX,OAAI,kBAAkB,kBAAkB;AACvD,SAAK,MAAM,YAAY,cACrB,KAAI,SAAS,SAAS,aAAa;KAKjC,MAAM,QAJc,KAAK,YAAY,cACnC,yBACD,GAEyB,oBAAoB,GAAG;AACjD,SAAI,KACF,SAAQ,KAAK,SAAb;MACE,KAAK;AACH,YAAK,eAAe,KAAK,cAAc,gBAAsB;AAC7D;MACF,KAAK,uBAAuB;OAC1B,MAAM,eAAe,KAAK,YACtB,cAAc,OAAO,EACrB,kBAAkB;OACtB,MAAM,eAAe,cAAc,UAAU,aAAa;AAC1D,YAAK,eAAe;AACpB;;MAEF,KAAK;AACH,YAAK,eAAe;AACpB;;;KAKV,CACO,QAAQ,KAAK,YAAoB;IACxC,WAAW;IACX,SAAS;IACV,CAAC;;6BAEkB;AACpB,QAAK,aAAa;IAChB,GAAG;IACH,GAAG;IACJ;AACD,QAAK,cAAc;AACnB,IACE,KAAK,YAAY,cAAc,kBAAwB,GACtD,OAAO;;yBAEM,MAAqB;AACrC,OAAI,KAAK,cAAc;IAAC;IAAc;IAAS;IAAI,CAAC,SAAS,EAAE,IAAI,EAAE;AACnE,SAAK,cAAc;AACnB,qBAAiB;AACf,UAAK,aAAa,OAAO;MACzB;AACF,MAAE,iBAAiB;cACV,EAAE,QAAQ,WAAW,EAAE,QAAQ,IACxC,MAAK,aAAa,EAAE;;;CA7QxB,MAAM,qBAAqB;AAEzB,MADsB,CAAC,CAAC,KAAK,cAAc,yBAAuB,EAC/C;AACjB,SAAM,KAAA;AACN,QAAK,cACH,IAAI,YAAY,eAAe;IAC7B,SAAS;IACT,UAAU;IACX,CAAC,CACH;;;CAIL,oBAA4B;AAC1B,MAAI,KAAK,YAAY,CAAC,KAAK,YAAY;AACrC,QAAK,aAAa,iBAAiB,KAAK,SAAS;AACjD,QAAK,aAAa,YAAY,KAAK;aAC1B,KAAK,eAAe,CAAE,KAAK,YAAwB,MAAM;AAClE,QAAK,gBAAgB,gBAAgB;AACrC,QAAK,aAAa,YAAY,KAAK;SAC9B;AACL,QAAK,gBAAgB,gBAAgB;AACrC,QAAK,aAAa,YAAY,IAAI;;AAEpC,MAAI,KAAK,WACP,MAAK,aAAa,iBAAiB,KAAK,aAAa,GAAG;MAExD,MAAK,gBAAgB,gBAAgB;AAEvC,MAAI,KAAK,QAAQ,4BAAkC,EAAE;AACnD,QAAK,aAAa,QAAQ,gBAAgB;AAC1C,QAAK,aAAa,gBAAgB,KAAK,cAAc,GAAG;aAC/C,CAAC,KAAK,aAAa,OAAO,CACnC,MAAK,aAAa,QAAQ,WAAW;;CAIzC,eAAe;AACb,OAAK,aAAa,CAAC,CAAC,KAAK,cAAc,qBAAmB;AAE1D,OAAK,oBAAoB;AACzB,OAAK,QAAQ,SAAS,QAAQ;AAC9B,OAAK,uBAAuB;AAC5B,OAAK,cAAc,KAAK,QAAQ,WAAiB;AAEjD,OAAK,mBAAmB;AAExB,OAAK,iBAAiB,yBAA+B;AACnD,QAAK,OAAO;AACZ,QAAK,eAAe;IACpB;AAEF,MAAI,KAAK,aAAa;AACpB,QAAK,sBAAsB,IAAI,uBAAuB;AACpD,SAAK,mBAAmB;KACxB;AAEF,QAAK,oBAAoB,QAAQ,KAAK,aAAa;IACjD,YAAY;IACZ,iBAAiB,CAAC,OAAO;IAC1B,CAAC;;;CAIN,uBAAuB;AACrB,OAAK,qBAAqB,YAAY;;CAGxC,UAAgB;AACd,MAAI,KAAK,WACP,MAAK,aAAa,iBAAiB,KAAK,aAAa,GAAG;MAExD,MAAK,gBAAgB,gBAAgB;AAEvC,MAAI,KAAK,SAAA,SACP,MAAK,UAAU,OAAO,yBAA+B;;CAGzD,YACY,OAAmB;AAC7B,OAAK,aAAa,MAAM;;CAG1B,gBACgB,OAAmB;AACjC,MAAI,KAAK,SACP,OAAM,gBAAgB;;CAI1B,mBACmB;AACjB,MAAI,KAAK,WACP,MAAK,mBAAmB;;CAI5B,mBACmB;AACjB,MAAI,KAAK,WACP,MAAK,mBAAmB;;CAI5B,cACc,OAAsB;AAClC,OAAK,eAAe,MAAM;;CAG5B,SAAS;EACP,MAAM,EACJ,OACA,UACA,aACA,YACA,OACA,MACA,sBACE;EAEJ,MAAM,WAAW,SAAA,YAAkC,CAAC,KAAK;EAEzD,MAAM,gBAAgB,KAAK,SAAS,qBAChC,qCACA;AAEJ,SAAO,IAAI;0BACY;UACjB,KAAK,gBAAgB,SAAS,WAAW,YAAY,GAAG,KAAA,EAAU;;;0BAGjD;;;0BAGA,sBAAsB,MAAM;QAC/C,WACE,IAAI,wCAAA,MAA+C;eAC9C,kBAAkB;eAEvB,IAAI,GAAG;QACT,YAAY,CAAC,KAAK,aAChB,IAAI,gBAAA,MAAuB,yBAAyB,SAAS,WAC7D,IAAI,GAAG;QACT,KAAK,aACH,IAAI;gCACmB;gBACjB,QAAQ,WAAW,YAAY,GAAG,WAAW,aAAa,CAAC;;;0BAGjD,cAAc;qBACnB,KAAK,eAAe,aAAa,OAAO,IAAA,KAC/B;0BACJ,KAAK,WAAW;uBACnB,MAAM;uBACN,YAAY;oBACf,WAAW,EAAE;oBACb,WAAW,EAAE;;;cAIvB,IAAI,GAAG;;;;gBAiHCA;;;YA3Vf,QAAQ,EAAE,SAAS,aAAa,CAAC,CAAA,EAAA,YAAA,WAAA,WAAA,KAAA,EAAA;YAmBjC,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,YAAA,WAAA,SAAA,KAAA,EAAA;YAK1B,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,YAAA,WAAA,YAAA,KAAA,EAAA;YAK1B,SAAS,EAAE,MAAM,SAAS,CAAC,CAAA,EAAA,YAAA,WAAA,YAAA,KAAA,EAAA;YAM3B,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAsB,CAAC,CAAA,EAAA,YAAA,WAAA,qBAAA,KAAA,EAAA;YAM3D,SAAS,EAAE,MAAM,SAAS,CAAC,CAAA,EAAA,YAAA,WAAA,eAAA,KAAA,EAAA;YAG3B,UAAU,CAAA,EAAA,YAAA,WAAA,QAAA,KAAA,EAAA;YAKV,UAAU,CAAA,EAAA,YAAA,WAAA,cAAA,KAAA,EAAA;YAMV,SAAS,EAAE,WAAW,gBAAgB,CAAC,CAAA,EAAA,YAAA,WAAA,eAAA,KAAA,EAAA;YAMvC,OAAO,CAAA,EAAA,YAAA,WAAA,gBAAA,KAAA,EAAA;YAKP,OAAO,CAAA,EAAA,YAAA,WAAA,SAAA,KAAA,EAAA;YAKP,OAAO,CAAA,EAAA,YAAA,WAAA,cAAA,KAAA,EAAA;YAiFP,aAAa,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,YAAA,WAAA,eAAA,KAAA;YAKxC,aAAa,YAAY,CAAA,EAAA,YAAA,WAAA,mBAAA,KAAA;YAOzB,aAAa,aAAa,CAAA,EAAA,YAAA,WAAA,oBAAA,KAAA;YAO1B,aAAa,aAAa,CAAA,EAAA,YAAA,WAAA,oBAAA,KAAA;YAO1B,aAAa,UAAU,CAAA,EAAA,YAAA,WAAA,iBAAA,KAAA;0BApLzBC,cAAc,gBAAsB,CAAA,EAAA,YAAA;AA+VrC,IAAA,oBAAe"}
+{"version":3,"file":"menu-item.js","names":["styles","customElement"],"sources":["../../../src/components/menu/menu-item.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 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 { LitElement, html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport styles from './menu-item.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { consume } from '@lit/context';\nimport { MenuContext } from './menu-context';\nimport Checkmark16 from '@carbon/icons/es/checkmark/16.js';\nimport CaretLeft16 from '@carbon/icons/es/caret--left/16.js';\nimport CaretRight16 from '@carbon/icons/es/caret--right/16.js';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { MENU_ITEM_KIND, MENU_SIZE } from './defs';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport CDSMenu from './menu';\n\nexport { MENU_ITEM_KIND, MENU_SIZE };\nexport const MENU_CLOSE_ROOT_EVENT = `${prefix}-menu-close-root-request`;\n\n/**\n * Menu Item.\n *\n * @element cds-menu-item\n */\n@customElement(`${prefix}-menu-item`)\nclass CDSmenuItem extends HostListenerMixin(HostListenerMixin(LitElement)) {\n  @consume({ context: MenuContext })\n  context;\n\n  readonly hoverIntentDelay = 150; // in ms\n  hoverIntentTimeout;\n\n  /**\n   * The parent cds-menu element\n   */\n  private _parentMenu: CDSMenu | null = null;\n\n  /**\n   * MutationObserver that observes the parent cds-menu element\n   */\n  private _parentMenuObserver?: MutationObserver;\n\n  /**\n   * Label for the menu item.\n   */\n  @property({ type: String })\n  label;\n  /**\n   * Shortcut for the menu item.\n   */\n  @property({ type: String })\n  shortcut;\n  /**\n   * Disabled property for the menu item.\n   */\n  @property({ type: Boolean })\n  disabled;\n\n  /**\n   * Specify the message read by screen readers for the danger menu item variant\n   */\n  @property({ type: String, attribute: 'danger-description' })\n  dangerDescription = '';\n\n  /**\n   * Whether the menu submen for an item is open or not.\n   */\n  @property({ type: Boolean })\n  submenuOpen = false;\n\n  @property()\n  kind = MENU_ITEM_KIND.DEFAULT;\n  /**\n   * Menu boundaries.\n   */\n  @property()\n  boundaries: {\n    x: number | [number, number];\n    y: number | [number, number];\n  } = { x: -1, y: -1 };\n\n  @property({ attribute: 'aria-checked' })\n  ariaChecked: string | null = this.getAttribute('selected') ?? 'false';\n\n  /**\n   * Entrypoint.\n   */\n  @state()\n  submenuEntry;\n  /**\n   * Checks if document direction is rtl.\n   */\n  @state()\n  isRtl = false;\n  /**\n   * Checks if document direction is rtl.\n   */\n  @state()\n  hasSubmenu = false;\n\n  async dispatchIconDetect() {\n    const hasRenderIcon = !!this.querySelector('[slot=\"render-icon\"]');\n    if (hasRenderIcon) {\n      await undefined; // this is used to replace setTimeout with 0 time out, which is much fater.\n      this.dispatchEvent(\n        new CustomEvent('icon-detect', {\n          bubbles: true, // Allows event to bubble up the DOM\n          composed: true, // Allows event to cross shadow DOM boundary\n        })\n      );\n    }\n  }\n\n  private _updateAttributes() {\n    if (this.disabled && !this.hasSubmenu) {\n      this.setAttribute('aria-disabled', this.disabled);\n      this.setAttribute('tabindex', '-1');\n    } else if (this._parentMenu && !(this._parentMenu as CDSMenu).open) {\n      this.removeAttribute('aria-disabled');\n      this.setAttribute('tabindex', '-1');\n    } else {\n      this.removeAttribute('aria-disabled');\n      this.setAttribute('tabindex', '0');\n    }\n    if (this.hasSubmenu) {\n      this.setAttribute('aria-haspopup', this.hasSubmenu + '');\n    } else {\n      this.removeAttribute('aria-haspopup');\n    }\n    if (this.closest(`${prefix}-menu-item-radio-group`)) {\n      this.setAttribute('role', 'menuitemradio');\n      this.setAttribute('aria-checked', this.ariaChecked + '');\n    } else if (!this.getAttribute('role')) {\n      this.setAttribute('role', 'menuitem');\n    }\n  }\n\n  firstUpdated() {\n    this.hasSubmenu = !!this.querySelector('[slot=\"submenu\"]');\n\n    this.dispatchIconDetect();\n    this.isRtl = document.dir === 'rtl';\n    this._registerSubMenuItems();\n    this._parentMenu = this.closest(`${prefix}-menu`);\n\n    this._updateAttributes();\n\n    this.addEventListener(`${prefix}-menu-closed`, () => {\n      this.focus();\n      this._closeSubmenu();\n    });\n\n    if (this._parentMenu) {\n      this._parentMenuObserver = new MutationObserver(() => {\n        this._updateAttributes();\n      });\n\n      this._parentMenuObserver.observe(this._parentMenu, {\n        attributes: true,\n        attributeFilter: ['open'],\n      });\n    }\n  }\n\n  disconnectedCallback() {\n    this._parentMenuObserver?.disconnect();\n  }\n\n  updated(): void {\n    if (this.hasSubmenu) {\n      this.setAttribute('aria-expanded', this.hasSubmenu + '');\n    } else {\n      this.removeAttribute('aria-expanded');\n    }\n    if (this.kind === MENU_ITEM_KIND.DANGER)\n      this.classList.toggle(`${prefix}--menu-item--danger`);\n  }\n\n  @HostListener('click', { capture: true })\n  handleClick(event: MouseEvent) {\n    this._handleClick(event);\n  }\n\n  @HostListener('mousedown')\n  handleMouseDown(event: MouseEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n    }\n  }\n\n  @HostListener('mouseenter')\n  handleMouseEnter() {\n    if (this.hasSubmenu) {\n      this._handleMouseEnter();\n    }\n  }\n\n  @HostListener('mouseleave')\n  handleMouseLeave() {\n    if (this.hasSubmenu) {\n      this._handleMouseLeave();\n    }\n  }\n\n  @HostListener('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    this._handleKeyDown(event);\n  }\n\n  render() {\n    const {\n      label,\n      shortcut,\n      submenuOpen,\n      boundaries,\n      isRtl,\n      kind,\n      dangerDescription,\n    } = this;\n\n    const isDanger = kind === MENU_ITEM_KIND.DANGER && !this.hasSubmenu;\n    const hasDangerDescription = isDanger && Boolean(dangerDescription);\n\n    const menuClassName = this.context?.hasSelectableItems\n      ? `${prefix}--menu--with-selectable-items`\n      : '';\n\n    return html`\n      <div class=\"${prefix}--menu-item__selection-icon\">\n        ${this.ariaChecked === 'true' ? iconLoader(Checkmark16) : undefined}\n      </div>\n\n      <div class=\"${prefix}--menu-item__icon\">\n        <slot name=\"render-icon\"></slot>\n      </div>\n      <div class=\"${prefix}--menu-item__label\">${label}</div>\n      ${hasDangerDescription\n        ? html`<span id=\"danger-description\" class=\"${prefix}--visually-hidden\"\n            >${dangerDescription}</span\n          >`\n        : html``}\n      ${shortcut && !this.hasSubmenu\n        ? html` <div class=\"${prefix}--menu-item__shortcut\">${shortcut}</div> `\n        : html``}\n      ${this.hasSubmenu\n        ? html`\n            <div class=\"${prefix}--menu-item__shortcut\">\n              ${isRtl ? iconLoader(CaretLeft16) : iconLoader(CaretRight16)}\n            </div>\n            <cds-menu\n              className=${menuClassName}\n              size=${this.parentElement?.getAttribute('size') ??\n              MENU_SIZE.LARGE}\n              ?isChild=\"${this.hasSubmenu}\"\n              label=\"${label}\"\n              .open=\"${submenuOpen}\"\n              .x=\"${boundaries.x}\"\n              .y=\"${boundaries.y}\">\n              <slot name=\"submenu\"></slot>\n            </cds-menu>\n          `\n        : html``}\n    `;\n  }\n\n  _handleClick = (e: MouseEvent | KeyboardEvent): void => {\n    if (this.disabled) {\n      return;\n    }\n\n    if (this.hasSubmenu) {\n      this._openSubmenu();\n      return;\n    }\n\n    if (e.type === 'keydown') {\n      this.click();\n      return;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent(MENU_CLOSE_ROOT_EVENT, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          triggerEvent: e,\n        },\n      })\n    );\n  };\n  _handleMouseEnter = () => {\n    this.hoverIntentTimeout = setTimeout(() => {\n      this._openSubmenu();\n    }, this.hoverIntentDelay);\n  };\n  _handleMouseLeave = () => {\n    if (this.hoverIntentTimeout) {\n      clearTimeout(this.hoverIntentTimeout);\n      this._closeSubmenu();\n      this.focus();\n    }\n  };\n  _openSubmenu = () => {\n    const { x, y, width, height } = this.getBoundingClientRect();\n    if (this.isRtl) {\n      this.boundaries = {\n        x: [-x, x - width],\n        y: [y, y + height],\n      };\n    } else {\n      this.boundaries = {\n        x: [x, x + width],\n        y: [y, y + height],\n      };\n    }\n    this.submenuOpen = true;\n  };\n  _registerSubMenuItems = () => {\n    const observer = new MutationObserver((mutationsList) => {\n      for (const mutation of mutationsList) {\n        if (mutation.type === 'childList') {\n          const submenuSlot = this.shadowRoot?.querySelector(\n            'slot[name=\"submenu\"]'\n          ) as HTMLSlotElement;\n\n          const item = submenuSlot?.assignedElements?.()?.[0];\n          if (item) {\n            switch (item.tagName) {\n              case 'CDS-MENU-ITEM-RADIO-GROUP':\n                this.submenuEntry = item.querySelector(`${prefix}-menu-item`);\n                break;\n              case 'CDS-MENU-ITEM-GROUP': {\n                const slotElements = item.shadowRoot\n                  ?.querySelector('slot')\n                  ?.assignedElements();\n                const firstElement = slotElements?.length && slotElements[0];\n                this.submenuEntry = firstElement;\n                break;\n              }\n              case 'CDS-MENU-ITEM':\n                this.submenuEntry = item;\n                break;\n            }\n          }\n        }\n      }\n    });\n    observer.observe(this.shadowRoot as Node, {\n      childList: true,\n      subtree: true,\n    });\n  };\n  _closeSubmenu = () => {\n    this.boundaries = {\n      x: -1,\n      y: -1,\n    };\n    this.submenuOpen = false;\n    (\n      this.shadowRoot?.querySelector(`.${prefix}--menu-item`) as HTMLLIElement\n    )?.focus();\n  };\n  _handleKeyDown = (e: KeyboardEvent) => {\n    if (this.hasSubmenu && ['ArrowRight', 'Enter', ' '].includes(e.key)) {\n      this._openSubmenu();\n      setTimeout(() => {\n        this.submenuEntry.focus();\n      });\n      e.stopPropagation();\n    } else if (e.key === 'Enter' || e.key === ' ') {\n      this._handleClick(e);\n    }\n  };\n\n  static styles = styles;\n}\nexport default CDSmenuItem;\n"],"mappings":"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"}

package/es/components/multi-select/multi-select.d.ts

@@ -26,6 +26,10 @@ export { SELECTION_FEEDBACK_OPTION };
  */
 declare class CDSMultiSelect extends CDSDropdown {
     filterable: any;
+    /**
+     * The native `autocomplete` attribute for the filterable input.
+     */
+    autocomplete: string;
     /**
      * The count of selected items.
      */

package/es/components/multi-select/multi-select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"multi-select.d.ts","sourceRoot":"","sources":["../../../src/components/multi-select/multi-select.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"multi-select.d.ts","sourceRoot":"","sources":["../../../src/components/multi-select/multi-select.ts"],"names":[],"mappings":"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"}

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

@@ -43,6 +43,7 @@ import Close16 from "@carbon/icons/es/close/16.js";
 let CDSMultiSelect = class CDSMultiSelect extends dropdown_default {
 	constructor(..._args) {
 		super(..._args);
+		this.autocomplete = "off";
 		this._selectedItemsCount = 0;
 		this.clearSelectionLabel = "";
 		this.clearSelectionDescription = "Total items selected: ";
@@ -263,7 +264,7 @@ let CDSMultiSelect = class CDSMultiSelect extends dropdown_default {
 	@returns The main content of the trigger button.
 	*/
 	_renderLabel() {
-		const { label, value, _selectedItemContent: selectedItemContent } = this;
+		const { label, value, autocomplete, _selectedItemContent: selectedItemContent } = this;
 		const inputClasses = classMap({
 			[`cds--text-input`]: true,
 			[`cds--text-input--empty`]: !value
@@ -281,6 +282,7 @@ let CDSMultiSelect = class CDSMultiSelect extends dropdown_default {
             aria-controls="menu-body"
             aria-expanded="${String(this.open)}"
             aria-autocomplete="list"
+            autocomplete="${autocomplete}"
             @input="${this._handleInput}" />
         `;
 	}
@@ -561,6 +563,7 @@ let CDSMultiSelect = class CDSMultiSelect extends dropdown_default {
 	}
 };
 __decorate([property({ type: Boolean })], CDSMultiSelect.prototype, "filterable", void 0);
+__decorate([property({ type: String })], CDSMultiSelect.prototype, "autocomplete", void 0);
 __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);

package/es/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-multi-select\n * @fires cds-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-multi-select-selected - The custom event fired after a multi select item is selected upon a user gesture.\n * @fires cds-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-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 defaultCompareItems = (\n    itemA: string,\n    itemB: string,\n    { locale }: { locale: string }\n  ) => {\n    return itemA.localeCompare(itemB, locale, { numeric: true });\n  };\n\n  /**\n   * Provide a custom function that is used to determine the ordering of\n   * options. The compare function should return a number whose sign indicates\n   * the relative order of the two elements: negative if a is less than b,\n   * positive if a is greater than b, and zero if they are equal. See 'sortItems'\n   * for more control.\n   *\n   * (itemA: string, itemB: string, { locale }: { locale: string }) => number\n   */\n  @property({ attribute: false })\n  compareItems: (\n    itemA: string,\n    itemB: string,\n    options: { locale: string }\n  ) => number = this.defaultCompareItems;\n\n  private getItemValue = (item: Node) =>\n    item instanceof Element ? (item.getAttribute('value') ?? '') : '';\n\n  protected defaultSortItems = (\n    menuItems: NodeList,\n    { values, compareItems, locale = 'en' }\n  ): Node[] => {\n    const menuItemsArray = Array.from(menuItems);\n\n    const sortedArray = menuItemsArray.sort((itemA, itemB) => {\n      const hasItemA = values.includes(this.getItemValue(itemA));\n      const hasItemB = values.includes(this.getItemValue(itemB));\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.textContent?.trim() ?? '',\n        itemB.textContent?.trim() ?? '',\n        {\n          locale,\n        }\n      );\n    });\n\n    return sortedArray;\n  };\n\n  /**\n   * Provide a method that sorts all options in the control. Overriding this\n   * prop means that you also have to handle the sort logic for selected versus\n   * un-selected items. If you just want to control ordering, consider the\n   * `compareItems` prop instead.\n   *\n   * sortItems :\n   * (menuItems: NodeList, {\n   *   values: string[],\n   *   compareItems: (itemA: string, itemB: string, { locale }: { locale: string }) => number,\n   *   locale: string,\n   * }) => Node[]\n   *\n   */\n  @property({ attribute: false })\n  sortItems: (\n    menuItems: NodeList,\n    options: {\n      values: string[];\n      compareItems: (\n        itemA: string,\n        itemB: string,\n        options: { locale: string }\n      ) => number;\n      locale: string;\n    }\n  ) => Node[] = this.defaultSortItems;\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-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\n    const shouldSortItems =\n      changedProperties.has('value') ||\n      changedProperties.has('compareItems') ||\n      changedProperties.has('sortItems') ||\n      changedProperties.has('locale');\n\n    if (\n      shouldSortItems &&\n      this.selectionFeedback === SELECTION_FEEDBACK_OPTION.TOP\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\n      this.replaceChildren(...sortedMenuItems);\n    }\n\n    const shouldSortItemsAfterReopen =\n      changedProperties.has('open') ||\n      changedProperties.has('compareItems') ||\n      changedProperties.has('sortItems') ||\n      changedProperties.has('locale');\n\n    if (\n      shouldSortItemsAfterReopen &&\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    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-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-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-multi-select\n * @fires cds-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-multi-select-selected - The custom event fired after a multi select item is selected upon a user gesture.\n * @fires cds-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-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 native `autocomplete` attribute for the filterable input.\n   */\n  @property({ type: String })\n  autocomplete = 'off';\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 {\n      label,\n      value,\n      autocomplete,\n      _selectedItemContent: selectedItemContent,\n    } = 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            autocomplete=\"${autocomplete}\"\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 defaultCompareItems = (\n    itemA: string,\n    itemB: string,\n    { locale }: { locale: string }\n  ) => {\n    return itemA.localeCompare(itemB, locale, { numeric: true });\n  };\n\n  /**\n   * Provide a custom function that is used to determine the ordering of\n   * options. The compare function should return a number whose sign indicates\n   * the relative order of the two elements: negative if a is less than b,\n   * positive if a is greater than b, and zero if they are equal. See 'sortItems'\n   * for more control.\n   *\n   * (itemA: string, itemB: string, { locale }: { locale: string }) => number\n   */\n  @property({ attribute: false })\n  compareItems: (\n    itemA: string,\n    itemB: string,\n    options: { locale: string }\n  ) => number = this.defaultCompareItems;\n\n  private getItemValue = (item: Node) =>\n    item instanceof Element ? (item.getAttribute('value') ?? '') : '';\n\n  protected defaultSortItems = (\n    menuItems: NodeList,\n    { values, compareItems, locale = 'en' }\n  ): Node[] => {\n    const menuItemsArray = Array.from(menuItems);\n\n    const sortedArray = menuItemsArray.sort((itemA, itemB) => {\n      const hasItemA = values.includes(this.getItemValue(itemA));\n      const hasItemB = values.includes(this.getItemValue(itemB));\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.textContent?.trim() ?? '',\n        itemB.textContent?.trim() ?? '',\n        {\n          locale,\n        }\n      );\n    });\n\n    return sortedArray;\n  };\n\n  /**\n   * Provide a method that sorts all options in the control. Overriding this\n   * prop means that you also have to handle the sort logic for selected versus\n   * un-selected items. If you just want to control ordering, consider the\n   * `compareItems` prop instead.\n   *\n   * sortItems :\n   * (menuItems: NodeList, {\n   *   values: string[],\n   *   compareItems: (itemA: string, itemB: string, { locale }: { locale: string }) => number,\n   *   locale: string,\n   * }) => Node[]\n   *\n   */\n  @property({ attribute: false })\n  sortItems: (\n    menuItems: NodeList,\n    options: {\n      values: string[];\n      compareItems: (\n        itemA: string,\n        itemB: string,\n        options: { locale: string }\n      ) => number;\n      locale: string;\n    }\n  ) => Node[] = this.defaultSortItems;\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-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\n    const shouldSortItems =\n      changedProperties.has('value') ||\n      changedProperties.has('compareItems') ||\n      changedProperties.has('sortItems') ||\n      changedProperties.has('locale');\n\n    if (\n      shouldSortItems &&\n      this.selectionFeedback === SELECTION_FEEDBACK_OPTION.TOP\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\n      this.replaceChildren(...sortedMenuItems);\n    }\n\n    const shouldSortItemsAfterReopen =\n      changedProperties.has('open') ||\n      changedProperties.has('compareItems') ||\n      changedProperties.has('sortItems') ||\n      changedProperties.has('locale');\n\n    if (\n      shouldSortItemsAfterReopen &&\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    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-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-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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"}

package/es/components/overflow-menu/overflow-menu-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overflow-menu-item.d.ts","sourceRoot":"","sources":["../../../src/components/overflow-menu/overflow-menu-item.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;;;;AAG5C;;;;;GAKG;AACH,cACM,mBAAoB,SAAQ,wBAAsB;IACtD;;OAEG;IACH,OAAO,CAAC,YAAY;IAepB;;OAEG;IAEH,MAAM,UAAS;IAEf;;OAEG;IAEH,iBAAiB,SAAY;IAE7B;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,IAAI,qBAA6B;IAEjC,iBAAiB;IAOjB,MAAM;IA4CN;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED,MAAM,CAAC,iBAAiB;;;;;;;MAGtB;IACF,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"overflow-menu-item.d.ts","sourceRoot":"","sources":["../../../src/components/overflow-menu/overflow-menu-item.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;;;;AAG5C;;;;;GAKG;AACH,cACM,mBAAoB,SAAQ,wBAAsB;IACtD;;OAEG;IACH,OAAO,CAAC,YAAY;IAepB;;OAEG;IAEH,MAAM,UAAS;IAEf;;OAEG;IAEH,iBAAiB,SAAM;IAEvB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,IAAI,qBAA6B;IAEjC,iBAAiB;IAOjB,MAAM;IA6CN;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED,MAAM,CAAC,iBAAiB;;;;;;;MAGtB;IACF,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,mBAAmB,CAAC"}

package/es/components/overflow-menu/overflow-menu-item.js

@@ -30,7 +30,7 @@ let CDSOverflowMenuItem = class CDSOverflowMenuItem extends FocusMixin(LitElemen
 	constructor(..._args) {
 		super(..._args);
 		this.danger = false;
-		this.dangerDescription = "danger";
+		this.dangerDescription = "";
 		this.disabled = false;
 		this.divider = false;
 		this.href = "";
@@ -52,6 +52,7 @@ let CDSOverflowMenuItem = class CDSOverflowMenuItem extends FocusMixin(LitElemen
 	}
 	render() {
 		const { _handleClick: handleClick } = this;
+		const hasDangerDescription = this.danger && Boolean(this.dangerDescription);
 		return this.href ? html`
           <a
             class="${"cds"}--overflow-menu-options__btn"
@@ -61,7 +62,7 @@ let CDSOverflowMenuItem = class CDSOverflowMenuItem extends FocusMixin(LitElemen
             @click="${handleClick}">
             <div class="${"cds"}--overflow-menu-options__option-content">
               <slot></slot>
-              ${this.danger ? html`<span
+              ${hasDangerDescription ? html`<span
                     id="danger-description"
                     class="${"cds"}--visually-hidden"
                     >${this.dangerDescription}</span
@@ -77,7 +78,7 @@ let CDSOverflowMenuItem = class CDSOverflowMenuItem extends FocusMixin(LitElemen
             @click="${handleClick}">
             <div class="${"cds"}--overflow-menu-options__option-content">
               <slot></slot>
-              ${this.danger ? html`<span
+              ${hasDangerDescription ? html`<span
                     id="danger-description"
                     class="${"cds"}--visually-hidden"
                     >${this.dangerDescription}</span

package/es/components/overflow-menu/overflow-menu-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"overflow-menu-item.js","names":["styles","customElement"],"sources":["../../../src/components/overflow-menu/overflow-menu-item.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 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 { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport FocusMixin from '../../globals/mixins/focus';\nimport { OVERFLOW_MENU_SIZE } from './defs';\nimport styles from './overflow-menu.scss?lit';\n\n/**\n * Overflow menu item.\n *\n * @element cds-overflow-menu-item\n * @fires cds-overflow-menu-item-clicked - The custom event fired when an overflow menu item is clicked.\n */\n@customElement(`${prefix}-overflow-menu-item`)\nclass CDSOverflowMenuItem extends FocusMixin(LitElement) {\n  /**\n   * Handles `click` event on this element.\n   */\n  private _handleClick(event: Event) {\n    this.dispatchEvent(\n      new CustomEvent(\n        (this.constructor as typeof CDSOverflowMenuItem).itemClicked,\n        {\n          bubbles: true,\n          composed: true,\n          detail: {\n            evt: event,\n          },\n        }\n      )\n    );\n  }\n\n  /**\n   * `true` if the action is danger.\n   */\n  @property({ type: Boolean, reflect: true })\n  danger = false;\n\n  /**\n   * Specify the message read by screen readers for the danger over flow menu item variant\n   */\n  @property({ type: String, attribute: 'danger-description' })\n  dangerDescription = 'danger';\n\n  /**\n   * `true` if the overflow menu item should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * `true` if the item has a divider\n   */\n  @property({ type: Boolean, reflect: true })\n  divider = false;\n\n  /**\n   * The link href of the overflow menu item.\n   */\n  @property()\n  href = '';\n\n  /**\n   * The size of the overflow menu item.\n   */\n  @property({ reflect: true })\n  size = OVERFLOW_MENU_SIZE.MEDIUM;\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'menuitem');\n    }\n    super.connectedCallback();\n  }\n\n  render() {\n    const { _handleClick: handleClick } = this;\n    return this.href\n      ? html`\n          <a\n            class=\"${prefix}--overflow-menu-options__btn\"\n            ?disabled=${this.disabled}\n            href=\"${this.href}\"\n            tabindex=\"-1\"\n            @click=\"${handleClick}\">\n            <div class=\"${prefix}--overflow-menu-options__option-content\">\n              <slot></slot>\n              ${this.danger\n                ? html`<span\n                    id=\"danger-description\"\n                    class=\"${prefix}--visually-hidden\"\n                    >${this.dangerDescription}</span\n                  >`\n                : html``}\n            </div>\n            <slot name=\"icon\"></slot>\n          </a>\n        `\n      : html`\n          <button\n            class=\"${prefix}--overflow-menu-options__btn\"\n            ?disabled=${this.disabled}\n            tabindex=\"-1\"\n            @click=\"${handleClick}\">\n            <div class=\"${prefix}--overflow-menu-options__option-content\">\n              <slot></slot>\n              ${this.danger\n                ? html`<span\n                    id=\"danger-description\"\n                    class=\"${prefix}--visually-hidden\"\n                    >${this.dangerDescription}</span\n                  >`\n                : html``}\n            </div>\n            <slot name=\"icon\"></slot>\n          </button>\n        `;\n  }\n\n  /**\n   * The name of the custom event fired when the item is clicked.\n   */\n  static get itemClicked() {\n    return `${prefix}-overflow-menu-item-clicked`;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles;\n}\n\nexport default CDSOverflowMenuItem;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,IAAA,sBAAA,MACM,4BAA4B,WAAW,WAAW,CAAC;;;gBAuB9C;2BAMW;kBAMT;iBAMD;cAMH;;;;;;CA3CP,aAAqB,OAAc;AACjC,OAAK,cACH,IAAI,YACD,KAAK,YAA2C,aACjD;GACE,SAAS;GACT,UAAU;GACV,QAAQ,EACN,KAAK,OACN;GACF,CACF,CACF;;CAuCH,oBAAoB;AAClB,MAAI,CAAC,KAAK,aAAa,OAAO,CAC5B,MAAK,aAAa,QAAQ,WAAW;AAEvC,QAAM,mBAAmB;;CAG3B,SAAS;EACP,MAAM,EAAE,cAAc,gBAAgB;AACtC,SAAO,KAAK,OACR,IAAI;;2BAEgB;wBACJ,KAAK,SAAS;oBAClB,KAAK,KAAK;;sBAER,YAAY;gCACD;;gBAEjB,KAAK,SACH,IAAI;;mCAEc;uBACb,KAAK,kBAAkB;uBAE5B,IAAI,GAAG;;;;YAKjB,IAAI;;2BAEgB;wBACJ,KAAK,SAAS;;sBAEhB,YAAY;gCACD;;gBAEjB,KAAK,SACH,IAAI;;mCAEc;uBACb,KAAK,kBAAkB;uBAE5B,IAAI,GAAG;;;;;;;;;CAUvB,WAAW,cAAc;AACvB,SAAO;;;2BAGkB;GACzB,GAAG,WAAW;GACd,gBAAgB;GACjB;;;gBACeA;;;YA/Ff,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,oBAAA,WAAA,UAAA,KAAA,EAAA;YAM1C,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAsB,CAAC,CAAA,EAAA,oBAAA,WAAA,qBAAA,KAAA,EAAA;YAM3D,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,oBAAA,WAAA,YAAA,KAAA,EAAA;YAM1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,oBAAA,WAAA,WAAA,KAAA,EAAA;YAM1C,UAAU,CAAA,EAAA,oBAAA,WAAA,QAAA,KAAA,EAAA;YAMV,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,oBAAA,WAAA,QAAA,KAAA,EAAA;kCArD7BC,cAAc,yBAA+B,CAAA,EAAA,oBAAA;AAyH9C,IAAA,6BAAe"}
+{"version":3,"file":"overflow-menu-item.js","names":["styles","customElement"],"sources":["../../../src/components/overflow-menu/overflow-menu-item.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 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 { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport FocusMixin from '../../globals/mixins/focus';\nimport { OVERFLOW_MENU_SIZE } from './defs';\nimport styles from './overflow-menu.scss?lit';\n\n/**\n * Overflow menu item.\n *\n * @element cds-overflow-menu-item\n * @fires cds-overflow-menu-item-clicked - The custom event fired when an overflow menu item is clicked.\n */\n@customElement(`${prefix}-overflow-menu-item`)\nclass CDSOverflowMenuItem extends FocusMixin(LitElement) {\n  /**\n   * Handles `click` event on this element.\n   */\n  private _handleClick(event: Event) {\n    this.dispatchEvent(\n      new CustomEvent(\n        (this.constructor as typeof CDSOverflowMenuItem).itemClicked,\n        {\n          bubbles: true,\n          composed: true,\n          detail: {\n            evt: event,\n          },\n        }\n      )\n    );\n  }\n\n  /**\n   * `true` if the action is danger.\n   */\n  @property({ type: Boolean, reflect: true })\n  danger = false;\n\n  /**\n   * Specify the message read by screen readers for the danger over flow menu item variant\n   */\n  @property({ type: String, attribute: 'danger-description' })\n  dangerDescription = '';\n\n  /**\n   * `true` if the overflow menu item should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * `true` if the item has a divider\n   */\n  @property({ type: Boolean, reflect: true })\n  divider = false;\n\n  /**\n   * The link href of the overflow menu item.\n   */\n  @property()\n  href = '';\n\n  /**\n   * The size of the overflow menu item.\n   */\n  @property({ reflect: true })\n  size = OVERFLOW_MENU_SIZE.MEDIUM;\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'menuitem');\n    }\n    super.connectedCallback();\n  }\n\n  render() {\n    const { _handleClick: handleClick } = this;\n    const hasDangerDescription = this.danger && Boolean(this.dangerDescription);\n    return this.href\n      ? html`\n          <a\n            class=\"${prefix}--overflow-menu-options__btn\"\n            ?disabled=${this.disabled}\n            href=\"${this.href}\"\n            tabindex=\"-1\"\n            @click=\"${handleClick}\">\n            <div class=\"${prefix}--overflow-menu-options__option-content\">\n              <slot></slot>\n              ${hasDangerDescription\n                ? html`<span\n                    id=\"danger-description\"\n                    class=\"${prefix}--visually-hidden\"\n                    >${this.dangerDescription}</span\n                  >`\n                : html``}\n            </div>\n            <slot name=\"icon\"></slot>\n          </a>\n        `\n      : html`\n          <button\n            class=\"${prefix}--overflow-menu-options__btn\"\n            ?disabled=${this.disabled}\n            tabindex=\"-1\"\n            @click=\"${handleClick}\">\n            <div class=\"${prefix}--overflow-menu-options__option-content\">\n              <slot></slot>\n              ${hasDangerDescription\n                ? html`<span\n                    id=\"danger-description\"\n                    class=\"${prefix}--visually-hidden\"\n                    >${this.dangerDescription}</span\n                  >`\n                : html``}\n            </div>\n            <slot name=\"icon\"></slot>\n          </button>\n        `;\n  }\n\n  /**\n   * The name of the custom event fired when the item is clicked.\n   */\n  static get itemClicked() {\n    return `${prefix}-overflow-menu-item-clicked`;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles;\n}\n\nexport default CDSOverflowMenuItem;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,IAAA,sBAAA,MACM,4BAA4B,WAAW,WAAW,CAAC;;;gBAuB9C;2BAMW;kBAMT;iBAMD;cAMH;;;;;;CA3CP,aAAqB,OAAc;AACjC,OAAK,cACH,IAAI,YACD,KAAK,YAA2C,aACjD;GACE,SAAS;GACT,UAAU;GACV,QAAQ,EACN,KAAK,OACN;GACF,CACF,CACF;;CAuCH,oBAAoB;AAClB,MAAI,CAAC,KAAK,aAAa,OAAO,CAC5B,MAAK,aAAa,QAAQ,WAAW;AAEvC,QAAM,mBAAmB;;CAG3B,SAAS;EACP,MAAM,EAAE,cAAc,gBAAgB;EACtC,MAAM,uBAAuB,KAAK,UAAU,QAAQ,KAAK,kBAAkB;AAC3E,SAAO,KAAK,OACR,IAAI;;2BAEgB;wBACJ,KAAK,SAAS;oBAClB,KAAK,KAAK;;sBAER,YAAY;gCACD;;gBAEjB,uBACE,IAAI;;mCAEc;uBACb,KAAK,kBAAkB;uBAE5B,IAAI,GAAG;;;;YAKjB,IAAI;;2BAEgB;wBACJ,KAAK,SAAS;;sBAEhB,YAAY;gCACD;;gBAEjB,uBACE,IAAI;;mCAEc;uBACb,KAAK,kBAAkB;uBAE5B,IAAI,GAAG;;;;;;;;;CAUvB,WAAW,cAAc;AACvB,SAAO;;;2BAGkB;GACzB,GAAG,WAAW;GACd,gBAAgB;GACjB;;;gBACeA;;;YAhGf,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,oBAAA,WAAA,UAAA,KAAA,EAAA;YAM1C,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAsB,CAAC,CAAA,EAAA,oBAAA,WAAA,qBAAA,KAAA,EAAA;YAM3D,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,oBAAA,WAAA,YAAA,KAAA,EAAA;YAM1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,oBAAA,WAAA,WAAA,KAAA,EAAA;YAM1C,UAAU,CAAA,EAAA,oBAAA,WAAA,QAAA,KAAA,EAAA;YAMV,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,oBAAA,WAAA,QAAA,KAAA,EAAA;kCArD7BC,cAAc,yBAA+B,CAAA,EAAA,oBAAA;AA0H9C,IAAA,6BAAe"}

package/es/components/tabs/defs.d.ts

@@ -46,6 +46,15 @@ export declare enum TABS_TYPE {
      */
     CONTAINED = "contained"
 }
+/**
+ * Vertical navigation direction, associated with key symbols.
+ */
+export declare const VERTICAL_NAVIGATION_DIRECTION: {
+    Up: number;
+    ArrowUp: number;
+    Down: number;
+    ArrowDown: number;
+};
 /**
  * Tabs icon sizes.
  */
@@ -59,4 +68,21 @@ export declare enum TABS_ICON_SIZE {
      */
     LARGE = "lg"
 }
+/**
+ * Tabs size.
+ */
+export declare enum TABS_SIZE {
+    /**
+     * Small size.
+     */
+    SMALL = "sm",
+    /**
+     * Medium size.
+     */
+    MEDIUM = "md",
+    /**
+     * Large size.
+     */
+    LARGE = "lg"
+}
 //# sourceMappingURL=defs.d.ts.map

package/es/components/tabs/defs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/defs.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;GAEG;AACH,oBAAY,oBAAoB;IAC9B;;OAEG;IACH,IAAI,SAAS;IAEb;;OAEG;IACH,UAAU,eAAe;IAEzB;;OAEG;IACH,UAAU,eAAe;IAEzB;;OAEG;IACH,IAAI,SAAS;IAEb;;OAEG;IACH,GAAG,QAAQ;CACZ;AAED;;GAEG;AACH,oBAAY,SAAS;IACnB;;OAEG;IACH,OAAO,KAAK;IAEZ;;OAEG;IACH,SAAS,cAAc;IAEvB;;OAEG;IACH,SAAS,cAAc;CACxB;AAED;;GAEG;AACH,oBAAY,cAAc;IACxB;;OAEG;IACH,OAAO,YAAY;IAEnB;;OAEG;IACH,KAAK,OAAO;CACb"}
+{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/defs.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;GAEG;AACH,oBAAY,oBAAoB;IAC9B;;OAEG;IACH,IAAI,SAAS;IAEb;;OAEG;IACH,UAAU,eAAe;IAEzB;;OAEG;IACH,UAAU,eAAe;IAEzB;;OAEG;IACH,IAAI,SAAS;IAEb;;OAEG;IACH,GAAG,QAAQ;CACZ;AAED;;GAEG;AACH,oBAAY,SAAS;IACnB;;OAEG;IACH,OAAO,KAAK;IAEZ;;OAEG;IACH,SAAS,cAAc;IAEvB;;OAEG;IACH,SAAS,cAAc;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,6BAA6B;;;;;CAKzC,CAAC;AAEF;;GAEG;AACH,oBAAY,cAAc;IACxB;;OAEG;IACH,OAAO,YAAY;IAEnB;;OAEG;IACH,KAAK,OAAO;CACb;AAED;;GAEG;AACH,oBAAY,SAAS;IACnB;;OAEG;IACH,KAAK,OAAO;IAEZ;;OAEG;IACH,MAAM,OAAO;IAEb;;OAEG;IACH,KAAK,OAAO;CACb"}

package/es/components/tabs/defs.js

@@ -57,6 +57,15 @@ let TABS_TYPE = /* @__PURE__ */ function(TABS_TYPE) {
 	return TABS_TYPE;
 }({});
 /**
+* Vertical navigation direction, associated with key symbols.
+*/
+const VERTICAL_NAVIGATION_DIRECTION = {
+	Up: -1,
+	ArrowUp: -1,
+	Down: 1,
+	ArrowDown: 1
+};
+/**
 * Tabs icon sizes.
 */
 let TABS_ICON_SIZE = /* @__PURE__ */ function(TABS_ICON_SIZE) {
@@ -70,7 +79,25 @@ let TABS_ICON_SIZE = /* @__PURE__ */ function(TABS_ICON_SIZE) {
 	TABS_ICON_SIZE["LARGE"] = "lg";
 	return TABS_ICON_SIZE;
 }({});
+/**
+* Tabs size.
+*/
+let TABS_SIZE = /* @__PURE__ */ function(TABS_SIZE) {
+	/**
+	* Small size.
+	*/
+	TABS_SIZE["SMALL"] = "sm";
+	/**
+	* Medium size.
+	*/
+	TABS_SIZE["MEDIUM"] = "md";
+	/**
+	* Large size.
+	*/
+	TABS_SIZE["LARGE"] = "lg";
+	return TABS_SIZE;
+}({});
 //#endregion
-export { TABS_ICON_SIZE, TABS_KEYBOARD_ACTION, TABS_TYPE };
+export { TABS_ICON_SIZE, TABS_KEYBOARD_ACTION, TABS_SIZE, TABS_TYPE, VERTICAL_NAVIGATION_DIRECTION };
 
 //# sourceMappingURL=defs.js.map

package/es/components/tabs/defs.js.map

@@ -1 +1 @@
-{"version":3,"file":"defs.js","names":[],"sources":["../../../src/components/tabs/defs.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\n/**\n * The keyboard action categories for dropdown.\n */\nexport enum TABS_KEYBOARD_ACTION {\n  /**\n   * Not doing any action.\n   */\n  NONE = 'none',\n\n  /**\n   * Keyboard action to navigate back/forward.\n   */\n  NAVIGATING = 'navigating',\n\n  /**\n   * Keyboard action to Enter/Space.\n   */\n  ACTIVATING = 'activating',\n\n  /**\n   * Keyboard action to navigate to first tab using home key\n   */\n  HOME = 'home',\n\n  /**\n   * Keyboard action to navigate to last tab using end key\n   */\n  END = 'end',\n}\n\n/**\n * Tabs types.\n */\nexport enum TABS_TYPE {\n  /**\n   * Regular tabs.\n   */\n  REGULAR = '',\n\n  /**\n   * Container type.\n   */\n  CONTAINER = 'container',\n\n  /**\n   * Contained type.\n   */\n  CONTAINED = 'contained',\n}\n\n/**\n * Tabs icon sizes.\n */\nexport enum TABS_ICON_SIZE {\n  /**\n   * Default icon size.\n   */\n  DEFAULT = 'default',\n\n  /**\n   * Large icon size.\n   */\n  LARGE = 'lg',\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAUA,IAAY,uBAAL,yBAAA,sBAAA;;;;AAIL,sBAAA,UAAA;;;;AAKA,sBAAA,gBAAA;;;;AAKA,sBAAA,gBAAA;;;;AAKA,sBAAA,UAAA;;;;AAKA,sBAAA,SAAA;;KACD;;;;AAKD,IAAY,YAAL,yBAAA,WAAA;;;;AAIL,WAAA,aAAA;;;;AAKA,WAAA,eAAA;;;;AAKA,WAAA,eAAA;;KACD;;;;AAKD,IAAY,iBAAL,yBAAA,gBAAA;;;;AAIL,gBAAA,aAAA;;;;AAKA,gBAAA,WAAA;;KACD"}
+{"version":3,"file":"defs.js","names":[],"sources":["../../../src/components/tabs/defs.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\n/**\n * The keyboard action categories for dropdown.\n */\nexport enum TABS_KEYBOARD_ACTION {\n  /**\n   * Not doing any action.\n   */\n  NONE = 'none',\n\n  /**\n   * Keyboard action to navigate back/forward.\n   */\n  NAVIGATING = 'navigating',\n\n  /**\n   * Keyboard action to Enter/Space.\n   */\n  ACTIVATING = 'activating',\n\n  /**\n   * Keyboard action to navigate to first tab using home key\n   */\n  HOME = 'home',\n\n  /**\n   * Keyboard action to navigate to last tab using end key\n   */\n  END = 'end',\n}\n\n/**\n * Tabs types.\n */\nexport enum TABS_TYPE {\n  /**\n   * Regular tabs.\n   */\n  REGULAR = '',\n\n  /**\n   * Container type.\n   */\n  CONTAINER = 'container',\n\n  /**\n   * Contained type.\n   */\n  CONTAINED = 'contained',\n}\n\n/**\n * Vertical navigation direction, associated with key symbols.\n */\nexport const VERTICAL_NAVIGATION_DIRECTION = {\n  Up: -1,\n  ArrowUp: -1,\n  Down: 1,\n  ArrowDown: 1,\n};\n\n/**\n * Tabs icon sizes.\n */\nexport enum TABS_ICON_SIZE {\n  /**\n   * Default icon size.\n   */\n  DEFAULT = 'default',\n\n  /**\n   * Large icon size.\n   */\n  LARGE = 'lg',\n}\n\n/**\n * Tabs size.\n */\nexport enum TABS_SIZE {\n  /**\n   * Small size.\n   */\n  SMALL = 'sm',\n\n  /**\n   * Medium size.\n   */\n  MEDIUM = 'md',\n\n  /**\n   * Large size.\n   */\n  LARGE = 'lg',\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAUA,IAAY,uBAAL,yBAAA,sBAAA;;;;AAIL,sBAAA,UAAA;;;;AAKA,sBAAA,gBAAA;;;;AAKA,sBAAA,gBAAA;;;;AAKA,sBAAA,UAAA;;;;AAKA,sBAAA,SAAA;;KACD;;;;AAKD,IAAY,YAAL,yBAAA,WAAA;;;;AAIL,WAAA,aAAA;;;;AAKA,WAAA,eAAA;;;;AAKA,WAAA,eAAA;;KACD;;;;AAKD,MAAa,gCAAgC;CAC3C,IAAI;CACJ,SAAS;CACT,MAAM;CACN,WAAW;CACZ;;;;AAKD,IAAY,iBAAL,yBAAA,gBAAA;;;;AAIL,gBAAA,aAAA;;;;AAKA,gBAAA,WAAA;;KACD;;;;AAKD,IAAY,YAAL,yBAAA,WAAA;;;;AAIL,WAAA,WAAA;;;;AAKA,WAAA,YAAA;;;;AAKA,WAAA,WAAA;;KACD"}

package/es/components/tabs/index.d.ts

@@ -8,6 +8,7 @@ import './tabs';
 import './tab';
 import './tab-skeleton';
 import './tabs-skeleton';
+import './tabs-vertical';
 import '../badge-indicator';
 import '../tooltip';
 //# sourceMappingURL=index.d.ts.map

package/es/components/tabs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,QAAQ,CAAC;AAChB,OAAO,OAAO,CAAC;AACf,OAAO,gBAAgB,CAAC;AACxB,OAAO,iBAAiB,CAAC;AACzB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,QAAQ,CAAC;AAChB,OAAO,OAAO,CAAC;AACf,OAAO,gBAAgB,CAAC;AACxB,OAAO,iBAAiB,CAAC;AACzB,OAAO,iBAAiB,CAAC;AACzB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,YAAY,CAAC"}

package/es/components/tabs/index.js

@@ -11,3 +11,4 @@ import "./tab.js";
 import "./tabs-skeleton.js";
 import "./tab-skeleton.js";
 import "../badge-indicator/index.js";
+import "./tabs-vertical.js";

package/es/components/tabs/stories/tabs-wrapper.d.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { LitElement } from 'lit';
+import { TABS_SIZE } from '../defs';
 import '../../button';
 /**
  * Wrapper component for dismissable tabs story with state management
@@ -39,6 +40,10 @@ export declare class DismissableTabsWrapper extends LitElement {
      * Selected index for the initially selected content
      */
     selectedIndex: number;
+    /**
+     * Size of the tabs
+     */
+    size?: TABS_SIZE;
     /**
      * Handle tab dismissed event
      */

package/es/components/tabs/stories/tabs-wrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-wrapper.d.ts","sourceRoot":"","sources":["../../../../src/components/tabs/stories/tabs-wrapper.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAUvC,OAAO,cAAc,CAAC;AAEtB;;GAEG;AACH,qBACa,sBAAuB,SAAQ,UAAU;IACpD;;OAEG;IAEH,SAAS,UAAS;IAElB,OAAO,CAAC,YAAY,CAgBlB;IACF;;OAEG;IAEH,OAAO,CAAC,KAAK,CAAqB;IAElC;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,SAAS,UAAS;IAClB;;OAEG;IAEH,WAAW,UAAQ;IAEnB;;OAEG;IAEH,aAAa,SAAe;IAE5B;;OAEG;IAEH,aAAa,SAAK;IAElB;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAKxB;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAM7B,OAAO,CAAC,SAAS;IAIjB,MAAM;IA2CN;;OAEG;IACH,gBAAgB;CAGjB"}
+{"version":3,"file":"tabs-wrapper.d.ts","sourceRoot":"","sources":["../../../../src/components/tabs/stories/tabs-wrapper.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAMpC,OAAO,cAAc,CAAC;AAEtB;;GAEG;AACH,qBACa,sBAAuB,SAAQ,UAAU;IACpD;;OAEG;IAEH,SAAS,UAAS;IAElB,OAAO,CAAC,YAAY,CAgBlB;IACF;;OAEG;IAEH,OAAO,CAAC,KAAK,CAAqB;IAElC;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,SAAS,UAAS;IAClB;;OAEG;IAEH,WAAW,UAAQ;IAEnB;;OAEG;IAEH,aAAa,SAAe;IAE5B;;OAEG;IAEH,aAAa,SAAK;IAElB;;OAEG;IAEH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAKxB;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAM7B,OAAO,CAAC,SAAS;IAIjB,MAAM;IA4CN;;OAEG;IACH,gBAAgB;CAGjB"}

package/es/components/tabs/stories/tabs-wrapper.js

@@ -91,6 +91,7 @@ let DismissableTabsWrapper = class DismissableTabsWrapper extends LitElement {
         selected-index="${this.selectedIndex}"
         type="${this.contained ? "contained" : ""}"
         ?dismissable="${this.dismissable}"
+        size="${this.size || "lg"}"
         value="all"
         @cds-tab-closed="${this._handleDismissed}"
         @cds-tabs-beingselected="${this._handleBeforeSelected}">
@@ -134,6 +135,7 @@ __decorate([property({ type: Boolean })], DismissableTabsWrapper.prototype, "con
 __decorate([property({ type: Boolean })], DismissableTabsWrapper.prototype, "dismissable", void 0);
 __decorate([property({ attribute: "selection-mode" })], DismissableTabsWrapper.prototype, "selectionMode", void 0);
 __decorate([property({ attribute: "selected-index" })], DismissableTabsWrapper.prototype, "selectedIndex", void 0);
+__decorate([property({ reflect: true })], DismissableTabsWrapper.prototype, "size", void 0);
 DismissableTabsWrapper = __decorate([carbonElement("tabs-story-wrapper")], DismissableTabsWrapper);
 //#endregion
 export { DismissableTabsWrapper };