@esri/calcite-components 2.6.0-next.3 → 2.7.0-next.0

package/dist/components/tab-nav.js

@@ -1,17 +1,36 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.6.0-next.3
+ * v2.7.0-next.0
  */
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
+import { proxyCustomElement, HTMLElement, createEvent, readTask, h, Host } from '@stencil/core/internal/client/index.js';
 import { v as focusElementInGroup, a as getElementDir, x as filterDirectChildren } from './dom.js';
 import { c as createObserver } from './observers.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale.js';
+import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n.js';
+import { c as calciteSize24, a as calciteSize32, b as calciteSize44 } from './core.js';
+import { C as CSS_UTILITY } from './resources.js';
+import { d as defineCustomElement$3 } from './button.js';
+import { d as defineCustomElement$2 } from './icon.js';
+import { d as defineCustomElement$1 } from './loader.js';
 
+const ICON = {
+    chevronRight: "chevron-right",
+    chevronLeft: "chevron-left",
+};
 const CSS = {
+    activeIndicatorContainer: "tab-nav-active-indicator-container",
     container: "tab-nav",
+    containerHasEndTabTitleOverflow: "tab-nav--end-overflow",
+    containerHasStartTabTitleOverflow: "tab-nav--start-overflow",
+    scrollButton: "scroll-button",
+    scrollButtonContainer: "scroll-button-container",
+    scrollBackwardContainerButton: "scroll-button-container--backward",
+    scrollForwardContainerButton: "scroll-button-container--forward",
+    tabTitleSlotWrapper: "tab-titles-slot-wrapper",
 };
 
-const tabNavCss = ":host{position:relative;display:flex}.scale-s{min-block-size:1.5rem}.scale-m{min-block-size:2rem}.scale-l{min-block-size:2.75rem}:host([layout=center]:not([bordered])){padding-inline:1.25rem}:host([layout=center]:not([bordered])) .tab-nav ::slotted(calcite-tab-title:last-child){margin-inline-end:0px}:host(:not([bordered])) .scale-l ::slotted(calcite-tab-title){margin-inline-end:1.5rem}:host(:not([bordered])) .scale-m ::slotted(calcite-tab-title){margin-inline-end:1.25rem}:host(:not([bordered])) .scale-s ::slotted(calcite-tab-title){margin-inline-end:1rem}.tab-nav{display:flex;inline-size:100%;justify-content:flex-start;overflow:auto}.tab-nav-active-indicator-container{position:absolute;inset-inline:0px;inset-block-end:0px;block-size:0.125rem;inline-size:100%;overflow:hidden}.tab-nav-active-indicator{position:absolute;inset-block-end:0px;display:block;block-size:0.125rem;background-color:var(--calcite-color-brand);transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}:host([layout=center]) .tab-nav{justify-content:space-evenly}:host .position-bottom .tab-nav-active-indicator{inset-block-end:unset;inset-block-start:0px}:host .position-bottom .tab-nav-active-indicator-container{inset-block-end:unset;inset-block-start:0px}:host([bordered]) .tab-nav-active-indicator-container{inset-block-end:unset}:host([bordered]) .position-bottom .tab-nav-active-indicator-container{inset-block-end:0;inset-block-start:unset}@media (forced-colors: active){.tab-nav-active-indicator{background-color:highlight}}:host([hidden]){display:none}[hidden]{display:none}";
+const tabNavCss = ":host{--calcite-internal-tab-nav-gradient-start-side:left;--calcite-internal-tab-nav-gradient-end-side:right;position:relative;display:flex}.scale-s{--calcite-internal-tab-nav-scroller-button-width:24px;min-block-size:1.5rem}.scale-m{--calcite-internal-tab-nav-scroller-button-width:32px;min-block-size:2rem}.scale-l{--calcite-internal-tab-nav-scroller-button-width:44px;min-block-size:2.75rem}.calcite--rtl{--calcite-internal-tab-nav-gradient-start-side:right;--calcite-internal-tab-nav-gradient-end-side:left}.tab-nav--start-overflow .tab-nav-active-indicator-container,.tab-nav--start-overflow .tab-titles-slot-wrapper{-webkit-mask-image:linear-gradient(to var(--calcite-internal-tab-nav-gradient-end-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%);mask-image:linear-gradient(to var(--calcite-internal-tab-nav-gradient-end-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%)}.tab-nav--end-overflow .tab-nav-active-indicator-container,.tab-nav--end-overflow .tab-titles-slot-wrapper{-webkit-mask-image:linear-gradient(to var(--calcite-internal-tab-nav-gradient-start-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%);mask-image:linear-gradient(to var(--calcite-internal-tab-nav-gradient-start-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%)}.tab-nav--start-overflow.tab-nav--end-overflow .tab-nav-active-indicator-container,.tab-nav--start-overflow.tab-nav--end-overflow .tab-titles-slot-wrapper{-webkit-mask-image:linear-gradient(to var(--calcite-internal-tab-nav-gradient-end-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%, transparent 51%), linear-gradient(to var(--calcite-internal-tab-nav-gradient-start-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%, transparent 51%);mask-image:linear-gradient(to var(--calcite-internal-tab-nav-gradient-end-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%, transparent 51%), linear-gradient(to var(--calcite-internal-tab-nav-gradient-start-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%, transparent 51%)}.tab-nav::-webkit-scrollbar{display:none;-ms-overflow-style:none;scrollbar-width:none}:host([layout=center]) ::slotted(calcite-tab-title){display:flex;flex-grow:1;flex-shrink:0;min-inline-size:auto;white-space:nowrap}:host([layout=center]) ::slotted(calcite-tab-title[selected]){overflow:unset}:host(:not([bordered])) .scale-l{--calcite-internal-tab-nav-gap:var(--calcite-size-xxl)}:host(:not([bordered])) .scale-m{--calcite-internal-tab-nav-gap:var(--calcite-size-xl)}:host(:not([bordered])) .scale-s{--calcite-internal-tab-nav-gap:var(--calcite-size-lg)}:host(:not([bordered])) .tab-titles-slot-wrapper{gap:var(--calcite-internal-tab-nav-gap)}:host([layout=center]:not([bordered])) .tab-titles-slot-wrapper{padding-inline:var(--calcite-spacing-xxl)}.tab-nav,.tab-titles-slot-wrapper{display:flex;inline-size:100%;justify-content:flex-start;overflow:hidden;white-space:nowrap}.tab-nav-active-indicator-container{position:absolute;inset-inline:0px;inset-block-end:0px;block-size:0.125rem;inline-size:100%;overflow:hidden}.tab-nav-active-indicator{position:absolute;inset-block-end:0px;display:block;block-size:0.125rem;background-color:var(--calcite-color-brand);transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.scroll-button-container{position:absolute;inset-block:0px}.scroll-button-container calcite-button{--calcite-offset-invert-focus:1;--calcite-color-text-1:var(--calcite-color-text-3);block-size:100%}.scroll-button-container calcite-button:hover{--calcite-color-text-1:unset;--calcite-color-foreground-1:var(--calcite-color-transparent-hover);--calcite-color-foreground-3:var(--calcite-color-transparent)}.scroll-button-container--forward{inset-inline-end:0;z-index:var(--calcite-z-index)}.scroll-button-container--backward{inset-inline-start:0;z-index:var(--calcite-z-index)}:host(:not([bordered])) .scroll-button-container--backward::before,:host(:not([bordered])) .scroll-button-container--forward::before{background-color:var(--calcite-color-border-3);content:\"\";inline-size:var(--calcite-border-width-sm);inset-block-start:var(--calcite-border-width-md);inset-block-end:var(--calcite-border-width-md);position:absolute}:host(:not([bordered])) .scroll-button-container--backward::before{inset-inline-end:0}:host(:not([bordered])) .scroll-button-container--forward::before{inset-inline-start:0}:host .position-bottom .tab-nav-active-indicator{inset-block-end:unset;inset-block-start:0px}:host .position-bottom .tab-nav-active-indicator-container{inset-block-end:unset;inset-block-start:0px}:host([bordered]) .tab-nav-active-indicator-container{inset-block-end:unset}:host([bordered]) .position-bottom .tab-nav-active-indicator-container{inset-block-end:0;inset-block-start:unset}@media (forced-colors: active){.tab-nav-active-indicator{background-color:highlight}}:host([hidden]){display:none}[hidden]{display:none}";
 
 const TabNav = /*@__PURE__*/ proxyCustomElement(class TabNav extends HTMLElement {
     constructor() {
@@ -20,29 +39,125 @@ const TabNav = /*@__PURE__*/ proxyCustomElement(class TabNav extends HTMLElement
         this.__attachShadow();
         this.calciteTabChange = createEvent(this, "calciteTabChange", 6);
         this.calciteInternalTabChange = createEvent(this, "calciteInternalTabChange", 6);
-        this.animationActiveDuration = 0.3;
+        this.dir = "ltr";
+        this.lastScrollWheelAxis = "x";
         this.resizeObserver = createObserver("resize", () => {
+            this.updateScrollingState();
             if (!this.activeIndicatorEl) {
                 return;
             }
-            // remove active indicator transition duration during resize to prevent wobble
-            this.activeIndicatorEl.style.transitionDuration = "0s";
-            this.updateActiveWidth();
-            this.updateOffsetPosition();
+            this.updateActiveIndicator();
         });
-        //--------------------------------------------------------------------------
-        //
-        //  Private Methods
-        //
-        //--------------------------------------------------------------------------
+        this.onTabTitleWheel = (event) => {
+            event.preventDefault();
+            const { deltaX, deltaY } = event;
+            const x = Math.abs(deltaX);
+            const y = Math.abs(deltaY);
+            let scrollBy;
+            if (x === y) {
+                scrollBy = this.lastScrollWheelAxis === "x" ? deltaX : deltaY;
+            }
+            else if (x > y) {
+                scrollBy = deltaX;
+                this.lastScrollWheelAxis = "x";
+            }
+            else {
+                scrollBy = deltaY;
+                this.lastScrollWheelAxis = "y";
+            }
+            const scrollByX = (this.dir === "rtl" ? -1 : 1) * scrollBy;
+            event.currentTarget.scrollBy(scrollByX, 0);
+            requestAnimationFrame(() => this.updateActiveIndicator());
+        };
+        this.onSlotChange = (event) => {
+            this.intersectionObserver?.disconnect();
+            const slottedChildren = event.target.assignedElements();
+            slottedChildren.forEach((child) => {
+                this.intersectionObserver?.observe(child);
+            });
+        };
+        this.storeContainerRef = (el) => (this.containerEl = el);
+        this.storeTabTitleWrapperRef = (el) => {
+            this.tabTitleContainerEl = el;
+            this.intersectionObserver = createObserver("intersection", () => this.updateScrollingState(), {
+                root: el,
+                threshold: [0, 0.5, 1],
+            });
+        };
+        this.scrollToTabTitles = (direction) => {
+            readTask(() => {
+                const tabTitleContainer = this.tabTitleContainerEl;
+                const containerBounds = tabTitleContainer.getBoundingClientRect();
+                const tabTitles = Array.from(this.el.querySelectorAll("calcite-tab-title"));
+                const { dir } = this;
+                if (direction === "forward") {
+                    tabTitles.reverse();
+                }
+                let closestToEdge = null;
+                tabTitles.forEach((tabTitle) => {
+                    const tabTitleBounds = tabTitle.getBoundingClientRect();
+                    const containerEndX = containerBounds.x + containerBounds.width;
+                    const tabTitleEndX = tabTitleBounds.x + tabTitleBounds.width;
+                    if ((direction === "forward" && dir === "ltr") ||
+                        (direction === "backward" && dir === "rtl")) {
+                        const afterContainerEnd = tabTitleBounds.x > containerEndX;
+                        if (afterContainerEnd) {
+                            closestToEdge = tabTitle;
+                        }
+                        else {
+                            const crossingContainerEnd = tabTitleEndX > containerEndX && tabTitleBounds.x > containerBounds.x;
+                            if (crossingContainerEnd) {
+                                closestToEdge = tabTitle;
+                            }
+                        }
+                    }
+                    else {
+                        const beforeContainerStart = tabTitleEndX < containerBounds.x;
+                        if (beforeContainerStart) {
+                            closestToEdge = tabTitle;
+                        }
+                        else {
+                            const crossingContainerStart = tabTitleEndX < containerEndX && tabTitleBounds.x < containerBounds.x;
+                            if (crossingContainerStart) {
+                                closestToEdge = tabTitle;
+                            }
+                        }
+                    }
+                });
+                if (closestToEdge) {
+                    const { scrollerButtonWidth } = this;
+                    const offsetAdjustment = (direction === "forward" && dir === "ltr") || (direction === "backward" && dir === "rtl")
+                        ? -scrollerButtonWidth
+                        : closestToEdge.offsetWidth - tabTitleContainer.clientWidth + scrollerButtonWidth;
+                    const scrollTo = closestToEdge.offsetLeft + offsetAdjustment;
+                    tabTitleContainer.scrollTo({
+                        left: scrollTo,
+                        behavior: "smooth",
+                    });
+                }
+            });
+        };
+        this.scrollToNextTabTitles = () => this.scrollToTabTitles("forward");
+        this.scrollToPreviousTabTitles = () => this.scrollToTabTitles("backward");
         this.handleTabFocus = (event, el, destination) => {
-            focusElementInGroup(this.enabledTabTitles, el, destination);
+            const focused = focusElementInGroup(this.enabledTabTitles, el, destination);
+            this.scrollTabTitleIntoView(focused, "instant");
             event.stopPropagation();
         };
-        this.handleContainerScroll = () => {
-            // remove active indicator transition duration while container is scrolling to prevent wobble
-            this.activeIndicatorEl.style.transitionDuration = "0s";
-            this.updateOffsetPosition();
+        this.onTabTitleScroll = () => {
+            this.updateActiveIndicator();
+            this.updateScrollingState();
+        };
+        this.renderScrollButton = (overflowDirection) => {
+            const { bordered, messages, hasOverflowingStartTabTitle, hasOverflowingEndTabTitle, scale } = this;
+            const isEnd = overflowDirection === "end";
+            return (h("div", { class: {
+                    [CSS.scrollButtonContainer]: true,
+                    [CSS.scrollBackwardContainerButton]: !isEnd,
+                    [CSS.scrollForwardContainerButton]: isEnd,
+                }, hidden: (isEnd && !hasOverflowingEndTabTitle) || (!isEnd && !hasOverflowingStartTabTitle), key: overflowDirection }, h("calcite-button", { appearance: bordered ? "outline-fill" : "transparent", "aria-label": isEnd ? messages.nextTabTitles : messages.previousTabTitles, class: {
+                    [CSS.scrollButton]: true,
+                }, iconFlipRtl: "both", iconStart: isEnd ? ICON.chevronRight : ICON.chevronLeft, kind: "neutral", onClick: isEnd ? this.scrollToNextTabTitles : this.scrollToPreviousTabTitles, scale: scale, tabIndex: -1 })));
         };
         this.storageId = undefined;
         this.syncId = undefined;
@@ -53,8 +168,17 @@ const TabNav = /*@__PURE__*/ proxyCustomElement(class TabNav extends HTMLElement
         this.bordered = false;
         this.indicatorOffset = undefined;
         this.indicatorWidth = undefined;
+        this.messages = undefined;
+        this.messageOverrides = undefined;
+        this.defaultMessages = undefined;
+        this.effectiveLocale = "";
+        this.hasOverflowingStartTabTitle = false;
+        this.hasOverflowingEndTabTitle = false;
         this.selectedTabId = undefined;
     }
+    onMessagesChange() {
+        /* wired up by t9n util */
+    }
     async selectedTabIdChanged() {
         if (localStorage &&
             this.storageId &&
@@ -68,10 +192,7 @@ const TabNav = /*@__PURE__*/ proxyCustomElement(class TabNav extends HTMLElement
         this.selectedTitle = await this.getTabTitleById(this.selectedTabId);
     }
     selectedTitleChanged() {
-        this.updateOffsetPosition();
-        this.updateActiveWidth();
-        // reset the animation time on tab selection
-        this.activeIndicatorEl.style.transitionDuration = `${this.animationActiveDuration}s`;
+        this.updateActiveIndicator();
     }
     //--------------------------------------------------------------------------
     //
@@ -81,21 +202,27 @@ const TabNav = /*@__PURE__*/ proxyCustomElement(class TabNav extends HTMLElement
     connectedCallback() {
         this.parentTabsEl = this.el.closest("calcite-tabs");
         this.resizeObserver?.observe(this.el);
+        connectLocalized(this);
+        connectMessages(this);
     }
-    componentWillLoad() {
+    async componentWillLoad() {
         const storageKey = `calcite-tab-nav-${this.storageId}`;
         if (localStorage && this.storageId && localStorage.getItem(storageKey)) {
             const storedTab = JSON.parse(localStorage.getItem(storageKey));
             this.selectedTabId = storedTab;
         }
+        await setUpMessages(this);
+    }
+    componentDidLoad() {
+        this.scrollTabTitleIntoView(this.selectedTitle, "instant");
     }
     componentWillRender() {
         const { parentTabsEl } = this;
         this.layout = parentTabsEl?.layout;
         this.bordered = parentTabsEl?.bordered;
-        // fix issue with active tab-title not lining up with blue indicator
+        this.dir = getElementDir(this.el);
         if (this.selectedTitle) {
-            this.updateOffsetPosition();
+            this.updateActiveIndicator();
         }
     }
     componentDidRender() {
@@ -112,23 +239,38 @@ const TabNav = /*@__PURE__*/ proxyCustomElement(class TabNav extends HTMLElement
     }
     disconnectedCallback() {
         this.resizeObserver?.disconnect();
+        disconnectLocalized(this);
+        disconnectMessages(this);
     }
+    //--------------------------------------------------------------------------
+    //
+    //  Render Methods
+    //
+    //--------------------------------------------------------------------------
     render() {
-        const dir = getElementDir(this.el);
         const width = `${this.indicatorWidth}px`;
         const offset = `${this.indicatorOffset}px`;
-        const indicatorStyle = dir !== "rtl" ? { width, left: offset } : { width, right: offset };
+        const indicatorStyle = this.dir !== "rtl" ? { width, left: offset } : { width, right: offset };
         return (h(Host, { role: "tablist" }, h("div", { class: {
                 [CSS.container]: true,
+                [CSS.containerHasStartTabTitleOverflow]: !!this.hasOverflowingStartTabTitle,
+                [CSS.containerHasEndTabTitleOverflow]: !!this.hasOverflowingEndTabTitle,
                 [`scale-${this.scale}`]: true,
                 [`position-${this.position}`]: true,
-            }, onScroll: this.handleContainerScroll,
+                [CSS_UTILITY.rtl]: this.dir === "rtl",
+            },
+            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+            ref: this.storeContainerRef }, this.renderScrollButton("start"), h("div", { class: {
+                [CSS.tabTitleSlotWrapper]: true,
+            }, onScroll: this.onTabTitleScroll, onWheel: this.onTabTitleWheel,
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: (el) => (this.tabNavEl = el) }, h("slot", null), h("div", { class: "tab-nav-active-indicator-container",
+            ref: this.storeTabTitleWrapperRef }, h("slot", { onSlotchange: this.onSlotChange })), h("div", { class: {
+                [CSS.activeIndicatorContainer]: true,
+            },
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
             ref: (el) => (this.activeIndicatorContainerEl = el) }, h("div", { class: "tab-nav-active-indicator", style: indicatorStyle,
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: (el) => (this.activeIndicatorEl = el) })))));
+            ref: (el) => (this.activeIndicatorEl = el) })), this.renderScrollButton("end"))));
     }
     //--------------------------------------------------------------------------
     //
@@ -148,10 +290,42 @@ const TabNav = /*@__PURE__*/ proxyCustomElement(class TabNav extends HTMLElement
         this.handleTabFocus(event, event.target, "last");
     }
     internalActivateTabHandler(event) {
+        const activatedTabTitle = event.target;
         this.selectedTabId = event.detail.tab
             ? event.detail.tab
-            : this.getIndexOfTabTitle(event.target);
+            : this.getIndexOfTabTitle(activatedTabTitle);
         event.stopPropagation();
+        this.scrollTabTitleIntoView(activatedTabTitle);
+    }
+    scrollTabTitleIntoView(activatedTabTitle, behavior = "smooth") {
+        if (!activatedTabTitle) {
+            return;
+        }
+        readTask(() => {
+            const isLTR = this.dir === "ltr";
+            const tabTitleContainer = this.tabTitleContainerEl;
+            const containerBounds = tabTitleContainer.getBoundingClientRect();
+            const tabTitleBounds = activatedTabTitle.getBoundingClientRect();
+            const scrollPosition = tabTitleContainer.scrollLeft;
+            const overflowingStartTabTitle = isLTR
+                ? this.hasOverflowingStartTabTitle
+                : this.hasOverflowingEndTabTitle;
+            const overflowingEndTabTitle = isLTR
+                ? this.hasOverflowingEndTabTitle
+                : this.hasOverflowingStartTabTitle;
+            if (tabTitleBounds.left <
+                containerBounds.left + (overflowingStartTabTitle ? this.scrollerButtonWidth : 0)) {
+                const left = scrollPosition + (tabTitleBounds.left - containerBounds.left) - this.scrollerButtonWidth;
+                tabTitleContainer.scrollTo({ left, behavior });
+            }
+            else if (tabTitleBounds.right >
+                containerBounds.right - (overflowingEndTabTitle ? this.scrollerButtonWidth : 0)) {
+                const left = scrollPosition +
+                    (tabTitleBounds.right - containerBounds.right) +
+                    this.scrollerButtonWidth;
+                tabTitleContainer.scrollTo({ left, behavior });
+            }
+        });
     }
     activateTabHandler(event) {
         this.calciteTabChange.emit();
@@ -182,21 +356,53 @@ const TabNav = /*@__PURE__*/ proxyCustomElement(class TabNav extends HTMLElement
         event.stopPropagation();
     }
     iconStartChangeHandler() {
-        this.updateActiveWidth();
-        this.updateOffsetPosition();
+        this.updateActiveIndicator();
+    }
+    effectiveLocaleChange() {
+        updateMessages(this, this.effectiveLocale);
     }
-    updateOffsetPosition() {
-        const dir = getElementDir(this.el);
+    get scrollerButtonWidth() {
+        const { scale } = this;
+        return parseInt(scale === "s" ? calciteSize24 : scale === "m" ? calciteSize32 : calciteSize44);
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    updateActiveIndicator() {
+        const tabTitleScrollLeft = this.tabTitleContainerEl?.scrollLeft;
+        const containerScrollLeft = this.containerEl?.scrollLeft;
         const navWidth = this.activeIndicatorContainerEl?.offsetWidth;
         const tabLeft = this.selectedTitle?.offsetLeft;
         const tabWidth = this.selectedTitle?.offsetWidth;
-        const offsetRight = navWidth - (tabLeft + tabWidth);
-        this.indicatorOffset =
-            dir !== "rtl" ? tabLeft - this.tabNavEl?.scrollLeft : offsetRight + this.tabNavEl?.scrollLeft;
-    }
-    updateActiveWidth() {
+        const offsetRight = navWidth - tabLeft - tabWidth;
+        const offsetBase = this.dir === "ltr" ? tabLeft : offsetRight;
+        const multiplier = this.dir === "ltr" ? -1 : 1;
+        this.indicatorOffset = offsetBase + multiplier * (containerScrollLeft + tabTitleScrollLeft);
         this.indicatorWidth = this.selectedTitle?.offsetWidth;
     }
+    updateScrollingState() {
+        const tabTitleContainer = this.tabTitleContainerEl;
+        if (!tabTitleContainer) {
+            return;
+        }
+        let isOverflowStart;
+        let isOverflowEnd;
+        const scrollPosition = tabTitleContainer.scrollLeft;
+        const visibleWidth = tabTitleContainer.clientWidth;
+        const totalContentWidth = tabTitleContainer.scrollWidth;
+        if (this.dir === "ltr") {
+            isOverflowStart = scrollPosition > 0;
+            isOverflowEnd = scrollPosition + visibleWidth < totalContentWidth;
+        }
+        else {
+            isOverflowStart = scrollPosition < 0;
+            isOverflowEnd = scrollPosition !== -(totalContentWidth - visibleWidth);
+        }
+        this.hasOverflowingStartTabTitle = isOverflowStart;
+        this.hasOverflowingEndTabTitle = isOverflowEnd;
+    }
     getIndexOfTabTitle(el, tabTitles = this.tabTitles) {
         // In most cases, since these indexes correlate with tab contents, we want to consider all tab titles.
         // However, when doing relative index operations, it makes sense to pass in this.enabledTabTitles as the 2nd arg.
@@ -234,15 +440,17 @@ const TabNav = /*@__PURE__*/ proxyCustomElement(class TabNav extends HTMLElement
             }
         }
         requestAnimationFrame(() => {
-            this.updateOffsetPosition();
-            this.updateActiveWidth();
+            this.updateActiveIndicator();
             tabTitles[this.selectedTabId].focus();
         });
     }
+    static get assetsDirs() { return ["assets"]; }
     get el() { return this; }
     static get watchers() { return {
+        "messageOverrides": ["onMessagesChange"],
         "selectedTabId": ["selectedTabIdChanged"],
-        "selectedTitle": ["selectedTitleChanged"]
+        "selectedTitle": ["selectedTitleChanged"],
+        "effectiveLocale": ["effectiveLocaleChange"]
     }; }
     static get style() { return tabNavCss; }
 }, [1, "calcite-tab-nav", {
@@ -255,22 +463,45 @@ const TabNav = /*@__PURE__*/ proxyCustomElement(class TabNav extends HTMLElement
         "bordered": [1540],
         "indicatorOffset": [1026, "indicator-offset"],
         "indicatorWidth": [1026, "indicator-width"],
+        "messages": [1040],
+        "messageOverrides": [1040],
+        "defaultMessages": [32],
+        "effectiveLocale": [32],
+        "hasOverflowingStartTabTitle": [32],
+        "hasOverflowingEndTabTitle": [32],
         "selectedTabId": [32]
     }, [[0, "calciteInternalTabsFocusPrevious", "focusPreviousTabHandler"], [0, "calciteInternalTabsFocusNext", "focusNextTabHandler"], [0, "calciteInternalTabsFocusFirst", "focusFirstTabHandler"], [0, "calciteInternalTabsFocusLast", "focusLastTabHandler"], [0, "calciteInternalTabsActivate", "internalActivateTabHandler"], [0, "calciteTabsActivate", "activateTabHandler"], [0, "calciteInternalTabsClose", "internalCloseTabHandler"], [0, "calciteInternalTabTitleRegister", "updateTabTitles"], [16, "calciteInternalTabChange", "globalInternalTabChangeHandler"], [0, "calciteInternalTabIconChanged", "iconStartChangeHandler"]], {
+        "messageOverrides": ["onMessagesChange"],
         "selectedTabId": ["selectedTabIdChanged"],
-        "selectedTitle": ["selectedTitleChanged"]
+        "selectedTitle": ["selectedTitleChanged"],
+        "effectiveLocale": ["effectiveLocaleChange"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["calcite-tab-nav"];
+    const components = ["calcite-tab-nav", "calcite-button", "calcite-icon", "calcite-loader"];
     components.forEach(tagName => { switch (tagName) {
         case "calcite-tab-nav":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, TabNav);
             }
             break;
+        case "calcite-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "calcite-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "calcite-loader":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
     } });
 }
 defineCustomElement();

package/dist/components/tab-nav.js.map

@@ -1 +1 @@
-{"file":"tab-nav.js","mappings":"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","names":[],"sources":["src/components/tab-nav/resources.ts","src/components/tab-nav/tab-nav.scss?tag=calcite-tab-nav&encapsulation=shadow","src/components/tab-nav/tab-nav.tsx"],"sourcesContent":["export const CSS = {\n  container: \"tab-nav\",\n};\n",":host {\n  @apply relative flex;\n}\n\n.scale-s {\n  min-block-size: theme(\"spacing.6\");\n}\n\n.scale-m {\n  min-block-size: theme(\"spacing.8\");\n}\n\n.scale-l {\n  min-block-size: theme(\"spacing.11\");\n}\n\n:host([layout=\"center\"]:not([bordered])) {\n  // `tab-nav` in all scales in layout=\"center\" has a padding of 20px on both ends\n  padding-inline: theme(\"margin.5\");\n\n  //override margin-inline-end for the last child for tab-nav to implement the 20px padding on both ends instead\n  .tab-nav {\n    ::slotted(calcite-tab-title:last-child) {\n      margin-inline-end: theme(\"margin.0\");\n    }\n  }\n}\n\n:host(:not([bordered])) {\n  .scale-l {\n    ::slotted(calcite-tab-title) {\n      margin-inline-end: theme(\"margin.6\");\n    }\n  }\n  .scale-m {\n    ::slotted(calcite-tab-title) {\n      margin-inline-end: theme(\"margin.5\");\n    }\n  }\n  .scale-s {\n    ::slotted(calcite-tab-title) {\n      margin-inline-end: theme(\"margin.4\");\n    }\n  }\n}\n\n.tab-nav {\n  @apply flex\n    w-full\n    justify-start\n    overflow-auto;\n}\n\n// prevent indicator overflow in horizontal scrolling situations\n.tab-nav-active-indicator-container {\n  @apply absolute\n    inset-x-0\n    bottom-0\n    h-0.5\n    w-full\n    overflow-hidden;\n}\n\n.tab-nav-active-indicator {\n  @apply bg-brand\n    absolute\n    bottom-0\n    block\n    h-0.5\n    transition-all\n    ease-out;\n}\n\n:host([layout=\"center\"]) .tab-nav {\n  @apply justify-evenly;\n}\n\n:host .position-bottom .tab-nav-active-indicator {\n  inset-block-end: unset;\n  @apply top-0;\n}\n\n:host .position-bottom .tab-nav-active-indicator-container {\n  inset-block-end: unset;\n  @apply top-0;\n}\n\n:host([bordered]) .tab-nav-active-indicator-container {\n  inset-block-end: unset; // display active blue line above instead of below\n}\n\n:host([bordered]) .position-bottom .tab-nav-active-indicator-container {\n  inset-block-end: 0; // display active blue line below instead of above\n  inset-block-start: unset;\n}\n\n@media (forced-colors: active) {\n  .tab-nav-active-indicator {\n    background-color: highlight;\n  }\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  filterDirectChildren,\n  focusElementInGroup,\n  FocusElementInGroupDestination,\n  getElementDir,\n} from \"../../utils/dom\";\nimport { createObserver } from \"../../utils/observers\";\nimport { Scale } from \"../interfaces\";\nimport { TabChangeEventDetail, TabCloseEventDetail } from \"../tab/interfaces\";\nimport { TabID, TabLayout, TabPosition } from \"../tabs/interfaces\";\nimport { CSS } from \"./resources\";\n\n/**\n * @slot - A slot for adding `calcite-tab-title`s.\n */\n@Component({\n  tag: \"calcite-tab-nav\",\n  styleUrl: \"tab-nav.scss\",\n  shadow: true,\n})\nexport class TabNav {\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Specifies the name when saving selected `calcite-tab` data to `localStorage`.\n   */\n  @Prop({ reflect: true }) storageId: string;\n\n  /**\n   * Specifies text to update multiple components to keep in sync if one changes.\n   */\n  @Prop({ reflect: true }) syncId: string;\n\n  /**\n   * Specifies the component's selected `calcite-tab-title`.\n   *\n   * @readonly\n   */\n  @Prop({ mutable: true }) selectedTitle: HTMLCalciteTabTitleElement = null;\n\n  /**\n   * Specifies the size of the component inherited from the parent `calcite-tabs`, defaults to `m`.\n   *\n   * @internal\n   */\n  @Prop() scale: Scale = \"m\";\n\n  /**\n   * @internal\n   */\n  @Prop({ reflect: true, mutable: true }) layout: TabLayout = \"inline\";\n\n  /**\n   * Specifies the position of `calcite-tab-nav` and `calcite-tab-title` components in relation to, and is inherited from the parent `calcite-tabs`, defaults to `top`.\n   *\n   *  @internal\n   */\n  @Prop() position: TabPosition = \"bottom\";\n\n  /**\n   * @internal\n   */\n  @Prop({ reflect: true, mutable: true }) bordered = false;\n\n  /**\n   * @internal\n   */\n  @Prop({ mutable: true }) indicatorOffset: number;\n\n  /**\n   * @internal\n   */\n  @Prop({ mutable: true }) indicatorWidth: number;\n\n  @Watch(\"selectedTabId\")\n  async selectedTabIdChanged(): Promise<void> {\n    if (\n      localStorage &&\n      this.storageId &&\n      this.selectedTabId !== undefined &&\n      this.selectedTabId !== null\n    ) {\n      localStorage.setItem(`calcite-tab-nav-${this.storageId}`, JSON.stringify(this.selectedTabId));\n    }\n\n    this.calciteInternalTabChange.emit({\n      tab: this.selectedTabId,\n    });\n\n    this.selectedTitle = await this.getTabTitleById(this.selectedTabId);\n  }\n\n  @Watch(\"selectedTitle\")\n  selectedTitleChanged(): void {\n    this.updateOffsetPosition();\n    this.updateActiveWidth();\n    // reset the animation time on tab selection\n    this.activeIndicatorEl.style.transitionDuration = `${this.animationActiveDuration}s`;\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    this.parentTabsEl = this.el.closest(\"calcite-tabs\");\n    this.resizeObserver?.observe(this.el);\n  }\n\n  componentWillLoad(): void {\n    const storageKey = `calcite-tab-nav-${this.storageId}`;\n    if (localStorage && this.storageId && localStorage.getItem(storageKey)) {\n      const storedTab = JSON.parse(localStorage.getItem(storageKey));\n      this.selectedTabId = storedTab;\n    }\n  }\n\n  componentWillRender(): void {\n    const { parentTabsEl } = this;\n\n    this.layout = parentTabsEl?.layout;\n    this.bordered = parentTabsEl?.bordered;\n    // fix issue with active tab-title not lining up with blue indicator\n    if (this.selectedTitle) {\n      this.updateOffsetPosition();\n    }\n  }\n\n  componentDidRender(): void {\n    // if every tab title is active select the first tab.\n    if (\n      this.tabTitles.length &&\n      this.tabTitles.every((title) => !title.selected) &&\n      !this.selectedTabId\n    ) {\n      this.tabTitles[0].getTabIdentifier().then((tab) => {\n        this.calciteInternalTabChange.emit({\n          tab,\n        });\n      });\n    }\n  }\n\n  disconnectedCallback(): void {\n    this.resizeObserver?.disconnect();\n  }\n\n  render(): VNode {\n    const dir = getElementDir(this.el);\n    const width = `${this.indicatorWidth}px`;\n    const offset = `${this.indicatorOffset}px`;\n    const indicatorStyle = dir !== \"rtl\" ? { width, left: offset } : { width, right: offset };\n    return (\n      <Host role=\"tablist\">\n        <div\n          class={{\n            [CSS.container]: true,\n            [`scale-${this.scale}`]: true,\n            [`position-${this.position}`]: true,\n          }}\n          onScroll={this.handleContainerScroll}\n          // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n          ref={(el: HTMLDivElement) => (this.tabNavEl = el)}\n        >\n          <slot />\n          <div\n            class=\"tab-nav-active-indicator-container\"\n            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n            ref={(el) => (this.activeIndicatorContainerEl = el)}\n          >\n            <div\n              class=\"tab-nav-active-indicator\"\n              style={indicatorStyle}\n              // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n              ref={(el) => (this.activeIndicatorEl = el as HTMLElement)}\n            />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"calciteInternalTabsFocusPrevious\")\n  focusPreviousTabHandler(event: CustomEvent): void {\n    this.handleTabFocus(event, event.target as HTMLCalciteTabTitleElement, \"previous\");\n  }\n\n  @Listen(\"calciteInternalTabsFocusNext\")\n  focusNextTabHandler(event: CustomEvent): void {\n    this.handleTabFocus(event, event.target as HTMLCalciteTabTitleElement, \"next\");\n  }\n\n  @Listen(\"calciteInternalTabsFocusFirst\")\n  focusFirstTabHandler(event: CustomEvent): void {\n    this.handleTabFocus(event, event.target as HTMLCalciteTabTitleElement, \"first\");\n  }\n\n  @Listen(\"calciteInternalTabsFocusLast\")\n  focusLastTabHandler(event: CustomEvent): void {\n    this.handleTabFocus(event, event.target as HTMLCalciteTabTitleElement, \"last\");\n  }\n\n  @Listen(\"calciteInternalTabsActivate\")\n  internalActivateTabHandler(event: CustomEvent<TabChangeEventDetail>): void {\n    this.selectedTabId = event.detail.tab\n      ? event.detail.tab\n      : this.getIndexOfTabTitle(event.target as HTMLCalciteTabTitleElement);\n    event.stopPropagation();\n  }\n\n  @Listen(\"calciteTabsActivate\")\n  activateTabHandler(event: CustomEvent<void>): void {\n    this.calciteTabChange.emit();\n    event.stopPropagation();\n  }\n\n  @Listen(\"calciteInternalTabsClose\")\n  internalCloseTabHandler(event: CustomEvent<TabCloseEventDetail>): void {\n    const closedTabTitleEl = event.target as HTMLCalciteTabTitleElement;\n    this.handleTabTitleClose(closedTabTitleEl);\n    event.stopPropagation();\n  }\n\n  /**\n   * Check for active tabs on register and update selected\n   *\n   * @param event\n   */\n  @Listen(\"calciteInternalTabTitleRegister\")\n  updateTabTitles(event: CustomEvent<TabID>): void {\n    if ((event.target as HTMLCalciteTabTitleElement).selected) {\n      this.selectedTabId = event.detail;\n    }\n  }\n\n  @Listen(\"calciteInternalTabChange\", { target: \"body\" })\n  globalInternalTabChangeHandler(event: CustomEvent<TabChangeEventDetail>): void {\n    if (\n      this.syncId &&\n      event.target !== this.el &&\n      (event.target as HTMLCalciteTabNavElement).syncId === this.syncId &&\n      this.selectedTabId !== event.detail.tab\n    ) {\n      this.selectedTabId = event.detail.tab;\n    }\n    event.stopPropagation();\n  }\n\n  @Listen(\"calciteInternalTabIconChanged\")\n  iconStartChangeHandler(): void {\n    this.updateActiveWidth();\n    this.updateOffsetPosition();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Emits when the selected `calcite-tab` changes.\n   */\n  @Event({ cancelable: false }) calciteTabChange: EventEmitter<void>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalTabChange: EventEmitter<TabChangeEventDetail>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteTabNavElement;\n\n  @State() selectedTabId: TabID;\n\n  parentTabsEl: HTMLCalciteTabsElement;\n\n  tabNavEl: HTMLDivElement;\n\n  activeIndicatorEl: HTMLElement;\n\n  activeIndicatorContainerEl: HTMLDivElement;\n\n  animationActiveDuration = 0.3;\n\n  resizeObserver = createObserver(\"resize\", () => {\n    if (!this.activeIndicatorEl) {\n      return;\n    }\n\n    // remove active indicator transition duration during resize to prevent wobble\n    this.activeIndicatorEl.style.transitionDuration = \"0s\";\n    this.updateActiveWidth();\n    this.updateOffsetPosition();\n  });\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  handleTabFocus = (\n    event: CustomEvent,\n    el: HTMLCalciteTabTitleElement,\n    destination: FocusElementInGroupDestination,\n  ): void => {\n    focusElementInGroup(this.enabledTabTitles, el, destination);\n\n    event.stopPropagation();\n  };\n\n  handleContainerScroll = (): void => {\n    // remove active indicator transition duration while container is scrolling to prevent wobble\n    this.activeIndicatorEl.style.transitionDuration = \"0s\";\n    this.updateOffsetPosition();\n  };\n\n  updateOffsetPosition(): void {\n    const dir = getElementDir(this.el);\n    const navWidth = this.activeIndicatorContainerEl?.offsetWidth;\n    const tabLeft = this.selectedTitle?.offsetLeft;\n    const tabWidth = this.selectedTitle?.offsetWidth;\n    const offsetRight = navWidth - (tabLeft + tabWidth);\n    this.indicatorOffset =\n      dir !== \"rtl\" ? tabLeft - this.tabNavEl?.scrollLeft : offsetRight + this.tabNavEl?.scrollLeft;\n  }\n\n  updateActiveWidth(): void {\n    this.indicatorWidth = this.selectedTitle?.offsetWidth;\n  }\n\n  getIndexOfTabTitle(el: HTMLCalciteTabTitleElement, tabTitles = this.tabTitles): number {\n    // In most cases, since these indexes correlate with tab contents, we want to consider all tab titles.\n    // However, when doing relative index operations, it makes sense to pass in this.enabledTabTitles as the 2nd arg.\n    return tabTitles.indexOf(el);\n  }\n\n  async getTabTitleById(id: TabID): Promise<HTMLCalciteTabTitleElement | null> {\n    return Promise.all(this.tabTitles.map((el) => el.getTabIdentifier())).then((ids) => {\n      return this.tabTitles[ids.indexOf(id)];\n    });\n  }\n\n  get tabTitles(): HTMLCalciteTabTitleElement[] {\n    return filterDirectChildren<HTMLCalciteTabTitleElement>(this.el, \"calcite-tab-title\");\n  }\n\n  get enabledTabTitles(): HTMLCalciteTabTitleElement[] {\n    return filterDirectChildren<HTMLCalciteTabTitleElement>(\n      this.el,\n      \"calcite-tab-title:not([disabled])\",\n    ).filter((tabTitle) => !tabTitle.closed);\n  }\n\n  private handleTabTitleClose(closedTabTitleEl: HTMLCalciteTabTitleElement): void {\n    const { tabTitles } = this;\n    const selectionModified = closedTabTitleEl.selected;\n\n    const visibleTabTitlesIndices = tabTitles.reduce(\n      (tabTitleIndices: number[], tabTitle, index) =>\n        !tabTitle.closed ? [...tabTitleIndices, index] : tabTitleIndices,\n      [],\n    );\n    const totalVisibleTabTitles = visibleTabTitlesIndices.length;\n\n    if (totalVisibleTabTitles === 1 && tabTitles[visibleTabTitlesIndices[0]].closable) {\n      tabTitles[visibleTabTitlesIndices[0]].closable = false;\n      this.selectedTabId = visibleTabTitlesIndices[0];\n\n      if (selectionModified) {\n        tabTitles[visibleTabTitlesIndices[0]].activateTab();\n      }\n    } else if (totalVisibleTabTitles > 1) {\n      const closedTabTitleIndex = tabTitles.findIndex((el) => el === closedTabTitleEl);\n      const nextTabTitleIndex = visibleTabTitlesIndices.find(\n        (value) => value > closedTabTitleIndex,\n      );\n\n      if (this.selectedTabId === closedTabTitleIndex) {\n        this.selectedTabId = nextTabTitleIndex ? nextTabTitleIndex : totalVisibleTabTitles - 1;\n        tabTitles[this.selectedTabId].activateTab();\n      }\n    }\n\n    requestAnimationFrame(() => {\n      this.updateOffsetPosition();\n      this.updateActiveWidth();\n      tabTitles[this.selectedTabId].focus();\n    });\n  }\n}\n"],"version":3}
+{"file":"tab-nav.js","mappings":"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","names":[],"sources":["src/components/tab-nav/resources.ts","src/components/tab-nav/tab-nav.scss?tag=calcite-tab-nav&encapsulation=shadow","src/components/tab-nav/tab-nav.tsx"],"sourcesContent":["export const ICON = {\n  chevronRight: \"chevron-right\",\n  chevronLeft: \"chevron-left\",\n};\n\nexport const CSS = {\n  activeIndicatorContainer: \"tab-nav-active-indicator-container\",\n  container: \"tab-nav\",\n  containerHasEndTabTitleOverflow: \"tab-nav--end-overflow\",\n  containerHasStartTabTitleOverflow: \"tab-nav--start-overflow\",\n  scrollButton: \"scroll-button\",\n  scrollButtonContainer: \"scroll-button-container\",\n  scrollBackwardContainerButton: \"scroll-button-container--backward\",\n  scrollForwardContainerButton: \"scroll-button-container--forward\",\n  tabTitleSlotWrapper: \"tab-titles-slot-wrapper\",\n};\n",":host {\n  --calcite-internal-tab-nav-gradient-start-side: left;\n  --calcite-internal-tab-nav-gradient-end-side: right;\n\n  @apply relative flex;\n}\n\n.scale-s {\n  --calcite-internal-tab-nav-scroller-button-width: #{$calcite-size-24};\n  min-block-size: theme(\"spacing.6\");\n}\n\n.scale-m {\n  --calcite-internal-tab-nav-scroller-button-width: #{$calcite-size-32};\n  min-block-size: theme(\"spacing.8\");\n}\n\n.scale-l {\n  --calcite-internal-tab-nav-scroller-button-width: #{$calcite-size-44};\n  min-block-size: theme(\"spacing.11\");\n}\n\n.calcite--rtl {\n  --calcite-internal-tab-nav-gradient-start-side: right;\n  --calcite-internal-tab-nav-gradient-end-side: left;\n}\n\n$last-mask-color-stop-position: 51%; // we go beyond the half point to ensure the mask color stops overlap when both start and end are overflowing\n\n.tab-nav--start-overflow {\n  .tab-nav-active-indicator-container,\n  .tab-titles-slot-wrapper {\n    mask-image: linear-gradient(\n      to var(--calcite-internal-tab-nav-gradient-end-side),\n      transparent,\n      transparent var(--calcite-internal-tab-nav-scroller-button-width),\n      white var(--calcite-internal-tab-nav-scroller-button-width),\n      white $last-mask-color-stop-position\n    );\n  }\n}\n\n.tab-nav--end-overflow {\n  .tab-nav-active-indicator-container,\n  .tab-titles-slot-wrapper {\n    mask-image: linear-gradient(\n      to var(--calcite-internal-tab-nav-gradient-start-side),\n      transparent,\n      transparent var(--calcite-internal-tab-nav-scroller-button-width),\n      white var(--calcite-internal-tab-nav-scroller-button-width),\n      white $last-mask-color-stop-position\n    );\n  }\n}\n\n.tab-nav--start-overflow.tab-nav--end-overflow {\n  .tab-nav-active-indicator-container,\n  .tab-titles-slot-wrapper {\n    mask-image: linear-gradient(\n        to var(--calcite-internal-tab-nav-gradient-end-side),\n        transparent,\n        transparent var(--calcite-internal-tab-nav-scroller-button-width),\n        white var(--calcite-internal-tab-nav-scroller-button-width),\n        white $last-mask-color-stop-position,\n        transparent $last-mask-color-stop-position\n      ),\n      linear-gradient(\n        to var(--calcite-internal-tab-nav-gradient-start-side),\n        transparent,\n        transparent var(--calcite-internal-tab-nav-scroller-button-width),\n        white var(--calcite-internal-tab-nav-scroller-button-width),\n        white $last-mask-color-stop-position,\n        transparent $last-mask-color-stop-position\n      );\n  }\n}\n\n.tab-nav::-webkit-scrollbar {\n  display: none;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n}\n\n:host([layout=\"center\"]) {\n  ::slotted(calcite-tab-title) {\n    display: flex;\n    flex-grow: 1;\n    flex-shrink: 0;\n    min-inline-size: auto;\n    white-space: nowrap;\n  }\n\n  ::slotted(calcite-tab-title[selected]) {\n    overflow: unset;\n  }\n}\n\n:host(:not([bordered])) {\n  .scale-l {\n    --calcite-internal-tab-nav-gap: var(--calcite-size-xxl);\n  }\n  .scale-m {\n    --calcite-internal-tab-nav-gap: var(--calcite-size-xl);\n  }\n  .scale-s {\n    --calcite-internal-tab-nav-gap: var(--calcite-size-lg);\n  }\n\n  .tab-titles-slot-wrapper {\n    gap: var(--calcite-internal-tab-nav-gap);\n  }\n}\n\n:host([layout=\"center\"]:not([bordered])) {\n  .tab-titles-slot-wrapper {\n    padding-inline: var(--calcite-spacing-xxl);\n  }\n}\n\n.tab-nav,\n.tab-titles-slot-wrapper {\n  @apply flex\n    w-full\n    justify-start\n    whitespace-nowrap\n    overflow-hidden;\n}\n\n// prevent indicator overflow in horizontal scrolling situations\n.tab-nav-active-indicator-container {\n  @apply absolute\n    bottom-0\n    h-0.5\n    inset-x-0\n    overflow-hidden\n    w-full;\n}\n\n.tab-nav-active-indicator {\n  @apply absolute\n    bg-brand\n    bottom-0\n    block\n    h-0.5\n    ease-out\n    transition-all;\n}\n\n.scroll-button-container {\n  @apply absolute bottom-0 top-0;\n\n  calcite-button {\n    --calcite-offset-invert-focus: 1;\n    --calcite-color-text-1: var(--calcite-color-text-3);\n\n    block-size: 100%;\n\n    &:hover {\n      --calcite-color-text-1: unset;\n      --calcite-color-foreground-1: var(--calcite-color-transparent-hover);\n      --calcite-color-foreground-3: var(--calcite-color-transparent);\n    }\n  }\n}\n\n.scroll-button-container--forward {\n  inset-inline-end: 0;\n  z-index: var(--calcite-z-index);\n}\n\n.scroll-button-container--backward {\n  inset-inline-start: 0;\n  z-index: var(--calcite-z-index);\n}\n\n:host(:not([bordered])) {\n  .scroll-button-container--backward,\n  .scroll-button-container--forward {\n    &::before {\n      background-color: var(--calcite-color-border-3);\n      content: \"\";\n      inline-size: var(--calcite-border-width-sm);\n      inset-block-start: var(--calcite-border-width-md);\n      inset-block-end: var(--calcite-border-width-md);\n      position: absolute;\n    }\n  }\n\n  .scroll-button-container--backward::before {\n    inset-inline-end: 0;\n  }\n\n  .scroll-button-container--forward::before {\n    inset-inline-start: 0;\n  }\n}\n\n:host .position-bottom .tab-nav-active-indicator {\n  inset-block-end: unset;\n  @apply top-0;\n}\n\n:host .position-bottom .tab-nav-active-indicator-container {\n  inset-block-end: unset;\n  @apply top-0;\n}\n\n:host([bordered]) .tab-nav-active-indicator-container {\n  inset-block-end: unset; // display active blue line above instead of below\n}\n\n:host([bordered]) .position-bottom .tab-nav-active-indicator-container {\n  inset-block-end: 0; // display active blue line below instead of above\n  inset-block-start: unset;\n}\n\n@media (forced-colors: active) {\n  .tab-nav-active-indicator {\n    background-color: highlight;\n  }\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  readTask,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\n\nimport {\n  Direction,\n  filterDirectChildren,\n  focusElementInGroup,\n  FocusElementInGroupDestination,\n  getElementDir,\n} from \"../../utils/dom\";\nimport { createObserver } from \"../../utils/observers\";\nimport { Scale } from \"../interfaces\";\nimport { TabChangeEventDetail, TabCloseEventDetail } from \"../tab/interfaces\";\nimport { TabID, TabLayout, TabPosition } from \"../tabs/interfaces\";\nimport { CSS, ICON } from \"./resources\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { TabNavMessages } from \"./assets/tab-nav/t9n\";\nimport {\n  calciteSize24,\n  calciteSize32,\n  calciteSize44,\n} from \"@esri/calcite-design-tokens/dist/es6/core\";\nimport { CSS_UTILITY } from \"../../utils/resources\";\n\n/**\n * @slot - A slot for adding `calcite-tab-title`s.\n */\n@Component({\n  tag: \"calcite-tab-nav\",\n  styleUrl: \"tab-nav.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class TabNav implements LocalizedComponent, T9nComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Specifies the name when saving selected `calcite-tab` data to `localStorage`.\n   */\n  @Prop({ reflect: true }) storageId: string;\n\n  /**\n   * Specifies text to update multiple components to keep in sync if one changes.\n   */\n  @Prop({ reflect: true }) syncId: string;\n\n  /**\n   * Specifies the component's selected `calcite-tab-title`.\n   *\n   * @readonly\n   */\n  @Prop({ mutable: true }) selectedTitle: HTMLCalciteTabTitleElement = null;\n\n  /**\n   * Specifies the size of the component inherited from the parent `calcite-tabs`, defaults to `m`.\n   *\n   * @internal\n   */\n  @Prop() scale: Scale = \"m\";\n\n  /**\n   * @internal\n   */\n  @Prop({ reflect: true, mutable: true }) layout: TabLayout = \"inline\";\n\n  /**\n   * Specifies the position of `calcite-tab-nav` and `calcite-tab-title` components in relation to, and is inherited from the parent `calcite-tabs`, defaults to `top`.\n   *\n   *  @internal\n   */\n  @Prop() position: TabPosition = \"bottom\";\n\n  /**\n   * @internal\n   */\n  @Prop({ reflect: true, mutable: true }) bordered = false;\n\n  /**\n   * @internal\n   */\n  @Prop({ mutable: true }) indicatorOffset: number;\n\n  /**\n   * @internal\n   */\n  @Prop({ mutable: true }) indicatorWidth: number;\n\n  /**\n   * Made into a prop for testing purposes only.\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: TabNavMessages;\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<TabNavMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  @Watch(\"selectedTabId\")\n  async selectedTabIdChanged(): Promise<void> {\n    if (\n      localStorage &&\n      this.storageId &&\n      this.selectedTabId !== undefined &&\n      this.selectedTabId !== null\n    ) {\n      localStorage.setItem(`calcite-tab-nav-${this.storageId}`, JSON.stringify(this.selectedTabId));\n    }\n\n    this.calciteInternalTabChange.emit({\n      tab: this.selectedTabId,\n    });\n\n    this.selectedTitle = await this.getTabTitleById(this.selectedTabId);\n  }\n\n  @Watch(\"selectedTitle\")\n  selectedTitleChanged(): void {\n    this.updateActiveIndicator();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    this.parentTabsEl = this.el.closest(\"calcite-tabs\");\n    this.resizeObserver?.observe(this.el);\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    const storageKey = `calcite-tab-nav-${this.storageId}`;\n    if (localStorage && this.storageId && localStorage.getItem(storageKey)) {\n      const storedTab = JSON.parse(localStorage.getItem(storageKey));\n      this.selectedTabId = storedTab;\n    }\n    await setUpMessages(this);\n  }\n\n  componentDidLoad(): void {\n    this.scrollTabTitleIntoView(this.selectedTitle, \"instant\");\n  }\n\n  componentWillRender(): void {\n    const { parentTabsEl } = this;\n\n    this.layout = parentTabsEl?.layout;\n    this.bordered = parentTabsEl?.bordered;\n    this.dir = getElementDir(this.el);\n\n    if (this.selectedTitle) {\n      this.updateActiveIndicator();\n    }\n  }\n\n  componentDidRender(): void {\n    // if every tab title is active select the first tab.\n    if (\n      this.tabTitles.length &&\n      this.tabTitles.every((title) => !title.selected) &&\n      !this.selectedTabId\n    ) {\n      this.tabTitles[0].getTabIdentifier().then((tab) => {\n        this.calciteInternalTabChange.emit({\n          tab,\n        });\n      });\n    }\n  }\n\n  disconnectedCallback(): void {\n    this.resizeObserver?.disconnect();\n    disconnectLocalized(this);\n    disconnectMessages(this);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  //--------------------------------------------------------------------------\n\n  render(): VNode {\n    const width = `${this.indicatorWidth}px`;\n    const offset = `${this.indicatorOffset}px`;\n    const indicatorStyle = this.dir !== \"rtl\" ? { width, left: offset } : { width, right: offset };\n\n    return (\n      <Host role=\"tablist\">\n        <div\n          class={{\n            [CSS.container]: true,\n            [CSS.containerHasStartTabTitleOverflow]: !!this.hasOverflowingStartTabTitle,\n            [CSS.containerHasEndTabTitleOverflow]: !!this.hasOverflowingEndTabTitle,\n            [`scale-${this.scale}`]: true,\n            [`position-${this.position}`]: true,\n            [CSS_UTILITY.rtl]: this.dir === \"rtl\",\n          }}\n          // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n          ref={this.storeContainerRef}\n        >\n          {this.renderScrollButton(\"start\")}\n          <div\n            class={{\n              [CSS.tabTitleSlotWrapper]: true,\n            }}\n            onScroll={this.onTabTitleScroll}\n            onWheel={this.onTabTitleWheel}\n            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n            ref={this.storeTabTitleWrapperRef}\n          >\n            <slot onSlotchange={this.onSlotChange} />\n          </div>\n          <div\n            class={{\n              [CSS.activeIndicatorContainer]: true,\n            }}\n            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n            ref={(el) => (this.activeIndicatorContainerEl = el)}\n          >\n            <div\n              class=\"tab-nav-active-indicator\"\n              style={indicatorStyle}\n              // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n              ref={(el) => (this.activeIndicatorEl = el as HTMLElement)}\n            />\n          </div>\n          {this.renderScrollButton(\"end\")}\n        </div>\n      </Host>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"calciteInternalTabsFocusPrevious\")\n  focusPreviousTabHandler(event: CustomEvent): void {\n    this.handleTabFocus(event, event.target as HTMLCalciteTabTitleElement, \"previous\");\n  }\n\n  @Listen(\"calciteInternalTabsFocusNext\")\n  focusNextTabHandler(event: CustomEvent): void {\n    this.handleTabFocus(event, event.target as HTMLCalciteTabTitleElement, \"next\");\n  }\n\n  @Listen(\"calciteInternalTabsFocusFirst\")\n  focusFirstTabHandler(event: CustomEvent): void {\n    this.handleTabFocus(event, event.target as HTMLCalciteTabTitleElement, \"first\");\n  }\n\n  @Listen(\"calciteInternalTabsFocusLast\")\n  focusLastTabHandler(event: CustomEvent): void {\n    this.handleTabFocus(event, event.target as HTMLCalciteTabTitleElement, \"last\");\n  }\n\n  @Listen(\"calciteInternalTabsActivate\")\n  internalActivateTabHandler(event: CustomEvent<TabChangeEventDetail>): void {\n    const activatedTabTitle = event.target as HTMLCalciteTabTitleElement;\n\n    this.selectedTabId = event.detail.tab\n      ? event.detail.tab\n      : this.getIndexOfTabTitle(activatedTabTitle);\n    event.stopPropagation();\n\n    this.scrollTabTitleIntoView(activatedTabTitle);\n  }\n\n  private scrollTabTitleIntoView(\n    activatedTabTitle: HTMLCalciteTabTitleElement,\n    behavior: ScrollBehavior = \"smooth\",\n  ): void {\n    if (!activatedTabTitle) {\n      return;\n    }\n\n    readTask(() => {\n      const isLTR = this.dir === \"ltr\";\n      const tabTitleContainer = this.tabTitleContainerEl;\n      const containerBounds = tabTitleContainer.getBoundingClientRect();\n      const tabTitleBounds = activatedTabTitle.getBoundingClientRect();\n      const scrollPosition = tabTitleContainer.scrollLeft;\n      const overflowingStartTabTitle = isLTR\n        ? this.hasOverflowingStartTabTitle\n        : this.hasOverflowingEndTabTitle;\n      const overflowingEndTabTitle = isLTR\n        ? this.hasOverflowingEndTabTitle\n        : this.hasOverflowingStartTabTitle;\n\n      if (\n        tabTitleBounds.left <\n        containerBounds.left + (overflowingStartTabTitle ? this.scrollerButtonWidth : 0)\n      ) {\n        const left =\n          scrollPosition + (tabTitleBounds.left - containerBounds.left) - this.scrollerButtonWidth;\n        tabTitleContainer.scrollTo({ left, behavior });\n      } else if (\n        tabTitleBounds.right >\n        containerBounds.right - (overflowingEndTabTitle ? this.scrollerButtonWidth : 0)\n      ) {\n        const left =\n          scrollPosition +\n          (tabTitleBounds.right - containerBounds.right) +\n          this.scrollerButtonWidth;\n        tabTitleContainer.scrollTo({ left, behavior });\n      }\n    });\n  }\n\n  @Listen(\"calciteTabsActivate\")\n  activateTabHandler(event: CustomEvent<void>): void {\n    this.calciteTabChange.emit();\n    event.stopPropagation();\n  }\n\n  @Listen(\"calciteInternalTabsClose\")\n  internalCloseTabHandler(event: CustomEvent<TabCloseEventDetail>): void {\n    const closedTabTitleEl = event.target as HTMLCalciteTabTitleElement;\n    this.handleTabTitleClose(closedTabTitleEl);\n    event.stopPropagation();\n  }\n\n  /**\n   * Check for active tabs on register and update selected\n   *\n   * @param event\n   */\n  @Listen(\"calciteInternalTabTitleRegister\")\n  updateTabTitles(event: CustomEvent<TabID>): void {\n    if ((event.target as HTMLCalciteTabTitleElement).selected) {\n      this.selectedTabId = event.detail;\n    }\n  }\n\n  @Listen(\"calciteInternalTabChange\", { target: \"body\" })\n  globalInternalTabChangeHandler(event: CustomEvent<TabChangeEventDetail>): void {\n    if (\n      this.syncId &&\n      event.target !== this.el &&\n      (event.target as HTMLCalciteTabNavElement).syncId === this.syncId &&\n      this.selectedTabId !== event.detail.tab\n    ) {\n      this.selectedTabId = event.detail.tab;\n    }\n    event.stopPropagation();\n  }\n\n  @Listen(\"calciteInternalTabIconChanged\")\n  iconStartChangeHandler(): void {\n    this.updateActiveIndicator();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Emits when the selected `calcite-tab` changes.\n   */\n  @Event({ cancelable: false }) calciteTabChange: EventEmitter<void>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalTabChange: EventEmitter<TabChangeEventDetail>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteTabNavElement;\n\n  @State() defaultMessages: TabNavMessages;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() private hasOverflowingStartTabTitle = false;\n\n  @State() private hasOverflowingEndTabTitle = false;\n\n  @State() private selectedTabId: TabID;\n\n  private activeIndicatorEl: HTMLElement;\n\n  private activeIndicatorContainerEl: HTMLDivElement;\n\n  private dir: Direction = \"ltr\";\n\n  private containerEl: HTMLDivElement;\n\n  private lastScrollWheelAxis: \"x\" | \"y\" = \"x\";\n\n  private parentTabsEl: HTMLCalciteTabsElement;\n\n  private tabTitleContainerEl: HTMLDivElement;\n\n  private intersectionObserver: IntersectionObserver;\n\n  private resizeObserver = createObserver(\"resize\", () => {\n    this.updateScrollingState();\n\n    if (!this.activeIndicatorEl) {\n      return;\n    }\n\n    this.updateActiveIndicator();\n  });\n\n  private get scrollerButtonWidth(): number {\n    const { scale } = this;\n    return parseInt(scale === \"s\" ? calciteSize24 : scale === \"m\" ? calciteSize32 : calciteSize44);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private updateActiveIndicator(): void {\n    const tabTitleScrollLeft = this.tabTitleContainerEl?.scrollLeft;\n    const containerScrollLeft = this.containerEl?.scrollLeft;\n    const navWidth = this.activeIndicatorContainerEl?.offsetWidth;\n    const tabLeft = this.selectedTitle?.offsetLeft;\n    const tabWidth = this.selectedTitle?.offsetWidth;\n    const offsetRight = navWidth - tabLeft - tabWidth;\n    const offsetBase = this.dir === \"ltr\" ? tabLeft : offsetRight;\n    const multiplier = this.dir === \"ltr\" ? -1 : 1;\n\n    this.indicatorOffset = offsetBase + multiplier * (containerScrollLeft + tabTitleScrollLeft);\n    this.indicatorWidth = this.selectedTitle?.offsetWidth;\n  }\n\n  private onTabTitleWheel = (event: WheelEvent): void => {\n    event.preventDefault();\n\n    const { deltaX, deltaY } = event;\n    const x = Math.abs(deltaX);\n    const y = Math.abs(deltaY);\n\n    let scrollBy: number;\n\n    if (x === y) {\n      scrollBy = this.lastScrollWheelAxis === \"x\" ? deltaX : deltaY;\n    } else if (x > y) {\n      scrollBy = deltaX;\n      this.lastScrollWheelAxis = \"x\";\n    } else {\n      scrollBy = deltaY;\n      this.lastScrollWheelAxis = \"y\";\n    }\n\n    const scrollByX = (this.dir === \"rtl\" ? -1 : 1) * scrollBy;\n    (event.currentTarget as HTMLDivElement).scrollBy(scrollByX, 0);\n    requestAnimationFrame(() => this.updateActiveIndicator());\n  };\n\n  private onSlotChange = (event: Event): void => {\n    this.intersectionObserver?.disconnect();\n\n    const slottedChildren = (event.target as HTMLSlotElement).assignedElements();\n    slottedChildren.forEach((child) => {\n      this.intersectionObserver?.observe(child);\n    });\n  };\n\n  private storeContainerRef = (el: HTMLDivElement) => (this.containerEl = el);\n\n  private storeTabTitleWrapperRef = (el: HTMLDivElement) => {\n    this.tabTitleContainerEl = el;\n    this.intersectionObserver = createObserver(\"intersection\", () => this.updateScrollingState(), {\n      root: el,\n      threshold: [0, 0.5, 1],\n    });\n  };\n\n  private updateScrollingState(): void {\n    const tabTitleContainer = this.tabTitleContainerEl;\n\n    if (!tabTitleContainer) {\n      return;\n    }\n\n    let isOverflowStart: boolean;\n    let isOverflowEnd: boolean;\n\n    const scrollPosition = tabTitleContainer.scrollLeft;\n    const visibleWidth = tabTitleContainer.clientWidth;\n    const totalContentWidth = tabTitleContainer.scrollWidth;\n\n    if (this.dir === \"ltr\") {\n      isOverflowStart = scrollPosition > 0;\n      isOverflowEnd = scrollPosition + visibleWidth < totalContentWidth;\n    } else {\n      isOverflowStart = scrollPosition < 0;\n      isOverflowEnd = scrollPosition !== -(totalContentWidth - visibleWidth);\n    }\n\n    this.hasOverflowingStartTabTitle = isOverflowStart;\n    this.hasOverflowingEndTabTitle = isOverflowEnd;\n  }\n\n  private scrollToTabTitles = (direction: \"forward\" | \"backward\"): void => {\n    readTask(() => {\n      const tabTitleContainer = this.tabTitleContainerEl;\n      const containerBounds = tabTitleContainer.getBoundingClientRect();\n      const tabTitles = Array.from(this.el.querySelectorAll(\"calcite-tab-title\"));\n      const { dir } = this;\n\n      if (direction === \"forward\") {\n        tabTitles.reverse();\n      }\n\n      let closestToEdge: HTMLCalciteTabTitleElement = null;\n\n      tabTitles.forEach((tabTitle) => {\n        const tabTitleBounds = tabTitle.getBoundingClientRect();\n        const containerEndX = containerBounds.x + containerBounds.width;\n        const tabTitleEndX = tabTitleBounds.x + tabTitleBounds.width;\n\n        if (\n          (direction === \"forward\" && dir === \"ltr\") ||\n          (direction === \"backward\" && dir === \"rtl\")\n        ) {\n          const afterContainerEnd = tabTitleBounds.x > containerEndX;\n\n          if (afterContainerEnd) {\n            closestToEdge = tabTitle;\n          } else {\n            const crossingContainerEnd =\n              tabTitleEndX > containerEndX && tabTitleBounds.x > containerBounds.x;\n\n            if (crossingContainerEnd) {\n              closestToEdge = tabTitle;\n            }\n          }\n        } else {\n          const beforeContainerStart = tabTitleEndX < containerBounds.x;\n\n          if (beforeContainerStart) {\n            closestToEdge = tabTitle;\n          } else {\n            const crossingContainerStart =\n              tabTitleEndX < containerEndX && tabTitleBounds.x < containerBounds.x;\n\n            if (crossingContainerStart) {\n              closestToEdge = tabTitle;\n            }\n          }\n        }\n      });\n\n      if (closestToEdge) {\n        const { scrollerButtonWidth } = this;\n        const offsetAdjustment =\n          (direction === \"forward\" && dir === \"ltr\") || (direction === \"backward\" && dir === \"rtl\")\n            ? -scrollerButtonWidth\n            : closestToEdge.offsetWidth - tabTitleContainer.clientWidth + scrollerButtonWidth;\n        const scrollTo = closestToEdge.offsetLeft + offsetAdjustment;\n\n        tabTitleContainer.scrollTo({\n          left: scrollTo,\n          behavior: \"smooth\",\n        });\n      }\n    });\n  };\n\n  private scrollToNextTabTitles = (): void => this.scrollToTabTitles(\"forward\");\n\n  private scrollToPreviousTabTitles = (): void => this.scrollToTabTitles(\"backward\");\n\n  handleTabFocus = (\n    event: CustomEvent,\n    el: HTMLCalciteTabTitleElement,\n    destination: FocusElementInGroupDestination,\n  ): void => {\n    const focused = focusElementInGroup<HTMLCalciteTabTitleElement>(\n      this.enabledTabTitles,\n      el,\n      destination,\n    );\n    this.scrollTabTitleIntoView(focused, \"instant\");\n\n    event.stopPropagation();\n  };\n\n  getIndexOfTabTitle(el: HTMLCalciteTabTitleElement, tabTitles = this.tabTitles): number {\n    // In most cases, since these indexes correlate with tab contents, we want to consider all tab titles.\n    // However, when doing relative index operations, it makes sense to pass in this.enabledTabTitles as the 2nd arg.\n    return tabTitles.indexOf(el);\n  }\n\n  private onTabTitleScroll = (): void => {\n    this.updateActiveIndicator();\n    this.updateScrollingState();\n  };\n\n  async getTabTitleById(id: TabID): Promise<HTMLCalciteTabTitleElement | null> {\n    return Promise.all(this.tabTitles.map((el) => el.getTabIdentifier())).then((ids) => {\n      return this.tabTitles[ids.indexOf(id)];\n    });\n  }\n\n  get tabTitles(): HTMLCalciteTabTitleElement[] {\n    return filterDirectChildren<HTMLCalciteTabTitleElement>(this.el, \"calcite-tab-title\");\n  }\n\n  get enabledTabTitles(): HTMLCalciteTabTitleElement[] {\n    return filterDirectChildren<HTMLCalciteTabTitleElement>(\n      this.el,\n      \"calcite-tab-title:not([disabled])\",\n    ).filter((tabTitle) => !tabTitle.closed);\n  }\n\n  private handleTabTitleClose(closedTabTitleEl: HTMLCalciteTabTitleElement): void {\n    const { tabTitles } = this;\n    const selectionModified = closedTabTitleEl.selected;\n\n    const visibleTabTitlesIndices = tabTitles.reduce(\n      (tabTitleIndices: number[], tabTitle, index) =>\n        !tabTitle.closed ? [...tabTitleIndices, index] : tabTitleIndices,\n      [],\n    );\n    const totalVisibleTabTitles = visibleTabTitlesIndices.length;\n\n    if (totalVisibleTabTitles === 1 && tabTitles[visibleTabTitlesIndices[0]].closable) {\n      tabTitles[visibleTabTitlesIndices[0]].closable = false;\n      this.selectedTabId = visibleTabTitlesIndices[0];\n\n      if (selectionModified) {\n        tabTitles[visibleTabTitlesIndices[0]].activateTab();\n      }\n    } else if (totalVisibleTabTitles > 1) {\n      const closedTabTitleIndex = tabTitles.findIndex((el) => el === closedTabTitleEl);\n\n      const nextTabTitleIndex = visibleTabTitlesIndices.find(\n        (value) => value > closedTabTitleIndex,\n      );\n\n      if (this.selectedTabId === closedTabTitleIndex) {\n        this.selectedTabId = nextTabTitleIndex ? nextTabTitleIndex : totalVisibleTabTitles - 1;\n        tabTitles[this.selectedTabId].activateTab();\n      }\n    }\n\n    requestAnimationFrame(() => {\n      this.updateActiveIndicator();\n      tabTitles[this.selectedTabId].focus();\n    });\n  }\n\n  private renderScrollButton = (overflowDirection: \"start\" | \"end\"): VNode => {\n    const { bordered, messages, hasOverflowingStartTabTitle, hasOverflowingEndTabTitle, scale } =\n      this;\n    const isEnd = overflowDirection === \"end\";\n\n    return (\n      <div\n        class={{\n          [CSS.scrollButtonContainer]: true,\n          [CSS.scrollBackwardContainerButton]: !isEnd,\n          [CSS.scrollForwardContainerButton]: isEnd,\n        }}\n        hidden={(isEnd && !hasOverflowingEndTabTitle) || (!isEnd && !hasOverflowingStartTabTitle)}\n        key={overflowDirection}\n      >\n        <calcite-button\n          appearance={bordered ? \"outline-fill\" : \"transparent\"}\n          aria-label={isEnd ? messages.nextTabTitles : messages.previousTabTitles}\n          class={{\n            [CSS.scrollButton]: true,\n          }}\n          iconFlipRtl=\"both\"\n          iconStart={isEnd ? ICON.chevronRight : ICON.chevronLeft}\n          kind=\"neutral\"\n          onClick={isEnd ? this.scrollToNextTabTitles : this.scrollToPreviousTabTitles}\n          scale={scale}\n          tabIndex={-1}\n        />\n      </div>\n    );\n  };\n}\n"],"version":3}