@carbon/web-components 2.52.0 → 2.53.0

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

@@ -5,26 +5,25 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { prefix } from "../../globals/settings.js";
+import "../../globals/settings.js";
 import { forEach } from "../../globals/internal/collection-helpers.js";
 import { carbonElement } from "../../globals/decorators/carbon-element.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.112.0/helpers/decorate.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
 import iconLoader from "../../globals/internal/icon-loader.js";
 import HostListener from "../../globals/decorators/host-listener.js";
 import HostListenerMixin from "../../globals/mixins/host-listener.js";
 import { NAVIGATION_DIRECTION } from "../content-switcher/defs.js";
 import content_switcher_default from "../content-switcher/content-switcher.js";
-import { TABS_KEYBOARD_ACTION, TABS_TYPE } from "./defs.js";
+import { TABS_ICON_SIZE, TABS_KEYBOARD_ACTION, TABS_TYPE } from "./defs.js";
 import tabs_default$1 from "./tabs.scss.js";
 import { html } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import ChevronRight16 from "@carbon/icons/es/chevron--right/16.js";
 import ChevronLeft16 from "@carbon/icons/es/chevron--left/16.js";
-
 //#region src/components/tabs/tabs.ts
 /**
-* Copyright IBM Corp. 2019, 2024
+* Copyright IBM Corp. 2019, 2026
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
@@ -41,7 +40,7 @@ let CDSTabs = class CDSTabs extends HostListenerMixin(content_switcher_default)
 		this.selectingItemsAssistiveText = "Selecting items. Use up and down arrow keys to navigate.";
 		this.selectedItemAssistiveText = "Selected an item.";
 		this.triggerContent = "";
-		this.type = TABS_TYPE.REGULAR;
+		this.type = "";
 		this._isIntersectionLeftTrackerInContent = true;
 		this._isIntersectionRightTrackerInContent = true;
 		this._observerIntersection = null;
@@ -97,9 +96,9 @@ let CDSTabs = class CDSTabs extends HostListenerMixin(content_switcher_default)
 	_handleKeydown(event) {
 		const { key } = event;
 		const action = this.constructor.getAction(key);
-		const enabledTabs = this.querySelectorAll(`${prefix}-tab:not([disabled])`);
+		const enabledTabs = this.querySelectorAll(`cds-custom-tab:not([disabled])`);
 		switch (action) {
-			case TABS_KEYBOARD_ACTION.HOME:
+			case "home":
 				{
 					const [firstEnabledTab] = enabledTabs;
 					firstEnabledTab.scrollIntoView({
@@ -110,7 +109,7 @@ let CDSTabs = class CDSTabs extends HostListenerMixin(content_switcher_default)
 					this.requestUpdate();
 				}
 				break;
-			case TABS_KEYBOARD_ACTION.END:
+			case "end":
 				{
 					const lastEnabledTab = enabledTabs[enabledTabs.length - 1];
 					lastEnabledTab.scrollIntoView({
@@ -121,17 +120,17 @@ let CDSTabs = class CDSTabs extends HostListenerMixin(content_switcher_default)
 					this.requestUpdate();
 				}
 				break;
-			case TABS_KEYBOARD_ACTION.NAVIGATING:
+			case "navigating":
 				{
 					const direction = NAVIGATION_DIRECTION[key];
 					if (direction) this._navigate(direction);
 				}
 				break;
-			case TABS_KEYBOARD_ACTION.ACTIVATING:
+			case "activating":
 				{
-					const focusedTab = this.querySelector(`${prefix}-tab[highlighted]`);
+					const focusedTab = this.querySelector(`cds-custom-tab[highlighted]`);
 					if (focusedTab) {
-						this._selectionDidChange(focusedTab);
+						this._handleUserInitiatedSelectItem(focusedTab, "activation");
 						this.requestUpdate();
 					}
 				}
@@ -202,17 +201,22 @@ let CDSTabs = class CDSTabs extends HostListenerMixin(content_switcher_default)
 			this._isScrollable = scrollWidth > clientWidth;
 		}
 		const { selectorItem } = this.constructor;
-		if (changedProperties.has("type")) forEach(this.querySelectorAll(selectorItem), (elem) => {
-			this._totalTabs++;
-			elem.type = this.type;
-		});
+		if (changedProperties.has("type") || changedProperties.has("iconSize")) {
+			this._totalTabs = 0;
+			forEach(this.querySelectorAll(selectorItem), (elem) => {
+				this._totalTabs++;
+				elem.type = this.type;
+				elem.iconSize = this.iconSize;
+			});
+		}
 		return true;
 	}
 	firstUpdated() {
 		super.firstUpdated();
 		const { selectorTablist, selectorItemEnabled } = this.constructor;
 		const { selectionMode, selectedIndex } = this;
-		this.tablist = this.shadowRoot.querySelector(selectorTablist);
+		const tablist = this.shadowRoot.querySelector(selectorTablist);
+		this.tablist = tablist;
 		if (selectionMode === "manual") {
 			const firstItem = this.querySelectorAll(selectorItemEnabled)[selectedIndex];
 			if (firstItem) {
@@ -226,7 +230,7 @@ let CDSTabs = class CDSTabs extends HostListenerMixin(content_switcher_default)
 	updated(changedProperties) {
 		super.updated?.(changedProperties);
 		if (changedProperties.has("value")) {
-			const tab = this.querySelector(`${prefix}-tab[value="${this.value}"]`);
+			const tab = this.querySelector(`cds-custom-tab[value="${this.value}"]`);
 			if (tab) {
 				const { width: tabWidth } = tab?.getBoundingClientRect() ?? {};
 				const start = tab.offsetLeft ?? 0;
@@ -252,10 +256,10 @@ let CDSTabs = class CDSTabs extends HostListenerMixin(content_switcher_default)
         tabindex="-1"
         aria-hidden="true"
         class="${classMap({
-			[`${prefix}--tab--overflow-nav-button`]: true,
-			[`${prefix}--tabs__nav-caret-left`]: true,
-			[`${prefix}--tab--overflow-nav-button--previous`]: true,
-			[`${prefix}--tab--overflow-nav-button--hidden`]: isIntersectionLeftTrackerInContent
+			[`cds-custom--tab--overflow-nav-button`]: true,
+			[`cds-custom--tabs__nav-caret-left`]: true,
+			[`cds-custom--tab--overflow-nav-button--previous`]: true,
+			[`cds-custom--tab--overflow-nav-button--hidden`]: isIntersectionLeftTrackerInContent
 		})}"
         @click=${(_) => this._handleScrollButtonClick(_, { direction: NAVIGATION_DIRECTION.Left })}>
         ${iconLoader(ChevronLeft16)}
@@ -273,10 +277,10 @@ let CDSTabs = class CDSTabs extends HostListenerMixin(content_switcher_default)
         tabindex="-1"
         aria-hidden="true"
         class="${classMap({
-			[`${prefix}--tab--overflow-nav-button`]: true,
-			[`${prefix}--tabs__nav-caret-right`]: true,
-			[`${prefix}--tab--overflow-nav-button--next`]: true,
-			[`${prefix}--tab--overflow-nav-button--hidden`]: isIntersectionRightTrackerInContent
+			[`cds-custom--tab--overflow-nav-button`]: true,
+			[`cds-custom--tabs__nav-caret-right`]: true,
+			[`cds-custom--tab--overflow-nav-button--next`]: true,
+			[`cds-custom--tab--overflow-nav-button--hidden`]: isIntersectionRightTrackerInContent
 		})}"
         @click=${(_) => this._handleScrollButtonClick(_, { direction: NAVIGATION_DIRECTION.Right })}>
         ${iconLoader(ChevronRight16)}
@@ -287,20 +291,20 @@ let CDSTabs = class CDSTabs extends HostListenerMixin(content_switcher_default)
 		const { _assistiveStatusText: assistiveStatusText, _handleSlotchange: handleSlotchange } = this;
 		return html`
       ${this.renderPreviousButton()}
-      <div class="${prefix}--tabs-nav-content-container">
-        <div class="${prefix}--tabs-nav-content">
-          <div class="${prefix}--tabs-nav">
-            <div id="tablist" role="tablist" class="${prefix}--tab--list">
-              <div class="${prefix}--sub-content-left"></div>
+      <div class="${"cds-custom"}--tabs-nav-content-container">
+        <div class="${"cds-custom"}--tabs-nav-content">
+          <div class="${"cds-custom"}--tabs-nav">
+            <div id="tablist" role="tablist" class="${"cds-custom"}--tab--list">
+              <div class="${"cds-custom"}--sub-content-left"></div>
               <slot @slotchange=${handleSlotchange}></slot>
-              <div class="${prefix}--sub-content-right"></div>
+              <div class="${"cds-custom"}--sub-content-right"></div>
             </div>
           </div>
         </div>
       </div>
       ${this.renderNextButton()}
       <div
-        class="${prefix}--assistive-text"
+        class="${"cds-custom"}--assistive-text"
         role="status"
         aria-live="assertive"
         aria-relevant="additions text">
@@ -315,44 +319,44 @@ let CDSTabs = class CDSTabs extends HostListenerMixin(content_switcher_default)
 	* A selector that will return tabs.
 	*/
 	static get selectorItem() {
-		return `${prefix}-tab`;
+		return `cds-custom-tab`;
 	}
 	/**
 	* A selector that will return enabled tabs.
 	*/
 	static get selectorItemEnabled() {
-		return `${prefix}-tab:not([disabled])`;
+		return `cds-custom-tab:not([disabled])`;
 	}
 	/**
 	* A selector that will return highlighted tabs.
 	*/
 	static get selectorItemHighlighted() {
-		return `${prefix}-tab[highlighted]`;
+		return `cds-custom-tab[highlighted]`;
 	}
 	/**
 	* A selector that will return selected tabs.
 	*/
 	static get selectorItemSelected() {
-		return `${prefix}-tab[selected]`;
+		return `cds-custom-tab[selected]`;
 	}
 	/**
 	* A selector that returns the tablist
 	*/
 	static get selectorTablist() {
-		return `.${prefix}--tab--list`;
+		return `.cds-custom--tab--list`;
 	}
 	/**
 	* The name of the custom event fired before a tab is selected upon a user gesture.
 	* Cancellation of this event stops changing the user-initiated selection.
 	*/
 	static get eventBeforeSelect() {
-		return `${prefix}-tabs-beingselected`;
+		return `cds-custom-tabs-beingselected`;
 	}
 	/**
 	* The name of the custom event fired after a a tab is selected upon a user gesture.
 	*/
 	static get eventSelect() {
-		return `${prefix}-tabs-selected`;
+		return `cds-custom-tabs-selected`;
 	}
 	static {
 		this.styles = tabs_default$1;
@@ -362,29 +366,33 @@ let CDSTabs = class CDSTabs extends HostListenerMixin(content_switcher_default)
 	* @returns A action for dropdown for the given key symbol.
 	*/
 	static getAction(key) {
-		if (key === "Home") return TABS_KEYBOARD_ACTION.HOME;
-		if (key === "End") return TABS_KEYBOARD_ACTION.END;
-		if (key in NAVIGATION_DIRECTION) return TABS_KEYBOARD_ACTION.NAVIGATING;
-		if (key === "Enter" || key === " ") return TABS_KEYBOARD_ACTION.ACTIVATING;
-		return TABS_KEYBOARD_ACTION.NONE;
+		if (key === "Home") return "home";
+		if (key === "End") return "end";
+		if (key in NAVIGATION_DIRECTION) return "navigating";
+		if (key === "Enter" || key === " ") return "activating";
+		return "none";
 	}
 };
 __decorate([HostListener("click")], CDSTabs.prototype, "_handleClick", null);
 __decorate([HostListener("keydown")], CDSTabs.prototype, "_handleKeydown", null);
-__decorate([query(`.${prefix}--tabs-nav-content-container`)], CDSTabs.prototype, "_contentContainerNode", void 0);
-__decorate([query(`.${prefix}--tabs-nav-content`)], CDSTabs.prototype, "_contentNode", void 0);
+__decorate([query(`.cds-custom--tabs-nav-content-container`)], CDSTabs.prototype, "_contentContainerNode", void 0);
+__decorate([query(`.cds-custom--tabs-nav-content`)], CDSTabs.prototype, "_contentNode", void 0);
 __decorate([state()], CDSTabs.prototype, "_currentScrollPosition", void 0);
-__decorate([query(`.${prefix}--sub-content-left`)], CDSTabs.prototype, "_intersectionLeftSentinelNode", void 0);
-__decorate([query(`.${prefix}--sub-content-right`)], CDSTabs.prototype, "_intersectionRightSentinelNode", void 0);
+__decorate([query(`.cds-custom--sub-content-left`)], CDSTabs.prototype, "_intersectionLeftSentinelNode", void 0);
+__decorate([query(`.cds-custom--sub-content-right`)], CDSTabs.prototype, "_intersectionRightSentinelNode", void 0);
 __decorate([property({ attribute: "selecting-items-assistive-text" })], CDSTabs.prototype, "selectingItemsAssistiveText", void 0);
 __decorate([property({ attribute: "selected-item-assistive-text" })], CDSTabs.prototype, "selectedItemAssistiveText", void 0);
 __decorate([property({ attribute: "trigger-content" })], CDSTabs.prototype, "triggerContent", void 0);
 __decorate([property({ reflect: true })], CDSTabs.prototype, "type", void 0);
+__decorate([property({
+	attribute: "icon-size",
+	reflect: true
+})], CDSTabs.prototype, "iconSize", void 0);
 __decorate([state()], CDSTabs.prototype, "_isIntersectionLeftTrackerInContent", void 0);
 __decorate([state()], CDSTabs.prototype, "_isIntersectionRightTrackerInContent", void 0);
-CDSTabs = __decorate([carbonElement(`${prefix}-tabs`)], CDSTabs);
+CDSTabs = __decorate([carbonElement(`cds-custom-tabs`)], CDSTabs);
 var tabs_default = CDSTabs;
-
 //#endregion
-export { NAVIGATION_DIRECTION, TABS_KEYBOARD_ACTION, TABS_TYPE, tabs_default as default };
+export { NAVIGATION_DIRECTION, TABS_ICON_SIZE, TABS_KEYBOARD_ACTION, TABS_TYPE, tabs_default as default };
+
 //# sourceMappingURL=tabs.js.map

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, 2024\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\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_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 { NAVIGATION_DIRECTION, TABS_KEYBOARD_ACTION, TABS_TYPE };\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   * 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 { selectorItem, 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      forEach(this.querySelectorAll(selectorItem), (item) => {\n        (item as CDSTab)[immediate ? 'selected' : 'highlighted'] =\n          nextItem === item;\n      });\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  @HostListener('click')\n  protected _handleClick(event: MouseEvent) {\n    super._handleClick(event);\n    const { selectorItem } = this.constructor as typeof CDSTabs;\n    const currentItem = this._getCurrentItem(event.target as HTMLElement);\n    if (currentItem) {\n      forEach(this.querySelectorAll(selectorItem), (item) => {\n        (item as CDSTab).highlighted = false;\n      });\n      (currentItem as CDSTab).highlighted = true;\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          this._handleUserInitiatedSelectItem(firstEnabledTab as CDSTab);\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          this._handleUserInitiatedSelectItem(lastEnabledTab as CDSTab);\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._selectionDidChange(focusedTab);\n            this.requestUpdate();\n          }\n        }\n        break;\n      default:\n        break;\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  _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\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 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')) {\n      forEach(this.querySelectorAll(selectorItem), (elem) => {\n        this._totalTabs++;\n        (elem as CDSTab).type = this.type;\n      });\n    }\n    return true;\n  }\n\n  firstUpdated() {\n    // Call super to run content-switcher init logic (initial selection)\n    super.firstUpdated();\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    if (selectionMode === 'manual') {\n      const firstItem =\n        this.querySelectorAll<CDSTab>(selectorItemEnabled)[selectedIndex];\n      if (firstItem) {\n        firstItem.highlighted = true;\n        firstItem.selected = true;\n        this.value = firstItem.value;\n      }\n    }\n    this._cleanAndCreateIntersectionObserverContainer({ create: true });\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\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  /**\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":"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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 { 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-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   * 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 { selectorItem, 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      forEach(this.querySelectorAll(selectorItem), (item) => {\n        (item as CDSTab)[immediate ? 'selected' : 'highlighted'] =\n          nextItem === item;\n      });\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  @HostListener('click')\n  protected _handleClick(event: MouseEvent) {\n    super._handleClick(event);\n    const { selectorItem } = this.constructor as typeof CDSTabs;\n    const currentItem = this._getCurrentItem(event.target as HTMLElement);\n    if (currentItem) {\n      forEach(this.querySelectorAll(selectorItem), (item) => {\n        (item as CDSTab).highlighted = false;\n      });\n      (currentItem as CDSTab).highlighted = true;\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          this._handleUserInitiatedSelectItem(firstEnabledTab as CDSTab);\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          this._handleUserInitiatedSelectItem(lastEnabledTab as CDSTab);\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  /**\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  _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\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   * 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   * `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    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    if (selectionMode === 'manual') {\n      const firstItem =\n        this.querySelectorAll<CDSTab>(selectorItemEnabled)[selectedIndex];\n      if (firstItem) {\n        firstItem.highlighted = true;\n        firstItem.selected = true;\n        this.value = firstItem.value;\n      }\n    }\n    this._cleanAndCreateIntersectionObserverContainer({ create: true });\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\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  /**\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":"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"}