@carbon/web-components 2.57.0-rc.0 → 2.57.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-custom/components/tabs/defs.d.ts

@@ -83,6 +83,10 @@ export declare enum TABS_SIZE {
     /**
      * Large size.
      */
-    LARGE = "lg"
+    LARGE = "lg",
+    /**
+     * Extra large size.
+     */
+    EXTRA_LARGE = "xl"
 }
 //# sourceMappingURL=defs.d.ts.map

package/es-custom/components/tabs/defs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/defs.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;GAEG;AACH,oBAAY,oBAAoB;IAC9B;;OAEG;IACH,IAAI,SAAS;IAEb;;OAEG;IACH,UAAU,eAAe;IAEzB;;OAEG;IACH,UAAU,eAAe;IAEzB;;OAEG;IACH,IAAI,SAAS;IAEb;;OAEG;IACH,GAAG,QAAQ;CACZ;AAED;;GAEG;AACH,oBAAY,SAAS;IACnB;;OAEG;IACH,OAAO,KAAK;IAEZ;;OAEG;IACH,SAAS,cAAc;IAEvB;;OAEG;IACH,SAAS,cAAc;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,6BAA6B;;;;;CAKzC,CAAC;AAEF;;GAEG;AACH,oBAAY,cAAc;IACxB;;OAEG;IACH,OAAO,YAAY;IAEnB;;OAEG;IACH,KAAK,OAAO;CACb;AAED;;GAEG;AACH,oBAAY,SAAS;IACnB;;OAEG;IACH,KAAK,OAAO;IAEZ;;OAEG;IACH,MAAM,OAAO;IAEb;;OAEG;IACH,KAAK,OAAO;CACb"}
+{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/defs.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;GAEG;AACH,oBAAY,oBAAoB;IAC9B;;OAEG;IACH,IAAI,SAAS;IAEb;;OAEG;IACH,UAAU,eAAe;IAEzB;;OAEG;IACH,UAAU,eAAe;IAEzB;;OAEG;IACH,IAAI,SAAS;IAEb;;OAEG;IACH,GAAG,QAAQ;CACZ;AAED;;GAEG;AACH,oBAAY,SAAS;IACnB;;OAEG;IACH,OAAO,KAAK;IAEZ;;OAEG;IACH,SAAS,cAAc;IAEvB;;OAEG;IACH,SAAS,cAAc;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,6BAA6B;;;;;CAKzC,CAAC;AAEF;;GAEG;AACH,oBAAY,cAAc;IACxB;;OAEG;IACH,OAAO,YAAY;IAEnB;;OAEG;IACH,KAAK,OAAO;CACb;AAED;;GAEG;AACH,oBAAY,SAAS;IACnB;;OAEG;IACH,KAAK,OAAO;IAEZ;;OAEG;IACH,MAAM,OAAO;IAEb;;OAEG;IACH,KAAK,OAAO;IAEZ;;OAEG;IACH,WAAW,OAAO;CACnB"}

package/es-custom/components/tabs/defs.js

@@ -95,6 +95,10 @@ let TABS_SIZE = /* @__PURE__ */ function(TABS_SIZE) {
 	* Large size.
 	*/
 	TABS_SIZE["LARGE"] = "lg";
+	/**
+	* Extra large size.
+	*/
+	TABS_SIZE["EXTRA_LARGE"] = "xl";
 	return TABS_SIZE;
 }({});
 //#endregion

package/es-custom/components/tabs/defs.js.map

@@ -1 +1 @@
-{"version":3,"file":"defs.js","names":[],"sources":["../../../src/components/tabs/defs.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2020, 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/**\n * The keyboard action categories for dropdown.\n */\nexport enum TABS_KEYBOARD_ACTION {\n  /**\n   * Not doing any action.\n   */\n  NONE = 'none',\n\n  /**\n   * Keyboard action to navigate back/forward.\n   */\n  NAVIGATING = 'navigating',\n\n  /**\n   * Keyboard action to Enter/Space.\n   */\n  ACTIVATING = 'activating',\n\n  /**\n   * Keyboard action to navigate to first tab using home key\n   */\n  HOME = 'home',\n\n  /**\n   * Keyboard action to navigate to last tab using end key\n   */\n  END = 'end',\n}\n\n/**\n * Tabs types.\n */\nexport enum TABS_TYPE {\n  /**\n   * Regular tabs.\n   */\n  REGULAR = '',\n\n  /**\n   * Container type.\n   */\n  CONTAINER = 'container',\n\n  /**\n   * Contained type.\n   */\n  CONTAINED = 'contained',\n}\n\n/**\n * Vertical navigation direction, associated with key symbols.\n */\nexport const VERTICAL_NAVIGATION_DIRECTION = {\n  Up: -1,\n  ArrowUp: -1,\n  Down: 1,\n  ArrowDown: 1,\n};\n\n/**\n * Tabs icon sizes.\n */\nexport enum TABS_ICON_SIZE {\n  /**\n   * Default icon size.\n   */\n  DEFAULT = 'default',\n\n  /**\n   * Large icon size.\n   */\n  LARGE = 'lg',\n}\n\n/**\n * Tabs size.\n */\nexport enum TABS_SIZE {\n  /**\n   * Small size.\n   */\n  SMALL = 'sm',\n\n  /**\n   * Medium size.\n   */\n  MEDIUM = 'md',\n\n  /**\n   * Large size.\n   */\n  LARGE = 'lg',\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAUA,IAAY,uBAAL,yBAAA,sBAAA;;;;AAIL,sBAAA,UAAA;;;;AAKA,sBAAA,gBAAA;;;;AAKA,sBAAA,gBAAA;;;;AAKA,sBAAA,UAAA;;;;AAKA,sBAAA,SAAA;;KACD;;;;AAKD,IAAY,YAAL,yBAAA,WAAA;;;;AAIL,WAAA,aAAA;;;;AAKA,WAAA,eAAA;;;;AAKA,WAAA,eAAA;;KACD;;;;AAKD,MAAa,gCAAgC;CAC3C,IAAI;CACJ,SAAS;CACT,MAAM;CACN,WAAW;CACZ;;;;AAKD,IAAY,iBAAL,yBAAA,gBAAA;;;;AAIL,gBAAA,aAAA;;;;AAKA,gBAAA,WAAA;;KACD;;;;AAKD,IAAY,YAAL,yBAAA,WAAA;;;;AAIL,WAAA,WAAA;;;;AAKA,WAAA,YAAA;;;;AAKA,WAAA,WAAA;;KACD"}
+{"version":3,"file":"defs.js","names":[],"sources":["../../../src/components/tabs/defs.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2020, 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/**\n * The keyboard action categories for dropdown.\n */\nexport enum TABS_KEYBOARD_ACTION {\n  /**\n   * Not doing any action.\n   */\n  NONE = 'none',\n\n  /**\n   * Keyboard action to navigate back/forward.\n   */\n  NAVIGATING = 'navigating',\n\n  /**\n   * Keyboard action to Enter/Space.\n   */\n  ACTIVATING = 'activating',\n\n  /**\n   * Keyboard action to navigate to first tab using home key\n   */\n  HOME = 'home',\n\n  /**\n   * Keyboard action to navigate to last tab using end key\n   */\n  END = 'end',\n}\n\n/**\n * Tabs types.\n */\nexport enum TABS_TYPE {\n  /**\n   * Regular tabs.\n   */\n  REGULAR = '',\n\n  /**\n   * Container type.\n   */\n  CONTAINER = 'container',\n\n  /**\n   * Contained type.\n   */\n  CONTAINED = 'contained',\n}\n\n/**\n * Vertical navigation direction, associated with key symbols.\n */\nexport const VERTICAL_NAVIGATION_DIRECTION = {\n  Up: -1,\n  ArrowUp: -1,\n  Down: 1,\n  ArrowDown: 1,\n};\n\n/**\n * Tabs icon sizes.\n */\nexport enum TABS_ICON_SIZE {\n  /**\n   * Default icon size.\n   */\n  DEFAULT = 'default',\n\n  /**\n   * Large icon size.\n   */\n  LARGE = 'lg',\n}\n\n/**\n * Tabs size.\n */\nexport enum TABS_SIZE {\n  /**\n   * Small size.\n   */\n  SMALL = 'sm',\n\n  /**\n   * Medium size.\n   */\n  MEDIUM = 'md',\n\n  /**\n   * Large size.\n   */\n  LARGE = 'lg',\n\n  /**\n   * Extra large size.\n   */\n  EXTRA_LARGE = 'xl',\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAUA,IAAY,uBAAL,yBAAA,sBAAA;;;;AAIL,sBAAA,UAAA;;;;AAKA,sBAAA,gBAAA;;;;AAKA,sBAAA,gBAAA;;;;AAKA,sBAAA,UAAA;;;;AAKA,sBAAA,SAAA;;KACD;;;;AAKD,IAAY,YAAL,yBAAA,WAAA;;;;AAIL,WAAA,aAAA;;;;AAKA,WAAA,eAAA;;;;AAKA,WAAA,eAAA;;KACD;;;;AAKD,MAAa,gCAAgC;CAC3C,IAAI;CACJ,SAAS;CACT,MAAM;CACN,WAAW;CACZ;;;;AAKD,IAAY,iBAAL,yBAAA,gBAAA;;;;AAIL,gBAAA,aAAA;;;;AAKA,gBAAA,WAAA;;KACD;;;;AAKD,IAAY,YAAL,yBAAA,WAAA;;;;AAIL,WAAA,WAAA;;;;AAKA,WAAA,YAAA;;;;AAKA,WAAA,WAAA;;;;AAKA,WAAA,iBAAA;;KACD"}

package/es-custom/components/tabs/stories/tabs-wrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-wrapper.d.ts","sourceRoot":"","sources":["../../../../src/components/tabs/stories/tabs-wrapper.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAMpC,OAAO,cAAc,CAAC;AAEtB;;GAEG;AACH,qBACa,sBAAuB,SAAQ,UAAU;IACpD;;OAEG;IAEH,SAAS,UAAS;IAElB,OAAO,CAAC,YAAY,CAgBlB;IACF;;OAEG;IAEH,OAAO,CAAC,KAAK,CAAqB;IAElC;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,SAAS,UAAS;IAClB;;OAEG;IAEH,WAAW,UAAQ;IAEnB;;OAEG;IAEH,aAAa,SAAe;IAE5B;;OAEG;IAEH,aAAa,SAAK;IAElB;;OAEG;IAEH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAKxB;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAM7B,OAAO,CAAC,SAAS;IAIjB,MAAM;IA4CN;;OAEG;IACH,gBAAgB;CAGjB"}
+{"version":3,"file":"tabs-wrapper.d.ts","sourceRoot":"","sources":["../../../../src/components/tabs/stories/tabs-wrapper.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAMpC,OAAO,cAAc,CAAC;AAEtB;;GAEG;AACH,qBACa,sBAAuB,SAAQ,UAAU;IACpD;;OAEG;IAEH,SAAS,UAAS;IAElB,OAAO,CAAC,YAAY,CAgBlB;IACF;;OAEG;IAEH,OAAO,CAAC,KAAK,CAAqB;IAElC;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,SAAS,UAAS;IAClB;;OAEG;IAEH,WAAW,UAAQ;IAEnB;;OAEG;IAEH,aAAa,SAAe;IAE5B;;OAEG;IAEH,aAAa,SAAK;IAElB;;OAEG;IAEH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAKxB;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAM7B,OAAO,CAAC,SAAS;IAIjB,MAAM;IA+CN;;OAEG;IACH,gBAAgB;CAGjB"}

package/es-custom/components/tabs/stories/tabs-wrapper.js

@@ -81,6 +81,7 @@ let DismissableTabsWrapper = class DismissableTabsWrapper extends LitElement {
 	}
 	render() {
 		const { resetTabs } = this;
+		const size = this.size || (this.contained ? "lg" : "md");
 		return html`
       <cds-custom-button style="margin-bottom: 3rem" @click="${resetTabs}">
         Reset
@@ -91,7 +92,7 @@ let DismissableTabsWrapper = class DismissableTabsWrapper extends LitElement {
         selected-index="${this.selectedIndex}"
         type="${this.contained ? "contained" : ""}"
         ?dismissable="${this.dismissable}"
-        size="${this.size || "lg"}"
+        size="${size}"
         value="all"
         @cds-custom-tab-closed="${this._handleDismissed}"
         @cds-custom-tabs-beingselected="${this._handleBeforeSelected}">

package/es-custom/components/tabs/stories/tabs-wrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-wrapper.js","names":["customElement"],"sources":["../../../../src/components/tabs/stories/tabs-wrapper.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { carbonElement as customElement } from '../../../globals/decorators/carbon-element';\nimport { prefix } from '../../../globals/settings';\nimport { TABS_TYPE } from '../tabs';\nimport { TABS_SIZE } from '../defs';\nimport { iconLoader } from '../../../globals/internal/icon-loader';\nimport Dashboard16 from '@carbon/icons/es/dashboard/16.js';\nimport CloudMonitoring16 from '@carbon/icons/es/cloud--monitoring/16.js';\nimport Activity16 from '@carbon/icons/es/activity/16.js';\nimport Settings16 from '@carbon/icons/es/settings/16.js';\nimport '../../button';\n\n/**\n * Wrapper component for dismissable tabs story with state management\n */\n@customElement('tabs-story-wrapper')\nexport class DismissableTabsWrapper extends LitElement {\n  /**\n   * Whether to render tabs with icons\n   */\n  @property({ type: Boolean, attribute: 'with-icons' })\n  withIcons = false;\n\n  private _defaultTabs = [\n    { id: 'all', label: 'Dashboard', value: 'all', icon: Dashboard16 },\n    {\n      id: 'cloudFoundry',\n      label: 'Monitoring',\n      value: 'cloudFoundry',\n      icon: CloudMonitoring16,\n    },\n    { id: 'staging', label: 'Activity', value: 'staging', icon: Activity16 },\n    {\n      id: 'dea',\n      label: 'Settings',\n      value: 'dea',\n      disabled: true,\n      icon: Settings16,\n    },\n  ];\n  /**\n   * Array of tab configurations\n   */\n  @state()\n  private _tabs = this._defaultTabs;\n\n  /**\n   * Whether tabs are disabled\n   */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /**\n   * Whether tabs are contained\n   */\n  @property({ type: Boolean })\n  contained = false;\n  /**\n   * Whether the rendered Tab children should be dismissable.\n   */\n  @property({ type: Boolean })\n  dismissable = true;\n\n  /**\n   * Selection mode\n   */\n  @property({ attribute: 'selection-mode' })\n  selectionMode = 'automatic';\n\n  /**\n   * Selected index for the initially selected content\n   */\n  @property({ attribute: 'selected-index' })\n  selectedIndex = 0;\n\n  /**\n   * Size of the tabs\n   */\n  @property({ reflect: true })\n  size?: TABS_SIZE;\n\n  /**\n   * Handle tab dismissed event\n   */\n  private _handleDismissed(event: CustomEvent) {\n    const { index } = event.detail;\n    this._tabs = this._tabs.filter((_, i) => i !== index);\n  }\n\n  /**\n   * Handle before selected event\n   */\n  private _handleBeforeSelected(event: CustomEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n    }\n  }\n\n  private resetTabs() {\n    this._tabs = [...this._defaultTabs];\n  }\n\n  render() {\n    const { resetTabs } = this;\n    return html`\n      <cds-custom-button style=\"margin-bottom: 3rem\" @click=\"${resetTabs}\">\n        Reset\n      </cds-custom-button>\n      <cds-custom-tabs\n        ?disabled=\"${this.disabled}\"\n        selection-mode=\"${this.selectionMode}\"\n        selected-index=\"${this.selectedIndex}\"\n        type=\"${this.contained ? TABS_TYPE.CONTAINED : TABS_TYPE.REGULAR}\"\n        ?dismissable=\"${this.dismissable}\"\n        size=\"${this.size || TABS_SIZE.LARGE}\"\n        value=\"all\"\n        @cds-custom-tab-closed=\"${this._handleDismissed}\"\n        @cds-custom-tabs-beingselected=\"${this._handleBeforeSelected}\">\n        ${this._tabs.map(\n          (tab) => html`\n            <cds-custom-tab\n              id=\"tab-${tab.id}\"\n              target=\"panel-${tab.id}\"\n              value=\"${tab.value}\"\n              ?disabled=\"${tab.disabled}\">\n              ${this.withIcons ? iconLoader(tab.icon) : ''} ${tab.label}\n            </cds-custom-tab>\n          `\n        )}\n      </cds-custom-tabs>\n      <div class=\"${prefix}-ce-demo-devenv--tab-panels\">\n        ${this._tabs.map(\n          (tab) => html`\n            <div\n              id=\"panel-${tab.id}\"\n              role=\"tabpanel\"\n              aria-labelledby=\"tab-${tab.id}\"\n              hidden>\n              ${tab.label}\n            </div>\n          `\n        )}\n      </div>\n    `;\n  }\n\n  /**\n   * Disable shadow DOM to inherit styles from parent\n   */\n  createRenderRoot() {\n    return this;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBO,IAAA,yBAAA,MAAM,+BAA+B,WAAW;;;mBAKzC;sBAEW;GACrB;IAAE,IAAI;IAAO,OAAO;IAAa,OAAO;IAAO,MAAM;IAAa;GAClE;IACE,IAAI;IACJ,OAAO;IACP,OAAO;IACP,MAAM;IACP;GACD;IAAE,IAAI;IAAW,OAAO;IAAY,OAAO;IAAW,MAAM;IAAY;GACxE;IACE,IAAI;IACJ,OAAO;IACP,OAAO;IACP,UAAU;IACV,MAAM;IACP;GACF;eAKe,KAAK;kBAMV;mBAMC;qBAKE;uBAME;uBAMA;;;;;CAWhB,iBAAyB,OAAoB;EAC3C,MAAM,EAAE,UAAU,MAAM;AACxB,OAAK,QAAQ,KAAK,MAAM,QAAQ,GAAG,MAAM,MAAM,MAAM;;;;;CAMvD,sBAA8B,OAAoB;AAChD,MAAI,KAAK,SACP,OAAM,gBAAgB;;CAI1B,YAAoB;AAClB,OAAK,QAAQ,CAAC,GAAG,KAAK,aAAa;;CAGrC,SAAS;EACP,MAAM,EAAE,cAAc;AACtB,SAAO,IAAI;wDACyC,UAAU;;;;qBAI7C,KAAK,SAAS;0BACT,KAAK,cAAc;0BACnB,KAAK,cAAc;gBAC7B,KAAK,YAAA,cAAA,GAAoD;wBACjD,KAAK,YAAY;gBACzB,KAAK,QAAA,KAAwB;;2BAElB,KAAK,iBAAiB;mCACd,KAAK,sBAAsB;UACpD,KAAK,MAAM,KACV,QAAQ,IAAI;;wBAEC,IAAI,GAAG;8BACD,IAAI,GAAG;uBACd,IAAI,MAAM;2BACN,IAAI,SAAS;gBACxB,KAAK,YAAY,WAAW,IAAI,KAAK,GAAG,GAAG,GAAG,IAAI,MAAM;;YAG/D,CAAC;;0BAEiB;UACjB,KAAK,MAAM,KACV,QAAQ,IAAI;;0BAEG,IAAI,GAAG;;qCAEI,IAAI,GAAG;;gBAE5B,IAAI,MAAM;;YAGjB,CAAC;;;;;;;CAQR,mBAAmB;AACjB,SAAO;;;YAlIR,SAAS;CAAE,MAAM;CAAS,WAAW;CAAc,CAAC,CAAA,EAAA,uBAAA,WAAA,aAAA,KAAA,EAAA;YAuBpD,OAAO,CAAA,EAAA,uBAAA,WAAA,SAAA,KAAA,EAAA;YAMP,SAAS,EAAE,MAAM,SAAS,CAAC,CAAA,EAAA,uBAAA,WAAA,YAAA,KAAA,EAAA;YAM3B,SAAS,EAAE,MAAM,SAAS,CAAC,CAAA,EAAA,uBAAA,WAAA,aAAA,KAAA,EAAA;YAK3B,SAAS,EAAE,MAAM,SAAS,CAAC,CAAA,EAAA,uBAAA,WAAA,eAAA,KAAA,EAAA;YAM3B,SAAS,EAAE,WAAW,kBAAkB,CAAC,CAAA,EAAA,uBAAA,WAAA,iBAAA,KAAA,EAAA;YAMzC,SAAS,EAAE,WAAW,kBAAkB,CAAC,CAAA,EAAA,uBAAA,WAAA,iBAAA,KAAA,EAAA;YAMzC,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,uBAAA,WAAA,QAAA,KAAA,EAAA;qCA/D7BA,cAAc,qBAAqB,CAAA,EAAA,uBAAA"}
+{"version":3,"file":"tabs-wrapper.js","names":["customElement"],"sources":["../../../../src/components/tabs/stories/tabs-wrapper.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { carbonElement as customElement } from '../../../globals/decorators/carbon-element';\nimport { prefix } from '../../../globals/settings';\nimport { TABS_TYPE } from '../tabs';\nimport { TABS_SIZE } from '../defs';\nimport { iconLoader } from '../../../globals/internal/icon-loader';\nimport Dashboard16 from '@carbon/icons/es/dashboard/16.js';\nimport CloudMonitoring16 from '@carbon/icons/es/cloud--monitoring/16.js';\nimport Activity16 from '@carbon/icons/es/activity/16.js';\nimport Settings16 from '@carbon/icons/es/settings/16.js';\nimport '../../button';\n\n/**\n * Wrapper component for dismissable tabs story with state management\n */\n@customElement('tabs-story-wrapper')\nexport class DismissableTabsWrapper extends LitElement {\n  /**\n   * Whether to render tabs with icons\n   */\n  @property({ type: Boolean, attribute: 'with-icons' })\n  withIcons = false;\n\n  private _defaultTabs = [\n    { id: 'all', label: 'Dashboard', value: 'all', icon: Dashboard16 },\n    {\n      id: 'cloudFoundry',\n      label: 'Monitoring',\n      value: 'cloudFoundry',\n      icon: CloudMonitoring16,\n    },\n    { id: 'staging', label: 'Activity', value: 'staging', icon: Activity16 },\n    {\n      id: 'dea',\n      label: 'Settings',\n      value: 'dea',\n      disabled: true,\n      icon: Settings16,\n    },\n  ];\n  /**\n   * Array of tab configurations\n   */\n  @state()\n  private _tabs = this._defaultTabs;\n\n  /**\n   * Whether tabs are disabled\n   */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /**\n   * Whether tabs are contained\n   */\n  @property({ type: Boolean })\n  contained = false;\n  /**\n   * Whether the rendered Tab children should be dismissable.\n   */\n  @property({ type: Boolean })\n  dismissable = true;\n\n  /**\n   * Selection mode\n   */\n  @property({ attribute: 'selection-mode' })\n  selectionMode = 'automatic';\n\n  /**\n   * Selected index for the initially selected content\n   */\n  @property({ attribute: 'selected-index' })\n  selectedIndex = 0;\n\n  /**\n   * Size of the tabs\n   */\n  @property({ reflect: true })\n  size?: TABS_SIZE;\n\n  /**\n   * Handle tab dismissed event\n   */\n  private _handleDismissed(event: CustomEvent) {\n    const { index } = event.detail;\n    this._tabs = this._tabs.filter((_, i) => i !== index);\n  }\n\n  /**\n   * Handle before selected event\n   */\n  private _handleBeforeSelected(event: CustomEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n    }\n  }\n\n  private resetTabs() {\n    this._tabs = [...this._defaultTabs];\n  }\n\n  render() {\n    const { resetTabs } = this;\n    const size =\n      this.size || (this.contained ? TABS_SIZE.LARGE : TABS_SIZE.MEDIUM);\n\n    return html`\n      <cds-custom-button style=\"margin-bottom: 3rem\" @click=\"${resetTabs}\">\n        Reset\n      </cds-custom-button>\n      <cds-custom-tabs\n        ?disabled=\"${this.disabled}\"\n        selection-mode=\"${this.selectionMode}\"\n        selected-index=\"${this.selectedIndex}\"\n        type=\"${this.contained ? TABS_TYPE.CONTAINED : TABS_TYPE.REGULAR}\"\n        ?dismissable=\"${this.dismissable}\"\n        size=\"${size}\"\n        value=\"all\"\n        @cds-custom-tab-closed=\"${this._handleDismissed}\"\n        @cds-custom-tabs-beingselected=\"${this._handleBeforeSelected}\">\n        ${this._tabs.map(\n          (tab) => html`\n            <cds-custom-tab\n              id=\"tab-${tab.id}\"\n              target=\"panel-${tab.id}\"\n              value=\"${tab.value}\"\n              ?disabled=\"${tab.disabled}\">\n              ${this.withIcons ? iconLoader(tab.icon) : ''} ${tab.label}\n            </cds-custom-tab>\n          `\n        )}\n      </cds-custom-tabs>\n      <div class=\"${prefix}-ce-demo-devenv--tab-panels\">\n        ${this._tabs.map(\n          (tab) => html`\n            <div\n              id=\"panel-${tab.id}\"\n              role=\"tabpanel\"\n              aria-labelledby=\"tab-${tab.id}\"\n              hidden>\n              ${tab.label}\n            </div>\n          `\n        )}\n      </div>\n    `;\n  }\n\n  /**\n   * Disable shadow DOM to inherit styles from parent\n   */\n  createRenderRoot() {\n    return this;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBO,IAAA,yBAAA,MAAM,+BAA+B,WAAW;;;mBAKzC;sBAEW;GACrB;IAAE,IAAI;IAAO,OAAO;IAAa,OAAO;IAAO,MAAM;IAAa;GAClE;IACE,IAAI;IACJ,OAAO;IACP,OAAO;IACP,MAAM;IACP;GACD;IAAE,IAAI;IAAW,OAAO;IAAY,OAAO;IAAW,MAAM;IAAY;GACxE;IACE,IAAI;IACJ,OAAO;IACP,OAAO;IACP,UAAU;IACV,MAAM;IACP;GACF;eAKe,KAAK;kBAMV;mBAMC;qBAKE;uBAME;uBAMA;;;;;CAWhB,iBAAyB,OAAoB;EAC3C,MAAM,EAAE,UAAU,MAAM;AACxB,OAAK,QAAQ,KAAK,MAAM,QAAQ,GAAG,MAAM,MAAM,MAAM;;;;;CAMvD,sBAA8B,OAAoB;AAChD,MAAI,KAAK,SACP,OAAM,gBAAgB;;CAI1B,YAAoB;AAClB,OAAK,QAAQ,CAAC,GAAG,KAAK,aAAa;;CAGrC,SAAS;EACP,MAAM,EAAE,cAAc;EACtB,MAAM,OACJ,KAAK,SAAS,KAAK,YAAA,OAAA;AAErB,SAAO,IAAI;wDACyC,UAAU;;;;qBAI7C,KAAK,SAAS;0BACT,KAAK,cAAc;0BACnB,KAAK,cAAc;gBAC7B,KAAK,YAAA,cAAA,GAAoD;wBACjD,KAAK,YAAY;gBACzB,KAAK;;2BAEM,KAAK,iBAAiB;mCACd,KAAK,sBAAsB;UACpD,KAAK,MAAM,KACV,QAAQ,IAAI;;wBAEC,IAAI,GAAG;8BACD,IAAI,GAAG;uBACd,IAAI,MAAM;2BACN,IAAI,SAAS;gBACxB,KAAK,YAAY,WAAW,IAAI,KAAK,GAAG,GAAG,GAAG,IAAI,MAAM;;YAG/D,CAAC;;0BAEiB;UACjB,KAAK,MAAM,KACV,QAAQ,IAAI;;0BAEG,IAAI,GAAG;;qCAEI,IAAI,GAAG;;gBAE5B,IAAI,MAAM;;YAGjB,CAAC;;;;;;;CAQR,mBAAmB;AACjB,SAAO;;;YArIR,SAAS;CAAE,MAAM;CAAS,WAAW;CAAc,CAAC,CAAA,EAAA,uBAAA,WAAA,aAAA,KAAA,EAAA;YAuBpD,OAAO,CAAA,EAAA,uBAAA,WAAA,SAAA,KAAA,EAAA;YAMP,SAAS,EAAE,MAAM,SAAS,CAAC,CAAA,EAAA,uBAAA,WAAA,YAAA,KAAA,EAAA;YAM3B,SAAS,EAAE,MAAM,SAAS,CAAC,CAAA,EAAA,uBAAA,WAAA,aAAA,KAAA,EAAA;YAK3B,SAAS,EAAE,MAAM,SAAS,CAAC,CAAA,EAAA,uBAAA,WAAA,eAAA,KAAA,EAAA;YAM3B,SAAS,EAAE,WAAW,kBAAkB,CAAC,CAAA,EAAA,uBAAA,WAAA,iBAAA,KAAA,EAAA;YAMzC,SAAS,EAAE,WAAW,kBAAkB,CAAC,CAAA,EAAA,uBAAA,WAAA,iBAAA,KAAA,EAAA;YAMzC,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,uBAAA,WAAA,QAAA,KAAA,EAAA;qCA/D7BA,cAAc,qBAAqB,CAAA,EAAA,uBAAA"}

package/es-custom/components/tabs/tabs-vertical.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-vertical.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs-vertical.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAevC;;;;;;GAMG;AAEH,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,UAAU;IACrD;;OAEG;IAEH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,OAAO,CAAC,eAAe,CAA+B;IAEtD,OAAO,CAAC,qBAAqB,CAe3B;IAEF,YAAY;IAeZ,OAAO,CAAC,iBAAiB,KAAA;IAOzB,oBAAoB;IASpB,OAAO,CAAC,YAAY;IA2CpB,MAAM;IASN,MAAM,CAAC,MAAM,MAAU;CACxB"}
+{"version":3,"file":"tabs-vertical.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs-vertical.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAevC;;;;;;GAMG;AAEH,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,UAAU;IACrD;;OAEG;IAEH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,OAAO,CAAC,eAAe,CAA+B;IAEtD,OAAO,CAAC,qBAAqB,CAoB3B;IAEF,YAAY;IAeZ,OAAO,CAAC,iBAAiB,KAAA;IAOzB,oBAAoB;IASpB,OAAO,CAAC,YAAY;IA2CpB,MAAM;IASN,MAAM,CAAC,MAAM,MAAU;CACxB"}

package/es-custom/components/tabs/tabs-vertical.js

@@ -37,6 +37,8 @@ let CDSTabsVertical = class CDSTabsVertical extends LitElement {
 				if (tabs) {
 					tabs.setAttribute("vertical", "");
 					tabs.removeAttribute("type");
+					const size = tabs.getAttribute("size");
+					if (size) tabs.setAttribute("size", size);
 				}
 			} else {
 				this.classList.remove(`cds-custom--css-grid`);

package/es-custom/components/tabs/tabs-vertical.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-vertical.js","names":["styles","customElement"],"sources":["../../../src/components/tabs/tabs-vertical.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 } from 'lit/decorators.js';\nimport { breakpoints } from '@carbon/layout';\nimport { prefix } from '../../globals/settings';\nimport styles from './tabs.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Breakpoint for switching between horizontal and vertical tab layouts.\n * Uses Carbon's md breakpoint (42rem/672px) + 0.01rem offset to avoid overlap\n * with max-width queries. This mirrors the Sass breakpoint behavior.\n * Below this breakpoint, tabs display horizontally.\n */\nconst VERTICAL_TABS_BREAKPOINT = `(min-width: calc(${breakpoints.md.width} + 0.01rem))`;\n\n/**\n * Vertical tabs container component.\n *\n * @element cds-custom-tabs-vertical\n * @slot tabs - The `<cds-custom-tabs>` navigation element.\n * @slot panel - One or more `<div role=\"tabpanel\">` elements.\n */\n@customElement(`${prefix}-tabs-vertical`)\nexport default class CDSTabsVertical extends LitElement {\n  /**\n   * Option to set a height style only if using vertical variation.\n   */\n  @property({ attribute: 'custom-height' })\n  customHeight?: string;\n\n  private _mediaQueryList: MediaQueryList | null = null;\n\n  private _handleViewportChange = (e: MediaQueryListEvent | MediaQueryList) => {\n    const tabs = this.querySelector(`${prefix}-tabs`);\n    if (e.matches) {\n      this.classList.add(`${prefix}--css-grid`);\n      if (tabs) {\n        tabs.setAttribute('vertical', '');\n        tabs.removeAttribute('type');\n      }\n    } else {\n      this.classList.remove(`${prefix}--css-grid`);\n      if (tabs) {\n        tabs.removeAttribute('vertical');\n        tabs.setAttribute('type', 'contained');\n      }\n    }\n  };\n\n  firstUpdated() {\n    this._mediaQueryList = window.matchMedia(VERTICAL_TABS_BREAKPOINT);\n    this._handleViewportChange(this._mediaQueryList);\n    this._mediaQueryList.addEventListener('change', this._handleViewportChange);\n\n    requestAnimationFrame(() => {\n      this._applyHeight();\n    });\n\n    const panelSlot = this.shadowRoot?.querySelector('slot[name=\"panel\"]');\n    panelSlot?.addEventListener('slotchange', () => {\n      this._applyHeight();\n    });\n  }\n\n  updated(changedProperties) {\n    super.updated?.(changedProperties);\n    if (changedProperties.has('customHeight')) {\n      this._applyHeight();\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._mediaQueryList?.removeEventListener(\n      'change',\n      this._handleViewportChange\n    );\n    this._mediaQueryList = null;\n  }\n\n  private _applyHeight() {\n    const isVertical = this.classList.contains(`${prefix}--css-grid`);\n\n    if (this.customHeight) {\n      this.style.height = this.customHeight;\n      return;\n    }\n\n    if (!isVertical) {\n      this.style.removeProperty('height');\n      return;\n    }\n\n    const panels = Array.from(\n      this.querySelectorAll<HTMLElement>('[slot=\"panel\"]')\n    );\n\n    if (panels.length === 0) {\n      return;\n    }\n\n    const hiddenStates = panels.map((panel) => panel.hidden);\n    panels.forEach((panel) => {\n      panel.hidden = false;\n    });\n\n    const tallestPanel = Math.max(...panels.map((panel) => panel.offsetHeight));\n\n    panels.forEach((panel, index) => {\n      panel.hidden = hiddenStates[index];\n    });\n\n    const tabsEl = this.querySelector<HTMLElement>(`${prefix}-tabs`);\n    const tabsHeight = tabsEl?.offsetHeight ?? 0;\n\n    const height = Math.max(tallestPanel, tabsHeight);\n    if (height > 0) {\n      this.style.height = `${height}px`;\n    } else {\n      this.style.removeProperty('height');\n    }\n  }\n\n  render() {\n    return html`\n      <slot name=\"tabs\"></slot>\n      <div class=\"${prefix}-panel-container\">\n        <slot name=\"panel\"></slot>\n      </div>\n    `;\n  }\n\n  static styles = styles;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAM,2BAA2B,oBAAoB,YAAY,GAAG,MAAM;AAU3D,IAAA,kBAAA,MAAM,wBAAwB,WAAW;;;yBAOL;gCAEhB,MAA4C;GAC3E,MAAM,OAAO,KAAK,cAAc,WAAiB;AACjD,OAAI,EAAE,SAAS;AACb,SAAK,UAAU,IAAI,gBAAsB;AACzC,QAAI,MAAM;AACR,UAAK,aAAa,YAAY,GAAG;AACjC,UAAK,gBAAgB,OAAO;;UAEzB;AACL,SAAK,UAAU,OAAO,gBAAsB;AAC5C,QAAI,MAAM;AACR,UAAK,gBAAgB,WAAW;AAChC,UAAK,aAAa,QAAQ,YAAY;;;;;CAK5C,eAAe;AACb,OAAK,kBAAkB,OAAO,WAAW,yBAAyB;AAClE,OAAK,sBAAsB,KAAK,gBAAgB;AAChD,OAAK,gBAAgB,iBAAiB,UAAU,KAAK,sBAAsB;AAE3E,8BAA4B;AAC1B,QAAK,cAAc;IACnB;AAGF,GADkB,KAAK,YAAY,cAAc,uBAAqB,GAC3D,iBAAiB,oBAAoB;AAC9C,QAAK,cAAc;IACnB;;CAGJ,QAAQ,mBAAmB;AACzB,QAAM,UAAU,kBAAkB;AAClC,MAAI,kBAAkB,IAAI,eAAe,CACvC,MAAK,cAAc;;CAIvB,uBAAuB;AACrB,QAAM,sBAAsB;AAC5B,OAAK,iBAAiB,oBACpB,UACA,KAAK,sBACN;AACD,OAAK,kBAAkB;;CAGzB,eAAuB;EACrB,MAAM,aAAa,KAAK,UAAU,SAAS,gBAAsB;AAEjE,MAAI,KAAK,cAAc;AACrB,QAAK,MAAM,SAAS,KAAK;AACzB;;AAGF,MAAI,CAAC,YAAY;AACf,QAAK,MAAM,eAAe,SAAS;AACnC;;EAGF,MAAM,SAAS,MAAM,KACnB,KAAK,iBAA8B,mBAAiB,CACrD;AAED,MAAI,OAAO,WAAW,EACpB;EAGF,MAAM,eAAe,OAAO,KAAK,UAAU,MAAM,OAAO;AACxD,SAAO,SAAS,UAAU;AACxB,SAAM,SAAS;IACf;EAEF,MAAM,eAAe,KAAK,IAAI,GAAG,OAAO,KAAK,UAAU,MAAM,aAAa,CAAC;AAE3E,SAAO,SAAS,OAAO,UAAU;AAC/B,SAAM,SAAS,aAAa;IAC5B;EAGF,MAAM,aADS,KAAK,cAA2B,WAAiB,EACrC,gBAAgB;EAE3C,MAAM,SAAS,KAAK,IAAI,cAAc,WAAW;AACjD,MAAI,SAAS,EACX,MAAK,MAAM,SAAS,GAAG,OAAO;MAE9B,MAAK,MAAM,eAAe,SAAS;;CAIvC,SAAS;AACP,SAAO,IAAI;;0BAEY;;;;;;gBAMTA;;;YAzGf,SAAS,EAAE,WAAW,iBAAiB,CAAC,CAAA,EAAA,gBAAA,WAAA,gBAAA,KAAA,EAAA;8BAL1CC,cAAc,oBAA0B,CAAA,EAAA,gBAAA"}
+{"version":3,"file":"tabs-vertical.js","names":["styles","customElement"],"sources":["../../../src/components/tabs/tabs-vertical.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 } from 'lit/decorators.js';\nimport { breakpoints } from '@carbon/layout';\nimport { prefix } from '../../globals/settings';\nimport styles from './tabs.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Breakpoint for switching between horizontal and vertical tab layouts.\n * Uses Carbon's md breakpoint (42rem/672px) + 0.01rem offset to avoid overlap\n * with max-width queries. This mirrors the Sass breakpoint behavior.\n * Below this breakpoint, tabs display horizontally.\n */\nconst VERTICAL_TABS_BREAKPOINT = `(min-width: calc(${breakpoints.md.width} + 0.01rem))`;\n\n/**\n * Vertical tabs container component.\n *\n * @element cds-custom-tabs-vertical\n * @slot tabs - The `<cds-custom-tabs>` navigation element.\n * @slot panel - One or more `<div role=\"tabpanel\">` elements.\n */\n@customElement(`${prefix}-tabs-vertical`)\nexport default class CDSTabsVertical extends LitElement {\n  /**\n   * Option to set a height style only if using vertical variation.\n   */\n  @property({ attribute: 'custom-height' })\n  customHeight?: string;\n\n  private _mediaQueryList: MediaQueryList | null = null;\n\n  private _handleViewportChange = (e: MediaQueryListEvent | MediaQueryList) => {\n    const tabs = this.querySelector(`${prefix}-tabs`);\n    if (e.matches) {\n      this.classList.add(`${prefix}--css-grid`);\n      if (tabs) {\n        tabs.setAttribute('vertical', '');\n        tabs.removeAttribute('type');\n        // Preserve size attribute for vertical tabs to use layout tokens\n        const size = tabs.getAttribute('size');\n        if (size) {\n          tabs.setAttribute('size', size);\n        }\n      }\n    } else {\n      this.classList.remove(`${prefix}--css-grid`);\n      if (tabs) {\n        tabs.removeAttribute('vertical');\n        tabs.setAttribute('type', 'contained');\n      }\n    }\n  };\n\n  firstUpdated() {\n    this._mediaQueryList = window.matchMedia(VERTICAL_TABS_BREAKPOINT);\n    this._handleViewportChange(this._mediaQueryList);\n    this._mediaQueryList.addEventListener('change', this._handleViewportChange);\n\n    requestAnimationFrame(() => {\n      this._applyHeight();\n    });\n\n    const panelSlot = this.shadowRoot?.querySelector('slot[name=\"panel\"]');\n    panelSlot?.addEventListener('slotchange', () => {\n      this._applyHeight();\n    });\n  }\n\n  updated(changedProperties) {\n    super.updated?.(changedProperties);\n    if (changedProperties.has('customHeight')) {\n      this._applyHeight();\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._mediaQueryList?.removeEventListener(\n      'change',\n      this._handleViewportChange\n    );\n    this._mediaQueryList = null;\n  }\n\n  private _applyHeight() {\n    const isVertical = this.classList.contains(`${prefix}--css-grid`);\n\n    if (this.customHeight) {\n      this.style.height = this.customHeight;\n      return;\n    }\n\n    if (!isVertical) {\n      this.style.removeProperty('height');\n      return;\n    }\n\n    const panels = Array.from(\n      this.querySelectorAll<HTMLElement>('[slot=\"panel\"]')\n    );\n\n    if (panels.length === 0) {\n      return;\n    }\n\n    const hiddenStates = panels.map((panel) => panel.hidden);\n    panels.forEach((panel) => {\n      panel.hidden = false;\n    });\n\n    const tallestPanel = Math.max(...panels.map((panel) => panel.offsetHeight));\n\n    panels.forEach((panel, index) => {\n      panel.hidden = hiddenStates[index];\n    });\n\n    const tabsEl = this.querySelector<HTMLElement>(`${prefix}-tabs`);\n    const tabsHeight = tabsEl?.offsetHeight ?? 0;\n\n    const height = Math.max(tallestPanel, tabsHeight);\n    if (height > 0) {\n      this.style.height = `${height}px`;\n    } else {\n      this.style.removeProperty('height');\n    }\n  }\n\n  render() {\n    return html`\n      <slot name=\"tabs\"></slot>\n      <div class=\"${prefix}-panel-container\">\n        <slot name=\"panel\"></slot>\n      </div>\n    `;\n  }\n\n  static styles = styles;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAM,2BAA2B,oBAAoB,YAAY,GAAG,MAAM;AAU3D,IAAA,kBAAA,MAAM,wBAAwB,WAAW;;;yBAOL;gCAEhB,MAA4C;GAC3E,MAAM,OAAO,KAAK,cAAc,WAAiB;AACjD,OAAI,EAAE,SAAS;AACb,SAAK,UAAU,IAAI,gBAAsB;AACzC,QAAI,MAAM;AACR,UAAK,aAAa,YAAY,GAAG;AACjC,UAAK,gBAAgB,OAAO;KAE5B,MAAM,OAAO,KAAK,aAAa,OAAO;AACtC,SAAI,KACF,MAAK,aAAa,QAAQ,KAAK;;UAG9B;AACL,SAAK,UAAU,OAAO,gBAAsB;AAC5C,QAAI,MAAM;AACR,UAAK,gBAAgB,WAAW;AAChC,UAAK,aAAa,QAAQ,YAAY;;;;;CAK5C,eAAe;AACb,OAAK,kBAAkB,OAAO,WAAW,yBAAyB;AAClE,OAAK,sBAAsB,KAAK,gBAAgB;AAChD,OAAK,gBAAgB,iBAAiB,UAAU,KAAK,sBAAsB;AAE3E,8BAA4B;AAC1B,QAAK,cAAc;IACnB;AAGF,GADkB,KAAK,YAAY,cAAc,uBAAqB,GAC3D,iBAAiB,oBAAoB;AAC9C,QAAK,cAAc;IACnB;;CAGJ,QAAQ,mBAAmB;AACzB,QAAM,UAAU,kBAAkB;AAClC,MAAI,kBAAkB,IAAI,eAAe,CACvC,MAAK,cAAc;;CAIvB,uBAAuB;AACrB,QAAM,sBAAsB;AAC5B,OAAK,iBAAiB,oBACpB,UACA,KAAK,sBACN;AACD,OAAK,kBAAkB;;CAGzB,eAAuB;EACrB,MAAM,aAAa,KAAK,UAAU,SAAS,gBAAsB;AAEjE,MAAI,KAAK,cAAc;AACrB,QAAK,MAAM,SAAS,KAAK;AACzB;;AAGF,MAAI,CAAC,YAAY;AACf,QAAK,MAAM,eAAe,SAAS;AACnC;;EAGF,MAAM,SAAS,MAAM,KACnB,KAAK,iBAA8B,mBAAiB,CACrD;AAED,MAAI,OAAO,WAAW,EACpB;EAGF,MAAM,eAAe,OAAO,KAAK,UAAU,MAAM,OAAO;AACxD,SAAO,SAAS,UAAU;AACxB,SAAM,SAAS;IACf;EAEF,MAAM,eAAe,KAAK,IAAI,GAAG,OAAO,KAAK,UAAU,MAAM,aAAa,CAAC;AAE3E,SAAO,SAAS,OAAO,UAAU;AAC/B,SAAM,SAAS,aAAa;IAC5B;EAGF,MAAM,aADS,KAAK,cAA2B,WAAiB,EACrC,gBAAgB;EAE3C,MAAM,SAAS,KAAK,IAAI,cAAc,WAAW;AACjD,MAAI,SAAS,EACX,MAAK,MAAM,SAAS,GAAG,OAAO;MAE9B,MAAK,MAAM,eAAe,SAAS;;CAIvC,SAAS;AACP,SAAO,IAAI;;0BAEY;;;;;;gBAMTA;;;YA9Gf,SAAS,EAAE,WAAW,iBAAiB,CAAC,CAAA,EAAA,gBAAA,WAAA,gBAAA,KAAA,EAAA;8BAL1CC,cAAc,oBAA0B,CAAA,EAAA,gBAAA"}

package/es-custom/components/tabs/tabs.d.ts

@@ -155,6 +155,14 @@ export default class CDSTabs extends CDSTabs_base {
      * Whether the rendered Tab children should be dismissable.
      */
     dismissable: any;
+    /**
+     * Specify the size of the tabs.
+     *
+     * Supports `sm` and `md` for line tabs.
+     * Supports `sm`, `md`, and `lg` for contained tabs.
+     * Supports `xl` only when `vertical` is set; otherwise `xl` falls back to `lg`.
+     */
+    size: TABS_SIZE;
     /**
      * Specify the icon size used by icon-only tabs.
      */

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

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

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

@@ -58,8 +58,9 @@ let CDSTabs = class CDSTabs extends HostListenerMixin(content_switcher_default)
 	* Propagates the layout size token to the host and all child tabs.
 	*/
 	_syncSizeToTabs() {
-		if (this.type === "contained") {
-			const size = this.getAttribute("size");
+		if (this.type === "contained" || this.vertical) {
+			const rawSize = this.getAttribute("size");
+			const size = rawSize === "xl" && !this.vertical ? "lg" : rawSize;
 			if (size) {
 				const value = `var(--cds-layout-size-height-${size})`;
 				this.style.setProperty(`--cds-layout-size-height`, value);
@@ -494,6 +495,7 @@ __decorate([property({
 	type: Boolean,
 	reflect: true
 })], CDSTabs.prototype, "dismissable", void 0);
+__decorate([property({ reflect: true })], CDSTabs.prototype, "size", void 0);
 __decorate([property({
 	attribute: "icon-size",
 	reflect: true

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

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","names":["CDSContentSwitcher","styles","customElement"],"sources":["../../../src/components/tabs/tabs.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 { TemplateResult, html } from 'lit';\nimport { property, state, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { prefix } from '../../globals/settings';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport HostListener from '../../globals/decorators/host-listener';\nimport { forEach } from '../../globals/internal/collection-helpers';\nimport ChevronLeft16 from '@carbon/icons/es/chevron--left/16.js';\nimport ChevronRight16 from '@carbon/icons/es/chevron--right/16.js';\nimport CDSContentSwitcher, {\n  NAVIGATION_DIRECTION,\n} from '../content-switcher/content-switcher';\nimport {\n  VERTICAL_NAVIGATION_DIRECTION,\n  TABS_ICON_SIZE,\n  TABS_KEYBOARD_ACTION,\n  TABS_TYPE,\n  TABS_SIZE,\n} from './defs';\nimport CDSTab from './tab';\nimport styles from './tabs.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport {\n  NAVIGATION_DIRECTION,\n  VERTICAL_NAVIGATION_DIRECTION,\n  TABS_ICON_SIZE,\n  TABS_KEYBOARD_ACTION,\n  TABS_TYPE,\n  TABS_SIZE,\n};\n\n/**\n * Tabs.\n *\n * @element cds-custom-tabs\n * @fires cds-custom-tabs-beingselected\n *   The custom event fired before a tab is selected upon a user gesture.\n *   Cancellation of this event stops changing the user-initiated selection.\n * @fires cds-custom-tabs-selected - The custom event fired after a a tab is selected upon a user gesture.\n */\n@customElement(`${prefix}-tabs`)\nexport default class CDSTabs extends HostListenerMixin(CDSContentSwitcher) {\n  /**\n   * The latest status of this dropdown, for screen reader to accounce.\n   */\n  private _assistiveStatusText?: string;\n\n  /**\n   * The currently selected index\n   */\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: TS thinks this method is not referred to\n  private _currentIndex = 0;\n\n  /**\n   * Total number of tabs in the component\n   */\n  private _totalTabs = 0;\n\n  /**\n   * `true` if the tablist is scrollable\n   */\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: TS thinks this method is not referred to\n  private _isScrollable = false;\n\n  /**\n   * The DOM element for the tablist.\n   */\n  private tablist: Element | null = null;\n\n  /**\n   * The width of the overflow scroll buttons.\n   */\n  private BUTTON_WIDTH = 44;\n\n  /**\n   * Propagates the layout size token to the host and all child tabs.\n   */\n  private _syncSizeToTabs() {\n    if (this.type === TABS_TYPE.CONTAINED) {\n      const size = this.getAttribute('size');\n      if (size) {\n        const value = `var(--${prefix}-layout-size-height-${size})`;\n        this.style.setProperty(`--${prefix}-layout-size-height`, value);\n        this.querySelectorAll(`${prefix}-tab`).forEach((tab) => {\n          (tab as HTMLElement).style.setProperty(\n            `--${prefix}-layout-size-height`,\n            value\n          );\n        });\n      } else {\n        this.style.removeProperty(`--${prefix}-layout-size-height`);\n        this.querySelectorAll(`${prefix}-tab`).forEach((tab) => {\n          (tab as HTMLElement).style.removeProperty(\n            `--${prefix}-layout-size-height`\n          );\n        });\n      }\n    }\n  }\n\n  /**\n   * Navigates through tabs.\n   *\n   * @param direction `-1` to navigate backward, `1` to navigate forward.\n   * @param [options] The options.\n   * @param [options.immediate]\n   *   Defaults to `true`\n   *   `true` to make it \"immediate selection change\" mode, which does:\n   *\n   *   Starts with the selected item\n   *   Going prev/next item immediately changes the selection\n   */\n  protected _navigate(direction: number) {\n    const immediate = this.selectionMode === 'automatic';\n    const { selectorItemHighlighted, selectorItemSelected } = this\n      .constructor as typeof CDSTabs;\n    const nextItem = this._getNextItem(\n      this.querySelector(\n        immediate ? selectorItemSelected : selectorItemHighlighted\n      ) as CDSTab,\n      direction\n    );\n    if (!nextItem) {\n      return;\n    }\n    this._handleUserInitiatedSelectItem(nextItem as CDSTab, 'keyboard');\n    if (!immediate) {\n      this.resetHighlighted(nextItem as CDSTab);\n    }\n\n    // Using `{ block: 'nearest' }` to prevent scrolling unless scrolling is absolutely necessary.\n    // `scrollIntoViewOptions` seems to work in latest Safari despite of MDN/caniuse table.\n    // IE falls back to the old behavior.\n    nextItem.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n\n    const nextItemText = nextItem.textContent;\n    if (nextItemText) {\n      this._assistiveStatusText = nextItemText;\n    }\n    this._currentIndex += direction;\n    this.requestUpdate();\n  }\n\n  /**\n   * Resets the highlighted state of all tabs, setting only the specified tab as highlighted.\n   *\n   * @param nextItem The tab item to be highlighted. If provided, only this item will be highlighted.\n   *   If null or undefined, all tabs will have their highlighted state set to false.\n   */\n  protected resetHighlighted(nextItem?: CDSTab | null) {\n    const { selectorItem } = this.constructor as typeof CDSTabs;\n    forEach(this.querySelectorAll(selectorItem), (item) => {\n      (item as CDSTab)['highlighted'] = nextItem === item;\n    });\n  }\n\n  /**\n   * Resets the selected state of all tabs, setting only the specified tab as selected.\n   *\n   * @param nextItem The tab item to be selected. If provided, only this item will be selected.\n   *   If null or undefined, all tabs will have their selected state set to false.\n   */\n  protected resetSelected(nextItem?: CDSTab | null) {\n    const { selectorItem } = this.constructor as typeof CDSTabs;\n    forEach(this.querySelectorAll(selectorItem), (item) => {\n      (item as CDSTab)['selected'] = nextItem === item;\n    });\n  }\n\n  @HostListener('click')\n  protected _handleClick(event: MouseEvent) {\n    super._handleClick(event);\n    const currentItem = this._getCurrentItem(event.target as HTMLElement);\n    if (currentItem) {\n      this.resetHighlighted(currentItem as CDSTab);\n    }\n  }\n\n  @HostListener('keydown')\n  protected _handleKeydown(event: KeyboardEvent) {\n    const { key } = event;\n    const { selectorItemEnabled } = this.constructor as typeof CDSTabs;\n    const action = (this.constructor as typeof CDSTabs).getAction(\n      key,\n      this.vertical\n    );\n    const enabledTabs = this.querySelectorAll(selectorItemEnabled);\n    switch (action) {\n      case TABS_KEYBOARD_ACTION.HOME:\n        {\n          const [firstEnabledTab] = enabledTabs;\n          firstEnabledTab.scrollIntoView({\n            block: 'nearest',\n            inline: 'nearest',\n          });\n          if (this.selectionMode === 'manual') {\n            this.resetHighlighted(firstEnabledTab as CDSTab);\n          }\n          this._handleUserInitiatedSelectItem(\n            firstEnabledTab as CDSTab,\n            this.selectionMode !== 'manual' ? 'activation' : 'keyboard'\n          );\n          this.requestUpdate();\n        }\n        break;\n      case TABS_KEYBOARD_ACTION.END:\n        {\n          const lastEnabledTab = enabledTabs[enabledTabs.length - 1];\n          lastEnabledTab.scrollIntoView({\n            block: 'nearest',\n            inline: 'nearest',\n          });\n          if (this.selectionMode === 'manual') {\n            this.resetHighlighted(lastEnabledTab as CDSTab);\n          }\n          this._handleUserInitiatedSelectItem(\n            lastEnabledTab as CDSTab,\n            this.selectionMode !== 'manual' ? 'activation' : 'keyboard'\n          );\n          this.requestUpdate();\n        }\n        break;\n      case TABS_KEYBOARD_ACTION.NAVIGATING:\n        {\n          event.preventDefault();\n          // Get direction based on orientation\n          const direction = this.vertical\n            ? VERTICAL_NAVIGATION_DIRECTION[key]\n            : NAVIGATION_DIRECTION[key];\n          if (direction) {\n            this._navigate(direction);\n          }\n        }\n        break;\n      case TABS_KEYBOARD_ACTION.ACTIVATING:\n        {\n          const focusedTab: CDSTab | null = this.querySelector(\n            `${prefix}-tab[highlighted]`\n          );\n          if (focusedTab) {\n            this._handleUserInitiatedSelectItem(\n              focusedTab as CDSTab,\n              'activation'\n            );\n            this.requestUpdate();\n          }\n        }\n        break;\n      default:\n        break;\n    }\n  }\n\n  @HostListener('cds-custom-tab-closed')\n  protected _handleTabClosed(event: CustomEvent) {\n    const {\n      selectorItem,\n      selectorItemEnabled,\n      selectorItemSelected,\n      selectorItemHighlighted,\n    } = this.constructor as typeof CDSTabs;\n    const { index } = event.detail;\n    const allTabs = this.querySelectorAll<CDSTab>(selectorItem);\n    const enabledTabsBeforeRemoval =\n      this.querySelectorAll<CDSTab>(selectorItemEnabled);\n    const indexInEnabledTabs = Array.from(enabledTabsBeforeRemoval).indexOf(\n      allTabs[index]\n    );\n    const activeItem = this.querySelector<CDSTab>(selectorItemSelected);\n    const activeItemId = activeItem?.id;\n    const highlightedItem = this.querySelector<CDSTab>(selectorItemHighlighted);\n    const highlightedItemId = highlightedItem?.id;\n    requestAnimationFrame(() => {\n      const enabledTabs = Array.from(\n        this.querySelectorAll<CDSTab>(selectorItemEnabled)\n      );\n\n      const tabWithActiveId = enabledTabs.find(\n        (tab) => tab.id === activeItemId\n      );\n      const tabWithHighlightedId = enabledTabs.find(\n        (tab) => tab.id === highlightedItemId\n      );\n      const nextHighlightedIndex =\n        !tabWithActiveId && !tabWithHighlightedId && indexInEnabledTabs - 1 >= 0\n          ? indexInEnabledTabs - 1\n          : 0;\n      if (enabledTabs.length > 0) {\n        const nextSelectedItem = tabWithActiveId || enabledTabs[0];\n        const nextHighlightedItem =\n          tabWithHighlightedId || enabledTabs[nextHighlightedIndex];\n        this.resetSelected(nextSelectedItem);\n        this.resetHighlighted(nextHighlightedItem);\n        this.value = nextSelectedItem.value;\n\n        nextHighlightedItem.shadowRoot\n          ?.querySelector<HTMLElement>(\n            `.${prefix}--tabs__nav-link--dismissable`\n          )\n          ?.focus();\n        nextHighlightedItem.scrollIntoView({\n          block: 'nearest',\n          inline: 'nearest',\n        });\n      } else {\n        this.value = '';\n        return;\n      }\n    });\n  }\n\n  /**\n   * Handles click on overflow scroll buttons.\n   *\n   * @param _ Event object\n   * @param [options] The options.\n   * @param [options.direction] `-1` to scroll forward, `1` to scroll backward.\n   */\n  protected _handleScrollButtonClick(_, { direction }) {\n    if (!this.tablist) {\n      return;\n    }\n    const { scrollLeft, clientWidth, scrollWidth } =\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n      this._contentContainerNode!;\n    switch (direction) {\n      case -1:\n        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n        this._contentContainerNode!.scrollLeft = Math.max(\n          scrollLeft - (scrollWidth / this._totalTabs) * 1.5,\n          0\n        );\n        break;\n      case 1:\n        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n        this._contentContainerNode!.scrollLeft =\n          Math.min(\n            scrollLeft + (scrollWidth / this._totalTabs) * 1.5,\n            scrollWidth - clientWidth\n          ) + 1;\n        break;\n      default:\n        break;\n    }\n  }\n\n  private _syncSecondaryLabels() {\n    const hasSecondaryLabels = Array.from(\n      this.querySelectorAll(`${prefix}-tab`)\n    ).some((tab) => tab.hasAttribute('secondary-label'));\n    if (hasSecondaryLabels) {\n      this.setAttribute('has-secondary-labels', '');\n    } else {\n      this.removeAttribute('has-secondary-labels');\n    }\n  }\n\n  _handleSlotchange() {\n    // Call super to preserve content-switcher slot handling\n    super._handleSlotchange?.();\n    const { selectorItemSelected } = this.constructor as typeof CDSTabs;\n    const selectedItem = this.querySelector(selectorItemSelected);\n    const nextItem = this._getNextItem(selectedItem as CDSTab, 1);\n\n    // Specifies child `<cds-custom-tab>` to hide its divider instead of using CSS,\n    // until `:host-context()` gets supported in all major browsers\n    if (nextItem) {\n      (nextItem as CDSTab).hideDivider = true;\n    }\n\n    // Set vertical attribute on all tabs if this tabs component is vertical\n    this._updateTabsVerticalAttribute();\n    this._syncSecondaryLabels();\n    this._updateTabsState();\n    this._syncSizeToTabs();\n  }\n\n  /**\n   * Updates the vertical attribute on all child tabs based on the vertical property.\n   */\n  private _updateTabsVerticalAttribute() {\n    const { selectorItem } = this.constructor as typeof CDSTabs;\n    forEach(this.querySelectorAll(selectorItem), (tab) => {\n      if (this.vertical) {\n        (tab as CDSTab).setAttribute('vertical', '');\n      } else {\n        (tab as CDSTab).removeAttribute('vertical');\n      }\n    });\n  }\n\n  protected _selectionDidChange(\n    itemToSelect: CDSTab,\n    interactionType?: 'mouse' | 'keyboard' | undefined\n  ) {\n    super._selectionDidChange(itemToSelect, interactionType);\n    this._assistiveStatusText = this.selectedItemAssistiveText;\n  }\n\n  /**\n   * The scrolling container.\n   */\n  @query(`.${prefix}--tabs-nav-content-container`)\n  private _contentContainerNode?: HTMLElement;\n\n  /**\n   * The scrolling content.\n   */\n  @query(`.${prefix}--tabs-nav-content`)\n  private _contentNode?: HTMLElement;\n\n  /**\n   * The current scroll position.\n   */\n  @state()\n  private _currentScrollPosition = 0;\n\n  /**\n   * The left-hand sentinel to track intersection with the host element.\n   * If they intersect, the left-hand paginator button should be hidden.\n   */\n  @query(`.${prefix}--sub-content-left`)\n  private _intersectionLeftSentinelNode?: HTMLElement;\n\n  /**\n   * The right-hand sentinel to track intersection with the host element.\n   * If they intersect, the right-hand paginator button should be hidden.\n   */\n  @query(`.${prefix}--sub-content-right`)\n  private _intersectionRightSentinelNode?: HTMLElement;\n\n  /**\n   * An assistive text for screen reader to announce, telling the open state.\n   */\n  @property({ attribute: 'selecting-items-assistive-text' })\n  selectingItemsAssistiveText =\n    'Selecting items. Use up and down arrow keys to navigate.';\n\n  /**\n   * An assistive text for screen reader to announce, telling that an item is selected.\n   */\n  @property({ attribute: 'selected-item-assistive-text' })\n  selectedItemAssistiveText = 'Selected an item.';\n\n  /**\n   * The content of the trigger button for narrow mode.\n   */\n  @property({ attribute: 'trigger-content' })\n  triggerContent = '';\n\n  /**\n   * Tabs type.\n   */\n  @property({ reflect: true })\n  type = TABS_TYPE.REGULAR;\n\n  /**\n   * `true` if the tabs are in vertical orientation.\n   * This is automatically set by `cds-custom-tabs-vertical`.\n   */\n  @property({ type: Boolean })\n  vertical = false;\n  /**\n   * Whether the rendered Tab children should be dismissable.\n   */\n  @property({ type: Boolean, reflect: true })\n  dismissable;\n\n  /**\n   * Specify the icon size used by icon-only tabs.\n   */\n  @property({ attribute: 'icon-size', reflect: true })\n  iconSize?: TABS_ICON_SIZE;\n\n  /**\n   * Used for tabs within a grid, this makes it so tabs span the full container width and have the same width. Only available on contained tabs with <9 children\n   */\n  @property({ type: Boolean, attribute: 'full-width', reflect: true })\n  fullWidth = false;\n\n  /**\n   * `true` if left-hand scroll intersection sentinel intersects with the host element.\n   * In this condition, the left-hand paginator button should be hidden.\n   */\n  @state()\n  private _isIntersectionLeftTrackerInContent = true;\n\n  /**\n   * `true` if right-hand scroll intersection sentinel intersects with the host element.\n   * In this condition, the right-hand paginator button should be hidden.\n   */\n  @state()\n  private _isIntersectionRightTrackerInContent = true;\n\n  /**\n   * The observer for the intersection of left-side content edge.\n   */\n  private _observerIntersection: IntersectionObserver | null = null;\n\n  /**\n   * The intersection observer callback for the scrolling container.\n   *\n   * @param records The intersection observer records.\n   */\n  private _observeIntersectionContainer = (records) => {\n    const {\n      _intersectionLeftSentinelNode: intersectionLeftSentinelNode,\n      _intersectionRightSentinelNode: intersectionRightSentinelNode,\n    } = this;\n\n    records.forEach(({ isIntersecting, target }) => {\n      if (target === intersectionLeftSentinelNode) {\n        this._isIntersectionLeftTrackerInContent = isIntersecting;\n      }\n      if (target === intersectionRightSentinelNode) {\n        this._isIntersectionRightTrackerInContent = isIntersecting;\n      }\n    });\n  };\n\n  /**\n   * Cleans-up and creates the intersection observer for the scrolling container.\n   *\n   * @param [options] The options.\n   * @param [options.create] `true` to create the new intersection observer.\n   */\n  private _cleanAndCreateIntersectionObserverContainer({\n    create,\n  }: { create?: boolean } = {}) {\n    const {\n      _intersectionLeftSentinelNode: intersectionLeftSentinelNode,\n      _intersectionRightSentinelNode: intersectionRightSentinelNode,\n    } = this;\n\n    if (this._observerIntersection) {\n      this._observerIntersection.disconnect();\n      this._observerIntersection = null;\n    }\n\n    if (create) {\n      this._observerIntersection = new IntersectionObserver(\n        this._observeIntersectionContainer,\n        {\n          root: this,\n          threshold: 0,\n        }\n      );\n\n      if (intersectionLeftSentinelNode) {\n        this._observerIntersection.observe(intersectionLeftSentinelNode);\n      }\n      if (intersectionRightSentinelNode) {\n        this._observerIntersection.observe(intersectionRightSentinelNode);\n      }\n    }\n  }\n\n  disconnectedCallback() {\n    this._cleanAndCreateIntersectionObserverContainer();\n    super.disconnectedCallback();\n  }\n\n  shouldUpdate(changedProperties) {\n    super.shouldUpdate(changedProperties);\n    if (this.tablist) {\n      const { clientWidth, scrollWidth } = this.tablist;\n      this._isScrollable = scrollWidth > clientWidth;\n    }\n    const { selectorItem } = this.constructor as typeof CDSTabs;\n    if (\n      changedProperties.has('type') ||\n      changedProperties.has('iconSize') ||\n      changedProperties.has('size')\n    ) {\n      this._totalTabs = 0;\n      forEach(this.querySelectorAll(selectorItem), (elem) => {\n        this._totalTabs++;\n        (elem as CDSTab).type = this.type;\n        (elem as CDSTab).iconSize = this.iconSize;\n      });\n    }\n    return true;\n  }\n\n  firstUpdated() {\n    // Call super to run content-switcher init logic (initial selection)\n    super.firstUpdated();\n    this._tabInitialLoad();\n    this._cleanAndCreateIntersectionObserverContainer({ create: true });\n    this._syncSecondaryLabels();\n    this._syncSizeToTabs();\n  }\n\n  updated(changedProperties) {\n    // Call super to keep selection/value in sync\n    super.updated?.(changedProperties);\n    if (changedProperties.has('size') || changedProperties.has('type')) {\n      this._syncSizeToTabs();\n    }\n\n    if (changedProperties.has('vertical')) {\n      this._updateTabsVerticalAttribute();\n    }\n\n    if (changedProperties.has('value')) {\n      const tab = this.querySelector(\n        `${prefix}-tab[value=\"${this.value}\"]`\n      ) as HTMLElement;\n      if (tab) {\n        const { width: tabWidth } = tab?.getBoundingClientRect() ?? {};\n        const start = tab.offsetLeft ?? 0;\n        const end = tab.offsetLeft + tabWidth;\n\n        // The start and end of the visible area of the tablist\n        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n        const visibleStart = this.tablist!.scrollLeft + this.BUTTON_WIDTH;\n        const visibleEnd =\n          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n          this.tablist!.scrollLeft +\n          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n          this.tablist!.clientWidth -\n          this.BUTTON_WIDTH;\n\n        // The beginning of the tab is clipped and not visible\n        if (start < visibleStart) {\n          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n          this.tablist!.scrollLeft = start - this.BUTTON_WIDTH;\n        }\n\n        // The end of the tab is clipped and not visible\n        if (end > visibleEnd) {\n          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n          this.tablist!.scrollLeft =\n            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n            end + this.BUTTON_WIDTH - this.tablist!.clientWidth;\n        }\n      }\n    }\n\n    if (changedProperties.has('_currentScrollPosition')) {\n      if (this._contentNode) {\n        this._contentNode.style.insetInlineStart = `-${this._currentScrollPosition}px`;\n      }\n    }\n\n    if (changedProperties.has('dismissable')) {\n      this._updateTabsState();\n    }\n  }\n\n  /**\n   * Render the previous button if tablist is wider than container.\n   */\n  protected renderPreviousButton(): TemplateResult | null {\n    const {\n      _isIntersectionLeftTrackerInContent: isIntersectionLeftTrackerInContent,\n    } = this;\n    const previousButtonClasses = classMap({\n      [`${prefix}--tab--overflow-nav-button`]: true,\n      [`${prefix}--tabs__nav-caret-left`]: true,\n      [`${prefix}--tab--overflow-nav-button--previous`]: true,\n      [`${prefix}--tab--overflow-nav-button--hidden`]:\n        isIntersectionLeftTrackerInContent,\n    });\n    return html`\n      <button\n        part=\"prev-button\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        class=\"${previousButtonClasses}\"\n        @click=${(_) =>\n          this._handleScrollButtonClick(_, {\n            direction: NAVIGATION_DIRECTION.Left,\n          })}>\n        ${iconLoader(ChevronLeft16)}\n      </button>\n    `;\n  }\n\n  /**\n   * Render the next button if tablist is wider than container.\n   */\n  protected renderNextButton(): TemplateResult | null {\n    const {\n      _isIntersectionRightTrackerInContent: isIntersectionRightTrackerInContent,\n    } = this;\n    const nextButtonClasses = classMap({\n      [`${prefix}--tab--overflow-nav-button`]: true,\n      [`${prefix}--tabs__nav-caret-right`]: true,\n      [`${prefix}--tab--overflow-nav-button--next`]: true,\n      [`${prefix}--tab--overflow-nav-button--hidden`]:\n        isIntersectionRightTrackerInContent,\n    });\n    return html`\n      <button\n        part=\"next-button\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        class=\"${nextButtonClasses}\"\n        @click=${(_) =>\n          this._handleScrollButtonClick(_, {\n            direction: NAVIGATION_DIRECTION.Right,\n          })}>\n        ${iconLoader(ChevronRight16)}\n      </button>\n    `;\n  }\n\n  render() {\n    const {\n      _assistiveStatusText: assistiveStatusText,\n      _handleSlotchange: handleSlotchange,\n    } = this;\n\n    return html`\n      ${this.renderPreviousButton()}\n      <div class=\"${prefix}--tabs-nav-content-container\">\n        <div class=\"${prefix}--tabs-nav-content\">\n          <div class=\"${prefix}--tabs-nav\">\n            <div id=\"tablist\" role=\"tablist\" class=\"${prefix}--tab--list\">\n              <div class=\"${prefix}--sub-content-left\"></div>\n              <slot @slotchange=${handleSlotchange}></slot>\n              <div class=\"${prefix}--sub-content-right\"></div>\n            </div>\n          </div>\n        </div>\n      </div>\n      ${this.renderNextButton()}\n      <div\n        class=\"${prefix}--assistive-text\"\n        role=\"status\"\n        aria-live=\"assertive\"\n        aria-relevant=\"additions text\">\n        ${assistiveStatusText}\n      </div>\n    `;\n  }\n\n  protected _updateTabsState() {\n    const { selectorItem } = this.constructor as typeof CDSTabs;\n    const tabs = this.querySelectorAll<CDSTab>(selectorItem);\n    tabs.forEach((tab, index) => {\n      tab._dismissable = this.dismissable;\n      tab._index = index;\n    });\n  }\n\n  protected _tabInitialLoad() {\n    const { selectorTablist, selectorItemEnabled } = this\n      .constructor as typeof CDSTabs;\n    const { selectionMode, selectedIndex } = this;\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n    const tablist = this.shadowRoot!.querySelector(selectorTablist)!;\n    this.tablist = tablist;\n    const firstItem =\n      this.querySelectorAll<CDSTab>(selectorItemEnabled)[selectedIndex];\n    if (firstItem) {\n      if (selectionMode === 'manual') {\n        firstItem.highlighted = true;\n      }\n      firstItem.selected = true;\n      this.value = firstItem.value;\n    }\n  }\n  /**\n   * Symbols of keys that triggers opening/closing menu and selecting/deselecting menu item.\n   */\n  static TRIGGER_KEYS = new Set([' ', 'Enter']);\n\n  /**\n   * A selector that will return tabs.\n   */\n  static get selectorItem() {\n    return `${prefix}-tab`;\n  }\n\n  /**\n   * A selector that will return enabled tabs.\n   */\n  static get selectorItemEnabled() {\n    return `${prefix}-tab:not([disabled])`;\n  }\n\n  /**\n   * A selector that will return highlighted tabs.\n   */\n  static get selectorItemHighlighted() {\n    return `${prefix}-tab[highlighted]`;\n  }\n\n  /**\n   * A selector that will return selected tabs.\n   */\n  static get selectorItemSelected() {\n    return `${prefix}-tab[selected]`;\n  }\n\n  /**\n   * A selector that returns the tablist\n   */\n  static get selectorTablist() {\n    return `.${prefix}--tab--list`;\n  }\n\n  /**\n   * The name of the custom event fired before a tab is selected upon a user gesture.\n   * Cancellation of this event stops changing the user-initiated selection.\n   */\n  static get eventBeforeSelect() {\n    return `${prefix}-tabs-beingselected`;\n  }\n\n  /**\n   * The name of the custom event fired after a a tab is selected upon a user gesture.\n   */\n  static get eventSelect() {\n    return `${prefix}-tabs-selected`;\n  }\n\n  static styles = styles;\n\n  /**\n   * @param key The key symbol.\n   * @param isVertical Whether the tabs are in vertical orientation.\n   * @returns A action for tabs for the given key symbol.\n   */\n  static getAction(key: string, isVertical = false) {\n    if (key === 'Home') {\n      return TABS_KEYBOARD_ACTION.HOME;\n    }\n    if (key === 'End') {\n      return TABS_KEYBOARD_ACTION.END;\n    }\n    // Check for navigation keys based on orientation\n    const navigationKeys = isVertical\n      ? VERTICAL_NAVIGATION_DIRECTION\n      : NAVIGATION_DIRECTION;\n    if (key in navigationKeys) {\n      return TABS_KEYBOARD_ACTION.NAVIGATING;\n    }\n    if (key === 'Enter' || key === ' ') {\n      return TABS_KEYBOARD_ACTION.ACTIVATING;\n    }\n    return TABS_KEYBOARD_ACTION.NONE;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"tabs.js","names":["CDSContentSwitcher","styles","customElement"],"sources":["../../../src/components/tabs/tabs.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 { TemplateResult, html } from 'lit';\nimport { property, state, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { prefix } from '../../globals/settings';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport HostListener from '../../globals/decorators/host-listener';\nimport { forEach } from '../../globals/internal/collection-helpers';\nimport ChevronLeft16 from '@carbon/icons/es/chevron--left/16.js';\nimport ChevronRight16 from '@carbon/icons/es/chevron--right/16.js';\nimport CDSContentSwitcher, {\n  NAVIGATION_DIRECTION,\n} from '../content-switcher/content-switcher';\nimport {\n  VERTICAL_NAVIGATION_DIRECTION,\n  TABS_ICON_SIZE,\n  TABS_KEYBOARD_ACTION,\n  TABS_TYPE,\n  TABS_SIZE,\n} from './defs';\nimport CDSTab from './tab';\nimport styles from './tabs.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport {\n  NAVIGATION_DIRECTION,\n  VERTICAL_NAVIGATION_DIRECTION,\n  TABS_ICON_SIZE,\n  TABS_KEYBOARD_ACTION,\n  TABS_TYPE,\n  TABS_SIZE,\n};\n\n/**\n * Tabs.\n *\n * @element cds-custom-tabs\n * @fires cds-custom-tabs-beingselected\n *   The custom event fired before a tab is selected upon a user gesture.\n *   Cancellation of this event stops changing the user-initiated selection.\n * @fires cds-custom-tabs-selected - The custom event fired after a a tab is selected upon a user gesture.\n */\n@customElement(`${prefix}-tabs`)\nexport default class CDSTabs extends HostListenerMixin(CDSContentSwitcher) {\n  /**\n   * The latest status of this dropdown, for screen reader to accounce.\n   */\n  private _assistiveStatusText?: string;\n\n  /**\n   * The currently selected index\n   */\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: TS thinks this method is not referred to\n  private _currentIndex = 0;\n\n  /**\n   * Total number of tabs in the component\n   */\n  private _totalTabs = 0;\n\n  /**\n   * `true` if the tablist is scrollable\n   */\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: TS thinks this method is not referred to\n  private _isScrollable = false;\n\n  /**\n   * The DOM element for the tablist.\n   */\n  private tablist: Element | null = null;\n\n  /**\n   * The width of the overflow scroll buttons.\n   */\n  private BUTTON_WIDTH = 44;\n\n  /**\n   * Propagates the layout size token to the host and all child tabs.\n   */\n  private _syncSizeToTabs() {\n    if (this.type === TABS_TYPE.CONTAINED || this.vertical) {\n      const rawSize = this.getAttribute('size') as TABS_SIZE | null;\n      const size =\n        rawSize === TABS_SIZE.EXTRA_LARGE && !this.vertical\n          ? TABS_SIZE.LARGE\n          : rawSize;\n\n      if (size) {\n        const value = `var(--${prefix}-layout-size-height-${size})`;\n        this.style.setProperty(`--${prefix}-layout-size-height`, value);\n        this.querySelectorAll(`${prefix}-tab`).forEach((tab) => {\n          (tab as HTMLElement).style.setProperty(\n            `--${prefix}-layout-size-height`,\n            value\n          );\n        });\n      } else {\n        this.style.removeProperty(`--${prefix}-layout-size-height`);\n        this.querySelectorAll(`${prefix}-tab`).forEach((tab) => {\n          (tab as HTMLElement).style.removeProperty(\n            `--${prefix}-layout-size-height`\n          );\n        });\n      }\n    }\n  }\n\n  /**\n   * Navigates through tabs.\n   *\n   * @param direction `-1` to navigate backward, `1` to navigate forward.\n   * @param [options] The options.\n   * @param [options.immediate]\n   *   Defaults to `true`\n   *   `true` to make it \"immediate selection change\" mode, which does:\n   *\n   *   Starts with the selected item\n   *   Going prev/next item immediately changes the selection\n   */\n  protected _navigate(direction: number) {\n    const immediate = this.selectionMode === 'automatic';\n    const { selectorItemHighlighted, selectorItemSelected } = this\n      .constructor as typeof CDSTabs;\n    const nextItem = this._getNextItem(\n      this.querySelector(\n        immediate ? selectorItemSelected : selectorItemHighlighted\n      ) as CDSTab,\n      direction\n    );\n    if (!nextItem) {\n      return;\n    }\n    this._handleUserInitiatedSelectItem(nextItem as CDSTab, 'keyboard');\n    if (!immediate) {\n      this.resetHighlighted(nextItem as CDSTab);\n    }\n\n    // Using `{ block: 'nearest' }` to prevent scrolling unless scrolling is absolutely necessary.\n    // `scrollIntoViewOptions` seems to work in latest Safari despite of MDN/caniuse table.\n    // IE falls back to the old behavior.\n    nextItem.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n\n    const nextItemText = nextItem.textContent;\n    if (nextItemText) {\n      this._assistiveStatusText = nextItemText;\n    }\n    this._currentIndex += direction;\n    this.requestUpdate();\n  }\n\n  /**\n   * Resets the highlighted state of all tabs, setting only the specified tab as highlighted.\n   *\n   * @param nextItem The tab item to be highlighted. If provided, only this item will be highlighted.\n   *   If null or undefined, all tabs will have their highlighted state set to false.\n   */\n  protected resetHighlighted(nextItem?: CDSTab | null) {\n    const { selectorItem } = this.constructor as typeof CDSTabs;\n    forEach(this.querySelectorAll(selectorItem), (item) => {\n      (item as CDSTab)['highlighted'] = nextItem === item;\n    });\n  }\n\n  /**\n   * Resets the selected state of all tabs, setting only the specified tab as selected.\n   *\n   * @param nextItem The tab item to be selected. If provided, only this item will be selected.\n   *   If null or undefined, all tabs will have their selected state set to false.\n   */\n  protected resetSelected(nextItem?: CDSTab | null) {\n    const { selectorItem } = this.constructor as typeof CDSTabs;\n    forEach(this.querySelectorAll(selectorItem), (item) => {\n      (item as CDSTab)['selected'] = nextItem === item;\n    });\n  }\n\n  @HostListener('click')\n  protected _handleClick(event: MouseEvent) {\n    super._handleClick(event);\n    const currentItem = this._getCurrentItem(event.target as HTMLElement);\n    if (currentItem) {\n      this.resetHighlighted(currentItem as CDSTab);\n    }\n  }\n\n  @HostListener('keydown')\n  protected _handleKeydown(event: KeyboardEvent) {\n    const { key } = event;\n    const { selectorItemEnabled } = this.constructor as typeof CDSTabs;\n    const action = (this.constructor as typeof CDSTabs).getAction(\n      key,\n      this.vertical\n    );\n    const enabledTabs = this.querySelectorAll(selectorItemEnabled);\n    switch (action) {\n      case TABS_KEYBOARD_ACTION.HOME:\n        {\n          const [firstEnabledTab] = enabledTabs;\n          firstEnabledTab.scrollIntoView({\n            block: 'nearest',\n            inline: 'nearest',\n          });\n          if (this.selectionMode === 'manual') {\n            this.resetHighlighted(firstEnabledTab as CDSTab);\n          }\n          this._handleUserInitiatedSelectItem(\n            firstEnabledTab as CDSTab,\n            this.selectionMode !== 'manual' ? 'activation' : 'keyboard'\n          );\n          this.requestUpdate();\n        }\n        break;\n      case TABS_KEYBOARD_ACTION.END:\n        {\n          const lastEnabledTab = enabledTabs[enabledTabs.length - 1];\n          lastEnabledTab.scrollIntoView({\n            block: 'nearest',\n            inline: 'nearest',\n          });\n          if (this.selectionMode === 'manual') {\n            this.resetHighlighted(lastEnabledTab as CDSTab);\n          }\n          this._handleUserInitiatedSelectItem(\n            lastEnabledTab as CDSTab,\n            this.selectionMode !== 'manual' ? 'activation' : 'keyboard'\n          );\n          this.requestUpdate();\n        }\n        break;\n      case TABS_KEYBOARD_ACTION.NAVIGATING:\n        {\n          event.preventDefault();\n          // Get direction based on orientation\n          const direction = this.vertical\n            ? VERTICAL_NAVIGATION_DIRECTION[key]\n            : NAVIGATION_DIRECTION[key];\n          if (direction) {\n            this._navigate(direction);\n          }\n        }\n        break;\n      case TABS_KEYBOARD_ACTION.ACTIVATING:\n        {\n          const focusedTab: CDSTab | null = this.querySelector(\n            `${prefix}-tab[highlighted]`\n          );\n          if (focusedTab) {\n            this._handleUserInitiatedSelectItem(\n              focusedTab as CDSTab,\n              'activation'\n            );\n            this.requestUpdate();\n          }\n        }\n        break;\n      default:\n        break;\n    }\n  }\n\n  @HostListener('cds-custom-tab-closed')\n  protected _handleTabClosed(event: CustomEvent) {\n    const {\n      selectorItem,\n      selectorItemEnabled,\n      selectorItemSelected,\n      selectorItemHighlighted,\n    } = this.constructor as typeof CDSTabs;\n    const { index } = event.detail;\n    const allTabs = this.querySelectorAll<CDSTab>(selectorItem);\n    const enabledTabsBeforeRemoval =\n      this.querySelectorAll<CDSTab>(selectorItemEnabled);\n    const indexInEnabledTabs = Array.from(enabledTabsBeforeRemoval).indexOf(\n      allTabs[index]\n    );\n    const activeItem = this.querySelector<CDSTab>(selectorItemSelected);\n    const activeItemId = activeItem?.id;\n    const highlightedItem = this.querySelector<CDSTab>(selectorItemHighlighted);\n    const highlightedItemId = highlightedItem?.id;\n    requestAnimationFrame(() => {\n      const enabledTabs = Array.from(\n        this.querySelectorAll<CDSTab>(selectorItemEnabled)\n      );\n\n      const tabWithActiveId = enabledTabs.find(\n        (tab) => tab.id === activeItemId\n      );\n      const tabWithHighlightedId = enabledTabs.find(\n        (tab) => tab.id === highlightedItemId\n      );\n      const nextHighlightedIndex =\n        !tabWithActiveId && !tabWithHighlightedId && indexInEnabledTabs - 1 >= 0\n          ? indexInEnabledTabs - 1\n          : 0;\n      if (enabledTabs.length > 0) {\n        const nextSelectedItem = tabWithActiveId || enabledTabs[0];\n        const nextHighlightedItem =\n          tabWithHighlightedId || enabledTabs[nextHighlightedIndex];\n        this.resetSelected(nextSelectedItem);\n        this.resetHighlighted(nextHighlightedItem);\n        this.value = nextSelectedItem.value;\n\n        nextHighlightedItem.shadowRoot\n          ?.querySelector<HTMLElement>(\n            `.${prefix}--tabs__nav-link--dismissable`\n          )\n          ?.focus();\n        nextHighlightedItem.scrollIntoView({\n          block: 'nearest',\n          inline: 'nearest',\n        });\n      } else {\n        this.value = '';\n        return;\n      }\n    });\n  }\n\n  /**\n   * Handles click on overflow scroll buttons.\n   *\n   * @param _ Event object\n   * @param [options] The options.\n   * @param [options.direction] `-1` to scroll forward, `1` to scroll backward.\n   */\n  protected _handleScrollButtonClick(_, { direction }) {\n    if (!this.tablist) {\n      return;\n    }\n    const { scrollLeft, clientWidth, scrollWidth } =\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n      this._contentContainerNode!;\n    switch (direction) {\n      case -1:\n        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n        this._contentContainerNode!.scrollLeft = Math.max(\n          scrollLeft - (scrollWidth / this._totalTabs) * 1.5,\n          0\n        );\n        break;\n      case 1:\n        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n        this._contentContainerNode!.scrollLeft =\n          Math.min(\n            scrollLeft + (scrollWidth / this._totalTabs) * 1.5,\n            scrollWidth - clientWidth\n          ) + 1;\n        break;\n      default:\n        break;\n    }\n  }\n\n  private _syncSecondaryLabels() {\n    const hasSecondaryLabels = Array.from(\n      this.querySelectorAll(`${prefix}-tab`)\n    ).some((tab) => tab.hasAttribute('secondary-label'));\n    if (hasSecondaryLabels) {\n      this.setAttribute('has-secondary-labels', '');\n    } else {\n      this.removeAttribute('has-secondary-labels');\n    }\n  }\n\n  _handleSlotchange() {\n    // Call super to preserve content-switcher slot handling\n    super._handleSlotchange?.();\n    const { selectorItemSelected } = this.constructor as typeof CDSTabs;\n    const selectedItem = this.querySelector(selectorItemSelected);\n    const nextItem = this._getNextItem(selectedItem as CDSTab, 1);\n\n    // Specifies child `<cds-custom-tab>` to hide its divider instead of using CSS,\n    // until `:host-context()` gets supported in all major browsers\n    if (nextItem) {\n      (nextItem as CDSTab).hideDivider = true;\n    }\n\n    // Set vertical attribute on all tabs if this tabs component is vertical\n    this._updateTabsVerticalAttribute();\n    this._syncSecondaryLabels();\n    this._updateTabsState();\n    this._syncSizeToTabs();\n  }\n\n  /**\n   * Updates the vertical attribute on all child tabs based on the vertical property.\n   */\n  private _updateTabsVerticalAttribute() {\n    const { selectorItem } = this.constructor as typeof CDSTabs;\n    forEach(this.querySelectorAll(selectorItem), (tab) => {\n      if (this.vertical) {\n        (tab as CDSTab).setAttribute('vertical', '');\n      } else {\n        (tab as CDSTab).removeAttribute('vertical');\n      }\n    });\n  }\n\n  protected _selectionDidChange(\n    itemToSelect: CDSTab,\n    interactionType?: 'mouse' | 'keyboard' | undefined\n  ) {\n    super._selectionDidChange(itemToSelect, interactionType);\n    this._assistiveStatusText = this.selectedItemAssistiveText;\n  }\n\n  /**\n   * The scrolling container.\n   */\n  @query(`.${prefix}--tabs-nav-content-container`)\n  private _contentContainerNode?: HTMLElement;\n\n  /**\n   * The scrolling content.\n   */\n  @query(`.${prefix}--tabs-nav-content`)\n  private _contentNode?: HTMLElement;\n\n  /**\n   * The current scroll position.\n   */\n  @state()\n  private _currentScrollPosition = 0;\n\n  /**\n   * The left-hand sentinel to track intersection with the host element.\n   * If they intersect, the left-hand paginator button should be hidden.\n   */\n  @query(`.${prefix}--sub-content-left`)\n  private _intersectionLeftSentinelNode?: HTMLElement;\n\n  /**\n   * The right-hand sentinel to track intersection with the host element.\n   * If they intersect, the right-hand paginator button should be hidden.\n   */\n  @query(`.${prefix}--sub-content-right`)\n  private _intersectionRightSentinelNode?: HTMLElement;\n\n  /**\n   * An assistive text for screen reader to announce, telling the open state.\n   */\n  @property({ attribute: 'selecting-items-assistive-text' })\n  selectingItemsAssistiveText =\n    'Selecting items. Use up and down arrow keys to navigate.';\n\n  /**\n   * An assistive text for screen reader to announce, telling that an item is selected.\n   */\n  @property({ attribute: 'selected-item-assistive-text' })\n  selectedItemAssistiveText = 'Selected an item.';\n\n  /**\n   * The content of the trigger button for narrow mode.\n   */\n  @property({ attribute: 'trigger-content' })\n  triggerContent = '';\n\n  /**\n   * Tabs type.\n   */\n  @property({ reflect: true })\n  type = TABS_TYPE.REGULAR;\n\n  /**\n   * `true` if the tabs are in vertical orientation.\n   * This is automatically set by `cds-custom-tabs-vertical`.\n   */\n  @property({ type: Boolean })\n  vertical = false;\n  /**\n   * Whether the rendered Tab children should be dismissable.\n   */\n  @property({ type: Boolean, reflect: true })\n  dismissable;\n\n  /**\n   * Specify the size of the tabs.\n   *\n   * Supports `sm` and `md` for line tabs.\n   * Supports `sm`, `md`, and `lg` for contained tabs.\n   * Supports `xl` only when `vertical` is set; otherwise `xl` falls back to `lg`.\n   */\n  @property({ reflect: true })\n  // @ts-expect-error - TABS_SIZE extends CONTENT_SWITCHER_SIZE with additional 'md' value\n  declare size: TABS_SIZE;\n\n  /**\n   * Specify the icon size used by icon-only tabs.\n   */\n  @property({ attribute: 'icon-size', reflect: true })\n  iconSize?: TABS_ICON_SIZE;\n\n  /**\n   * Used for tabs within a grid, this makes it so tabs span the full container width and have the same width. Only available on contained tabs with <9 children\n   */\n  @property({ type: Boolean, attribute: 'full-width', reflect: true })\n  fullWidth = false;\n\n  /**\n   * `true` if left-hand scroll intersection sentinel intersects with the host element.\n   * In this condition, the left-hand paginator button should be hidden.\n   */\n  @state()\n  private _isIntersectionLeftTrackerInContent = true;\n\n  /**\n   * `true` if right-hand scroll intersection sentinel intersects with the host element.\n   * In this condition, the right-hand paginator button should be hidden.\n   */\n  @state()\n  private _isIntersectionRightTrackerInContent = true;\n\n  /**\n   * The observer for the intersection of left-side content edge.\n   */\n  private _observerIntersection: IntersectionObserver | null = null;\n\n  /**\n   * The intersection observer callback for the scrolling container.\n   *\n   * @param records The intersection observer records.\n   */\n  private _observeIntersectionContainer = (records) => {\n    const {\n      _intersectionLeftSentinelNode: intersectionLeftSentinelNode,\n      _intersectionRightSentinelNode: intersectionRightSentinelNode,\n    } = this;\n\n    records.forEach(({ isIntersecting, target }) => {\n      if (target === intersectionLeftSentinelNode) {\n        this._isIntersectionLeftTrackerInContent = isIntersecting;\n      }\n      if (target === intersectionRightSentinelNode) {\n        this._isIntersectionRightTrackerInContent = isIntersecting;\n      }\n    });\n  };\n\n  /**\n   * Cleans-up and creates the intersection observer for the scrolling container.\n   *\n   * @param [options] The options.\n   * @param [options.create] `true` to create the new intersection observer.\n   */\n  private _cleanAndCreateIntersectionObserverContainer({\n    create,\n  }: { create?: boolean } = {}) {\n    const {\n      _intersectionLeftSentinelNode: intersectionLeftSentinelNode,\n      _intersectionRightSentinelNode: intersectionRightSentinelNode,\n    } = this;\n\n    if (this._observerIntersection) {\n      this._observerIntersection.disconnect();\n      this._observerIntersection = null;\n    }\n\n    if (create) {\n      this._observerIntersection = new IntersectionObserver(\n        this._observeIntersectionContainer,\n        {\n          root: this,\n          threshold: 0,\n        }\n      );\n\n      if (intersectionLeftSentinelNode) {\n        this._observerIntersection.observe(intersectionLeftSentinelNode);\n      }\n      if (intersectionRightSentinelNode) {\n        this._observerIntersection.observe(intersectionRightSentinelNode);\n      }\n    }\n  }\n\n  disconnectedCallback() {\n    this._cleanAndCreateIntersectionObserverContainer();\n    super.disconnectedCallback();\n  }\n\n  shouldUpdate(changedProperties) {\n    super.shouldUpdate(changedProperties);\n    if (this.tablist) {\n      const { clientWidth, scrollWidth } = this.tablist;\n      this._isScrollable = scrollWidth > clientWidth;\n    }\n    const { selectorItem } = this.constructor as typeof CDSTabs;\n    if (\n      changedProperties.has('type') ||\n      changedProperties.has('iconSize') ||\n      changedProperties.has('size')\n    ) {\n      this._totalTabs = 0;\n      forEach(this.querySelectorAll(selectorItem), (elem) => {\n        this._totalTabs++;\n        (elem as CDSTab).type = this.type;\n        (elem as CDSTab).iconSize = this.iconSize;\n      });\n    }\n    return true;\n  }\n\n  firstUpdated() {\n    // Call super to run content-switcher init logic (initial selection)\n    super.firstUpdated();\n    this._tabInitialLoad();\n    this._cleanAndCreateIntersectionObserverContainer({ create: true });\n    this._syncSecondaryLabels();\n    this._syncSizeToTabs();\n  }\n\n  updated(changedProperties) {\n    // Call super to keep selection/value in sync\n    super.updated?.(changedProperties);\n    if (changedProperties.has('size') || changedProperties.has('type')) {\n      this._syncSizeToTabs();\n    }\n\n    if (changedProperties.has('vertical')) {\n      this._updateTabsVerticalAttribute();\n    }\n\n    if (changedProperties.has('value')) {\n      const tab = this.querySelector(\n        `${prefix}-tab[value=\"${this.value}\"]`\n      ) as HTMLElement;\n      if (tab) {\n        const { width: tabWidth } = tab?.getBoundingClientRect() ?? {};\n        const start = tab.offsetLeft ?? 0;\n        const end = tab.offsetLeft + tabWidth;\n\n        // The start and end of the visible area of the tablist\n        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n        const visibleStart = this.tablist!.scrollLeft + this.BUTTON_WIDTH;\n        const visibleEnd =\n          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n          this.tablist!.scrollLeft +\n          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n          this.tablist!.clientWidth -\n          this.BUTTON_WIDTH;\n\n        // The beginning of the tab is clipped and not visible\n        if (start < visibleStart) {\n          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n          this.tablist!.scrollLeft = start - this.BUTTON_WIDTH;\n        }\n\n        // The end of the tab is clipped and not visible\n        if (end > visibleEnd) {\n          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n          this.tablist!.scrollLeft =\n            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n            end + this.BUTTON_WIDTH - this.tablist!.clientWidth;\n        }\n      }\n    }\n\n    if (changedProperties.has('_currentScrollPosition')) {\n      if (this._contentNode) {\n        this._contentNode.style.insetInlineStart = `-${this._currentScrollPosition}px`;\n      }\n    }\n\n    if (changedProperties.has('dismissable')) {\n      this._updateTabsState();\n    }\n  }\n\n  /**\n   * Render the previous button if tablist is wider than container.\n   */\n  protected renderPreviousButton(): TemplateResult | null {\n    const {\n      _isIntersectionLeftTrackerInContent: isIntersectionLeftTrackerInContent,\n    } = this;\n    const previousButtonClasses = classMap({\n      [`${prefix}--tab--overflow-nav-button`]: true,\n      [`${prefix}--tabs__nav-caret-left`]: true,\n      [`${prefix}--tab--overflow-nav-button--previous`]: true,\n      [`${prefix}--tab--overflow-nav-button--hidden`]:\n        isIntersectionLeftTrackerInContent,\n    });\n    return html`\n      <button\n        part=\"prev-button\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        class=\"${previousButtonClasses}\"\n        @click=${(_) =>\n          this._handleScrollButtonClick(_, {\n            direction: NAVIGATION_DIRECTION.Left,\n          })}>\n        ${iconLoader(ChevronLeft16)}\n      </button>\n    `;\n  }\n\n  /**\n   * Render the next button if tablist is wider than container.\n   */\n  protected renderNextButton(): TemplateResult | null {\n    const {\n      _isIntersectionRightTrackerInContent: isIntersectionRightTrackerInContent,\n    } = this;\n    const nextButtonClasses = classMap({\n      [`${prefix}--tab--overflow-nav-button`]: true,\n      [`${prefix}--tabs__nav-caret-right`]: true,\n      [`${prefix}--tab--overflow-nav-button--next`]: true,\n      [`${prefix}--tab--overflow-nav-button--hidden`]:\n        isIntersectionRightTrackerInContent,\n    });\n    return html`\n      <button\n        part=\"next-button\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        class=\"${nextButtonClasses}\"\n        @click=${(_) =>\n          this._handleScrollButtonClick(_, {\n            direction: NAVIGATION_DIRECTION.Right,\n          })}>\n        ${iconLoader(ChevronRight16)}\n      </button>\n    `;\n  }\n\n  render() {\n    const {\n      _assistiveStatusText: assistiveStatusText,\n      _handleSlotchange: handleSlotchange,\n    } = this;\n\n    return html`\n      ${this.renderPreviousButton()}\n      <div class=\"${prefix}--tabs-nav-content-container\">\n        <div class=\"${prefix}--tabs-nav-content\">\n          <div class=\"${prefix}--tabs-nav\">\n            <div id=\"tablist\" role=\"tablist\" class=\"${prefix}--tab--list\">\n              <div class=\"${prefix}--sub-content-left\"></div>\n              <slot @slotchange=${handleSlotchange}></slot>\n              <div class=\"${prefix}--sub-content-right\"></div>\n            </div>\n          </div>\n        </div>\n      </div>\n      ${this.renderNextButton()}\n      <div\n        class=\"${prefix}--assistive-text\"\n        role=\"status\"\n        aria-live=\"assertive\"\n        aria-relevant=\"additions text\">\n        ${assistiveStatusText}\n      </div>\n    `;\n  }\n\n  protected _updateTabsState() {\n    const { selectorItem } = this.constructor as typeof CDSTabs;\n    const tabs = this.querySelectorAll<CDSTab>(selectorItem);\n    tabs.forEach((tab, index) => {\n      tab._dismissable = this.dismissable;\n      tab._index = index;\n    });\n  }\n\n  protected _tabInitialLoad() {\n    const { selectorTablist, selectorItemEnabled } = this\n      .constructor as typeof CDSTabs;\n    const { selectionMode, selectedIndex } = this;\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n    const tablist = this.shadowRoot!.querySelector(selectorTablist)!;\n    this.tablist = tablist;\n    const firstItem =\n      this.querySelectorAll<CDSTab>(selectorItemEnabled)[selectedIndex];\n    if (firstItem) {\n      if (selectionMode === 'manual') {\n        firstItem.highlighted = true;\n      }\n      firstItem.selected = true;\n      this.value = firstItem.value;\n    }\n  }\n  /**\n   * Symbols of keys that triggers opening/closing menu and selecting/deselecting menu item.\n   */\n  static TRIGGER_KEYS = new Set([' ', 'Enter']);\n\n  /**\n   * A selector that will return tabs.\n   */\n  static get selectorItem() {\n    return `${prefix}-tab`;\n  }\n\n  /**\n   * A selector that will return enabled tabs.\n   */\n  static get selectorItemEnabled() {\n    return `${prefix}-tab:not([disabled])`;\n  }\n\n  /**\n   * A selector that will return highlighted tabs.\n   */\n  static get selectorItemHighlighted() {\n    return `${prefix}-tab[highlighted]`;\n  }\n\n  /**\n   * A selector that will return selected tabs.\n   */\n  static get selectorItemSelected() {\n    return `${prefix}-tab[selected]`;\n  }\n\n  /**\n   * A selector that returns the tablist\n   */\n  static get selectorTablist() {\n    return `.${prefix}--tab--list`;\n  }\n\n  /**\n   * The name of the custom event fired before a tab is selected upon a user gesture.\n   * Cancellation of this event stops changing the user-initiated selection.\n   */\n  static get eventBeforeSelect() {\n    return `${prefix}-tabs-beingselected`;\n  }\n\n  /**\n   * The name of the custom event fired after a a tab is selected upon a user gesture.\n   */\n  static get eventSelect() {\n    return `${prefix}-tabs-selected`;\n  }\n\n  static styles = styles;\n\n  /**\n   * @param key The key symbol.\n   * @param isVertical Whether the tabs are in vertical orientation.\n   * @returns A action for tabs for the given key symbol.\n   */\n  static getAction(key: string, isVertical = false) {\n    if (key === 'Home') {\n      return TABS_KEYBOARD_ACTION.HOME;\n    }\n    if (key === 'End') {\n      return TABS_KEYBOARD_ACTION.END;\n    }\n    // Check for navigation keys based on orientation\n    const navigationKeys = isVertical\n      ? VERTICAL_NAVIGATION_DIRECTION\n      : NAVIGATION_DIRECTION;\n    if (key in navigationKeys) {\n      return TABS_KEYBOARD_ACTION.NAVIGATING;\n    }\n    if (key === 'Enter' || key === ' ') {\n      return TABS_KEYBOARD_ACTION.ACTIVATING;\n    }\n    return TABS_KEYBOARD_ACTION.NONE;\n  }\n}\n"],"mappings":"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"}