@esri/calcite-components 5.2.0-next.1 → 5.2.0-next.100

package/dist/components/calcite-tab-nav/customElement.js

@@ -2,11 +2,10 @@
 import { C as CSS_UTILITY, c as customElement } from "../../chunks/runtime.js";
 import { ref } from "lit/directives/ref.js";
 import { keyed } from "lit/directives/keyed.js";
-import { a as calciteSize24, b as calciteSize32, d as calciteSize44 } from "../../chunks/core.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { useDirection } from "@arcgis/lumina/controllers";
-import { C as filterDirectChildren, f as focusElementInGroup, i as focusElement } from "../../chunks/dom.js";
+import { C as filterDirectChildren, e as focusElementInGroup, f as focusElement } from "../../chunks/dom.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 const ICON = {
@@ -23,7 +22,8 @@ const CSS = {
   scale: (scale) => `scale-${scale}`,
   position: (position) => `position-${position}`
 };
-const styles = css`:host{position:relative;display:flex}:host([bordered]) .scroll-button--forward calcite-button{--calcite-internal-button-border-inline-end-color: var(--calcite-tab-border-color, var(--calcite-color-border-1))}:host([bordered]) .scroll-button--backward calcite-button{--calcite-internal-button-border-inline-start-color: var( --calcite-tab-border-color, var(--calcite-color-border-1) )}.scale-s{--calcite-internal-tab-nav-button-width: 24px;min-block-size:1.5rem}.scale-m{--calcite-internal-tab-nav-button-width: 32px;min-block-size:2rem}.scale-l{--calcite-internal-tab-nav-button-width: 44px;min-block-size:2.75rem}.container::-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-spacing-xxl)}:host(:not([bordered])) .scale-m{--calcite-internal-tab-nav-gap: var(--calcite-spacing-xl)}:host(:not([bordered])) .scale-s{--calcite-internal-tab-nav-gap: var(--calcite-spacing-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-xl)}.tab-titles-slot-wrapper{flex:1 1 0%}.container,.tab-titles-slot-wrapper{display:flex;inline-size:100%;justify-content:flex-start;overflow:hidden;white-space:nowrap}.scroll-button{position:absolute;inset-block:0px}.scroll-button calcite-button{--calcite-button-text-color: var(--calcite-tab-text-color, var(--calcite-color-text-3));--calcite-button-background-color: var(--calcite-color-transparent);--calcite-offset-invert-focus: 1;block-size:var(--calcite-container-size-content-fluid)}.scroll-button-container{display:flex;inset-block-start:var(--calcite-border-width-md);inset-block-end:var(--calcite-border-width-md);inset-inline-end:0;inline-size:calc(2 * var(--calcite-internal-tab-nav-button-width))}.scroll-button--forward{inset-inline-end:0;z-index:var(--calcite-z-index)}.scroll-button--backward{inset-inline-end:var(--calcite-internal-tab-nav-button-width);z-index:var(--calcite-z-index)}:host(:not([bordered])) .scroll-button--backward:before{background-color:var(--calcite-tab-border-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;inset-inline-start:0}:host([hidden]){display:none}[hidden]{display:none}`;
+const SCROLL_THRESHOLD = 1;
+const styles = css`:host{position:relative;display:flex}:host([bordered]) .scroll-button--forward calcite-button{--calcite-internal-button-border-inline-end-color: var(--calcite-tab-border-color, var(--calcite-color-border-1))}:host([bordered]) .scroll-button--backward calcite-button{--calcite-internal-button-border-inline-start-color: var( --calcite-tab-border-color, var(--calcite-color-border-1) )}.scale-s{--calcite-internal-tab-nav-button-width: 24px;min-block-size:1.5rem}.scale-m{--calcite-internal-tab-nav-button-width: 32px;min-block-size:2rem}.scale-l{--calcite-internal-tab-nav-button-width: 44px;min-block-size:2.75rem}.container::-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-theme-space-2xl, var(--calcite-spacing-xxl))}:host(:not([bordered])) .scale-m{--calcite-internal-tab-nav-gap: var(--calcite-theme-space-xl, var(--calcite-spacing-xl))}:host(:not([bordered])) .scale-s{--calcite-internal-tab-nav-gap: var(--calcite-theme-space-lg, var(--calcite-spacing-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-theme-space-xl, var(--calcite-spacing-xl))}.tab-titles-slot-wrapper{flex:1 1 0%}.container,.tab-titles-slot-wrapper{display:flex;inline-size:100%;justify-content:flex-start;white-space:nowrap;overflow:hidden}.scroll-button{position:absolute;inset-block:0}.scroll-button calcite-button{--calcite-button-text-color: var(--calcite-tab-text-color, var(--calcite-color-text-3));--calcite-button-background-color: var(--calcite-color-transparent);--calcite-offset-invert-focus: 1;block-size:var(--calcite-container-size-content-fluid)}.scroll-button-container{display:flex;inset-block-start:var(--calcite-border-width-md);inset-block-end:var(--calcite-border-width-md);inset-inline-end:0;inline-size:calc(2 * var(--calcite-internal-tab-nav-button-width))}.scroll-button--forward{inset-inline-end:0;z-index:var(--calcite-z-index)}.scroll-button--backward{inset-inline-end:var(--calcite-internal-tab-nav-button-width);z-index:var(--calcite-z-index)}:host(:not([bordered])) .scroll-button--backward:before{background-color:var(--calcite-tab-border-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;inset-inline-start:0}:host([hidden]){display:none}[hidden]{display:none}`;
 class TabNav extends LitElement {
   constructor() {
     super();
@@ -33,12 +33,13 @@ class TabNav extends LitElement {
     this.resizeObserver = createObserver("resize", () => {
       this.updateScrollingState();
     });
-    this.makeFirstVisibleTabClosable = false;
     this.messages = useT9n();
     this.hasOverflowingEndTabTitle = false;
     this.hasOverflowingStartTabTitle = false;
+    this.hasVisibleTabTitles = true;
     this.bordered = false;
     this.layout = "inline";
+    this.lastTabClosable = false;
     this.position = "bottom";
     this.scale = "m";
     this.selectedTitle = null;
@@ -49,17 +50,24 @@ class TabNav extends LitElement {
     this.listen("calciteInternalTabsFocusNext", this.focusNextTabHandler);
     this.listen("calciteInternalTabsFocusFirst", this.focusFirstTabHandler);
     this.listen("calciteInternalTabsFocusLast", this.focusLastTabHandler);
+    this.listen("calciteInternalTabTitleCloseChange", this.syncVisibleTabTitlesState);
     this.listen("calciteInternalTabTitleRegister", this.updateTabTitles);
     this.listen("calciteInternalTabsActivate", this.internalActivateTabHandler);
     this.listen("calciteInternalTabsClose", this.internalCloseTabHandler);
     this.listenOn(document.body, "calciteInternalTabChange", this.globalInternalTabChangeHandler);
   }
   static {
-    this.properties = { hasOverflowingEndTabTitle: [16, {}, { state: true }], hasOverflowingStartTabTitle: [16, {}, { state: true }], selectedTabId: [16, {}, { state: true }], bordered: [7, {}, { reflect: true, type: Boolean }], layout: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], position: 1, scale: 1, selectedTitle: [0, {}, { attribute: false }], storageId: [3, {}, { reflect: true }], syncId: [3, {}, { reflect: true }] };
+    this.properties = { hasOverflowingEndTabTitle: [16, {}, { state: true }], hasOverflowingStartTabTitle: [16, {}, { state: true }], hasVisibleTabTitles: [16, {}, { state: true }], selectedTabId: [16, {}, { state: true }], bordered: [7, {}, { reflect: true, type: Boolean }], layout: [3, {}, { reflect: true }], lastTabClosable: [5, {}, { type: Boolean }], messageOverrides: [0, {}, { attribute: false }], position: 1, scale: 1, selectedTitle: [0, {}, { attribute: false }], storageId: [3, {}, { reflect: true }], syncId: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;
   }
+  get enabledTabTitles() {
+    return filterDirectChildren(this.el, "calcite-tab-title:not([disabled])").filter((tabTitle) => !tabTitle.closed);
+  }
+  get tabTitles() {
+    return filterDirectChildren(this.el, "calcite-tab-title");
+  }
   connectedCallback() {
     super.connectedCallback();
     this.parentTabsEl = this.el.closest("calcite-tabs") ?? void 0;
@@ -76,7 +84,7 @@ class TabNav extends LitElement {
     }
   }
   willUpdate(changes) {
-    if (changes.has("selectedTitle") && (this.hasUpdated || this.selectedTitle !== null)) {
+    if (changes.has("selectedTitle") && (this.hasUpdated || this.selectedTitle !== null) && this.selectedTabId !== void 0) {
       this.calciteInternalTabChange.emit({
         tab: this.selectedTabId
       });
@@ -84,6 +92,9 @@ class TabNav extends LitElement {
     if (changes.has("selectedTabId")) {
       this.selectedTabIdChanged();
     }
+    if (changes.has("lastTabClosable") && this.hasUpdated) {
+      this.updateLastVisibleTabClosable();
+    }
     const { parentTabsEl } = this;
     if (parentTabsEl) {
       this.layout = parentTabsEl.layout;
@@ -93,7 +104,7 @@ class TabNav extends LitElement {
   }
   loaded() {
     this.scrollTabTitleIntoView(this.selectedTitle, "instant");
-    if (this.tabTitles.length && this.tabTitles.every((title) => !title.selected) && !this.selectedTabId) {
+    if (this.tabTitles.length && this.tabTitles.every((title) => !title.selected) && this.selectedTabId === void 0) {
       this.tabTitles[0].getTabIdentifier().then((tab) => {
         this.calciteInternalTabChange.emit({
           tab
@@ -105,16 +116,6 @@ class TabNav extends LitElement {
     super.disconnectedCallback();
     this.resizeObserver?.disconnect();
   }
-  get enabledTabTitles() {
-    return filterDirectChildren(this.el, "calcite-tab-title:not([disabled])").filter((tabTitle) => !tabTitle.closed);
-  }
-  get scrollerButtonWidth() {
-    const { scale } = this;
-    return parseInt(scale === "s" ? calciteSize24 : scale === "m" ? calciteSize32 : calciteSize44);
-  }
-  get tabTitles() {
-    return filterDirectChildren(this.el, "calcite-tab-title");
-  }
   focusPreviousTabHandler(event) {
     this.handleTabFocus(event, event.target, "previous");
   }
@@ -150,11 +151,12 @@ class TabNav extends LitElement {
       const containerBounds = tabTitleContainer.getBoundingClientRect();
       const tabTitleBounds = activatedTabTitle.getBoundingClientRect();
       const scrollPosition = tabTitleContainer.scrollLeft;
-      if (tabTitleBounds.left < containerBounds.left) {
-        const left = scrollPosition + (tabTitleBounds.left - containerBounds.left);
+      const offsetLeft = tabTitleBounds.left - containerBounds.left;
+      if (offsetLeft < 0) {
+        const left = scrollPosition + offsetLeft;
         tabTitleContainer.scrollTo({ left, behavior });
       } else if (tabTitleBounds.right > containerBounds.right) {
-        const left = scrollPosition + (tabTitleBounds.right - containerBounds.right);
+        const left = scrollPosition + Math.min(tabTitleBounds.right - containerBounds.right, offsetLeft);
         tabTitleContainer.scrollTo({ left, behavior });
       }
     });
@@ -169,6 +171,7 @@ class TabNav extends LitElement {
       this.selectedTabId = event.detail;
       this.selectedTitle = await this.getTabTitleById(this.selectedTabId);
     }
+    this.syncVisibleTabTitlesState();
   }
   globalInternalTabChangeHandler(event) {
     if (this.syncId && event.target !== this.el && event.target.syncId === this.syncId && this.selectedTabId !== event.detail.tab) {
@@ -178,7 +181,10 @@ class TabNav extends LitElement {
   }
   async selectedTabIdChanged() {
     await this.componentOnReady();
-    if (localStorage && this.storageId && this.selectedTabId !== void 0 && this.selectedTabId !== null) {
+    if (this.selectedTabId === void 0) {
+      return;
+    }
+    if (localStorage && this.storageId) {
       localStorage.setItem(`calcite-tab-nav-${this.storageId}`, JSON.stringify(this.selectedTabId));
     }
     this.calciteInternalTabChange.emit({
@@ -186,6 +192,10 @@ class TabNav extends LitElement {
     });
   }
   onTabTitleWheel(event) {
+    const tabTitleContainer = event.currentTarget;
+    if (tabTitleContainer.scrollWidth <= tabTitleContainer.clientWidth) {
+      return;
+    }
     event.preventDefault();
     const { deltaX, deltaY } = event;
     const x = Math.abs(deltaX);
@@ -201,7 +211,7 @@ class TabNav extends LitElement {
       this.lastScrollWheelAxis = "y";
     }
     const scrollByX = (this.effectiveDir === "rtl" ? -1 : 1) * scrollBy;
-    event.currentTarget.scrollBy(scrollByX, 0);
+    tabTitleContainer.scrollBy(scrollByX, 0);
   }
   onSlotChange() {
     this.intersectionObserver?.disconnect();
@@ -209,13 +219,33 @@ class TabNav extends LitElement {
     tabTitles.forEach((child) => {
       this.intersectionObserver?.observe(child);
     });
+    this.syncVisibleTabTitlesState();
+  }
+  syncVisibleTabTitlesState() {
+    this.updateLastVisibleTabClosable();
+    this.hasVisibleTabTitles = this.getVisibleTabTitlesIndices(this.tabTitles).length > 0;
+    this.calciteInternalTabNavSlotChange.emit([...this.tabTitles]);
+  }
+  updateLastVisibleTabClosable() {
+    const { tabTitles } = this;
     const visibleTabTitlesIndices = this.getVisibleTabTitlesIndices(tabTitles);
     const totalVisibleTabTitles = visibleTabTitlesIndices.length;
-    if (totalVisibleTabTitles > 1 && this.makeFirstVisibleTabClosable) {
-      tabTitles[visibleTabTitlesIndices[0]].closable = true;
-      this.makeFirstVisibleTabClosable = false;
+    if (totalVisibleTabTitles === 0) {
+      return;
+    }
+    const firstVisibleTabTitle = tabTitles[visibleTabTitlesIndices[0]];
+    const shouldDisableCloseButton = !this.lastTabClosable && totalVisibleTabTitles === 1;
+    if (shouldDisableCloseButton) {
+      if (firstVisibleTabTitle.closable) {
+        this.firstVisibleTabMadeNonClosable = firstVisibleTabTitle;
+        firstVisibleTabTitle.closable = false;
+      }
+      return;
+    }
+    if (this.firstVisibleTabMadeNonClosable && !this.firstVisibleTabMadeNonClosable.closed) {
+      this.firstVisibleTabMadeNonClosable.closable = true;
     }
-    this.calciteInternalTabNavSlotChange.emit(tabTitles);
+    this.firstVisibleTabMadeNonClosable = void 0;
   }
   setTabTitleContainerEl(el) {
     this.tabTitleContainerEl = el;
@@ -238,11 +268,11 @@ class TabNav extends LitElement {
     const visibleWidth = tabTitleContainer.clientWidth;
     const totalContentWidth = tabTitleContainer.scrollWidth;
     if (this.effectiveDir === "ltr") {
-      isOverflowStart = scrollPosition > 0;
-      isOverflowEnd = scrollPosition + visibleWidth < totalContentWidth;
+      isOverflowStart = scrollPosition > SCROLL_THRESHOLD;
+      isOverflowEnd = totalContentWidth - (scrollPosition + visibleWidth) > SCROLL_THRESHOLD;
     } else {
-      isOverflowStart = scrollPosition < 0;
-      isOverflowEnd = scrollPosition !== -(totalContentWidth - visibleWidth);
+      isOverflowStart = scrollPosition < -SCROLL_THRESHOLD;
+      isOverflowEnd = totalContentWidth - visibleWidth + scrollPosition > SCROLL_THRESHOLD;
     }
     this.hasOverflowingStartTabTitle = isOverflowStart;
     this.hasOverflowingEndTabTitle = isOverflowEnd;
@@ -254,55 +284,46 @@ class TabNav extends LitElement {
         return;
       }
       const containerBounds = tabTitleContainer.getBoundingClientRect();
-      const tabTitles = Array.from(this.el.querySelectorAll("calcite-tab-title"));
       const { effectiveDir } = this;
-      if (direction === "forward") {
-        tabTitles.reverse();
+      const scrollToRightTabTiles = direction === "forward" && effectiveDir === "ltr" || direction === "backward" && effectiveDir === "rtl";
+      let tabTitleToScroll;
+      const tabTitles = direction === "forward" ? [...this.tabTitles].reverse() : this.tabTitles;
+      if (!tabTitles.length) {
+        return;
       }
-      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" && effectiveDir === "ltr" || direction === "backward" && effectiveDir === "rtl") {
-          const afterContainerEnd = tabTitleBounds.x > containerEndX;
-          if (afterContainerEnd) {
-            closestToEdge = tabTitle;
-          } else {
-            const crossingContainerEnd = tabTitleEndX > containerEndX && tabTitleBounds.x > containerBounds.x;
-            if (crossingContainerEnd) {
-              closestToEdge = tabTitle;
-            }
+      if (scrollToRightTabTiles) {
+        let closestTabTitleAfterContainerEnd;
+        const closestTabTitleCrossingContainerEnd = tabTitles.find((tabTitle) => {
+          const tabTitleBounds2 = tabTitle.getBoundingClientRect();
+          const isAfterContainerEnd = tabTitleBounds2.left >= containerBounds.right;
+          const isClippingContainerEnd = tabTitleBounds2.left < containerBounds.right && tabTitleBounds2.right > containerBounds.right && tabTitleBounds2.right - containerBounds.right > SCROLL_THRESHOLD;
+          if (isAfterContainerEnd) {
+            closestTabTitleAfterContainerEnd = tabTitle;
           }
-        } else {
-          const beforeContainerStart = tabTitleEndX < containerBounds.x;
-          if (beforeContainerStart) {
-            closestToEdge = tabTitle;
-          } else {
-            const crossingContainerStart = tabTitleBounds.x < containerBounds.x && tabTitleEndX > containerBounds.x;
-            if (crossingContainerStart) {
-              closestToEdge = tabTitle;
-            }
-          }
-        }
-      });
-      let scrollTo;
-      if (closestToEdge) {
-        const scrollerButtonContainerWidth = 2 * this.scrollerButtonWidth;
-        const offsetAdjustment = direction === "forward" && effectiveDir === "ltr" || direction === "backward" && effectiveDir === "rtl" ? -scrollerButtonContainerWidth : closestToEdge.offsetWidth - (tabTitleContainer.clientWidth + scrollerButtonContainerWidth);
-        scrollTo = closestToEdge.offsetLeft + offsetAdjustment;
+          return isClippingContainerEnd;
+        });
+        tabTitleToScroll = closestTabTitleCrossingContainerEnd ?? closestTabTitleAfterContainerEnd;
       } else {
-        const scrollPosition = tabTitleContainer.scrollLeft;
-        const containerWidth = containerBounds.width;
-        const totalContentWidth = tabTitleContainer.scrollWidth;
-        const hiddenContentWidth = totalContentWidth - (containerWidth + Math.abs(scrollPosition));
-        if (hiddenContentWidth > 0) {
-          const directionMultiplier = effectiveDir === "ltr" ? 1 : -1;
-          scrollTo = scrollPosition + directionMultiplier * hiddenContentWidth;
-        }
+        let closestTabTitleBeforeContainerStart;
+        const closestTabTitleCrossingContainerStart = tabTitles.find((tabTitle) => {
+          const tabTitleBounds2 = tabTitle.getBoundingClientRect();
+          const isBeforeContainerStart = tabTitleBounds2.right <= containerBounds.left;
+          const isClippingContainerStart = tabTitleBounds2.left < containerBounds.left && tabTitleBounds2.right > containerBounds.left && containerBounds.left - tabTitleBounds2.left > SCROLL_THRESHOLD;
+          if (isBeforeContainerStart) {
+            closestTabTitleBeforeContainerStart = tabTitle;
+          }
+          return isClippingContainerStart;
+        });
+        tabTitleToScroll = closestTabTitleCrossingContainerStart ?? closestTabTitleBeforeContainerStart;
       }
+      if (!tabTitleToScroll) {
+        return;
+      }
+      const tabTitleBounds = tabTitleToScroll.getBoundingClientRect();
+      const containerScrollPosition = tabTitleContainer.scrollLeft;
+      const scrollLeft = scrollToRightTabTiles ? containerScrollPosition + (tabTitleBounds.right - containerBounds.right) : containerScrollPosition + (tabTitleBounds.left - containerBounds.left);
       tabTitleContainer.scrollTo({
-        left: scrollTo,
+        left: Math.round(scrollLeft),
         behavior: "smooth"
       });
     });
@@ -334,26 +355,35 @@ class TabNav extends LitElement {
   }
   handleTabTitleClose(closedTabTitleEl) {
     const { tabTitles } = this;
+    const visibleTabTitles = tabTitles.filter((tabTitle) => !tabTitle.closed);
+    const enabledVisibleTabTitles = this.enabledTabTitles;
+    const totalVisibleTabTitles = visibleTabTitles.length;
     const selectionModified = closedTabTitleEl.selected;
-    const visibleTabTitlesIndices = this.getVisibleTabTitlesIndices(tabTitles);
-    const totalVisibleTabTitles = visibleTabTitlesIndices.length;
-    if (totalVisibleTabTitles === 1 && tabTitles[visibleTabTitlesIndices[0]].closable) {
-      this.makeFirstVisibleTabClosable = true;
-      tabTitles[visibleTabTitlesIndices[0]].closable = false;
-      this.selectedTabId = visibleTabTitlesIndices[0];
-      if (selectionModified) {
-        tabTitles[visibleTabTitlesIndices[0]].activateTab();
-      }
-    } else if (totalVisibleTabTitles > 1) {
+    this.hasVisibleTabTitles = totalVisibleTabTitles > 0;
+    this.calciteInternalTabNavSlotChange.emit([...tabTitles]);
+    if (totalVisibleTabTitles === 0) {
+      this.selectedTitle = null;
+      this.selectedTabId = void 0;
+      return;
+    }
+    if (selectionModified) {
       const closedTabTitleIndex = tabTitles.findIndex((el) => el === closedTabTitleEl);
-      const nextTabTitleIndex = visibleTabTitlesIndices.find((value) => value > closedTabTitleIndex);
-      if (this.selectedTabId === closedTabTitleIndex) {
-        this.selectedTabId = nextTabTitleIndex ? nextTabTitleIndex : totalVisibleTabTitles - 1;
-        tabTitles[this.selectedTabId].activateTab();
+      const nextVisibleTabTitle = enabledVisibleTabTitles.find((tabTitle) => tabTitles.indexOf(tabTitle) > closedTabTitleIndex) || enabledVisibleTabTitles.at(-1);
+      if (!nextVisibleTabTitle) {
+        this.selectedTitle = null;
+        this.selectedTabId = void 0;
+        this.updateLastVisibleTabClosable();
+        return;
       }
+      nextVisibleTabTitle.activateTab();
     }
+    this.updateLastVisibleTabClosable();
     requestAnimationFrame(() => {
-      focusElement(tabTitles[this.selectedTabId]);
+      const selectedTitle = this.selectedTitle;
+      if (!selectedTitle) {
+        return;
+      }
+      focusElement(selectedTitle);
     });
   }
   render() {
@@ -363,7 +393,7 @@ class TabNav extends LitElement {
       [CSS.scale(this.scale)]: true,
       [CSS.position(this.position)]: true,
       [CSS_UTILITY.rtl]: this.effectiveDir === "rtl"
-    })}><div class=${safeClassMap({
+    })} .hidden=${!this.hasVisibleTabTitles}><div class=${safeClassMap({
       [CSS.tabTitleSlotWrapper]: true
     })} @scroll=${this.onTabTitleScroll} @wheel=${this.onTabTitleWheel} ${ref(this.setTabTitleContainerEl)}><slot @slotchange=${this.onSlotChange}></slot></div><div class=${safeClassMap(CSS.scrollButtonContainer)} .hidden=${!this.hasOverflowingEndTabTitle && !this.hasOverflowingStartTabTitle}>${this.renderScrollButton("start")}${this.renderScrollButton("end")}</div></div>`;
   }

package/dist/components/calcite-tab-title/customElement.d.ts

@@ -1,30 +1,52 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { FlipContext } from "../interfaces.js";
-import type { TabPosition } from "../calcite-tabs/interfaces.js";
-import type { IconName } from "../calcite-icon/interfaces.js";
+import type { FlipContext } from "../types.js";
+import type { TabPosition } from "../calcite-tabs/types.js";
+import type { IconName } from "../calcite-icon/types.js";
+
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's text color. */
+  "--calcite-tab-text-color": "*";
+  /** Specifies the component's text color when hovered, pressed, or selected. */
+  "--calcite-tab-text-color-press": "*";
+  /** Specifies the component's border color. */
+  "--calcite-tab-border-color": "*";
+  /** Specifies the component's background color. */
+  "--calcite-tab-background-color": "*";
+  /** When `calcite-tabs` is `bordered`, specifies the component's background color when hovered. */
+  "--calcite-tab-background-color-hover": "*";
+  /** When `selected` or active, specifies the component's accent color. */
+  "--calcite-tab-accent-color-press": "*";
+  /** Specifies the component's `iconStart` color. */
+  "--calcite-tab-icon-color-start": "*";
+  /** When `selected`, hovered, or pressed, specifies the component's `iconStart` color. */
+  "--calcite-tab-icon-color-start-press": "*";
+  /** Specifies the component's `iconEnd` color. */
+  "--calcite-tab-icon-color-end": "*";
+  /** When `selected`, hovered, or pressed, specifies the component's `iconEnd` color. */
+  "--calcite-tab-icon-color-end-press": "*";
+  /** Specifies the component's close element icon color. */
+  "--calcite-tab-close-icon-color": "*";
+  /** Specifies the component's close element icon color when hovered, focused, and active. */
+  "--calcite-tab-close-icon-color-press": "*";
+  /** Specifies the component's close element icon background color. */
+  "--calcite-tab-close-icon-background-color": "*";
+  /** Specifies the component's close element icon background color when pressed. */
+  "--calcite-tab-close-icon-background-color-press": "*";
+  /** Specifies the component's close element icon background color when hovered. */
+  "--calcite-tab-close-icon-background-color-hover": "*";
+}
+}
 
 /**
  * Tab-titles are optionally individually closable.
  *
- * @cssproperty [--calcite-tab-text-color] - Specifies the component's text color.
- * @cssproperty [--calcite-tab-text-color-press] - Specifies the component's text color when hovered, pressed, or selected.
- * @cssproperty [--calcite-tab-border-color] - Specifies the component's border color.
- * @cssproperty [--calcite-tab-background-color] - Specifies the component's background color.
- * @cssproperty [--calcite-tab-background-color-hover] - When `calcite-tabs` is `bordered`, specifies the component's background color when hovered.
- * @cssproperty [--calcite-tab-accent-color-press] - When `selected` or active, specifies the component's accent color.
- * @cssproperty [--calcite-tab-icon-color-start] - Specifies the component's `iconStart` color.
- * @cssproperty [--calcite-tab-icon-color-start-press] - When `selected`, hovered, or pressed, specifies the component's `iconStart` color.
- * @cssproperty [--calcite-tab-icon-color-end] - Specifies the component's `iconEnd` color.
- * @cssproperty [--calcite-tab-icon-color-end-press] - When `selected`, hovered, or pressed, specifies the component's `iconEnd` color.
- * @cssproperty [--calcite-tab-close-icon-color] - Specifies the component's close element icon color.
- * @cssproperty [--calcite-tab-close-icon-color-press] - Specifies the component's close element icon color when hovered, focused, and active.
- * @cssproperty [--calcite-tab-close-icon-background-color] - Specifies the component's close element icon background color.
- * @cssproperty [--calcite-tab-close-icon-background-color-press] - Specifies the component's close element icon background color when pressed.
- * @cssproperty [--calcite-tab-close-icon-background-color-hover] - Specifies the component's close element icon background color when hovered.
  * @slot  - A slot for adding text.
  */
 export abstract class TabTitle extends LitElement {
+  /** Specifies a function to run before the component closes. */
+  accessor beforeClose: (() => Promise<void>) | undefined;
   /**
    * When `true`, displays a close button in the component.
    *
@@ -49,14 +71,17 @@ export abstract class TabTitle extends LitElement {
   accessor iconFlipRtl: FlipContext | undefined;
   /** Specifies an icon to display at the start of the component. */
   accessor iconStart: IconName | undefined;
-  /** Overrides individual strings used by the component. */
-  accessor messageOverrides: { close?: string; };
   /**
-   * 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`.
+   * Replace localized message strings with your own strings.
    *
-   *  \@internal
+   * _**Note**: Individual message keys may change between releases._
+   */
+  accessor messageOverrides: { close?: string | undefined; };
+  /**
+   * Specifies the position of `calcite-tab-nav` and `calcite-tab-title` components in relation to, and is inherited from the parent `calcite-tabs`.
    *
    * @default "top"
+   * @internal
    */
   accessor position: TabPosition;
   /**