@carbon/web-components 2.56.0-rc.0 → 2.57.0-rc.0

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

@@ -1 +1 @@
-{"version":3,"file":"multi-select.scss.js","names":[],"sources":["../../../src/components/multi-select/multi-select.scss?lit"],"sourcesContent":["//\n// Copyright IBM Corp. 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$css--plex: true !default;\n\n@use '@carbon/styles/scss/config' as *;\n@use '@carbon/styles/scss/theme' as *;\n@use '@carbon/styles/scss/spacing' as *;\n@use '@carbon/styles/scss/utilities' as *;\n@use '@carbon/styles/scss/components/list-box/list-box';\n@use '@carbon/styles/scss/components/multiselect/index';\n@use '@carbon/styles/scss/components/form';\n@use '@carbon/styles/scss/components/checkbox';\n@use '@carbon/styles/scss/components/tag';\n@use '@carbon/styles/scss/utilities/convert';\n\n:host(#{$prefix}-multi-select) {\n  box-sizing: border-box;\n  outline: none;\n\n  .#{$prefix}--assistive-text {\n    inset-block-start: -100%;\n    // Hides screen reader cursor\n    inset-inline-start: -100%;\n  }\n\n  .#{$prefix}--label[hidden] {\n    display: none;\n  }\n\n  .#{$prefix}--list-box__menu {\n    inset-block-start: 100%;\n    margin-block-start: 1px;\n    outline: none;\n  }\n\n  .#{$prefix}--text-input {\n    border: none;\n    padding-inline-start: 0;\n\n    &:focus {\n      outline: none;\n    }\n  }\n\n  .#{$prefix}--tag--disabled {\n    @extend .#{$prefix}--tag--disabled;\n\n    background-color: transparent;\n    color: $text-disabled;\n  }\n\n  .#{$prefix}--list-box__field:focus {\n    @extend .#{$prefix}--multi-select--filterable--input-focused;\n  }\n\n  /* stylelint-disable declaration-no-important */\n  .#{$prefix}--list-box__selection--multi::after {\n    display: none !important;\n  }\n}\n\n:host(#{$prefix}-multi-select[filterable]) {\n  .#{$prefix}--list-box__field:focus-within {\n    outline: $spacing-01 solid $focus;\n    outline-offset: -#{$spacing-01};\n  }\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: $spacing-01;\n    }\n  }\n}\n:host(#{$prefix}-multi-select[filterable][has-value])\n  .#{$prefix}--list-box__field\n  ~ ::slotted(#{$prefix}-ai-label) {\n  inset-inline-end: calc($spacing-10 + 18px);\n}\n\n:host(#{$prefix}-multi-select[direction='top']) {\n  @extend .#{$prefix}--list-box--up;\n\n  .#{$prefix}--list-box__menu {\n    inset-block-start: auto;\n  }\n}\n\n:host(#{$prefix}-multi-select[invalid]:not([disabled]):not([read-only])) {\n  .#{$prefix}--form__helper-text {\n    color: $text-error;\n  }\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: $spacing-10;\n    }\n  }\n}\n\n:host(#{$prefix}-multi-select[type='inline']) {\n  @extend .#{$prefix}--list-box__wrapper--inline;\n\n  grid-gap: 0 $spacing-03;\n  .#{$prefix}--form__helper-text {\n    grid-column: 3;\n  }\n}\n\n:host(#{$prefix}-multi-select[type='inline'][warn])\n  .#{$prefix}--list-box__field {\n  padding-inline-end: rem(56px);\n}\n\n:host(#{$prefix}-multi-select-item) {\n  @extend .#{$prefix}--list-box__menu-item;\n\n  display: block;\n\n  #{$prefix}-checkbox::part(label) {\n    display: inline-block;\n    overflow: hidden;\n    inline-size: 100%;\n    padding-inline-start: rem(28px);\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .#{$prefix}--list-box__menu-item__option {\n    box-sizing: border-box;\n\n    .#{$prefix}--checkbox-wrapper {\n      display: flex;\n      align-items: center;\n      block-size: 100%;\n      inline-size: 100%;\n    }\n\n    > .#{$prefix}--form-item {\n      flex-direction: row;\n    }\n  }\n  // make the checkbox element transparent to mouse events so it doesn't interfere\n  #{$prefix}-checkbox {\n    pointer-events: none;\n  }\n}\n\n:host(#{$prefix}-multi-select-item:hover) {\n  background-color: $layer-hover;\n}\n\n:host(#{$prefix}-multi-select-item[filtered]) {\n  display: none;\n}\n\n:host(#{$prefix}-multi-select-item[size='sm']) {\n  block-size: fit-content;\n  .#{$prefix}--list-box__menu-item__option {\n    block-size: $spacing-07;\n    padding-block: rem(7px);\n  }\n}\n\n:host(#{$prefix}-multi-select-item[size='lg']) {\n  block-size: fit-content;\n  .#{$prefix}--list-box__menu-item__option {\n    block-size: $spacing-09;\n    padding-block: rem(15px);\n  }\n}\n\n:host(#{$prefix}-multi-select-item[disabled]) {\n  cursor: not-allowed;\n  .#{$prefix}--list-box__menu-item__option {\n    color: $text-disabled;\n    text-decoration: none;\n  }\n}\n\n:host(#{$prefix}-multi-select-item[highlighted]) {\n  @extend .#{$prefix}--list-box__menu-item--highlighted;\n}\n\n:host(#{$prefix}-multi-select-item[selected]) {\n  @extend .#{$prefix}--list-box__menu-item--active;\n\n  .#{$prefix}--list-box__menu-item__option {\n    color: $text-primary;\n  }\n}\n\n:host(#{$prefix}-multi-select[ai-label]) {\n  @extend .#{$prefix}--list-box__wrapper--slug;\n\n  ::slotted(#{$prefix}-ai-label),\n  ::slotted(#{$prefix}-slug) {\n    position: absolute;\n    inset-block-start: 50%;\n    inset-inline-end: calc($spacing-08 + 9px);\n    margin-block-start: convert.to-rem(0.5px);\n  }\n\n  ::slotted(#{$prefix}-ai-label:not([revert-active])),\n  ::slotted(#{$prefix}-slug:not([revert-active])) {\n    transform: translateY(-50%);\n  }\n}\n\n:host(#{$prefix}-multi-select[ai-label][warn]),\n:host(#{$prefix}-multi-select[ai-label][invalid]) {\n  .#{$prefix}--list-box__invalid-icon {\n    inset-inline-end: convert.to-rem(81px);\n  }\n}\n\n:host(#{$prefix}-multi-select[ai-label]) ::slotted(#{$prefix}-ai-label)::after {\n  position: absolute;\n  display: block;\n  background-color: $border-subtle-01;\n  block-size: $spacing-05;\n  content: '';\n  inline-size: convert.to-rem(1px);\n  inset-block-start: 0;\n  inset-inline-end: convert.to-rem(-9px);\n}\n\n:host(#{$prefix}-multi-select[filterable][warn][has-value]),\n:host(#{$prefix}-multi-select[filterable][invalid][has-value]) {\n  .#{$prefix}--list-box__invalid-icon {\n    inset-inline-end: rem(78px);\n  }\n\n  .#{$prefix}--list-box__selection#clear-button::before {\n    position: absolute;\n    display: block;\n    background-color: $border-subtle-01;\n    block-size: $spacing-05;\n    content: '';\n    inline-size: rem(1px);\n    inset-inline-end: rem(27px);\n  }\n}\n\n// pad space to account for text-input, placeholder and selections\n\n:host(#{$prefix}-multi-select[filterable])\n  .#{$prefix}--multi-select--selected\n  .#{$prefix}--list-box__field\n  .#{$prefix}--text-input {\n  padding-inline-end: rem(45px);\n}\n\n:host(#{$prefix}-multi-select[filterable][invalid][value='']) {\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: $spacing-01;\n    }\n  }\n}\n\n:host(#{$prefix}-multi-select[filterable][invalid]),\n:host(#{$prefix}-multi-select[filterable][warn]) {\n  .#{$prefix}--multi-select--selected\n    .#{$prefix}--list-box__field\n    .#{$prefix}--text-input {\n    padding-inline-end: 0;\n  }\n  .#{$prefix}--multi-select--selected\n    .#{$prefix}--list-box__field\n    .#{$prefix}--list-box__invalid-icon {\n    inset-inline-end: $spacing-08;\n  }\n}\n\n:host(#{$prefix}-multi-select[filterable][warn][value='']) {\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: $spacing-05;\n    }\n  }\n}\n:host(#{$prefix}-multi-select[filterable][ai-label][value='']) {\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: $spacing-03;\n    }\n  }\n}\n\n:host(#{$prefix}-multi-select[filterable][ai-label][has-value]) {\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: rem(43px);\n    }\n  }\n  .#{$prefix}--multi-select--selected\n    .#{$prefix}--list-box__field\n    .#{$prefix}--text-input {\n    padding-inline-end: $spacing-10;\n  }\n}\n\n:host(#{$prefix}-multi-select[filterable][invalid][has-value]) {\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: $spacing-08;\n    }\n  }\n  .#{$prefix}--multi-select--selected\n    .#{$prefix}--list-box__field\n    .#{$prefix}--text-input {\n    padding-inline-end: $spacing-10;\n  }\n  .#{$prefix}--multi-select--selected\n    .#{$prefix}--list-box__field\n    .#{$prefix}--list-box__invalid-icon {\n    inset-inline-end: $spacing-11;\n  }\n}\n\n:host(#{$prefix}-multi-select[filterable][warn][has-value]) {\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: rem(55px);\n    }\n  }\n  .#{$prefix}--multi-select--selected\n    .#{$prefix}--list-box__field\n    .#{$prefix}--text-input {\n    padding-inline-end: $spacing-09;\n  }\n  .#{$prefix}--multi-select--selected\n    .#{$prefix}--list-box__field\n    .#{$prefix}--list-box__invalid-icon {\n    inset-inline-end: $spacing-11;\n  }\n}\n\n:host(#{$prefix}-multi-select[ai-label]) {\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: rem(75px);\n    }\n  }\n}\n\n:host(#{$prefix}-multi-select[filterable][ai-label])\n  .#{$prefix}--multi-select--selected\n  .#{$prefix}--list-box__field\n  .#{$prefix}--text-input {\n  padding-inline-end: 0;\n}\n\n:host(#{$prefix}-multi-select[filterable][has-value]) {\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: $spacing-06;\n    }\n  }\n  .#{$prefix}--multi-select--selected\n    .#{$prefix}--list-box__field\n    .#{$prefix}--text-input {\n    padding-inline-end: rem(45px);\n  }\n}\n\n:host(#{$prefix}-multi-select[ai-label][invalid]),\n:host(#{$prefix}-multi-select[ai-label][warn]) {\n  ::slotted(#{$prefix}-ai-label)::before {\n    position: absolute;\n    display: block;\n    background-color: $border-subtle-01;\n    block-size: $spacing-05;\n    content: '';\n    inline-size: convert.to-rem(1px);\n    inset-block-start: 0;\n    inset-inline-end: convert.to-rem(24px);\n  }\n}\n\n:host(#{$prefix}-multi-select[ai-label][warn]),\n:host(#{$prefix}-multi-select[ai-label][invalid]),\n:host(#{$prefix}-multi-select[ai-label][warn][filterable]),\n:host(#{$prefix}-multi-select[ai-label][invalid][filterable]) {\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: $spacing-07;\n    }\n  }\n  .#{$prefix}--list-box__field .#{$prefix}--list-box__invalid-icon {\n    inset-inline-end: rem(81px);\n  }\n  .#{$prefix}--multi-select--selected\n    .#{$prefix}--list-box__field\n    .#{$prefix}--text-input {\n    padding-inline-end: rem(70px);\n  }\n}\n\n:host(#{$prefix}-multi-select[filterable][ai-label][warn][has-value]),\n:host(#{$prefix}-multi-select[filterable][ai-label][invalid][has-value]) {\n  .#{$prefix}--list-box__invalid-icon {\n    inset-inline-end: rem(114px);\n  }\n\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: rem(75px);\n    }\n  }\n\n  .#{$prefix}--multi-select--selected\n    .#{$prefix}--list-box__field\n    .#{$prefix}--text-input {\n    padding-inline-end: rem(65px);\n  }\n  .#{$prefix}--multi-select--selected\n    .#{$prefix}--list-box__field\n    .#{$prefix}--list-box__invalid-icon {\n    inset-inline-end: rem(114px);\n  }\n}\n\n:host(#{$prefix}-multi-select[ai-label][invalid]),\n:host(#{$prefix}-multi-select[ai-label][warn]) {\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: rem(100px);\n    }\n  }\n  .#{$prefix}--multi-select--selected .#{$prefix}--list-box__field {\n    padding-inline-end: rem(105px);\n  }\n}\n\n// When select all is turned on, the first item in the listbox\n// is always the \"Select all\" option and gets special border\n// treatment\n:host(#{$prefix}-multi-select-item[is-select-all]) {\n  .#{$prefix}--list-box__menu-item__option {\n    padding: 0.6875rem $spacing-05;\n    margin: 0;\n    border-block-end: 1px solid $border-subtle-01;\n  }\n}\n\n// When select all is turned on, the second item in the list\n// has special treatment to look correct against the \"Select all\"\n// border treatment, this second item (index=1) gets a `flush-top` attribute\n// so that we can remove its top border.\n:host(#{$prefix}-multi-select-item[flush-top])\n  .#{$prefix}--list-box__menu-item__option {\n  border-block-start: none;\n}\n\n// remove focus outline for when the label is out of focus\n:host(#{$prefix}-multi-select)\n  .#{$prefix}--list-box__field.no-focus-style:focus,\n:host(#{$prefix}-multi-select)\n  .#{$prefix}--list-box__field.no-focus-style:focus-within {\n  outline: none;\n}\n\n:host(#{$prefix}-multi-select[ai-label])\n  .#{$prefix}--list-box__wrapper--decorator {\n  @include ai-gradient;\n}\n\n:host(#{$prefix}-multi-select[item-clicked]),\n:host(#{$prefix}-multi-select[has-value]) {\n  .#{$prefix}--list-box__field,\n  .#{$prefix}--multi-select--invalid {\n    outline: 1px solid $focus !important;\n    outline-offset: -1px !important;\n  }\n}\n\n:host(\n    #{$prefix}-multi-select[warn]:not([invalid]):not([ai-label]):not(\n        [disabled]\n      ):not([read-only])\n  ) {\n  .#{$prefix}--form__helper-text {\n    color: $text-primary;\n  }\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: $spacing-10;\n    }\n  }\n}\n\n:host(\n    #{$prefix}-multi-select[warn][invalid]:not([ai-label]):not([disabled]):not(\n        [read-only]\n      )\n  ) {\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: $spacing-10;\n    }\n  }\n}\n\n:host(#{$prefix}-multi-select[disabled]) {\n  .#{$prefix}--list-box__field,\n  .#{$prefix}--list-box__selection {\n    pointer-events: none;\n  }\n  .#{$prefix}--list-box__field:focus,\n  .#{$prefix}--list-box__selection:focus {\n    outline: none !important;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"multi-select.scss.js","names":[],"sources":["../../../src/components/multi-select/multi-select.scss?lit"],"sourcesContent":["//\n// Copyright IBM Corp. 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$css--plex: true !default;\n\n@use '@carbon/styles/scss/config' as *;\n@use '@carbon/styles/scss/theme' as *;\n@use '@carbon/styles/scss/spacing' as *;\n@use '@carbon/styles/scss/utilities' as *;\n@use '@carbon/styles/scss/components/list-box/list-box';\n@use '@carbon/styles/scss/components/multiselect/index';\n@use '@carbon/styles/scss/components/form';\n@use '@carbon/styles/scss/components/checkbox';\n@use '@carbon/styles/scss/components/tag';\n@use '@carbon/styles/scss/utilities/convert';\n@use '@carbon/styles/scss/layout' as *;\n\n:host(#{$prefix}-multi-select) {\n  @include emit-layout-tokens();\n\n  box-sizing: border-box;\n  outline: none;\n\n  .#{$prefix}--assistive-text {\n    inset-block-start: -100%;\n    // Hides screen reader cursor\n    inset-inline-start: -100%;\n  }\n\n  .#{$prefix}--label[hidden] {\n    display: none;\n  }\n\n  .#{$prefix}--list-box__menu {\n    inset-block-start: 100%;\n    margin-block-start: 1px;\n    outline: none;\n  }\n\n  .#{$prefix}--text-input {\n    border: none;\n    padding-inline-start: 0;\n\n    &:focus {\n      outline: none;\n    }\n  }\n\n  .#{$prefix}--tag--disabled {\n    @extend .#{$prefix}--tag--disabled;\n\n    background-color: transparent;\n    color: $text-disabled;\n  }\n\n  .#{$prefix}--list-box__field:focus {\n    @extend .#{$prefix}--multi-select--filterable--input-focused;\n  }\n\n  /* stylelint-disable declaration-no-important */\n  .#{$prefix}--list-box__selection--multi::after {\n    display: none !important;\n  }\n}\n\n:host(#{$prefix}-multi-select[filterable]) {\n  .#{$prefix}--list-box__field:focus-within {\n    outline: $spacing-01 solid $focus;\n    outline-offset: -#{$spacing-01};\n  }\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: $spacing-01;\n    }\n  }\n}\n:host(#{$prefix}-multi-select[filterable][has-value])\n  .#{$prefix}--list-box__field\n  ~ ::slotted(#{$prefix}-ai-label) {\n  inset-inline-end: calc($spacing-10 + 18px);\n}\n\n:host(#{$prefix}-multi-select[direction='top']) {\n  @extend .#{$prefix}--list-box--up;\n\n  .#{$prefix}--list-box__menu {\n    inset-block-start: auto;\n  }\n}\n\n:host(#{$prefix}-multi-select[invalid]:not([disabled]):not([read-only])) {\n  .#{$prefix}--form__helper-text {\n    color: $text-error;\n  }\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: $spacing-10;\n    }\n  }\n}\n\n:host(#{$prefix}-multi-select[type='inline']) {\n  @extend .#{$prefix}--list-box__wrapper--inline;\n\n  grid-gap: 0 $spacing-03;\n  .#{$prefix}--form__helper-text {\n    grid-column: 3;\n  }\n}\n\n:host(#{$prefix}-multi-select[type='inline'][warn])\n  .#{$prefix}--list-box__field {\n  padding-inline-end: rem(56px);\n}\n\n:host(#{$prefix}-multi-select-item) {\n  @extend .#{$prefix}--list-box__menu-item;\n\n  display: block;\n\n  #{$prefix}-checkbox::part(label) {\n    display: inline-block;\n    overflow: hidden;\n    inline-size: 100%;\n    padding-inline-start: rem(28px);\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .#{$prefix}--list-box__menu-item__option {\n    box-sizing: border-box;\n\n    .#{$prefix}--checkbox-wrapper {\n      display: flex;\n      align-items: center;\n      block-size: 100%;\n      inline-size: 100%;\n    }\n\n    > .#{$prefix}--form-item {\n      flex-direction: row;\n    }\n  }\n  // make the checkbox element transparent to mouse events so it doesn't interfere\n  #{$prefix}-checkbox {\n    pointer-events: none;\n  }\n}\n\n:host(#{$prefix}-multi-select-item:hover) {\n  background-color: $layer-hover;\n}\n\n:host(#{$prefix}-multi-select-item[filtered]) {\n  display: none;\n}\n\n:host(#{$prefix}-multi-select-item[size='sm']) {\n  block-size: fit-content;\n  .#{$prefix}--list-box__menu-item__option {\n    block-size: $spacing-07;\n    padding-block: rem(7px);\n  }\n}\n\n:host(#{$prefix}-multi-select-item[size='lg']) {\n  block-size: fit-content;\n  .#{$prefix}--list-box__menu-item__option {\n    block-size: $spacing-09;\n    padding-block: rem(15px);\n  }\n}\n\n:host(#{$prefix}-multi-select-item[disabled]) {\n  cursor: not-allowed;\n  .#{$prefix}--list-box__menu-item__option {\n    color: $text-disabled;\n    text-decoration: none;\n  }\n}\n\n:host(#{$prefix}-multi-select-item[highlighted]) {\n  @extend .#{$prefix}--list-box__menu-item--highlighted;\n}\n\n:host(#{$prefix}-multi-select-item[selected]) {\n  @extend .#{$prefix}--list-box__menu-item--active;\n\n  .#{$prefix}--list-box__menu-item__option {\n    color: $text-primary;\n  }\n}\n\n:host(#{$prefix}-multi-select[ai-label]) {\n  @extend .#{$prefix}--list-box__wrapper--slug;\n\n  ::slotted(#{$prefix}-ai-label),\n  ::slotted(#{$prefix}-slug) {\n    position: absolute;\n    inset-block-start: 50%;\n    inset-inline-end: calc($spacing-08 + 9px);\n    margin-block-start: convert.to-rem(0.5px);\n  }\n\n  ::slotted(#{$prefix}-ai-label:not([revert-active])),\n  ::slotted(#{$prefix}-slug:not([revert-active])) {\n    transform: translateY(-50%);\n  }\n}\n\n:host(#{$prefix}-multi-select[ai-label][warn]),\n:host(#{$prefix}-multi-select[ai-label][invalid]) {\n  .#{$prefix}--list-box__invalid-icon {\n    inset-inline-end: convert.to-rem(81px);\n  }\n}\n\n:host(#{$prefix}-multi-select[ai-label]) ::slotted(#{$prefix}-ai-label)::after {\n  position: absolute;\n  display: block;\n  background-color: $border-subtle-01;\n  block-size: $spacing-05;\n  content: '';\n  inline-size: convert.to-rem(1px);\n  inset-block-start: 0;\n  inset-inline-end: convert.to-rem(-9px);\n}\n\n:host(#{$prefix}-multi-select[filterable][warn][has-value]),\n:host(#{$prefix}-multi-select[filterable][invalid][has-value]) {\n  .#{$prefix}--list-box__invalid-icon {\n    inset-inline-end: rem(78px);\n  }\n\n  .#{$prefix}--list-box__selection#clear-button::before {\n    position: absolute;\n    display: block;\n    background-color: $border-subtle-01;\n    block-size: $spacing-05;\n    content: '';\n    inline-size: rem(1px);\n    inset-inline-end: rem(27px);\n  }\n}\n\n// pad space to account for text-input, placeholder and selections\n\n:host(#{$prefix}-multi-select[filterable])\n  .#{$prefix}--multi-select--selected\n  .#{$prefix}--list-box__field\n  .#{$prefix}--text-input {\n  padding-inline-end: rem(45px);\n}\n\n:host(#{$prefix}-multi-select[filterable][invalid][value='']) {\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: $spacing-01;\n    }\n  }\n}\n\n:host(#{$prefix}-multi-select[filterable][invalid]),\n:host(#{$prefix}-multi-select[filterable][warn]) {\n  .#{$prefix}--multi-select--selected\n    .#{$prefix}--list-box__field\n    .#{$prefix}--text-input {\n    padding-inline-end: 0;\n  }\n  .#{$prefix}--multi-select--selected\n    .#{$prefix}--list-box__field\n    .#{$prefix}--list-box__invalid-icon {\n    inset-inline-end: $spacing-08;\n  }\n}\n\n:host(#{$prefix}-multi-select[filterable][warn][value='']) {\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: $spacing-05;\n    }\n  }\n}\n:host(#{$prefix}-multi-select[filterable][ai-label][value='']) {\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: $spacing-03;\n    }\n  }\n}\n\n:host(#{$prefix}-multi-select[filterable][ai-label][has-value]) {\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: rem(43px);\n    }\n  }\n  .#{$prefix}--multi-select--selected\n    .#{$prefix}--list-box__field\n    .#{$prefix}--text-input {\n    padding-inline-end: $spacing-10;\n  }\n}\n\n:host(#{$prefix}-multi-select[filterable][invalid][has-value]) {\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: $spacing-08;\n    }\n  }\n  .#{$prefix}--multi-select--selected\n    .#{$prefix}--list-box__field\n    .#{$prefix}--text-input {\n    padding-inline-end: $spacing-10;\n  }\n  .#{$prefix}--multi-select--selected\n    .#{$prefix}--list-box__field\n    .#{$prefix}--list-box__invalid-icon {\n    inset-inline-end: $spacing-11;\n  }\n}\n\n:host(#{$prefix}-multi-select[filterable][warn][has-value]) {\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: rem(55px);\n    }\n  }\n  .#{$prefix}--multi-select--selected\n    .#{$prefix}--list-box__field\n    .#{$prefix}--text-input {\n    padding-inline-end: $spacing-09;\n  }\n  .#{$prefix}--multi-select--selected\n    .#{$prefix}--list-box__field\n    .#{$prefix}--list-box__invalid-icon {\n    inset-inline-end: $spacing-11;\n  }\n}\n\n:host(#{$prefix}-multi-select[ai-label]) {\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: rem(75px);\n    }\n  }\n}\n\n:host(#{$prefix}-multi-select[filterable][ai-label])\n  .#{$prefix}--multi-select--selected\n  .#{$prefix}--list-box__field\n  .#{$prefix}--text-input {\n  padding-inline-end: 0;\n}\n\n:host(#{$prefix}-multi-select[filterable][has-value]) {\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: $spacing-06;\n    }\n  }\n  .#{$prefix}--multi-select--selected\n    .#{$prefix}--list-box__field\n    .#{$prefix}--text-input {\n    padding-inline-end: rem(45px);\n  }\n}\n\n:host(#{$prefix}-multi-select[ai-label][invalid]),\n:host(#{$prefix}-multi-select[ai-label][warn]) {\n  ::slotted(#{$prefix}-ai-label)::before {\n    position: absolute;\n    display: block;\n    background-color: $border-subtle-01;\n    block-size: $spacing-05;\n    content: '';\n    inline-size: convert.to-rem(1px);\n    inset-block-start: 0;\n    inset-inline-end: convert.to-rem(24px);\n  }\n}\n\n:host(#{$prefix}-multi-select[ai-label][warn]),\n:host(#{$prefix}-multi-select[ai-label][invalid]),\n:host(#{$prefix}-multi-select[ai-label][warn][filterable]),\n:host(#{$prefix}-multi-select[ai-label][invalid][filterable]) {\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: $spacing-07;\n    }\n  }\n  .#{$prefix}--list-box__field .#{$prefix}--list-box__invalid-icon {\n    inset-inline-end: rem(81px);\n  }\n  .#{$prefix}--multi-select--selected\n    .#{$prefix}--list-box__field\n    .#{$prefix}--text-input {\n    padding-inline-end: rem(70px);\n  }\n}\n\n:host(#{$prefix}-multi-select[filterable][ai-label][warn][has-value]),\n:host(#{$prefix}-multi-select[filterable][ai-label][invalid][has-value]) {\n  .#{$prefix}--list-box__invalid-icon {\n    inset-inline-end: rem(114px);\n  }\n\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: rem(75px);\n    }\n  }\n\n  .#{$prefix}--multi-select--selected\n    .#{$prefix}--list-box__field\n    .#{$prefix}--text-input {\n    padding-inline-end: rem(65px);\n  }\n  .#{$prefix}--multi-select--selected\n    .#{$prefix}--list-box__field\n    .#{$prefix}--list-box__invalid-icon {\n    inset-inline-end: rem(114px);\n  }\n}\n\n:host(#{$prefix}-multi-select[ai-label][invalid]),\n:host(#{$prefix}-multi-select[ai-label][warn]) {\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: rem(100px);\n    }\n  }\n  .#{$prefix}--multi-select--selected .#{$prefix}--list-box__field {\n    padding-inline-end: rem(105px);\n  }\n}\n\n// When select all is turned on, the first item in the listbox\n// is always the \"Select all\" option and gets special border\n// treatment\n:host(#{$prefix}-multi-select-item[is-select-all]) {\n  .#{$prefix}--list-box__menu-item__option {\n    padding: 0.6875rem $spacing-05;\n    margin: 0;\n    border-block-end: 1px solid $border-subtle-01;\n  }\n}\n\n// When select all is turned on, the second item in the list\n// has special treatment to look correct against the \"Select all\"\n// border treatment, this second item (index=1) gets a `flush-top` attribute\n// so that we can remove its top border.\n:host(#{$prefix}-multi-select-item[flush-top])\n  .#{$prefix}--list-box__menu-item__option {\n  border-block-start: none;\n}\n\n// remove focus outline for when the label is out of focus\n:host(#{$prefix}-multi-select)\n  .#{$prefix}--list-box__field.no-focus-style:focus,\n:host(#{$prefix}-multi-select)\n  .#{$prefix}--list-box__field.no-focus-style:focus-within {\n  outline: none;\n}\n\n:host(#{$prefix}-multi-select[ai-label])\n  .#{$prefix}--list-box__wrapper--decorator {\n  @include ai-gradient;\n}\n\n:host(#{$prefix}-multi-select[item-clicked]),\n:host(#{$prefix}-multi-select[has-value]) {\n  .#{$prefix}--list-box__field,\n  .#{$prefix}--multi-select--invalid {\n    outline: 1px solid $focus !important;\n    outline-offset: -1px !important;\n  }\n}\n\n:host(\n    #{$prefix}-multi-select[warn]:not([invalid]):not([ai-label]):not(\n        [disabled]\n      ):not([read-only])\n  ) {\n  .#{$prefix}--form__helper-text {\n    color: $text-primary;\n  }\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: $spacing-10;\n    }\n  }\n}\n\n:host(\n    #{$prefix}-multi-select[warn][invalid]:not([ai-label]):not([disabled]):not(\n        [read-only]\n      )\n  ) {\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: $spacing-10;\n    }\n  }\n}\n\n:host(#{$prefix}-multi-select[disabled]) {\n  .#{$prefix}--list-box__field,\n  .#{$prefix}--list-box__selection {\n    pointer-events: none;\n  }\n  .#{$prefix}--list-box__field:focus,\n  .#{$prefix}--list-box__selection:focus {\n    outline: none !important;\n  }\n}\n\n@include emit-layout-tokens-to-shadow-host('#{$prefix}-multi-select');\n"],"mappings":""}

package/es-custom/components/overflow-menu/overflow-menu.d.ts

@@ -6,6 +6,7 @@
  */
 import CDSFloatingMenuTrigger from '../floating-menu/floating-menu-trigger';
 import { OVERFLOW_MENU_SIZE } from './defs';
+import '../menu/index';
 import CDSIconButton from '../icon-button/icon-button';
 export { OVERFLOW_MENU_SIZE };
 declare const CDSOverflowMenu_base: {
@@ -31,10 +32,27 @@ declare const CDSOverflowMenu_base: {
  * @slot icon - The icon for the trigger button.
  */
 declare class CDSOverflowMenu extends CDSOverflowMenu_base implements CDSFloatingMenuTrigger {
+    private _menuController;
     /**
      * The menu body.
      */
     private _menuBody;
+    /**
+     * The identifier used by the popup surface.
+     */
+    private _menuId;
+    /**
+     * Ensures the deprecated-child warning only fires once.
+     */
+    private _didWarnDeprecatedChildren;
+    /**
+     * Ensures the invalid menu composition warning only fires once.
+     */
+    private _didWarnInvalidComposition;
+    /**
+     * Monotonic token used to ignore stale async menu sync callbacks.
+     */
+    private _menuSyncToken;
     /**
      * Handles user-initiated toggling of the menu.
      */
@@ -47,6 +65,14 @@ declare class CDSOverflowMenu extends CDSOverflowMenu_base implements CDSFloatin
      * Handles `keydown` event on the trigger button.
      */
     private _handleKeydownTrigger;
+    /**
+     * Prevents the trigger click from immediately re-opening the menu after blur.
+     */
+    private _handleMousedownTrigger;
+    /**
+     * Handles close requests emitted by the managed menu.
+     */
+    private _handleManagedMenuClose;
     /**
      * `true` if this tooltip is in a data table row
      */
@@ -55,10 +81,18 @@ declare class CDSOverflowMenu extends CDSOverflowMenu_base implements CDSFloatin
      * `true` if this overflow menu should be disabled.
      */
     disabled: boolean;
+    /**
+     * Enables the menu-composition OverflowMenu implementation leveraging `cds-custom-menu`.
+     */
+    enableV12Overflowmenu: boolean;
     /**
      * `true` if this overflow menu body should be flipped.
      */
     flipped: boolean;
+    /**
+     * Experimental property. Enables automatic menu placement flipping to avoid clipping.
+     */
+    autoalign: boolean;
     /**
      * `true` if the dropdown should be open.
      */
@@ -67,6 +101,15 @@ declare class CDSOverflowMenu extends CDSOverflowMenu_base implements CDSFloatin
      * Index (starting at 1) of overflow menu item to focus on open.
      */
     index: number;
+    /**
+     * A label describing the menu options. Used for the trigger tooltip and the menu's accessible label.
+     */
+    label: string;
+    /**
+     * Specify how the menu should align with the trigger button.
+     * Valid values: 'bottom-start', 'bottom-end', 'top-start', 'top-end'
+     */
+    menuAlignment: string;
     /**
      * Overflow menu size.
      */
@@ -84,8 +127,35 @@ declare class CDSOverflowMenu extends CDSOverflowMenu_base implements CDSFloatin
      */
     get triggerPosition(): DOMRect;
     connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected _renderTooltipContent(): import("lit-html").TemplateResult<1>;
     updated(changedProperties: any): void;
     render(): import("lit-html").TemplateResult<1>;
+    private _getLabelText;
+    private _getTriggerButton;
+    private _isTriggerEvent;
+    private _isDeprecatedOverflowMenuItemEvent;
+    /**
+     * Checks whether the menu-composition path is enabled.
+     */
+    private _isMenuCompositionEnabled;
+    /**
+     * Checks whether floating styles should be driven by Floating UI.
+     */
+    private _usesDynamicFloatingStyles;
+    private _getMenuChild;
+    private _warnDeprecatedChildren;
+    private _warnInvalidMenuComposition;
+    private _syncMenuChild;
+    private _syncMenuChildPosition;
+    private _toMenuSize;
+    private _focusManagedMenuItem;
+    private _resetMenuChildFloatingStyles;
+    private _resetMenuFloatingStyles;
+    /**
+     * Suppresses trigger tooltip interactions while the menu is open.
+     */
+    private _syncTriggerTooltipState;
 }
 export default CDSOverflowMenu;
 //# sourceMappingURL=overflow-menu.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"overflow-menu.d.ts","sourceRoot":"","sources":["../../../src/components/overflow-menu/overflow-menu.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AASH,OAAO,sBAAsB,MAAM,wCAAwC,CAAC;AAC5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAK5C,OAAO,aAAa,MAAM,4BAA4B,CAAC;AAGvD,OAAO,EAAE,kBAAkB,EAAE,CAAC;;;;;;;;;;uBAHU,CAAC;;;;;;;AAKzC;;;;;GAKG;AACH,cACM,eACJ,SAAQ,oBACR,YAAW,sBAAsB;IAEjC;;OAEG;IACH,OAAO,CAAC,SAAS,CAAoC;IAErD;;OAEG;YACW,0BAA0B;IAaxC;;OAEG;IAIH,OAAO,CAAC,mBAAmB,CAEzB;IAEF;;OAEG;IAIH,OAAO,CAAC,qBAAqB,CAK3B;IAEF;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IAEH,IAAI,UAAS;IAEb;;OAEG;IAEH,KAAK,SAAK;IAEV;;OAEG;IAEH,IAAI,qBAA6B;IAEjC;;OAEG;IAEH,aAAa,UAAS;IAEtB;;OAEG;IAEH,UAAU,UAAS;IAEnB;;OAEG;IACH,IAAI,eAAe,YAElB;IAED,iBAAiB;IAYjB,OAAO,CAAC,iBAAiB,KAAA;IA0DzB,MAAM;CAGP;AAED,eAAe,eAAe,CAAC"}
+{"version":3,"file":"overflow-menu.d.ts","sourceRoot":"","sources":["../../../src/components/overflow-menu/overflow-menu.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAQH,OAAO,sBAAsB,MAAM,wCAAwC,CAAC;AAC5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAE5C,OAAO,eAAe,CAAC;AAQvB,OAAO,aAAa,MAAM,4BAA4B,CAAC;AAGvD,OAAO,EAAE,kBAAkB,EAAE,CAAC;;;;;;;;;;uBAP4B,CAAC;;;;;;;AAqC3D;;;;;GAKG;AACH,cACM,eACJ,SAAQ,oBACR,YAAW,sBAAsB;IAEjC,OAAO,CAAC,eAAe,CAAkC;IAEzD;;OAEG;IACH,OAAO,CAAC,SAAS,CAAoC;IAErD;;OAEG;IACH,OAAO,CAAC,OAAO,CAED;IAEd;;OAEG;IACH,OAAO,CAAC,0BAA0B,CAAS;IAE3C;;OAEG;IACH,OAAO,CAAC,0BAA0B,CAAS;IAE3C;;OAEG;IACH,OAAO,CAAC,cAAc,CAAK;IAE3B;;OAEG;YACW,0BAA0B;IAuBxC;;OAEG;IACH,OAAO,CAAC,mBAAmB,CAYzB;IAEF;;OAEG;IACH,OAAO,CAAC,qBAAqB,CAS3B;IAEF;;OAEG;IACH,OAAO,CAAC,uBAAuB,CAI7B;IAEF;;OAEG;IACH,OAAO,CAAC,uBAAuB,CAmB7B;IAEF;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAMH,qBAAqB,UAAS;IAE9B;;OAEG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,IAAI,UAAS;IAEb;;OAEG;IAEH,KAAK,SAAK;IAEV;;OAEG;IAEH,KAAK,SAAM;IAEX;;;OAGG;IAEH,aAAa,EAAE,MAAM,CAAkB;IAEvC;;OAEG;IAEH,IAAI,qBAA6B;IAEjC;;OAEG;IAEH,aAAa,UAAS;IAEtB;;OAEG;IAEH,UAAU,UAAS;IAEnB;;OAEG;IACH,IAAI,eAAe,YAElB;IAED,iBAAiB;IAoBjB,oBAAoB;IAWpB,SAAS,CAAC,qBAAqB;IAc/B,OAAO,CAAC,iBAAiB,KAAA;IAkGzB,MAAM;IAIN,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,kCAAkC;IAU1C;;OAEG;IACH,OAAO,CAAC,yBAAyB;IAOjC;;OAEG;IACH,OAAO,CAAC,0BAA0B;IAOlC,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,uBAAuB;IAkB/B,OAAO,CAAC,2BAA2B;IAkBnC,OAAO,CAAC,cAAc;IAkFtB,OAAO,CAAC,sBAAsB;IAW9B,OAAO,CAAC,WAAW;YAeL,qBAAqB;IAsBnC,OAAO,CAAC,6BAA6B;IAerC,OAAO,CAAC,wBAAwB;IAgBhC;;OAEG;IACH,OAAO,CAAC,wBAAwB;CAmBjC;AAED,eAAe,eAAe,CAAC"}

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

@@ -10,9 +10,13 @@ import { find } from "../../globals/internal/collection-helpers.js";
 import { carbonElement } from "../../globals/decorators/carbon-element.js";
 import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
 import FocusMixin from "../../globals/mixins/focus.js";
-import HostListener from "../../globals/decorators/host-listener.js";
 import HostListenerMixin from "../../globals/mixins/host-listener.js";
+import FloatingController from "../../globals/controllers/floating-controller.js";
 import { OVERFLOW_MENU_SIZE } from "./defs.js";
+import "../menu/defs.js";
+import menu_default from "../menu/menu.js";
+import "../menu/index.js";
+import { isFeatureFlagEnabled } from "../feature-flags/index.js";
 import icon_button_default from "../icon-button/icon-button.scss.js";
 import overflow_menu_default$1 from "./overflow-menu.scss.js";
 import icon_button_default$1 from "../icon-button/icon-button.js";
@@ -25,6 +29,23 @@ import { property } from "lit/decorators.js";
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
+const menuItemTagPrefix = `cds-custom-menu-item`.toUpperCase();
+const deprecatedOverflowMenuTagNames = new Set([`cds-custom-overflow-menu-body`.toUpperCase(), `cds-custom-overflow-menu-item`.toUpperCase()]);
+const bottomFirstFallbackPlacements = [
+	"bottom-start",
+	"bottom-end",
+	"top-start",
+	"top-end"
+];
+const topFirstFallbackPlacements = [
+	"top-start",
+	"top-end",
+	"bottom-start",
+	"bottom-end"
+];
+const warnInDev = (message) => {
+	globalThis.console?.warn(message);
+};
 /**
 * Overflow menu.
 *
@@ -34,21 +55,46 @@ import { property } from "lit/decorators.js";
 let CDSOverflowMenu = class CDSOverflowMenu extends HostListenerMixin(FocusMixin(icon_button_default$1)) {
 	constructor(..._args) {
 		super(..._args);
+		this._menuController = new FloatingController(this);
 		this._menuBody = null;
-		this._handleClickTrigger = async () => {
-			this._handleUserInitiatedToggle();
+		this._menuId = `cds-custom-overflow-menu-${Math.random().toString(16).slice(2)}`;
+		this._didWarnDeprecatedChildren = false;
+		this._didWarnInvalidComposition = false;
+		this._menuSyncToken = 0;
+		this._handleClickTrigger = async (event) => {
+			if (this._isTriggerEvent(event)) {
+				this._handleUserInitiatedToggle();
+				return;
+			}
+			if (!this._isMenuCompositionEnabled() && this._isDeprecatedOverflowMenuItemEvent(event)) this.open = false;
 		};
 		this._handleKeydownTrigger = async (event) => {
+			if (!this._isTriggerEvent(event)) return;
 			if (event.key === " " || event.key === "Enter") {
 				this._handleUserInitiatedToggle();
 				event.preventDefault();
 			}
 		};
+		this._handleMousedownTrigger = (event) => {
+			if (this._isMenuCompositionEnabled() && this._isTriggerEvent(event)) event.preventDefault();
+		};
+		this._handleManagedMenuClose = (event) => {
+			const menu = this._getMenuChild();
+			if (!this._isMenuCompositionEnabled() || !menu || event.composedPath()[0] !== menu) return;
+			this.open = false;
+			if (event.detail?.triggerEventType !== "focusout") requestAnimationFrame(() => {
+				this._getTriggerButton()?.focus();
+			});
+		};
 		this.dataTable = false;
 		this.disabled = false;
+		this.enableV12Overflowmenu = false;
 		this.flipped = false;
+		this.autoalign = false;
 		this.open = false;
 		this.index = 1;
+		this.label = "";
+		this.menuAlignment = "bottom-start";
 		this.size = "md";
 		this.toolbarAction = false;
 		this.breadcrumb = false;
@@ -57,10 +103,15 @@ let CDSOverflowMenu = class CDSOverflowMenu extends HostListenerMixin(FocusMixin
 	* Handles user-initiated toggling of the menu.
 	*/
 	async _handleUserInitiatedToggle() {
+		if (this.disabled) return;
 		this.open = !this.open;
 		const { index, open, updateComplete } = this;
 		if (open) {
 			await updateComplete;
+			if (this._isMenuCompositionEnabled()) {
+				await this._focusManagedMenuItem(index);
+				return;
+			}
 			const { _menuBody: menuBody } = this;
 			(menuBody?.querySelector(`cds-custom-overflow-menu-item:nth-of-type(${index})`))?.focus();
 		}
@@ -76,24 +127,52 @@ let CDSOverflowMenu = class CDSOverflowMenu extends HostListenerMixin(FocusMixin
 		if (!this.shadowRoot) this.attachShadow({ mode: "open" });
 		super.connectedCallback();
 		adoptStyles(this.renderRoot, [icon_button_default, overflow_menu_default$1]);
+		this.addEventListener(menu_default.eventOnClose, this._handleManagedMenuClose);
+		this.addEventListener("click", this._handleClickTrigger);
+		this.addEventListener("keydown", this._handleKeydownTrigger);
+		this.addEventListener("mousedown", this._handleMousedownTrigger);
+	}
+	disconnectedCallback() {
+		this.removeEventListener(menu_default.eventOnClose, this._handleManagedMenuClose);
+		this.removeEventListener("click", this._handleClickTrigger);
+		this.removeEventListener("keydown", this._handleKeydownTrigger);
+		this.removeEventListener("mousedown", this._handleMousedownTrigger);
+		super.disconnectedCallback();
+	}
+	_renderTooltipContent() {
+		const tooltipLabel = this._getLabelText();
+		if (this.label || !this.querySelector("[slot=tooltip-content]")) return html`
+        <cds-custom-tooltip-content ?hidden=${this.disabled || this.open}>
+          ${tooltipLabel}
+        </cds-custom-tooltip-content>
+      `;
+		return super._renderTooltipContent();
 	}
 	updated(changedProperties) {
+		super.updated(changedProperties);
+		const menuCompositionEnabled = this._isMenuCompositionEnabled();
 		const button = this.shadowRoot?.querySelector(`cds-custom-tooltip`)?.querySelector("button");
 		button?.classList.add(`cds-custom--btn--icon-only`, `cds-custom--overflow-menu`);
 		if (changedProperties.has("open")) {
-			const { open } = this;
-			if (open && !this._menuBody) this._menuBody = find(this.childNodes, (elem) => elem.constructor.FLOATING_MENU);
-			const { _menuBody: menuBody, size } = this;
-			if (menuBody) {
-				menuBody.setAttribute("breadcrumb", String(this.breadcrumb));
-				menuBody.open = open;
-				menuBody.size = size;
-				const tooltipContent = this.querySelector("[slot=tooltip-content]")?.textContent;
-				button?.setAttribute("aria-expanded", String(open));
-				button?.setAttribute("aria-label", String(tooltipContent));
+			if (!menuCompositionEnabled) {
+				this._menuController.hostDisconnected();
+				this._resetMenuChildFloatingStyles();
+				const { open } = this;
+				if (open && !this._menuBody) this._menuBody = find(this.childNodes, (elem) => elem.constructor.FLOATING_MENU);
+				const { _menuBody: menuBody, size } = this;
+				if (menuBody) {
+					menuBody.id ||= this._menuId;
+					menuBody.setAttribute("breadcrumb", String(this.breadcrumb));
+					menuBody.open = open;
+					menuBody.size = size;
+				}
 			}
 		}
-		if (changedProperties.has("dataTable")) (this.shadowRoot?.querySelector(`cds-custom-tooltip`))?.setAttribute("data-table", "");
+		if (changedProperties.has("enableV12Overflowmenu") && !menuCompositionEnabled) {
+			this._menuController.hostDisconnected();
+			this._resetMenuChildFloatingStyles({ closeMenu: true });
+		}
+		if (changedProperties.has("dataTable")) (this.shadowRoot?.querySelector(`cds-custom-tooltip`))?.toggleAttribute("data-table", this.dataTable);
 		if (changedProperties.has("size")) {
 			button?.classList.forEach((item) => {
 				if (item.startsWith(`cds-custom--overflow-menu--`)) button?.classList.remove(item);
@@ -102,14 +181,160 @@ let CDSOverflowMenu = class CDSOverflowMenu extends HostListenerMixin(FocusMixin
 			(this.shadowRoot?.querySelector(`cds-custom-tooltip`))?.setAttribute("size", this.size);
 		}
 		if (changedProperties.has("toolbarAction") && this.toolbarAction) this.shadowRoot?.querySelector(`cds-custom-tooltip`)?.setAttribute("toolbar-action", "");
-		super.updated(changedProperties);
+		const labelText = this._getLabelText();
+		const popupId = menuCompositionEnabled ? this._getMenuChild()?.id ?? this._menuId : this._menuBody?.id;
+		button?.setAttribute("aria-haspopup", "menu");
+		button?.setAttribute("aria-expanded", String(this.open));
+		button?.setAttribute("aria-label", labelText);
+		if (this.open && popupId) button?.setAttribute("aria-controls", popupId);
+		else button?.removeAttribute("aria-controls");
+		if (menuCompositionEnabled && (changedProperties.has("open") || changedProperties.has("label") || changedProperties.has("autoalign") || changedProperties.has("menuAlignment") || changedProperties.has("size") || changedProperties.has("enableV12Overflowmenu"))) this._syncMenuChild();
+		if (changedProperties.has("open") || changedProperties.has("disabled")) this._syncTriggerTooltipState();
 	}
 	render() {
 		return html`${super.render()} `;
 	}
+	_getLabelText() {
+		if (this.label) return this.label;
+		return this.querySelector("[slot=tooltip-content]")?.textContent?.trim() || "Options";
+	}
+	_getTriggerButton() {
+		return this.shadowRoot?.querySelector(`cds-custom-tooltip`)?.querySelector("button");
+	}
+	_isTriggerEvent(event) {
+		const triggerButton = this._getTriggerButton();
+		return !!triggerButton && event.composedPath().includes(triggerButton);
+	}
+	_isDeprecatedOverflowMenuItemEvent(event) {
+		return event.composedPath().some((entry) => entry instanceof HTMLElement && deprecatedOverflowMenuTagNames.has(entry.tagName));
+	}
+	/**
+	* Checks whether the menu-composition path is enabled.
+	*/
+	_isMenuCompositionEnabled() {
+		return this.enableV12Overflowmenu || isFeatureFlagEnabled("enable-v12-overflowmenu", this);
+	}
+	/**
+	* Checks whether floating styles should be driven by Floating UI.
+	*/
+	_usesDynamicFloatingStyles() {
+		return this.autoalign || isFeatureFlagEnabled("enable-v12-dynamic-floating-styles", this);
+	}
+	_getMenuChild() {
+		return Array.from(this.children).find((child) => {
+			return child.tagName === `cds-custom-menu`.toUpperCase();
+		}) ?? null;
+	}
+	_warnDeprecatedChildren() {
+		if (this._didWarnDeprecatedChildren) return;
+		if (Array.from(this.children).some((child) => {
+			return deprecatedOverflowMenuTagNames.has(child.tagName);
+		})) {
+			warnInDev("`cds-custom-overflow-menu` with `enable-v12-overflowmenu` expects a direct `cds-custom-menu` child instead of the deprecated `cds-custom-overflow-menu-body` structure.");
+			this._didWarnDeprecatedChildren = true;
+		}
+	}
+	_warnInvalidMenuComposition() {
+		if (this._didWarnInvalidComposition) return;
+		const hasDirectMenuItems = Array.from(this.children).some((child) => child.tagName.startsWith(menuItemTagPrefix));
+		if (!!!this._getMenuChild() || hasDirectMenuItems) {
+			warnInDev("`cds-custom-overflow-menu` with `enable-v12-overflowmenu` expects a direct `cds-custom-menu` child. Place `cds-custom-menu-item*` descendants inside that `cds-custom-menu`.");
+			this._didWarnInvalidComposition = true;
+		}
+	}
+	_syncMenuChild() {
+		const menuSyncToken = ++this._menuSyncToken;
+		this._warnDeprecatedChildren();
+		this._warnInvalidMenuComposition();
+		const menu = this._getMenuChild();
+		if (!menu) return;
+		const menuAlignment = this.menuAlignment;
+		menu.id ||= this._menuId;
+		menu.label = this._getLabelText();
+		menu.menuAlignment = menuAlignment;
+		this._syncMenuChildPosition(menu);
+		menu.open = this.open;
+		menu.size = this._toMenuSize(this.size);
+		const shouldUseFloatingStyles = this._usesDynamicFloatingStyles();
+		if (!this.open || !shouldUseFloatingStyles) {
+			this._menuController.hostDisconnected();
+			this._resetMenuFloatingStyles(menu);
+			return;
+		}
+		this.updateComplete.then(async () => {
+			if (menuSyncToken !== this._menuSyncToken || !this.open || !this._isMenuCompositionEnabled() || this._getMenuChild() !== menu) return;
+			await menu.updateComplete;
+			if (menuSyncToken !== this._menuSyncToken || !this.open || !this._isMenuCompositionEnabled() || this._getMenuChild() !== menu) return;
+			const trigger = this._getTriggerButton();
+			if (!trigger) return;
+			const styleElement = menu.shadowRoot?.querySelector(`.cds-custom--menu`);
+			const fallbackPlacements = menuAlignment.includes("bottom") ? [...bottomFirstFallbackPlacements] : [...topFirstFallbackPlacements];
+			const flipArguments = this.autoalign ? { fallbackPlacements } : {
+				mainAxis: false,
+				crossAxis: false
+			};
+			this._menuController.setPlacement({
+				trigger,
+				target: menu,
+				alignment: menuAlignment,
+				styleElement,
+				flipArguments,
+				mainAxisOffset: 0,
+				open: this.open
+			});
+		});
+	}
+	_syncMenuChildPosition(menu) {
+		const trigger = this._getTriggerButton();
+		if (!trigger) return;
+		const { left, right, top, bottom } = trigger.getBoundingClientRect();
+		menu.x = [left, right];
+		menu.y = [top, bottom];
+	}
+	_toMenuSize(size) {
+		switch (size) {
+			case "xs": return "xs";
+			case "sm": return "sm";
+			case "md": return "md";
+			case "lg": return "lg";
+			default: return "md";
+		}
+	}
+	async _focusManagedMenuItem(index) {
+		const menu = this._getMenuChild();
+		if (!menu) return;
+		await menu.updateComplete;
+		if (!this.open || this._getMenuChild() !== menu) return;
+		const enabledItems = menu.activeitems.map(({ item }) => item).filter((item) => item instanceof HTMLElement && !item.hasAttribute("disabled"));
+		(enabledItems[index - 1] ?? enabledItems[0])?.focus();
+	}
+	_resetMenuChildFloatingStyles({ closeMenu = false } = {}) {
+		const menu = this._getMenuChild();
+		if (!menu) return;
+		this._resetMenuFloatingStyles(menu);
+		if (closeMenu) menu.open = false;
+	}
+	_resetMenuFloatingStyles(menu) {
+		const menuSurface = menu.shadowRoot?.querySelector(`.cds-custom--menu`);
+		if (!menuSurface) return;
+		menuSurface.style.removeProperty("left");
+		menuSurface.style.removeProperty("top");
+		menuSurface.style.removeProperty("position");
+		menuSurface.style.removeProperty("visibility");
+		menuSurface.removeAttribute("align");
+	}
+	/**
+	* Suppresses trigger tooltip interactions while the menu is open.
+	*/
+	_syncTriggerTooltipState() {
+		const tooltip = this.shadowRoot?.querySelector(`cds-custom-tooltip`);
+		const tooltipContent = this.shadowRoot?.querySelector(`cds-custom-tooltip-content`);
+		if (!tooltip) return;
+		tooltip.keyboardOnly = this.open;
+		tooltipContent?.toggleAttribute("hidden", this.disabled || this.open);
+		if (this.open) tooltip.open = false;
+	}
 };
-__decorate([HostListener("click")], CDSOverflowMenu.prototype, "_handleClickTrigger", void 0);
-__decorate([HostListener("keydown")], CDSOverflowMenu.prototype, "_handleKeydownTrigger", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true,
@@ -119,15 +344,29 @@ __decorate([property({
 	type: Boolean,
 	reflect: true
 })], CDSOverflowMenu.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "enable-v12-overflowmenu"
+})], CDSOverflowMenu.prototype, "enableV12Overflowmenu", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true
 })], CDSOverflowMenu.prototype, "flipped", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], CDSOverflowMenu.prototype, "autoalign", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true
 })], CDSOverflowMenu.prototype, "open", void 0);
 __decorate([property()], CDSOverflowMenu.prototype, "index", void 0);
+__decorate([property({ type: String })], CDSOverflowMenu.prototype, "label", void 0);
+__decorate([property({
+	type: String,
+	attribute: "menu-alignment"
+})], CDSOverflowMenu.prototype, "menuAlignment", void 0);
 __decorate([property({ reflect: true })], CDSOverflowMenu.prototype, "size", void 0);
 __decorate([property({
 	type: Boolean,

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

@@ -1 +1 @@
-{"version":3,"file":"overflow-menu.js","names":["CDSIconButton","iconButtonStyles","styles","customElement"],"sources":["../../../src/components/overflow-menu/overflow-menu.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 { adoptStyles, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport HostListener from '../../globals/decorators/host-listener';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { find } from '../../globals/internal/collection-helpers';\nimport CDSFloatingMenuTrigger from '../floating-menu/floating-menu-trigger';\nimport { OVERFLOW_MENU_SIZE } from './defs';\nimport CDSOverflowMenuBody from './overflow-menu-body';\n\nimport iconButtonStyles from '../icon-button/icon-button.scss?lit';\nimport styles from './overflow-menu.scss?lit';\nimport CDSIconButton from '../icon-button/icon-button';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport { OVERFLOW_MENU_SIZE };\n\n/**\n * Overflow menu.\n *\n * @element cds-custom-overflow-menu\n * @slot icon - The icon for the trigger button.\n */\n@customElement(`${prefix}-overflow-menu`)\nclass CDSOverflowMenu\n  extends HostListenerMixin(FocusMixin(CDSIconButton))\n  implements CDSFloatingMenuTrigger\n{\n  /**\n   * The menu body.\n   */\n  private _menuBody: CDSOverflowMenuBody | null = null;\n\n  /**\n   * Handles user-initiated toggling of the menu.\n   */\n  private async _handleUserInitiatedToggle() {\n    this.open = !this.open;\n    const { index, open, updateComplete } = this;\n    if (open) {\n      await updateComplete;\n      const { _menuBody: menuBody } = this;\n      const menuItem = menuBody?.querySelector(\n        `${prefix}-overflow-menu-item:nth-of-type(${index})`\n      ) as HTMLElement;\n      menuItem?.focus();\n    }\n  }\n\n  /**\n   * Handles `click` event on the trigger button.\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 _handleClickTrigger = async () => {\n    this._handleUserInitiatedToggle();\n  };\n\n  /**\n   * Handles `keydown` event on the trigger button.\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 _handleKeydownTrigger = async (event) => {\n    if (event.key === ' ' || event.key === 'Enter') {\n      this._handleUserInitiatedToggle();\n      event.preventDefault();\n    }\n  };\n\n  /**\n   * `true` if this tooltip is in a data table row\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'data-table' })\n  dataTable = false;\n\n  /**\n   * `true` if this overflow menu should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * `true` if this overflow menu body should be flipped.\n   */\n  @property({ type: Boolean, reflect: true })\n  flipped = false;\n\n  /**\n   * `true` if the dropdown should be open.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * Index (starting at 1) of overflow menu item to focus on open.\n   */\n  @property()\n  index = 1;\n\n  /**\n   * Overflow menu size.\n   */\n  @property({ reflect: true })\n  size = OVERFLOW_MENU_SIZE.MEDIUM;\n\n  /**\n   * `true` if this menu is a toolbar action\n   */\n  @property({ type: Boolean, attribute: 'toolbar-action', reflect: true })\n  toolbarAction = false;\n\n  /**\n   * `true` if this overflow menu use inside breadcrumb.\n   */\n  @property({ type: Boolean, reflect: true })\n  breadcrumb = false;\n\n  /**\n   * @returns The position of the trigger button in the viewport.\n   */\n  get triggerPosition() {\n    return this.getBoundingClientRect();\n  }\n\n  connectedCallback() {\n    if (!this.hasAttribute('aria-haspopup')) {\n      this.setAttribute('aria-haspopup', 'true');\n    }\n    if (!this.shadowRoot) {\n      this.attachShadow({ mode: 'open' });\n    }\n    super.connectedCallback();\n\n    adoptStyles(this.renderRoot as ShadowRoot, [iconButtonStyles, styles]);\n  }\n\n  updated(changedProperties) {\n    const button = this.shadowRoot\n      ?.querySelector(`${prefix}-tooltip`)\n      ?.querySelector('button');\n    button?.classList.add(\n      `${prefix}--btn--icon-only`,\n      `${prefix}--overflow-menu`\n    );\n\n    if (changedProperties.has('open')) {\n      const { open } = this;\n      if (open && !this._menuBody) {\n        this._menuBody = find(\n          this.childNodes,\n          (elem) =>\n            (elem.constructor as typeof CDSOverflowMenuBody).FLOATING_MENU\n        );\n      }\n      const { _menuBody: menuBody, size } = this;\n      if (menuBody) {\n        menuBody.setAttribute('breadcrumb', String(this.breadcrumb));\n        menuBody.open = open;\n        menuBody.size = size;\n\n        const tooltipContent = this.querySelector(\n          '[slot=tooltip-content]'\n        )?.textContent;\n        button?.setAttribute('aria-expanded', String(open));\n        button?.setAttribute('aria-label', String(tooltipContent));\n      }\n    }\n\n    if (changedProperties.has('dataTable')) {\n      const tooltip = this.shadowRoot?.querySelector(`${prefix}-tooltip`);\n      tooltip?.setAttribute('data-table', '');\n    }\n\n    if (changedProperties.has('size')) {\n      button?.classList.forEach((item) => {\n        if (item.startsWith(`${prefix}--overflow-menu--`)) {\n          button?.classList.remove(item);\n        }\n      });\n      button?.classList.add(`${prefix}--overflow-menu--${this.size}`);\n\n      const tooltip = this.shadowRoot?.querySelector(`${prefix}-tooltip`);\n      tooltip?.setAttribute('size', this.size);\n    }\n\n    if (changedProperties.has('toolbarAction') && this.toolbarAction) {\n      this.shadowRoot\n        ?.querySelector(`${prefix}-tooltip`)\n        ?.setAttribute('toolbar-action', '');\n    }\n\n    super.updated(changedProperties);\n  }\n\n  render() {\n    return html`${super.render()} `;\n  }\n}\n\nexport default CDSOverflowMenu;\n"],"mappings":"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"}
+{"version":3,"file":"overflow-menu.js","names":["CDSIconButton","FloatingUIController","iconButtonStyles","styles","CDSMenu","customElement"],"sources":["../../../src/components/overflow-menu/overflow-menu.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 { adoptStyles, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { find } from '../../globals/internal/collection-helpers';\nimport CDSFloatingMenuTrigger from '../floating-menu/floating-menu-trigger';\nimport { OVERFLOW_MENU_SIZE } from './defs';\nimport CDSOverflowMenuBody from './overflow-menu-body';\nimport '../menu/index';\nimport CDSMenu from '../menu/menu';\nimport { MENU_SIZE } from '../menu/defs';\nimport { isFeatureFlagEnabled } from '../feature-flags/index';\nimport FloatingUIController from '../../globals/controllers/floating-controller';\n\nimport iconButtonStyles from '../icon-button/icon-button.scss?lit';\nimport styles from './overflow-menu.scss?lit';\nimport CDSIconButton from '../icon-button/icon-button';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport { OVERFLOW_MENU_SIZE };\n\nconst menuItemTagPrefix = `${prefix}-menu-item`.toUpperCase();\n\n// Migration support for existing child structure.\nconst deprecatedOverflowMenuTagNames = new Set([\n  `${prefix}-overflow-menu-body`.toUpperCase(),\n  `${prefix}-overflow-menu-item`.toUpperCase(),\n]);\n\nconst bottomFirstFallbackPlacements = [\n  'bottom-start',\n  'bottom-end',\n  'top-start',\n  'top-end',\n] as const;\n\nconst topFirstFallbackPlacements = [\n  'top-start',\n  'top-end',\n  'bottom-start',\n  'bottom-end',\n] as const;\n\nconst warnInDev = (message: string) => {\n  if (process.env.NODE_ENV === 'development') {\n    globalThis.console?.warn(message);\n  }\n};\n\n/**\n * Overflow menu.\n *\n * @element cds-custom-overflow-menu\n * @slot icon - The icon for the trigger button.\n */\n@customElement(`${prefix}-overflow-menu`)\nclass CDSOverflowMenu\n  extends HostListenerMixin(FocusMixin(CDSIconButton))\n  implements CDSFloatingMenuTrigger\n{\n  private _menuController = new FloatingUIController(this);\n\n  /**\n   * The menu body.\n   */\n  private _menuBody: CDSOverflowMenuBody | null = null;\n\n  /**\n   * The identifier used by the popup surface.\n   */\n  private _menuId = `${prefix}-overflow-menu-${Math.random()\n    .toString(16)\n    .slice(2)}`;\n\n  /**\n   * Ensures the deprecated-child warning only fires once.\n   */\n  private _didWarnDeprecatedChildren = false;\n\n  /**\n   * Ensures the invalid menu composition warning only fires once.\n   */\n  private _didWarnInvalidComposition = false;\n\n  /**\n   * Monotonic token used to ignore stale async menu sync callbacks.\n   */\n  private _menuSyncToken = 0;\n\n  /**\n   * Handles user-initiated toggling of the menu.\n   */\n  private async _handleUserInitiatedToggle() {\n    if (this.disabled) {\n      return;\n    }\n\n    this.open = !this.open;\n    const { index, open, updateComplete } = this;\n    if (open) {\n      await updateComplete;\n\n      if (this._isMenuCompositionEnabled()) {\n        await this._focusManagedMenuItem(index);\n        return;\n      }\n\n      const { _menuBody: menuBody } = this;\n      const menuItem = menuBody?.querySelector(\n        `${prefix}-overflow-menu-item:nth-of-type(${index})`\n      ) as HTMLElement;\n      menuItem?.focus();\n    }\n  }\n\n  /**\n   * Handles `click` event on the trigger button.\n   */\n  private _handleClickTrigger = async (event: MouseEvent) => {\n    if (this._isTriggerEvent(event)) {\n      this._handleUserInitiatedToggle();\n      return;\n    }\n\n    if (\n      !this._isMenuCompositionEnabled() &&\n      this._isDeprecatedOverflowMenuItemEvent(event)\n    ) {\n      this.open = false;\n    }\n  };\n\n  /**\n   * Handles `keydown` event on the trigger button.\n   */\n  private _handleKeydownTrigger = async (event: KeyboardEvent) => {\n    if (!this._isTriggerEvent(event)) {\n      return;\n    }\n\n    if (event.key === ' ' || event.key === 'Enter') {\n      this._handleUserInitiatedToggle();\n      event.preventDefault();\n    }\n  };\n\n  /**\n   * Prevents the trigger click from immediately re-opening the menu after blur.\n   */\n  private _handleMousedownTrigger = (event: MouseEvent) => {\n    if (this._isMenuCompositionEnabled() && this._isTriggerEvent(event)) {\n      event.preventDefault();\n    }\n  };\n\n  /**\n   * Handles close requests emitted by the managed menu.\n   */\n  private _handleManagedMenuClose = (\n    event: CustomEvent<{ triggerEventType?: string }>\n  ) => {\n    const menu = this._getMenuChild();\n    if (\n      !this._isMenuCompositionEnabled() ||\n      !menu ||\n      event.composedPath()[0] !== menu\n    ) {\n      return;\n    }\n\n    this.open = false;\n\n    if (event.detail?.triggerEventType !== 'focusout') {\n      requestAnimationFrame(() => {\n        this._getTriggerButton()?.focus();\n      });\n    }\n  };\n\n  /**\n   * `true` if this tooltip is in a data table row\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'data-table' })\n  dataTable = false;\n\n  /**\n   * `true` if this overflow menu should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Enables the menu-composition OverflowMenu implementation leveraging `cds-custom-menu`.\n   */\n  @property({\n    type: Boolean,\n    reflect: true,\n    attribute: 'enable-v12-overflowmenu',\n  })\n  enableV12Overflowmenu = false;\n\n  /**\n   * `true` if this overflow menu body should be flipped.\n   */\n  @property({ type: Boolean, reflect: true })\n  flipped = false;\n\n  /**\n   * Experimental property. Enables automatic menu placement flipping to avoid clipping.\n   */\n  @property({ type: Boolean, reflect: true })\n  autoalign = false;\n\n  /**\n   * `true` if the dropdown should be open.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * Index (starting at 1) of overflow menu item to focus on open.\n   */\n  @property()\n  index = 1;\n\n  /**\n   * A label describing the menu options. Used for the trigger tooltip and the menu's accessible label.\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Specify how the menu should align with the trigger button.\n   * Valid values: 'bottom-start', 'bottom-end', 'top-start', 'top-end'\n   */\n  @property({ type: String, attribute: 'menu-alignment' })\n  menuAlignment: string = 'bottom-start';\n\n  /**\n   * Overflow menu size.\n   */\n  @property({ reflect: true })\n  size = OVERFLOW_MENU_SIZE.MEDIUM;\n\n  /**\n   * `true` if this menu is a toolbar action\n   */\n  @property({ type: Boolean, attribute: 'toolbar-action', reflect: true })\n  toolbarAction = false;\n\n  /**\n   * `true` if this overflow menu use inside breadcrumb.\n   */\n  @property({ type: Boolean, reflect: true })\n  breadcrumb = false;\n\n  /**\n   * @returns The position of the trigger button in the viewport.\n   */\n  get triggerPosition() {\n    return this.getBoundingClientRect();\n  }\n\n  connectedCallback() {\n    if (!this.hasAttribute('aria-haspopup')) {\n      this.setAttribute('aria-haspopup', 'true');\n    }\n    if (!this.shadowRoot) {\n      this.attachShadow({ mode: 'open' });\n    }\n    super.connectedCallback();\n\n    adoptStyles(this.renderRoot as ShadowRoot, [iconButtonStyles, styles]);\n\n    this.addEventListener(\n      CDSMenu.eventOnClose,\n      this._handleManagedMenuClose as EventListener\n    );\n    this.addEventListener('click', this._handleClickTrigger);\n    this.addEventListener('keydown', this._handleKeydownTrigger);\n    this.addEventListener('mousedown', this._handleMousedownTrigger);\n  }\n\n  disconnectedCallback() {\n    this.removeEventListener(\n      CDSMenu.eventOnClose,\n      this._handleManagedMenuClose as EventListener\n    );\n    this.removeEventListener('click', this._handleClickTrigger);\n    this.removeEventListener('keydown', this._handleKeydownTrigger);\n    this.removeEventListener('mousedown', this._handleMousedownTrigger);\n    super.disconnectedCallback();\n  }\n\n  protected _renderTooltipContent() {\n    const tooltipLabel = this._getLabelText();\n\n    if (this.label || !this.querySelector('[slot=tooltip-content]')) {\n      return html`\n        <cds-custom-tooltip-content ?hidden=${this.disabled || this.open}>\n          ${tooltipLabel}\n        </cds-custom-tooltip-content>\n      `;\n    }\n\n    return super._renderTooltipContent();\n  }\n\n  updated(changedProperties) {\n    super.updated(changedProperties);\n    const menuCompositionEnabled = this._isMenuCompositionEnabled();\n\n    const button = this.shadowRoot\n      ?.querySelector(`${prefix}-tooltip`)\n      ?.querySelector('button');\n    button?.classList.add(\n      `${prefix}--btn--icon-only`,\n      `${prefix}--overflow-menu`\n    );\n\n    if (changedProperties.has('open')) {\n      if (!menuCompositionEnabled) {\n        this._menuController.hostDisconnected();\n        this._resetMenuChildFloatingStyles();\n        const { open } = this;\n        if (open && !this._menuBody) {\n          this._menuBody = find(\n            this.childNodes,\n            (elem) =>\n              (elem.constructor as typeof CDSOverflowMenuBody).FLOATING_MENU\n          );\n        }\n        const { _menuBody: menuBody, size } = this;\n        if (menuBody) {\n          menuBody.id ||= this._menuId;\n          menuBody.setAttribute('breadcrumb', String(this.breadcrumb));\n          menuBody.open = open;\n          menuBody.size = size;\n        }\n      }\n    }\n\n    if (\n      changedProperties.has('enableV12Overflowmenu') &&\n      !menuCompositionEnabled\n    ) {\n      this._menuController.hostDisconnected();\n      this._resetMenuChildFloatingStyles({ closeMenu: true });\n    }\n\n    if (changedProperties.has('dataTable')) {\n      const tooltip = this.shadowRoot?.querySelector(`${prefix}-tooltip`);\n      tooltip?.toggleAttribute('data-table', this.dataTable);\n    }\n\n    if (changedProperties.has('size')) {\n      button?.classList.forEach((item) => {\n        if (item.startsWith(`${prefix}--overflow-menu--`)) {\n          button?.classList.remove(item);\n        }\n      });\n      button?.classList.add(`${prefix}--overflow-menu--${this.size}`);\n\n      const tooltip = this.shadowRoot?.querySelector(`${prefix}-tooltip`);\n      tooltip?.setAttribute('size', this.size);\n    }\n\n    if (changedProperties.has('toolbarAction') && this.toolbarAction) {\n      this.shadowRoot\n        ?.querySelector(`${prefix}-tooltip`)\n        ?.setAttribute('toolbar-action', '');\n    }\n\n    const labelText = this._getLabelText();\n    const popupId = menuCompositionEnabled\n      ? (this._getMenuChild()?.id ?? this._menuId)\n      : this._menuBody?.id;\n\n    button?.setAttribute('aria-haspopup', 'menu');\n    button?.setAttribute('aria-expanded', String(this.open));\n    button?.setAttribute('aria-label', labelText);\n\n    if (this.open && popupId) {\n      button?.setAttribute('aria-controls', popupId);\n    } else {\n      button?.removeAttribute('aria-controls');\n    }\n\n    const shouldSyncMenuChild =\n      menuCompositionEnabled &&\n      (changedProperties.has('open') ||\n        changedProperties.has('label') ||\n        changedProperties.has('autoalign') ||\n        changedProperties.has('menuAlignment') ||\n        changedProperties.has('size') ||\n        changedProperties.has('enableV12Overflowmenu'));\n\n    if (shouldSyncMenuChild) {\n      this._syncMenuChild();\n    }\n\n    if (changedProperties.has('open') || changedProperties.has('disabled')) {\n      this._syncTriggerTooltipState();\n    }\n  }\n\n  render() {\n    return html`${super.render()} `;\n  }\n\n  private _getLabelText() {\n    if (this.label) return this.label;\n\n    const tooltipContent = this.querySelector(\n      '[slot=tooltip-content]'\n    )?.textContent?.trim();\n\n    return tooltipContent || 'Options';\n  }\n\n  private _getTriggerButton() {\n    return this.shadowRoot\n      ?.querySelector(`${prefix}-tooltip`)\n      ?.querySelector('button') as HTMLButtonElement | null;\n  }\n\n  private _isTriggerEvent(event: Event) {\n    const triggerButton = this._getTriggerButton();\n\n    return !!triggerButton && event.composedPath().includes(triggerButton);\n  }\n\n  private _isDeprecatedOverflowMenuItemEvent(event: Event) {\n    return event\n      .composedPath()\n      .some(\n        (entry) =>\n          entry instanceof HTMLElement &&\n          deprecatedOverflowMenuTagNames.has(entry.tagName)\n      );\n  }\n\n  /**\n   * Checks whether the menu-composition path is enabled.\n   */\n  private _isMenuCompositionEnabled() {\n    return (\n      this.enableV12Overflowmenu ||\n      isFeatureFlagEnabled('enable-v12-overflowmenu', this)\n    );\n  }\n\n  /**\n   * Checks whether floating styles should be driven by Floating UI.\n   */\n  private _usesDynamicFloatingStyles() {\n    return (\n      this.autoalign ||\n      isFeatureFlagEnabled('enable-v12-dynamic-floating-styles', this)\n    );\n  }\n\n  private _getMenuChild() {\n    return (Array.from(this.children).find((child) => {\n      return child.tagName === `${prefix}-menu`.toUpperCase();\n    }) ?? null) as CDSMenu | null;\n  }\n\n  private _warnDeprecatedChildren() {\n    if (this._didWarnDeprecatedChildren) {\n      return;\n    }\n\n    // Migration guard for flagged usage of deprecated overflow-menu children.\n    const hasDeprecatedChildren = Array.from(this.children).some((child) => {\n      return deprecatedOverflowMenuTagNames.has(child.tagName);\n    });\n\n    if (hasDeprecatedChildren) {\n      warnInDev(\n        '`cds-custom-overflow-menu` with `enable-v12-overflowmenu` expects a direct `cds-custom-menu` child instead of the deprecated `cds-custom-overflow-menu-body` structure.'\n      );\n      this._didWarnDeprecatedChildren = true;\n    }\n  }\n\n  private _warnInvalidMenuComposition() {\n    if (this._didWarnInvalidComposition) {\n      return;\n    }\n\n    const hasDirectMenuItems = Array.from(this.children).some((child) =>\n      child.tagName.startsWith(menuItemTagPrefix)\n    );\n    const hasMenuChild = !!this._getMenuChild();\n\n    if (!hasMenuChild || hasDirectMenuItems) {\n      warnInDev(\n        '`cds-custom-overflow-menu` with `enable-v12-overflowmenu` expects a direct `cds-custom-menu` child. Place `cds-custom-menu-item*` descendants inside that `cds-custom-menu`.'\n      );\n      this._didWarnInvalidComposition = true;\n    }\n  }\n\n  private _syncMenuChild() {\n    const menuSyncToken = ++this._menuSyncToken;\n\n    this._warnDeprecatedChildren();\n    this._warnInvalidMenuComposition();\n\n    const menu = this._getMenuChild();\n    if (!menu) {\n      return;\n    }\n\n    const menuAlignment = this.menuAlignment;\n\n    menu.id ||= this._menuId;\n    menu.label = this._getLabelText();\n    menu.menuAlignment = menuAlignment;\n    this._syncMenuChildPosition(menu);\n    menu.open = this.open;\n    menu.size = this._toMenuSize(this.size);\n\n    const shouldUseFloatingStyles = this._usesDynamicFloatingStyles();\n\n    if (!this.open || !shouldUseFloatingStyles) {\n      this._menuController.hostDisconnected();\n      this._resetMenuFloatingStyles(menu);\n      return;\n    }\n\n    this.updateComplete.then(async () => {\n      if (\n        menuSyncToken !== this._menuSyncToken ||\n        !this.open ||\n        !this._isMenuCompositionEnabled() ||\n        this._getMenuChild() !== menu\n      ) {\n        return;\n      }\n\n      await menu.updateComplete;\n      if (\n        menuSyncToken !== this._menuSyncToken ||\n        !this.open ||\n        !this._isMenuCompositionEnabled() ||\n        this._getMenuChild() !== menu\n      ) {\n        return;\n      }\n\n      const trigger = this._getTriggerButton();\n      if (!trigger) {\n        return;\n      }\n\n      const styleElement = menu.shadowRoot?.querySelector(\n        `.${prefix}--menu`\n      ) as HTMLElement | undefined;\n\n      const fallbackPlacements = menuAlignment.includes('bottom')\n        ? [...bottomFirstFallbackPlacements]\n        : [...topFirstFallbackPlacements];\n\n      const flipArguments = this.autoalign\n        ? {\n            fallbackPlacements,\n          }\n        : {\n            mainAxis: false,\n            crossAxis: false,\n          };\n\n      this._menuController.setPlacement({\n        trigger,\n        target: menu,\n        alignment: menuAlignment,\n        styleElement,\n        flipArguments,\n        mainAxisOffset: 0,\n        open: this.open,\n      });\n    });\n  }\n\n  private _syncMenuChildPosition(menu: CDSMenu) {\n    const trigger = this._getTriggerButton();\n    if (!trigger) {\n      return;\n    }\n\n    const { left, right, top, bottom } = trigger.getBoundingClientRect();\n    menu.x = [left, right];\n    menu.y = [top, bottom];\n  }\n\n  private _toMenuSize(size: OVERFLOW_MENU_SIZE | string): CDSMenu['size'] {\n    switch (size) {\n      case OVERFLOW_MENU_SIZE.EXTRA_SMALL:\n        return MENU_SIZE.EXTRA_SMALL;\n      case OVERFLOW_MENU_SIZE.SMALL:\n        return MENU_SIZE.SMALL;\n      case OVERFLOW_MENU_SIZE.MEDIUM:\n        return MENU_SIZE.MEDIUM;\n      case OVERFLOW_MENU_SIZE.LARGE:\n        return MENU_SIZE.LARGE;\n      default:\n        return MENU_SIZE.MEDIUM;\n    }\n  }\n\n  private async _focusManagedMenuItem(index: number) {\n    const menu = this._getMenuChild();\n    if (!menu) {\n      return;\n    }\n\n    await menu.updateComplete;\n\n    if (!this.open || this._getMenuChild() !== menu) {\n      return;\n    }\n\n    const enabledItems = menu.activeitems\n      .map(({ item }) => item)\n      .filter(\n        (item) => item instanceof HTMLElement && !item.hasAttribute('disabled')\n      );\n    const focusTarget = enabledItems[index - 1] ?? enabledItems[0];\n\n    focusTarget?.focus();\n  }\n\n  private _resetMenuChildFloatingStyles({\n    closeMenu = false,\n  }: { closeMenu?: boolean } = {}) {\n    const menu = this._getMenuChild();\n    if (!menu) {\n      return;\n    }\n\n    this._resetMenuFloatingStyles(menu);\n\n    if (closeMenu) {\n      menu.open = false;\n    }\n  }\n\n  private _resetMenuFloatingStyles(menu: CDSMenu) {\n    const menuSurface = menu.shadowRoot?.querySelector(`.${prefix}--menu`) as\n      | HTMLElement\n      | undefined;\n\n    if (!menuSurface) {\n      return;\n    }\n\n    menuSurface.style.removeProperty('left');\n    menuSurface.style.removeProperty('top');\n    menuSurface.style.removeProperty('position');\n    menuSurface.style.removeProperty('visibility');\n    menuSurface.removeAttribute('align');\n  }\n\n  /**\n   * Suppresses trigger tooltip interactions while the menu is open.\n   */\n  private _syncTriggerTooltipState() {\n    const tooltip = this.shadowRoot?.querySelector(`${prefix}-tooltip`) as\n      | (HTMLElement & { open?: boolean; keyboardOnly?: boolean })\n      | null;\n    const tooltipContent = this.shadowRoot?.querySelector(\n      `${prefix}-tooltip-content`\n    ) as HTMLElement | null;\n\n    if (!tooltip) {\n      return;\n    }\n\n    tooltip.keyboardOnly = this.open;\n    tooltipContent?.toggleAttribute('hidden', this.disabled || this.open);\n\n    if (this.open) {\n      tooltip.open = false;\n    }\n  }\n}\n\nexport default CDSOverflowMenu;\n"],"mappings":"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"}