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

package/dist/esm/calcite-tab_4.entry.js

@@ -1,19 +1,20 @@
 /*!
  * 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 { r as registerInstance, c as createEvent, h, H as Host, g as getElement, F as Fragment } from './index-3c327221.js';
-import { z as nodeListToArray, l as focusElementInGroup, g as getElementDir, A as filterDirectChildren, t as toAriaBoolean } from './dom-630bf0a4.js';
-import { g as guid } from './guid-973b76a4.js';
-import { c as createObserver } from './observers-d504e072.js';
-import { c as connectInteractive, d as disconnectInteractive, I as InteractiveContainer, u as updateHostInteraction } from './interactive-2bae662a.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-a007d3ec.js';
-import { c as connectMessages, d as disconnectMessages, s as setUpMessages, u as updateMessages } from './t9n-0afa2ea5.js';
-import { g as getIconScale } from './component-7d691e96.js';
-import './resources-bffc4b38.js';
-import './browser-2fb34cb9.js';
-import './key-560f8f62.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, e as readTask, F as Fragment } from './index-1dfc644a.js';
+import { z as nodeListToArray, l as focusElementInGroup, g as getElementDir, A as filterDirectChildren, t as toAriaBoolean } from './dom-fcf8eb0a.js';
+import { g as guid } from './guid-1ab1a38f.js';
+import { c as createObserver } from './observers-d3fc7830.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-76e1ebe7.js';
+import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n-cf4e903a.js';
+import { a as calciteSize24, b as calciteSize32, d as calciteSize44 } from './core-968c8b6c.js';
+import { C as CSS_UTILITY } from './resources-0f27984f.js';
+import { c as connectInteractive, d as disconnectInteractive, I as InteractiveContainer, u as updateHostInteraction } from './interactive-924c5009.js';
+import { g as getIconScale } from './component-25778a7c.js';
+import './key-ed6b7662.js';
+import './browser-91a7ba0b.js';
 
 const CSS$2 = {
     container: "container",
@@ -106,40 +107,148 @@ const Tab = class {
 };
 Tab.style = tabCss;
 
+const ICON = {
+    chevronRight: "chevron-right",
+    chevronLeft: "chevron-left",
+};
 const CSS$1 = {
+    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 = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         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$1.scrollButtonContainer]: true,
+                    [CSS$1.scrollBackwardContainerButton]: !isEnd,
+                    [CSS$1.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$1.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;
@@ -150,8 +259,17 @@ const TabNav = class {
         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 &&
@@ -165,10 +283,7 @@ const TabNav = class {
         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();
     }
     //--------------------------------------------------------------------------
     //
@@ -178,21 +293,27 @@ const TabNav = class {
     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() {
@@ -209,23 +330,38 @@ const TabNav = class {
     }
     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$1.container]: true,
+                [CSS$1.containerHasStartTabTitleOverflow]: !!this.hasOverflowingStartTabTitle,
+                [CSS$1.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: (el) => (this.tabNavEl = el) }, h("slot", null), h("div", { class: "tab-nav-active-indicator-container",
+            ref: this.storeContainerRef }, this.renderScrollButton("start"), h("div", { class: {
+                [CSS$1.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: this.storeTabTitleWrapperRef }, h("slot", { onSlotchange: this.onSlotChange })), h("div", { class: {
+                [CSS$1.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"))));
     }
     //--------------------------------------------------------------------------
     //
@@ -245,10 +381,42 @@ const TabNav = class {
         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();
@@ -279,21 +447,53 @@ const TabNav = class {
         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.
@@ -331,15 +531,17 @@ const TabNav = class {
             }
         }
         requestAnimationFrame(() => {
-            this.updateOffsetPosition();
-            this.updateActiveWidth();
+            this.updateActiveIndicator();
             tabTitles[this.selectedTabId].focus();
         });
     }
+    static get assetsDirs() { return ["assets"]; }
     get el() { return getElement(this); }
     static get watchers() { return {
+        "messageOverrides": ["onMessagesChange"],
         "selectedTabId": ["selectedTabIdChanged"],
-        "selectedTitle": ["selectedTitleChanged"]
+        "selectedTitle": ["selectedTitleChanged"],
+        "effectiveLocale": ["effectiveLocaleChange"]
     }; }
 };
 TabNav.style = tabNavCss;
@@ -358,7 +560,7 @@ const ICONS = {
     close: "x",
 };
 
-const tabTitleCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block;outline:2px solid transparent;outline-offset:2px;margin-inline-start:0px}:host([layout=inline]){flex:0 1 auto}:host([layout=center]){flex:1 1 auto}:host([layout=center]) .scale-s,:host([layout=center]) .scale-m,:host([layout=center]) .scale-l{margin-block:0px;text-align:center;flex-basis:12rem}:host([layout=center]) .scale-s .content,:host([layout=center]) .scale-m .content,:host([layout=center]) .scale-l .content{margin:auto}:host([layout=center][closable]) .content{padding-inline-start:32px}:host([layout=center][bordered][closable]) .scale-s .content{padding-inline-start:36px}:host([layout=center][bordered][closable]) .scale-m .content{padding-inline-start:40px}:host([layout=center][closable]) .scale-l .content{padding-inline-start:40px}:host([layout=center][closable][bordered]) .scale-s .content{padding-inline-start:52px}:host([position=bottom]) .container{border-block-end-width:0px;border-block-start-width:2px;border-block-start-color:transparent;border-block-start-style:solid}:host([closed]){display:none}.container{outline-color:transparent}:host(:focus) .container{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite-color-brand)));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host(:focus) .container:focus-within{outline-color:transparent}:host(:active) a,:host(:focus) a,:host(:hover) a{border-color:var(--calcite-color-border-2);color:var(--calcite-color-text-1);text-decoration-line:none}:host([selected]) .container{border-color:transparent;color:var(--calcite-color-text-1)}:host([disabled]) .container{pointer-events:none;opacity:0.5}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.scale-s .content{padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem}.scale-m .content{padding-block:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem}.scale-l .content{padding-block:0.625rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}.container{box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;cursor:pointer;align-content:center;justify-content:space-between;border-block-end-width:2px;padding-inline:0px;font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-color-text-3);transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-block-end-color:transparent;border-block-end-style:solid}.content{display:flex;align-items:center;justify-content:center}.calcite-tab-title--icon{position:relative;margin:0px;display:inline-flex;align-self:center}.calcite-tab-title--icon svg{transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}.content--has-text{padding:0.25rem}.content--has-text .calcite-tab-title--icon.icon-start{margin-inline-end:0.5rem}.content--has-text .calcite-tab-title--icon.icon-end{margin-inline-start:0.5rem}.close-button{display:flex;cursor:pointer;appearance:none;align-content:center;align-items:center;justify-content:center;align-self:center;border-style:none;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-3);outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;block-size:calc(100% - 2px);background-color:var(--calcite-button-transparent-1);margin-inline-start:auto}.close-button:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite-color-brand)));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          );outline-offset:-1px}.close-button:focus,.close-button:hover{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-2)}.close-button:active{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-3)}.close-button calcite-icon{color:inherit}:host([icon-start][icon-end]) .calcite-tab-title--icon:first-child{margin-inline-end:0.5rem}:host([bordered]){margin-inline-end:0}:host([bordered][selected]){box-shadow:inset 0px -2px var(--calcite-color-foreground-1)}:host([bordered][selected][position=bottom]){box-shadow:inset 0 2px 0 var(--calcite-color-foreground-1)}:host([bordered]:hover) .container,:host([bordered]:focus) .container,:host([bordered]:active) .container{position:relative}:host([bordered]:hover) .container{background-color:var(--calcite-color-transparent-hover)}:host([closable]) .container,:host([bordered]) .container{border-inline-start:1px solid transparent;border-inline-end:1px solid transparent}:host([closable]) .container .close-button,:host([bordered]) .container .close-button{margin-inline:0}:host([closable]) .content{box-sizing:border-box;block-size:100%;border-block-end-color:transparent}:host([closable][position=bottom]) .container,:host([bordered][position=bottom]) .container{border-block-start-style:unset}:host([selected][bordered]) .container{border-inline-start-color:var(--calcite-color-border-1);border-inline-end-color:var(--calcite-color-border-1)}:host([bordered]) .content{padding-inline:0.75rem}:host([bordered]) .scale-s .content{padding-inline:0.5rem}:host([bordered]) .scale-l .content{padding-inline:1rem}@media (forced-colors: active){:host{outline-width:0;outline-offset:0}:host(:focus) .container{outline-color:highlight}:host([bordered]) .container{border-block-end-style:solid}:host([bordered][position=bottom]) .container{border-block-start-style:solid}:host([bordered][selected]) .container{border-block-end-style:none}:host([bordered][position=bottom][selected]) .container{border-block-start-style:none}.close-button{z-index:var(--calcite-z-index)}}:host([hidden]){display:none}[hidden]{display:none}";
+const tabTitleCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block;outline:2px solid transparent;outline-offset:2px;margin-inline-start:0px}:host([layout=inline]){flex:0 1 auto}:host([layout=center]){flex:1 1 auto}.content{display:flex;align-items:center;justify-content:center}.scale-s .content{padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem}.scale-m .content{padding-block:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem}.scale-l .content{padding-block:0.625rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host([closable]) .content{box-sizing:border-box;block-size:100%;border-block-end-color:transparent}:host([layout=inline]) .content,:host([layout=center]) .content{padding-inline:0.25rem}:host([layout=center]) .scale-s,:host([layout=center]) .scale-m,:host([layout=center]) .scale-l{margin-block:0px;justify-content:center;text-align:center}:host([layout=center]) .scale-s .content,:host([layout=center]) .scale-m .content,:host([layout=center]) .scale-l .content{flex:1 1 auto;flex-grow:1}.container{box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;cursor:pointer;align-content:center;justify-content:space-between;border-block-end-width:2px;padding-inline:0px;font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-color-text-3);outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-block-end-color:transparent;border-block-end-style:solid}:host([position=bottom]) .container{border-block-end-width:0px;border-block-start-width:2px;border-block-start-color:transparent;border-block-start-style:solid}:host([closed]){display:none}:host([selected]) .container{border-color:transparent;color:var(--calcite-color-text-1)}:host(:focus) .container{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite-color-brand)));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host(:focus) .container:focus-within{outline-color:transparent}:host(:active) a,:host(:focus) a,:host(:hover) a{border-color:var(--calcite-color-border-2);color:var(--calcite-color-text-1);text-decoration-line:none}:host([disabled]) .container{pointer-events:none;opacity:0.5}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.calcite-tab-title--icon{position:relative;margin:0px;display:inline-flex;align-self:center}.calcite-tab-title--icon svg{transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}.content--has-text{padding:0.25rem}.content--has-text .calcite-tab-title--icon.icon-start{margin-inline-end:0.5rem}.content--has-text .calcite-tab-title--icon.icon-end{margin-inline-start:0.5rem}.close-button{display:flex;cursor:pointer;appearance:none;align-content:center;align-items:center;justify-content:center;align-self:center;border-style:none;background-color:var(--calcite-color-foreground-1);padding:0.25rem;color:var(--calcite-color-text-3);outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;background-color:var(--calcite-button-transparent-1);margin-inline-start:auto}.close-button:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite-color-brand)));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          );outline-offset:-1px}.close-button:focus,.close-button:hover{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-2)}.close-button:active{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-3)}.close-button calcite-icon{color:inherit}:host([icon-start][icon-end]) .calcite-tab-title--icon:first-child{margin-inline-end:0.5rem}:host([bordered]){margin-inline-end:0}:host([bordered][selected]){box-shadow:inset 0px -2px var(--calcite-color-foreground-1)}:host([bordered][selected][position=bottom]){box-shadow:inset 0 2px 0 var(--calcite-color-foreground-1)}:host([bordered]:hover) .container{background-color:var(--calcite-color-transparent-hover)}:host([closable]) .container,:host([bordered]) .container{border-inline-start:1px solid transparent;border-inline-end:1px solid transparent}:host([closable]) .container .close-button,:host([bordered]) .container .close-button{margin-inline:0}:host([closable][position=bottom]) .container,:host([bordered][position=bottom]) .container{border-block-start-style:unset}:host([selected][bordered]) .container{border-inline-start-color:var(--calcite-color-border-1);border-inline-end-color:var(--calcite-color-border-1)}:host([layout=inline][bordered]) .scale-m .content,:host([layout=center][bordered]) .scale-m .content{padding-inline:0.75rem}:host([layout=inline][bordered]) .scale-s .content,:host([layout=center][bordered]) .scale-s .content{padding-inline:0.5rem}:host([layout=inline][bordered]) .scale-l .content,:host([layout=center][bordered]) .scale-l .content{padding-inline:1rem}:host([layout=inline][closable]) .scale-s .content,:host([layout=inline][closable]) .scale-m .content,:host([layout=inline][closable]) .scale-l .content{padding-inline-end:0}@media (forced-colors: active){:host{outline-width:0;outline-offset:0}:host(:focus) .container{outline-color:highlight}:host([bordered]) .container{border-block-end-style:solid}:host([bordered][position=bottom]) .container{border-block-start-style:solid}:host([bordered][selected]) .container{border-block-end-style:none}:host([bordered][position=bottom][selected]) .container{border-block-start-style:none}.close-button{z-index:var(--calcite-z-index)}}:host([hidden]){display:none}[hidden]{display:none}";
 
 const TabTitle = class {
     constructor(hostRef) {
@@ -610,7 +812,7 @@ const SLOTS = {
     titleGroup: "title-group",
 };
 
-const tabsCss = ":host{display:flex;flex-direction:column}:host([bordered]){box-shadow:inset 0 1px 0 var(--calcite-color-border-1);background-color:var(--calcite-color-foreground-1)}:host([bordered]:not([position=bottom])) ::slotted(calcite-tab-nav){margin-block-end:-1px}:host([bordered][position=bottom]){box-shadow:inset 0 1px 0 var(--calcite-color-border-1), inset 0 -1px 0 var(--calcite-color-border-1)}:host([bordered]) section{border-width:1px;border-style:solid;border-color:var(--calcite-color-border-1)}:host([bordered][scale=s]) section{padding:0.75rem}:host([bordered][scale=m]) section{padding:0.5rem}:host([bordered][scale=l]) section{padding:1rem}:host([position=bottom]){flex-direction:column-reverse}section{display:flex;flex-grow:1;overflow:hidden;border-block-start-width:1px;border-block-start-color:var(--calcite-color-border-1);border-block-start-style:solid}:host([position=bottom]) section{flex-direction:column-reverse;border-block-start-width:0px;border-block-end-width:1px;border-block-end-color:var(--calcite-color-border-1)}:host([position=bottom]:not([bordered])) section{border-block-end-style:solid}@media (forced-colors: active){:host([bordered]) section{border-block-start-width:0px;border-block-end-width:1px}:host([position=bottom][bordered]) section{border-block-start-width:1px;border-block-end-width:0px}}:host([hidden]){display:none}[hidden]{display:none}";
+const tabsCss = ":host{display:flex;flex-direction:column}:host([bordered]){box-shadow:inset 0 1px 0 var(--calcite-color-border-1);background-color:var(--calcite-color-foreground-1)}:host([bordered]) section{border-width:1px;border-style:solid;border-color:var(--calcite-color-border-1)}:host([bordered][position=bottom]){box-shadow:inset 0 1px 0 var(--calcite-color-border-1), inset 0 -1px 0 var(--calcite-color-border-1)}:host([bordered]:not([position=bottom])) ::slotted(calcite-tab-nav){margin-block-end:-1px}:host([bordered][scale=s]) section{padding:0.75rem}:host([bordered][scale=m]) section{padding:0.5rem}:host([bordered][scale=l]) section{padding:1rem}:host([position=bottom]){flex-direction:column-reverse}section{display:flex;flex-grow:1;overflow:hidden;border-block-start-width:1px;border-block-start-color:var(--calcite-color-border-1);border-block-start-style:solid}:host([position=bottom]) section{flex-direction:column-reverse;border-block-start-width:0px;border-block-end-width:1px;border-block-end-color:var(--calcite-color-border-1)}:host([position=bottom]:not([bordered])) section{border-block-end-style:solid}@media (forced-colors: active){:host([bordered]) section{border-block-start-width:0px;border-block-end-width:1px}:host([position=bottom][bordered]) section{border-block-start-width:1px;border-block-end-width:0px}}:host([hidden]){display:none}[hidden]{display:none}";
 
 const Tabs = class {
     constructor(hostRef) {