@carbon/web-components 2.62.0 → 2.63.0

package/es-custom/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/utilities/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@include emit-layout-context-classes();\n@include emit-layout-context-classes('density');\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-content {\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-custom--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-custom-tabs when slotted inside cds-custom-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-custom-tabs when inside cds-custom-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":""}
+{"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/utilities/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@include emit-layout-context-classes();\n@include emit-layout-context-classes('density');\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  --#{$prefix}-tabs-icon-only-badge-indicator-offset: #{$spacing-02};\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: var(\n    --#{$prefix}-tabs-icon-only-badge-indicator-offset,\n    #{$spacing-03}\n  );\n  margin-inline-end: var(\n    --#{$prefix}-tabs-icon-only-badge-indicator-offset,\n    #{$spacing-03}\n  );\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-content {\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-custom--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-custom-tabs when slotted inside cds-custom-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-custom-tabs when inside cds-custom-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-custom/components/tag/dismissible-tag.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2019, 2025
+ * Copyright IBM Corp. 2019, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/es-custom/components/tag/dismissible-tag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dismissible-tag.d.ts","sourceRoot":"","sources":["../../../src/components/tag/dismissible-tag.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAUH,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,MAAM,MAAM,YAAY,CAAC;AAChC,OAAO,kBAAkB,CAAC;AAI1B,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;;;;;;;;;;uBAI7B,CAAA;;;;;;;AAFD;;;;;;;GAOG;AACH,cACM,iBAAkB,SAAQ,sBAAqC;IAEnE,SAAS,CAAC,WAAW,EAAG,iBAAiB,CAAC;IAE1C;;;OAGG;IACH,SAAS,CAAC,qBAAqB;IAe/B;;OAEG;IACH,SAAS,CAAC,wBAAwB,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK;IAuBpD;;;;OAIG;IAIH,SAAS,CAAC,YAAY,GAAI,OAAO,UAAU,UAwCzC;IAEF;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAMH,uBAAuB,SAAY;IAEnC;;OAEG;IAEH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B;;OAEG;IAEH,IAAI,UAAQ;IAEZ;;OAEG;IAEH,IAAI,WAAmB;IAEvB;;OAEG;IAEH,QAAQ,SAAM;IAEd;;OAEG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,IAAI,WAAiB;IAErB,MAAM;IA+CN;;;;OAIG;IACH,MAAM,KAAK,QAAQ,WAElB;IAED;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED;;;OAGG;IACH,MAAM,KAAK,gBAAgB,WAE1B;IAED;;OAEG;IACH,MAAM,KAAK,UAAU,WAEpB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"dismissible-tag.d.ts","sourceRoot":"","sources":["../../../src/components/tag/dismissible-tag.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAUH,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,MAAM,MAAM,YAAY,CAAC;AAChC,OAAO,kBAAkB,CAAC;AAI1B,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;;;;;;;;;;uBAI7B,CAAA;;;;;;;AAFD;;;;;;;GAOG;AACH,cACM,iBAAkB,SAAQ,sBAAqC;IAEnE,SAAS,CAAC,WAAW,EAAG,iBAAiB,CAAC;IAE1C;;;OAGG;IACH,SAAS,CAAC,qBAAqB;IAe/B;;OAEG;IACH,SAAS,CAAC,wBAAwB,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK;IAuBpD;;;;OAIG;IAIH,SAAS,CAAC,YAAY,GAAI,OAAO,UAAU,UA0CzC;IAEF;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAMH,uBAAuB,SAAY;IAEnC;;OAEG;IAEH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B;;OAEG;IAEH,IAAI,UAAQ;IAEZ;;OAEG;IAEH,IAAI,WAAmB;IAEvB;;OAEG;IAEH,QAAQ,SAAM;IAEd;;OAEG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,IAAI,WAAiB;IAErB,MAAM;IA2DN;;;;OAIG;IACH,MAAM,KAAK,QAAQ,WAElB;IAED;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED;;;OAGG;IACH,MAAM,KAAK,gBAAgB,WAE1B;IAED;;OAEG;IACH,MAAM,KAAK,UAAU,WAEpB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,iBAAiB,CAAC"}

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

@@ -21,7 +21,7 @@ import { property, query } from "lit/decorators.js";
 import Close16 from "@carbon/icons/es/close/16.js";
 //#region src/components/tag/dismissible-tag.ts
 /**
-* Copyright IBM Corp. 2019, 2025
+* Copyright IBM Corp. 2019, 2026
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
@@ -38,7 +38,7 @@ let CDSDismissibleTag = class CDSDismissibleTag extends HostListenerMixin(FocusM
 	constructor(..._args) {
 		super(..._args);
 		this._handleClick = (event) => {
-			if (event.composedPath().indexOf(this._buttonNode) >= 0) {
+			if (this._buttonNode && event.composedPath().indexOf(this._buttonNode) >= 0) {
 				if (this.disabled) event.stopPropagation();
 				else if (this.open) {
 					const nextFocusableTag = this._findNextFocusableTag();
@@ -95,6 +95,14 @@ let CDSDismissibleTag = class CDSDismissibleTag extends HostListenerMixin(FocusM
 		const { disabled, _handleAILabelSlotChange: handleAILabelSlotChange, _handleIconSlotChange: handleIconSlotChange, _hasEllipsisApplied: hasEllipsisApplied, size, tagTitle, text, dismissTooltipLabel, dismissTooltipAlignment } = this;
 		const dismissLabel = `Dismiss "${text}"`;
 		const dismissActionLabel = dismissTooltipLabel || (hasEllipsisApplied ? dismissLabel : "Dismiss");
+		const closeButton = html`
+      <button
+        class="${"cds-custom"}--tag__close-icon"
+        ?disabled=${disabled}
+        aria-label="${dismissActionLabel}">
+        ${iconLoader(Close16)}
+      </button>
+    `;
 		return html`
       ${size !== "sm" ? html`<slot name="icon" @slotchange="${handleIconSlotChange}"></slot>` : ""}
       <div class="${"cds-custom"}--interactive--tag-children">
@@ -106,19 +114,20 @@ let CDSDismissibleTag = class CDSDismissibleTag extends HostListenerMixin(FocusM
         <slot name="decorator" @slotchange="${handleAILabelSlotChange}"></slot>
         <slot name="ai-label" @slotchange="${handleAILabelSlotChange}"></slot>
         <slot name="slug" @slotchange="${handleAILabelSlotChange}"></slot>
-        <cds-custom-tooltip align=${dismissTooltipAlignment} enter-delay-ms=${0}>
-          <button
-            class="sb-tooltip-trigger"
-            role="button"
-            aria-labelledby="content"
-            class="${"cds-custom"}--tag__close-icon"
-            ?disabled=${disabled}>
-            ${iconLoader(Close16)}
-          </button>
-          <cds-custom-tooltip-content id="content">
-            ${dismissActionLabel}
-          </cds-custom-tooltip-content>
-        </cds-custom-tooltip>
+        ${disabled ? closeButton : html`<cds-custom-tooltip
+              align=${dismissTooltipAlignment}
+              enter-delay-ms=${0}>
+              <button
+                class="sb-tooltip-trigger"
+                role="button"
+                aria-labelledby="content"
+                class="${"cds-custom"}--tag__close-icon">
+                ${iconLoader(Close16)}
+              </button>
+              <cds-custom-tooltip-content id="content">
+                ${dismissActionLabel}
+              </cds-custom-tooltip-content>
+            </cds-custom-tooltip>`}
       </div>
     `;
 	}

package/es-custom/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-custom-dismissible-tag\n *\n * @fires cds-custom-dismissible-tag-beingclosed - The custom event fired as the element is being closed\n * @fires cds-custom-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-custom-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-custom-tooltip-content id=\"content\">\n            ${dismissActionLabel}\n          </cds-custom-tooltip-content>\n        </cds-custom-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, 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html } 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-custom-dismissible-tag\n *\n * @fires cds-custom-dismissible-tag-beingclosed - The custom event fired as the element is being closed\n * @fires cds-custom-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    if (\n      this._buttonNode &&\n      event.composedPath().indexOf(this._buttonNode) >= 0\n    ) {\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    const closeButton = html`\n      <button\n        class=\"${prefix}--tag__close-icon\"\n        ?disabled=${disabled}\n        aria-label=\"${dismissActionLabel}\">\n        ${iconLoader(Close16)}\n      </button>\n    `;\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        ${disabled\n          ? closeButton\n          : html`<cds-custom-tooltip\n              align=${dismissTooltipAlignment}\n              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                ${iconLoader(Close16)}\n              </button>\n              <cds-custom-tooltip-content id=\"content\">\n                ${dismissActionLabel}\n              </cds-custom-tooltip-content>\n            </cds-custom-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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"}

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

@@ -1 +1 @@
-{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../src/components/tag/tag.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAQvC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAI5C,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;;;;;;;;;;uBAKG,CAAC;;;;;;;AAHlC;;;;;GAKG;AACH,cACM,MAAO,SAAQ,WAAyC;IAE5D,SAAS,CAAC,WAAW,EAAG,iBAAiB,CAAC;IAG1C,cAAc,EAAG,WAAW,CAAC;IAE7B;;OAEG;IACH,SAAS,CAAC,wBAAwB,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK;IAsBpD;;OAEG;IACH,SAAS,CAAC,qBAAqB,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK;IAOjD;;;;OAIG;IAIH,SAAS,CAAC,YAAY,GAAI,OAAO,UAAU,UAgCzC;IAEF;;;;OAIG;IAEH,KAAK,SAAkB;IAEvB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;;;OAIG;IAEH,MAAM,UAAS;IAEf;;OAEG;IAEH,aAAa,UAAS;IAEtB;;OAEG;IAEH,IAAI,UAAQ;IAEZ;;OAEG;IAEH,IAAI,WAAmB;IAEvB;;OAEG;IAEH,IAAI,WAAiB;IAErB;;OAEG;IAEH,mBAAmB,UAAS;IAE5B,OAAO;IAoBP,MAAM;IA8BN;;;;OAIG;IACH,MAAM,KAAK,QAAQ,WAElB;IAED;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED;;;OAGG;IACH,MAAM,KAAK,gBAAgB,WAE1B;IAED;;OAEG;IACH,MAAM,KAAK,UAAU,WAEpB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,MAAM,CAAC"}
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../src/components/tag/tag.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAQvC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAI5C,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;;;;;;;;;;uBAKG,CAAC;;;;;;;AAHlC;;;;;GAKG;AACH,cACM,MAAO,SAAQ,WAAyC;IAE5D,SAAS,CAAC,WAAW,EAAG,iBAAiB,CAAC;IAG1C,cAAc,EAAG,WAAW,CAAC;IAE7B;;OAEG;IACH,SAAS,CAAC,wBAAwB,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK;IAsBpD;;OAEG;IACH,SAAS,CAAC,qBAAqB,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK;IAOjD;;;;OAIG;IAIH,SAAS,CAAC,YAAY,GAAI,OAAO,UAAU,UAkCzC;IAEF;;;;OAIG;IAEH,KAAK,SAAkB;IAEvB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;;;OAIG;IAEH,MAAM,UAAS;IAEf;;OAEG;IAEH,aAAa,UAAS;IAEtB;;OAEG;IAEH,IAAI,UAAQ;IAEZ;;OAEG;IAEH,IAAI,WAAmB;IAEvB;;OAEG;IAEH,IAAI,WAAiB;IAErB;;OAEG;IAEH,mBAAmB,UAAS;IAE5B,OAAO;IAoBP,MAAM;IA8BN;;;;OAIG;IACH,MAAM,KAAK,QAAQ,WAElB;IAED;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED;;;OAGG;IACH,MAAM,KAAK,gBAAgB,WAE1B;IAED;;OAEG;IACH,MAAM,KAAK,UAAU,WAEpB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,MAAM,CAAC"}

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

@@ -34,7 +34,7 @@ let CDSTag = class CDSTag extends HostListenerMixin(FocusMixin(LitElement)) {
 	constructor(..._args) {
 		super(..._args);
 		this._handleClick = (event) => {
-			if (event.composedPath().indexOf(this._buttonNode) >= 0) {
+			if (this._buttonNode && event.composedPath().indexOf(this._buttonNode) >= 0) {
 				if (this.disabled) event.stopPropagation();
 				else if (this.open) {
 					const init = {

package/es-custom/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-custom-tag\n * @fires cds-custom-tag-beingclosed - The custom event fired as the element is being closed\n * @fires cds-custom-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  @query(`.${prefix}--tag__label`)\n  _textContainer!: HTMLElement;\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-custom-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-custom-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    if (!this._textContainer || this._hasEllipsisApplied === true) return;\n\n    this._hasEllipsisApplied =\n      this._textContainer.scrollWidth > this._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-custom-tag\n * @fires cds-custom-tag-beingclosed - The custom event fired as the element is being closed\n * @fires cds-custom-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  @query(`.${prefix}--tag__label`)\n  _textContainer!: HTMLElement;\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    if (\n      this._buttonNode &&\n      event.composedPath().indexOf(this._buttonNode) >= 0\n    ) {\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-custom-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-custom-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    if (!this._textContainer || this._hasEllipsisApplied === true) return;\n\n    this._hasEllipsisApplied =\n      this._textContainer.scrollWidth > this._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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"}