@carbon/web-components 2.52.0 → 2.53.0

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

@@ -1 +1 @@
-{"version":3,"file":"menu.js","names":["styles","customElement"],"sources":["../../../src/components/menu/menu.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2024, 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 { prefix } from '../../globals/settings';\nimport { property, state } from 'lit/decorators.js';\nimport styles from './menu.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { classMap } from 'lit/directives/class-map.js';\nimport {\n  MenuContext,\n  menuDefaultState,\n  type MenuContextUpdate,\n} from './menu-context';\nimport CDSmenuItem, { MENU_CLOSE_ROOT_EVENT } from './menu-item';\nimport { consume, provide } from '@lit/context';\nimport { MENU_BACKGROUND_TOKEN, MENU_SIZE } from './defs';\n\nexport { MENU_SIZE };\n\n/**\n * Menu.\n *\n * @element cds-custom-menu\n * @deprecated Menus now always support both icons as well as selectable items and nesting.\n */\n\ntype activeItemType = {\n  item: CDSmenuItem;\n  parent: HTMLElement | null;\n};\n\n@customElement(`${prefix}-menu`)\nclass CDSMenu extends HostListenerMixin(LitElement) {\n  @provide({ context: MenuContext })\n  @consume({ context: MenuContext })\n  context = {\n    ...menuDefaultState,\n    updateFromChild: (updatedItem: MenuContextUpdate) => {\n      this.context = {\n        ...this.context,\n        ...updatedItem,\n      };\n    },\n  };\n\n  readonly spacing: number = 8; // distance to keep to window edges, in px\n\n  /**\n   * Items.\n   */\n  @state()\n  items: Element[] | undefined = [];\n\n  /**\n   * Active list Items.\n   */\n  @state()\n  activeitems: activeItemType[] = [];\n\n  /**\n   * Label for the menu.\n   */\n  @property({ type: String })\n  label;\n  /**\n   * Parent state.\n   */\n  @property({ type: Boolean })\n  isChild = false;\n  /**\n   * Action button width.\n   */\n  @property()\n  actionButtonWidth;\n  /**\n   * Checks if document direction is rtl.\n   */\n  @property({ type: Boolean })\n  isRtl = false;\n  /**\n   * Checks if Menu is root menu or not.\n   */\n  @property({ type: Boolean })\n  isRoot = true;\n\n  /**\n   * Document direction.\n   */\n  @property({ type: String })\n  direction = 'ltr';\n  /**\n   * Open value for the menu .\n   */\n  @property({ type: Boolean, reflect: true })\n  open = true;\n  /**\n   * Active element in the DOM .\n   */\n  @property({ type: HTMLElement })\n  focusreturn;\n  /**\n   * Position of the Menu .\n   */\n  @property()\n  position = [-1, -1];\n  /**\n   * Size attribute .\n   */\n  @property({ attribute: true })\n  size = MENU_SIZE.SMALL;\n  /**\n   * Deprecated: Menus now always support both icons as well as selectable items and nesting. The mode of this menu. Defaults to full. full supports nesting and selectable menu items, but no icons. basic supports icons but no nesting or selectable menu items.\n\n    This prop is not intended for use and will be set by the respective implementation (like useContextMenu, MenuButton, and ComboButton).\n   */\n  @property()\n  mode;\n\n  /**\n   * Specify the background token to use. Default is 'layer'.\n   */\n  @property({ type: String, attribute: 'background-token' })\n  backgroundToken = MENU_BACKGROUND_TOKEN.LAYER;\n\n  /**\n   * Specify whether a border should be rendered on the menu\n   */\n  @property({ type: Boolean })\n  border = false;\n\n  /**\n   * Specify how the menu should align with the button element\n   */\n  @property({ type: String })\n  menuAlignment;\n  /**\n   * Position of the Menu in X axis .\n   */\n  @property()\n  x: number | number[] = 0;\n  /**\n   * Position of the Menu in Y axis .\n   */\n  @property()\n  y: number | number[] = 0;\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  private _handleBlur = (e: FocusEvent) => {\n    const { isRoot } = this.context;\n    // Close the menu if all of the following are met:\n    // * The menu is open\n    // * The focusout event is on the root menu\n    // * Focus is moving outside the menu\n    if (this.open && isRoot && !this.contains(e.relatedTarget as Node)) {\n      this.dispatchCloseEvent(e);\n    }\n  };\n\n  /**\n   * The name of the custom event fired when the the Menu should be closed.\n   */\n  static get eventOnClose() {\n    return `${prefix}-menu-closed`;\n  }\n  /**\n   * The name of the custom event fired when the the Menu should be opened.\n   */\n  static get eventOnOpen() {\n    return `${prefix}-menu-opened`;\n  }\n  updated(changedProperties) {\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        this._handleOpen();\n      } else {\n        this._handleClose();\n      }\n    }\n  }\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('icon-detect', () => {\n      this.shadowRoot\n        ?.querySelector('.cds-custom--menu')\n        ?.classList.add(`${prefix}--menu--with-icons`);\n    });\n    this.addEventListener(\n      MENU_CLOSE_ROOT_EVENT,\n      this._handleRootCloseRequest as EventListener\n    );\n  }\n\n  disconnectedCallback() {\n    this.removeEventListener(\n      MENU_CLOSE_ROOT_EVENT,\n      this._handleRootCloseRequest as EventListener\n    );\n    super.disconnectedCallback();\n  }\n  async firstUpdated() {\n    this.isRtl = this.direction === 'rtl';\n    this.isRoot = this.context.isRoot;\n\n    if (this.isChild) {\n      this._newContextCreate();\n    }\n    await this.updateComplete;\n    this._registerMenuItems();\n    this._setActiveItems();\n\n    const slot = this.shadowRoot?.querySelector('slot');\n    slot?.addEventListener('slotchange', () => {\n      this._registerMenuItems();\n      this._setActiveItems();\n    });\n  }\n  render() {\n    const {\n      open,\n      menuAlignment,\n      label,\n      position,\n      _handleKeyDown: handleKeyDown,\n    } = this;\n    const menuClasses = classMap({\n      [`${prefix}--menu`]: true,\n      [`${prefix}--menu--${this.size}`]: this.size,\n      [`${prefix}--menu--box-shadow-top`]:\n        menuAlignment && menuAlignment.slice(0, 3) === 'top',\n      [`${prefix}--menu--open`]: open,\n      [`${prefix}--menu--shown`]: position[0] >= 0 && position[1] >= 0,\n      [`${prefix}--menu--with-selectable-items`]:\n        this.context.hasSelectableItems,\n      [`${prefix}--menu--border`]: this.border,\n      [`${prefix}--menu--background-token__background`]:\n        this.backgroundToken === MENU_BACKGROUND_TOKEN.BACKGROUND,\n    });\n    return html`\n      <ul\n        class=\"${menuClasses}\"\n        aria-label=\"${label}\"\n        tabindex=\"-1\"\n        @keydown=\"${handleKeyDown}\"\n        role=\"menu\">\n        <slot></slot>\n      </ul>\n    `;\n  }\n\n  _handleKeyDown = (e: KeyboardEvent) => {\n    const { isRoot } = this.context;\n    e.stopPropagation();\n    // if the user presses escape or this is a submenu\n    // and the user presses ArrowLeft, close it\n\n    if (e.key === 'Escape' || (!isRoot && e.key === 'ArrowLeft')) {\n      this.dispatchCloseEvent(e);\n    } else {\n      // Prevent scrolling when navigating menu items\n      if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n        e.preventDefault();\n      }\n      this._focusItem(e);\n    }\n  };\n\n  _focusItem = (e: KeyboardEvent | undefined) => {\n    let currentItem: number;\n\n    if (document.activeElement?.tagName !== 'CDS-MENU') {\n      const shadowRootActiveEl = this._findActiveElementInShadowRoot(document);\n      currentItem = this.activeitems.findIndex((activeItem) => {\n        return (\n          shadowRootActiveEl == activeItem.item ||\n          activeItem.item.shadowRoot?.activeElement === shadowRootActiveEl\n        );\n      });\n    } else {\n      currentItem = 0;\n    }\n\n    let indexToFocus = currentItem;\n    // if currentItem is -1, no menu item is focused yet.\n    // in this case, the first item should receive focus.\n    if (currentItem === -1) {\n      indexToFocus = 0;\n    } else if (e) {\n      if (e.key === 'ArrowUp') {\n        indexToFocus = indexToFocus - 1;\n      }\n      if (e.key === 'ArrowDown') {\n        indexToFocus = indexToFocus + 1;\n      }\n    }\n    if (indexToFocus < 0) {\n      indexToFocus = this.activeitems.length - 1;\n    }\n    if (indexToFocus >= this.activeitems.length) {\n      indexToFocus = 0;\n    }\n\n    if (indexToFocus !== currentItem) {\n      this.activeitems[indexToFocus]?.item?.focus();\n    }\n  };\n  _findActiveElementInShadowRoot = (shadowRoot) => {\n    if (shadowRoot === null) return null;\n\n    let activeElement = shadowRoot.activeElement;\n    while (\n      activeElement &&\n      activeElement.shadowRoot &&\n      activeElement.shadowRoot.activeElement\n    ) {\n      activeElement = activeElement.shadowRoot.activeElement;\n    }\n    return activeElement;\n  };\n\n  _notEmpty = (value: number | null | undefined) => {\n    return value !== null && value !== undefined;\n  };\n  _fitValue = (range: number[], axis: 'x' | 'y') => {\n    const { isRoot } = this.context;\n\n    // const isRoot =  false\n    const menuElement = this.shadowRoot?.querySelector(`.${prefix}--menu`);\n    const { width, height } = (menuElement ?? this).getBoundingClientRect();\n    const alignment = isRoot ? 'vertical' : 'horizontal';\n    const axes = {\n      x: {\n        max: window.innerWidth,\n        size: width,\n        anchor: alignment === 'horizontal' ? range[1] : range[0],\n        reversedAnchor: alignment === 'horizontal' ? range[0] : range[1],\n        offset: 0,\n      },\n      y: {\n        max: window.innerHeight,\n        size: height,\n        anchor: alignment === 'horizontal' ? range[0] : range[1],\n        reversedAnchor: alignment === 'horizontal' ? range[1] : range[0],\n        offset: isRoot ? 0 : 4, // top padding in menu, used to align the menu items\n      },\n    };\n\n    // Avoid that the Menu render incorrectly when the postion is set in the right side of the screen\n    if (\n      this.actionButtonWidth &&\n      this.actionButtonWidth < axes.x.size &&\n      (this.menuAlignment === 'bottom' || this.menuAlignment === 'top')\n    ) {\n      axes.x.size = this.actionButtonWidth;\n    }\n\n    // if 'axes.x.anchor' is lower than 87px dynamically switch render side\n    if (\n      this.actionButtonWidth &&\n      (this.menuAlignment === 'bottom-end' ||\n        this.menuAlignment === 'top-end') &&\n      axes.x.anchor >= 87 &&\n      this.actionButtonWidth < axes.x.size\n    ) {\n      const diff = axes.x.anchor + axes.x.reversedAnchor;\n      axes.x.anchor = axes.x.anchor + diff;\n    }\n\n    const { max, size, anchor, reversedAnchor, offset } = axes[axis];\n\n    // get values for different scenarios, set to false if they don't work\n    const options = [\n      // towards max (preferred)\n      max - this.spacing - size - anchor >= 0 ? anchor - offset : false,\n\n      // towards min / reversed (first fallback)\n      reversedAnchor - size >= 0 ? reversedAnchor - size + offset : false,\n\n      // align at max (second fallback)\n      max - this.spacing - size,\n    ];\n    const topAlignment =\n      this.menuAlignment === 'top' ||\n      this.menuAlignment === 'top-end' ||\n      this.menuAlignment === 'top-start';\n    // If the tooltip is not visible in the top, switch to the bototm\n    if (\n      typeof options[0] === 'number' &&\n      topAlignment &&\n      options[0] >= 0 &&\n      !options[1] &&\n      axis === 'y'\n    ) {\n      this.style.transform = 'translate(0)';\n    } else if (topAlignment && !options[0] && axis === 'y') {\n      options[0] = anchor - offset;\n    }\n\n    // Previous array `options`, has at least one item that is a number (the last one - second fallback).\n    // That guarantees that the return of `find()` will always be a number\n    // and we can safely add the numeric casting `as number`.\n    const bestOption = options.find((option) => option !== false) as number;\n\n    return bestOption >= this.spacing ? bestOption : this.spacing;\n  };\n  _getPosition = (x: number | (number | null | undefined)[]) => {\n    if (Array.isArray(x)) {\n      // has to be of length 2\n      const filtered = x.filter(this._notEmpty);\n      if (filtered.length === 2) {\n        return filtered;\n      } else {\n        return;\n      }\n    } else {\n      return [x, x];\n    }\n  };\n  _calculatePosition = () => {\n    const ranges = {\n      x: this._getPosition(this.x),\n      y: this._getPosition(this.y),\n    };\n\n    if (!ranges.x || !ranges.y) {\n      return [-1, -1];\n    }\n    return [\n      this._fitValue(ranges.x as number[], 'x') ?? -1,\n      this._fitValue(ranges.y as number[], 'y') ?? -1,\n    ];\n  };\n  _handleOpen = async () => {\n    const pos = this._calculatePosition();\n    if (this.isRtl) {\n      this.style.insetInlineStart = `initial`;\n      this.style.insetInlineEnd = `${pos[0]}px`;\n    } else {\n      this.style.insetInlineStart = `${pos[0]}px`;\n      this.style.insetInlineEnd = `initial`;\n    }\n    this.style.insetBlockStart = `${pos[1]}px`;\n    this.position = pos;\n\n    await this.updateComplete;\n    this._registerMenuItems();\n    this._setActiveItems();\n\n    const init = {\n      bubbles: true,\n      cancelable: true,\n      composed: true,\n    };\n    if (\n      this.dispatchEvent(\n        new CustomEvent((this.constructor as typeof CDSMenu).eventOnOpen, init)\n      )\n    ) {\n      this.dispatchEvent(\n        new CustomEvent((this.constructor as typeof CDSMenu).eventOnOpen, init)\n      );\n    }\n  };\n  dispatchCloseEvent = (e?: Event) => {\n    const init = {\n      bubbles: true,\n      cancelable: true,\n      composed: true,\n      detail: {\n        triggeredBy: e?.target,\n        triggerEventType: e?.type,\n      },\n    };\n    if (\n      this.dispatchEvent(\n        new CustomEvent((this.constructor as typeof CDSMenu).eventOnClose, init)\n      )\n    ) {\n      this.dispatchEvent(\n        new CustomEvent((this.constructor as typeof CDSMenu).eventOnClose, init)\n      );\n    }\n  };\n  private _handleClose = () => {\n    this.position = [-1, -1];\n    this.style.removeProperty('inset-inline-start');\n    this.style.removeProperty('inset-inline-end');\n    this.style.removeProperty('inset-block-start');\n  };\n  private _handleRootCloseRequest = (\n    event: CustomEvent<{ triggerEvent?: Event }>\n  ) => {\n    if (!this.context?.isRoot) {\n      return;\n    }\n\n    this.dispatchCloseEvent(event.detail?.triggerEvent ?? event);\n  };\n  _newContextCreate = () => {\n    this.context = {\n      ...this.context,\n      isRoot: false,\n      size: this.size,\n    };\n  };\n  _registerMenuItems = () => {\n    let items;\n    if (this.isChild) {\n      const submenuSlot = this.querySelector(\n        'slot[name=\"submenu\"]'\n      ) as HTMLSlotElement | null;\n      items = submenuSlot?.assignedElements() ?? [];\n    } else {\n      items = this.shadowRoot?.querySelector('slot')?.assignedElements() ?? [];\n    }\n    this.items = items?.filter((item) => {\n      if (item.tagName === 'CDS-MENU-ITEM') {\n        return !(item as CDSmenuItem).disabled;\n      }\n      return item.tagName !== 'CDS-MENU-ITEM-DIVIDER';\n    });\n  };\n  _setActiveItems = () => {\n    this.activeitems = [];\n\n    this.items?.map((item) => {\n      let activeItem: activeItemType;\n      switch (item.tagName) {\n        case 'CDS-MENU-ITEM-RADIO-GROUP': {\n          const slotElements = item.querySelectorAll(`${prefix}-menu-item`);\n          if (slotElements?.length) {\n            for (const entry of slotElements.entries()) {\n              activeItem = {\n                item: entry[1] as CDSmenuItem,\n                parent: item as HTMLElement,\n              };\n              this.activeitems = [...this.activeitems, activeItem];\n            }\n          }\n          break;\n        }\n        case 'CDS-MENU-ITEM-GROUP': {\n          const slotElements = item.shadowRoot\n            ?.querySelector('slot')\n            ?.assignedElements();\n          slotElements?.map((el) => {\n            activeItem = {\n              item: el as CDSmenuItem,\n              parent: el as HTMLElement,\n            };\n            this.activeitems = [...this.activeitems, activeItem];\n          });\n          break;\n        }\n        case 'CDS-MENU-ITEM-SELECTABLE': {\n          activeItem = {\n            item: item.shadowRoot?.querySelector(\n              `${prefix}-menu-item`\n            ) as CDSmenuItem,\n            parent: item as HTMLElement,\n          };\n          this.activeitems = [...this.activeitems, activeItem];\n          break;\n        }\n        default: {\n          activeItem = {\n            item: item as CDSmenuItem,\n            parent: null,\n          };\n          this.activeitems = [...this.activeitems, activeItem];\n        }\n      }\n    });\n    const activeEl = this.activeitems[0]?.item ?? document.activeElement;\n    activeEl.focus();\n  };\n  static styles = styles;\n}\nexport default CDSMenu;\n"],"mappings":"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"}
+{"version":3,"file":"menu.js","names":["styles","customElement"],"sources":["../../../src/components/menu/menu.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2024, 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 { prefix } from '../../globals/settings';\nimport { property, state } from 'lit/decorators.js';\nimport styles from './menu.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { classMap } from 'lit/directives/class-map.js';\nimport {\n  MenuContext,\n  menuDefaultState,\n  type MenuContextUpdate,\n} from './menu-context';\nimport CDSmenuItem, { MENU_CLOSE_ROOT_EVENT } from './menu-item';\nimport { consume, provide } from '@lit/context';\nimport { MENU_BACKGROUND_TOKEN, MENU_SIZE } from './defs';\n\nexport { MENU_SIZE };\n\n/**\n * Menu.\n *\n * @element cds-custom-menu\n * @deprecated Menus now always support both icons as well as selectable items and nesting.\n */\n\ntype activeItemType = {\n  item: CDSmenuItem;\n  parent: HTMLElement | null;\n};\n\n@customElement(`${prefix}-menu`)\nclass CDSMenu extends HostListenerMixin(LitElement) {\n  @provide({ context: MenuContext })\n  @consume({ context: MenuContext })\n  context = {\n    ...menuDefaultState,\n    updateFromChild: (updatedItem: MenuContextUpdate) => {\n      this.context = {\n        ...this.context,\n        ...updatedItem,\n      };\n    },\n  };\n\n  readonly spacing: number = 8; // distance to keep to window edges, in px\n\n  /**\n   * Items.\n   */\n  @state()\n  items: Element[] | undefined = [];\n\n  /**\n   * Active list Items.\n   */\n  @state()\n  activeitems: activeItemType[] = [];\n\n  /**\n   * Label for the menu.\n   */\n  @property({ type: String })\n  label;\n  /**\n   * Parent state.\n   */\n  @property({ type: Boolean })\n  isChild = false;\n  /**\n   * Action button width.\n   */\n  @property()\n  actionButtonWidth;\n  /**\n   * Checks if document direction is rtl.\n   */\n  @property({ type: Boolean })\n  isRtl = false;\n  /**\n   * Checks if Menu is root menu or not.\n   */\n  @property({ type: Boolean })\n  isRoot = true;\n\n  /**\n   * Document direction.\n   */\n  @property({ type: String })\n  direction = 'ltr';\n  /**\n   * Open value for the menu .\n   */\n  @property({ type: Boolean, reflect: true })\n  open = true;\n  /**\n   * Active element in the DOM .\n   */\n  @property({ type: HTMLElement })\n  focusreturn;\n  /**\n   * Position of the Menu .\n   */\n  @property()\n  position = [-1, -1];\n  /**\n   * Size attribute .\n   */\n  @property({ attribute: true })\n  size = MENU_SIZE.SMALL;\n  /**\n   * Deprecated: Menus now always support both icons as well as selectable items and nesting. The mode of this menu. Defaults to full. full supports nesting and selectable menu items, but no icons. basic supports icons but no nesting or selectable menu items.\n\n    This prop is not intended for use and will be set by the respective implementation (like useContextMenu, MenuButton, and ComboButton).\n   */\n  @property()\n  mode;\n\n  /**\n   * Specify the background token to use. Default is 'layer'.\n   */\n  @property({ type: String, attribute: 'background-token' })\n  backgroundToken = MENU_BACKGROUND_TOKEN.LAYER;\n\n  /**\n   * Specify whether a border should be rendered on the menu\n   */\n  @property({ type: Boolean })\n  border = false;\n\n  /**\n   * Specify how the menu should align with the button element\n   */\n  @property({ type: String })\n  menuAlignment;\n  /**\n   * Position of the Menu in X axis .\n   */\n  @property()\n  x: number | number[] = 0;\n  /**\n   * Position of the Menu in Y axis .\n   */\n  @property()\n  y: number | number[] = 0;\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  private _handleBlur = (e: FocusEvent) => {\n    const { isRoot } = this.context;\n    // Close the menu if all of the following are met:\n    // * The menu is open\n    // * The focusout event is on the root menu\n    // * Focus is moving outside the menu\n    if (this.open && isRoot && !this.contains(e.relatedTarget as Node)) {\n      this.dispatchCloseEvent(e);\n    }\n  };\n\n  /**\n   * The name of the custom event fired when the the Menu should be closed.\n   */\n  static get eventOnClose() {\n    return `${prefix}-menu-closed`;\n  }\n  /**\n   * The name of the custom event fired when the the Menu should be opened.\n   */\n  static get eventOnOpen() {\n    return `${prefix}-menu-opened`;\n  }\n  updated(changedProperties) {\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        this._handleOpen();\n      } else {\n        this._handleClose();\n      }\n    }\n  }\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('icon-detect', () => {\n      this.shadowRoot\n        ?.querySelector('.cds-custom--menu')\n        ?.classList.add(`${prefix}--menu--with-icons`);\n    });\n    this.addEventListener(\n      MENU_CLOSE_ROOT_EVENT,\n      this._handleRootCloseRequest as EventListener\n    );\n  }\n\n  disconnectedCallback() {\n    this.removeEventListener(\n      MENU_CLOSE_ROOT_EVENT,\n      this._handleRootCloseRequest as EventListener\n    );\n    super.disconnectedCallback();\n  }\n  async firstUpdated() {\n    this.isRtl = this.direction === 'rtl';\n    this.isRoot = this.context.isRoot;\n\n    if (this.isChild) {\n      this._newContextCreate();\n    }\n    await this.updateComplete;\n    this._registerMenuItems();\n    this._setActiveItems();\n\n    const slot = this.shadowRoot?.querySelector('slot');\n    slot?.addEventListener('slotchange', () => {\n      this._registerMenuItems();\n      this._setActiveItems();\n    });\n  }\n  render() {\n    const {\n      open,\n      menuAlignment,\n      label,\n      position,\n      _handleKeyDown: handleKeyDown,\n    } = this;\n    const menuClasses = classMap({\n      [`${prefix}--menu`]: true,\n      [`${prefix}--menu--${this.size}`]: this.size,\n      [`${prefix}--menu--box-shadow-top`]:\n        menuAlignment && menuAlignment.slice(0, 3) === 'top',\n      [`${prefix}--menu--open`]: open,\n      [`${prefix}--menu--shown`]: position[0] >= 0 && position[1] >= 0,\n      [`${prefix}--menu--with-selectable-items`]:\n        this.context.hasSelectableItems,\n      [`${prefix}--menu--border`]: this.border,\n      [`${prefix}--menu--background-token__background`]:\n        this.backgroundToken === MENU_BACKGROUND_TOKEN.BACKGROUND,\n    });\n    return html`\n      <ul\n        class=\"${menuClasses}\"\n        aria-label=\"${label}\"\n        tabindex=\"-1\"\n        @keydown=\"${handleKeyDown}\"\n        role=\"menu\">\n        <slot></slot>\n      </ul>\n    `;\n  }\n\n  _handleKeyDown = (e: KeyboardEvent) => {\n    const { isRoot } = this.context;\n    e.stopPropagation();\n    // if the user presses escape or this is a submenu\n    // and the user presses ArrowLeft, close it\n\n    if (e.key === 'Escape' || (!isRoot && e.key === 'ArrowLeft')) {\n      this.dispatchCloseEvent(e);\n    } else {\n      // Prevent scrolling when navigating menu items\n      if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n        e.preventDefault();\n      }\n      this._focusItem(e);\n    }\n  };\n\n  _focusItem = (e: KeyboardEvent | undefined) => {\n    let currentItem: number;\n\n    if (document.activeElement?.tagName !== 'CDS-MENU') {\n      const shadowRootActiveEl = this._findActiveElementInShadowRoot(document);\n      currentItem = this.activeitems.findIndex((activeItem) => {\n        return (\n          shadowRootActiveEl == activeItem.item ||\n          activeItem.item.shadowRoot?.activeElement === shadowRootActiveEl\n        );\n      });\n    } else {\n      currentItem = 0;\n    }\n\n    let indexToFocus = currentItem;\n    // if currentItem is -1, no menu item is focused yet.\n    // in this case, the first item should receive focus.\n    if (currentItem === -1) {\n      indexToFocus = 0;\n    } else if (e) {\n      if (e.key === 'ArrowUp') {\n        indexToFocus = indexToFocus - 1;\n      }\n      if (e.key === 'ArrowDown') {\n        indexToFocus = indexToFocus + 1;\n      }\n    }\n    if (indexToFocus < 0) {\n      indexToFocus = this.activeitems.length - 1;\n    }\n    if (indexToFocus >= this.activeitems.length) {\n      indexToFocus = 0;\n    }\n\n    if (indexToFocus !== currentItem) {\n      this.activeitems[indexToFocus]?.item?.focus();\n    }\n  };\n  _findActiveElementInShadowRoot = (shadowRoot) => {\n    if (shadowRoot === null) return null;\n\n    let activeElement = shadowRoot.activeElement;\n    while (\n      activeElement &&\n      activeElement.shadowRoot &&\n      activeElement.shadowRoot.activeElement\n    ) {\n      activeElement = activeElement.shadowRoot.activeElement;\n    }\n    return activeElement;\n  };\n\n  _notEmpty = (value: number | null | undefined) => {\n    return value !== null && value !== undefined;\n  };\n  _fitValue = (range: number[], axis: 'x' | 'y') => {\n    const { isRoot } = this.context;\n\n    // const isRoot =  false\n    const menuElement = this.shadowRoot?.querySelector(`.${prefix}--menu`);\n    const { width, height } = (menuElement ?? this).getBoundingClientRect();\n    const alignment = isRoot ? 'vertical' : 'horizontal';\n    const axes = {\n      x: {\n        max: window.innerWidth,\n        size: width,\n        anchor: alignment === 'horizontal' ? range[1] : range[0],\n        reversedAnchor: alignment === 'horizontal' ? range[0] : range[1],\n        offset: 0,\n      },\n      y: {\n        max: window.innerHeight,\n        size: height,\n        anchor: alignment === 'horizontal' ? range[0] : range[1],\n        reversedAnchor: alignment === 'horizontal' ? range[1] : range[0],\n        offset: isRoot ? 0 : 4, // top padding in menu, used to align the menu items\n      },\n    };\n\n    // Avoid that the Menu render incorrectly when the postion is set in the right side of the screen\n    if (\n      this.actionButtonWidth &&\n      this.actionButtonWidth < axes.x.size &&\n      (this.menuAlignment === 'bottom' || this.menuAlignment === 'top')\n    ) {\n      axes.x.size = this.actionButtonWidth;\n    }\n\n    // if 'axes.x.anchor' is lower than 87px dynamically switch render side\n    if (\n      this.actionButtonWidth &&\n      (this.menuAlignment === 'bottom-end' ||\n        this.menuAlignment === 'top-end') &&\n      axes.x.anchor >= 87 &&\n      this.actionButtonWidth < axes.x.size\n    ) {\n      const diff = axes.x.anchor + axes.x.reversedAnchor;\n      axes.x.anchor = axes.x.anchor + diff;\n    }\n\n    const { max, size, anchor, reversedAnchor, offset } = axes[axis];\n\n    // get values for different scenarios, set to false if they don't work\n    const options = [\n      // towards max (preferred)\n      max - this.spacing - size - anchor >= 0 ? anchor - offset : false,\n\n      // towards min / reversed (first fallback)\n      reversedAnchor - size >= 0 ? reversedAnchor - size + offset : false,\n\n      // align at max (second fallback)\n      max - this.spacing - size,\n    ];\n    const topAlignment =\n      this.menuAlignment === 'top' ||\n      this.menuAlignment === 'top-end' ||\n      this.menuAlignment === 'top-start';\n    // If the tooltip is not visible in the top, switch to the bototm\n    if (\n      typeof options[0] === 'number' &&\n      topAlignment &&\n      options[0] >= 0 &&\n      !options[1] &&\n      axis === 'y'\n    ) {\n      this.style.transform = 'translate(0)';\n    } else if (topAlignment && !options[0] && axis === 'y') {\n      options[0] = anchor - offset;\n    }\n\n    // Previous array `options`, has at least one item that is a number (the last one - second fallback).\n    // That guarantees that the return of `find()` will always be a number\n    // and we can safely add the numeric casting `as number`.\n    const bestOption = options.find((option) => option !== false) as number;\n\n    return bestOption >= this.spacing ? bestOption : this.spacing;\n  };\n  _getPosition = (x: number | (number | null | undefined)[]) => {\n    if (Array.isArray(x)) {\n      // has to be of length 2\n      const filtered = x.filter(this._notEmpty);\n      if (filtered.length === 2) {\n        return filtered;\n      } else {\n        return;\n      }\n    } else {\n      return [x, x];\n    }\n  };\n  _calculatePosition = () => {\n    const ranges = {\n      x: this._getPosition(this.x),\n      y: this._getPosition(this.y),\n    };\n\n    if (!ranges.x || !ranges.y) {\n      return [-1, -1];\n    }\n    return [\n      this._fitValue(ranges.x as number[], 'x') ?? -1,\n      this._fitValue(ranges.y as number[], 'y') ?? -1,\n    ];\n  };\n  _handleOpen = async () => {\n    const pos = this._calculatePosition();\n    if (this.isRtl) {\n      this.style.insetInlineStart = `initial`;\n      this.style.insetInlineEnd = `${pos[0]}px`;\n    } else {\n      this.style.insetInlineStart = `${pos[0]}px`;\n      this.style.insetInlineEnd = `initial`;\n    }\n    this.style.insetBlockStart = `${pos[1]}px`;\n    this.position = pos;\n\n    await this.updateComplete;\n    this._registerMenuItems();\n    this._setActiveItems();\n\n    const init = {\n      bubbles: true,\n      cancelable: true,\n      composed: true,\n    };\n    if (\n      this.dispatchEvent(\n        new CustomEvent((this.constructor as typeof CDSMenu).eventOnOpen, init)\n      )\n    ) {\n      this.dispatchEvent(\n        new CustomEvent((this.constructor as typeof CDSMenu).eventOnOpen, init)\n      );\n    }\n  };\n  dispatchCloseEvent = (e?: Event) => {\n    const init = {\n      bubbles: true,\n      cancelable: true,\n      composed: true,\n      detail: {\n        triggeredBy: e?.target,\n        triggerEventType: e?.type,\n      },\n    };\n    if (\n      this.dispatchEvent(\n        new CustomEvent((this.constructor as typeof CDSMenu).eventOnClose, init)\n      )\n    ) {\n      this.dispatchEvent(\n        new CustomEvent((this.constructor as typeof CDSMenu).eventOnClose, init)\n      );\n    }\n  };\n  private _handleClose = () => {\n    this.position = [-1, -1];\n    this.style.removeProperty('inset-inline-start');\n    this.style.removeProperty('inset-inline-end');\n    this.style.removeProperty('inset-block-start');\n  };\n  private _handleRootCloseRequest = (\n    event: CustomEvent<{ triggerEvent?: Event }>\n  ) => {\n    if (!this.context?.isRoot) {\n      return;\n    }\n\n    this.dispatchCloseEvent(event.detail?.triggerEvent ?? event);\n  };\n  _newContextCreate = () => {\n    this.context = {\n      ...this.context,\n      isRoot: false,\n      size: this.size,\n    };\n  };\n  _registerMenuItems = () => {\n    let items;\n    if (this.isChild) {\n      const submenuSlot = this.querySelector(\n        'slot[name=\"submenu\"]'\n      ) as HTMLSlotElement | null;\n      items = submenuSlot?.assignedElements() ?? [];\n    } else {\n      items = this.shadowRoot?.querySelector('slot')?.assignedElements() ?? [];\n    }\n    this.items = items?.filter((item) => {\n      if (item.tagName === 'CDS-MENU-ITEM') {\n        return !(item as CDSmenuItem).disabled;\n      }\n      return item.tagName !== 'CDS-MENU-ITEM-DIVIDER';\n    });\n  };\n  _setActiveItems = () => {\n    this.activeitems = [];\n\n    this.items?.map((item) => {\n      let activeItem: activeItemType;\n      switch (item.tagName) {\n        case 'CDS-MENU-ITEM-RADIO-GROUP': {\n          const slotElements = item.querySelectorAll(`${prefix}-menu-item`);\n          if (slotElements?.length) {\n            for (const entry of slotElements.entries()) {\n              activeItem = {\n                item: entry[1] as CDSmenuItem,\n                parent: item as HTMLElement,\n              };\n              this.activeitems = [...this.activeitems, activeItem];\n            }\n          }\n          break;\n        }\n        case 'CDS-MENU-ITEM-GROUP': {\n          const slotElements = item.shadowRoot\n            ?.querySelector('slot')\n            ?.assignedElements();\n          slotElements?.map((el) => {\n            activeItem = {\n              item: el as CDSmenuItem,\n              parent: el as HTMLElement,\n            };\n            this.activeitems = [...this.activeitems, activeItem];\n          });\n          break;\n        }\n        case 'CDS-MENU-ITEM-SELECTABLE': {\n          activeItem = {\n            item: item.shadowRoot?.querySelector(\n              `${prefix}-menu-item`\n            ) as CDSmenuItem,\n            parent: item as HTMLElement,\n          };\n          this.activeitems = [...this.activeitems, activeItem];\n          break;\n        }\n        default: {\n          activeItem = {\n            item: item as CDSmenuItem,\n            parent: null,\n          };\n          this.activeitems = [...this.activeitems, activeItem];\n        }\n      }\n    });\n    const activeEl = this.activeitems[0]?.item ?? document.activeElement;\n    activeEl.focus();\n  };\n  static styles = styles;\n}\nexport default CDSMenu;\n"],"mappings":"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"}

package/es-custom/components/menu/menu.scss.js

@@ -6,10 +6,9 @@
  */
 
 import { css } from "lit";
-
 //#region src/components/menu/menu.scss?lit
 var menu_default = css(["@keyframes cds-custom--hide-feedback{0%{opacity:1;visibility:inherit}to{opacity:0;visibility:hidden}}@keyframes cds-custom--show-feedback{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:inherit}}@keyframes cds-custom--skeleton{0%{opacity:.3;transform:scaleX(0);transform-origin:left}20%{opacity:1;transform:scaleX(1);transform-origin:left}28%{transform:scaleX(1);transform-origin:right}51%{transform:scaleX(0);transform-origin:right}58%{transform:scaleX(0);transform-origin:right}82%{transform:scaleX(1);transform-origin:right}83%{transform:scaleX(1);transform-origin:left}96%{transform:scaleX(0);transform-origin:left}to{opacity:.3;transform:scaleX(0);transform-origin:left}}.cds-custom--layout--size-xs{--cds-layout-size-height-context:var(--cds-layout-size-height-xs,1.5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds-custom--layout-constraint--size__default-xs{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-xs,1.5rem))}.cds-custom--layout-constraint--size__min-xs{--cds-layout-size-height-min:var(--cds-layout-size-height-xs,1.5rem)}.cds-custom--layout-constraint--size__max-xs{--cds-layout-size-height-max:var(--cds-layout-size-height-xs,1.5rem)}.cds-custom--layout--size-sm{--cds-layout-size-height-context:var(--cds-layout-size-height-sm,2rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds-custom--layout-constraint--size__default-sm{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-sm,2rem))}.cds-custom--layout-constraint--size__min-sm{--cds-layout-size-height-min:var(--cds-layout-size-height-sm,2rem)}.cds-custom--layout-constraint--size__max-sm{--cds-layout-size-height-max:var(--cds-layout-size-height-sm,2rem)}.cds-custom--layout--size-md{--cds-layout-size-height-context:var(--cds-layout-size-height-md,2.5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds-custom--layout-constraint--size__default-md{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-md,2.5rem))}.cds-custom--layout-constraint--size__min-md{--cds-layout-size-height-min:var(--cds-layout-size-height-md,2.5rem)}.cds-custom--layout-constraint--size__max-md{--cds-layout-size-height-max:var(--cds-layout-size-height-md,2.5rem)}.cds-custom--layout--size-lg{--cds-layout-size-height-context:var(--cds-layout-size-height-lg,3rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds-custom--layout-constraint--size__default-lg{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-lg,3rem))}.cds-custom--layout-constraint--size__min-lg{--cds-layout-size-height-min:var(--cds-layout-size-height-lg,3rem)}.cds-custom--layout-constraint--size__max-lg{--cds-layout-size-height-max:var(--cds-layout-size-height-lg,3rem)}.cds-custom--layout--size-xl{--cds-layout-size-height-context:var(--cds-layout-size-height-xl,4rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds-custom--layout-constraint--size__default-xl{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-xl,4rem))}.cds-custom--layout-constraint--size__min-xl{--cds-layout-size-height-min:var(--cds-layout-size-height-xl,4rem)}.cds-custom--layout-constraint--size__max-xl{--cds-layout-size-height-max:var(--cds-layout-size-height-xl,4rem)}.cds-custom--layout--size-2xl{--cds-layout-size-height-context:var(--cds-layout-size-height-2xl,5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds-custom--layout-constraint--size__default-2xl{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-2xl,5rem))}.cds-custom--layout-constraint--size__min-2xl{--cds-layout-size-height-min:var(--cds-layout-size-height-2xl,5rem)}.cds-custom--layout-constraint--size__max-2xl{--cds-layout-size-height-max:var(--cds-layout-size-height-2xl,5rem)}.cds-custom--layout--density-condensed{--cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-condensed,0.5rem);--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context)}.cds-custom--layout-constraint--density__default-condensed{--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context,var(--cds-layout-density-padding-inline-condensed,0.5rem))}.cds-custom--layout-constraint--density__min-condensed{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-condensed,0.5rem)}.cds-custom--layout-constraint--density__max-condensed{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-condensed,0.5rem)}.cds-custom--layout--density-normal{--cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-normal,1rem);--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context)}.cds-custom--layout-constraint--density__default-normal{--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context,var(--cds-layout-density-padding-inline-normal,1rem))}.cds-custom--layout-constraint--density__min-normal{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-normal,1rem)}.cds-custom--layout-constraint--density__max-normal{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-normal,1rem)}:root{--cds-layout-size-height-xs:1.5rem;--cds-layout-size-height-sm:2rem;--cds-layout-size-height-md:2.5rem;--cds-layout-size-height-lg:3rem;--cds-layout-size-height-xl:4rem;--cds-layout-size-height-2xl:5rem;--cds-layout-size-height-min:0px;--cds-layout-size-height-max:999999999px;--cds-layout-density-padding-inline-condensed:0.5rem;--cds-layout-density-padding-inline-normal:1rem;--cds-layout-density-padding-inline-min:0px;--cds-layout-density-padding-inline-max:999999999px}.cds-custom--assistive-text,.cds-custom--visually-hidden{block-size:1px;border:0;margin:-1px;overflow:hidden;padding:0;position:absolute;clip:rect(0,0,0,0);inline-size:1px;visibility:inherit;white-space:nowrap}.cds-custom--layer-one,:root{--cds-layer:var(--cds-layer-01,#f4f4f4);--cds-layer-active:var(--cds-layer-active-01,#c6c6c6);--cds-layer-background:var(--cds-layer-background-01,#fff);--cds-layer-hover:var(--cds-layer-hover-01,#e8e8e8);--cds-layer-selected:var(--cds-layer-selected-01,#e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-01,#d1d1d1);--cds-layer-accent:var(--cds-layer-accent-01,#e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-01,#d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-01,#a8a8a8);--cds-field:var(--cds-field-01,#f4f4f4);--cds-field-hover:var(--cds-field-hover-01,#e8e8e8);--cds-border-subtle:var(--cds-border-subtle-00,#e0e0e0);--cds-border-subtle-selected:var(--cds-border-subtle-selected-01,#c6c6c6);--cds-border-strong:var(--cds-border-strong-01,#8d8d8d);--cds-border-tile:var(--cds-border-tile-01,#c6c6c6)}.cds-custom--layer-two{--cds-layer:var(--cds-layer-02,#fff);--cds-layer-active:var(--cds-layer-active-02,#c6c6c6);--cds-layer-background:var(--cds-layer-background-02,#f4f4f4);--cds-layer-hover:var(--cds-layer-hover-02,#e8e8e8);--cds-layer-selected:var(--cds-layer-selected-02,#e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-02,#d1d1d1);--cds-layer-accent:var(--cds-layer-accent-02,#e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-02,#d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-02,#a8a8a8);--cds-field:var(--cds-field-02,#fff);--cds-field-hover:var(--cds-field-hover-02,#e8e8e8);--cds-border-subtle:var(--cds-border-subtle-01,#c6c6c6);--cds-border-subtle-selected:var(--cds-border-subtle-selected-02,#c6c6c6);--cds-border-strong:var(--cds-border-strong-02,#8d8d8d);--cds-border-tile:var(--cds-border-tile-02,#a8a8a8)}.cds-custom--layer-three{--cds-layer:var(--cds-layer-03,#f4f4f4);--cds-layer-active:var(--cds-layer-active-03,#c6c6c6);--cds-layer-background:var(--cds-layer-background-03,#fff);--cds-layer-hover:var(--cds-layer-hover-03,#e8e8e8);--cds-layer-selected:var(--cds-layer-selected-03,#e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-03,#d1d1d1);--cds-layer-accent:var(--cds-layer-accent-03,#e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-03,#d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-03,#a8a8a8);--cds-field:var(--cds-field-03,#f4f4f4);--cds-field-hover:var(--cds-field-hover-03,#e8e8e8);--cds-border-subtle:var(--cds-border-subtle-02,#e0e0e0);--cds-border-subtle-selected:var(--cds-border-subtle-selected-03,#c6c6c6);--cds-border-strong:var(--cds-border-strong-03,#8d8d8d);--cds-border-tile:var(--cds-border-tile-03,#c6c6c6)}.cds-custom--layer-one.cds-custom--layer__with-background,.cds-custom--layer-three.cds-custom--layer__with-background,.cds-custom--layer-two.cds-custom--layer__with-background{background-color:var(--cds-layer-background)}.cds-custom--menu{border:0;box-sizing:border-box;font-family:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline}.cds-custom--menu *,.cds-custom--menu :after,.cds-custom--menu :before{box-sizing:inherit}.cds-custom--menu{background-color:var(--cds-layer);box-shadow:0 2px 6px var(--cds-shadow,rgba(0,0,0,.3));max-inline-size:18rem;min-inline-size:10rem;padding:.25rem 0;position:fixed;z-index:9000}.cds-custom--menu--border{outline:1px solid var(--cds-border-subtle)}.cds-custom--menu--background-token__background{background-color:var(--cds-background,#fff)}.cds-custom--menu:not(.cds-custom--menu--open) .cds-custom--menu--open{visibility:hidden}.cds-custom--menu--shown{overflow:visible}.cds-custom--menu-item{align-items:center;block-size:2rem;color:var(--cds-text-secondary,#525252);-moz-column-gap:.5rem;column-gap:.5rem;cursor:pointer;display:grid;font-size:var(--cds-body-short-01-font-size,.875rem);font-weight:var(--cds-body-short-01-font-weight,400);grid-template-columns:1fr max-content;letter-spacing:var(--cds-body-short-01-letter-spacing,.16px);line-height:var(--cds-body-short-01-line-height,1.28572);padding-inline:1rem;transition:background-color 70ms cubic-bezier(.2,0,.38,.9)}.cds-custom--menu-item:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds-custom--menu-item:focus{outline-style:dotted}}.cds-custom--menu-item:hover{background-color:var(--cds-layer-hover);color:var(--cds-text-primary,#161616)}.cds-custom--menu--xs .cds-custom--menu-item{block-size:1.5rem}.cds-custom--menu--sm .cds-custom--menu-item{block-size:2rem}.cds-custom--menu--md .cds-custom--menu-item{block-size:2.5rem}.cds-custom--menu--lg .cds-custom--menu-item{block-size:3rem}.cds-custom--menu-item__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cds-custom--menu-item__shortcut{display:flex}.cds-custom--menu-item-group>ul,.cds-custom--menu-item-radio-group>ul{border:0;box-sizing:border-box;font-family:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline}.cds-custom--menu-item-group>ul *,.cds-custom--menu-item-group>ul :after,.cds-custom--menu-item-group>ul :before,.cds-custom--menu-item-radio-group>ul *,.cds-custom--menu-item-radio-group>ul :after,.cds-custom--menu-item-radio-group>ul :before{box-sizing:inherit}.cds-custom--menu-item__icon,.cds-custom--menu-item__selection-icon{display:none}.cds-custom--menu--with-icons>.cds-custom--menu-item,.cds-custom--menu--with-icons>.cds-custom--menu-item-group>ul>.cds-custom--menu-item,.cds-custom--menu--with-icons>.cds-custom--menu-item-radio-group>ul>.cds-custom--menu-item,.cds-custom--menu--with-selectable-items>.cds-custom--menu-item,.cds-custom--menu--with-selectable-items>.cds-custom--menu-item-group>ul>.cds-custom--menu-item,.cds-custom--menu--with-selectable-items>.cds-custom--menu-item-radio-group>ul>.cds-custom--menu-item{grid-template-columns:1rem 1fr max-content}.cds-custom--menu--with-icons>.cds-custom--menu-item-group>ul>.cds-custom--menu-item>.cds-custom--menu-item__icon,.cds-custom--menu--with-icons>.cds-custom--menu-item-radio-group>ul>.cds-custom--menu-item>.cds-custom--menu-item__icon,.cds-custom--menu--with-icons>.cds-custom--menu-item>.cds-custom--menu-item__icon,.cds-custom--menu--with-selectable-items>.cds-custom--menu-item-group>ul>.cds-custom--menu-item>.cds-custom--menu-item__selection-icon,.cds-custom--menu--with-selectable-items>.cds-custom--menu-item-radio-group>ul>.cds-custom--menu-item>.cds-custom--menu-item__selection-icon,.cds-custom--menu--with-selectable-items>.cds-custom--menu-item>.cds-custom--menu-item__selection-icon{display:flex}.cds-custom--menu--with-icons.cds-custom--menu--with-selectable-items>.cds-custom--menu-item,.cds-custom--menu--with-icons.cds-custom--menu--with-selectable-items>.cds-custom--menu-item-group>ul>.cds-custom--menu-item,.cds-custom--menu--with-icons.cds-custom--menu--with-selectable-items>.cds-custom--menu-item-radio-group>ul>.cds-custom--menu-item{grid-template-columns:1rem 1rem 1fr max-content}.cds-custom--menu-item--disabled{color:var(--cds-text-disabled,hsla(0,0%,9%,.25));cursor:not-allowed}.cds-custom--menu-item--disabled.cds-custom--menu-item--danger:hover,.cds-custom--menu-item--disabled:hover{background-color:var(--cds-layer);color:var(--cds-text-disabled,hsla(0,0%,9%,.25))}.cds-custom--menu-item--danger:focus,.cds-custom--menu-item--danger:hover{background-color:var(--cds-button-danger-primary,#da1e28);color:var(--cds-text-on-color,#fff)}.cds-custom--menu-item-divider{background-color:var(--cds-border-subtle);block-size:.0625rem;display:block;inline-size:100%;margin-block:.25rem}.cds-custom--menu--with-icons{--child-icon-property:flex;--child-grid-template-columns:1rem 1fr max-content}:host(cds-custom-menu){position:fixed;z-index:9000;--grid-template:1fr max-content;--display-icon-item:none;--display-selection-icon:none;--block-size-value:2rem}:host(cds-custom-menu):not([open]){pointer-events:none}.cds-custom--menu--with-icons{--grid-template:1rem 1fr max-content;--display-icon-item:flex}.cds-custom--menu--with-selectable-items{--grid-template:1rem 1fr max-content;--display-selection-icon:flex}.cds-custom--menu--with-icons.cds-custom--menu--with-selectable-items{--grid-template:1rem 1rem 1fr max-content}.cds-custom--menu{opacity:0;overflow-y:auto;pointer-events:none;visibility:hidden}.cds-custom--menu--shown{opacity:1}.cds-custom--menu--open{visibility:visible}.cds-custom--menu--open:focus{outline:1px solid var(--cds-focus,#0f62fe)}@media screen and (prefers-contrast){.cds-custom--menu--open:focus{outline-style:dotted}}.cds-custom--menu--open.cds-custom--menu--shown{pointer-events:auto}.cds-custom--menu--with-icons{min-inline-size:12rem}.cds-custom--menu--xs{--block-size-value:1.5rem}.cds-custom--menu--sm{--block-size-value:2rem}.cds-custom--menu--md{--block-size-value:2.5rem}.cds-custom--menu--lg{--block-size-value:3rem}"]);
-
 //#endregion
 export { menu_default as default };
+
 //# sourceMappingURL=menu.scss.js.map

package/es-custom/components/menu-button/defs.js

@@ -52,7 +52,7 @@ let MENU_BUTTON_KIND = /* @__PURE__ */ function(MENU_BUTTON_KIND) {
 	MENU_BUTTON_KIND["GHOST"] = "ghost";
 	return MENU_BUTTON_KIND;
 }({});
-
 //#endregion
 export { MENU_BUTTON_KIND, MENU_BUTTON_SIZE };
+
 //# sourceMappingURL=defs.js.map

package/es-custom/components/menu-button/defs.js.map

@@ -1 +1 @@
-{"version":3,"file":"defs.js","names":[],"sources":["../../../src/components/menu-button/defs.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2025, 2025\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/**\n * Menu button size.\n */\nexport enum MENU_BUTTON_SIZE {\n  /**\n   * Extra Small size\n   */\n  EXTRA_SMALL = 'xs',\n\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/**\n * menu button kind\n */\nexport enum MENU_BUTTON_KIND {\n  /**\n   * primary kind\n   */\n  PRIMARY = 'primary',\n  /**\n   * tertiary kind\n   */\n  TERTIARY = 'tertiary',\n  /**\n   * ghost kind\n   */\n  GHOST = 'ghost',\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAUA,IAAY,8DAAL;;;;AAIL;;;;AAKA;;;;AAKA;;;;AAKA;;;;;;AAKF,IAAY,8DAAL;;;;AAIL;;;;AAIA;;;;AAIA"}
+{"version":3,"file":"defs.js","names":[],"sources":["../../../src/components/menu-button/defs.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2025, 2025\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/**\n * Menu button size.\n */\nexport enum MENU_BUTTON_SIZE {\n  /**\n   * Extra Small size\n   */\n  EXTRA_SMALL = 'xs',\n\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/**\n * menu button kind\n */\nexport enum MENU_BUTTON_KIND {\n  /**\n   * primary kind\n   */\n  PRIMARY = 'primary',\n  /**\n   * tertiary kind\n   */\n  TERTIARY = 'tertiary',\n  /**\n   * ghost kind\n   */\n  GHOST = 'ghost',\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAUA,IAAY,mBAAL,yBAAA,kBAAA;;;;AAIL,kBAAA,iBAAA;;;;AAKA,kBAAA,WAAA;;;;AAKA,kBAAA,YAAA;;;;AAKA,kBAAA,WAAA;;KACD;;;;AAID,IAAY,mBAAL,yBAAA,kBAAA;;;;AAIL,kBAAA,aAAA;;;;AAIA,kBAAA,cAAA;;;;AAIA,kBAAA,WAAA;;KACD"}

package/es-custom/components/menu-button/menu-button.js

@@ -5,23 +5,22 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { prefix } from "../../globals/settings.js";
+import "../../globals/settings.js";
 import { carbonElement } from "../../globals/decorators/carbon-element.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.112.0/helpers/decorate.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
 import iconLoader from "../../globals/internal/icon-loader.js";
 import HostListener from "../../globals/decorators/host-listener.js";
 import HostListenerMixin from "../../globals/mixins/host-listener.js";
-import { POPOVER_ALIGNMENT } from "../popover/defs.js";
+import "../popover/defs.js";
 import FloatingController from "../../globals/controllers/floating-controller.js";
 import "../button/index.js";
 import menu_button_default$1 from "./menu-button.scss.js";
-import { MENU_BACKGROUND_TOKEN } from "../menu/defs.js";
+import "../menu/defs.js";
 import "../menu/index.js";
 import { MENU_BUTTON_KIND, MENU_BUTTON_SIZE } from "./defs.js";
 import { LitElement, html } from "lit";
 import { property, query } from "lit/decorators.js";
 import ChevronDown16 from "@carbon/icons/es/chevron--down/16.js";
-
 //#region src/components/menu-button/menu-button.ts
 /**
 * Copyright IBM Corp. 2025, 2025
@@ -38,11 +37,11 @@ let CDSMenuButton = class CDSMenuButton extends HostListenerMixin(LitElement) {
 		super(..._args);
 		this._menuController = new FloatingController(this);
 		this._open = false;
-		this.kind = MENU_BUTTON_KIND.PRIMARY;
-		this.menuAlignment = POPOVER_ALIGNMENT.BOTTOM;
+		this.kind = "primary";
+		this.menuAlignment = "bottom";
 		this.menuBorder = false;
-		this.menuBackgroundToken = MENU_BACKGROUND_TOKEN.LAYER;
-		this.size = MENU_BUTTON_SIZE.LARGE;
+		this.menuBackgroundToken = "layer";
+		this.size = "lg";
 		this.tabIndex = 0;
 		this._handleClick = (event) => {
 			const { _triggerNode: trigger } = this;
@@ -70,16 +69,16 @@ let CDSMenuButton = class CDSMenuButton extends HostListenerMixin(LitElement) {
 			}
 		};
 		this._handleMenuClosed = (event) => {
-			const menu = this.querySelector(`${prefix}-menu`);
+			const menu = this.querySelector(`cds-custom-menu`);
 			if (!menu || event.target !== menu || !this._open) return;
 			const shouldRestoreFocus = event.detail?.triggerEventType !== "focusout";
 			this._closeMenu({ restoreFocus: shouldRestoreFocus });
 		};
 	}
 	updated(changedProperties) {
-		const menu = this.querySelector(`${prefix}-menu`);
+		const menu = this.querySelector(`cds-custom-menu`);
 		if (changedProperties.has("_open") || changedProperties.has("menuAlignment")) this.updateComplete.then(() => {
-			const styleElement = menu.shadowRoot?.querySelector(`.${prefix}--menu`);
+			const styleElement = menu.shadowRoot?.querySelector(`.cds-custom--menu`);
 			menu.open = this._open;
 			this._menuController.setPlacement({
 				trigger: this._triggerNode,
@@ -120,7 +119,7 @@ let CDSMenuButton = class CDSMenuButton extends HostListenerMixin(LitElement) {
 		this._triggerNode.focus();
 	}
 };
-__decorate([query(`${prefix}-button`)], CDSMenuButton.prototype, "_triggerNode", void 0);
+__decorate([query(`cds-custom-button`)], CDSMenuButton.prototype, "_triggerNode", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true
@@ -162,10 +161,10 @@ __decorate([HostListener("click")], CDSMenuButton.prototype, "_handleClick", voi
 __decorate([HostListener("mousedown")], CDSMenuButton.prototype, "_handleMousedown", void 0);
 __decorate([HostListener("focusout")], CDSMenuButton.prototype, "_handleBlur", void 0);
 __decorate([HostListener("keydown")], CDSMenuButton.prototype, "_handleKeydown", void 0);
-__decorate([HostListener(`${prefix}-menu-closed`)], CDSMenuButton.prototype, "_handleMenuClosed", void 0);
-CDSMenuButton = __decorate([carbonElement(`${prefix}-menu-button`)], CDSMenuButton);
+__decorate([HostListener(`cds-custom-menu-closed`)], CDSMenuButton.prototype, "_handleMenuClosed", void 0);
+CDSMenuButton = __decorate([carbonElement(`cds-custom-menu-button`)], CDSMenuButton);
 var menu_button_default = CDSMenuButton;
-
 //#endregion
 export { MENU_BUTTON_KIND, MENU_BUTTON_SIZE, menu_button_default as default };
+
 //# sourceMappingURL=menu-button.js.map

package/es-custom/components/menu-button/menu-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-button.js","names":["FloatingUIController","styles","customElement"],"sources":["../../../src/components/menu-button/menu-button.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2025, 2025\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport styles from './menu-button.scss?lit';\nimport '../button/index';\nimport '../menu/index';\nimport ChevronDown16 from '@carbon/icons/es/chevron--down/16.js';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport { POPOVER_ALIGNMENT } from '../popover/defs';\nimport CDSMenu from '../menu/menu';\nimport CDSButton from '../button/button';\nimport { MENU_BUTTON_KIND, MENU_BUTTON_SIZE } from './defs';\nimport { MENU_BACKGROUND_TOKEN } from '../menu/defs';\nimport FloatingUIController from '../../globals/controllers/floating-controller';\n\nexport { MENU_BUTTON_KIND, MENU_BUTTON_SIZE };\n\n/**\n * Menu button.\n * @element cds-custom-menu-button\n */\n@customElement(`${prefix}-menu-button`)\nclass CDSMenuButton extends HostListenerMixin(LitElement) {\n  private _menuController = new FloatingUIController(this);\n\n  @query(`${prefix}-button`)\n  _triggerNode!: CDSButton;\n\n  @property({ type: Boolean, reflect: true })\n  private _open = false;\n\n  /**\n   * Specify whether the MenuButton should be disabled, or not.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled;\n\n  /**\n   * Specify the type of button to be used as the base for the trigger button.\n   */\n  @property({ type: MENU_BUTTON_KIND, reflect: true })\n  kind = MENU_BUTTON_KIND.PRIMARY;\n\n  /**\n   * Provide the label to be rendered on the trigger button.\n   */ @property({ type: String })\n  label;\n\n  /**\n   * Experimental property. Specify how the menu should align with the button element\n   */\n  @property({ reflect: true, type: String, attribute: 'menu-alignment' })\n  menuAlignment = POPOVER_ALIGNMENT.BOTTOM;\n\n  /**\n   * Specify whether the menu should have a border.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'menu-border' })\n  menuBorder = false;\n\n  /**\n   * Specify the background token to use for the menu. Default is 'layer'.\n   */\n  @property({ type: String, reflect: true, attribute: 'menu-background-token' })\n  menuBackgroundToken = MENU_BACKGROUND_TOKEN.LAYER;\n\n  /**\n   * Specify the size of the button and menu.\n   */\n  @property({ type: MENU_BUTTON_SIZE, reflect: true })\n  size = MENU_BUTTON_SIZE.LARGE;\n\n  /**\n   * Specify the tabIndex of the button.\n   */\n  @property({ type: Number, attribute: 'tab-index', reflect: true })\n  tabIndex = 0;\n\n  @HostListener('click')\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  private _handleClick = (event: Event) => {\n    const { _triggerNode: trigger } = this;\n    if (!trigger) {\n      return;\n    }\n\n    const path = event.composedPath();\n    if (path.includes(trigger)) {\n      if (this._open) {\n        this._closeMenu({ restoreFocus: true });\n      } else {\n        this._open = true;\n      }\n    } else if (this._open) {\n      this._closeMenu();\n    }\n  };\n\n  @HostListener('mousedown')\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  private _handleMousedown = (event: MouseEvent) => {\n    const { _triggerNode: trigger } = this;\n    if (!trigger) {\n      return;\n    }\n\n    const path = event.composedPath();\n    if (path.includes(trigger)) {\n      event.preventDefault();\n    }\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  private _handleBlur = ({ relatedTarget }: FocusEvent) => {\n    // Close the menu if the focus moves outside the menu button or menu\n    if (!this.contains(relatedTarget as Node)) {\n      this._closeMenu();\n    }\n  };\n\n  @HostListener('keydown')\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  private _handleKeydown = (event: KeyboardEvent) => {\n    if (!this._open || event.key !== 'Escape') {\n      return;\n    }\n\n    const { _triggerNode: trigger } = this;\n    if (!trigger) {\n      return;\n    }\n\n    const path = event.composedPath();\n    if (path.includes(trigger)) {\n      event.stopPropagation();\n      event.preventDefault();\n      this._closeMenu({ restoreFocus: true });\n    }\n  };\n\n  @HostListener(`${prefix}-menu-closed`)\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  private _handleMenuClosed = (\n    event: CustomEvent<{ triggerEventType?: string }>\n  ) => {\n    const menu = this.querySelector(`${prefix}-menu`);\n    if (!menu || event.target !== menu || !this._open) {\n      return;\n    }\n\n    const shouldRestoreFocus = event.detail?.triggerEventType !== 'focusout';\n    this._closeMenu({ restoreFocus: shouldRestoreFocus });\n  };\n\n  updated(changedProperties) {\n    const menu = this.querySelector(`${prefix}-menu`) as CDSMenu;\n\n    if (\n      changedProperties.has('_open') ||\n      changedProperties.has('menuAlignment')\n    ) {\n      this.updateComplete.then(() => {\n        const styleElement = menu.shadowRoot?.querySelector(\n          `.${prefix}--menu`\n        ) as HTMLElement;\n\n        menu.open = this._open;\n\n        this._menuController.setPlacement({\n          trigger: this._triggerNode,\n          target: menu,\n          alignment: this.menuAlignment,\n          styleElement,\n          matchWidth: true,\n          open: this._open,\n        });\n      });\n    }\n\n    if (changedProperties.has('size')) {\n      menu.setAttribute('size', this.size);\n    }\n\n    if (changedProperties.has('menuBorder')) {\n      menu.toggleAttribute('border', this.menuBorder);\n    }\n\n    if (changedProperties.has('menuBackgroundToken')) {\n      menu.backgroundToken = this.menuBackgroundToken;\n    }\n  }\n\n  render() {\n    const { kind, size, disabled, tabIndex, label } = this;\n    return html`\n      <cds-custom-button\n        kind=${kind}\n        size=${size}\n        ?disabled=${disabled}\n        tab-index=${tabIndex}>\n        ${label} ${iconLoader(ChevronDown16, { slot: 'icon' })}\n      </cds-custom-button>\n      <slot></slot>\n    `;\n  }\n\n  static styles = styles;\n\n  private _closeMenu({\n    restoreFocus = false,\n  }: { restoreFocus?: boolean } = {}) {\n    if (!this._open) {\n      return;\n    }\n\n    this._open = false;\n\n    if (restoreFocus) {\n      this._focusTrigger();\n    }\n  }\n\n  private _focusTrigger() {\n    if (!this._triggerNode || typeof this._triggerNode.focus !== 'function') {\n      return;\n    }\n\n    this._triggerNode.focus();\n  }\n}\n\nexport default CDSMenuButton;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,0BACM,sBAAsB,kBAAkB,WAAW,CAAC;;;yBAC9B,IAAIA,mBAAqB,KAAK;eAMxC;cAYT,iBAAiB;uBAWR,kBAAkB;oBAMrB;6BAMS,sBAAsB;cAMrC,iBAAiB;kBAMb;uBAKa,UAAiB;GACvC,MAAM,EAAE,cAAc,YAAY;AAClC,OAAI,CAAC,QACH;AAIF,OADa,MAAM,cAAc,CACxB,SAAS,QAAQ,CACxB,KAAI,KAAK,MACP,MAAK,WAAW,EAAE,cAAc,MAAM,CAAC;OAEvC,MAAK,QAAQ;YAEN,KAAK,MACd,MAAK,YAAY;;2BAOO,UAAsB;GAChD,MAAM,EAAE,cAAc,YAAY;AAClC,OAAI,CAAC,QACH;AAIF,OADa,MAAM,cAAc,CACxB,SAAS,QAAQ,CACxB,OAAM,gBAAgB;;sBAOH,EAAE,oBAAgC;AAEvD,OAAI,CAAC,KAAK,SAAS,cAAsB,CACvC,MAAK,YAAY;;yBAOK,UAAyB;AACjD,OAAI,CAAC,KAAK,SAAS,MAAM,QAAQ,SAC/B;GAGF,MAAM,EAAE,cAAc,YAAY;AAClC,OAAI,CAAC,QACH;AAIF,OADa,MAAM,cAAc,CACxB,SAAS,QAAQ,EAAE;AAC1B,UAAM,iBAAiB;AACvB,UAAM,gBAAgB;AACtB,SAAK,WAAW,EAAE,cAAc,MAAM,CAAC;;;4BAQzC,UACG;GACH,MAAM,OAAO,KAAK,cAAc,GAAG,OAAO,OAAO;AACjD,OAAI,CAAC,QAAQ,MAAM,WAAW,QAAQ,CAAC,KAAK,MAC1C;GAGF,MAAM,qBAAqB,MAAM,QAAQ,qBAAqB;AAC9D,QAAK,WAAW,EAAE,cAAc,oBAAoB,CAAC;;;CAGvD,QAAQ,mBAAmB;EACzB,MAAM,OAAO,KAAK,cAAc,GAAG,OAAO,OAAO;AAEjD,MACE,kBAAkB,IAAI,QAAQ,IAC9B,kBAAkB,IAAI,gBAAgB,CAEtC,MAAK,eAAe,WAAW;GAC7B,MAAM,eAAe,KAAK,YAAY,cACpC,IAAI,OAAO,QACZ;AAED,QAAK,OAAO,KAAK;AAEjB,QAAK,gBAAgB,aAAa;IAChC,SAAS,KAAK;IACd,QAAQ;IACR,WAAW,KAAK;IAChB;IACA,YAAY;IACZ,MAAM,KAAK;IACZ,CAAC;IACF;AAGJ,MAAI,kBAAkB,IAAI,OAAO,CAC/B,MAAK,aAAa,QAAQ,KAAK,KAAK;AAGtC,MAAI,kBAAkB,IAAI,aAAa,CACrC,MAAK,gBAAgB,UAAU,KAAK,WAAW;AAGjD,MAAI,kBAAkB,IAAI,sBAAsB,CAC9C,MAAK,kBAAkB,KAAK;;CAIhC,SAAS;EACP,MAAM,EAAE,MAAM,MAAM,UAAU,UAAU,UAAU;AAClD,SAAO,IAAI;;eAEA,KAAK;eACL,KAAK;oBACA,SAAS;oBACT,SAAS;UACnB,MAAM,GAAG,WAAW,eAAe,EAAE,MAAM,QAAQ,CAAC,CAAC;;;;;;gBAM7CC;;CAEhB,AAAQ,WAAW,EACjB,eAAe,UACe,EAAE,EAAE;AAClC,MAAI,CAAC,KAAK,MACR;AAGF,OAAK,QAAQ;AAEb,MAAI,aACF,MAAK,eAAe;;CAIxB,AAAQ,gBAAgB;AACtB,MAAI,CAAC,KAAK,gBAAgB,OAAO,KAAK,aAAa,UAAU,WAC3D;AAGF,OAAK,aAAa,OAAO;;;YAhN1B,MAAM,GAAG,OAAO,SAAS;YAGzB,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC;YAM1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC;YAM1C,SAAS;CAAE,MAAM;CAAkB,SAAS;CAAM,CAAC;YAK/C,SAAS,EAAE,MAAM,QAAQ,CAAC;YAM9B,SAAS;CAAE,SAAS;CAAM,MAAM;CAAQ,WAAW;CAAkB,CAAC;YAMtE,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;CAAe,CAAC;YAMpE,SAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,WAAW;CAAyB,CAAC;YAM7E,SAAS;CAAE,MAAM;CAAkB,SAAS;CAAM,CAAC;YAMnD,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAa,SAAS;CAAM,CAAC;YAGjE,aAAa,QAAQ;YAqBrB,aAAa,YAAY;YAezB,aAAa,WAAW;YAUxB,aAAa,UAAU;YAqBvB,aAAa,GAAG,OAAO,cAAc;4BA5HvCC,cAAc,GAAG,OAAO,cAAc;AAwNvC,0BAAe"}
+{"version":3,"file":"menu-button.js","names":["FloatingUIController","styles","customElement"],"sources":["../../../src/components/menu-button/menu-button.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2025, 2025\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport styles from './menu-button.scss?lit';\nimport '../button/index';\nimport '../menu/index';\nimport ChevronDown16 from '@carbon/icons/es/chevron--down/16.js';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport { POPOVER_ALIGNMENT } from '../popover/defs';\nimport CDSMenu from '../menu/menu';\nimport CDSButton from '../button/button';\nimport { MENU_BUTTON_KIND, MENU_BUTTON_SIZE } from './defs';\nimport { MENU_BACKGROUND_TOKEN } from '../menu/defs';\nimport FloatingUIController from '../../globals/controllers/floating-controller';\n\nexport { MENU_BUTTON_KIND, MENU_BUTTON_SIZE };\n\n/**\n * Menu button.\n * @element cds-custom-menu-button\n */\n@customElement(`${prefix}-menu-button`)\nclass CDSMenuButton extends HostListenerMixin(LitElement) {\n  private _menuController = new FloatingUIController(this);\n\n  @query(`${prefix}-button`)\n  _triggerNode!: CDSButton;\n\n  @property({ type: Boolean, reflect: true })\n  private _open = false;\n\n  /**\n   * Specify whether the MenuButton should be disabled, or not.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled;\n\n  /**\n   * Specify the type of button to be used as the base for the trigger button.\n   */\n  @property({ type: MENU_BUTTON_KIND, reflect: true })\n  kind = MENU_BUTTON_KIND.PRIMARY;\n\n  /**\n   * Provide the label to be rendered on the trigger button.\n   */ @property({ type: String })\n  label;\n\n  /**\n   * Experimental property. Specify how the menu should align with the button element\n   */\n  @property({ reflect: true, type: String, attribute: 'menu-alignment' })\n  menuAlignment = POPOVER_ALIGNMENT.BOTTOM;\n\n  /**\n   * Specify whether the menu should have a border.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'menu-border' })\n  menuBorder = false;\n\n  /**\n   * Specify the background token to use for the menu. Default is 'layer'.\n   */\n  @property({ type: String, reflect: true, attribute: 'menu-background-token' })\n  menuBackgroundToken = MENU_BACKGROUND_TOKEN.LAYER;\n\n  /**\n   * Specify the size of the button and menu.\n   */\n  @property({ type: MENU_BUTTON_SIZE, reflect: true })\n  size = MENU_BUTTON_SIZE.LARGE;\n\n  /**\n   * Specify the tabIndex of the button.\n   */\n  @property({ type: Number, attribute: 'tab-index', reflect: true })\n  tabIndex = 0;\n\n  @HostListener('click')\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  private _handleClick = (event: Event) => {\n    const { _triggerNode: trigger } = this;\n    if (!trigger) {\n      return;\n    }\n\n    const path = event.composedPath();\n    if (path.includes(trigger)) {\n      if (this._open) {\n        this._closeMenu({ restoreFocus: true });\n      } else {\n        this._open = true;\n      }\n    } else if (this._open) {\n      this._closeMenu();\n    }\n  };\n\n  @HostListener('mousedown')\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  private _handleMousedown = (event: MouseEvent) => {\n    const { _triggerNode: trigger } = this;\n    if (!trigger) {\n      return;\n    }\n\n    const path = event.composedPath();\n    if (path.includes(trigger)) {\n      event.preventDefault();\n    }\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  private _handleBlur = ({ relatedTarget }: FocusEvent) => {\n    // Close the menu if the focus moves outside the menu button or menu\n    if (!this.contains(relatedTarget as Node)) {\n      this._closeMenu();\n    }\n  };\n\n  @HostListener('keydown')\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  private _handleKeydown = (event: KeyboardEvent) => {\n    if (!this._open || event.key !== 'Escape') {\n      return;\n    }\n\n    const { _triggerNode: trigger } = this;\n    if (!trigger) {\n      return;\n    }\n\n    const path = event.composedPath();\n    if (path.includes(trigger)) {\n      event.stopPropagation();\n      event.preventDefault();\n      this._closeMenu({ restoreFocus: true });\n    }\n  };\n\n  @HostListener(`${prefix}-menu-closed`)\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  private _handleMenuClosed = (\n    event: CustomEvent<{ triggerEventType?: string }>\n  ) => {\n    const menu = this.querySelector(`${prefix}-menu`);\n    if (!menu || event.target !== menu || !this._open) {\n      return;\n    }\n\n    const shouldRestoreFocus = event.detail?.triggerEventType !== 'focusout';\n    this._closeMenu({ restoreFocus: shouldRestoreFocus });\n  };\n\n  updated(changedProperties) {\n    const menu = this.querySelector(`${prefix}-menu`) as CDSMenu;\n\n    if (\n      changedProperties.has('_open') ||\n      changedProperties.has('menuAlignment')\n    ) {\n      this.updateComplete.then(() => {\n        const styleElement = menu.shadowRoot?.querySelector(\n          `.${prefix}--menu`\n        ) as HTMLElement;\n\n        menu.open = this._open;\n\n        this._menuController.setPlacement({\n          trigger: this._triggerNode,\n          target: menu,\n          alignment: this.menuAlignment,\n          styleElement,\n          matchWidth: true,\n          open: this._open,\n        });\n      });\n    }\n\n    if (changedProperties.has('size')) {\n      menu.setAttribute('size', this.size);\n    }\n\n    if (changedProperties.has('menuBorder')) {\n      menu.toggleAttribute('border', this.menuBorder);\n    }\n\n    if (changedProperties.has('menuBackgroundToken')) {\n      menu.backgroundToken = this.menuBackgroundToken;\n    }\n  }\n\n  render() {\n    const { kind, size, disabled, tabIndex, label } = this;\n    return html`\n      <cds-custom-button\n        kind=${kind}\n        size=${size}\n        ?disabled=${disabled}\n        tab-index=${tabIndex}>\n        ${label} ${iconLoader(ChevronDown16, { slot: 'icon' })}\n      </cds-custom-button>\n      <slot></slot>\n    `;\n  }\n\n  static styles = styles;\n\n  private _closeMenu({\n    restoreFocus = false,\n  }: { restoreFocus?: boolean } = {}) {\n    if (!this._open) {\n      return;\n    }\n\n    this._open = false;\n\n    if (restoreFocus) {\n      this._focusTrigger();\n    }\n  }\n\n  private _focusTrigger() {\n    if (!this._triggerNode || typeof this._triggerNode.focus !== 'function') {\n      return;\n    }\n\n    this._triggerNode.focus();\n  }\n}\n\nexport default CDSMenuButton;\n"],"mappings":"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"}