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

package/es/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 { TABS_ICON_SIZE, TABS_KEYBOARD_ACTION, TABS_TYPE } 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  TABS_ICON_SIZE,\n  TABS_KEYBOARD_ACTION,\n  TABS_TYPE,\n};\n\n/**\n * Tabs.\n *\n * @element cds-tabs\n * @fires cds-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-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   * 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 action = (this.constructor as typeof CDSTabs).getAction(key);\n    const enabledTabs = this.querySelectorAll(`${prefix}-tab:not([disabled])`);\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          const direction = 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-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-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    this._syncSecondaryLabels();\n    this._updateTabsState();\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   * 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 (changedProperties.has('type') || changedProperties.has('iconSize')) {\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  }\n\n  updated(changedProperties) {\n    // Call super to keep selection/value in sync\n    super.updated?.(changedProperties);\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   * @returns A action for dropdown for the given key symbol.\n   */\n  static getAction(key: string) {\n    if (key === 'Home') {\n      return TABS_KEYBOARD_ACTION.HOME;\n    }\n    if (key === 'End') {\n      return TABS_KEYBOARD_ACTION.END;\n    }\n    if (key in NAVIGATION_DIRECTION) {\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0Ce,IAAA,UAAA,MAAM,gBAAgB,kBAAkBA,yBAAmB,CAAC;;;uBAWjD;oBAKH;uBAOG;iBAKU;sBAKX;gCAoSU;qCAqB/B;mCAM0B;wBAMX;;mBAwBL;6CAOkC;8CAOC;+BAKc;wCAOpB,YAAY;GACnD,MAAM,EACJ,+BAA+B,8BAC/B,gCAAgC,kCAC9B;AAEJ,WAAQ,SAAS,EAAE,gBAAgB,aAAa;AAC9C,QAAI,WAAW,6BACb,MAAK,sCAAsC;AAE7C,QAAI,WAAW,8BACb,MAAK,uCAAuC;KAE9C;;;;;;;;;;;;;;;CAtXJ,UAAoB,WAAmB;EACrC,MAAM,YAAY,KAAK,kBAAkB;EACzC,MAAM,EAAE,yBAAyB,yBAAyB,KACvD;EACH,MAAM,WAAW,KAAK,aACpB,KAAK,cACH,YAAY,uBAAuB,wBACpC,EACD,UACD;AACD,MAAI,CAAC,SACH;AAEF,OAAK,+BAA+B,UAAoB,WAAW;AACnE,MAAI,CAAC,UACH,MAAK,iBAAiB,SAAmB;AAM3C,WAAS,eAAe;GAAE,OAAO;GAAW,QAAQ;GAAW,CAAC;EAEhE,MAAM,eAAe,SAAS;AAC9B,MAAI,aACF,MAAK,uBAAuB;AAE9B,OAAK,iBAAiB;AACtB,OAAK,eAAe;;;;;;;;CAStB,iBAA2B,UAA0B;EACnD,MAAM,EAAE,iBAAiB,KAAK;AAC9B,UAAQ,KAAK,iBAAiB,aAAa,GAAG,SAAS;AACpD,QAAgB,iBAAiB,aAAa;IAC/C;;;;;;;;CASJ,cAAwB,UAA0B;EAChD,MAAM,EAAE,iBAAiB,KAAK;AAC9B,UAAQ,KAAK,iBAAiB,aAAa,GAAG,SAAS;AACpD,QAAgB,cAAc,aAAa;IAC5C;;CAGJ,aACuB,OAAmB;AACxC,QAAM,aAAa,MAAM;EACzB,MAAM,cAAc,KAAK,gBAAgB,MAAM,OAAsB;AACrE,MAAI,YACF,MAAK,iBAAiB,YAAsB;;CAIhD,eACyB,OAAsB;EAC7C,MAAM,EAAE,QAAQ;EAChB,MAAM,SAAU,KAAK,YAA+B,UAAU,IAAI;EAClE,MAAM,cAAc,KAAK,iBAAiB,0BAAgC;AAC1E,UAAQ,QAAR;GACE,KAAA;IACE;KACE,MAAM,CAAC,mBAAmB;AAC1B,qBAAgB,eAAe;MAC7B,OAAO;MACP,QAAQ;MACT,CAAC;AACF,SAAI,KAAK,kBAAkB,SACzB,MAAK,iBAAiB,gBAA0B;AAElD,UAAK,+BACH,iBACA,KAAK,kBAAkB,WAAW,eAAe,WAClD;AACD,UAAK,eAAe;;AAEtB;GACF,KAAA;IACE;KACE,MAAM,iBAAiB,YAAY,YAAY,SAAS;AACxD,oBAAe,eAAe;MAC5B,OAAO;MACP,QAAQ;MACT,CAAC;AACF,SAAI,KAAK,kBAAkB,SACzB,MAAK,iBAAiB,eAAyB;AAEjD,UAAK,+BACH,gBACA,KAAK,kBAAkB,WAAW,eAAe,WAClD;AACD,UAAK,eAAe;;AAEtB;GACF,KAAA;IACE;KACE,MAAM,YAAY,qBAAqB;AACvC,SAAI,UACF,MAAK,UAAU,UAAU;;AAG7B;GACF,KAAA;IACE;KACE,MAAM,aAA4B,KAAK,cACrC,uBACD;AACD,SAAI,YAAY;AACd,WAAK,+BACH,YACA,aACD;AACD,WAAK,eAAe;;;AAGxB;GACF,QACE;;;CAIN,iBAC2B,OAAoB;EAC7C,MAAM,EACJ,cACA,qBACA,sBACA,4BACE,KAAK;EACT,MAAM,EAAE,UAAU,MAAM;EACxB,MAAM,UAAU,KAAK,iBAAyB,aAAa;EAC3D,MAAM,2BACJ,KAAK,iBAAyB,oBAAoB;EACpD,MAAM,qBAAqB,MAAM,KAAK,yBAAyB,CAAC,QAC9D,QAAQ,OACT;EAED,MAAM,eADa,KAAK,cAAsB,qBAAqB,EAClC;EAEjC,MAAM,oBADkB,KAAK,cAAsB,wBAAwB,EAChC;AAC3C,8BAA4B;GAC1B,MAAM,cAAc,MAAM,KACxB,KAAK,iBAAyB,oBAAoB,CACnD;GAED,MAAM,kBAAkB,YAAY,MACjC,QAAQ,IAAI,OAAO,aACrB;GACD,MAAM,uBAAuB,YAAY,MACtC,QAAQ,IAAI,OAAO,kBACrB;GACD,MAAM,uBACJ,CAAC,mBAAmB,CAAC,wBAAwB,qBAAqB,KAAK,IACnE,qBAAqB,IACrB;AACN,OAAI,YAAY,SAAS,GAAG;IAC1B,MAAM,mBAAmB,mBAAmB,YAAY;IACxD,MAAM,sBACJ,wBAAwB,YAAY;AACtC,SAAK,cAAc,iBAAiB;AACpC,SAAK,iBAAiB,oBAAoB;AAC1C,SAAK,QAAQ,iBAAiB;AAE9B,wBAAoB,YAChB,cACA,oCACD,EACC,OAAO;AACX,wBAAoB,eAAe;KACjC,OAAO;KACP,QAAQ;KACT,CAAC;UACG;AACL,SAAK,QAAQ;AACb;;IAEF;;;;;;;;;CAUJ,yBAAmC,GAAG,EAAE,aAAa;AACnD,MAAI,CAAC,KAAK,QACR;EAEF,MAAM,EAAE,YAAY,aAAa,gBAE/B,KAAK;AACP,UAAQ,WAAR;GACE,KAAK;AAEH,SAAK,sBAAuB,aAAa,KAAK,IAC5C,aAAc,cAAc,KAAK,aAAc,KAC/C,EACD;AACD;GACF,KAAK;AAEH,SAAK,sBAAuB,aAC1B,KAAK,IACH,aAAc,cAAc,KAAK,aAAc,KAC/C,cAAc,YACf,GAAG;AACN;GACF,QACE;;;CAIN,uBAA+B;AAI7B,MAH2B,MAAM,KAC/B,KAAK,iBAAiB,UAAgB,CACvC,CAAC,MAAM,QAAQ,IAAI,aAAa,kBAAkB,CAAC,CAElD,MAAK,aAAa,wBAAwB,GAAG;MAE7C,MAAK,gBAAgB,uBAAuB;;CAIhD,oBAAoB;AAElB,QAAM,qBAAqB;EAC3B,MAAM,EAAE,yBAAyB,KAAK;EACtC,MAAM,eAAe,KAAK,cAAc,qBAAqB;EAC7D,MAAM,WAAW,KAAK,aAAa,cAAwB,EAAE;AAI7D,MAAI,SACD,UAAoB,cAAc;AAGrC,OAAK,sBAAsB;AAC3B,OAAK,kBAAkB;;CAGzB,oBACE,cACA,iBACA;AACA,QAAM,oBAAoB,cAAc,gBAAgB;AACxD,OAAK,uBAAuB,KAAK;;;;;;;;CA4HnC,6CAAqD,EACnD,WACwB,EAAE,EAAE;EAC5B,MAAM,EACJ,+BAA+B,8BAC/B,gCAAgC,kCAC9B;AAEJ,MAAI,KAAK,uBAAuB;AAC9B,QAAK,sBAAsB,YAAY;AACvC,QAAK,wBAAwB;;AAG/B,MAAI,QAAQ;AACV,QAAK,wBAAwB,IAAI,qBAC/B,KAAK,+BACL;IACE,MAAM;IACN,WAAW;IACZ,CACF;AAED,OAAI,6BACF,MAAK,sBAAsB,QAAQ,6BAA6B;AAElE,OAAI,8BACF,MAAK,sBAAsB,QAAQ,8BAA8B;;;CAKvE,uBAAuB;AACrB,OAAK,8CAA8C;AACnD,QAAM,sBAAsB;;CAG9B,aAAa,mBAAmB;AAC9B,QAAM,aAAa,kBAAkB;AACrC,MAAI,KAAK,SAAS;GAChB,MAAM,EAAE,aAAa,gBAAgB,KAAK;AAC1C,QAAK,gBAAgB,cAAc;;EAErC,MAAM,EAAE,iBAAiB,KAAK;AAC9B,MAAI,kBAAkB,IAAI,OAAO,IAAI,kBAAkB,IAAI,WAAW,EAAE;AACtE,QAAK,aAAa;AAClB,WAAQ,KAAK,iBAAiB,aAAa,GAAG,SAAS;AACrD,SAAK;AACJ,SAAgB,OAAO,KAAK;AAC5B,SAAgB,WAAW,KAAK;KACjC;;AAEJ,SAAO;;CAGT,eAAe;AAEb,QAAM,cAAc;AACpB,OAAK,iBAAiB;AACtB,OAAK,6CAA6C,EAAE,QAAQ,MAAM,CAAC;AACnE,OAAK,sBAAsB;;CAG7B,QAAQ,mBAAmB;AAEzB,QAAM,UAAU,kBAAkB;AAElC,MAAI,kBAAkB,IAAI,QAAQ,EAAE;GAClC,MAAM,MAAM,KAAK,cACf,kBAAwB,KAAK,MAAM,IACpC;AACD,OAAI,KAAK;IACP,MAAM,EAAE,OAAO,aAAa,KAAK,uBAAuB,IAAI,EAAE;IAC9D,MAAM,QAAQ,IAAI,cAAc;IAChC,MAAM,MAAM,IAAI,aAAa;IAI7B,MAAM,eAAe,KAAK,QAAS,aAAa,KAAK;IACrD,MAAM,aAEJ,KAAK,QAAS,aAEd,KAAK,QAAS,cACd,KAAK;AAGP,QAAI,QAAQ,aAEV,MAAK,QAAS,aAAa,QAAQ,KAAK;AAI1C,QAAI,MAAM,WAER,MAAK,QAAS,aAEZ,MAAM,KAAK,eAAe,KAAK,QAAS;;;AAKhD,MAAI,kBAAkB,IAAI,yBAAyB;OAC7C,KAAK,aACP,MAAK,aAAa,MAAM,mBAAmB,IAAI,KAAK,uBAAuB;;AAI/E,MAAI,kBAAkB,IAAI,cAAc,CACtC,MAAK,kBAAkB;;;;;CAO3B,uBAAwD;EACtD,MAAM,EACJ,qCAAqC,uCACnC;AAQJ,SAAO,IAAI;;;;;iBAPmB,SAAS;IACpC,kCAAwC;IACxC,8BAAoC;IACpC,4CAAkD;IAClD,0CACC;GACH,CAAC,CAMiC;kBACrB,MACR,KAAK,yBAAyB,GAAG,EAC/B,WAAW,qBAAqB,MACjC,CAAC,CAAC;UACH,WAAW,cAAc,CAAC;;;;;;;CAQlC,mBAAoD;EAClD,MAAM,EACJ,sCAAsC,wCACpC;AAQJ,SAAO,IAAI;;;;;iBAPe,SAAS;IAChC,kCAAwC;IACxC,+BAAqC;IACrC,wCAA8C;IAC9C,0CACC;GACH,CAAC,CAM6B;kBACjB,MACR,KAAK,yBAAyB,GAAG,EAC/B,WAAW,qBAAqB,OACjC,CAAC,CAAC;UACH,WAAW,eAAe,CAAC;;;;CAKnC,SAAS;EACP,MAAM,EACJ,sBAAsB,qBACtB,mBAAmB,qBACjB;AAEJ,SAAO,IAAI;QACP,KAAK,sBAAsB,CAAC;0BACT;4BACE;8BACE;4DAC8B;kCAC1B;kCACD,iBAAiB;kCAChB;;;;;QAK3B,KAAK,kBAAkB,CAAC;;uBAER;;;;UAId,oBAAoB;;;;CAK5B,mBAA6B;EAC3B,MAAM,EAAE,iBAAiB,KAAK;AACjB,OAAK,iBAAyB,aAAa,CACnD,SAAS,KAAK,UAAU;AAC3B,OAAI,eAAe,KAAK;AACxB,OAAI,SAAS;IACb;;CAGJ,kBAA4B;EAC1B,MAAM,EAAE,iBAAiB,wBAAwB,KAC9C;EACH,MAAM,EAAE,eAAe,kBAAkB;EAEzC,MAAM,UAAU,KAAK,WAAY,cAAc,gBAAgB;AAC/D,OAAK,UAAU;EACf,MAAM,YACJ,KAAK,iBAAyB,oBAAoB,CAAC;AACrD,MAAI,WAAW;AACb,OAAI,kBAAkB,SACpB,WAAU,cAAc;AAE1B,aAAU,WAAW;AACrB,QAAK,QAAQ,UAAU;;;;sBAML,IAAI,IAAI,CAAC,KAAK,QAAQ,CAAC;;;;;CAK7C,WAAW,eAAe;AACxB,SAAO;;;;;CAMT,WAAW,sBAAsB;AAC/B,SAAO;;;;;CAMT,WAAW,0BAA0B;AACnC,SAAO;;;;;CAMT,WAAW,uBAAuB;AAChC,SAAO;;;;;CAMT,WAAW,kBAAkB;AAC3B,SAAO;;;;;;CAOT,WAAW,oBAAoB;AAC7B,SAAO;;;;;CAMT,WAAW,cAAc;AACvB,SAAO;;;gBAGOC;;;;;;CAMhB,OAAO,UAAU,KAAa;AAC5B,MAAI,QAAQ,OACV,QAAA;AAEF,MAAI,QAAQ,MACV,QAAA;AAEF,MAAI,OAAO,qBACT,QAAA;AAEF,MAAI,QAAQ,WAAW,QAAQ,IAC7B,QAAA;AAEF,SAAA;;;YAlnBD,aAAa,QAAQ,CAAA,EAAA,QAAA,WAAA,gBAAA,KAAA;YASrB,aAAa,UAAU,CAAA,EAAA,QAAA,WAAA,kBAAA,KAAA;YAmEvB,aAAa,iBAAiB,CAAA,EAAA,QAAA,WAAA,oBAAA,KAAA;YAoI9B,MAAM,mCAAyC,CAAA,EAAA,QAAA,WAAA,yBAAA,KAAA,EAAA;YAM/C,MAAM,yBAA+B,CAAA,EAAA,QAAA,WAAA,gBAAA,KAAA,EAAA;YAMrC,OAAO,CAAA,EAAA,QAAA,WAAA,0BAAA,KAAA,EAAA;YAOP,MAAM,yBAA+B,CAAA,EAAA,QAAA,WAAA,iCAAA,KAAA,EAAA;YAOrC,MAAM,0BAAgC,CAAA,EAAA,QAAA,WAAA,kCAAA,KAAA,EAAA;YAMtC,SAAS,EAAE,WAAW,kCAAkC,CAAC,CAAA,EAAA,QAAA,WAAA,+BAAA,KAAA,EAAA;YAOzD,SAAS,EAAE,WAAW,gCAAgC,CAAC,CAAA,EAAA,QAAA,WAAA,6BAAA,KAAA,EAAA;YAMvD,SAAS,EAAE,WAAW,mBAAmB,CAAC,CAAA,EAAA,QAAA,WAAA,kBAAA,KAAA,EAAA;YAM1C,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,QAAA,WAAA,QAAA,KAAA,EAAA;YAM3B,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,QAAA,WAAA,eAAA,KAAA,EAAA;YAM1C,SAAS;CAAE,WAAW;CAAa,SAAS;CAAM,CAAC,CAAA,EAAA,QAAA,WAAA,YAAA,KAAA,EAAA;YAMnD,SAAS;CAAE,MAAM;CAAS,WAAW;CAAc,SAAS;CAAM,CAAC,CAAA,EAAA,QAAA,WAAA,aAAA,KAAA,EAAA;YAOnE,OAAO,CAAA,EAAA,QAAA,WAAA,uCAAA,KAAA,EAAA;YAOP,OAAO,CAAA,EAAA,QAAA,WAAA,wCAAA,KAAA,EAAA;sBA5YTC,cAAc,WAAiB,CAAA,EAAA,QAAA"}
+{"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-tabs\n * @fires cds-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-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-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-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-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 contained tabs.\n   */\n  @property({ reflect: true })\n  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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"}