@esri/calcite-components 2.6.0 → 2.7.0-next.1

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

@@ -1 +1 @@
-{"version":3,"file":"tab-nav.e2e.js","sourceRoot":"","sources":["../../../../src/components/tab-nav/tab-nav.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\nimport { accessible, defaults, renders, hidden } from \"../../tests/commonTests\";\nimport { html } from \"../../../support/formatting\";\n\ndescribe(\"calcite-tab-nav\", () => {\n  describe(\"defaults\", () => {\n    defaults(\"calcite-tab-nav\", [{ propertyName: \"scale\", defaultValue: \"m\" }]);\n  });\n\n  describe(\"renders\", () => {\n    renders(\"calcite-tab-nav\", { display: \"flex\" });\n  });\n\n  describe(\"honors hidden attribute\", () => {\n    hidden(\"calcite-tab-nav\");\n  });\n\n  describe(\"accessible: checked\", () => {\n    accessible(\"calcite-tab-nav\");\n  });\n\n  it(\"emits on user interaction\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      html`<calcite-tab-nav>\n        <calcite-tab-title>Tab 1 Title</calcite-tab-title>\n      </calcite-tab-nav>`,\n    );\n    const activeEventSpy = await page.spyOnEvent(\"calciteTabChange\");\n    const firstTabTitle = await page.find(\"calcite-tab-title\");\n\n    firstTabTitle.setProperty(\"selected\", true);\n    await page.waitForChanges();\n    expect(activeEventSpy).toHaveReceivedEventTimes(0);\n\n    await firstTabTitle.click();\n    await page.waitForChanges();\n    expect(activeEventSpy).toHaveReceivedEventTimes(1);\n\n    await page.keyboard.press(\"Enter\");\n    await page.waitForChanges();\n    expect(activeEventSpy).toHaveReceivedEventTimes(2);\n  });\n\n  describe(\"selected indicator\", () => {\n    const tabTitles = html`\n      <calcite-tab-title selected>Tab 1 Title</calcite-tab-title>\n      <calcite-tab-title>Tab 2 Title</calcite-tab-title>\n      <calcite-tab-title>Tab 3 Title</calcite-tab-title>\n      <calcite-tab-title>Tab 4 Title</calcite-tab-title>\n    `;\n\n    it(\"has its active indicator positioned from left if LTR\", async () => {\n      const page = await newE2EPage();\n      await page.setContent(`<calcite-tab-nav>${tabTitles}</calcite-tab-nav>`);\n      const element = await page.find(\"calcite-tab-nav >>> .tab-nav-active-indicator\");\n      const style = await element.getComputedStyle();\n      expect(style[\"left\"]).toBe(\"0px\");\n      expect(style[\"right\"]).not.toBe(\"0px\");\n      expect(style[\"width\"]).not.toBe(\"0px\");\n    });\n\n    it(\"has its active indicator positioned from right if RTL\", async () => {\n      const page = await newE2EPage();\n      await page.setContent(`<calcite-tab-nav dir='rtl'>${tabTitles}</calcite-tab-nav>`);\n      const element = await page.find(\"calcite-tab-nav >>> .tab-nav-active-indicator\");\n      const style = await element.getComputedStyle();\n      expect(style[\"right\"]).toBe(\"0px\");\n      expect(style[\"left\"]).not.toBe(\"0px\");\n      expect(style[\"width\"]).not.toBe(\"0px\");\n    });\n\n    it(\"updates position when made visible\", async () => {\n      const page = await newE2EPage();\n      await page.setContent(`<calcite-tab-nav hidden>${tabTitles}</calcite-tab-nav>`);\n      const tabNav = await page.find(\"calcite-tab-nav\");\n      const indicator = await page.find(\"calcite-tab-nav >>> .tab-nav-active-indicator\");\n\n      tabNav.setProperty(\"hidden\", false);\n      await page.waitForChanges();\n\n      const style = await indicator.getComputedStyle();\n      expect(style[\"width\"]).not.toBe(\"0px\");\n    });\n  });\n\n  it(\"focuses on keyboard interaction\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      html`<calcite-tab-nav>\n        <calcite-tab-title id=\"tab1\">Tab 1 Title</calcite-tab-title>\n        <calcite-tab-title id=\"tab2\">Tab 2 Title</calcite-tab-title>\n        <calcite-tab-title id=\"tab3\">Tab 3 Title</calcite-tab-title>\n      </calcite-tab-nav>`,\n    );\n\n    const tab1 = await page.find(\"#tab1\");\n    await tab1.focus();\n    expect(await page.evaluate(() => document.activeElement.id)).toBe(\"tab1\");\n\n    await page.keyboard.press(\"ArrowRight\");\n    expect(await page.evaluate(() => document.activeElement.id)).toBe(\"tab2\");\n\n    await page.keyboard.press(\"ArrowLeft\");\n    expect(await page.evaluate(() => document.activeElement.id)).toBe(\"tab1\");\n\n    await page.keyboard.press(\"End\");\n    expect(await page.evaluate(() => document.activeElement.id)).toBe(\"tab3\");\n\n    await page.keyboard.press(\"Home\");\n    expect(await page.evaluate(() => document.activeElement.id)).toBe(\"tab1\");\n  });\n});\n"]}
+{"version":3,"file":"tab-nav.e2e.js","sourceRoot":"","sources":["../../../../src/components/tab-nav/tab-nav.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { E2EElement, E2EPage, newE2EPage } from \"@stencil/core/testing\";\nimport { accessible, defaults, hidden, renders, t9n } from \"../../tests/commonTests\";\nimport { html } from \"../../../support/formatting\";\nimport { CSS } from \"./resources\";\nimport { getElementRect } from \"../../tests/utils\";\n\ndescribe(\"calcite-tab-nav\", () => {\n  describe(\"defaults\", () => {\n    defaults(\"calcite-tab-nav\", [{ propertyName: \"scale\", defaultValue: \"m\" }]);\n  });\n\n  describe(\"renders\", () => {\n    renders(\"calcite-tab-nav\", { display: \"flex\" });\n  });\n\n  describe(\"honors hidden attribute\", () => {\n    hidden(\"calcite-tab-nav\");\n  });\n\n  describe(\"accessible: checked\", () => {\n    accessible(\"calcite-tab-nav\");\n  });\n\n  describe(\"translation support\", () => {\n    t9n(\"calcite-tab-nav\");\n  });\n\n  it(\"emits on user interaction\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      html`<calcite-tab-nav>\n        <calcite-tab-title>Tab 1 Title</calcite-tab-title>\n      </calcite-tab-nav>`,\n    );\n    const activeEventSpy = await page.spyOnEvent(\"calciteTabChange\");\n    const firstTabTitle = await page.find(\"calcite-tab-title\");\n\n    firstTabTitle.setProperty(\"selected\", true);\n    await page.waitForChanges();\n    expect(activeEventSpy).toHaveReceivedEventTimes(0);\n\n    await firstTabTitle.click();\n    await page.waitForChanges();\n    expect(activeEventSpy).toHaveReceivedEventTimes(1);\n\n    await page.keyboard.press(\"Enter\");\n    await page.waitForChanges();\n    expect(activeEventSpy).toHaveReceivedEventTimes(2);\n  });\n\n  describe(\"selected indicator\", () => {\n    const tabTitles = html`\n      <calcite-tab-title selected>Tab 1 Title</calcite-tab-title>\n      <calcite-tab-title>Tab 2 Title</calcite-tab-title>\n      <calcite-tab-title>Tab 3 Title</calcite-tab-title>\n      <calcite-tab-title>Tab 4 Title</calcite-tab-title>\n    `;\n\n    it(\"has its active indicator positioned from left if LTR\", async () => {\n      const page = await newE2EPage();\n      await page.setContent(`<calcite-tab-nav>${tabTitles}</calcite-tab-nav>`);\n      const element = await page.find(\"calcite-tab-nav >>> .tab-nav-active-indicator\");\n      const style = await element.getComputedStyle();\n      expect(style[\"left\"]).toBe(\"0px\");\n      expect(style[\"right\"]).not.toBe(\"0px\");\n      expect(style[\"width\"]).not.toBe(\"0px\");\n    });\n\n    it(\"has its active indicator positioned from right if RTL\", async () => {\n      const page = await newE2EPage();\n      await page.setContent(`<calcite-tab-nav dir='rtl'>${tabTitles}</calcite-tab-nav>`);\n      const element = await page.find(\"calcite-tab-nav >>> .tab-nav-active-indicator\");\n      const style = await element.getComputedStyle();\n      expect(style[\"right\"]).toBe(\"0px\");\n      expect(style[\"left\"]).not.toBe(\"0px\");\n      expect(style[\"width\"]).not.toBe(\"0px\");\n    });\n\n    it(\"updates position when made visible\", async () => {\n      const page = await newE2EPage();\n      await page.setContent(`<calcite-tab-nav hidden>${tabTitles}</calcite-tab-nav>`);\n      const tabNav = await page.find(\"calcite-tab-nav\");\n      const indicator = await page.find(\"calcite-tab-nav >>> .tab-nav-active-indicator\");\n\n      tabNav.setProperty(\"hidden\", false);\n      await page.waitForChanges();\n\n      const style = await indicator.getComputedStyle();\n      expect(style[\"width\"]).not.toBe(\"0px\");\n    });\n  });\n\n  it(\"focuses on keyboard interaction\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      html`<calcite-tab-nav>\n        <calcite-tab-title id=\"tab1\">Tab 1 Title</calcite-tab-title>\n        <calcite-tab-title id=\"tab2\">Tab 2 Title</calcite-tab-title>\n        <calcite-tab-title id=\"tab3\">Tab 3 Title</calcite-tab-title>\n      </calcite-tab-nav>`,\n    );\n\n    const tab1 = await page.find(\"#tab1\");\n    await tab1.focus();\n    expect(await page.evaluate(() => document.activeElement.id)).toBe(\"tab1\");\n\n    await page.keyboard.press(\"ArrowRight\");\n    expect(await page.evaluate(() => document.activeElement.id)).toBe(\"tab2\");\n\n    await page.keyboard.press(\"ArrowLeft\");\n    expect(await page.evaluate(() => document.activeElement.id)).toBe(\"tab1\");\n\n    await page.keyboard.press(\"End\");\n    expect(await page.evaluate(() => document.activeElement.id)).toBe(\"tab3\");\n\n    await page.keyboard.press(\"Home\");\n    expect(await page.evaluate(() => document.activeElement.id)).toBe(\"tab1\");\n  });\n\n  describe(\"responsiveness\", () => {\n    const tabsHTML = html`\n      <calcite-tabs>\n        <calcite-tab-nav slot=\"title-group\">\n          <calcite-tab-title selected>Tab 1 Title</calcite-tab-title>\n          <calcite-tab-title>Tab 2 Title</calcite-tab-title>\n          <calcite-tab-title>Tab 3 Title</calcite-tab-title>\n          <calcite-tab-title>Tab 4 Title</calcite-tab-title>\n          <calcite-tab-title>Tab 5 Title</calcite-tab-title>\n          <calcite-tab-title>Tab 6 Title</calcite-tab-title>\n          <calcite-tab-title>Tab 7 Title</calcite-tab-title>\n          <calcite-tab-title>Tab 8 Title</calcite-tab-title>\n        </calcite-tab-nav>\n        <calcite-tab selected>Tab 1 Content</calcite-tab>\n        <calcite-tab>Tab 2 Content</calcite-tab>\n        <calcite-tab>Tab 3 Content</calcite-tab>\n        <calcite-tab>Tab 4 Content</calcite-tab>\n        <calcite-tab>Tab 5 Content</calcite-tab>\n        <calcite-tab>Tab 6 Content</calcite-tab>\n        <calcite-tab>Tab 7 Content</calcite-tab>\n        <calcite-tab>Tab 8 Content</calcite-tab>\n      </calcite-tabs>\n    `;\n    const sizeShowingAllTabs = { width: 1200, height: 1200 };\n    const sizeShowingSomeTabs = { width: 350, height: 1200 };\n\n    let page: E2EPage;\n    let scrollBackButton: E2EElement;\n    let scrollForwardButton: E2EElement;\n    let scrollContainer: E2EElement;\n\n    async function assertScrollButtonVisibility(\n      backExpectedVisibility: boolean,\n      expectedForwardVisibility: boolean,\n    ): Promise<void> {\n      /* we need to find the scroll buttons to ensure visibility */\n      expect(await scrollBackButton.isVisible()).toBe(backExpectedVisibility);\n      expect(await scrollForwardButton.isVisible()).toBe(expectedForwardVisibility);\n    }\n\n    beforeEach(async () => {\n      page = await newE2EPage();\n      await page.setContent(tabsHTML);\n      await page.setViewport(sizeShowingSomeTabs);\n      await page.waitForChanges();\n      scrollBackButton = await page.find(`calcite-tab-nav >>> .${CSS.scrollBackwardContainerButton}`);\n      scrollForwardButton = await page.find(`calcite-tab-nav >>> .${CSS.scrollForwardContainerButton}`);\n      scrollContainer = await page.find(`calcite-tab-nav >>> .${CSS.tabTitleSlotWrapper}`);\n    });\n\n    it(\"shows scrolling buttons if tab-titles overflow\", async () => {\n      await assertScrollButtonVisibility(false, true);\n\n      await page.click(\"calcite-tab-title:nth-child(4)\");\n      await page.waitForChanges();\n\n      await assertScrollButtonVisibility(true, true);\n\n      await page.setViewport(sizeShowingAllTabs);\n      await page.waitForChanges();\n\n      await assertScrollButtonVisibility(false, false);\n\n      await page.setViewport(sizeShowingSomeTabs);\n      await page.waitForChanges();\n\n      await assertScrollButtonVisibility(false, true);\n\n      await page.click(\"calcite-tab-title:nth-child(4)\");\n      await page.waitForChanges();\n\n      await assertScrollButtonVisibility(true, true);\n    });\n\n    it(\"scrolling tabs via buttons\", async () => {\n      await assertScrollButtonVisibility(false, true);\n\n      let scrollEnd = scrollContainer.waitForEvent(\"scrollend\");\n      await scrollForwardButton.click();\n      await page.waitForChanges();\n      await scrollEnd;\n\n      await assertScrollButtonVisibility(true, true);\n\n      scrollEnd = scrollContainer.waitForEvent(\"scrollend\");\n      await scrollForwardButton.click();\n      await page.waitForChanges();\n      await scrollEnd;\n\n      await assertScrollButtonVisibility(true, false);\n\n      scrollEnd = scrollContainer.waitForEvent(\"scrollend\");\n      await scrollBackButton.click();\n      await page.waitForChanges();\n      await scrollEnd;\n\n      await assertScrollButtonVisibility(true, true);\n\n      scrollEnd = scrollContainer.waitForEvent(\"scrollend\");\n      await scrollBackButton.click();\n      await page.waitForChanges();\n      await scrollEnd;\n\n      await assertScrollButtonVisibility(false, true);\n    });\n\n    it(\"scrolling tabs via mouse wheel\", async () => {\n      await assertScrollButtonVisibility(false, true);\n\n      const tabNavBounds = await getElementRect(page, \"calcite-tab-nav\");\n      await page.mouse.move(tabNavBounds.x + tabNavBounds.width / 2, tabNavBounds.y + tabNavBounds.height / 2);\n      await page.mouse.wheel({ deltaY: 200 });\n      await page.waitForChanges();\n\n      await assertScrollButtonVisibility(true, true);\n\n      await page.mouse.wheel({ deltaY: 200 });\n      await page.waitForChanges();\n\n      await assertScrollButtonVisibility(true, false);\n\n      await page.mouse.wheel({ deltaY: -200 });\n      await page.waitForChanges();\n\n      await assertScrollButtonVisibility(true, true);\n\n      await page.mouse.wheel({ deltaY: -200 });\n      await page.waitForChanges();\n\n      await assertScrollButtonVisibility(false, true);\n    });\n\n    it(\"scrolls into view clipped start or end tab-title when selected\", async () => {\n      const tabNavBounds = await getElementRect(page, \"calcite-tab-nav\");\n      await page.mouse.move(tabNavBounds.x + tabNavBounds.width / 2, tabNavBounds.y + tabNavBounds.height / 2);\n      await page.waitForChanges();\n\n      await page.mouse.wheel({ deltaY: 1 });\n      await page.waitForChanges();\n\n      await assertScrollButtonVisibility(true, true);\n\n      let scrollEnd = scrollContainer.waitForEvent(\"scrollend\");\n      const firstTab = await page.find(\"calcite-tab-title:first-child\");\n      await firstTab.callMethod(\"click\"); // we call method to avoid having E2E click element in the middle, which would hit the scroll button\n      await page.waitForChanges();\n      await scrollEnd;\n\n      await assertScrollButtonVisibility(false, true);\n\n      await page.mouse.wheel({ deltaY: 180 });\n      await page.waitForChanges();\n\n      await assertScrollButtonVisibility(true, true);\n\n      scrollEnd = scrollContainer.waitForEvent(\"scrollend\");\n      const lastTab = await page.find(\"calcite-tab-title:last-child\");\n      await lastTab.callMethod(\"click\"); // we call method to avoid having E2E click element in the middle, which would hit the scroll button\n      await page.waitForChanges();\n      await scrollEnd;\n\n      await assertScrollButtonVisibility(true, false);\n    });\n  });\n});\n"]}

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

@@ -1,40 +1,140 @@
 /*!
  * 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
+ * v2.7.0-next.1
  */
-import { h, Host, } from "@stencil/core";
+import { h, Host, readTask, } from "@stencil/core";
 import { filterDirectChildren, focusElementInGroup, getElementDir, } from "../../utils/dom";
 import { createObserver } from "../../utils/observers";
-import { CSS } from "./resources";
+import { CSS, ICON } from "./resources";
+import { connectLocalized, disconnectLocalized } from "../../utils/locale";
+import { connectMessages, disconnectMessages, setUpMessages, updateMessages, } from "../../utils/t9n";
+import { calciteSize24, calciteSize32, calciteSize44, } from "@esri/calcite-design-tokens/dist/es6/core";
+import { CSS_UTILITY } from "../../utils/resources";
 /**
  * @slot - A slot for adding `calcite-tab-title`s.
  */
 export class TabNav {
     constructor() {
-        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;
@@ -45,8 +145,17 @@ export class TabNav {
         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 &&
@@ -60,10 +169,7 @@ export class TabNav {
         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();
     }
     //--------------------------------------------------------------------------
     //
@@ -73,21 +179,27 @@ export class TabNav {
     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() {
@@ -104,23 +216,38 @@ export class TabNav {
     }
     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: (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.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.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"))));
     }
     //--------------------------------------------------------------------------
     //
@@ -140,10 +267,42 @@ export class TabNav {
         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();
@@ -174,21 +333,53 @@ export class TabNav {
         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.
@@ -226,8 +417,7 @@ export class TabNav {
             }
         }
         requestAnimationFrame(() => {
-            this.updateOffsetPosition();
-            this.updateActiveWidth();
+            this.updateActiveIndicator();
             tabTitles[this.selectedTabId].focus();
         });
     }
@@ -243,6 +433,7 @@ export class TabNav {
             "$": ["tab-nav.css"]
         };
     }
+    static get assetsDirs() { return ["assets"]; }
     static get properties() {
         return {
             "storageId": {
@@ -444,11 +635,64 @@ export class TabNav {
                 },
                 "attribute": "indicator-width",
                 "reflect": false
+            },
+            "messages": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "TabNavMessages",
+                    "resolved": "{ nextTabTitles: string; previousTabTitles: string; }",
+                    "references": {
+                        "TabNavMessages": {
+                            "location": "import",
+                            "path": "./assets/tab-nav/t9n",
+                            "id": "src/components/tab-nav/assets/tab-nav/t9n/index.d.ts::TabNavMessages"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": "Made into a prop for testing purposes only."
+                }
+            },
+            "messageOverrides": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "Partial<TabNavMessages>",
+                    "resolved": "{ nextTabTitles?: string; previousTabTitles?: string; }",
+                    "references": {
+                        "Partial": {
+                            "location": "global",
+                            "id": "global::Partial"
+                        },
+                        "TabNavMessages": {
+                            "location": "import",
+                            "path": "./assets/tab-nav/t9n",
+                            "id": "src/components/tab-nav/assets/tab-nav/t9n/index.d.ts::TabNavMessages"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use this property to override individual strings used by the component."
+                }
             }
         };
     }
     static get states() {
         return {
+            "defaultMessages": {},
+            "effectiveLocale": {},
+            "hasOverflowingStartTabTitle": {},
+            "hasOverflowingEndTabTitle": {},
             "selectedTabId": {}
         };
     }
@@ -497,11 +741,17 @@ export class TabNav {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "messageOverrides",
+                "methodName": "onMessagesChange"
+            }, {
                 "propName": "selectedTabId",
                 "methodName": "selectedTabIdChanged"
             }, {
                 "propName": "selectedTitle",
                 "methodName": "selectedTitleChanged"
+            }, {
+                "propName": "effectiveLocale",
+                "methodName": "effectiveLocaleChange"
             }];
     }
     static get listeners() {