@carbon/web-components 2.57.0-rc.0 → 2.58.0-rc.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@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: layout.size('height');\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[size='sm']) {\n  @extend .#{$prefix}--layout--size-sm;\n}\n\n:host(#{$prefix}-tabs[size='md']) {\n  @extend .#{$prefix}--layout--size-md;\n}\n\n:host(#{$prefix}-tabs[size='lg']) {\n  @extend .#{$prefix}--layout--size-lg;\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: layout.size('height');\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  @include layout.use('size', $default: 'md', $min: 'sm', $max: 'lg');\n\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    display: flex;\n    align-items: center;\n    block-size: layout.size('height');\n    padding-block: 0;\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: layout.size('height');\n  inline-size: layout.size('height');\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(\n    #{$prefix}-tab:not([type='contained']):hover:not([selected]):not(\n        [disabled]\n      ):not([vertical])\n  ) {\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":""}
+{"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: layout.size('height');\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[size='sm']) {\n  @extend .#{$prefix}--layout--size-sm;\n}\n\n:host(#{$prefix}-tabs[size='md']) {\n  @extend .#{$prefix}--layout--size-md;\n}\n\n:host(#{$prefix}-tabs[type='contained'][size='lg']),\n:host(#{$prefix}-tabs[vertical][size='lg']) {\n  @extend .#{$prefix}--layout--size-lg;\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: layout.size('height');\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  @include layout.use('size', $default: 'md', $min: 'sm', $max: 'lg');\n\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    display: flex;\n    align-items: center;\n    block-size: layout.size('height');\n    padding-block: 0;\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: layout.size('height');\n  inline-size: layout.size('height');\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(\n    #{$prefix}-tab:not([type='contained']):hover:not([selected]):not(\n        [disabled]\n      ):not([vertical])\n  ) {\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  block-size: 100%;\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  // Default line-clamp for vertical tabs\n  --#{$prefix}-tabs-vertical-line-clamp: 2;\n\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\n// Size-specific line-clamp overrides for vertical tabs\n:host(#{$prefix}-tabs[size='sm'][vertical]) {\n  --#{$prefix}-tabs-vertical-line-clamp: 1;\n}\n\n:host(#{$prefix}-tab[vertical]) {\n  flex: none;\n  background-color: $layer-01;\n  block-size: var(--#{$prefix}-layout-size-height, $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: var(--#{$prefix}-tabs-vertical-line-clamp);\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/components/tag/defs.js.map

@@ -1 +1 @@
-{"version":3,"file":"defs.js","names":[],"sources":["../../../src/components/tag/defs.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2020, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/**\n * Tag size.\n */\nexport enum TAG_SIZE {\n  /**\n   * Large size.\n   */\n  LARGE = 'lg',\n\n  /**\n   * Medium size (default).\n   */\n  MEDIUM = 'md',\n\n  /**\n   * Small size.\n   */\n  SMALL = 'sm',\n}\n\nexport enum TAG_TYPE {\n  /**\n   * Red color.\n   */\n  RED = 'red',\n\n  /**\n   * Magenta color.\n   */\n  MAGENTA = 'magenta',\n\n  /**\n   * Purple color.\n   */\n  PURPLE = 'purple',\n\n  /**\n   * Blue color.\n   */\n  BLUE = 'blue',\n\n  /**\n   * Cyan color.\n   */\n  CYAN = 'cyan',\n\n  /**\n   * Teal color.\n   */\n  TEAL = 'teal',\n\n  /**\n   * Green color.\n   */\n  GREEN = 'green',\n\n  /**\n   * Gray color.\n   */\n  GRAY = 'gray',\n\n  /**\n   * Cool gray color.\n   */\n  'COOL-GRAY' = 'cool-gray',\n\n  /**\n   * Warn gray color.\n   */\n  'WARM-GRAY' = 'warm-gray',\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAUA,IAAY,WAAL,yBAAA,UAAA;;;;AAIL,UAAA,WAAA;;;;AAKA,UAAA,YAAA;;;;AAKA,UAAA,WAAA;;KACD;AAED,IAAY,WAAL,yBAAA,UAAA;;;;AAIL,UAAA,SAAA;;;;AAKA,UAAA,aAAA;;;;AAKA,UAAA,YAAA;;;;AAKA,UAAA,UAAA;;;;AAKA,UAAA,UAAA;;;;AAKA,UAAA,UAAA;;;;AAKA,UAAA,WAAA;;;;AAKA,UAAA,UAAA;;;;AAKA,UAAA,eAAA;;;;AAKA,UAAA,eAAA;;KACD"}
+{"version":3,"file":"defs.js","names":[],"sources":["../../../src/components/tag/defs.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2020, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/**\n * Tag size.\n */\nexport enum TAG_SIZE {\n  /**\n   * Large size.\n   */\n  LARGE = 'lg',\n\n  /**\n   * Medium size (default).\n   */\n  MEDIUM = 'md',\n\n  /**\n   * Small size.\n   */\n  SMALL = 'sm',\n}\n\nexport enum TAG_TYPE {\n  /**\n   * Red color.\n   */\n  RED = 'red',\n\n  /**\n   * Magenta color.\n   */\n  MAGENTA = 'magenta',\n\n  /**\n   * Purple color.\n   */\n  PURPLE = 'purple',\n\n  /**\n   * Blue color.\n   */\n  BLUE = 'blue',\n\n  /**\n   * Cyan color.\n   */\n  CYAN = 'cyan',\n\n  /**\n   * Teal color.\n   */\n  TEAL = 'teal',\n\n  /**\n   * Green color.\n   */\n  GREEN = 'green',\n\n  /**\n   * Gray color.\n   */\n  GRAY = 'gray',\n\n  /**\n   * Cool gray color.\n   */\n  'COOL-GRAY' = 'cool-gray',\n\n  /**\n   * Warn gray color.\n   */\n  'WARM-GRAY' = 'warm-gray',\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAUA,IAAY,WAAL,yBAAA,UAAA;;;;CAIL,SAAA,WAAA;;;;CAKA,SAAA,YAAA;;;;CAKA,SAAA,WAAA;;AACF,EAAA,CAAA,CAAA;AAEA,IAAY,WAAL,yBAAA,UAAA;;;;CAIL,SAAA,SAAA;;;;CAKA,SAAA,aAAA;;;;CAKA,SAAA,YAAA;;;;CAKA,SAAA,UAAA;;;;CAKA,SAAA,UAAA;;;;CAKA,SAAA,UAAA;;;;CAKA,SAAA,WAAA;;;;CAKA,SAAA,UAAA;;;;CAKA,SAAA,eAAA;;;;CAKA,SAAA,eAAA;;AACF,EAAA,CAAA,CAAA"}

package/es/components/tag/dismissible-tag.js

@@ -7,7 +7,7 @@
 
 import "../../globals/settings.js";
 import { carbonElement } from "../../globals/decorators/carbon-element.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.135.0/helpers/esm/decorate.js";
 import iconLoader from "../../globals/internal/icon-loader.js";
 import FocusMixin from "../../globals/mixins/focus.js";
 import HostListener from "../../globals/decorators/host-listener.js";

package/es/components/tag/dismissible-tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"dismissible-tag.js","names":["CDSTag","styles","customElement"],"sources":["../../../src/components/tag/dismissible-tag.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2025\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport Close16 from '@carbon/icons/es/close/16.js';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { TAG_SIZE, TAG_TYPE } from './defs';\nimport CDSTag from '../tag/tag';\nimport '../tooltip/index';\nimport styles from './tag.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport { TAG_SIZE, TAG_TYPE };\n\n/**\n * Dismissible Tag.\n *\n * @element cds-dismissible-tag\n *\n * @fires cds-dismissible-tag-beingclosed - The custom event fired as the element is being closed\n * @fires cds-dismissible-tag-closed - The custom event fired after the element has been closed\n */\n@customElement(`${prefix}-dismissible-tag`)\nclass CDSDismissibleTag extends HostListenerMixin(FocusMixin(CDSTag)) {\n  @query('button')\n  protected _buttonNode!: HTMLButtonElement;\n\n  /**\n   * Finds the next focusable dismissible tag sibling\n   * @returns {HTMLElement|null} The next focusable dismissible tag or null\n   */\n  protected _findNextFocusableTag() {\n    let nextElement = this.nextElementSibling;\n    while (nextElement) {\n      if (\n        nextElement.tagName.toLowerCase() === `${prefix}-dismissible-tag` &&\n        !nextElement.hasAttribute('disabled') &&\n        (nextElement as HTMLElement).getAttribute('open') !== 'false'\n      ) {\n        return nextElement;\n      }\n      nextElement = nextElement.nextElementSibling;\n    }\n    return null;\n  }\n\n  /**\n   * Handles `slotchange` event.\n   */\n  protected _handleAILabelSlotChange({ target }: Event) {\n    const hasContent = (target as HTMLSlotElement)\n      .assignedNodes()\n      .filter((elem) =>\n        (elem as HTMLElement).matches !== undefined\n          ? // remove reference of slug in v12\n            (elem as HTMLElement).matches(\n              (this.constructor as typeof CDSDismissibleTag).aiLabelItem\n            ) ||\n            // remove reference of slug in v12\n            (elem as HTMLElement).matches(\n              (this.constructor as typeof CDSDismissibleTag).slugItem\n            )\n          : false\n      );\n    if (hasContent.length > 0) {\n      (hasContent[0] as HTMLElement).setAttribute('tag', `${this.type}`);\n      (hasContent[0] as HTMLElement).setAttribute('size', 'sm');\n      (hasContent[0] as HTMLElement).setAttribute('kind', 'inline');\n    }\n    this.requestUpdate();\n  }\n\n  /**\n   * Handles `click` event on this element.\n   *\n   * @param event The event.\n   */\n  @HostListener('shadowRoot:click')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  protected _handleClick = (event: MouseEvent) => {\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n    if (event.composedPath().indexOf(this._buttonNode!) >= 0) {\n      if (this.disabled) {\n        event.stopPropagation();\n      } else if (this.open) {\n        const nextFocusableTag = this._findNextFocusableTag();\n        const init = {\n          bubbles: true,\n          cancelable: true,\n          composed: true,\n          detail: {\n            triggeredBy: event.target,\n          },\n        };\n        if (\n          this.dispatchEvent(\n            new CustomEvent(\n              (this.constructor as typeof CDSDismissibleTag).eventBeforeClose,\n              init\n            )\n          )\n        ) {\n          this.open = false;\n          if (nextFocusableTag) {\n            const nextCloseIcon = (nextFocusableTag as CDSDismissibleTag)\n              ._buttonNode;\n            if (nextCloseIcon) {\n              nextCloseIcon.focus();\n            }\n          }\n          this.dispatchEvent(\n            new CustomEvent(\n              (this.constructor as typeof CDSDismissibleTag).eventClose,\n              init\n            )\n          );\n        }\n      }\n    }\n  };\n\n  /**\n   * `true` if the tag should be disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Specify the tooltip alignment for the dismiss button\n   */\n  @property({\n    type: String,\n    attribute: 'dismiss-tooltip-alignment',\n    reflect: true,\n  })\n  dismissTooltipAlignment = 'bottom';\n\n  /**\n   * Provide a custom tooltip label for the dismiss button\n   */\n  @property({ type: String, attribute: 'dismiss-tooltip-label', reflect: true })\n  dismissTooltipLabel?: string;\n\n  /**\n   * `true` if the tag should be open.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = true;\n\n  /**\n   * The size of the tag.\n   */\n  @property({ type: String, reflect: true })\n  size = TAG_SIZE.MEDIUM;\n\n  /**\n   * Provide a custom `title` to be inserted in the tag.\n   */\n  @property({ type: String, attribute: 'tag-title', reflect: true })\n  tagTitle = '';\n\n  /**\n   * Provide text to be rendered inside of a the tag.\n   */\n  @property({ type: String, reflect: true })\n  text = '';\n\n  /**\n   * The type of the tag.\n   */\n  @property({ reflect: true })\n  type = TAG_TYPE.GRAY;\n\n  render() {\n    const {\n      disabled,\n      _handleAILabelSlotChange: handleAILabelSlotChange,\n      _handleIconSlotChange: handleIconSlotChange,\n      _hasEllipsisApplied: hasEllipsisApplied,\n      size,\n      tagTitle,\n      text,\n      dismissTooltipLabel,\n      dismissTooltipAlignment,\n    } = this;\n\n    const dismissLabel = `Dismiss \"${text}\"`;\n    const dismissActionLabel =\n      dismissTooltipLabel || (hasEllipsisApplied ? dismissLabel : 'Dismiss');\n\n    return html`\n      ${size !== TAG_SIZE.SMALL\n        ? html`<slot name=\"icon\" @slotchange=\"${handleIconSlotChange}\"></slot>`\n        : ''}\n      <div class=\"${prefix}--interactive--tag-children\">\n        <span\n          title=\"${tagTitle ? tagTitle : text}\"\n          class=\"${prefix}--tag__label\">\n          ${text}\n        </span>\n        <slot name=\"decorator\" @slotchange=\"${handleAILabelSlotChange}\"></slot>\n        <slot name=\"ai-label\" @slotchange=\"${handleAILabelSlotChange}\"></slot>\n        <slot name=\"slug\" @slotchange=\"${handleAILabelSlotChange}\"></slot>\n        <cds-tooltip align=${dismissTooltipAlignment} enter-delay-ms=${0}>\n          <button\n            class=\"sb-tooltip-trigger\"\n            role=\"button\"\n            aria-labelledby=\"content\"\n            class=\"${prefix}--tag__close-icon\"\n            ?disabled=${disabled}>\n            ${iconLoader(Close16)}\n          </button>\n          <cds-tooltip-content id=\"content\">\n            ${dismissActionLabel}\n          </cds-tooltip-content>\n        </cds-tooltip>\n      </div>\n    `;\n  }\n\n  /**\n   * A selector that will return the slug item.\n   *\n   * remove in v12\n   */\n  static get slugItem() {\n    return `${prefix}-slug`;\n  }\n\n  /**\n   * A selector that will return the AI Label item.\n   */\n  static get aiLabelItem() {\n    return `${prefix}-ai-label`;\n  }\n\n  /**\n   * The name of the custom event fired before this tag is being closed upon a user gesture.\n   * Cancellation of this event stops the user-initiated action of closing this tag.\n   */\n  static get eventBeforeClose() {\n    return `${prefix}-dismissible-tag-beingclosed`;\n  }\n\n  /**\n   * The name of the custom event fired after this tag is closed upon a user gesture.\n   */\n  static get eventClose() {\n    return `${prefix}-dismissible-tag-closed`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSDismissibleTag;\n"],"mappings":"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"}
+{"version":3,"file":"dismissible-tag.js","names":["CDSTag","styles","customElement"],"sources":["../../../src/components/tag/dismissible-tag.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2025\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport Close16 from '@carbon/icons/es/close/16.js';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { TAG_SIZE, TAG_TYPE } from './defs';\nimport CDSTag from '../tag/tag';\nimport '../tooltip/index';\nimport styles from './tag.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport { TAG_SIZE, TAG_TYPE };\n\n/**\n * Dismissible Tag.\n *\n * @element cds-dismissible-tag\n *\n * @fires cds-dismissible-tag-beingclosed - The custom event fired as the element is being closed\n * @fires cds-dismissible-tag-closed - The custom event fired after the element has been closed\n */\n@customElement(`${prefix}-dismissible-tag`)\nclass CDSDismissibleTag extends HostListenerMixin(FocusMixin(CDSTag)) {\n  @query('button')\n  protected _buttonNode!: HTMLButtonElement;\n\n  /**\n   * Finds the next focusable dismissible tag sibling\n   * @returns {HTMLElement|null} The next focusable dismissible tag or null\n   */\n  protected _findNextFocusableTag() {\n    let nextElement = this.nextElementSibling;\n    while (nextElement) {\n      if (\n        nextElement.tagName.toLowerCase() === `${prefix}-dismissible-tag` &&\n        !nextElement.hasAttribute('disabled') &&\n        (nextElement as HTMLElement).getAttribute('open') !== 'false'\n      ) {\n        return nextElement;\n      }\n      nextElement = nextElement.nextElementSibling;\n    }\n    return null;\n  }\n\n  /**\n   * Handles `slotchange` event.\n   */\n  protected _handleAILabelSlotChange({ target }: Event) {\n    const hasContent = (target as HTMLSlotElement)\n      .assignedNodes()\n      .filter((elem) =>\n        (elem as HTMLElement).matches !== undefined\n          ? // remove reference of slug in v12\n            (elem as HTMLElement).matches(\n              (this.constructor as typeof CDSDismissibleTag).aiLabelItem\n            ) ||\n            // remove reference of slug in v12\n            (elem as HTMLElement).matches(\n              (this.constructor as typeof CDSDismissibleTag).slugItem\n            )\n          : false\n      );\n    if (hasContent.length > 0) {\n      (hasContent[0] as HTMLElement).setAttribute('tag', `${this.type}`);\n      (hasContent[0] as HTMLElement).setAttribute('size', 'sm');\n      (hasContent[0] as HTMLElement).setAttribute('kind', 'inline');\n    }\n    this.requestUpdate();\n  }\n\n  /**\n   * Handles `click` event on this element.\n   *\n   * @param event The event.\n   */\n  @HostListener('shadowRoot:click')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  protected _handleClick = (event: MouseEvent) => {\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n    if (event.composedPath().indexOf(this._buttonNode!) >= 0) {\n      if (this.disabled) {\n        event.stopPropagation();\n      } else if (this.open) {\n        const nextFocusableTag = this._findNextFocusableTag();\n        const init = {\n          bubbles: true,\n          cancelable: true,\n          composed: true,\n          detail: {\n            triggeredBy: event.target,\n          },\n        };\n        if (\n          this.dispatchEvent(\n            new CustomEvent(\n              (this.constructor as typeof CDSDismissibleTag).eventBeforeClose,\n              init\n            )\n          )\n        ) {\n          this.open = false;\n          if (nextFocusableTag) {\n            const nextCloseIcon = (nextFocusableTag as CDSDismissibleTag)\n              ._buttonNode;\n            if (nextCloseIcon) {\n              nextCloseIcon.focus();\n            }\n          }\n          this.dispatchEvent(\n            new CustomEvent(\n              (this.constructor as typeof CDSDismissibleTag).eventClose,\n              init\n            )\n          );\n        }\n      }\n    }\n  };\n\n  /**\n   * `true` if the tag should be disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Specify the tooltip alignment for the dismiss button\n   */\n  @property({\n    type: String,\n    attribute: 'dismiss-tooltip-alignment',\n    reflect: true,\n  })\n  dismissTooltipAlignment = 'bottom';\n\n  /**\n   * Provide a custom tooltip label for the dismiss button\n   */\n  @property({ type: String, attribute: 'dismiss-tooltip-label', reflect: true })\n  dismissTooltipLabel?: string;\n\n  /**\n   * `true` if the tag should be open.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = true;\n\n  /**\n   * The size of the tag.\n   */\n  @property({ type: String, reflect: true })\n  size = TAG_SIZE.MEDIUM;\n\n  /**\n   * Provide a custom `title` to be inserted in the tag.\n   */\n  @property({ type: String, attribute: 'tag-title', reflect: true })\n  tagTitle = '';\n\n  /**\n   * Provide text to be rendered inside of a the tag.\n   */\n  @property({ type: String, reflect: true })\n  text = '';\n\n  /**\n   * The type of the tag.\n   */\n  @property({ reflect: true })\n  type = TAG_TYPE.GRAY;\n\n  render() {\n    const {\n      disabled,\n      _handleAILabelSlotChange: handleAILabelSlotChange,\n      _handleIconSlotChange: handleIconSlotChange,\n      _hasEllipsisApplied: hasEllipsisApplied,\n      size,\n      tagTitle,\n      text,\n      dismissTooltipLabel,\n      dismissTooltipAlignment,\n    } = this;\n\n    const dismissLabel = `Dismiss \"${text}\"`;\n    const dismissActionLabel =\n      dismissTooltipLabel || (hasEllipsisApplied ? dismissLabel : 'Dismiss');\n\n    return html`\n      ${size !== TAG_SIZE.SMALL\n        ? html`<slot name=\"icon\" @slotchange=\"${handleIconSlotChange}\"></slot>`\n        : ''}\n      <div class=\"${prefix}--interactive--tag-children\">\n        <span\n          title=\"${tagTitle ? tagTitle : text}\"\n          class=\"${prefix}--tag__label\">\n          ${text}\n        </span>\n        <slot name=\"decorator\" @slotchange=\"${handleAILabelSlotChange}\"></slot>\n        <slot name=\"ai-label\" @slotchange=\"${handleAILabelSlotChange}\"></slot>\n        <slot name=\"slug\" @slotchange=\"${handleAILabelSlotChange}\"></slot>\n        <cds-tooltip align=${dismissTooltipAlignment} enter-delay-ms=${0}>\n          <button\n            class=\"sb-tooltip-trigger\"\n            role=\"button\"\n            aria-labelledby=\"content\"\n            class=\"${prefix}--tag__close-icon\"\n            ?disabled=${disabled}>\n            ${iconLoader(Close16)}\n          </button>\n          <cds-tooltip-content id=\"content\">\n            ${dismissActionLabel}\n          </cds-tooltip-content>\n        </cds-tooltip>\n      </div>\n    `;\n  }\n\n  /**\n   * A selector that will return the slug item.\n   *\n   * remove in v12\n   */\n  static get slugItem() {\n    return `${prefix}-slug`;\n  }\n\n  /**\n   * A selector that will return the AI Label item.\n   */\n  static get aiLabelItem() {\n    return `${prefix}-ai-label`;\n  }\n\n  /**\n   * The name of the custom event fired before this tag is being closed upon a user gesture.\n   * Cancellation of this event stops the user-initiated action of closing this tag.\n   */\n  static get eventBeforeClose() {\n    return `${prefix}-dismissible-tag-beingclosed`;\n  }\n\n  /**\n   * The name of the custom event fired after this tag is closed upon a user gesture.\n   */\n  static get eventClose() {\n    return `${prefix}-dismissible-tag-closed`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSDismissibleTag;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,IAAA,oBAAA,MACM,0BAA0B,kBAAkB,WAAWA,aAAM,CAAC,CAAC,CAAC;;;uBAyD1C,UAAsB;GAE9C,IAAI,MAAM,aAAa,CAAC,CAAC,QAAQ,KAAK,WAAY,KAAK;QACjD,KAAK,UACP,MAAM,gBAAgB;SACjB,IAAI,KAAK,MAAM;KACpB,MAAM,mBAAmB,KAAK,sBAAsB;KACpD,MAAM,OAAO;MACX,SAAS;MACT,YAAY;MACZ,UAAU;MACV,QAAQ,EACN,aAAa,MAAM,OACrB;KACF;KACA,IACE,KAAK,cACH,IAAI,YACD,KAAK,YAAyC,kBAC/C,IACF,CACF,GACA;MACA,KAAK,OAAO;MACZ,IAAI,kBAAkB;OACpB,MAAM,gBAAiB,iBACpB;OACH,IAAI,eACF,cAAc,MAAM;MAExB;MACA,KAAK,cACH,IAAI,YACD,KAAK,YAAyC,YAC/C,IACF,CACF;KACF;IACF;;EAEJ;kBAMW;iCAUe;cAYnB;;kBAYI;cAMJ;;;;;;;CAvIP,wBAAkC;EAChC,IAAI,cAAc,KAAK;EACvB,OAAO,aAAa;GAClB,IACE,YAAY,QAAQ,YAAY,MAAM,yBACtC,CAAC,YAAY,aAAa,UAAU,KACnC,YAA4B,aAAa,MAAM,MAAM,SAEtD,OAAO;GAET,cAAc,YAAY;EAC5B;EACA,OAAO;CACT;;;;CAKA,yBAAmC,EAAE,UAAiB;EACpD,MAAM,aAAc,OACjB,cAAc,CAAC,CACf,QAAQ,SACN,KAAqB,YAAY,KAAA,IAE7B,KAAqB,QACnB,KAAK,YAAyC,WACjD,KAEC,KAAqB,QACnB,KAAK,YAAyC,QACjD,IACA,KACN;EACF,IAAI,WAAW,SAAS,GAAG;GACzB,WAAY,EAAE,CAAiB,aAAa,OAAO,GAAG,KAAK,MAAM;GACjE,WAAY,EAAE,CAAiB,aAAa,QAAQ,IAAI;GACxD,WAAY,EAAE,CAAiB,aAAa,QAAQ,QAAQ;EAC9D;EACA,KAAK,cAAc;CACrB;CAwGA,SAAS;EACP,MAAM,EACJ,UACA,0BAA0B,yBAC1B,uBAAuB,sBACvB,qBAAqB,oBACrB,MACA,UACA,MACA,qBACA,4BACE;EAEJ,MAAM,eAAe,YAAY,KAAK;EACtC,MAAM,qBACJ,wBAAwB,qBAAqB,eAAe;EAE9D,OAAO,IAAI;QACP,SAAA,OACE,IAAI,kCAAkC,qBAAqB,aAC3D,GAAG;0BACc;;mBAER,WAAW,WAAW,KAAK;yBACpB;YACd,KAAK;;8CAE6B,wBAAwB;6CACzB,wBAAwB;yCAC5B,wBAAwB;6BACpC,wBAAwB,kBAAkB,EAAE;;;;;2BAK7C;wBACJ,SAAS;cACnB,WAAW,OAAO,EAAE;;;cAGpB,mBAAmB;;;;;CAK/B;;;;;;CAOA,WAAW,WAAW;EACpB,OAAO;CACT;;;;CAKA,WAAW,cAAc;EACvB,OAAO;CACT;;;;;CAMA,WAAW,mBAAmB;EAC5B,OAAO;CACT;;;;CAKA,WAAW,aAAa;EACtB,OAAO;CACT;;gBAEgBC;;AAClB;YArOG,MAAM,QAAQ,CAAA,GAAA,kBAAA,WAAA,eAAA,KAAA,CAAA;YAqDd,aAAa,kBAAkB,CAAA,GAAA,kBAAA,WAAA,gBAAA,KAAA,CAAA;YAgD/B,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,kBAAA,WAAA,YAAA,KAAA,CAAA;YAMzC,SAAS;CACR,MAAM;CACN,WAAW;CACX,SAAS;AACX,CAAC,CAAA,GAAA,kBAAA,WAAA,2BAAA,KAAA,CAAA;YAMA,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAyB,SAAS;AAAK,CAAC,CAAA,GAAA,kBAAA,WAAA,uBAAA,KAAA,CAAA;YAM5E,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,kBAAA,WAAA,QAAA,KAAA,CAAA;YAMzC,SAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,kBAAA,WAAA,QAAA,KAAA,CAAA;YAMxC,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAa,SAAS;AAAK,CAAC,CAAA,GAAA,kBAAA,WAAA,YAAA,KAAA,CAAA;YAMhE,SAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,kBAAA,WAAA,QAAA,KAAA,CAAA;YAMxC,SAAS,EAAE,SAAS,KAAK,CAAC,CAAA,GAAA,kBAAA,WAAA,QAAA,KAAA,CAAA;gCArJ5BC,cAAc,qBAA2B,CAAA,GAAA,iBAAA;AAyO1C,IAAA,0BAAe"}

package/es/components/tag/operational-tag.js

@@ -7,7 +7,7 @@
 
 import "../../globals/settings.js";
 import { carbonElement } from "../../globals/decorators/carbon-element.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.135.0/helpers/esm/decorate.js";
 import FocusMixin from "../../globals/mixins/focus.js";
 import HostListener from "../../globals/decorators/host-listener.js";
 import HostListenerMixin from "../../globals/mixins/host-listener.js";

package/es/components/tag/operational-tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"operational-tag.js","names":["styles","customElement"],"sources":["../../../src/components/tag/operational-tag.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2025\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { TAG_SIZE, TAG_TYPE } from './defs';\nimport './tag';\nimport '../tooltip/index';\nimport styles from './tag.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport { TAG_SIZE, TAG_TYPE };\n\n/**\n * Operational tag.\n *\n * @element cds-operational-tag\n *\n * @fires cds-operational-tag-beforeselected - The custom event fired as the element is being selected\n * @fires cds-operational-tag-selected - The custom event fired after the element has been selected\n */\n@customElement(`${prefix}-operational-tag`)\nclass CDSOperationalTag extends HostListenerMixin(FocusMixin(LitElement)) {\n  /**\n   * Custom events to be triggered\n   *\n   * @param event Event object\n   */\n  protected triggerEvents = (event) => {\n    if (this.disabled) {\n      event.stopPropagation();\n    } else {\n      const init = {\n        bubbles: true,\n        cancelable: true,\n        composed: true,\n        detail: {\n          triggeredBy: event.target,\n        },\n      };\n      if (\n        this.dispatchEvent(\n          new CustomEvent(\n            (this.constructor as typeof CDSOperationalTag).eventBeforeSelected,\n            init\n          )\n        )\n      ) {\n        this.selected = !this.selected;\n        this.dispatchEvent(\n          new CustomEvent(\n            (this.constructor as typeof CDSOperationalTag).eventSelected,\n            init\n          )\n        );\n      }\n    }\n  };\n\n  /**\n   * Handles `click` event on this element.\n   *\n   * @param event The event.\n   */\n  @HostListener('shadowRoot:click')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleClick = (event: MouseEvent) => {\n    this.triggerEvents(event);\n  };\n\n  @HostListener('shadowRoot:keydown')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      this.triggerEvents(event);\n    }\n  };\n\n  /**\n   * `true` if the tag should be disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Specify the state of the selectable tag.\n   */\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  /**\n   * The size of the tag.\n   */\n  @property({ type: String, reflect: true })\n  size = TAG_SIZE.MEDIUM;\n\n  /**\n   * Provide text to be rendered inside of a the tag.\n   */\n  @property({ type: String, reflect: true })\n  text = '';\n\n  /**\n   * The type of the tag.\n   */\n  @property({ reflect: true })\n  type = TAG_TYPE.GRAY;\n\n  /**\n   * true if the tag text has ellipsis applied\n   */\n  @state()\n  _hasEllipsisApplied = false;\n\n  async updated() {\n    await this.updateComplete;\n\n    const textContainer = this.shadowRoot\n      ?.querySelector(`${prefix}-tag`)\n      ?.shadowRoot?.querySelector(`.${prefix}--tag__label`);\n    if (!textContainer) return;\n\n    const hasEllipsis = textContainer.scrollWidth > textContainer.clientWidth;\n\n    this._hasEllipsisApplied = hasEllipsis;\n  }\n\n  render() {\n    const {\n      disabled,\n      selected,\n      size,\n      text,\n      type,\n      _hasEllipsisApplied: hasEllipsisApplied,\n    } = this;\n\n    return html` ${hasEllipsisApplied\n      ? html` <cds-tooltip\n          align=\"bottom\"\n          keyboard-only\n          closeOnActivation\n          leave-delay-ms=${0}>\n          <cds-tag\n            part=\"tag\"\n            ?aria-pressed=\"${selected}\"\n            size=\"${size}\"\n            ?disabled=\"${disabled}\"\n            type=\"${type}\">\n            <slot name=\"icon\" slot=\"icon\"></slot>\n            ${text}\n            <slot name=\"decorator\" slot=\"decorator\"></slot>\n            <slot name=\"ai-label\" slot=\"ai-label\"></slot>\n            <slot name=\"slug\" slot=\"slug\"></slot>\n          </cds-tag>\n          <cds-tooltip-content id=\"content\"> ${text} </cds-tooltip-content>\n        </cds-tooltip>`\n      : html`\n          <cds-tag\n            part=\"tag\"\n            ?aria-pressed=\"${selected}\"\n            size=\"${size}\"\n            ?disabled=\"${disabled}\"\n            type=\"${type}\">\n            <slot name=\"icon\" slot=\"icon\"></slot>\n            ${text}\n            <slot name=\"decorator\" slot=\"decorator\"></slot>\n            <slot name=\"ai-label\" slot=\"ai-label\"></slot>\n            <slot name=\"slug\" slot=\"slug\"></slot>\n          </cds-tag>\n        `}`;\n  }\n\n  /**\n   * The name of the custom event before this tag is selected.\n   */\n  static get eventBeforeSelected() {\n    return `${prefix}-operational-tag-beingselected`;\n  }\n\n  /**\n   * The name of the custom event fired after this tag is selected.\n   */\n  static get eventSelected() {\n    return `${prefix}-operational-tag-selected`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSOperationalTag;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,IAAA,oBAAA,MACM,0BAA0B,kBAAkB,WAAW,WAAW,CAAC,CAAC;;;wBAM7C,UAAU;AACnC,OAAI,KAAK,SACP,OAAM,iBAAiB;QAClB;IACL,MAAM,OAAO;KACX,SAAS;KACT,YAAY;KACZ,UAAU;KACV,QAAQ,EACN,aAAa,MAAM,QACpB;KACF;AACD,QACE,KAAK,cACH,IAAI,YACD,KAAK,YAAyC,qBAC/C,KACD,CACF,EACD;AACA,UAAK,WAAW,CAAC,KAAK;AACtB,UAAK,cACH,IAAI,YACD,KAAK,YAAyC,eAC/C,KACD,CACF;;;;uBAaiB,UAAsB;AAC5C,QAAK,cAAc,MAAM;;yBAMD,UAAyB;AACjD,OAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,IACzC,MAAK,cAAc,MAAM;;kBAQlB;kBAMA;;cAYJ;;6BAYe;;CAEtB,MAAM,UAAU;AACd,QAAM,KAAK;EAEX,MAAM,gBAAgB,KAAK,YACvB,cAAc,UAAgB,EAC9B,YAAY,cAAc,mBAAyB;AACvD,MAAI,CAAC,cAAe;EAEpB,MAAM,cAAc,cAAc,cAAc,cAAc;AAE9D,OAAK,sBAAsB;;CAG7B,SAAS;EACP,MAAM,EACJ,UACA,UACA,MACA,MACA,MACA,qBAAqB,uBACnB;AAEJ,SAAO,IAAI,IAAI,qBACX,IAAI;;;;2BAIe,EAAE;;;6BAGA,SAAS;oBAClB,KAAK;yBACA,SAAS;oBACd,KAAK;;cAEX,KAAK;;;;;+CAK4B,KAAK;0BAE5C,IAAI;;;6BAGiB,SAAS;oBAClB,KAAK;yBACA,SAAS;oBACd,KAAK;;cAEX,KAAK;;;;;;;;;;CAWjB,WAAW,sBAAsB;AAC/B,SAAO;;;;;CAMT,WAAW,gBAAgB;AACzB,SAAO;;;gBAGOA;;;YA7Hf,aAAa,mBAAmB,CAAA,EAAA,kBAAA,WAAA,gBAAA,KAAA,EAAA;YAOhC,aAAa,qBAAqB,CAAA,EAAA,kBAAA,WAAA,kBAAA,KAAA,EAAA;YAYlC,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,kBAAA,WAAA,YAAA,KAAA,EAAA;YAM1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,kBAAA,WAAA,YAAA,KAAA,EAAA;YAM1C,SAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,kBAAA,WAAA,QAAA,KAAA,EAAA;YAMzC,SAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,kBAAA,WAAA,QAAA,KAAA,EAAA;YAMzC,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,kBAAA,WAAA,QAAA,KAAA,EAAA;YAM3B,OAAO,CAAA,EAAA,kBAAA,WAAA,uBAAA,KAAA,EAAA;gCA5FTC,cAAc,sBAA4B,CAAA,EAAA,kBAAA;AA2K3C,IAAA,0BAAe"}
+{"version":3,"file":"operational-tag.js","names":["styles","customElement"],"sources":["../../../src/components/tag/operational-tag.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2025\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { TAG_SIZE, TAG_TYPE } from './defs';\nimport './tag';\nimport '../tooltip/index';\nimport styles from './tag.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport { TAG_SIZE, TAG_TYPE };\n\n/**\n * Operational tag.\n *\n * @element cds-operational-tag\n *\n * @fires cds-operational-tag-beforeselected - The custom event fired as the element is being selected\n * @fires cds-operational-tag-selected - The custom event fired after the element has been selected\n */\n@customElement(`${prefix}-operational-tag`)\nclass CDSOperationalTag extends HostListenerMixin(FocusMixin(LitElement)) {\n  /**\n   * Custom events to be triggered\n   *\n   * @param event Event object\n   */\n  protected triggerEvents = (event) => {\n    if (this.disabled) {\n      event.stopPropagation();\n    } else {\n      const init = {\n        bubbles: true,\n        cancelable: true,\n        composed: true,\n        detail: {\n          triggeredBy: event.target,\n        },\n      };\n      if (\n        this.dispatchEvent(\n          new CustomEvent(\n            (this.constructor as typeof CDSOperationalTag).eventBeforeSelected,\n            init\n          )\n        )\n      ) {\n        this.selected = !this.selected;\n        this.dispatchEvent(\n          new CustomEvent(\n            (this.constructor as typeof CDSOperationalTag).eventSelected,\n            init\n          )\n        );\n      }\n    }\n  };\n\n  /**\n   * Handles `click` event on this element.\n   *\n   * @param event The event.\n   */\n  @HostListener('shadowRoot:click')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleClick = (event: MouseEvent) => {\n    this.triggerEvents(event);\n  };\n\n  @HostListener('shadowRoot:keydown')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      this.triggerEvents(event);\n    }\n  };\n\n  /**\n   * `true` if the tag should be disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Specify the state of the selectable tag.\n   */\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  /**\n   * The size of the tag.\n   */\n  @property({ type: String, reflect: true })\n  size = TAG_SIZE.MEDIUM;\n\n  /**\n   * Provide text to be rendered inside of a the tag.\n   */\n  @property({ type: String, reflect: true })\n  text = '';\n\n  /**\n   * The type of the tag.\n   */\n  @property({ reflect: true })\n  type = TAG_TYPE.GRAY;\n\n  /**\n   * true if the tag text has ellipsis applied\n   */\n  @state()\n  _hasEllipsisApplied = false;\n\n  async updated() {\n    await this.updateComplete;\n\n    const textContainer = this.shadowRoot\n      ?.querySelector(`${prefix}-tag`)\n      ?.shadowRoot?.querySelector(`.${prefix}--tag__label`);\n    if (!textContainer) return;\n\n    const hasEllipsis = textContainer.scrollWidth > textContainer.clientWidth;\n\n    this._hasEllipsisApplied = hasEllipsis;\n  }\n\n  render() {\n    const {\n      disabled,\n      selected,\n      size,\n      text,\n      type,\n      _hasEllipsisApplied: hasEllipsisApplied,\n    } = this;\n\n    return html` ${hasEllipsisApplied\n      ? html` <cds-tooltip\n          align=\"bottom\"\n          keyboard-only\n          closeOnActivation\n          leave-delay-ms=${0}>\n          <cds-tag\n            part=\"tag\"\n            ?aria-pressed=\"${selected}\"\n            size=\"${size}\"\n            ?disabled=\"${disabled}\"\n            type=\"${type}\">\n            <slot name=\"icon\" slot=\"icon\"></slot>\n            ${text}\n            <slot name=\"decorator\" slot=\"decorator\"></slot>\n            <slot name=\"ai-label\" slot=\"ai-label\"></slot>\n            <slot name=\"slug\" slot=\"slug\"></slot>\n          </cds-tag>\n          <cds-tooltip-content id=\"content\"> ${text} </cds-tooltip-content>\n        </cds-tooltip>`\n      : html`\n          <cds-tag\n            part=\"tag\"\n            ?aria-pressed=\"${selected}\"\n            size=\"${size}\"\n            ?disabled=\"${disabled}\"\n            type=\"${type}\">\n            <slot name=\"icon\" slot=\"icon\"></slot>\n            ${text}\n            <slot name=\"decorator\" slot=\"decorator\"></slot>\n            <slot name=\"ai-label\" slot=\"ai-label\"></slot>\n            <slot name=\"slug\" slot=\"slug\"></slot>\n          </cds-tag>\n        `}`;\n  }\n\n  /**\n   * The name of the custom event before this tag is selected.\n   */\n  static get eventBeforeSelected() {\n    return `${prefix}-operational-tag-beingselected`;\n  }\n\n  /**\n   * The name of the custom event fired after this tag is selected.\n   */\n  static get eventSelected() {\n    return `${prefix}-operational-tag-selected`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSOperationalTag;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,IAAA,oBAAA,MACM,0BAA0B,kBAAkB,WAAW,UAAU,CAAC,CAAC,CAAC;;;wBAM7C,UAAU;GACnC,IAAI,KAAK,UACP,MAAM,gBAAgB;QACjB;IACL,MAAM,OAAO;KACX,SAAS;KACT,YAAY;KACZ,UAAU;KACV,QAAQ,EACN,aAAa,MAAM,OACrB;IACF;IACA,IACE,KAAK,cACH,IAAI,YACD,KAAK,YAAyC,qBAC/C,IACF,CACF,GACA;KACA,KAAK,WAAW,CAAC,KAAK;KACtB,KAAK,cACH,IAAI,YACD,KAAK,YAAyC,eAC/C,IACF,CACF;IACF;GACF;EACF;uBAUwB,UAAsB;GAC5C,KAAK,cAAc,KAAK;EAC1B;yBAK0B,UAAyB;GACjD,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KACzC,KAAK,cAAc,KAAK;EAE5B;kBAMW;kBAMA;;cAYJ;;6BAYe;;CAEtB,MAAM,UAAU;EACd,MAAM,KAAK;EAEX,MAAM,gBAAgB,KAAK,YACvB,cAAc,SAAe,CAAC,EAC9B,YAAY,cAAc,kBAAwB;EACtD,IAAI,CAAC,eAAe;EAEpB,MAAM,cAAc,cAAc,cAAc,cAAc;EAE9D,KAAK,sBAAsB;CAC7B;CAEA,SAAS;EACP,MAAM,EACJ,UACA,UACA,MACA,MACA,MACA,qBAAqB,uBACnB;EAEJ,OAAO,IAAI,IAAI,qBACX,IAAI;;;;2BAIe,EAAE;;;6BAGA,SAAS;oBAClB,KAAK;yBACA,SAAS;oBACd,KAAK;;cAEX,KAAK;;;;;+CAK4B,KAAK;0BAE5C,IAAI;;;6BAGiB,SAAS;oBAClB,KAAK;yBACA,SAAS;oBACd,KAAK;;cAEX,KAAK;;;;;;CAMjB;;;;CAKA,WAAW,sBAAsB;EAC/B,OAAO;CACT;;;;CAKA,WAAW,gBAAgB;EACzB,OAAO;CACT;;gBAEgBA;;AAClB;YA9HG,aAAa,kBAAkB,CAAA,GAAA,kBAAA,WAAA,gBAAA,KAAA,CAAA;YAO/B,aAAa,oBAAoB,CAAA,GAAA,kBAAA,WAAA,kBAAA,KAAA,CAAA;YAYjC,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,kBAAA,WAAA,YAAA,KAAA,CAAA;YAMzC,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,kBAAA,WAAA,YAAA,KAAA,CAAA;YAMzC,SAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,kBAAA,WAAA,QAAA,KAAA,CAAA;YAMxC,SAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,kBAAA,WAAA,QAAA,KAAA,CAAA;YAMxC,SAAS,EAAE,SAAS,KAAK,CAAC,CAAA,GAAA,kBAAA,WAAA,QAAA,KAAA,CAAA;YAM1B,MAAM,CAAA,GAAA,kBAAA,WAAA,uBAAA,KAAA,CAAA;gCA5FRC,cAAc,qBAA2B,CAAA,GAAA,iBAAA;AA2K1C,IAAA,0BAAe"}

package/es/components/tag/selectable-tag.js

@@ -7,7 +7,7 @@
 
 import "../../globals/settings.js";
 import { carbonElement } from "../../globals/decorators/carbon-element.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.135.0/helpers/esm/decorate.js";
 import FocusMixin from "../../globals/mixins/focus.js";
 import HostListener from "../../globals/decorators/host-listener.js";
 import HostListenerMixin from "../../globals/mixins/host-listener.js";

package/es/components/tag/selectable-tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"selectable-tag.js","names":["styles","customElement"],"sources":["../../../src/components/tag/selectable-tag.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2025\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { TAG_SIZE, TAG_TYPE } from './defs';\nimport './tag';\nimport '../tooltip/index';\nimport styles from './tag.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport { TAG_SIZE, TAG_TYPE };\n\n/**\n * Selectable tag.\n *\n * @element cds-selectable-tag\n *\n * @fires cds-selectable-tag-beforeselected - The custom event fired as the element is being selected\n * @fires cds-selectable-tag-selected - The custom event fired after the element has been selected\n */\n@customElement(`${prefix}-selectable-tag`)\nclass CDSSelectableTag extends HostListenerMixin(FocusMixin(LitElement)) {\n  /**\n   * Custom events to be triggered\n   * @param event Event object\n   */\n  protected triggerEvents = (event) => {\n    if (this.disabled) {\n      event.stopPropagation();\n    } else {\n      const init = {\n        bubbles: true,\n        cancelable: true,\n        composed: true,\n        detail: {\n          triggeredBy: event.target,\n        },\n      };\n      if (\n        this.dispatchEvent(\n          new CustomEvent(\n            (this.constructor as typeof CDSSelectableTag).eventBeforeSelected,\n            init\n          )\n        )\n      ) {\n        this.selected = !this.selected;\n        this.dispatchEvent(\n          new CustomEvent(\n            (this.constructor as typeof CDSSelectableTag).eventSelected,\n            init\n          )\n        );\n      }\n    }\n  };\n\n  /**\n   * Handles `click` event on this element.\n   *\n   * @param event The event.\n   */\n  @HostListener('shadowRoot:click')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleClick = (event: MouseEvent) => {\n    this.triggerEvents(event);\n  };\n\n  @HostListener('shadowRoot:keydown')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      this.triggerEvents(event);\n    }\n  };\n\n  /**\n   * `true` if the tag should be disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Specify the state of the selectable tag.\n   */\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  /**\n   * The size of the tag.\n   */\n  @property({ type: String, reflect: true })\n  size = TAG_SIZE.MEDIUM;\n\n  /**\n   * Provide text to be rendered inside of a the tag.\n   */\n  @property({ type: String, reflect: true })\n  text = '';\n\n  /**\n   * true if the tag text has ellipsis applied\n   */\n  @state()\n  protected _hasEllipsisApplied = false;\n\n  async updated() {\n    await this.updateComplete;\n\n    const textContainer = this.shadowRoot\n      ?.querySelector(`${prefix}-tag`)\n      ?.shadowRoot?.querySelector(`.${prefix}--tag__label`);\n    if (!textContainer) return;\n\n    const hasEllipsis = textContainer.scrollWidth > textContainer.clientWidth;\n\n    this._hasEllipsisApplied = hasEllipsis;\n  }\n\n  render() {\n    const {\n      disabled,\n      selected,\n      size,\n      text,\n      _hasEllipsisApplied: hasEllipsisApplied,\n    } = this;\n\n    return html` ${hasEllipsisApplied\n      ? html` <cds-tooltip align=\"bottom\" keyboard-only leave-delay-ms=${0}>\n          <cds-tag\n            ?aria-pressed=\"${selected}\"\n            size=\"${size}\"\n            ?disabled=\"${disabled}\">\n            <slot name=\"icon\" slot=\"icon\"></slot>\n            ${text}\n            <slot name=\"decorator\" slot=\"decorator\"></slot>\n            <slot name=\"ai-label\" slot=\"ai-label\"></slot>\n            <slot name=\"slug\" slot=\"slug\"></slot>\n          </cds-tag>\n          <cds-tooltip-content id=\"content\"> ${text} </cds-tooltip-content>\n        </cds-tooltip>`\n      : html`\n          <cds-tag\n            ?aria-pressed=\"${selected}\"\n            size=\"${size}\"\n            ?disabled=\"${disabled}\">\n            <slot name=\"icon\" slot=\"icon\"></slot>\n            ${text}\n            <slot name=\"decorator\" slot=\"decorator\"></slot>\n            <slot name=\"ai-label\" slot=\"ai-label\"></slot>\n            <slot name=\"slug\" slot=\"slug\"></slot>\n          </cds-tag>\n        `}`;\n  }\n\n  /**\n   * The name of the custom event before this tag is selected.\n   */\n  static get eventBeforeSelected() {\n    return `${prefix}-selectable-tag-beingselected`;\n  }\n\n  /**\n   * The name of the custom event fired after this tag is selected.\n   */\n  static get eventSelected() {\n    return `${prefix}-selectable-tag-selected`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSSelectableTag;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,IAAA,mBAAA,MACM,yBAAyB,kBAAkB,WAAW,WAAW,CAAC,CAAC;;;wBAK5C,UAAU;AACnC,OAAI,KAAK,SACP,OAAM,iBAAiB;QAClB;IACL,MAAM,OAAO;KACX,SAAS;KACT,YAAY;KACZ,UAAU;KACV,QAAQ,EACN,aAAa,MAAM,QACpB;KACF;AACD,QACE,KAAK,cACH,IAAI,YACD,KAAK,YAAwC,qBAC9C,KACD,CACF,EACD;AACA,UAAK,WAAW,CAAC,KAAK;AACtB,UAAK,cACH,IAAI,YACD,KAAK,YAAwC,eAC9C,KACD,CACF;;;;uBAaiB,UAAsB;AAC5C,QAAK,cAAc,MAAM;;yBAMD,UAAyB;AACjD,OAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,IACzC,MAAK,cAAc,MAAM;;kBAQlB;kBAMA;;cAYJ;6BAMyB;;CAEhC,MAAM,UAAU;AACd,QAAM,KAAK;EAEX,MAAM,gBAAgB,KAAK,YACvB,cAAc,UAAgB,EAC9B,YAAY,cAAc,mBAAyB;AACvD,MAAI,CAAC,cAAe;EAEpB,MAAM,cAAc,cAAc,cAAc,cAAc;AAE9D,OAAK,sBAAsB;;CAG7B,SAAS;EACP,MAAM,EACJ,UACA,UACA,MACA,MACA,qBAAqB,uBACnB;AAEJ,SAAO,IAAI,IAAI,qBACX,IAAI,6DAA6D,EAAE;;6BAE9C,SAAS;oBAClB,KAAK;yBACA,SAAS;;cAEpB,KAAK;;;;;+CAK4B,KAAK;0BAE5C,IAAI;;6BAEiB,SAAS;oBAClB,KAAK;yBACA,SAAS;;cAEpB,KAAK;;;;;;;;;;CAWjB,WAAW,sBAAsB;AAC/B,SAAO;;;;;CAMT,WAAW,gBAAgB;AACzB,SAAO;;;gBAGOA;;;YA9Gf,aAAa,mBAAmB,CAAA,EAAA,iBAAA,WAAA,gBAAA,KAAA,EAAA;YAOhC,aAAa,qBAAqB,CAAA,EAAA,iBAAA,WAAA,kBAAA,KAAA,EAAA;YAYlC,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,iBAAA,WAAA,YAAA,KAAA,EAAA;YAM1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,iBAAA,WAAA,YAAA,KAAA,EAAA;YAM1C,SAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,iBAAA,WAAA,QAAA,KAAA,EAAA;YAMzC,SAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,iBAAA,WAAA,QAAA,KAAA,EAAA;YAMzC,OAAO,CAAA,EAAA,iBAAA,WAAA,uBAAA,KAAA,EAAA;+BArFTC,cAAc,qBAA2B,CAAA,EAAA,iBAAA;AA2J1C,IAAA,yBAAe"}
+{"version":3,"file":"selectable-tag.js","names":["styles","customElement"],"sources":["../../../src/components/tag/selectable-tag.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2025\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { TAG_SIZE, TAG_TYPE } from './defs';\nimport './tag';\nimport '../tooltip/index';\nimport styles from './tag.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport { TAG_SIZE, TAG_TYPE };\n\n/**\n * Selectable tag.\n *\n * @element cds-selectable-tag\n *\n * @fires cds-selectable-tag-beforeselected - The custom event fired as the element is being selected\n * @fires cds-selectable-tag-selected - The custom event fired after the element has been selected\n */\n@customElement(`${prefix}-selectable-tag`)\nclass CDSSelectableTag extends HostListenerMixin(FocusMixin(LitElement)) {\n  /**\n   * Custom events to be triggered\n   * @param event Event object\n   */\n  protected triggerEvents = (event) => {\n    if (this.disabled) {\n      event.stopPropagation();\n    } else {\n      const init = {\n        bubbles: true,\n        cancelable: true,\n        composed: true,\n        detail: {\n          triggeredBy: event.target,\n        },\n      };\n      if (\n        this.dispatchEvent(\n          new CustomEvent(\n            (this.constructor as typeof CDSSelectableTag).eventBeforeSelected,\n            init\n          )\n        )\n      ) {\n        this.selected = !this.selected;\n        this.dispatchEvent(\n          new CustomEvent(\n            (this.constructor as typeof CDSSelectableTag).eventSelected,\n            init\n          )\n        );\n      }\n    }\n  };\n\n  /**\n   * Handles `click` event on this element.\n   *\n   * @param event The event.\n   */\n  @HostListener('shadowRoot:click')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleClick = (event: MouseEvent) => {\n    this.triggerEvents(event);\n  };\n\n  @HostListener('shadowRoot:keydown')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      this.triggerEvents(event);\n    }\n  };\n\n  /**\n   * `true` if the tag should be disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Specify the state of the selectable tag.\n   */\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  /**\n   * The size of the tag.\n   */\n  @property({ type: String, reflect: true })\n  size = TAG_SIZE.MEDIUM;\n\n  /**\n   * Provide text to be rendered inside of a the tag.\n   */\n  @property({ type: String, reflect: true })\n  text = '';\n\n  /**\n   * true if the tag text has ellipsis applied\n   */\n  @state()\n  protected _hasEllipsisApplied = false;\n\n  async updated() {\n    await this.updateComplete;\n\n    const textContainer = this.shadowRoot\n      ?.querySelector(`${prefix}-tag`)\n      ?.shadowRoot?.querySelector(`.${prefix}--tag__label`);\n    if (!textContainer) return;\n\n    const hasEllipsis = textContainer.scrollWidth > textContainer.clientWidth;\n\n    this._hasEllipsisApplied = hasEllipsis;\n  }\n\n  render() {\n    const {\n      disabled,\n      selected,\n      size,\n      text,\n      _hasEllipsisApplied: hasEllipsisApplied,\n    } = this;\n\n    return html` ${hasEllipsisApplied\n      ? html` <cds-tooltip align=\"bottom\" keyboard-only leave-delay-ms=${0}>\n          <cds-tag\n            ?aria-pressed=\"${selected}\"\n            size=\"${size}\"\n            ?disabled=\"${disabled}\">\n            <slot name=\"icon\" slot=\"icon\"></slot>\n            ${text}\n            <slot name=\"decorator\" slot=\"decorator\"></slot>\n            <slot name=\"ai-label\" slot=\"ai-label\"></slot>\n            <slot name=\"slug\" slot=\"slug\"></slot>\n          </cds-tag>\n          <cds-tooltip-content id=\"content\"> ${text} </cds-tooltip-content>\n        </cds-tooltip>`\n      : html`\n          <cds-tag\n            ?aria-pressed=\"${selected}\"\n            size=\"${size}\"\n            ?disabled=\"${disabled}\">\n            <slot name=\"icon\" slot=\"icon\"></slot>\n            ${text}\n            <slot name=\"decorator\" slot=\"decorator\"></slot>\n            <slot name=\"ai-label\" slot=\"ai-label\"></slot>\n            <slot name=\"slug\" slot=\"slug\"></slot>\n          </cds-tag>\n        `}`;\n  }\n\n  /**\n   * The name of the custom event before this tag is selected.\n   */\n  static get eventBeforeSelected() {\n    return `${prefix}-selectable-tag-beingselected`;\n  }\n\n  /**\n   * The name of the custom event fired after this tag is selected.\n   */\n  static get eventSelected() {\n    return `${prefix}-selectable-tag-selected`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSSelectableTag;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,IAAA,mBAAA,MACM,yBAAyB,kBAAkB,WAAW,UAAU,CAAC,CAAC,CAAC;;;wBAK5C,UAAU;GACnC,IAAI,KAAK,UACP,MAAM,gBAAgB;QACjB;IACL,MAAM,OAAO;KACX,SAAS;KACT,YAAY;KACZ,UAAU;KACV,QAAQ,EACN,aAAa,MAAM,OACrB;IACF;IACA,IACE,KAAK,cACH,IAAI,YACD,KAAK,YAAwC,qBAC9C,IACF,CACF,GACA;KACA,KAAK,WAAW,CAAC,KAAK;KACtB,KAAK,cACH,IAAI,YACD,KAAK,YAAwC,eAC9C,IACF,CACF;IACF;GACF;EACF;uBAUwB,UAAsB;GAC5C,KAAK,cAAc,KAAK;EAC1B;yBAK0B,UAAyB;GACjD,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KACzC,KAAK,cAAc,KAAK;EAE5B;kBAMW;kBAMA;;cAYJ;6BAMyB;;CAEhC,MAAM,UAAU;EACd,MAAM,KAAK;EAEX,MAAM,gBAAgB,KAAK,YACvB,cAAc,SAAe,CAAC,EAC9B,YAAY,cAAc,kBAAwB;EACtD,IAAI,CAAC,eAAe;EAEpB,MAAM,cAAc,cAAc,cAAc,cAAc;EAE9D,KAAK,sBAAsB;CAC7B;CAEA,SAAS;EACP,MAAM,EACJ,UACA,UACA,MACA,MACA,qBAAqB,uBACnB;EAEJ,OAAO,IAAI,IAAI,qBACX,IAAI,6DAA6D,EAAE;;6BAE9C,SAAS;oBAClB,KAAK;yBACA,SAAS;;cAEpB,KAAK;;;;;+CAK4B,KAAK;0BAE5C,IAAI;;6BAEiB,SAAS;oBAClB,KAAK;yBACA,SAAS;;cAEpB,KAAK;;;;;;CAMjB;;;;CAKA,WAAW,sBAAsB;EAC/B,OAAO;CACT;;;;CAKA,WAAW,gBAAgB;EACzB,OAAO;CACT;;gBAEgBA;;AAClB;YA/GG,aAAa,kBAAkB,CAAA,GAAA,iBAAA,WAAA,gBAAA,KAAA,CAAA;YAO/B,aAAa,oBAAoB,CAAA,GAAA,iBAAA,WAAA,kBAAA,KAAA,CAAA;YAYjC,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,iBAAA,WAAA,YAAA,KAAA,CAAA;YAMzC,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,iBAAA,WAAA,YAAA,KAAA,CAAA;YAMzC,SAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,iBAAA,WAAA,QAAA,KAAA,CAAA;YAMxC,SAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,iBAAA,WAAA,QAAA,KAAA,CAAA;YAMxC,MAAM,CAAA,GAAA,iBAAA,WAAA,uBAAA,KAAA,CAAA;+BArFRC,cAAc,oBAA0B,CAAA,GAAA,gBAAA;AA2JzC,IAAA,yBAAe"}

package/es/components/tag/tag-skeleton.js

@@ -7,7 +7,7 @@
 
 import "../../globals/settings.js";
 import { carbonElement } from "../../globals/decorators/carbon-element.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.135.0/helpers/esm/decorate.js";
 import "./defs.js";
 import tag_default from "./tag.scss.js";
 import { LitElement, html } from "lit";

package/es/components/tag/tag-skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag-skeleton.js","names":["styles","customElement"],"sources":["../../../src/components/tag/tag-skeleton.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2025\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { prefix } from '../../globals/settings';\nimport { TAG_SIZE } from './defs';\nimport styles from './tag.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Skeleton of tag.\n *\n * @element cds-tag-skeleton\n */\n@customElement(`${prefix}-tag-skeleton`)\nexport default class CDSTagSkeleton extends LitElement {\n  /**\n   * Specify the size of the Tag. Currently supports either `sm`,\n   * `md` (default) or `lg` sizes.\n   */\n  @property({ reflect: true, type: String })\n  size = TAG_SIZE.SMALL;\n\n  render() {\n    const tagClasses = classMap({\n      [`${prefix}--tag`]: true,\n      [`${prefix}--skeleton`]: true,\n      [`${prefix}--layout--size-${this.size}`]: this.size,\n    });\n    return html` <span class=\"${tagClasses}\"></span> `;\n  }\n\n  static styles = styles;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAqBe,IAAA,iBAAA,MAAM,uBAAuB,WAAW;;;;;CAQrD,SAAS;AAMP,SAAO,IAAI,iBALQ,SAAS;IACzB,aAAmB;IACnB,kBAAwB;IACxB,qBAA2B,KAAK,SAAS,KAAK;GAChD,CAAC,CACqC;;;gBAGzBA;;;YAZf,SAAS;CAAE,SAAS;CAAM,MAAM;CAAQ,CAAC,CAAA,EAAA,eAAA,WAAA,QAAA,KAAA,EAAA;6BAN3CC,cAAc,mBAAyB,CAAA,EAAA,eAAA"}
+{"version":3,"file":"tag-skeleton.js","names":["styles","customElement"],"sources":["../../../src/components/tag/tag-skeleton.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2025\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { prefix } from '../../globals/settings';\nimport { TAG_SIZE } from './defs';\nimport styles from './tag.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Skeleton of tag.\n *\n * @element cds-tag-skeleton\n */\n@customElement(`${prefix}-tag-skeleton`)\nexport default class CDSTagSkeleton extends LitElement {\n  /**\n   * Specify the size of the Tag. Currently supports either `sm`,\n   * `md` (default) or `lg` sizes.\n   */\n  @property({ reflect: true, type: String })\n  size = TAG_SIZE.SMALL;\n\n  render() {\n    const tagClasses = classMap({\n      [`${prefix}--tag`]: true,\n      [`${prefix}--skeleton`]: true,\n      [`${prefix}--layout--size-${this.size}`]: this.size,\n    });\n    return html` <span class=\"${tagClasses}\"></span> `;\n  }\n\n  static styles = styles;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAqBe,IAAA,iBAAA,MAAM,uBAAuB,WAAW;;;;;CAQrD,SAAS;EAMP,OAAO,IAAI,iBALQ,SAAS;IACzB,aAAmB;IACnB,kBAAwB;IACxB,qBAA2B,KAAK,SAAS,KAAK;EACjD,CACqC,EAAE;CACzC;;gBAEgBA;;AAClB;YAbG,SAAS;CAAE,SAAS;CAAM,MAAM;AAAO,CAAC,CAAA,GAAA,eAAA,WAAA,QAAA,KAAA,CAAA;6BAN1CC,cAAc,kBAAwB,CAAA,GAAA,cAAA"}

package/es/components/tag/tag.js

@@ -7,7 +7,7 @@
 
 import "../../globals/settings.js";
 import { carbonElement } from "../../globals/decorators/carbon-element.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.135.0/helpers/esm/decorate.js";
 import iconLoader from "../../globals/internal/icon-loader.js";
 import FocusMixin from "../../globals/mixins/focus.js";
 import HostListener from "../../globals/decorators/host-listener.js";

package/es/components/tag/tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag.js","names":["styles","customElement"],"sources":["../../../src/components/tag/tag.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, query, state } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport Close16 from '@carbon/icons/es/close/16.js';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { TAG_SIZE, TAG_TYPE } from './defs';\nimport styles from './tag.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport { TAG_SIZE, TAG_TYPE };\n\n/**\n * Tag.\n * @element cds-tag\n * @fires cds-tag-beingclosed - The custom event fired as the element is being closed\n * @fires cds-tag-closed - The custom event fired after the element has been closed\n */\n@customElement(`${prefix}-tag`)\nclass CDSTag extends HostListenerMixin(FocusMixin(LitElement)) {\n  @query('button')\n  protected _buttonNode!: HTMLButtonElement;\n\n  /**\n   * Handles `slotchange` event.\n   */\n  protected _handleAILabelSlotChange({ target }: Event) {\n    const hasContent = (target as HTMLSlotElement)\n      .assignedNodes()\n      .filter((elem) =>\n        (elem as HTMLElement).matches !== undefined\n          ? (elem as HTMLElement).matches(\n              (this.constructor as typeof CDSTag).aiLabelItem\n            ) ||\n            // remove reference of slug in v12\n            (elem as HTMLElement).matches(\n              (this.constructor as typeof CDSTag).slugItem\n            )\n          : false\n      );\n    if (hasContent.length > 0) {\n      (hasContent[0] as HTMLElement).setAttribute('tag', `${this.type}`);\n      (hasContent[0] as HTMLElement).setAttribute('size', 'sm');\n      (hasContent[0] as HTMLElement).setAttribute('kind', 'inline');\n    }\n    this.requestUpdate();\n  }\n\n  /**\n   * Handles `slotchange` event.\n   */\n  protected _handleIconSlotChange({ target }: Event) {\n    const hasIcon = (target as HTMLSlotElement).assignedNodes();\n\n    this.hasCustomIcon = hasIcon.length > 0;\n    this.requestUpdate();\n  }\n\n  /**\n   * Handles `click` event on this element.\n   *\n   * @param event The event.\n   */\n  @HostListener('shadowRoot:click')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  protected _handleClick = (event: MouseEvent) => {\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n    if (event.composedPath().indexOf(this._buttonNode!) >= 0) {\n      if (this.disabled) {\n        event.stopPropagation();\n      } else if (this.open) {\n        const init = {\n          bubbles: true,\n          cancelable: true,\n          composed: true,\n          detail: {\n            triggeredBy: event.target,\n          },\n        };\n        if (\n          this.dispatchEvent(\n            new CustomEvent(\n              (this.constructor as typeof CDSTag).eventBeforeClose,\n              init\n            )\n          )\n        ) {\n          this.open = false;\n          this.dispatchEvent(\n            new CustomEvent(\n              (this.constructor as typeof CDSTag).eventClose,\n              init\n            )\n          );\n        }\n      }\n    }\n  };\n\n  /**\n   * Text to show on filter tag \"clear\" buttons. Corresponds to the attribute with the same name\n   *\n   * @deprecated The `title` property has been deprecated and will be removed in the next major version. Use cds-dismissible-tag instead.\n   */\n  @property({ type: String })\n  title = 'Clear filter';\n\n  /**\n   * `true` if the tag should be disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Determine if is a filter/chip\n   *\n   * @deprecated The `filter` property has been deprecated and will be removed in the next major version. Use cds-dismissible-tag instead.\n   */\n  @property({ type: Boolean, reflect: true })\n  filter = false;\n\n  /**\n   * `true` if there is a custom icon.\n   */\n  @property({ type: Boolean, attribute: 'has-custom-icon', reflect: true })\n  hasCustomIcon = false;\n\n  /**\n   * `true` if the tag should be open.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = true;\n\n  /**\n   * The size of the tag.\n   */\n  @property({ reflect: true })\n  size = TAG_SIZE.MEDIUM;\n\n  /**\n   * The type of the tag.\n   */\n  @property({ reflect: true })\n  type = TAG_TYPE.GRAY;\n\n  /**\n   * true if the tag text has ellipsis applied\n   */\n  @state()\n  _hasEllipsisApplied = false;\n\n  updated() {\n    const textContainer = this.shadowRoot?.querySelector(\n      `.${prefix}--tag__label`\n    );\n    if (!textContainer || this._hasEllipsisApplied === true) return;\n\n    this._hasEllipsisApplied =\n      textContainer.scrollWidth > textContainer.clientWidth;\n\n    const root = this.getRootNode();\n    // Check if the root is a shadow root and get its host\n    if (root instanceof ShadowRoot) {\n      const parent = root.host.tagName.toLowerCase();\n      if (\n        parent === `${prefix}-selectable-tag` ||\n        parent === `${prefix}-operational-tag`\n      ) {\n        this.setAttribute('role', 'button');\n        this.tabIndex = this.disabled ? -1 : 0;\n      }\n    }\n  }\n\n  render() {\n    const {\n      disabled,\n      filter,\n      _handleAILabelSlotChange: handleAILabelSlotChange,\n      _handleIconSlotChange: handleIconSlotChange,\n      size,\n      title,\n    } = this;\n\n    return html`\n      ${size !== TAG_SIZE.SMALL\n        ? html`<slot name=\"icon\" @slotchange=\"${handleIconSlotChange}\"></slot>`\n        : ''}\n      <span class=\"${prefix}--tag__label\">\n        <slot></slot>\n      </span>\n      <slot name=\"decorator\" @slotchange=\"${handleAILabelSlotChange}\"></slot>\n      <slot name=\"ai-label\" @slotchange=\"${handleAILabelSlotChange}\"></slot>\n      <slot name=\"slug\" @slotchange=\"${handleAILabelSlotChange}\"></slot>\n      ${filter\n        ? html`\n            <button class=\"${prefix}--tag__close-icon\" ?disabled=${disabled}>\n              ${iconLoader(Close16, { 'aria-label': title })}\n            </button>\n          `\n        : ``}\n    `;\n  }\n\n  /**\n   * A selector that will return the slug item.\n   *\n   * remove in v12\n   */\n  static get slugItem() {\n    return `${prefix}-slug`;\n  }\n\n  /**\n   * A selector that will return the AI Label item.\n   */\n  static get aiLabelItem() {\n    return `${prefix}-ai-label`;\n  }\n\n  /**\n   * The name of the custom event fired before this tag is being closed upon a user gesture.\n   * Cancellation of this event stops the user-initiated action of closing this tag.\n   */\n  static get eventBeforeClose() {\n    return `${prefix}-tag-beingclosed`;\n  }\n\n  /**\n   * The name of the custom event fired after this tag is closed upon a user gesture.\n   */\n  static get eventClose() {\n    return `${prefix}-tag-closed`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSTag;\n"],"mappings":"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"}
+{"version":3,"file":"tag.js","names":["styles","customElement"],"sources":["../../../src/components/tag/tag.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, query, state } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport Close16 from '@carbon/icons/es/close/16.js';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { TAG_SIZE, TAG_TYPE } from './defs';\nimport styles from './tag.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport { TAG_SIZE, TAG_TYPE };\n\n/**\n * Tag.\n * @element cds-tag\n * @fires cds-tag-beingclosed - The custom event fired as the element is being closed\n * @fires cds-tag-closed - The custom event fired after the element has been closed\n */\n@customElement(`${prefix}-tag`)\nclass CDSTag extends HostListenerMixin(FocusMixin(LitElement)) {\n  @query('button')\n  protected _buttonNode!: HTMLButtonElement;\n\n  /**\n   * Handles `slotchange` event.\n   */\n  protected _handleAILabelSlotChange({ target }: Event) {\n    const hasContent = (target as HTMLSlotElement)\n      .assignedNodes()\n      .filter((elem) =>\n        (elem as HTMLElement).matches !== undefined\n          ? (elem as HTMLElement).matches(\n              (this.constructor as typeof CDSTag).aiLabelItem\n            ) ||\n            // remove reference of slug in v12\n            (elem as HTMLElement).matches(\n              (this.constructor as typeof CDSTag).slugItem\n            )\n          : false\n      );\n    if (hasContent.length > 0) {\n      (hasContent[0] as HTMLElement).setAttribute('tag', `${this.type}`);\n      (hasContent[0] as HTMLElement).setAttribute('size', 'sm');\n      (hasContent[0] as HTMLElement).setAttribute('kind', 'inline');\n    }\n    this.requestUpdate();\n  }\n\n  /**\n   * Handles `slotchange` event.\n   */\n  protected _handleIconSlotChange({ target }: Event) {\n    const hasIcon = (target as HTMLSlotElement).assignedNodes();\n\n    this.hasCustomIcon = hasIcon.length > 0;\n    this.requestUpdate();\n  }\n\n  /**\n   * Handles `click` event on this element.\n   *\n   * @param event The event.\n   */\n  @HostListener('shadowRoot:click')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  protected _handleClick = (event: MouseEvent) => {\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n    if (event.composedPath().indexOf(this._buttonNode!) >= 0) {\n      if (this.disabled) {\n        event.stopPropagation();\n      } else if (this.open) {\n        const init = {\n          bubbles: true,\n          cancelable: true,\n          composed: true,\n          detail: {\n            triggeredBy: event.target,\n          },\n        };\n        if (\n          this.dispatchEvent(\n            new CustomEvent(\n              (this.constructor as typeof CDSTag).eventBeforeClose,\n              init\n            )\n          )\n        ) {\n          this.open = false;\n          this.dispatchEvent(\n            new CustomEvent(\n              (this.constructor as typeof CDSTag).eventClose,\n              init\n            )\n          );\n        }\n      }\n    }\n  };\n\n  /**\n   * Text to show on filter tag \"clear\" buttons. Corresponds to the attribute with the same name\n   *\n   * @deprecated The `title` property has been deprecated and will be removed in the next major version. Use cds-dismissible-tag instead.\n   */\n  @property({ type: String })\n  title = 'Clear filter';\n\n  /**\n   * `true` if the tag should be disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Determine if is a filter/chip\n   *\n   * @deprecated The `filter` property has been deprecated and will be removed in the next major version. Use cds-dismissible-tag instead.\n   */\n  @property({ type: Boolean, reflect: true })\n  filter = false;\n\n  /**\n   * `true` if there is a custom icon.\n   */\n  @property({ type: Boolean, attribute: 'has-custom-icon', reflect: true })\n  hasCustomIcon = false;\n\n  /**\n   * `true` if the tag should be open.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = true;\n\n  /**\n   * The size of the tag.\n   */\n  @property({ reflect: true })\n  size = TAG_SIZE.MEDIUM;\n\n  /**\n   * The type of the tag.\n   */\n  @property({ reflect: true })\n  type = TAG_TYPE.GRAY;\n\n  /**\n   * true if the tag text has ellipsis applied\n   */\n  @state()\n  _hasEllipsisApplied = false;\n\n  updated() {\n    const textContainer = this.shadowRoot?.querySelector(\n      `.${prefix}--tag__label`\n    );\n    if (!textContainer || this._hasEllipsisApplied === true) return;\n\n    this._hasEllipsisApplied =\n      textContainer.scrollWidth > textContainer.clientWidth;\n\n    const root = this.getRootNode();\n    // Check if the root is a shadow root and get its host\n    if (root instanceof ShadowRoot) {\n      const parent = root.host.tagName.toLowerCase();\n      if (\n        parent === `${prefix}-selectable-tag` ||\n        parent === `${prefix}-operational-tag`\n      ) {\n        this.setAttribute('role', 'button');\n        this.tabIndex = this.disabled ? -1 : 0;\n      }\n    }\n  }\n\n  render() {\n    const {\n      disabled,\n      filter,\n      _handleAILabelSlotChange: handleAILabelSlotChange,\n      _handleIconSlotChange: handleIconSlotChange,\n      size,\n      title,\n    } = this;\n\n    return html`\n      ${size !== TAG_SIZE.SMALL\n        ? html`<slot name=\"icon\" @slotchange=\"${handleIconSlotChange}\"></slot>`\n        : ''}\n      <span class=\"${prefix}--tag__label\">\n        <slot></slot>\n      </span>\n      <slot name=\"decorator\" @slotchange=\"${handleAILabelSlotChange}\"></slot>\n      <slot name=\"ai-label\" @slotchange=\"${handleAILabelSlotChange}\"></slot>\n      <slot name=\"slug\" @slotchange=\"${handleAILabelSlotChange}\"></slot>\n      ${filter\n        ? html`\n            <button class=\"${prefix}--tag__close-icon\" ?disabled=${disabled}>\n              ${iconLoader(Close16, { 'aria-label': title })}\n            </button>\n          `\n        : ``}\n    `;\n  }\n\n  /**\n   * A selector that will return the slug item.\n   *\n   * remove in v12\n   */\n  static get slugItem() {\n    return `${prefix}-slug`;\n  }\n\n  /**\n   * A selector that will return the AI Label item.\n   */\n  static get aiLabelItem() {\n    return `${prefix}-ai-label`;\n  }\n\n  /**\n   * The name of the custom event fired before this tag is being closed upon a user gesture.\n   * Cancellation of this event stops the user-initiated action of closing this tag.\n   */\n  static get eventBeforeClose() {\n    return `${prefix}-tag-beingclosed`;\n  }\n\n  /**\n   * The name of the custom event fired after this tag is closed upon a user gesture.\n   */\n  static get eventClose() {\n    return `${prefix}-tag-closed`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSTag;\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"defs.js","names":[],"sources":["../../../src/components/tearsheet/defs.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2023, 2024\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\nexport enum TEARSHEET_INFLUENCER_PLACEMENT {\n  /** right / default */\n  RIGHT = 'right',\n\n  /** left  */\n  LEFT = 'left',\n}\n\nexport enum TEARSHEET_INFLUENCER_WIDTH {\n  /** narrow /default */\n  NARROW = 'narrow',\n  /** wide  */\n  WIDE = 'wide',\n}\n\nexport enum TEARSHEET_WIDTH {\n  /** narrow  */\n  NARROW = 'narrow',\n  /** wide  */\n  WIDE = 'wide',\n}\n"],"mappings":";;;;;;;;;;;;;;AAOA,IAAY,iCAAL,yBAAA,gCAAA;;AAEL,gCAAA,WAAA;;AAGA,gCAAA,UAAA;;KACD;AAED,IAAY,6BAAL,yBAAA,4BAAA;;AAEL,4BAAA,YAAA;;AAEA,4BAAA,UAAA;;KACD;AAED,IAAY,kBAAL,yBAAA,iBAAA;;AAEL,iBAAA,YAAA;;AAEA,iBAAA,UAAA;;KACD"}
+{"version":3,"file":"defs.js","names":[],"sources":["../../../src/components/tearsheet/defs.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2023, 2024\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\nexport enum TEARSHEET_INFLUENCER_PLACEMENT {\n  /** right / default */\n  RIGHT = 'right',\n\n  /** left  */\n  LEFT = 'left',\n}\n\nexport enum TEARSHEET_INFLUENCER_WIDTH {\n  /** narrow /default */\n  NARROW = 'narrow',\n  /** wide  */\n  WIDE = 'wide',\n}\n\nexport enum TEARSHEET_WIDTH {\n  /** narrow  */\n  NARROW = 'narrow',\n  /** wide  */\n  WIDE = 'wide',\n}\n"],"mappings":";;;;;;;;;;;;;;AAOA,IAAY,iCAAL,yBAAA,gCAAA;;CAEL,+BAAA,WAAA;;CAGA,+BAAA,UAAA;;AACF,EAAA,CAAA,CAAA;AAEA,IAAY,6BAAL,yBAAA,4BAAA;;CAEL,2BAAA,YAAA;;CAEA,2BAAA,UAAA;;AACF,EAAA,CAAA,CAAA;AAEA,IAAY,kBAAL,yBAAA,iBAAA;;CAEL,gBAAA,YAAA;;CAEA,gBAAA,UAAA;;AACF,EAAA,CAAA,CAAA"}

package/es/components/tearsheet/tearsheet.js

@@ -7,7 +7,7 @@
 
 import { selectorTabbable } from "../../globals/settings.js";
 import { carbonElement } from "../../globals/decorators/carbon-element.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.135.0/helpers/esm/decorate.js";
 import HostListener from "../../globals/decorators/host-listener.js";
 import HostListenerMixin from "../../globals/mixins/host-listener.js";
 import "../button/button-set-base.js";

package/es/components/tearsheet/tearsheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"tearsheet.js","names":["customElement"],"sources":["../../../src/components/tearsheet/tearsheet.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2023, 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 {\n  property,\n  query,\n  queryAssignedElements,\n  state,\n} from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { selectorTabbable } from '../../globals/settings';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport '../button/index';\nimport '../layer/index';\nimport '../button/button-set-base';\nimport '../modal/index';\nimport {\n  TEARSHEET_INFLUENCER_PLACEMENT,\n  TEARSHEET_INFLUENCER_WIDTH,\n  TEARSHEET_WIDTH,\n} from './defs';\n\nexport {\n  TEARSHEET_INFLUENCER_PLACEMENT,\n  TEARSHEET_INFLUENCER_WIDTH,\n  TEARSHEET_WIDTH,\n};\n\nconst maxStackDepth = 3;\ntype StackHandler = (newDepth: number, newPosition: number) => void;\ninterface StackState {\n  open: StackHandler[];\n  all: StackHandler[];\n}\n\nconst PRECEDING =\n  Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_CONTAINS;\n\nconst FOLLOWING =\n  Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_CONTAINED_BY;\n\nconst blockClass = `${prefix}--tearsheet`;\nconst blockClassModalHeader = `${prefix}--modal-header`;\nconst blockClassActionSet = `${prefix}--action-set`;\n\n/**\n * Tries to focus on the given elements and bails out if one of them is successful.\n *\n * @param elems The elements.\n * @param reverse `true` to go through the list in reverse order.\n * @returns `true` if one of the attempts is successful, `false` otherwise.\n */\nfunction tryFocusElems(elems: NodeListOf<HTMLElement>, reverse: boolean) {\n  if (!reverse) {\n    for (let i = 0; i < elems.length; ++i) {\n      const elem = elems[i];\n      elem.focus();\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n      if (elem.ownerDocument!.activeElement === elem) {\n        return true;\n      }\n    }\n  } else {\n    for (let i = elems.length - 1; i >= 0; --i) {\n      const elem = elems[i];\n      elem.focus();\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n      if (elem.ownerDocument!.activeElement === elem) {\n        return true;\n      }\n    }\n  }\n  return false;\n}\n\n/**\n * Tearsheet.\n *\n * @deprecated Use Carbon for IBM Products `tearsheet` component.\n *   This component has been deprecated in `@carbon/web-components` and will instead be maintained\n *   in the Carbon for IBM Products library:\n *   https://github.com/carbon-design-system/ibm-products/tree/main/packages/ibm-products-web-components\n * @element cds-tearsheet\n * @csspart dialog The dialog.\n * @fires cds-tearsheet-beingclosed\n *   The custom event fired before this tearsheet is being closed upon a user gesture.\n *   Cancellation of this event stops the user-initiated action of closing this tearsheet.\n * @fires cds-tearsheet-closed - The custom event fired after this tearsheet is closed upon a user gesture.\n */\n@customElement(`${prefix}-tearsheet`)\nclass CDSTearsheet extends HostListenerMixin(LitElement) {\n  /**\n   * The element that had focus before this tearsheet gets open.\n   */\n  private _launcher: Element | null = null;\n\n  /**\n   * Node to track focus going outside of tearsheet content.\n   */\n  @query('#start-sentinel')\n  private _startSentinelNode!: HTMLAnchorElement;\n\n  /**\n   * Node to track focus going outside of tearsheet content.\n   */\n  @query('#end-sentinel')\n  private _endSentinelNode!: HTMLAnchorElement;\n\n  /**\n   * Node to track tearsheet.\n   */\n  @query(`.${blockClass}__container`)\n  private _tearsheet!: HTMLDivElement;\n\n  @queryAssignedElements({ slot: 'actions', selector: `${prefix}-button` })\n  private _actions!: Array<HTMLElement>;\n\n  @state()\n  _actionsCount = 0;\n\n  @state()\n  _hasHeaderActions = false;\n\n  @state()\n  _hasLabel = false;\n\n  @state()\n  _hasSlug = false;\n\n  @state()\n  _hasTitle = false;\n\n  @state()\n  _hasDescription = false;\n\n  @state()\n  _hasInfluencerLeft = false;\n\n  @state()\n  _hasInfluencerRight = false;\n\n  @state()\n  _isOpen = false;\n\n  @state()\n  _hasHeaderNavigation = false;\n\n  /**\n   * Handles `click` event on this element.\n   *\n   * @param event The event.\n   */\n  @HostListener('click')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleClick = (event: MouseEvent) => {\n    if (\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n      event.composedPath().indexOf(this.shadowRoot!) < 0 &&\n      !this.preventCloseOnClickOutside\n    ) {\n      this._handleUserInitiatedClose(event.target);\n    }\n  };\n\n  /**\n   * Handles `blur` event on this element.\n   *\n   * @param event The event.\n   * @param event.target The event target.\n   * @param event.relatedTarget The event relatedTarget.\n   */\n  @HostListener('shadowRoot:focusout')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleBlur = async ({ target, relatedTarget }: FocusEvent) => {\n    if (!this._topOfStack()) {\n      return;\n    }\n\n    const {\n      // condensedActions,\n      open,\n      _startSentinelNode: startSentinelNode,\n      _endSentinelNode: endSentinelNode,\n    } = this;\n\n    const oldContains = target !== this && this.contains(target as Node);\n    const currentContains =\n      relatedTarget !== this &&\n      (this.contains(relatedTarget as Node) ||\n        (this.shadowRoot?.contains(relatedTarget as Node) &&\n          relatedTarget !== (startSentinelNode as Node) &&\n          relatedTarget !== (endSentinelNode as Node)));\n\n    // Performs focus wrapping if _all_ of the following is met:\n    // * This tearsheet is open\n    // * The viewport still has focus\n    // * Tearsheet body used to have focus but no longer has focus\n    const { selectorTabbable: selectorTabbableForTearsheet } = this\n      .constructor as typeof CDSTearsheet;\n\n    if (open && relatedTarget && oldContains && !currentContains) {\n      const comparisonResult = (target as Node).compareDocumentPosition(\n        relatedTarget as Node\n      );\n\n      if (relatedTarget === startSentinelNode || comparisonResult & PRECEDING) {\n        await (this.constructor as typeof CDSTearsheet)._delay();\n        if (\n          !tryFocusElems(\n            this.querySelectorAll(selectorTabbableForTearsheet),\n            true\n          ) &&\n          relatedTarget !== this\n        ) {\n          this.focus();\n        }\n      } else if (\n        relatedTarget === endSentinelNode ||\n        comparisonResult & FOLLOWING\n      ) {\n        await (this.constructor as typeof CDSTearsheet)._delay();\n        if (\n          !tryFocusElems(\n            this.querySelectorAll(selectorTabbableForTearsheet),\n            true\n          )\n        ) {\n          this.focus();\n        }\n      }\n    }\n  };\n\n  @HostListener('document:keydown')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleKeydown = ({ key, target }: KeyboardEvent) => {\n    if ((key === 'Esc' || key === 'Escape') && this._topOfStack()) {\n      this._handleUserInitiatedClose(target);\n    }\n  };\n\n  private _checkSetHasSlot(e: Event) {\n    const t = e.target as HTMLSlotElement;\n    const dataPostfix = t.getAttribute('data-postfix');\n    const postfix = dataPostfix ? `-${dataPostfix}` : '';\n\n    // snake `ab-cd-ef` to _has camel case _hasAbCdEf\n    const hasName = `_has-${t.name}${postfix}`.replace(/-./g, (c) =>\n      c[1].toUpperCase()\n    );\n    this[hasName] = (t?.assignedElements()?.length ?? 0) > 0;\n  }\n\n  /**\n   * Handles `click` event on the modal container.\n   *\n   * @param event The event.\n   */\n  private _handleClickContainer(event: MouseEvent) {\n    if (\n      (event.target as Element).matches(\n        (this.constructor as typeof CDSTearsheet).selectorCloseButton\n      )\n    ) {\n      this._handleUserInitiatedClose(event.target);\n    }\n  }\n\n  /**\n   * Handles user-initiated close request of this tearsheet.\n   *\n   * @param triggeredBy The element that triggered this close request.\n   */\n  private _handleUserInitiatedClose(triggeredBy: EventTarget | null) {\n    if (this.open) {\n      const init = {\n        bubbles: true,\n        cancelable: true,\n        composed: true,\n        detail: {\n          triggeredBy,\n        },\n      };\n      if (\n        this.dispatchEvent(\n          new CustomEvent(\n            (this.constructor as typeof CDSTearsheet).eventBeforeClose,\n            init\n          )\n        )\n      ) {\n        this.open = false;\n        this.dispatchEvent(\n          new CustomEvent(\n            (this.constructor as typeof CDSTearsheet).eventClose,\n            init\n          )\n        );\n      }\n    }\n  }\n\n  private _handleSlugChange(e: Event) {\n    const childItems = (e.target as HTMLSlotElement).assignedElements();\n\n    this._hasSlug = childItems.length > 0;\n    if (this._hasSlug) {\n      childItems[0].setAttribute('size', 'lg');\n      this.setAttribute('slug', '');\n    } else {\n      this.removeAttribute('slug');\n    }\n  }\n\n  /**\n   * Optional aria label for the tearsheet\n   */\n  @property({ reflect: true, attribute: 'aria-label' })\n  ariaLabel = '';\n\n  /**\n   * Sets the close button icon description\n   */\n  @property({ reflect: true, attribute: 'close-icon-description' })\n  closeIconDescription = 'Close';\n\n  /**\n   * Enable a close icon ('x') in the header area of the tearsheet. By default,\n   * (when this prop is omitted, or undefined or null) a tearsheet does not\n   * display a close icon if there are navigation actions (\"transactional\n   * tearsheet\") and displays one if there are no navigation actions (\"passive\n   * tearsheet\"), and that behavior can be overridden if required by setting\n   * this prop to either true or false.\n   */\n\n  @property({ reflect: true, type: Boolean, attribute: 'has-close-icon' })\n  hasCloseIcon = false;\n\n  /**\n   * The placement of the influencer section, 'left' or 'right'.\n   */\n  @property({ reflect: true, attribute: 'influencer-placement' })\n  influencerPlacement = TEARSHEET_INFLUENCER_PLACEMENT.RIGHT;\n\n  /**\n   * The width of the influencer section, 'narrow' or 'wide'.\n   */\n  @property({ reflect: true, attribute: 'influencer-width' })\n  influencerWidth = TEARSHEET_INFLUENCER_WIDTH.NARROW;\n\n  /**\n   * `true` if the tearsheet should be open.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * Prevent closing on click outside of tearsheet\n   */\n  @property({ type: Boolean, attribute: 'prevent-close-on-click-outside' })\n  preventCloseOnClickOutside = false;\n\n  /**\n   * The initial location of focus in the side panel\n   */\n  @property({\n    reflect: true,\n    attribute: 'selector-initial-focus',\n    type: String,\n  })\n  selectorInitialFocus;\n\n  /**\n   * The width of the influencer section, 'narrow' or 'wide'.\n   */\n  @property({ reflect: true, attribute: 'width' })\n  width = TEARSHEET_WIDTH.NARROW;\n\n  private _checkUpdateActionSizes = () => {\n    if (this._actions) {\n      for (let i = 0; i < this._actions.length; i++) {\n        this._actions[i].setAttribute(\n          'size',\n          this.width === 'wide' ? '2xl' : 'xl'\n        );\n      }\n    }\n  };\n\n  private _maxActions = 4;\n  private _handleActionsChange(e: Event) {\n    const target = e.target as HTMLSlotElement;\n    const actions = target?.assignedElements();\n    const actionsCount = actions?.length ?? 0;\n\n    if (actionsCount > this._maxActions) {\n      this._actionsCount = this._maxActions;\n      // eslint-disable-next-line no-console\n      console.error(`Too many tearsheet actions, max ${this._maxActions}.`);\n    } else {\n      this._actionsCount = actionsCount;\n    }\n\n    for (let i = 0; i < actions?.length; i++) {\n      if (i + 1 > this._maxActions) {\n        // hide excessive tearsheet actions\n        actions[i].setAttribute('hidden', 'true');\n        actions[i].setAttribute(\n          `data-actions-limit-${this._maxActions}-exceeded`,\n          `${actions.length}`\n        );\n      } else {\n        actions[i].classList.add(`${blockClassActionSet}__action-button`);\n      }\n    }\n    this._checkUpdateActionSizes();\n  }\n\n  // Data structure to communicate the state of tearsheet stacking\n  // (i.e. when more than one tearsheet is open). Each tearsheet supplies a\n  // handler to be called whenever the stacking of the tearsheets changes, which\n  // happens when a tearsheet opens or closes. The 'open' array contains one\n  // handler per OPEN tearsheet ordered from lowest to highest in visual z-order.\n  // The 'all' array contains all the handlers for open and closed tearsheets.\n\n  @state()\n  _stackDepth = -1;\n\n  @state()\n  _stackPosition = -1;\n\n  private _topOfStack = () => {\n    return this._stackDepth === this._stackPosition;\n  };\n\n  private static _stack: StackState = {\n    open: [],\n    all: [],\n  };\n  private _notifyStack = () => {\n    CDSTearsheet._stack.all.forEach(\n      (handler: (stackSize: number, position: number) => void) => {\n        handler(\n          Math.min(CDSTearsheet._stack.open.length, maxStackDepth),\n          CDSTearsheet._stack.open.indexOf(handler) + 1\n        );\n      }\n    );\n  };\n\n  private _handleStackChange: StackHandler = (newDepth, newPosition) => {\n    this._stackDepth = newDepth;\n    this._stackPosition = newPosition;\n    if (this._stackDepth > 1 && this._stackPosition > 0) {\n      this.setAttribute('stack-position', `${newPosition}`);\n      this.setAttribute('stack-depth', `${this._stackDepth}`);\n    } else {\n      this.removeAttribute('stack-position');\n      this.removeAttribute('stack-depth');\n    }\n  };\n\n  private _updateStack = () => {\n    if (this.open) {\n      CDSTearsheet._stack.open.push(this._handleStackChange);\n    } else {\n      const indexOpen = CDSTearsheet._stack.open.indexOf(\n        this._handleStackChange\n      );\n      if (indexOpen >= 0) {\n        CDSTearsheet._stack.open.splice(indexOpen, 1);\n      }\n    }\n    this._notifyStack();\n  };\n\n  actionsMultiple = ['', 'single', 'double', 'triple'][this._actionsCount];\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    CDSTearsheet._stack.all.push(this._handleStackChange);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    const indexAll = CDSTearsheet._stack.all.indexOf(this._handleStackChange);\n    CDSTearsheet._stack.all.splice(indexAll, 1);\n    const indexOpen = CDSTearsheet._stack.all.indexOf(this._handleStackChange);\n    CDSTearsheet._stack.open.splice(indexOpen, 1);\n  }\n\n  render() {\n    const {\n      closeIconDescription,\n      influencerPlacement,\n      influencerWidth,\n      open,\n      width,\n    } = this;\n\n    const actionsMultiple = ['', 'single', 'double', 'triple'][\n      this._actionsCount\n    ];\n\n    const headerFieldsTemplate = html`<div\n      class=${`${blockClass}__header-fields`}>\n      <h2 class=${`${blockClassModalHeader}__label`} ?hidden=${!this._hasLabel}>\n        <slot name=\"label\" @slotchange=${this._checkSetHasSlot}></slot>\n      </h2>\n      <h3\n        class=${`${blockClassModalHeader}__heading ${blockClass}__heading`}\n        ?hidden=${!this._hasTitle}>\n        <slot name=\"title\" @slotchange=${this._checkSetHasSlot}></slot>\n      </h3>\n      <div\n        class=${`${blockClass}__header-description`}\n        ?hidden=${!this._hasDescription}>\n        <slot name=\"description\" @slotchange=${this._checkSetHasSlot}></slot>\n      </div>\n    </div>`;\n\n    const headerActionsTemplate = html` <div\n      class=${`${blockClass}__header-actions`}\n      ?hidden=${!this._hasHeaderActions || this.width === 'narrow'}>\n      <slot name=\"header-actions\" @slotchange=${this._checkSetHasSlot}></slot>\n    </div>`;\n\n    const headerTemplate = html` <cds-modal-header\n      class=${`${blockClass}__header`}\n      ?has-close-icon=${this.hasCloseIcon || this?._actionsCount === 0}\n      ?has-navigation=${this._hasHeaderNavigation && this.width === 'wide'}\n      ?has-header-actions=${this._hasHeaderActions && this.width === 'wide'}\n      ?has-actions=${this?._actionsCount > 0}\n      ?has-slug=${this?._hasSlug}\n      width=${width}>\n      ${this.width === TEARSHEET_WIDTH.WIDE\n        ? html`<cds-layer level=\"1\" class=${`${blockClass}__header-content`}\n            >${headerFieldsTemplate}${headerActionsTemplate}</cds-layer\n          >`\n        : html`<div>${headerFieldsTemplate}${headerActionsTemplate}</div>`}\n\n      <div\n        class=${`${blockClass}__header-navigation`}\n        ?hidden=${!this._hasHeaderNavigation || this.width === 'narrow'}>\n        <slot\n          name=\"header-navigation\"\n          @slotchange=${this._checkSetHasSlot}></slot>\n      </div>\n      <slot name=\"slug\" @slotchange=${this._handleSlugChange}></slot>\n      ${this.hasCloseIcon || this?._actionsCount === 0\n        ? html`<cds-modal-close-button\n            close-button-label=${closeIconDescription}\n            @click=${this._handleUserInitiatedClose}></cds-modal-close-button>`\n        : ''}\n    </cds-modal-header>`;\n\n    return html`\n      <a\n        id=\"start-sentinel\"\n        class=\"${prefix}--visually-hidden\"\n        href=\"javascript:void 0\"\n        role=\"navigation\"></a>\n      <div\n        aria-label=${this.ariaLabel}\n        class=${`${blockClass}__container ${prefix}--modal-container ${prefix}--modal-container--sm`}\n        part=\"dialog\"\n        role=\"complementary\"\n        ?open=${this._isOpen}\n        ?opening=${open && !this._isOpen}\n        ?closing=${!open && this._isOpen}\n        width=${width}\n        stack-position=${this._stackPosition}\n        stack-depth=${this._stackDepth}\n        @click=${this._handleClickContainer}>\n        <!-- Header -->\n        ${headerTemplate}\n\n        <!-- Body  -->\n        <cds-modal-body class=${`${blockClass}__body`} width=${width}>\n          <!-- Influencer when on left -->\n          ${influencerPlacement !== TEARSHEET_INFLUENCER_PLACEMENT.RIGHT\n            ? html`<div\n                class=${`${blockClass}__influencer`}\n                ?wide=${influencerWidth === 'wide'}\n                ?hidden=${!this._hasInfluencerLeft ||\n                this.width === TEARSHEET_WIDTH.NARROW}>\n                <slot\n                  name=\"influencer\"\n                  data-postfix=\"left\"\n                  @slotchange=${this._checkSetHasSlot}></slot>\n              </div>`\n            : ''}\n\n          <div class=${`${blockClass}__right`}>\n            <div class=${`${blockClass}__main`}>\n              <div class=${`${blockClass}__content`}>\n                <cds-layer level=\"0\">\n                  <slot></slot>\n                </cds-layer>\n              </div>\n\n              <!-- Influencer when on right -->\n              ${influencerPlacement === TEARSHEET_INFLUENCER_PLACEMENT.RIGHT\n                ? html`<div\n                    class=${`${blockClass}__influencer`}\n                    ?wide=${influencerWidth}\n                    ?hidden=${!this._hasInfluencerRight ||\n                    this.width === TEARSHEET_WIDTH.NARROW}>\n                    <slot\n                      name=\"influencer\"\n                      data-postfix=\"right\"\n                      @slotchange=${this._checkSetHasSlot}></slot>\n                  </div>`\n                : ''}\n            </div>\n            <!-- Action buttons -->\n            <cds-button-set-base\n              class=${`${blockClass}__buttons ${blockClass}__button-container`}\n              actions-multiple=${actionsMultiple}\n              ?tearsheet-wide=${width === 'wide'}\n              ?hidden=${this._actionsCount === 0}>\n              <slot\n                name=\"actions\"\n                @slotchange=${this._handleActionsChange}></slot>\n            </cds-button-set-base>\n          </div>\n        </cds-modal-body>\n      </div>\n      <a\n        id=\"end-sentinel\"\n        class=\"${prefix}--visually-hidden\"\n        href=\"javascript:void 0\"\n        role=\"navigation\"></a>\n    `;\n  }\n\n  _checkSetOpen = () => {\n    const { _tearsheet: tearsheet } = this;\n    if (tearsheet && this._isOpen) {\n      // wait until the tearsheet has transitioned off the screen to remove\n      tearsheet.addEventListener('transitionend', () => {\n        this._isOpen = false;\n      });\n    } else {\n      // allow the html to render before animating in the tearsheet\n      window.requestAnimationFrame(() => {\n        this._isOpen = this.open;\n      });\n    }\n  };\n\n  async updated(changedProperties) {\n    if (changedProperties.has('width')) {\n      this._checkUpdateActionSizes();\n    }\n\n    if (\n      process.env.NODE_ENV === 'development' &&\n      (changedProperties.has('width') ||\n        changedProperties.has('_hasHeaderNavigation') ||\n        changedProperties.has('_hasInfluencerLeft') ||\n        changedProperties.has('_hasInfluencerRight') ||\n        changedProperties.has('_hasHeaderActions'))\n    ) {\n      if (this.width === 'narrow') {\n        if (this._hasHeaderNavigation) {\n          // eslint-disable-next-line no-console\n          console.error(\n            `Header navigation is not permitted in narrow Tearsheet.`\n          );\n        }\n        if (this._hasInfluencerLeft || this._hasInfluencerRight) {\n          // eslint-disable-next-line no-console\n          console.error(`Influencer is not permitted in narrow Tearsheet.`);\n        }\n        if (this._hasHeaderActions) {\n          // eslint-disable-next-line no-console\n          console.error(\n            `Header actions are not permitted in narrow Tearsheet.`\n          );\n        }\n      }\n    }\n\n    if (changedProperties.has('open')) {\n      this._updateStack();\n\n      this._checkSetOpen();\n      if (this.open) {\n        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n        this._launcher = this.ownerDocument!.activeElement;\n        const focusNode =\n          this.selectorInitialFocus &&\n          this.querySelector(this.selectorInitialFocus);\n\n        await (this.constructor as typeof CDSTearsheet)._delay();\n        if (focusNode) {\n          // For cases where a `carbon-web-components` component (e.g. `<cds-button>`) being `primaryFocusNode`,\n          // where its first update/render cycle that makes it focusable happens after `<cds-tearsheet>`'s first update/render cycle\n          (focusNode as HTMLElement).focus();\n        } else if (\n          !tryFocusElems(\n            this.querySelectorAll(\n              (this.constructor as typeof CDSTearsheet).selectorTabbable\n            ),\n            true\n          )\n        ) {\n          this.focus();\n        }\n      } else if (\n        this._launcher &&\n        typeof (this._launcher as HTMLElement).focus === 'function'\n      ) {\n        (this._launcher as HTMLElement).focus();\n        this._launcher = null;\n      }\n    }\n  }\n\n  /**\n   * @param ms The number of milliseconds.\n   * @returns A promise that is resolves after the given milliseconds.\n   */\n  private static _delay(ms = 0) {\n    return new Promise((resolve) => {\n      setTimeout(resolve, ms);\n    });\n  }\n\n  /**\n   * A selector selecting buttons that should close this modal.\n   */\n  static get selectorCloseButton() {\n    return `[data-modal-close],${prefix}-modal-close-button`;\n  }\n\n  /**\n   * A selector selecting tabbable nodes.\n   */\n  static get selectorTabbable() {\n    return selectorTabbable;\n  }\n\n  /**\n   * The name of the custom event fired before this tearsheet is being closed upon a user gesture.\n   * Cancellation of this event stops the user-initiated action of closing this tearsheet.\n   */\n  static get eventBeforeClose() {\n    return `${prefix}-tearsheet-beingclosed`;\n  }\n\n  /**\n   * The name of the custom event fired after this tearsheet is closed upon a user gesture.\n   */\n  static get eventClose() {\n    return `${prefix}-tearsheet-closed`;\n  }\n\n  /**\n   * The name of the custom event fired on clicking the navigate back button\n   */\n  static get eventNavigateBack() {\n    return `${prefix}-tearsheet-header-navigate-back`;\n  }\n}\n\nexport default CDSTearsheet;\n"],"mappings":"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"}
+{"version":3,"file":"tearsheet.js","names":["customElement"],"sources":["../../../src/components/tearsheet/tearsheet.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2023, 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 {\n  property,\n  query,\n  queryAssignedElements,\n  state,\n} from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { selectorTabbable } from '../../globals/settings';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport '../button/index';\nimport '../layer/index';\nimport '../button/button-set-base';\nimport '../modal/index';\nimport {\n  TEARSHEET_INFLUENCER_PLACEMENT,\n  TEARSHEET_INFLUENCER_WIDTH,\n  TEARSHEET_WIDTH,\n} from './defs';\n\nexport {\n  TEARSHEET_INFLUENCER_PLACEMENT,\n  TEARSHEET_INFLUENCER_WIDTH,\n  TEARSHEET_WIDTH,\n};\n\nconst maxStackDepth = 3;\ntype StackHandler = (newDepth: number, newPosition: number) => void;\ninterface StackState {\n  open: StackHandler[];\n  all: StackHandler[];\n}\n\nconst PRECEDING =\n  Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_CONTAINS;\n\nconst FOLLOWING =\n  Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_CONTAINED_BY;\n\nconst blockClass = `${prefix}--tearsheet`;\nconst blockClassModalHeader = `${prefix}--modal-header`;\nconst blockClassActionSet = `${prefix}--action-set`;\n\n/**\n * Tries to focus on the given elements and bails out if one of them is successful.\n *\n * @param elems The elements.\n * @param reverse `true` to go through the list in reverse order.\n * @returns `true` if one of the attempts is successful, `false` otherwise.\n */\nfunction tryFocusElems(elems: NodeListOf<HTMLElement>, reverse: boolean) {\n  if (!reverse) {\n    for (let i = 0; i < elems.length; ++i) {\n      const elem = elems[i];\n      elem.focus();\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n      if (elem.ownerDocument!.activeElement === elem) {\n        return true;\n      }\n    }\n  } else {\n    for (let i = elems.length - 1; i >= 0; --i) {\n      const elem = elems[i];\n      elem.focus();\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n      if (elem.ownerDocument!.activeElement === elem) {\n        return true;\n      }\n    }\n  }\n  return false;\n}\n\n/**\n * Tearsheet.\n *\n * @deprecated Use Carbon for IBM Products `tearsheet` component.\n *   This component has been deprecated in `@carbon/web-components` and will instead be maintained\n *   in the Carbon for IBM Products library:\n *   https://github.com/carbon-design-system/ibm-products/tree/main/packages/ibm-products-web-components\n * @element cds-tearsheet\n * @csspart dialog The dialog.\n * @fires cds-tearsheet-beingclosed\n *   The custom event fired before this tearsheet is being closed upon a user gesture.\n *   Cancellation of this event stops the user-initiated action of closing this tearsheet.\n * @fires cds-tearsheet-closed - The custom event fired after this tearsheet is closed upon a user gesture.\n */\n@customElement(`${prefix}-tearsheet`)\nclass CDSTearsheet extends HostListenerMixin(LitElement) {\n  /**\n   * The element that had focus before this tearsheet gets open.\n   */\n  private _launcher: Element | null = null;\n\n  /**\n   * Node to track focus going outside of tearsheet content.\n   */\n  @query('#start-sentinel')\n  private _startSentinelNode!: HTMLAnchorElement;\n\n  /**\n   * Node to track focus going outside of tearsheet content.\n   */\n  @query('#end-sentinel')\n  private _endSentinelNode!: HTMLAnchorElement;\n\n  /**\n   * Node to track tearsheet.\n   */\n  @query(`.${blockClass}__container`)\n  private _tearsheet!: HTMLDivElement;\n\n  @queryAssignedElements({ slot: 'actions', selector: `${prefix}-button` })\n  private _actions!: Array<HTMLElement>;\n\n  @state()\n  _actionsCount = 0;\n\n  @state()\n  _hasHeaderActions = false;\n\n  @state()\n  _hasLabel = false;\n\n  @state()\n  _hasSlug = false;\n\n  @state()\n  _hasTitle = false;\n\n  @state()\n  _hasDescription = false;\n\n  @state()\n  _hasInfluencerLeft = false;\n\n  @state()\n  _hasInfluencerRight = false;\n\n  @state()\n  _isOpen = false;\n\n  @state()\n  _hasHeaderNavigation = false;\n\n  /**\n   * Handles `click` event on this element.\n   *\n   * @param event The event.\n   */\n  @HostListener('click')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleClick = (event: MouseEvent) => {\n    if (\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n      event.composedPath().indexOf(this.shadowRoot!) < 0 &&\n      !this.preventCloseOnClickOutside\n    ) {\n      this._handleUserInitiatedClose(event.target);\n    }\n  };\n\n  /**\n   * Handles `blur` event on this element.\n   *\n   * @param event The event.\n   * @param event.target The event target.\n   * @param event.relatedTarget The event relatedTarget.\n   */\n  @HostListener('shadowRoot:focusout')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleBlur = async ({ target, relatedTarget }: FocusEvent) => {\n    if (!this._topOfStack()) {\n      return;\n    }\n\n    const {\n      // condensedActions,\n      open,\n      _startSentinelNode: startSentinelNode,\n      _endSentinelNode: endSentinelNode,\n    } = this;\n\n    const oldContains = target !== this && this.contains(target as Node);\n    const currentContains =\n      relatedTarget !== this &&\n      (this.contains(relatedTarget as Node) ||\n        (this.shadowRoot?.contains(relatedTarget as Node) &&\n          relatedTarget !== (startSentinelNode as Node) &&\n          relatedTarget !== (endSentinelNode as Node)));\n\n    // Performs focus wrapping if _all_ of the following is met:\n    // * This tearsheet is open\n    // * The viewport still has focus\n    // * Tearsheet body used to have focus but no longer has focus\n    const { selectorTabbable: selectorTabbableForTearsheet } = this\n      .constructor as typeof CDSTearsheet;\n\n    if (open && relatedTarget && oldContains && !currentContains) {\n      const comparisonResult = (target as Node).compareDocumentPosition(\n        relatedTarget as Node\n      );\n\n      if (relatedTarget === startSentinelNode || comparisonResult & PRECEDING) {\n        await (this.constructor as typeof CDSTearsheet)._delay();\n        if (\n          !tryFocusElems(\n            this.querySelectorAll(selectorTabbableForTearsheet),\n            true\n          ) &&\n          relatedTarget !== this\n        ) {\n          this.focus();\n        }\n      } else if (\n        relatedTarget === endSentinelNode ||\n        comparisonResult & FOLLOWING\n      ) {\n        await (this.constructor as typeof CDSTearsheet)._delay();\n        if (\n          !tryFocusElems(\n            this.querySelectorAll(selectorTabbableForTearsheet),\n            true\n          )\n        ) {\n          this.focus();\n        }\n      }\n    }\n  };\n\n  @HostListener('document:keydown')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleKeydown = ({ key, target }: KeyboardEvent) => {\n    if ((key === 'Esc' || key === 'Escape') && this._topOfStack()) {\n      this._handleUserInitiatedClose(target);\n    }\n  };\n\n  private _checkSetHasSlot(e: Event) {\n    const t = e.target as HTMLSlotElement;\n    const dataPostfix = t.getAttribute('data-postfix');\n    const postfix = dataPostfix ? `-${dataPostfix}` : '';\n\n    // snake `ab-cd-ef` to _has camel case _hasAbCdEf\n    const hasName = `_has-${t.name}${postfix}`.replace(/-./g, (c) =>\n      c[1].toUpperCase()\n    );\n    this[hasName] = (t?.assignedElements()?.length ?? 0) > 0;\n  }\n\n  /**\n   * Handles `click` event on the modal container.\n   *\n   * @param event The event.\n   */\n  private _handleClickContainer(event: MouseEvent) {\n    if (\n      (event.target as Element).matches(\n        (this.constructor as typeof CDSTearsheet).selectorCloseButton\n      )\n    ) {\n      this._handleUserInitiatedClose(event.target);\n    }\n  }\n\n  /**\n   * Handles user-initiated close request of this tearsheet.\n   *\n   * @param triggeredBy The element that triggered this close request.\n   */\n  private _handleUserInitiatedClose(triggeredBy: EventTarget | null) {\n    if (this.open) {\n      const init = {\n        bubbles: true,\n        cancelable: true,\n        composed: true,\n        detail: {\n          triggeredBy,\n        },\n      };\n      if (\n        this.dispatchEvent(\n          new CustomEvent(\n            (this.constructor as typeof CDSTearsheet).eventBeforeClose,\n            init\n          )\n        )\n      ) {\n        this.open = false;\n        this.dispatchEvent(\n          new CustomEvent(\n            (this.constructor as typeof CDSTearsheet).eventClose,\n            init\n          )\n        );\n      }\n    }\n  }\n\n  private _handleSlugChange(e: Event) {\n    const childItems = (e.target as HTMLSlotElement).assignedElements();\n\n    this._hasSlug = childItems.length > 0;\n    if (this._hasSlug) {\n      childItems[0].setAttribute('size', 'lg');\n      this.setAttribute('slug', '');\n    } else {\n      this.removeAttribute('slug');\n    }\n  }\n\n  /**\n   * Optional aria label for the tearsheet\n   */\n  @property({ reflect: true, attribute: 'aria-label' })\n  ariaLabel = '';\n\n  /**\n   * Sets the close button icon description\n   */\n  @property({ reflect: true, attribute: 'close-icon-description' })\n  closeIconDescription = 'Close';\n\n  /**\n   * Enable a close icon ('x') in the header area of the tearsheet. By default,\n   * (when this prop is omitted, or undefined or null) a tearsheet does not\n   * display a close icon if there are navigation actions (\"transactional\n   * tearsheet\") and displays one if there are no navigation actions (\"passive\n   * tearsheet\"), and that behavior can be overridden if required by setting\n   * this prop to either true or false.\n   */\n\n  @property({ reflect: true, type: Boolean, attribute: 'has-close-icon' })\n  hasCloseIcon = false;\n\n  /**\n   * The placement of the influencer section, 'left' or 'right'.\n   */\n  @property({ reflect: true, attribute: 'influencer-placement' })\n  influencerPlacement = TEARSHEET_INFLUENCER_PLACEMENT.RIGHT;\n\n  /**\n   * The width of the influencer section, 'narrow' or 'wide'.\n   */\n  @property({ reflect: true, attribute: 'influencer-width' })\n  influencerWidth = TEARSHEET_INFLUENCER_WIDTH.NARROW;\n\n  /**\n   * `true` if the tearsheet should be open.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * Prevent closing on click outside of tearsheet\n   */\n  @property({ type: Boolean, attribute: 'prevent-close-on-click-outside' })\n  preventCloseOnClickOutside = false;\n\n  /**\n   * The initial location of focus in the side panel\n   */\n  @property({\n    reflect: true,\n    attribute: 'selector-initial-focus',\n    type: String,\n  })\n  selectorInitialFocus;\n\n  /**\n   * The width of the influencer section, 'narrow' or 'wide'.\n   */\n  @property({ reflect: true, attribute: 'width' })\n  width = TEARSHEET_WIDTH.NARROW;\n\n  private _checkUpdateActionSizes = () => {\n    if (this._actions) {\n      for (let i = 0; i < this._actions.length; i++) {\n        this._actions[i].setAttribute(\n          'size',\n          this.width === 'wide' ? '2xl' : 'xl'\n        );\n      }\n    }\n  };\n\n  private _maxActions = 4;\n  private _handleActionsChange(e: Event) {\n    const target = e.target as HTMLSlotElement;\n    const actions = target?.assignedElements();\n    const actionsCount = actions?.length ?? 0;\n\n    if (actionsCount > this._maxActions) {\n      this._actionsCount = this._maxActions;\n      // eslint-disable-next-line no-console\n      console.error(`Too many tearsheet actions, max ${this._maxActions}.`);\n    } else {\n      this._actionsCount = actionsCount;\n    }\n\n    for (let i = 0; i < actions?.length; i++) {\n      if (i + 1 > this._maxActions) {\n        // hide excessive tearsheet actions\n        actions[i].setAttribute('hidden', 'true');\n        actions[i].setAttribute(\n          `data-actions-limit-${this._maxActions}-exceeded`,\n          `${actions.length}`\n        );\n      } else {\n        actions[i].classList.add(`${blockClassActionSet}__action-button`);\n      }\n    }\n    this._checkUpdateActionSizes();\n  }\n\n  // Data structure to communicate the state of tearsheet stacking\n  // (i.e. when more than one tearsheet is open). Each tearsheet supplies a\n  // handler to be called whenever the stacking of the tearsheets changes, which\n  // happens when a tearsheet opens or closes. The 'open' array contains one\n  // handler per OPEN tearsheet ordered from lowest to highest in visual z-order.\n  // The 'all' array contains all the handlers for open and closed tearsheets.\n\n  @state()\n  _stackDepth = -1;\n\n  @state()\n  _stackPosition = -1;\n\n  private _topOfStack = () => {\n    return this._stackDepth === this._stackPosition;\n  };\n\n  private static _stack: StackState = {\n    open: [],\n    all: [],\n  };\n  private _notifyStack = () => {\n    CDSTearsheet._stack.all.forEach(\n      (handler: (stackSize: number, position: number) => void) => {\n        handler(\n          Math.min(CDSTearsheet._stack.open.length, maxStackDepth),\n          CDSTearsheet._stack.open.indexOf(handler) + 1\n        );\n      }\n    );\n  };\n\n  private _handleStackChange: StackHandler = (newDepth, newPosition) => {\n    this._stackDepth = newDepth;\n    this._stackPosition = newPosition;\n    if (this._stackDepth > 1 && this._stackPosition > 0) {\n      this.setAttribute('stack-position', `${newPosition}`);\n      this.setAttribute('stack-depth', `${this._stackDepth}`);\n    } else {\n      this.removeAttribute('stack-position');\n      this.removeAttribute('stack-depth');\n    }\n  };\n\n  private _updateStack = () => {\n    if (this.open) {\n      CDSTearsheet._stack.open.push(this._handleStackChange);\n    } else {\n      const indexOpen = CDSTearsheet._stack.open.indexOf(\n        this._handleStackChange\n      );\n      if (indexOpen >= 0) {\n        CDSTearsheet._stack.open.splice(indexOpen, 1);\n      }\n    }\n    this._notifyStack();\n  };\n\n  actionsMultiple = ['', 'single', 'double', 'triple'][this._actionsCount];\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    CDSTearsheet._stack.all.push(this._handleStackChange);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    const indexAll = CDSTearsheet._stack.all.indexOf(this._handleStackChange);\n    CDSTearsheet._stack.all.splice(indexAll, 1);\n    const indexOpen = CDSTearsheet._stack.all.indexOf(this._handleStackChange);\n    CDSTearsheet._stack.open.splice(indexOpen, 1);\n  }\n\n  render() {\n    const {\n      closeIconDescription,\n      influencerPlacement,\n      influencerWidth,\n      open,\n      width,\n    } = this;\n\n    const actionsMultiple = ['', 'single', 'double', 'triple'][\n      this._actionsCount\n    ];\n\n    const headerFieldsTemplate = html`<div\n      class=${`${blockClass}__header-fields`}>\n      <h2 class=${`${blockClassModalHeader}__label`} ?hidden=${!this._hasLabel}>\n        <slot name=\"label\" @slotchange=${this._checkSetHasSlot}></slot>\n      </h2>\n      <h3\n        class=${`${blockClassModalHeader}__heading ${blockClass}__heading`}\n        ?hidden=${!this._hasTitle}>\n        <slot name=\"title\" @slotchange=${this._checkSetHasSlot}></slot>\n      </h3>\n      <div\n        class=${`${blockClass}__header-description`}\n        ?hidden=${!this._hasDescription}>\n        <slot name=\"description\" @slotchange=${this._checkSetHasSlot}></slot>\n      </div>\n    </div>`;\n\n    const headerActionsTemplate = html` <div\n      class=${`${blockClass}__header-actions`}\n      ?hidden=${!this._hasHeaderActions || this.width === 'narrow'}>\n      <slot name=\"header-actions\" @slotchange=${this._checkSetHasSlot}></slot>\n    </div>`;\n\n    const headerTemplate = html` <cds-modal-header\n      class=${`${blockClass}__header`}\n      ?has-close-icon=${this.hasCloseIcon || this?._actionsCount === 0}\n      ?has-navigation=${this._hasHeaderNavigation && this.width === 'wide'}\n      ?has-header-actions=${this._hasHeaderActions && this.width === 'wide'}\n      ?has-actions=${this?._actionsCount > 0}\n      ?has-slug=${this?._hasSlug}\n      width=${width}>\n      ${this.width === TEARSHEET_WIDTH.WIDE\n        ? html`<cds-layer level=\"1\" class=${`${blockClass}__header-content`}\n            >${headerFieldsTemplate}${headerActionsTemplate}</cds-layer\n          >`\n        : html`<div>${headerFieldsTemplate}${headerActionsTemplate}</div>`}\n\n      <div\n        class=${`${blockClass}__header-navigation`}\n        ?hidden=${!this._hasHeaderNavigation || this.width === 'narrow'}>\n        <slot\n          name=\"header-navigation\"\n          @slotchange=${this._checkSetHasSlot}></slot>\n      </div>\n      <slot name=\"slug\" @slotchange=${this._handleSlugChange}></slot>\n      ${this.hasCloseIcon || this?._actionsCount === 0\n        ? html`<cds-modal-close-button\n            close-button-label=${closeIconDescription}\n            @click=${this._handleUserInitiatedClose}></cds-modal-close-button>`\n        : ''}\n    </cds-modal-header>`;\n\n    return html`\n      <a\n        id=\"start-sentinel\"\n        class=\"${prefix}--visually-hidden\"\n        href=\"javascript:void 0\"\n        role=\"navigation\"></a>\n      <div\n        aria-label=${this.ariaLabel}\n        class=${`${blockClass}__container ${prefix}--modal-container ${prefix}--modal-container--sm`}\n        part=\"dialog\"\n        role=\"complementary\"\n        ?open=${this._isOpen}\n        ?opening=${open && !this._isOpen}\n        ?closing=${!open && this._isOpen}\n        width=${width}\n        stack-position=${this._stackPosition}\n        stack-depth=${this._stackDepth}\n        @click=${this._handleClickContainer}>\n        <!-- Header -->\n        ${headerTemplate}\n\n        <!-- Body  -->\n        <cds-modal-body class=${`${blockClass}__body`} width=${width}>\n          <!-- Influencer when on left -->\n          ${influencerPlacement !== TEARSHEET_INFLUENCER_PLACEMENT.RIGHT\n            ? html`<div\n                class=${`${blockClass}__influencer`}\n                ?wide=${influencerWidth === 'wide'}\n                ?hidden=${!this._hasInfluencerLeft ||\n                this.width === TEARSHEET_WIDTH.NARROW}>\n                <slot\n                  name=\"influencer\"\n                  data-postfix=\"left\"\n                  @slotchange=${this._checkSetHasSlot}></slot>\n              </div>`\n            : ''}\n\n          <div class=${`${blockClass}__right`}>\n            <div class=${`${blockClass}__main`}>\n              <div class=${`${blockClass}__content`}>\n                <cds-layer level=\"0\">\n                  <slot></slot>\n                </cds-layer>\n              </div>\n\n              <!-- Influencer when on right -->\n              ${influencerPlacement === TEARSHEET_INFLUENCER_PLACEMENT.RIGHT\n                ? html`<div\n                    class=${`${blockClass}__influencer`}\n                    ?wide=${influencerWidth}\n                    ?hidden=${!this._hasInfluencerRight ||\n                    this.width === TEARSHEET_WIDTH.NARROW}>\n                    <slot\n                      name=\"influencer\"\n                      data-postfix=\"right\"\n                      @slotchange=${this._checkSetHasSlot}></slot>\n                  </div>`\n                : ''}\n            </div>\n            <!-- Action buttons -->\n            <cds-button-set-base\n              class=${`${blockClass}__buttons ${blockClass}__button-container`}\n              actions-multiple=${actionsMultiple}\n              ?tearsheet-wide=${width === 'wide'}\n              ?hidden=${this._actionsCount === 0}>\n              <slot\n                name=\"actions\"\n                @slotchange=${this._handleActionsChange}></slot>\n            </cds-button-set-base>\n          </div>\n        </cds-modal-body>\n      </div>\n      <a\n        id=\"end-sentinel\"\n        class=\"${prefix}--visually-hidden\"\n        href=\"javascript:void 0\"\n        role=\"navigation\"></a>\n    `;\n  }\n\n  _checkSetOpen = () => {\n    const { _tearsheet: tearsheet } = this;\n    if (tearsheet && this._isOpen) {\n      // wait until the tearsheet has transitioned off the screen to remove\n      tearsheet.addEventListener('transitionend', () => {\n        this._isOpen = false;\n      });\n    } else {\n      // allow the html to render before animating in the tearsheet\n      window.requestAnimationFrame(() => {\n        this._isOpen = this.open;\n      });\n    }\n  };\n\n  async updated(changedProperties) {\n    if (changedProperties.has('width')) {\n      this._checkUpdateActionSizes();\n    }\n\n    if (\n      process.env.NODE_ENV === 'development' &&\n      (changedProperties.has('width') ||\n        changedProperties.has('_hasHeaderNavigation') ||\n        changedProperties.has('_hasInfluencerLeft') ||\n        changedProperties.has('_hasInfluencerRight') ||\n        changedProperties.has('_hasHeaderActions'))\n    ) {\n      if (this.width === 'narrow') {\n        if (this._hasHeaderNavigation) {\n          // eslint-disable-next-line no-console\n          console.error(\n            `Header navigation is not permitted in narrow Tearsheet.`\n          );\n        }\n        if (this._hasInfluencerLeft || this._hasInfluencerRight) {\n          // eslint-disable-next-line no-console\n          console.error(`Influencer is not permitted in narrow Tearsheet.`);\n        }\n        if (this._hasHeaderActions) {\n          // eslint-disable-next-line no-console\n          console.error(\n            `Header actions are not permitted in narrow Tearsheet.`\n          );\n        }\n      }\n    }\n\n    if (changedProperties.has('open')) {\n      this._updateStack();\n\n      this._checkSetOpen();\n      if (this.open) {\n        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n        this._launcher = this.ownerDocument!.activeElement;\n        const focusNode =\n          this.selectorInitialFocus &&\n          this.querySelector(this.selectorInitialFocus);\n\n        await (this.constructor as typeof CDSTearsheet)._delay();\n        if (focusNode) {\n          // For cases where a `carbon-web-components` component (e.g. `<cds-button>`) being `primaryFocusNode`,\n          // where its first update/render cycle that makes it focusable happens after `<cds-tearsheet>`'s first update/render cycle\n          (focusNode as HTMLElement).focus();\n        } else if (\n          !tryFocusElems(\n            this.querySelectorAll(\n              (this.constructor as typeof CDSTearsheet).selectorTabbable\n            ),\n            true\n          )\n        ) {\n          this.focus();\n        }\n      } else if (\n        this._launcher &&\n        typeof (this._launcher as HTMLElement).focus === 'function'\n      ) {\n        (this._launcher as HTMLElement).focus();\n        this._launcher = null;\n      }\n    }\n  }\n\n  /**\n   * @param ms The number of milliseconds.\n   * @returns A promise that is resolves after the given milliseconds.\n   */\n  private static _delay(ms = 0) {\n    return new Promise((resolve) => {\n      setTimeout(resolve, ms);\n    });\n  }\n\n  /**\n   * A selector selecting buttons that should close this modal.\n   */\n  static get selectorCloseButton() {\n    return `[data-modal-close],${prefix}-modal-close-button`;\n  }\n\n  /**\n   * A selector selecting tabbable nodes.\n   */\n  static get selectorTabbable() {\n    return selectorTabbable;\n  }\n\n  /**\n   * The name of the custom event fired before this tearsheet is being closed upon a user gesture.\n   * Cancellation of this event stops the user-initiated action of closing this tearsheet.\n   */\n  static get eventBeforeClose() {\n    return `${prefix}-tearsheet-beingclosed`;\n  }\n\n  /**\n   * The name of the custom event fired after this tearsheet is closed upon a user gesture.\n   */\n  static get eventClose() {\n    return `${prefix}-tearsheet-closed`;\n  }\n\n  /**\n   * The name of the custom event fired on clicking the navigate back button\n   */\n  static get eventNavigateBack() {\n    return `${prefix}-tearsheet-header-navigate-back`;\n  }\n}\n\nexport default CDSTearsheet;\n"],"mappings":"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"}