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

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

@@ -1 +1 @@
-{"version":3,"file":"tabs.scss.js","names":[],"sources":["../../../src/components/tabs/tabs.scss?lit"],"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\n@use '@carbon/styles/scss/config' as *;\n@use '@carbon/styles/scss/theme' as *;\n@use '@carbon/styles/scss/utilities' as *;\n@use '@carbon/styles/scss/breakpoint' as *;\n@use '@carbon/styles/scss/spacing' as *;\n@use '@carbon/styles/scss/motion' as *;\n@use '@carbon/styles/scss/type' as *;\n@use '@carbon/styles/scss/components/button/index' as *;\n@use '@carbon/styles/scss/components/tabs/index';\n@use '@carbon/styles/scss/components/tabs/vars' as *;\n@use '@carbon/styles/scss/utilities/button-reset';\n@use '@carbon/styles/scss/layout' as *;\n@use '@carbon/styles/scss/utilities/layout';\n@use '@carbon/styles/scss/utilities/convert';\n@use '@carbon/styles/scss/utilities/skeleton' as *;\n\n$inset-transition: inset 110ms motion(standard, productive);\n\n:host(#{$prefix}-tabs),\n:host(#{$prefix}-tabs-skeleton) {\n  @extend .#{$prefix}--tabs;\n  @include emit-layout-tokens();\n  .#{$prefix}--tabs-nav-content-container {\n    position: relative;\n    overflow: scroll;\n    flex: 1 1 0%;\n    // for some reason, overflow: hidden shrinks the content\n    block-size: $spacing-08;\n    scrollbar-width: none;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  /* Set to zero-specificity so it can be overridden by dynamic stylesheet */\n  :where(.#{$prefix}--tabs-nav-content) {\n    position: absolute;\n    block-size: 100%;\n    inset-inline-start: 0;\n    transition: $inset-transition;\n  }\n\n  .#{$prefix}--tabs-nav {\n    position: absolute;\n    display: block;\n  }\n\n  .#{$prefix}--tab--overflow-nav-button {\n    z-index: 1;\n  }\n\n  .#{$prefix}--tab--overflow-nav-button {\n    background-color: var(--tabs-overflow-button-background, $background);\n  }\n\n  .#{$prefix}--tab--overflow-nav-button--hidden {\n    display: none;\n  }\n}\n\n:host(#{$prefix}-tabs) {\n  @include focus-outline('reset');\n\n  .#{$prefix}--tabs-trigger svg {\n    block-size: auto;\n    inline-size: auto;\n  }\n}\n\n:host(#{$prefix}-tabs:focus) {\n  .#{$prefix}--tabs-trigger {\n    @include focus-outline('outline');\n  }\n}\n\n:host(#{$prefix}-tabs[icon-size='default'])\n  .#{$prefix}--tabs-nav-content-container,\n:host(#{$prefix}-tabs.#{$prefix}--tabs__icon--default)\n  .#{$prefix}--tabs-nav-content-container {\n  overflow: visible;\n  block-size: $spacing-08;\n}\n\n:host(#{$prefix}-tabs[icon-size='lg']) .#{$prefix}--tabs-nav-content-container,\n:host(#{$prefix}-tabs.#{$prefix}--tabs__icon--lg)\n  .#{$prefix}--tabs-nav-content-container {\n  overflow: visible;\n  block-size: $spacing-09;\n}\n\n:host(#{$prefix}-tabs[icon-size='default']),\n:host(#{$prefix}-tabs[icon-size='lg']),\n:host(#{$prefix}-tabs.#{$prefix}--tabs__icon--default),\n:host(#{$prefix}-tabs.#{$prefix}--tabs__icon--lg) {\n  overflow: visible;\n\n  .#{$prefix}--tab--list {\n    overflow: visible;\n  }\n}\n\n:host(#{$prefix}-tabs[type='contained']) {\n  .#{$prefix}--tab--overflow-nav-button {\n    background-color: $layer-accent;\n    inline-size: $spacing-09;\n\n    &:hover {\n      background-color: $layer-accent-hover;\n    }\n\n    &:active {\n      background-color: $layer-accent-active;\n    }\n  }\n}\n\n:host(#{$prefix}-tabs[type='contained'][has-secondary-labels])\n  .#{$prefix}--tabs-nav-content-container {\n  block-size: $spacing-10;\n}\n\n:host(#{$prefix}-tabs[type='contained'][has-secondary-labels]) #{$prefix}-tab {\n  block-size: $spacing-10;\n}\n\n:host(#{$prefix}-tab[type='contained'][secondary-label]) {\n  block-size: $spacing-10;\n\n  a.#{$prefix}--tabs__nav-link {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    justify-content: center;\n    padding: 0 $spacing-05;\n    block-size: $spacing-10;\n    line-height: normal;\n  }\n\n  .#{$prefix}--tabs__nav-item-label-wrapper {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .#{$prefix}--tabs__nav-item-label {\n    line-height: var(--cds-body-compact-01-line-height);\n  }\n}\n\n:host(#{$prefix}-tab[type='contained'][secondary-label][selected]),\n:host(#{$prefix}-tab[type='contained'][secondary-label][selected]:hover) {\n  a.#{$prefix}--tabs__nav-link {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    justify-content: center;\n    padding: 0 $spacing-05;\n    line-height: normal;\n  }\n}\n\n:host(#{$prefix}-tab[type='contained']) {\n  .#{$prefix}--tabs__nav-item-secondary-label {\n    @include type-style('label-01');\n\n    display: block;\n    overflow: hidden;\n    color: $text-secondary;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n\n:host(#{$prefix}-tab[type='contained'][selected]) {\n  .#{$prefix}--tabs__nav-item-secondary-label {\n    color: $text-primary;\n  }\n}\n\n:host(#{$prefix}-tab[type='contained'][disabled]) {\n  .#{$prefix}--tabs__nav-item-secondary-label {\n    color: $text-on-color-disabled;\n  }\n}\n\n:host(#{$prefix}-tabs[type='contained'][full-width]) {\n  display: flex;\n  inline-size: 100%;\n\n  .#{$prefix}--tabs-nav-content-container {\n    overflow: visible;\n    flex: 1 1 0%;\n  }\n\n  .#{$prefix}--tabs-nav-content,\n  .#{$prefix}--tabs-nav,\n  .#{$prefix}--tab--list {\n    inline-size: 100%;\n  }\n\n  .#{$prefix}--tab--list {\n    display: flex;\n  }\n}\n\n:host(#{$prefix}-tabs[type='contained'][full-width]) #{$prefix}-tab {\n  flex: 1 1 0%;\n  min-inline-size: 0;\n\n  .#{$prefix}--tabs__nav-link {\n    overflow: hidden;\n    inline-size: 100%;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n\n:host(#{$prefix}-tab),\n:host(#{$prefix}-tab-skeleton) {\n  display: flex;\n  background: transparent;\n  inline-size: 100%;\n\n  .#{$prefix}--tabs__nav-item-label-wrapper {\n    display: flex;\n    align-items: inherit;\n    gap: $spacing-03;\n  }\n\n  .#{$prefix}--tabs__nav-link {\n    @include button-reset.reset($width: false);\n    @include focus-outline('reset');\n    @include type-style('body-compact-01');\n\n    position: relative;\n    overflow: hidden;\n\n    align-items: center;\n    padding: $spacing-04 $spacing-05 $spacing-03;\n    border-block-end: $tab-underline-color;\n    color: $text-secondary;\n    inline-size: 100%;\n    text-align: start;\n    text-decoration: none;\n    text-overflow: ellipsis;\n    transition:\n      border $duration-fast-01 motion(standard, productive),\n      outline $duration-fast-01 motion(standard, productive);\n    white-space: nowrap;\n\n    &:focus,\n    &:active {\n      @include focus-outline('outline');\n    }\n  }\n\n  outline: none;\n}\n\n:host(#{$prefix}-tab:not([type='contained'])) {\n  .#{$prefix}--tabs__nav-link {\n    padding-block-end: calc(#{$spacing-03} + #{convert.to-rem(1px)});\n    padding-block-start: calc(#{$spacing-04} - #{convert.to-rem(1px)});\n  }\n}\n\n:host(#{$prefix}-tab:not([type='contained']))\n  + :host(#{$prefix}-tab:not([type='contained'])) {\n  margin-inline-start: convert.to-rem(1px);\n}\n\n:host(#{$prefix}-tab[badge-indicator][icon-only]:not([icon-size='lg']))\n  #{$prefix}-badge-indicator,\n:host(\n    #{$prefix}-tab[badge-indicator].#{$prefix}--tabs__nav-item--icon-only:not(\n        .#{$prefix}--tabs__nav-item--icon-only__20\n      )\n  )\n  #{$prefix}-badge-indicator {\n  margin-block-start: $spacing-02;\n  margin-inline-end: $spacing-02;\n}\n\n:host(#{$prefix}-tab[icon-only]),\n:host(#{$prefix}-tab.#{$prefix}--tabs__nav-item--icon-only) {\n  flex: 0 0 auto;\n  block-size: $spacing-08;\n  inline-size: $spacing-08;\n\n  .#{$prefix}--tabs__nav-item-label-wrapper {\n    display: flex;\n  }\n\n  #{$prefix}-tooltip {\n    display: block;\n    block-size: 100%;\n    inline-size: 100%;\n    --#{$prefix}-tooltip-padding-block: #{convert.to-rem(2px)};\n    --#{$prefix}-popover-caret-width: #{convert.to-rem(8px)};\n    --#{$prefix}-popover-caret-height: #{convert.to-rem(4px)};\n    --#{$prefix}-popover-offset: #{convert.to-rem(8px)};\n  }\n\n  #{$prefix}-tooltip::part(popover-container) {\n    display: block;\n    block-size: 100%;\n    inline-size: 100%;\n  }\n\n  .#{$prefix}--tabs__nav-link {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    block-size: 100%;\n    inline-size: 100%;\n  }\n\n  ::slotted(svg) {\n    display: block;\n    fill: currentColor;\n  }\n}\n\n:host(#{$prefix}-tab[icon-only]:not([type='contained'])),\n:host(\n    #{$prefix}-tab.#{$prefix}--tabs__nav-item--icon-only:not([type='contained'])\n  ) {\n  .#{$prefix}--tabs__nav-item-label-wrapper {\n    position: relative;\n    inset-block-start: convert.to-rem(1px);\n  }\n}\n\n:host(#{$prefix}-tab[icon-only][icon-size='lg']),\n:host(#{$prefix}-tab.#{$prefix}--tabs__nav-item--icon-only__20) {\n  block-size: $spacing-09;\n  inline-size: $spacing-09;\n}\n\n:host(#{$prefix}-tab[selected]) {\n  .#{$prefix}--tabs__nav-link {\n    @include type-style('heading-compact-01');\n\n    border-block-end: $spacing-01 solid $border-interactive;\n\n    &,\n    // Need to override Carbon core's non-selected focus color\n    &:focus,\n    &:active {\n      color: $text-primary;\n    }\n  }\n\n  display: flex;\n  background-color: transparent;\n  transition: color $duration-fast-01 motion(standard, productive);\n\n  &:hover {\n    background-color: transparent;\n  }\n}\n\n:host(#{$prefix}-tab:hover:not([selected])) {\n  background-color: transparent;\n\n  a.#{$prefix}--tabs__nav-link {\n    border-block-end: $tab-underline-color-hover;\n    color: $text-primary;\n  }\n}\n\n:host(#{$prefix}-tab[icon-only]:hover),\n:host(#{$prefix}-tab.#{$prefix}--tabs__nav-item--icon-only:hover) {\n  box-shadow: none;\n}\n\n:host(#{$prefix}-tabs[type='contained'])\n  .#{$prefix}--tabs-nav-content-container {\n  block-size: $spacing-09;\n}\n\n:host(#{$prefix}-tab[type='contained']) {\n  background-color: $layer-accent-01;\n\n  a.#{$prefix}--tabs__nav-link {\n    padding: $spacing-03 $spacing-05;\n    block-size: $spacing-09;\n    // height - vertical padding\n    line-height: calc(#{$spacing-09} - (#{$spacing-03} * 2));\n  }\n}\n\n:host(#{$prefix}-tab[type='contained']),\n:host(#{$prefix}-tab[type='contained']:hover) {\n  a.#{$prefix}--tabs__nav-link {\n    border-block-end: none;\n    // Draws the border without affecting the inner-content\n    box-shadow: rem(-1px) 0 0 0 $border-strong;\n  }\n}\n\n:host(#{$prefix}-tab[type='contained'][hide-divider])\n  a.#{$prefix}--tabs__nav-link {\n  box-shadow: rem(-1px) 0 0 0 transparent;\n}\n\n// `[role]` is only for specificity.\n// We have `:not()` usage in the corresponding Carbon core style\n// which puts specificity of \"specific\" scenario though the style is for \"regular\" scenario\n:host(#{$prefix}-tab[disabled][role]),\n:host(#{$prefix}-tab[disabled][role]:hover) {\n  background-color: transparent;\n  box-shadow: none;\n  cursor: not-allowed;\n  outline: none;\n\n  .#{$prefix}--tabs__nav-link {\n    border-block-end: $tab-underline-color;\n    color: $tab-text-disabled;\n    outline: none;\n    pointer-events: none;\n  }\n}\n\n:host(#{$prefix}-tab[type='contained'][disabled][role])\n  .#{$prefix}--tabs__nav-link {\n  background-color: $button-disabled;\n  border-block-end: none;\n  color: $text-on-color-disabled;\n}\n\n:host(#{$prefix}-tab[type='contained'][selected]),\n:host(#{$prefix}-tab[type='contained'][selected]:hover) {\n  background-color: $layer-01;\n\n  .#{$prefix}--tabs__nav-link {\n    border-block-end: none;\n    // Draws the border without affecting the inner-content\n    box-shadow: inset 0 $spacing-01 0 0 $interactive;\n    // height - vertical padding\n    line-height: calc(#{$spacing-09} - (#{$spacing-03} * 2));\n  }\n\n  .#{$prefix}--tabs__nav-link:focus,\n  .#{$prefix}--tabs__nav-link:active {\n    box-shadow: none;\n  }\n}\n\n:host(#{$prefix}-tab[type='contained']:hover) {\n  background-color: $layer-accent-01;\n}\n:host(#{$prefix}-tab[type='contained']) {\n  .#{$prefix}--tabs__nav-link:hover {\n    background-color: $layer-accent-hover;\n  }\n}\n\n// Disabled tab never gets selected, but we guard for manual addition of `selected` attribute\n:host(#{$prefix}-tab[disabled][selected]),\n:host(#{$prefix}-tab[disabled][selected]:hover),\n:host(#{$prefix}-tab[disabled][in-focus][selected]),\n:host(#{$prefix}-tab[disabled][in-focus][selected]:hover) {\n  display: flex;\n  background-color: transparent;\n  box-shadow: none;\n\n  @include focus-outline('reset');\n\n  .#{$prefix}--tabs__nav-link {\n    @include type-style('body-short-01');\n\n    border-block-end: $tab-underline-color;\n\n    color: $tab-text-disabled;\n\n    &:focus,\n    &:active {\n      border-block-end-width: 3px;\n    }\n  }\n}\n\n:host(#{$prefix}-tabs-skeleton) .#{$prefix}--tabs-trigger {\n  @include skeleton;\n\n  inline-size: rem(100px);\n}\n\n:host(#{$prefix}-tab-skeleton) {\n  margin-inline-start: $spacing-01;\n\n  .#{$prefix}--tabs__nav-link {\n    @include skeleton;\n\n    display: flex;\n    align-items: center;\n    padding: 0 layout.density('padding-inline');\n    background-color: transparent;\n    block-size: 100%;\n    border-block-end: 2px solid $skeleton-element;\n    inline-size: 10rem;\n\n    &::before {\n      display: none;\n      content: none;\n    }\n  }\n\n  .#{$prefix}--tabs__nav-item {\n    @include reset;\n\n    position: relative;\n    display: flex;\n    flex: 1 0 auto;\n    padding: 0;\n    cursor: pointer;\n    transition: background-color $duration-fast-01 motion(standard, productive);\n  }\n\n  span {\n    @include skeleton;\n\n    display: block;\n    block-size: convert.to-rem(14px);\n    inline-size: 100%;\n  }\n}\n\n:host(#{$prefix}-tab-skeleton) {\n  @extend .#{$prefix}--tabs__nav-item;\n}\n\n:host(#{$prefix}-tabs-skeleton) {\n  @extend .#{$prefix}--tabs;\n  @extend .#{$prefix}--skeleton;\n}\n\n:host(#{$prefix}-tabs-skeleton[contained]) {\n  @extend .#{$prefix}--tabs--contained;\n}\n\n:host(#{$prefix}-tab-skeleton:first-of-type) {\n  margin-inline-start: 0;\n}\n\n// Windows HCM fix\n:host(#{$prefix}-tab[selected]) .#{$prefix}--tabs__nav-link {\n  @include high-contrast-mode {\n    background-color: SelectedItem;\n  }\n}\n\n:host(#{$prefix}-tab) {\n  .#{$prefix}--tabs__nav-link--dismissable {\n    display: flex;\n    align-items: flex-start;\n    padding-inline-end: $spacing-08;\n  }\n  .#{$prefix}--tabs--dismissable.#{$prefix}--tabs--contained {\n    padding-inline-end: calc($spacing-09 - 1px);\n  }\n}\n:host(#{$prefix}-tab[type='contained']) {\n  .#{$prefix}--tabs__nav-link.#{$prefix}--tabs__nav-link--dismissable {\n    padding-inline-end: calc($spacing-09 - 1px);\n  }\n}\n:host(#{$prefix}-tab) {\n  .#{$prefix}--tabs__nav-item--close {\n    position: relative;\n    display: flex;\n    align-items: center;\n    inset-inline-start: calc(-#{$spacing-04} - 1px);\n    margin-inline-start: calc(-#{$spacing-06} + 1px);\n\n    &[disabled] {\n      pointer-events: none;\n    }\n  }\n  .#{$prefix}--tabs__nav-item--close--hidden {\n    display: none;\n  }\n  .#{$prefix}--tabs__nav-item--close::part(button) {\n    @include button-reset.reset();\n\n    block-size: convert.to-rem(24px);\n    inline-size: convert.to-rem(24px);\n    padding-block: $spacing-02;\n    padding-inline: $spacing-02;\n    pointer-events: inherit;\n\n    svg {\n      block-size: convert.to-rem(16px);\n      fill: $text-secondary;\n      inline-size: convert.to-rem(16px);\n    }\n\n    svg:hover {\n      fill: $icon-primary;\n    }\n\n    &:hover {\n      background-color: $layer-hover;\n    }\n\n    &:focus,\n    &:active {\n      @include focus-outline('outline');\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"tabs.scss.js","names":[],"sources":["../../../src/components/tabs/tabs.scss?lit"],"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\n@use '@carbon/styles/scss/config' as *;\n@use '@carbon/styles/scss/theme' as *;\n@use '@carbon/styles/scss/utilities' as *;\n@use '@carbon/styles/scss/breakpoint' as *;\n@use '@carbon/styles/scss/spacing' as *;\n@use '@carbon/styles/scss/motion' as *;\n@use '@carbon/styles/scss/type' as *;\n@use '@carbon/styles/scss/components/button/index' as *;\n@use '@carbon/styles/scss/components/tabs/index';\n@use '@carbon/styles/scss/components/tabs/vars' as *;\n@use '@carbon/styles/scss/utilities/button-reset';\n@use '@carbon/styles/scss/layout' as *;\n@use '@carbon/styles/scss/utilities/layout';\n@use '@carbon/styles/scss/utilities/convert';\n@use '@carbon/styles/scss/utilities/skeleton' as *;\n@use '@carbon/styles/scss/utilities/update_fields_on_layer' as *;\n\n$inset-transition: inset 110ms motion(standard, productive);\n\n:host(#{$prefix}-tabs),\n:host(#{$prefix}-tabs-skeleton) {\n  @extend .#{$prefix}--tabs;\n  @include emit-layout-tokens();\n\n  .#{$prefix}--tabs-nav-content-container {\n    position: relative;\n    overflow: scroll;\n    flex: 1 1 0%;\n    // for some reason, overflow: hidden shrinks the content\n    block-size: $spacing-08;\n    scrollbar-width: none;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  /* Set to zero-specificity so it can be overridden by dynamic stylesheet */\n  :where(.#{$prefix}--tabs-nav-content) {\n    position: absolute;\n    block-size: 100%;\n    inset-inline-start: 0;\n    transition: $inset-transition;\n  }\n\n  .#{$prefix}--tabs-nav {\n    position: absolute;\n    display: block;\n  }\n\n  .#{$prefix}--tab--overflow-nav-button {\n    z-index: 1;\n  }\n\n  .#{$prefix}--tab--overflow-nav-button {\n    background-color: var(--tabs-overflow-button-background, $background);\n  }\n\n  .#{$prefix}--tab--overflow-nav-button--hidden {\n    display: none;\n  }\n}\n\n:host(#{$prefix}-tabs) {\n  @include focus-outline('reset');\n\n  .#{$prefix}--tabs-trigger svg {\n    block-size: auto;\n    inline-size: auto;\n  }\n}\n\n:host(#{$prefix}-tabs:focus) {\n  .#{$prefix}--tabs-trigger {\n    @include focus-outline('outline');\n  }\n}\n\n:host(#{$prefix}-tabs[icon-size='default'])\n  .#{$prefix}--tabs-nav-content-container,\n:host(#{$prefix}-tabs.#{$prefix}--tabs__icon--default)\n  .#{$prefix}--tabs-nav-content-container {\n  overflow: visible;\n  block-size: $spacing-08;\n}\n\n:host(#{$prefix}-tabs[icon-size='lg']) .#{$prefix}--tabs-nav-content-container,\n:host(#{$prefix}-tabs.#{$prefix}--tabs__icon--lg)\n  .#{$prefix}--tabs-nav-content-container {\n  overflow: visible;\n  block-size: $spacing-09;\n}\n\n:host(#{$prefix}-tabs[icon-size='default']),\n:host(#{$prefix}-tabs[icon-size='lg']),\n:host(#{$prefix}-tabs.#{$prefix}--tabs__icon--default),\n:host(#{$prefix}-tabs.#{$prefix}--tabs__icon--lg) {\n  overflow: visible;\n\n  .#{$prefix}--tab--list {\n    overflow: visible;\n  }\n}\n\n:host(#{$prefix}-tabs[type='contained']) {\n  .#{$prefix}--tab--overflow-nav-button {\n    background-color: $layer-accent;\n    inline-size: $spacing-09;\n\n    &:hover {\n      background-color: $layer-accent-hover;\n    }\n\n    &:active {\n      background-color: $layer-accent-active;\n    }\n  }\n}\n\n:host(#{$prefix}-tabs[type='contained'][has-secondary-labels])\n  .#{$prefix}--tabs-nav-content-container {\n  block-size: $spacing-10;\n}\n\n:host(#{$prefix}-tabs[type='contained'][has-secondary-labels]) #{$prefix}-tab {\n  block-size: $spacing-10;\n}\n\n:host(#{$prefix}-tab[type='contained'][secondary-label]) {\n  block-size: $spacing-10;\n\n  a.#{$prefix}--tabs__nav-link {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    justify-content: center;\n    padding: 0 $spacing-05;\n    block-size: $spacing-10;\n    line-height: normal;\n  }\n\n  .#{$prefix}--tabs__nav-item-label-wrapper {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .#{$prefix}--tabs__nav-item-label {\n    line-height: var(--cds-body-compact-01-line-height);\n  }\n}\n\n:host(#{$prefix}-tab[type='contained'][secondary-label][selected]),\n:host(#{$prefix}-tab[type='contained'][secondary-label][selected]:hover) {\n  a.#{$prefix}--tabs__nav-link {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    justify-content: center;\n    padding: 0 $spacing-05;\n    line-height: normal;\n  }\n}\n\n:host(#{$prefix}-tab[type='contained']) {\n  .#{$prefix}--tabs__nav-item-secondary-label {\n    @include type-style('label-01');\n\n    display: block;\n    overflow: hidden;\n    color: $text-secondary;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n\n:host(#{$prefix}-tab[type='contained'][selected]) {\n  .#{$prefix}--tabs__nav-item-secondary-label {\n    color: $text-primary;\n  }\n}\n\n:host(#{$prefix}-tab[type='contained'][disabled]) {\n  .#{$prefix}--tabs__nav-item-secondary-label {\n    color: $text-on-color-disabled;\n  }\n}\n\n:host(#{$prefix}-tabs[type='contained'][full-width]) {\n  display: flex;\n  inline-size: 100%;\n\n  .#{$prefix}--tabs-nav-content-container {\n    overflow: visible;\n    flex: 1 1 0%;\n  }\n\n  .#{$prefix}--tabs-nav-content,\n  .#{$prefix}--tabs-nav,\n  .#{$prefix}--tab--list {\n    inline-size: 100%;\n  }\n\n  .#{$prefix}--tab--list {\n    display: flex;\n  }\n}\n\n:host(#{$prefix}-tabs[type='contained'][full-width]) #{$prefix}-tab {\n  flex: 1 1 0%;\n  min-inline-size: 0;\n\n  .#{$prefix}--tabs__nav-link {\n    overflow: hidden;\n    inline-size: 100%;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n\n:host(#{$prefix}-tab),\n:host(#{$prefix}-tab-skeleton) {\n  display: flex;\n  background: transparent;\n  inline-size: 100%;\n\n  .#{$prefix}--tabs__nav-item-label-wrapper {\n    display: flex;\n    align-items: inherit;\n    gap: $spacing-03;\n  }\n\n  .#{$prefix}--tabs__nav-link {\n    @include button-reset.reset($width: false);\n    @include focus-outline('reset');\n    @include type-style('body-compact-01');\n\n    position: relative;\n    overflow: hidden;\n\n    align-items: center;\n    padding: $spacing-04 $spacing-05 $spacing-03;\n    border-block-end: $tab-underline-color;\n    color: $text-secondary;\n    inline-size: 100%;\n    text-align: start;\n    text-decoration: none;\n    text-overflow: ellipsis;\n    transition:\n      border $duration-fast-01 motion(standard, productive),\n      outline $duration-fast-01 motion(standard, productive);\n    white-space: nowrap;\n\n    &:focus,\n    &:active {\n      @include focus-outline('outline');\n    }\n  }\n\n  outline: none;\n}\n\n:host(#{$prefix}-tab:not([type='contained']):not([vertical])) {\n  margin-inline-end: convert.to-rem(1px);\n}\n:host(#{$prefix}-tab:not([type='contained'])) {\n  .#{$prefix}--tabs__nav-link {\n    padding-block-end: calc(#{$spacing-03} + #{convert.to-rem(1px)});\n    padding-block-start: calc(#{$spacing-04} - #{convert.to-rem(1px)});\n  }\n}\n\n:host(#{$prefix}-tab:not([type='contained']):not([vertical]):last-of-type) {\n  margin-inline-end: 0;\n}\n:host(#{$prefix}-tab:not([type='contained']))\n  + :host(#{$prefix}-tab:not([type='contained'])) {\n  margin-inline-start: convert.to-rem(1px);\n}\n:host(#{$prefix}-tab[vertical]) {\n  .#{$prefix}--tabs__nav-link {\n    padding-block-end: $spacing-03;\n    padding-block-start: $spacing-03;\n  }\n}\n\n:host(#{$prefix}-tab[badge-indicator][icon-only]:not([icon-size='lg']))\n  #{$prefix}-badge-indicator,\n:host(\n    #{$prefix}-tab[badge-indicator].#{$prefix}--tabs__nav-item--icon-only:not(\n        .#{$prefix}--tabs__nav-item--icon-only__20\n      )\n  )\n  #{$prefix}-badge-indicator {\n  margin-block-start: $spacing-02;\n  margin-inline-end: $spacing-02;\n}\n\n:host(#{$prefix}-tab[icon-only]),\n:host(#{$prefix}-tab.#{$prefix}--tabs__nav-item--icon-only) {\n  flex: 0 0 auto;\n  block-size: $spacing-08;\n  inline-size: $spacing-08;\n\n  .#{$prefix}--tabs__nav-item-label-wrapper {\n    display: flex;\n  }\n\n  #{$prefix}-tooltip {\n    display: block;\n    block-size: 100%;\n    inline-size: 100%;\n    --#{$prefix}-tooltip-padding-block: #{convert.to-rem(2px)};\n    --#{$prefix}-popover-caret-width: #{convert.to-rem(8px)};\n    --#{$prefix}-popover-caret-height: #{convert.to-rem(4px)};\n    --#{$prefix}-popover-offset: #{convert.to-rem(8px)};\n  }\n\n  #{$prefix}-tooltip::part(popover-container) {\n    display: block;\n    block-size: 100%;\n    inline-size: 100%;\n  }\n\n  .#{$prefix}--tabs__nav-link {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    block-size: 100%;\n    inline-size: 100%;\n  }\n\n  ::slotted(svg) {\n    display: block;\n    fill: currentColor;\n  }\n}\n\n:host(#{$prefix}-tab[icon-only]:not([type='contained'])),\n:host(\n    #{$prefix}-tab.#{$prefix}--tabs__nav-item--icon-only:not([type='contained'])\n  ) {\n  .#{$prefix}--tabs__nav-item-label-wrapper {\n    position: relative;\n    inset-block-start: convert.to-rem(1px);\n  }\n}\n\n:host(#{$prefix}-tab[icon-only][icon-size='lg']),\n:host(#{$prefix}-tab.#{$prefix}--tabs__nav-item--icon-only__20) {\n  block-size: $spacing-09;\n  inline-size: $spacing-09;\n}\n\n:host(#{$prefix}-tab[selected]) {\n  .#{$prefix}--tabs__nav-link {\n    @include type-style('heading-compact-01');\n\n    border-block-end: $spacing-01 solid $border-interactive;\n\n    &,\n    // Need to override Carbon core's non-selected focus color\n    &:focus,\n    &:active {\n      color: $text-primary;\n    }\n  }\n\n  display: flex;\n  background-color: transparent;\n  transition: color $duration-fast-01 motion(standard, productive);\n\n  &:hover {\n    background-color: transparent;\n  }\n}\n\n:host(#{$prefix}-tab:hover:not([selected]):not([vertical])) {\n  background-color: transparent;\n\n  a.#{$prefix}--tabs__nav-link {\n    border-block-end: $tab-underline-color-hover;\n    color: $text-primary;\n  }\n}\n\n:host(#{$prefix}-tab[icon-only]:hover),\n:host(#{$prefix}-tab.#{$prefix}--tabs__nav-item--icon-only:hover) {\n  box-shadow: none;\n}\n\n:host(#{$prefix}-tabs[type='contained'])\n  .#{$prefix}--tabs-nav-content-container {\n  block-size: layout.size('height');\n}\n\n:host(#{$prefix}-tab[type='contained']) {\n  background-color: $layer-accent-01;\n\n  a.#{$prefix}--tabs__nav-link {\n    padding: $spacing-03 $spacing-05;\n    block-size: layout.size('height');\n    // height - vertical padding\n    line-height: calc(#{layout.size('height')} - (#{$spacing-03} * 2));\n  }\n}\n\n:host(#{$prefix}-tab[type='contained']),\n:host(#{$prefix}-tab[type='contained']:hover) {\n  a.#{$prefix}--tabs__nav-link {\n    border-block-end: none;\n    // Draws the border without affecting the inner-content\n    box-shadow: rem(-1px) 0 0 0 $border-strong;\n  }\n}\n\n:host(#{$prefix}-tab[type='contained'][hide-divider])\n  a.#{$prefix}--tabs__nav-link {\n  box-shadow: rem(-1px) 0 0 0 transparent;\n}\n\n// `[role]` is only for specificity.\n// We have `:not()` usage in the corresponding Carbon core style\n// which puts specificity of \"specific\" scenario though the style is for \"regular\" scenario\n:host(#{$prefix}-tab[disabled][role]),\n:host(#{$prefix}-tab[disabled][role]:hover) {\n  background-color: transparent;\n  box-shadow: none;\n  cursor: not-allowed;\n  outline: none;\n\n  .#{$prefix}--tabs__nav-link {\n    border-block-end: $tab-underline-color;\n    color: $tab-text-disabled;\n    outline: none;\n    pointer-events: none;\n  }\n}\n\n:host(#{$prefix}-tab[type='contained'][disabled][role])\n  .#{$prefix}--tabs__nav-link {\n  background-color: $button-disabled;\n  border-block-end: none;\n  color: $text-on-color-disabled;\n}\n\n:host(#{$prefix}-tab[type='contained'][selected]),\n:host(#{$prefix}-tab[type='contained'][selected]:hover) {\n  background-color: $layer-01;\n\n  .#{$prefix}--tabs__nav-link {\n    border-block-end: none;\n    // Draws the border without affecting the inner-content\n    box-shadow: inset 0 $spacing-01 0 0 $interactive;\n    // height - vertical padding\n    line-height: calc(#{layout.size('height')} - (#{$spacing-03} * 2));\n  }\n\n  .#{$prefix}--tabs__nav-link:focus,\n  .#{$prefix}--tabs__nav-link:active {\n    box-shadow: none;\n  }\n}\n\n:host(#{$prefix}-tab[type='contained']:hover) {\n  background-color: $layer-accent-01;\n}\n:host(#{$prefix}-tab[type='contained']) {\n  .#{$prefix}--tabs__nav-link:hover {\n    background-color: $layer-accent-hover;\n  }\n}\n\n// Disabled tab never gets selected, but we guard for manual addition of `selected` attribute\n:host(#{$prefix}-tab[disabled][selected]),\n:host(#{$prefix}-tab[disabled][selected]:hover),\n:host(#{$prefix}-tab[disabled][in-focus][selected]),\n:host(#{$prefix}-tab[disabled][in-focus][selected]:hover) {\n  display: flex;\n  background-color: transparent;\n  box-shadow: none;\n\n  @include focus-outline('reset');\n\n  .#{$prefix}--tabs__nav-link {\n    @include type-style('body-short-01');\n\n    border-block-end: $tab-underline-color;\n\n    color: $tab-text-disabled;\n\n    &:focus,\n    &:active {\n      border-block-end-width: 3px;\n    }\n  }\n}\n\n:host(#{$prefix}-tabs-skeleton) .#{$prefix}--tabs-trigger {\n  @include skeleton;\n\n  inline-size: rem(100px);\n}\n\n:host(#{$prefix}-tab-skeleton) {\n  margin-inline-start: $spacing-01;\n\n  .#{$prefix}--tabs__nav-link {\n    @include skeleton;\n\n    display: flex;\n    align-items: center;\n    padding: 0 layout.density('padding-inline');\n    background-color: transparent;\n    block-size: 100%;\n    border-block-end: 2px solid $skeleton-element;\n    inline-size: 10rem;\n\n    &::before {\n      display: none;\n      content: none;\n    }\n  }\n\n  .#{$prefix}--tabs__nav-item {\n    @include reset;\n\n    position: relative;\n    display: flex;\n    flex: 1 0 auto;\n    padding: 0;\n    cursor: pointer;\n    transition: background-color $duration-fast-01 motion(standard, productive);\n  }\n\n  span {\n    @include skeleton;\n\n    display: block;\n    block-size: convert.to-rem(14px);\n    inline-size: 100%;\n  }\n}\n\n:host(#{$prefix}-tab-skeleton) {\n  @extend .#{$prefix}--tabs__nav-item;\n}\n\n:host(#{$prefix}-tabs-skeleton) {\n  @extend .#{$prefix}--tabs;\n  @extend .#{$prefix}--skeleton;\n}\n\n:host(#{$prefix}-tabs-skeleton[contained]) {\n  @extend .#{$prefix}--tabs--contained;\n}\n\n:host(#{$prefix}-tab-skeleton:first-of-type) {\n  margin-inline-start: 0;\n}\n\n// Windows HCM fix\n:host(#{$prefix}-tab[selected]) .#{$prefix}--tabs__nav-link {\n  @include high-contrast-mode {\n    background-color: SelectedItem;\n  }\n}\n\n:host(#{$prefix}-tab[vertical]) .#{$prefix}--tabs__nav-link {\n  display: flex;\n  align-items: center;\n  border-block-end: 1px solid $border-subtle;\n}\n\n:host(#{$prefix}-tab[vertical][selected]) .#{$prefix}--tabs__nav-link {\n  border-block-end: 1px solid $border-subtle;\n}\n\n:host(#{$prefix}-tab[vertical][disabled]) .#{$prefix}--tabs__nav-link {\n  border-block-end: 1px solid $border-subtle;\n}\n\n//-----------------------------\n// Vertical Tabs Wrapper\n//-----------------------------\n\n:host(#{$prefix}-tabs-vertical) {\n  @include emit-layout-tokens();\n  @include layout.use('density', $default: 'normal');\n\n  grid-column: span 2;\n  max-block-size: none;\n\n  &.#{$prefix}--css-grid {\n    box-shadow: inset -1px 0 $border-subtle;\n  }\n\n  ::slotted(#{$prefix}-tabs) {\n    grid-column: span 2;\n\n    @include breakpoint(lg) {\n      grid-column: span 4;\n    }\n  }\n\n  // Shadow-DOM wrapper for the panel slot — styled directly (no ::slotted needed)\n  .#{$prefix}-panel-container {\n    @include update_fields_on_layer;\n\n    background: $layer;\n    grid-column: 3 / -1;\n    overflow-y: auto;\n\n    @include breakpoint(lg) {\n      grid-column: 5 / -1;\n    }\n  }\n}\n\n// Slotted tab panel divs — match React's cds--tab-content styles\n:host(#{$prefix}-tabs-vertical) ::slotted([role='tabpanel']) {\n  // stylelint-disable-next-line declaration-no-important\n  padding: layout.density('padding-inline') !important;\n  outline: none;\n}\n\n:host(#{$prefix}-tabs-vertical)\n  .panel-container\n  ::slotted([role='tabpanel']:focus) {\n  @include focus-outline('outline');\n}\n\n// cds-tabs when slotted inside cds-tabs-vertical (slot=\"tabs\")\n:host(#{$prefix}-tabs-vertical) ::slotted(#{$prefix}-tabs) {\n  background: $layer;\n  box-shadow: inset -1px 0 $border-subtle;\n  max-block-size: none;\n}\n\n// Internal styles for cds-tabs when inside cds-tabs-vertical\n// These are applied via a CSS custom property / attribute set by the wrapper\n:host(#{$prefix}-tabs[vertical]) {\n  .#{$prefix}--tabs-nav-content-container {\n    block-size: 100%;\n    overflow-x: hidden;\n    overflow-y: auto;\n  }\n\n  .#{$prefix}--tabs-nav-content {\n    position: relative;\n    block-size: 100%;\n  }\n\n  .#{$prefix}--tabs-nav {\n    position: relative;\n  }\n\n  .#{$prefix}--tab--list {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .#{$prefix}--tab--overflow-nav-button {\n    display: none;\n  }\n\n  .#{$prefix}--tabs__nav-item-label {\n    display: -webkit-box;\n    overflow: hidden;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 2;\n    line-height: var(--cds-body-compact-01-line-height);\n    text-overflow: ellipsis;\n    white-space: normal;\n  }\n}\n\n:host(#{$prefix}-tab[vertical]) {\n  flex: none;\n  background-color: $layer-01;\n  block-size: $spacing-10;\n  border-inline-end: 1px solid $border-subtle;\n  box-shadow: inset 3px 0 0 0 $border-subtle;\n  inline-size: 100%;\n\n  .#{$prefix}--tabs__nav-item-label {\n    display: -webkit-box;\n    overflow: hidden;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 2;\n    line-height: var(--cds-body-compact-01-line-height);\n    text-overflow: ellipsis;\n    white-space: normal;\n  }\n}\n\n:host(#{$prefix}-tab[vertical][disabled]) {\n  border-inline-end: 1px solid $border-subtle;\n  box-shadow: inset 3px 0 0 0 $border-subtle;\n}\n\n:host(#{$prefix}-tab[vertical]:hover),\n:host(#{$prefix}-tab[vertical][disabled]:hover) {\n  .#{$prefix}--tabs__nav-link {\n    border-block-end: 1px solid $border-subtle;\n  }\n}\n\n:host(#{$prefix}-tab[vertical][selected]) {\n  border-inline: none;\n  box-shadow: inset 3px 0 0 0 $border-interactive;\n}\n\n:host(#{$prefix}-tab[vertical]:not([selected]):not([disabled]):hover) {\n  background-color: $layer-hover;\n  box-shadow: inset 3px 0 0 0 $border-strong;\n}\n:host(#{$prefix}-tab) {\n  .#{$prefix}--tabs__nav-link--dismissable {\n    display: flex;\n    align-items: flex-start;\n    padding-inline-end: $spacing-08;\n  }\n  .#{$prefix}--tabs--dismissable.#{$prefix}--tabs--contained {\n    padding-inline-end: calc($spacing-09 - 1px);\n  }\n}\n:host(#{$prefix}-tab[type='contained']) {\n  .#{$prefix}--tabs__nav-link.#{$prefix}--tabs__nav-link--dismissable {\n    padding-inline-end: calc($spacing-09 - 1px);\n  }\n}\n:host(#{$prefix}-tab) {\n  .#{$prefix}--tabs__nav-item--close {\n    position: relative;\n    display: flex;\n    align-items: center;\n    inset-inline-start: calc(-#{$spacing-04} - 1px);\n    margin-inline-start: calc(-#{$spacing-06} + 1px);\n\n    &[disabled] {\n      pointer-events: none;\n    }\n  }\n  .#{$prefix}--tabs__nav-item--close--hidden {\n    display: none;\n  }\n  .#{$prefix}--tabs__nav-item--close::part(button) {\n    @include button-reset.reset();\n\n    block-size: convert.to-rem(24px);\n    inline-size: convert.to-rem(24px);\n    padding-block: $spacing-02;\n    padding-inline: $spacing-02;\n    pointer-events: inherit;\n\n    svg {\n      block-size: convert.to-rem(16px);\n      fill: $text-secondary;\n      inline-size: convert.to-rem(16px);\n    }\n\n    svg:hover {\n      fill: $icon-primary;\n    }\n\n    &:hover {\n      background-color: $layer-hover;\n    }\n\n    &:focus,\n    &:active {\n      @include focus-outline('outline');\n    }\n  }\n}\n"],"mappings":""}

package/es-custom/components/button/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC,OAAO,EACL,WAAW,EACX,WAAW,EACX,WAAW,EACX,wBAAwB,EACxB,uBAAuB,EACxB,MAAM,QAAQ,CAAC;AAMhB,OAAO,EACL,WAAW,EACX,WAAW,EACX,WAAW,EACX,wBAAwB,EACxB,uBAAuB,GACxB,CAAC;;;;;;;;;;uBAJI,CAAC;;;;;;;AAMP;;;;;GAKG;AACH,cACM,SAAU,SAAQ,cAAyC;IAC/D;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAS;IAEzB;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAazB,OAAO,CAAC,oBAAoB;IAO5B,OAAO,CAAC,kBAAkB;IAY1B,OAAO,CAAC,iBAAiB,KAAA;IAQzB,OAAO,CAAC,WAAW,CAEjB;IAEF;;OAEG;IAIH,OAAO,CAAC,eAAe,CAErB;IAEF;;;OAGG;IAIH,OAAO,CAAC,YAAY,CAElB;IAEF;;;OAGG;IAIH,OAAO,CAAC,eAAe,CAErB;IAEF;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,WAAW,UAAS;IAEpB;;OAEG;IAEH,eAAe,MAAC;IAEhB;;OAEG;IAEH,iBAAiB,SAAY;IAE7B;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,QAAQ,EAAG,MAAM,CAAC;IAElB;;OAEG;IAEH,cAAc,UAAS;IAEvB;;OAEG;IAEH,IAAI,EAAG,MAAM,CAAC;IAEd;;OAEG;IAEH,QAAQ,EAAG,MAAM,CAAC;IAElB;;OAEG;IAEH,YAAY,UAAS;IAErB;;OAEG;IAEH,UAAU,UAAS;IAEnB;;OAEG;IAEH,IAAI,cAAuB;IAE3B;;OAEG;IAEH,QAAQ,SAAY;IAEpB;;OAEG;IAEH,WAAW,UAAS;IAEpB;;OAEG;IAEH,IAAI,EAAG,MAAM,CAAC;IAEd;;OAEG;IAEH,GAAG,EAAG,MAAM,CAAC;IAEb;;OAEG;IAEH,IAAI,SAAQ;IAEZ;;OAEG;IAEH,QAAQ,SAAK;IAEb;;OAEG;IAEH,MAAM,EAAG,MAAM,CAAC;IAEhB;;;OAGG;IAEH,gBAAgB,2BAAmC;IAEnD;;;OAGG;IAEH,eAAe,0BAA+B;IAE9C;;;OAGG;IAEH,WAAW,EAAG,MAAM,CAAC;IAErB;;OAEG;IAEH,IAAI,cAAsB;IAE1B,MAAM;IAyJN,MAAM,CAAC,iBAAiB;;;;;;;MAGtB;IACF,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,SAAS,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC,OAAO,EACL,WAAW,EACX,WAAW,EACX,WAAW,EACX,wBAAwB,EACxB,uBAAuB,EACxB,MAAM,QAAQ,CAAC;AAMhB,OAAO,EACL,WAAW,EACX,WAAW,EACX,WAAW,EACX,wBAAwB,EACxB,uBAAuB,GACxB,CAAC;;;;;;;;;;uBAJI,CAAC;;;;;;;AAMP;;;;;GAKG;AACH,cACM,SAAU,SAAQ,cAAyC;IAC/D;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAS;IAEzB;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAazB,OAAO,CAAC,oBAAoB;IAO5B,OAAO,CAAC,kBAAkB;IAY1B,OAAO,CAAC,iBAAiB,KAAA;IAQzB,OAAO,CAAC,WAAW,CAEjB;IAEF;;OAEG;IAIH,OAAO,CAAC,eAAe,CAErB;IAEF;;;OAGG;IAIH,OAAO,CAAC,YAAY,CAElB;IAEF;;;OAGG;IAIH,OAAO,CAAC,eAAe,CAErB;IAEF;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,WAAW,UAAS;IAEpB;;OAEG;IAEH,eAAe,MAAC;IAEhB;;OAEG;IAEH,iBAAiB,SAAM;IAEvB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,QAAQ,EAAG,MAAM,CAAC;IAElB;;OAEG;IAEH,cAAc,UAAS;IAEvB;;OAEG;IAEH,IAAI,EAAG,MAAM,CAAC;IAEd;;OAEG;IAEH,QAAQ,EAAG,MAAM,CAAC;IAElB;;OAEG;IAEH,YAAY,UAAS;IAErB;;OAEG;IAEH,UAAU,UAAS;IAEnB;;OAEG;IAEH,IAAI,cAAuB;IAE3B;;OAEG;IAEH,QAAQ,SAAY;IAEpB;;OAEG;IAEH,WAAW,UAAS;IAEpB;;OAEG;IAEH,IAAI,EAAG,MAAM,CAAC;IAEd;;OAEG;IAEH,GAAG,EAAG,MAAM,CAAC;IAEb;;OAEG;IAEH,IAAI,SAAQ;IAEZ;;OAEG;IAEH,QAAQ,SAAK;IAEb;;OAEG;IAEH,MAAM,EAAG,MAAM,CAAC;IAEhB;;;OAGG;IAEH,gBAAgB,2BAAmC;IAEnD;;;OAGG;IAEH,eAAe,0BAA+B;IAE9C;;;OAGG;IAEH,WAAW,EAAG,MAAM,CAAC;IAErB;;OAEG;IAEH,IAAI,cAAsB;IAE1B,MAAM;IA8JN,MAAM,CAAC,iBAAiB;;;;;;;MAGtB;IACF,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,SAAS,CAAC"}

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

@@ -48,7 +48,7 @@ let CDSButton = class CDSButton extends HostListenerMixin(FocusMixin(LitElement)
 		};
 		this.autofocus = false;
 		this.batchAction = false;
-		this.dangerDescription = "danger";
+		this.dangerDescription = "";
 		this.disabled = false;
 		this.hasMainContent = false;
 		this.isExpressive = false;
@@ -108,7 +108,7 @@ let CDSButton = class CDSButton extends HostListenerMixin(FocusMixin(LitElement)
 			};
 		}
 		const classes = classMap(defaultClasses);
-		const isDanger = kind?.includes("danger");
+		const hasDangerDescription = kind?.includes("danger") && Boolean(dangerDescription);
 		if (href) return disabled ? html`
             <p id="button" part="button" class="${classes}">
               <slot @slotchange="${handleSlotChange}"></slot>
@@ -178,8 +178,10 @@ let CDSButton = class CDSButton extends HostListenerMixin(FocusMixin(LitElement)
             tabindex="${tabIndex}"
             type="${ifDefined(type)}"
             aria-label="${ifDefined(tooltipText)}"
-            aria-describedby="badge-indicator">
-            ${isDanger ? html`<span class="${"cds-custom"}--visually-hidden"
+            aria-describedby="${ifDefined(hasDangerDescription ? "danger-description" : void 0)}">
+            ${hasDangerDescription ? html`<span
+                  id="danger-description"
+                  class="${"cds-custom"}--visually-hidden"
                   >${dangerDescription}</span
                 >` : ``}
             <slot @slotchange="${handleSlotChange}"></slot>

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

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":["styles","customElement"],"sources":["../../../src/components/button/button.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 { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport {\n  BUTTON_KIND,\n  BUTTON_TYPE,\n  BUTTON_SIZE,\n  BUTTON_TOOLTIP_ALIGNMENT,\n  BUTTON_TOOLTIP_POSITION,\n} from './defs';\nimport styles from './button.scss?lit';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport {\n  BUTTON_KIND,\n  BUTTON_TYPE,\n  BUTTON_SIZE,\n  BUTTON_TOOLTIP_ALIGNMENT,\n  BUTTON_TOOLTIP_POSITION,\n};\n\n/**\n * Button.\n *\n * @element cds-custom-button\n * @csspart button The button.\n */\n@customElement(`${prefix}-button`)\nclass CDSButton extends HostListenerMixin(FocusMixin(LitElement)) {\n  /**\n   * `true` if there is an icon.\n   */\n  private _hasIcon = false;\n\n  /**\n   * Handles `slotchange` event.\n   */\n  private _handleSlotChange({ target }: Event) {\n    const { name } = target as HTMLSlotElement;\n    const hasContent = (target as HTMLSlotElement).assignedNodes().some(\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n      (node) => node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim()\n    );\n    this[name === 'icon' ? '_hasIcon' : 'hasMainContent'] = hasContent;\n    this.requestUpdate();\n  }\n\n  @HostListener('click', { capture: true })\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore\n  private _handleDisabledClick(event: Event) {\n    const { disabled } = this;\n    if (disabled) {\n      event.stopPropagation();\n    }\n  }\n\n  private _checkBadgeWarning() {\n    const hasBadgeIndicator = this.querySelector(`${prefix}-badge-indicator`);\n    if (\n      hasBadgeIndicator &&\n      (this.kind !== BUTTON_KIND.GHOST || this.size !== BUTTON_SIZE.LARGE)\n    ) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        `The badge indicator must be used with kind='ghost' and size='lg'`\n      );\n    }\n  }\n  updated(changedProperties) {\n    super.updated?.(changedProperties);\n    this._checkBadgeWarning();\n  }\n\n  @HostListener('mouseover')\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 _handleOver = () => {\n    this.openTooltip = true;\n  };\n\n  /**\n   * Handles `keydown` event on this element.\n   */\n  @HostListener('mouseout')\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 _handleHoverOut = async () => {\n    this.openTooltip = false;\n  };\n\n  /**\n   * Handles `keydown` event on this element.\n   * Space & enter will toggle state, Escape will only close.\n   */\n  @HostListener('focus')\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 _handleFocus = async () => {\n    this.openTooltip = true;\n  };\n\n  /**\n   * Handles `keydown` event on this element.\n   * Space & enter will toggle state, Escape will only close.\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 _handleFocusout = async () => {\n    this.openTooltip = false;\n  };\n\n  /**\n   * `true` if the button should have input focus when the page loads.\n   */\n  @property({ type: Boolean, reflect: true })\n  autofocus = false;\n\n  /**\n   * `true` if the button is being used within a data table batch action toolbar\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'batch-action' })\n  batchAction = false;\n\n  /**\n   * Specify an optional className to be added to your Button\n   */\n  @property({ type: String, reflect: true, attribute: 'button-class-name' })\n  buttonClassName;\n\n  /**\n   * Specify the message read by screen readers for the danger button variants\n   */\n  @property({ type: String, reflect: true, attribute: 'danger-description' })\n  dangerDescription = 'danger';\n\n  /**\n   * Specify whether the Button should be disabled, or not\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * The default file name, used if this button is rendered as `<a>`.\n   */\n  @property({ type: String, reflect: true })\n  download!: string;\n\n  /**\n   * `true` if there is a non-icon content.\n   */\n  @property({ reflect: true, attribute: 'has-main-content', type: Boolean })\n  hasMainContent = false;\n\n  /**\n   * Optionally specify an href for your Button to become an `<a>` element\n   */\n  @property({ type: String, reflect: true })\n  href!: string;\n\n  /**\n   * The language of what `href` points to, if this button is rendered as `<a>`.\n   */\n  @property({ type: String, reflect: true })\n  hreflang!: string;\n\n  /**\n   * Specify whether the Button is expressive, or not.\n   */\n  @property({ type: Boolean, reflect: true })\n  isExpressive = false;\n\n  /**\n   * Specify whether the Button is currently selected. Only applies to the icon only Ghost variant.\n   */\n  @property({ type: Boolean, reflect: true })\n  isSelected = false;\n\n  /**\n   * Specify the kind of Button you want to create. `primary`, `secondary`,`tertiary`, `ghost`, `danger`, `danger-tertiary`, `danger-ghost`\n   */\n  @property({ type: String, reflect: true })\n  kind = BUTTON_KIND.PRIMARY;\n\n  /**\n   * The a11y role for `<a>`.\n   */\n  @property({ type: String, attribute: 'link-role' })\n  linkRole = 'button';\n\n  /**\n   * Boolean to determine if tooltip is open.\n   */\n  @property({ type: Boolean })\n  openTooltip = false;\n\n  /**\n   * URLs to ping, if this button is rendered as `<a>`.\n   */\n  @property({ type: String, reflect: true })\n  ping!: string;\n\n  /**\n   * Optionally specify a `rel` when using an `<a>` element.\n   */\n  @property({ type: String, reflect: true })\n  rel!: string;\n\n  /**\n   * Specify the size of the button, from the following list of sizes: `xs`, `sm`, `md`, `lg`, `xl`, `2xl`\n   */\n  @property({ type: String, reflect: true })\n  size = 'lg';\n\n  /**\n   * Optional prop to specify the tabIndex of the Button\n   */\n  @property({ type: Number, attribute: 'tab-index', reflect: true })\n  tabIndex = 0;\n\n  /**\n   * Optionally specify a `target` when using an `<a>` element.\n   */\n  @property({ type: String, reflect: true })\n  target!: string;\n\n  /**\n   * Specify the alignment of the tooltip to the icon-only button.\n   * Can be one of: start, center, or end.\n   */\n  @property({ type: String, reflect: true, attribute: 'tooltip-alignment' })\n  tooltipAlignment = BUTTON_TOOLTIP_ALIGNMENT.CENTER;\n\n  /**\n   * Specify the direction of the tooltip for icon-only buttons.\n   * Can be either top, right, bottom, or left.\n   */\n  @property({ type: String, reflect: true, attribute: 'tooltip-position' })\n  tooltipPosition = BUTTON_TOOLTIP_POSITION.TOP;\n\n  /**\n   * If rendering an `icon-only` button through `slot=\"icon\"`, Specify the text to be rendered in the tooltip. If using\n   * `cds-custom-badge-indicator` with no count prop then the text should include describing there is a new notification.\n   */\n  @property({ type: String, reflect: true, attribute: 'tooltip-text' })\n  tooltipText!: string;\n\n  /**\n   * Optional prop to specify the type of the Button.\n   */\n  @property({ type: String, reflect: true })\n  type = BUTTON_TYPE.BUTTON;\n\n  render() {\n    const {\n      autofocus,\n      buttonClassName,\n      dangerDescription,\n      disabled,\n      download,\n      href,\n      hreflang,\n      kind,\n      isExpressive,\n      isSelected,\n      linkRole,\n      openTooltip,\n      ping,\n      rel,\n      size,\n      tabIndex,\n      target,\n      tooltipAlignment,\n      tooltipPosition,\n      tooltipText,\n      type,\n      _hasIcon: hasIcon,\n      hasMainContent,\n      _handleSlotChange: handleSlotChange,\n    } = this;\n\n    let defaultClasses = {\n      [`${prefix}--btn`]: true,\n      [`${prefix}--btn--${kind}`]: kind,\n      [`${prefix}--btn--danger--tertiary`]:\n        kind === BUTTON_KIND.DANGER_TERTIARY,\n      [`${prefix}--btn--danger--ghost`]: kind === BUTTON_KIND.DANGER_GHOST,\n      [`${prefix}--btn--disabled`]: disabled,\n      [`${prefix}--btn--icon-only`]: hasIcon && !hasMainContent,\n      [`${prefix}--btn--${size}`]: size,\n      [`${prefix}--layout--size-${size}`]: size,\n      [`${prefix}-ce--btn--has-icon`]: hasIcon,\n      [`${prefix}--btn--expressive`]: isExpressive,\n      [`${prefix}--btn--selected`]: isSelected && kind === 'ghost',\n    };\n\n    if (buttonClassName) {\n      const outputObject = {};\n      buttonClassName?.split(' ').forEach((element) => {\n        outputObject[element] = true;\n      });\n      defaultClasses = { ...defaultClasses, ...outputObject };\n    }\n    const classes = classMap(defaultClasses);\n\n    const isDanger = kind?.includes('danger');\n\n    if (href) {\n      return disabled\n        ? html`\n            <p id=\"button\" part=\"button\" class=\"${classes}\">\n              <slot @slotchange=\"${handleSlotChange}\"></slot>\n              <slot name=\"icon\" @slotchange=\"${handleSlotChange}\"></slot>\n            </p>\n          `\n        : html`\n            <a\n              id=\"button\"\n              part=\"button\"\n              role=\"${ifDefined(linkRole)}\"\n              class=\"${classes}\"\n              download=\"${ifDefined(download)}\"\n              href=\"${ifDefined(href)}\"\n              hreflang=\"${ifDefined(hreflang)}\"\n              ping=\"${ifDefined(ping)}\"\n              rel=\"${ifDefined(rel)}\"\n              target=\"${ifDefined(target)}\"\n              type=\"${ifDefined(type)}\"\n              tabindex=\"${tabIndex}\"\n              aria-describedby=\"badge-indicator\">\n              <slot @slotchange=\"${handleSlotChange}\"></slot>\n              <slot name=\"icon\" @slotchange=\"${handleSlotChange}\"></slot>\n            </a>\n            ${html`<slot id=\"badge-indicator\" name=\"badge-indicator\"></slot>` ??\n            !disabled}\n          `;\n    }\n\n    const alignmentClass =\n      tooltipAlignment &&\n      (tooltipPosition === BUTTON_TOOLTIP_POSITION.TOP ||\n        tooltipPosition === BUTTON_TOOLTIP_POSITION.BOTTOM)\n        ? `-${tooltipAlignment}`\n        : '';\n\n    const tooltipClasses = classMap({\n      [`${prefix}--popover-container`]: true,\n      [`${prefix}--popover--caret`]: true,\n      [`${prefix}--popover--high-contrast`]: true,\n      [`${prefix}--tooltip`]: true,\n      [`${prefix}--icon-tooltip`]: hasIcon,\n      [`${prefix}--popover--open`]: openTooltip,\n      [`${prefix}--popover--${tooltipPosition}${alignmentClass}`]: tooltipText,\n    });\n\n    return tooltipText && !disabled\n      ? html`\n          <span class=\"${tooltipClasses}\">\n            <button\n              id=\"button\"\n              part=\"button\"\n              class=\"${classes}\"\n              ?autofocus=\"${autofocus}\"\n              ?disabled=\"${disabled}\"\n              tabindex=\"${tabIndex}\"\n              type=\"${ifDefined(type)}\"\n              aria-label=\"${ifDefined(tooltipText)}\"\n              aria-describedby=\"badge-indicator\">\n              <slot @slotchange=\"${handleSlotChange}\"></slot>\n              <slot name=\"icon\" @slotchange=\"${handleSlotChange}\"></slot>\n            </button>\n            <span class=\"${prefix}--popover\">\n              <span\n                class=\"${prefix}--popover-content ${prefix}--tooltip-content\">\n                ${tooltipText}\n              </span>\n              <span class=\"${prefix}--popover-caret\"></span>\n            </span>\n            ${html`<slot id=\"badge-indicator\" name=\"badge-indicator\"></slot>` ??\n            !disabled}\n          </span>\n        `\n      : html`\n          <button\n            id=\"button\"\n            part=\"button\"\n            class=\"${classes}\"\n            ?autofocus=\"${autofocus}\"\n            ?disabled=\"${disabled}\"\n            tabindex=\"${tabIndex}\"\n            type=\"${ifDefined(type)}\"\n            aria-label=\"${ifDefined(tooltipText)}\"\n            aria-describedby=\"badge-indicator\">\n            ${isDanger\n              ? html`<span class=\"${prefix}--visually-hidden\"\n                  >${dangerDescription}</span\n                >`\n              : ``}\n            <slot @slotchange=\"${handleSlotChange}\"></slot>\n            <slot name=\"icon\" @slotchange=\"${handleSlotChange}\"></slot>\n          </button>\n          ${html`<slot id=\"badge-indicator\" name=\"badge-indicator\"></slot>` ??\n          !disabled}\n        `;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles;\n}\n\nexport default CDSButton;\n"],"mappings":"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"}
+{"version":3,"file":"button.js","names":["styles","customElement"],"sources":["../../../src/components/button/button.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 { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport {\n  BUTTON_KIND,\n  BUTTON_TYPE,\n  BUTTON_SIZE,\n  BUTTON_TOOLTIP_ALIGNMENT,\n  BUTTON_TOOLTIP_POSITION,\n} from './defs';\nimport styles from './button.scss?lit';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport {\n  BUTTON_KIND,\n  BUTTON_TYPE,\n  BUTTON_SIZE,\n  BUTTON_TOOLTIP_ALIGNMENT,\n  BUTTON_TOOLTIP_POSITION,\n};\n\n/**\n * Button.\n *\n * @element cds-custom-button\n * @csspart button The button.\n */\n@customElement(`${prefix}-button`)\nclass CDSButton extends HostListenerMixin(FocusMixin(LitElement)) {\n  /**\n   * `true` if there is an icon.\n   */\n  private _hasIcon = false;\n\n  /**\n   * Handles `slotchange` event.\n   */\n  private _handleSlotChange({ target }: Event) {\n    const { name } = target as HTMLSlotElement;\n    const hasContent = (target as HTMLSlotElement).assignedNodes().some(\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n      (node) => node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim()\n    );\n    this[name === 'icon' ? '_hasIcon' : 'hasMainContent'] = hasContent;\n    this.requestUpdate();\n  }\n\n  @HostListener('click', { capture: true })\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore\n  private _handleDisabledClick(event: Event) {\n    const { disabled } = this;\n    if (disabled) {\n      event.stopPropagation();\n    }\n  }\n\n  private _checkBadgeWarning() {\n    const hasBadgeIndicator = this.querySelector(`${prefix}-badge-indicator`);\n    if (\n      hasBadgeIndicator &&\n      (this.kind !== BUTTON_KIND.GHOST || this.size !== BUTTON_SIZE.LARGE)\n    ) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        `The badge indicator must be used with kind='ghost' and size='lg'`\n      );\n    }\n  }\n  updated(changedProperties) {\n    super.updated?.(changedProperties);\n    this._checkBadgeWarning();\n  }\n\n  @HostListener('mouseover')\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 _handleOver = () => {\n    this.openTooltip = true;\n  };\n\n  /**\n   * Handles `keydown` event on this element.\n   */\n  @HostListener('mouseout')\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 _handleHoverOut = async () => {\n    this.openTooltip = false;\n  };\n\n  /**\n   * Handles `keydown` event on this element.\n   * Space & enter will toggle state, Escape will only close.\n   */\n  @HostListener('focus')\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 _handleFocus = async () => {\n    this.openTooltip = true;\n  };\n\n  /**\n   * Handles `keydown` event on this element.\n   * Space & enter will toggle state, Escape will only close.\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 _handleFocusout = async () => {\n    this.openTooltip = false;\n  };\n\n  /**\n   * `true` if the button should have input focus when the page loads.\n   */\n  @property({ type: Boolean, reflect: true })\n  autofocus = false;\n\n  /**\n   * `true` if the button is being used within a data table batch action toolbar\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'batch-action' })\n  batchAction = false;\n\n  /**\n   * Specify an optional className to be added to your Button\n   */\n  @property({ type: String, reflect: true, attribute: 'button-class-name' })\n  buttonClassName;\n\n  /**\n   * Specify the message read by screen readers for the danger button variants\n   */\n  @property({ type: String, reflect: true, attribute: 'danger-description' })\n  dangerDescription = '';\n\n  /**\n   * Specify whether the Button should be disabled, or not\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * The default file name, used if this button is rendered as `<a>`.\n   */\n  @property({ type: String, reflect: true })\n  download!: string;\n\n  /**\n   * `true` if there is a non-icon content.\n   */\n  @property({ reflect: true, attribute: 'has-main-content', type: Boolean })\n  hasMainContent = false;\n\n  /**\n   * Optionally specify an href for your Button to become an `<a>` element\n   */\n  @property({ type: String, reflect: true })\n  href!: string;\n\n  /**\n   * The language of what `href` points to, if this button is rendered as `<a>`.\n   */\n  @property({ type: String, reflect: true })\n  hreflang!: string;\n\n  /**\n   * Specify whether the Button is expressive, or not.\n   */\n  @property({ type: Boolean, reflect: true })\n  isExpressive = false;\n\n  /**\n   * Specify whether the Button is currently selected. Only applies to the icon only Ghost variant.\n   */\n  @property({ type: Boolean, reflect: true })\n  isSelected = false;\n\n  /**\n   * Specify the kind of Button you want to create. `primary`, `secondary`,`tertiary`, `ghost`, `danger`, `danger-tertiary`, `danger-ghost`\n   */\n  @property({ type: String, reflect: true })\n  kind = BUTTON_KIND.PRIMARY;\n\n  /**\n   * The a11y role for `<a>`.\n   */\n  @property({ type: String, attribute: 'link-role' })\n  linkRole = 'button';\n\n  /**\n   * Boolean to determine if tooltip is open.\n   */\n  @property({ type: Boolean })\n  openTooltip = false;\n\n  /**\n   * URLs to ping, if this button is rendered as `<a>`.\n   */\n  @property({ type: String, reflect: true })\n  ping!: string;\n\n  /**\n   * Optionally specify a `rel` when using an `<a>` element.\n   */\n  @property({ type: String, reflect: true })\n  rel!: string;\n\n  /**\n   * Specify the size of the button, from the following list of sizes: `xs`, `sm`, `md`, `lg`, `xl`, `2xl`\n   */\n  @property({ type: String, reflect: true })\n  size = 'lg';\n\n  /**\n   * Optional prop to specify the tabIndex of the Button\n   */\n  @property({ type: Number, attribute: 'tab-index', reflect: true })\n  tabIndex = 0;\n\n  /**\n   * Optionally specify a `target` when using an `<a>` element.\n   */\n  @property({ type: String, reflect: true })\n  target!: string;\n\n  /**\n   * Specify the alignment of the tooltip to the icon-only button.\n   * Can be one of: start, center, or end.\n   */\n  @property({ type: String, reflect: true, attribute: 'tooltip-alignment' })\n  tooltipAlignment = BUTTON_TOOLTIP_ALIGNMENT.CENTER;\n\n  /**\n   * Specify the direction of the tooltip for icon-only buttons.\n   * Can be either top, right, bottom, or left.\n   */\n  @property({ type: String, reflect: true, attribute: 'tooltip-position' })\n  tooltipPosition = BUTTON_TOOLTIP_POSITION.TOP;\n\n  /**\n   * If rendering an `icon-only` button through `slot=\"icon\"`, Specify the text to be rendered in the tooltip. If using\n   * `cds-custom-badge-indicator` with no count prop then the text should include describing there is a new notification.\n   */\n  @property({ type: String, reflect: true, attribute: 'tooltip-text' })\n  tooltipText!: string;\n\n  /**\n   * Optional prop to specify the type of the Button.\n   */\n  @property({ type: String, reflect: true })\n  type = BUTTON_TYPE.BUTTON;\n\n  render() {\n    const {\n      autofocus,\n      buttonClassName,\n      dangerDescription,\n      disabled,\n      download,\n      href,\n      hreflang,\n      kind,\n      isExpressive,\n      isSelected,\n      linkRole,\n      openTooltip,\n      ping,\n      rel,\n      size,\n      tabIndex,\n      target,\n      tooltipAlignment,\n      tooltipPosition,\n      tooltipText,\n      type,\n      _hasIcon: hasIcon,\n      hasMainContent,\n      _handleSlotChange: handleSlotChange,\n    } = this;\n\n    let defaultClasses = {\n      [`${prefix}--btn`]: true,\n      [`${prefix}--btn--${kind}`]: kind,\n      [`${prefix}--btn--danger--tertiary`]:\n        kind === BUTTON_KIND.DANGER_TERTIARY,\n      [`${prefix}--btn--danger--ghost`]: kind === BUTTON_KIND.DANGER_GHOST,\n      [`${prefix}--btn--disabled`]: disabled,\n      [`${prefix}--btn--icon-only`]: hasIcon && !hasMainContent,\n      [`${prefix}--btn--${size}`]: size,\n      [`${prefix}--layout--size-${size}`]: size,\n      [`${prefix}-ce--btn--has-icon`]: hasIcon,\n      [`${prefix}--btn--expressive`]: isExpressive,\n      [`${prefix}--btn--selected`]: isSelected && kind === 'ghost',\n    };\n\n    if (buttonClassName) {\n      const outputObject = {};\n      buttonClassName?.split(' ').forEach((element) => {\n        outputObject[element] = true;\n      });\n      defaultClasses = { ...defaultClasses, ...outputObject };\n    }\n    const classes = classMap(defaultClasses);\n\n    const isDanger = kind?.includes('danger');\n    const hasDangerDescription = isDanger && Boolean(dangerDescription);\n\n    if (href) {\n      return disabled\n        ? html`\n            <p id=\"button\" part=\"button\" class=\"${classes}\">\n              <slot @slotchange=\"${handleSlotChange}\"></slot>\n              <slot name=\"icon\" @slotchange=\"${handleSlotChange}\"></slot>\n            </p>\n          `\n        : html`\n            <a\n              id=\"button\"\n              part=\"button\"\n              role=\"${ifDefined(linkRole)}\"\n              class=\"${classes}\"\n              download=\"${ifDefined(download)}\"\n              href=\"${ifDefined(href)}\"\n              hreflang=\"${ifDefined(hreflang)}\"\n              ping=\"${ifDefined(ping)}\"\n              rel=\"${ifDefined(rel)}\"\n              target=\"${ifDefined(target)}\"\n              type=\"${ifDefined(type)}\"\n              tabindex=\"${tabIndex}\"\n              aria-describedby=\"badge-indicator\">\n              <slot @slotchange=\"${handleSlotChange}\"></slot>\n              <slot name=\"icon\" @slotchange=\"${handleSlotChange}\"></slot>\n            </a>\n            ${html`<slot id=\"badge-indicator\" name=\"badge-indicator\"></slot>` ??\n            !disabled}\n          `;\n    }\n\n    const alignmentClass =\n      tooltipAlignment &&\n      (tooltipPosition === BUTTON_TOOLTIP_POSITION.TOP ||\n        tooltipPosition === BUTTON_TOOLTIP_POSITION.BOTTOM)\n        ? `-${tooltipAlignment}`\n        : '';\n\n    const tooltipClasses = classMap({\n      [`${prefix}--popover-container`]: true,\n      [`${prefix}--popover--caret`]: true,\n      [`${prefix}--popover--high-contrast`]: true,\n      [`${prefix}--tooltip`]: true,\n      [`${prefix}--icon-tooltip`]: hasIcon,\n      [`${prefix}--popover--open`]: openTooltip,\n      [`${prefix}--popover--${tooltipPosition}${alignmentClass}`]: tooltipText,\n    });\n\n    return tooltipText && !disabled\n      ? html`\n          <span class=\"${tooltipClasses}\">\n            <button\n              id=\"button\"\n              part=\"button\"\n              class=\"${classes}\"\n              ?autofocus=\"${autofocus}\"\n              ?disabled=\"${disabled}\"\n              tabindex=\"${tabIndex}\"\n              type=\"${ifDefined(type)}\"\n              aria-label=\"${ifDefined(tooltipText)}\"\n              aria-describedby=\"badge-indicator\">\n              <slot @slotchange=\"${handleSlotChange}\"></slot>\n              <slot name=\"icon\" @slotchange=\"${handleSlotChange}\"></slot>\n            </button>\n            <span class=\"${prefix}--popover\">\n              <span\n                class=\"${prefix}--popover-content ${prefix}--tooltip-content\">\n                ${tooltipText}\n              </span>\n              <span class=\"${prefix}--popover-caret\"></span>\n            </span>\n            ${html`<slot id=\"badge-indicator\" name=\"badge-indicator\"></slot>` ??\n            !disabled}\n          </span>\n        `\n      : html`\n          <button\n            id=\"button\"\n            part=\"button\"\n            class=\"${classes}\"\n            ?autofocus=\"${autofocus}\"\n            ?disabled=\"${disabled}\"\n            tabindex=\"${tabIndex}\"\n            type=\"${ifDefined(type)}\"\n            aria-label=\"${ifDefined(tooltipText)}\"\n            aria-describedby=\"${ifDefined(\n              hasDangerDescription ? 'danger-description' : undefined\n            )}\">\n            ${hasDangerDescription\n              ? html`<span\n                  id=\"danger-description\"\n                  class=\"${prefix}--visually-hidden\"\n                  >${dangerDescription}</span\n                >`\n              : ``}\n            <slot @slotchange=\"${handleSlotChange}\"></slot>\n            <slot name=\"icon\" @slotchange=\"${handleSlotChange}\"></slot>\n          </button>\n          ${html`<slot id=\"badge-indicator\" name=\"badge-indicator\"></slot>` ??\n          !disabled}\n        `;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles;\n}\n\nexport default CDSButton;\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"menu-item.d.ts","sourceRoot":"","sources":["../../../src/components/menu/menu-item.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAYvC,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAInD,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,CAAC;AACrC,eAAO,MAAM,qBAAqB,gCAAsC,CAAC;;;;;;;;;;uBAL/B,CAAC;;;;;AAO3C;;;;GAIG;AACH,cACM,WAAY,SAAQ,gBAAgD;IAExE,OAAO,MAAC;IAER,QAAQ,CAAC,gBAAgB,OAAO;IAChC,kBAAkB,MAAC;IAEnB;;OAEG;IACH,OAAO,CAAC,WAAW,CAAwB;IAE3C;;OAEG;IACH,OAAO,CAAC,mBAAmB,CAAC,CAAmB;IAE/C;;OAEG;IAEH,KAAK,MAAC;IACN;;OAEG;IAEH,QAAQ,MAAC;IACT;;OAEG;IAEH,QAAQ,MAAC;IAET;;OAEG;IAEH,iBAAiB,SAAY;IAE7B;;OAEG;IAEH,WAAW,UAAS;IAGpB,IAAI,iBAA0B;IAC9B;;OAEG;IAEH,UAAU,EAAE;QACV,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAC7B,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;KAC9B,CAAoB;IAGrB,WAAW,EAAE,MAAM,GAAG,IAAI,CAA4C;IAEtE;;OAEG;IAEH,YAAY,MAAC;IACb;;OAEG;IAEH,KAAK,UAAS;IACd;;OAEG;IAEH,UAAU,UAAS;IAEb,kBAAkB;IAaxB,OAAO,CAAC,iBAAiB;IAwBzB,YAAY;IA2BZ,oBAAoB;IAIpB,OAAO,IAAI,IAAI;IAWf,WAAW,CAAC,KAAK,EAAE,UAAU;IAK7B,eAAe,CAAC,KAAK,EAAE,UAAU;IAOjC,gBAAgB;IAOhB,gBAAgB;IAOhB,aAAa,CAAC,KAAK,EAAE,aAAa;IAIlC,MAAM;IAuDN,YAAY,GAAI,GAAG,UAAU,GAAG,aAAa,KAAG,IAAI,CAwBlD;IACF,iBAAiB,aAIf;IACF,iBAAiB,aAMf;IACF,YAAY,aAcV;IACF,qBAAqB,aAkCnB;IACF,aAAa,aASX;IACF,cAAc,GAAI,GAAG,aAAa,UAUhC;IAEF,MAAM,CAAC,MAAM,MAAU;CACxB;AACD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"menu-item.d.ts","sourceRoot":"","sources":["../../../src/components/menu/menu-item.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAYvC,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAInD,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,CAAC;AACrC,eAAO,MAAM,qBAAqB,gCAAsC,CAAC;;;;;;;;;;uBAL/B,CAAC;;;;;AAO3C;;;;GAIG;AACH,cACM,WAAY,SAAQ,gBAAgD;IAExE,OAAO,MAAC;IAER,QAAQ,CAAC,gBAAgB,OAAO;IAChC,kBAAkB,MAAC;IAEnB;;OAEG;IACH,OAAO,CAAC,WAAW,CAAwB;IAE3C;;OAEG;IACH,OAAO,CAAC,mBAAmB,CAAC,CAAmB;IAE/C;;OAEG;IAEH,KAAK,MAAC;IACN;;OAEG;IAEH,QAAQ,MAAC;IACT;;OAEG;IAEH,QAAQ,MAAC;IAET;;OAEG;IAEH,iBAAiB,SAAM;IAEvB;;OAEG;IAEH,WAAW,UAAS;IAGpB,IAAI,iBAA0B;IAC9B;;OAEG;IAEH,UAAU,EAAE;QACV,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAC7B,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;KAC9B,CAAoB;IAGrB,WAAW,EAAE,MAAM,GAAG,IAAI,CAA4C;IAEtE;;OAEG;IAEH,YAAY,MAAC;IACb;;OAEG;IAEH,KAAK,UAAS;IACd;;OAEG;IAEH,UAAU,UAAS;IAEb,kBAAkB;IAaxB,OAAO,CAAC,iBAAiB;IAwBzB,YAAY;IA2BZ,oBAAoB;IAIpB,OAAO,IAAI,IAAI;IAWf,WAAW,CAAC,KAAK,EAAE,UAAU;IAK7B,eAAe,CAAC,KAAK,EAAE,UAAU;IAOjC,gBAAgB;IAOhB,gBAAgB;IAOhB,aAAa,CAAC,KAAK,EAAE,aAAa;IAIlC,MAAM;IAwDN,YAAY,GAAI,GAAG,UAAU,GAAG,aAAa,KAAG,IAAI,CAwBlD;IACF,iBAAiB,aAIf;IACF,iBAAiB,aAMf;IACF,YAAY,aAcV;IACF,qBAAqB,aAkCnB;IACF,aAAa,aASX;IACF,cAAc,GAAI,GAAG,aAAa,UAUhC;IAEF,MAAM,CAAC,MAAM,MAAU;CACxB;AACD,eAAe,WAAW,CAAC"}

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

@@ -38,7 +38,7 @@ let CDSmenuItem = class CDSmenuItem extends HostListenerMixin(HostListenerMixin(
 		super(..._args);
 		this.hoverIntentDelay = 150;
 		this._parentMenu = null;
-		this.dangerDescription = "danger";
+		this.dangerDescription = "";
 		this.submenuOpen = false;
 		this.kind = "default";
 		this.boundaries = {
@@ -207,7 +207,7 @@ let CDSmenuItem = class CDSmenuItem extends HostListenerMixin(HostListenerMixin(
 	}
 	render() {
 		const { label, shortcut, submenuOpen, boundaries, isRtl, kind, dangerDescription } = this;
-		const isDanger = kind === "danger" && !this.hasSubmenu;
+		const hasDangerDescription = kind === "danger" && !this.hasSubmenu && Boolean(dangerDescription);
 		const menuClassName = this.context?.hasSelectableItems ? `cds-custom--menu--with-selectable-items` : "";
 		return html`
       <div class="${"cds-custom"}--menu-item__selection-icon">
@@ -218,7 +218,7 @@ let CDSmenuItem = class CDSmenuItem extends HostListenerMixin(HostListenerMixin(
         <slot name="render-icon"></slot>
       </div>
       <div class="${"cds-custom"}--menu-item__label">${label}</div>
-      ${isDanger ? html`<span id="danger-description" class="${"cds-custom"}--visually-hidden"
+      ${hasDangerDescription ? html`<span id="danger-description" class="${"cds-custom"}--visually-hidden"
             >${dangerDescription}</span
           >` : html``}
       ${shortcut && !this.hasSubmenu ? html` <div class="${"cds-custom"}--menu-item__shortcut">${shortcut}</div> ` : html``}

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

@@ -1 +1 @@
-{"version":3,"file":"menu-item.js","names":["styles","customElement"],"sources":["../../../src/components/menu/menu-item.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport styles from './menu-item.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { consume } from '@lit/context';\nimport { MenuContext } from './menu-context';\nimport Checkmark16 from '@carbon/icons/es/checkmark/16.js';\nimport CaretLeft16 from '@carbon/icons/es/caret--left/16.js';\nimport CaretRight16 from '@carbon/icons/es/caret--right/16.js';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { MENU_ITEM_KIND, MENU_SIZE } from './defs';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport CDSMenu from './menu';\n\nexport { MENU_ITEM_KIND, MENU_SIZE };\nexport const MENU_CLOSE_ROOT_EVENT = `${prefix}-menu-close-root-request`;\n\n/**\n * Menu Item.\n *\n * @element cds-custom-menu-item\n */\n@customElement(`${prefix}-menu-item`)\nclass CDSmenuItem extends HostListenerMixin(HostListenerMixin(LitElement)) {\n  @consume({ context: MenuContext })\n  context;\n\n  readonly hoverIntentDelay = 150; // in ms\n  hoverIntentTimeout;\n\n  /**\n   * The parent cds-custom-menu element\n   */\n  private _parentMenu: CDSMenu | null = null;\n\n  /**\n   * MutationObserver that observes the parent cds-custom-menu element\n   */\n  private _parentMenuObserver?: MutationObserver;\n\n  /**\n   * Label for the menu item.\n   */\n  @property({ type: String })\n  label;\n  /**\n   * Shortcut for the menu item.\n   */\n  @property({ type: String })\n  shortcut;\n  /**\n   * Disabled property for the menu item.\n   */\n  @property({ type: Boolean })\n  disabled;\n\n  /**\n   * Specify the message read by screen readers for the danger menu item variant\n   */\n  @property({ type: String, attribute: 'danger-description' })\n  dangerDescription = 'danger';\n\n  /**\n   * Whether the menu submen for an item is open or not.\n   */\n  @property({ type: Boolean })\n  submenuOpen = false;\n\n  @property()\n  kind = MENU_ITEM_KIND.DEFAULT;\n  /**\n   * Menu boundaries.\n   */\n  @property()\n  boundaries: {\n    x: number | [number, number];\n    y: number | [number, number];\n  } = { x: -1, y: -1 };\n\n  @property({ attribute: 'aria-checked' })\n  ariaChecked: string | null = this.getAttribute('selected') ?? 'false';\n\n  /**\n   * Entrypoint.\n   */\n  @state()\n  submenuEntry;\n  /**\n   * Checks if document direction is rtl.\n   */\n  @state()\n  isRtl = false;\n  /**\n   * Checks if document direction is rtl.\n   */\n  @state()\n  hasSubmenu = false;\n\n  async dispatchIconDetect() {\n    const hasRenderIcon = !!this.querySelector('[slot=\"render-icon\"]');\n    if (hasRenderIcon) {\n      await undefined; // this is used to replace setTimeout with 0 time out, which is much fater.\n      this.dispatchEvent(\n        new CustomEvent('icon-detect', {\n          bubbles: true, // Allows event to bubble up the DOM\n          composed: true, // Allows event to cross shadow DOM boundary\n        })\n      );\n    }\n  }\n\n  private _updateAttributes() {\n    if (this.disabled && !this.hasSubmenu) {\n      this.setAttribute('aria-disabled', this.disabled);\n      this.setAttribute('tabindex', '-1');\n    } else if (this._parentMenu && !(this._parentMenu as CDSMenu).open) {\n      this.removeAttribute('aria-disabled');\n      this.setAttribute('tabindex', '-1');\n    } else {\n      this.removeAttribute('aria-disabled');\n      this.setAttribute('tabindex', '0');\n    }\n    if (this.hasSubmenu) {\n      this.setAttribute('aria-haspopup', this.hasSubmenu + '');\n    } else {\n      this.removeAttribute('aria-haspopup');\n    }\n    if (this.closest(`${prefix}-menu-item-radio-group`)) {\n      this.setAttribute('role', 'menuitemradio');\n      this.setAttribute('aria-checked', this.ariaChecked + '');\n    } else if (!this.getAttribute('role')) {\n      this.setAttribute('role', 'menuitem');\n    }\n  }\n\n  firstUpdated() {\n    this.hasSubmenu = !!this.querySelector('[slot=\"submenu\"]');\n\n    this.dispatchIconDetect();\n    this.isRtl = document.dir === 'rtl';\n    this._registerSubMenuItems();\n    this._parentMenu = this.closest(`${prefix}-menu`);\n\n    this._updateAttributes();\n\n    this.addEventListener(`${prefix}-menu-closed`, () => {\n      this.focus();\n      this._closeSubmenu();\n    });\n\n    if (this._parentMenu) {\n      this._parentMenuObserver = new MutationObserver(() => {\n        this._updateAttributes();\n      });\n\n      this._parentMenuObserver.observe(this._parentMenu, {\n        attributes: true,\n        attributeFilter: ['open'],\n      });\n    }\n  }\n\n  disconnectedCallback() {\n    this._parentMenuObserver?.disconnect();\n  }\n\n  updated(): void {\n    if (this.hasSubmenu) {\n      this.setAttribute('aria-expanded', this.hasSubmenu + '');\n    } else {\n      this.removeAttribute('aria-expanded');\n    }\n    if (this.kind === MENU_ITEM_KIND.DANGER)\n      this.classList.toggle(`${prefix}--menu-item--danger`);\n  }\n\n  @HostListener('click', { capture: true })\n  handleClick(event: MouseEvent) {\n    this._handleClick(event);\n  }\n\n  @HostListener('mousedown')\n  handleMouseDown(event: MouseEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n    }\n  }\n\n  @HostListener('mouseenter')\n  handleMouseEnter() {\n    if (this.hasSubmenu) {\n      this._handleMouseEnter();\n    }\n  }\n\n  @HostListener('mouseleave')\n  handleMouseLeave() {\n    if (this.hasSubmenu) {\n      this._handleMouseLeave();\n    }\n  }\n\n  @HostListener('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    this._handleKeyDown(event);\n  }\n\n  render() {\n    const {\n      label,\n      shortcut,\n      submenuOpen,\n      boundaries,\n      isRtl,\n      kind,\n      dangerDescription,\n    } = this;\n\n    const isDanger = kind === MENU_ITEM_KIND.DANGER && !this.hasSubmenu;\n\n    const menuClassName = this.context?.hasSelectableItems\n      ? `${prefix}--menu--with-selectable-items`\n      : '';\n\n    return html`\n      <div class=\"${prefix}--menu-item__selection-icon\">\n        ${this.ariaChecked === 'true' ? iconLoader(Checkmark16) : undefined}\n      </div>\n\n      <div class=\"${prefix}--menu-item__icon\">\n        <slot name=\"render-icon\"></slot>\n      </div>\n      <div class=\"${prefix}--menu-item__label\">${label}</div>\n      ${isDanger\n        ? html`<span id=\"danger-description\" class=\"${prefix}--visually-hidden\"\n            >${dangerDescription}</span\n          >`\n        : html``}\n      ${shortcut && !this.hasSubmenu\n        ? html` <div class=\"${prefix}--menu-item__shortcut\">${shortcut}</div> `\n        : html``}\n      ${this.hasSubmenu\n        ? html`\n            <div class=\"${prefix}--menu-item__shortcut\">\n              ${isRtl ? iconLoader(CaretLeft16) : iconLoader(CaretRight16)}\n            </div>\n            <cds-custom-menu\n              className=${menuClassName}\n              size=${this.parentElement?.getAttribute('size') ??\n              MENU_SIZE.LARGE}\n              ?isChild=\"${this.hasSubmenu}\"\n              label=\"${label}\"\n              .open=\"${submenuOpen}\"\n              .x=\"${boundaries.x}\"\n              .y=\"${boundaries.y}\">\n              <slot name=\"submenu\"></slot>\n            </cds-custom-menu>\n          `\n        : html``}\n    `;\n  }\n\n  _handleClick = (e: MouseEvent | KeyboardEvent): void => {\n    if (this.disabled) {\n      return;\n    }\n\n    if (this.hasSubmenu) {\n      this._openSubmenu();\n      return;\n    }\n\n    if (e.type === 'keydown') {\n      this.click();\n      return;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent(MENU_CLOSE_ROOT_EVENT, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          triggerEvent: e,\n        },\n      })\n    );\n  };\n  _handleMouseEnter = () => {\n    this.hoverIntentTimeout = setTimeout(() => {\n      this._openSubmenu();\n    }, this.hoverIntentDelay);\n  };\n  _handleMouseLeave = () => {\n    if (this.hoverIntentTimeout) {\n      clearTimeout(this.hoverIntentTimeout);\n      this._closeSubmenu();\n      this.focus();\n    }\n  };\n  _openSubmenu = () => {\n    const { x, y, width, height } = this.getBoundingClientRect();\n    if (this.isRtl) {\n      this.boundaries = {\n        x: [-x, x - width],\n        y: [y, y + height],\n      };\n    } else {\n      this.boundaries = {\n        x: [x, x + width],\n        y: [y, y + height],\n      };\n    }\n    this.submenuOpen = true;\n  };\n  _registerSubMenuItems = () => {\n    const observer = new MutationObserver((mutationsList) => {\n      for (const mutation of mutationsList) {\n        if (mutation.type === 'childList') {\n          const submenuSlot = this.shadowRoot?.querySelector(\n            'slot[name=\"submenu\"]'\n          ) as HTMLSlotElement;\n\n          const item = submenuSlot?.assignedElements?.()?.[0];\n          if (item) {\n            switch (item.tagName) {\n              case 'CDS-MENU-ITEM-RADIO-GROUP':\n                this.submenuEntry = item.querySelector(`${prefix}-menu-item`);\n                break;\n              case 'CDS-MENU-ITEM-GROUP': {\n                const slotElements = item.shadowRoot\n                  ?.querySelector('slot')\n                  ?.assignedElements();\n                const firstElement = slotElements?.length && slotElements[0];\n                this.submenuEntry = firstElement;\n                break;\n              }\n              case 'CDS-MENU-ITEM':\n                this.submenuEntry = item;\n                break;\n            }\n          }\n        }\n      }\n    });\n    observer.observe(this.shadowRoot as Node, {\n      childList: true,\n      subtree: true,\n    });\n  };\n  _closeSubmenu = () => {\n    this.boundaries = {\n      x: -1,\n      y: -1,\n    };\n    this.submenuOpen = false;\n    (\n      this.shadowRoot?.querySelector(`.${prefix}--menu-item`) as HTMLLIElement\n    )?.focus();\n  };\n  _handleKeyDown = (e: KeyboardEvent) => {\n    if (this.hasSubmenu && ['ArrowRight', 'Enter', ' '].includes(e.key)) {\n      this._openSubmenu();\n      setTimeout(() => {\n        this.submenuEntry.focus();\n      });\n      e.stopPropagation();\n    } else if (e.key === 'Enter' || e.key === ' ') {\n      this._handleClick(e);\n    }\n  };\n\n  static styles = styles;\n}\nexport default CDSmenuItem;\n"],"mappings":"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"}
+{"version":3,"file":"menu-item.js","names":["styles","customElement"],"sources":["../../../src/components/menu/menu-item.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport styles from './menu-item.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { consume } from '@lit/context';\nimport { MenuContext } from './menu-context';\nimport Checkmark16 from '@carbon/icons/es/checkmark/16.js';\nimport CaretLeft16 from '@carbon/icons/es/caret--left/16.js';\nimport CaretRight16 from '@carbon/icons/es/caret--right/16.js';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { MENU_ITEM_KIND, MENU_SIZE } from './defs';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport CDSMenu from './menu';\n\nexport { MENU_ITEM_KIND, MENU_SIZE };\nexport const MENU_CLOSE_ROOT_EVENT = `${prefix}-menu-close-root-request`;\n\n/**\n * Menu Item.\n *\n * @element cds-custom-menu-item\n */\n@customElement(`${prefix}-menu-item`)\nclass CDSmenuItem extends HostListenerMixin(HostListenerMixin(LitElement)) {\n  @consume({ context: MenuContext })\n  context;\n\n  readonly hoverIntentDelay = 150; // in ms\n  hoverIntentTimeout;\n\n  /**\n   * The parent cds-custom-menu element\n   */\n  private _parentMenu: CDSMenu | null = null;\n\n  /**\n   * MutationObserver that observes the parent cds-custom-menu element\n   */\n  private _parentMenuObserver?: MutationObserver;\n\n  /**\n   * Label for the menu item.\n   */\n  @property({ type: String })\n  label;\n  /**\n   * Shortcut for the menu item.\n   */\n  @property({ type: String })\n  shortcut;\n  /**\n   * Disabled property for the menu item.\n   */\n  @property({ type: Boolean })\n  disabled;\n\n  /**\n   * Specify the message read by screen readers for the danger menu item variant\n   */\n  @property({ type: String, attribute: 'danger-description' })\n  dangerDescription = '';\n\n  /**\n   * Whether the menu submen for an item is open or not.\n   */\n  @property({ type: Boolean })\n  submenuOpen = false;\n\n  @property()\n  kind = MENU_ITEM_KIND.DEFAULT;\n  /**\n   * Menu boundaries.\n   */\n  @property()\n  boundaries: {\n    x: number | [number, number];\n    y: number | [number, number];\n  } = { x: -1, y: -1 };\n\n  @property({ attribute: 'aria-checked' })\n  ariaChecked: string | null = this.getAttribute('selected') ?? 'false';\n\n  /**\n   * Entrypoint.\n   */\n  @state()\n  submenuEntry;\n  /**\n   * Checks if document direction is rtl.\n   */\n  @state()\n  isRtl = false;\n  /**\n   * Checks if document direction is rtl.\n   */\n  @state()\n  hasSubmenu = false;\n\n  async dispatchIconDetect() {\n    const hasRenderIcon = !!this.querySelector('[slot=\"render-icon\"]');\n    if (hasRenderIcon) {\n      await undefined; // this is used to replace setTimeout with 0 time out, which is much fater.\n      this.dispatchEvent(\n        new CustomEvent('icon-detect', {\n          bubbles: true, // Allows event to bubble up the DOM\n          composed: true, // Allows event to cross shadow DOM boundary\n        })\n      );\n    }\n  }\n\n  private _updateAttributes() {\n    if (this.disabled && !this.hasSubmenu) {\n      this.setAttribute('aria-disabled', this.disabled);\n      this.setAttribute('tabindex', '-1');\n    } else if (this._parentMenu && !(this._parentMenu as CDSMenu).open) {\n      this.removeAttribute('aria-disabled');\n      this.setAttribute('tabindex', '-1');\n    } else {\n      this.removeAttribute('aria-disabled');\n      this.setAttribute('tabindex', '0');\n    }\n    if (this.hasSubmenu) {\n      this.setAttribute('aria-haspopup', this.hasSubmenu + '');\n    } else {\n      this.removeAttribute('aria-haspopup');\n    }\n    if (this.closest(`${prefix}-menu-item-radio-group`)) {\n      this.setAttribute('role', 'menuitemradio');\n      this.setAttribute('aria-checked', this.ariaChecked + '');\n    } else if (!this.getAttribute('role')) {\n      this.setAttribute('role', 'menuitem');\n    }\n  }\n\n  firstUpdated() {\n    this.hasSubmenu = !!this.querySelector('[slot=\"submenu\"]');\n\n    this.dispatchIconDetect();\n    this.isRtl = document.dir === 'rtl';\n    this._registerSubMenuItems();\n    this._parentMenu = this.closest(`${prefix}-menu`);\n\n    this._updateAttributes();\n\n    this.addEventListener(`${prefix}-menu-closed`, () => {\n      this.focus();\n      this._closeSubmenu();\n    });\n\n    if (this._parentMenu) {\n      this._parentMenuObserver = new MutationObserver(() => {\n        this._updateAttributes();\n      });\n\n      this._parentMenuObserver.observe(this._parentMenu, {\n        attributes: true,\n        attributeFilter: ['open'],\n      });\n    }\n  }\n\n  disconnectedCallback() {\n    this._parentMenuObserver?.disconnect();\n  }\n\n  updated(): void {\n    if (this.hasSubmenu) {\n      this.setAttribute('aria-expanded', this.hasSubmenu + '');\n    } else {\n      this.removeAttribute('aria-expanded');\n    }\n    if (this.kind === MENU_ITEM_KIND.DANGER)\n      this.classList.toggle(`${prefix}--menu-item--danger`);\n  }\n\n  @HostListener('click', { capture: true })\n  handleClick(event: MouseEvent) {\n    this._handleClick(event);\n  }\n\n  @HostListener('mousedown')\n  handleMouseDown(event: MouseEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n    }\n  }\n\n  @HostListener('mouseenter')\n  handleMouseEnter() {\n    if (this.hasSubmenu) {\n      this._handleMouseEnter();\n    }\n  }\n\n  @HostListener('mouseleave')\n  handleMouseLeave() {\n    if (this.hasSubmenu) {\n      this._handleMouseLeave();\n    }\n  }\n\n  @HostListener('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    this._handleKeyDown(event);\n  }\n\n  render() {\n    const {\n      label,\n      shortcut,\n      submenuOpen,\n      boundaries,\n      isRtl,\n      kind,\n      dangerDescription,\n    } = this;\n\n    const isDanger = kind === MENU_ITEM_KIND.DANGER && !this.hasSubmenu;\n    const hasDangerDescription = isDanger && Boolean(dangerDescription);\n\n    const menuClassName = this.context?.hasSelectableItems\n      ? `${prefix}--menu--with-selectable-items`\n      : '';\n\n    return html`\n      <div class=\"${prefix}--menu-item__selection-icon\">\n        ${this.ariaChecked === 'true' ? iconLoader(Checkmark16) : undefined}\n      </div>\n\n      <div class=\"${prefix}--menu-item__icon\">\n        <slot name=\"render-icon\"></slot>\n      </div>\n      <div class=\"${prefix}--menu-item__label\">${label}</div>\n      ${hasDangerDescription\n        ? html`<span id=\"danger-description\" class=\"${prefix}--visually-hidden\"\n            >${dangerDescription}</span\n          >`\n        : html``}\n      ${shortcut && !this.hasSubmenu\n        ? html` <div class=\"${prefix}--menu-item__shortcut\">${shortcut}</div> `\n        : html``}\n      ${this.hasSubmenu\n        ? html`\n            <div class=\"${prefix}--menu-item__shortcut\">\n              ${isRtl ? iconLoader(CaretLeft16) : iconLoader(CaretRight16)}\n            </div>\n            <cds-custom-menu\n              className=${menuClassName}\n              size=${this.parentElement?.getAttribute('size') ??\n              MENU_SIZE.LARGE}\n              ?isChild=\"${this.hasSubmenu}\"\n              label=\"${label}\"\n              .open=\"${submenuOpen}\"\n              .x=\"${boundaries.x}\"\n              .y=\"${boundaries.y}\">\n              <slot name=\"submenu\"></slot>\n            </cds-custom-menu>\n          `\n        : html``}\n    `;\n  }\n\n  _handleClick = (e: MouseEvent | KeyboardEvent): void => {\n    if (this.disabled) {\n      return;\n    }\n\n    if (this.hasSubmenu) {\n      this._openSubmenu();\n      return;\n    }\n\n    if (e.type === 'keydown') {\n      this.click();\n      return;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent(MENU_CLOSE_ROOT_EVENT, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          triggerEvent: e,\n        },\n      })\n    );\n  };\n  _handleMouseEnter = () => {\n    this.hoverIntentTimeout = setTimeout(() => {\n      this._openSubmenu();\n    }, this.hoverIntentDelay);\n  };\n  _handleMouseLeave = () => {\n    if (this.hoverIntentTimeout) {\n      clearTimeout(this.hoverIntentTimeout);\n      this._closeSubmenu();\n      this.focus();\n    }\n  };\n  _openSubmenu = () => {\n    const { x, y, width, height } = this.getBoundingClientRect();\n    if (this.isRtl) {\n      this.boundaries = {\n        x: [-x, x - width],\n        y: [y, y + height],\n      };\n    } else {\n      this.boundaries = {\n        x: [x, x + width],\n        y: [y, y + height],\n      };\n    }\n    this.submenuOpen = true;\n  };\n  _registerSubMenuItems = () => {\n    const observer = new MutationObserver((mutationsList) => {\n      for (const mutation of mutationsList) {\n        if (mutation.type === 'childList') {\n          const submenuSlot = this.shadowRoot?.querySelector(\n            'slot[name=\"submenu\"]'\n          ) as HTMLSlotElement;\n\n          const item = submenuSlot?.assignedElements?.()?.[0];\n          if (item) {\n            switch (item.tagName) {\n              case 'CDS-MENU-ITEM-RADIO-GROUP':\n                this.submenuEntry = item.querySelector(`${prefix}-menu-item`);\n                break;\n              case 'CDS-MENU-ITEM-GROUP': {\n                const slotElements = item.shadowRoot\n                  ?.querySelector('slot')\n                  ?.assignedElements();\n                const firstElement = slotElements?.length && slotElements[0];\n                this.submenuEntry = firstElement;\n                break;\n              }\n              case 'CDS-MENU-ITEM':\n                this.submenuEntry = item;\n                break;\n            }\n          }\n        }\n      }\n    });\n    observer.observe(this.shadowRoot as Node, {\n      childList: true,\n      subtree: true,\n    });\n  };\n  _closeSubmenu = () => {\n    this.boundaries = {\n      x: -1,\n      y: -1,\n    };\n    this.submenuOpen = false;\n    (\n      this.shadowRoot?.querySelector(`.${prefix}--menu-item`) as HTMLLIElement\n    )?.focus();\n  };\n  _handleKeyDown = (e: KeyboardEvent) => {\n    if (this.hasSubmenu && ['ArrowRight', 'Enter', ' '].includes(e.key)) {\n      this._openSubmenu();\n      setTimeout(() => {\n        this.submenuEntry.focus();\n      });\n      e.stopPropagation();\n    } else if (e.key === 'Enter' || e.key === ' ') {\n      this._handleClick(e);\n    }\n  };\n\n  static styles = styles;\n}\nexport default CDSmenuItem;\n"],"mappings":"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"}

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

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

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

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

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

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