@esri/solutions-components 0.8.6-6.3 → 0.8.6

package/dist/components/tab-nav.js

@@ -3,40 +3,20 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { proxyCustomElement, HTMLElement, createEvent, readTask, h, Host } from '@stencil/core/internal/client';
-import { c as calciteSize24, a as calciteSize32, b as calciteSize44 } from './core.js';
-import { x as focusElementInGroup, g as getElementDir, A as filterDirectChildren } from './dom.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { w as focusElementInGroup, g as getElementDir, y as filterDirectChildren } from './dom.js';
 import { c as createObserver } from './observers.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale2.js';
-import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n.js';
-import { C as CSS_UTILITY } from './resources.js';
-import { d as defineCustomElement$3 } from './button.js';
-import { d as defineCustomElement$2 } from './icon.js';
-import { d as defineCustomElement$1 } from './loader.js';
 
 /*!
  * 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.8.2
+ * v2.4.0
  */
-const ICON = {
-    chevronRight: "chevron-right",
-    chevronLeft: "chevron-left",
-};
 const CSS = {
-    activeIndicatorContainer: "tab-nav-active-indicator-container",
     container: "tab-nav",
-    containerHasEndTabTitleOverflow: "tab-nav--end-overflow",
-    containerHasStartTabTitleOverflow: "tab-nav--start-overflow",
-    scrollButton: "scroll-button",
-    scrollButtonContainer: "scroll-button-container",
-    scrollBackwardContainerButton: "scroll-button-container--backward",
-    scrollForwardContainerButton: "scroll-button-container--forward",
-    tabTitleSlotWrapper: "tab-titles-slot-wrapper",
 };
 
-const tabNavCss = ":host{--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 CalciteTabNavStyle0 = tabNavCss;
+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 TabNav = /*@__PURE__*/ proxyCustomElement(class TabNav extends HTMLElement {
     constructor() {
@@ -45,128 +25,29 @@ const TabNav = /*@__PURE__*/ proxyCustomElement(class TabNav extends HTMLElement
         this.__attachShadow();
         this.calciteTabChange = createEvent(this, "calciteTabChange", 6);
         this.calciteInternalTabChange = createEvent(this, "calciteInternalTabChange", 6);
-        this.effectiveDir = "ltr";
-        this.lastScrollWheelAxis = "x";
+        this.animationActiveDuration = 0.3;
         this.resizeObserver = createObserver("resize", () => {
-            this.updateScrollingState();
             if (!this.activeIndicatorEl) {
                 return;
             }
-            this.updateActiveIndicator();
+            // remove active indicator transition duration during resize to prevent wobble
+            this.activeIndicatorEl.style.transitionDuration = "0s";
+            this.updateActiveWidth();
+            this.updateOffsetPosition();
         });
-        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.effectiveDir === "rtl" ? -1 : 1) * scrollBy;
-            event.currentTarget.scrollBy(scrollByX, 0);
-            requestAnimationFrame(() => this.updateActiveIndicator());
-        };
-        this.onSlotChange = (event) => {
-            var _a;
-            (_a = this.intersectionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-            const slottedChildren = event.target.assignedElements();
-            slottedChildren.forEach((child) => {
-                var _a;
-                (_a = this.intersectionObserver) === null || _a === void 0 ? void 0 : _a.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 { effectiveDir } = 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" && 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;
-                            }
-                        }
-                    }
-                    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" && effectiveDir === "ltr") ||
-                        (direction === "backward" && effectiveDir === "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");
+        //--------------------------------------------------------------------------
+        //
+        //  Private Methods
+        //
+        //--------------------------------------------------------------------------
         this.handleTabFocus = (event, el, destination) => {
-            const focused = focusElementInGroup(this.enabledTabTitles, el, destination);
-            this.scrollTabTitleIntoView(focused, "instant");
+            focusElementInGroup(this.enabledTabTitles, el, destination);
             event.stopPropagation();
         };
-        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.handleContainerScroll = () => {
+            // remove active indicator transition duration while container is scrolling to prevent wobble
+            this.activeIndicatorEl.style.transitionDuration = "0s";
+            this.updateOffsetPosition();
         };
         this.storageId = undefined;
         this.syncId = undefined;
@@ -177,17 +58,8 @@ const TabNav = /*@__PURE__*/ proxyCustomElement(class TabNav extends HTMLElement
         this.bordered = false;
         this.indicatorOffset = undefined;
         this.indicatorWidth = undefined;
-        this.messages = undefined;
-        this.messageOverrides = undefined;
-        this.defaultMessages = undefined;
-        this.effectiveLocale = "";
-        this.hasOverflowingStartTabTitle = false;
-        this.hasOverflowingEndTabTitle = false;
         this.selectedTabId = undefined;
     }
-    onMessagesChange() {
-        /* wired up by t9n util */
-    }
     async selectedTabIdChanged() {
         if (localStorage &&
             this.storageId &&
@@ -201,7 +73,10 @@ const TabNav = /*@__PURE__*/ proxyCustomElement(class TabNav extends HTMLElement
         this.selectedTitle = await this.getTabTitleById(this.selectedTabId);
     }
     selectedTitleChanged() {
-        this.updateActiveIndicator();
+        this.updateOffsetPosition();
+        this.updateActiveWidth();
+        // reset the animation time on tab selection
+        this.activeIndicatorEl.style.transitionDuration = `${this.animationActiveDuration}s`;
     }
     //--------------------------------------------------------------------------
     //
@@ -212,27 +87,21 @@ const TabNav = /*@__PURE__*/ proxyCustomElement(class TabNav extends HTMLElement
         var _a;
         this.parentTabsEl = this.el.closest("calcite-tabs");
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el);
-        connectLocalized(this);
-        connectMessages(this);
     }
-    async componentWillLoad() {
+    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 === null || parentTabsEl === void 0 ? void 0 : parentTabsEl.layout;
         this.bordered = parentTabsEl === null || parentTabsEl === void 0 ? void 0 : parentTabsEl.bordered;
-        this.effectiveDir = getElementDir(this.el);
+        // fix issue with active tab-title not lining up with blue indicator
         if (this.selectedTitle) {
-            this.updateActiveIndicator();
+            this.updateOffsetPosition();
         }
     }
     componentDidRender() {
@@ -250,38 +119,23 @@ const TabNav = /*@__PURE__*/ proxyCustomElement(class TabNav extends HTMLElement
     disconnectedCallback() {
         var _a;
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.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 = this.effectiveDir !== "rtl" ? { width, left: offset } : { width, right: offset };
-        return (h(Host, { key: '0824dd4470393b0e186b0fdf238420454fed396c', role: "tablist" }, h("div", { key: '205551441feaaa61e2b4b603a7b37ce3d18bdba8', class: {
+        const indicatorStyle = 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,
-                [CSS_UTILITY.rtl]: this.effectiveDir === "rtl",
-            },
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: this.storeContainerRef }, this.renderScrollButton("start"), h("div", { key: '64844ffd05363fe55e2ae9d4d820dc5113da57d8', class: {
-                [CSS.tabTitleSlotWrapper]: true,
-            }, onScroll: this.onTabTitleScroll, onWheel: this.onTabTitleWheel,
+            }, onScroll: this.handleContainerScroll,
             // 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", { key: 'a77b898cac87d4fa190ad717a3c0ca4474a962fe', onSlotchange: this.onSlotChange })), h("div", { key: '0bf812fe39d07fbddd54ddb515e2eb31adea9a74', class: {
-                [CSS.activeIndicatorContainer]: true,
-            },
+            ref: (el) => (this.tabNavEl = el) }, h("slot", null), h("div", { class: "tab-nav-active-indicator-container",
             // 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", { key: 'e1624e7b9845ea37eea06ca7a85816d782530c79', class: "tab-nav-active-indicator", style: indicatorStyle,
+            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) })), this.renderScrollButton("end"))));
+            ref: (el) => (this.activeIndicatorEl = el) })))));
     }
     //--------------------------------------------------------------------------
     //
@@ -301,42 +155,10 @@ const TabNav = /*@__PURE__*/ proxyCustomElement(class TabNav extends HTMLElement
         this.handleTabFocus(event, event.target, "last");
     }
     internalActivateTabHandler(event) {
-        const activatedTabTitle = event.target;
         this.selectedTabId = event.detail.tab
             ? event.detail.tab
-            : this.getIndexOfTabTitle(activatedTabTitle);
+            : this.getIndexOfTabTitle(event.target);
         event.stopPropagation();
-        this.scrollTabTitleIntoView(activatedTabTitle);
-    }
-    scrollTabTitleIntoView(activatedTabTitle, behavior = "smooth") {
-        if (!activatedTabTitle) {
-            return;
-        }
-        readTask(() => {
-            const isLTR = this.effectiveDir === "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();
@@ -367,53 +189,22 @@ const TabNav = /*@__PURE__*/ proxyCustomElement(class TabNav extends HTMLElement
         event.stopPropagation();
     }
     iconStartChangeHandler() {
-        this.updateActiveIndicator();
-    }
-    effectiveLocaleChange() {
-        updateMessages(this, this.effectiveLocale);
-    }
-    get scrollerButtonWidth() {
-        const { scale } = this;
-        return parseInt(scale === "s" ? calciteSize24 : scale === "m" ? calciteSize32 : calciteSize44);
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
-    updateActiveIndicator() {
-        var _a, _b, _c, _d, _e, _f;
-        const tabTitleScrollLeft = (_a = this.tabTitleContainerEl) === null || _a === void 0 ? void 0 : _a.scrollLeft;
-        const containerScrollLeft = (_b = this.containerEl) === null || _b === void 0 ? void 0 : _b.scrollLeft;
-        const navWidth = (_c = this.activeIndicatorContainerEl) === null || _c === void 0 ? void 0 : _c.offsetWidth;
-        const tabLeft = (_d = this.selectedTitle) === null || _d === void 0 ? void 0 : _d.offsetLeft;
-        const tabWidth = (_e = this.selectedTitle) === null || _e === void 0 ? void 0 : _e.offsetWidth;
-        const offsetRight = navWidth - tabLeft - tabWidth;
-        const offsetBase = this.effectiveDir === "ltr" ? tabLeft : offsetRight;
-        const multiplier = this.effectiveDir === "ltr" ? -1 : 1;
-        this.indicatorOffset = offsetBase + multiplier * (containerScrollLeft + tabTitleScrollLeft);
-        this.indicatorWidth = (_f = this.selectedTitle) === null || _f === void 0 ? void 0 : _f.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.effectiveDir === "ltr") {
-            isOverflowStart = scrollPosition > 0;
-            isOverflowEnd = scrollPosition + visibleWidth < totalContentWidth;
-        }
-        else {
-            isOverflowStart = scrollPosition < 0;
-            isOverflowEnd = scrollPosition !== -(totalContentWidth - visibleWidth);
-        }
-        this.hasOverflowingStartTabTitle = isOverflowStart;
-        this.hasOverflowingEndTabTitle = isOverflowEnd;
+        this.updateActiveWidth();
+        this.updateOffsetPosition();
+    }
+    updateOffsetPosition() {
+        var _a, _b, _c, _d, _e;
+        const dir = getElementDir(this.el);
+        const navWidth = (_a = this.activeIndicatorContainerEl) === null || _a === void 0 ? void 0 : _a.offsetWidth;
+        const tabLeft = (_b = this.selectedTitle) === null || _b === void 0 ? void 0 : _b.offsetLeft;
+        const tabWidth = (_c = this.selectedTitle) === null || _c === void 0 ? void 0 : _c.offsetWidth;
+        const offsetRight = navWidth - (tabLeft + tabWidth);
+        this.indicatorOffset =
+            dir !== "rtl" ? tabLeft - ((_d = this.tabNavEl) === null || _d === void 0 ? void 0 : _d.scrollLeft) : offsetRight + ((_e = this.tabNavEl) === null || _e === void 0 ? void 0 : _e.scrollLeft);
+    }
+    updateActiveWidth() {
+        var _a;
+        this.indicatorWidth = (_a = this.selectedTitle) === null || _a === void 0 ? void 0 : _a.offsetWidth;
     }
     getIndexOfTabTitle(el, tabTitles = this.tabTitles) {
         // In most cases, since these indexes correlate with tab contents, we want to consider all tab titles.
@@ -452,19 +243,17 @@ const TabNav = /*@__PURE__*/ proxyCustomElement(class TabNav extends HTMLElement
             }
         }
         requestAnimationFrame(() => {
-            this.updateActiveIndicator();
+            this.updateOffsetPosition();
+            this.updateActiveWidth();
             tabTitles[this.selectedTabId].focus();
         });
     }
-    static get assetsDirs() { return ["assets"]; }
     get el() { return this; }
     static get watchers() { return {
-        "messageOverrides": ["onMessagesChange"],
         "selectedTabId": ["selectedTabIdChanged"],
-        "selectedTitle": ["selectedTitleChanged"],
-        "effectiveLocale": ["effectiveLocaleChange"]
+        "selectedTitle": ["selectedTitleChanged"]
     }; }
-    static get style() { return CalciteTabNavStyle0; }
+    static get style() { return tabNavCss; }
 }, [1, "calcite-tab-nav", {
         "storageId": [513, "storage-id"],
         "syncId": [513, "sync-id"],
@@ -475,45 +264,22 @@ const TabNav = /*@__PURE__*/ proxyCustomElement(class TabNav extends HTMLElement
         "bordered": [1540],
         "indicatorOffset": [1026, "indicator-offset"],
         "indicatorWidth": [1026, "indicator-width"],
-        "messages": [1040],
-        "messageOverrides": [1040],
-        "defaultMessages": [32],
-        "effectiveLocale": [32],
-        "hasOverflowingStartTabTitle": [32],
-        "hasOverflowingEndTabTitle": [32],
         "selectedTabId": [32]
     }, [[0, "calciteInternalTabsFocusPrevious", "focusPreviousTabHandler"], [0, "calciteInternalTabsFocusNext", "focusNextTabHandler"], [0, "calciteInternalTabsFocusFirst", "focusFirstTabHandler"], [0, "calciteInternalTabsFocusLast", "focusLastTabHandler"], [0, "calciteInternalTabsActivate", "internalActivateTabHandler"], [0, "calciteTabsActivate", "activateTabHandler"], [0, "calciteInternalTabsClose", "internalCloseTabHandler"], [0, "calciteInternalTabTitleRegister", "updateTabTitles"], [16, "calciteInternalTabChange", "globalInternalTabChangeHandler"], [0, "calciteInternalTabIconChanged", "iconStartChangeHandler"]], {
-        "messageOverrides": ["onMessagesChange"],
         "selectedTabId": ["selectedTabIdChanged"],
-        "selectedTitle": ["selectedTitleChanged"],
-        "effectiveLocale": ["effectiveLocaleChange"]
+        "selectedTitle": ["selectedTitleChanged"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["calcite-tab-nav", "calcite-button", "calcite-icon", "calcite-loader"];
+    const components = ["calcite-tab-nav"];
     components.forEach(tagName => { switch (tagName) {
         case "calcite-tab-nav":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, TabNav);
             }
             break;
-        case "calcite-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "calcite-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "calcite-loader":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
     } });
 }
 defineCustomElement();

package/dist/components/tab-title.js

@@ -4,7 +4,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, Build, h, Host } from '@stencil/core/internal/client';
-import { t as toAriaBoolean, g as getElementDir, z as nodeListToArray } from './dom.js';
+import { t as toAriaBoolean, g as getElementDir, x as nodeListToArray } from './dom.js';
 import { g as guid } from './guid.js';
 import { c as connectInteractive, d as disconnectInteractive, I as InteractiveContainer, u as updateHostInteraction } from './interactive.js';
 import { c as createObserver } from './observers.js';
@@ -16,7 +16,7 @@ import { d as defineCustomElement$1 } from './icon.js';
 /*!
  * 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.8.2
+ * v2.4.0
  */
 const CSS = {
     closeButton: "close-button",
@@ -32,8 +32,7 @@ const ICONS = {
     close: "x",
 };
 
-const tabTitleCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-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:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform 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));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:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform 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;-webkit-appearance:none;-moz-appearance:none;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:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform 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));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 CalciteTabTitleStyle0 = tabTitleCss;
+const tabTitleCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-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-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);-webkit-text-decoration-line:none;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;-webkit-appearance:none;-moz-appearance:none;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-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 TabTitle = /*@__PURE__*/ proxyCustomElement(class TabTitle extends HTMLElement {
     constructor() {
@@ -134,15 +133,15 @@ const TabTitle = /*@__PURE__*/ proxyCustomElement(class TabTitle extends HTMLEle
     render() {
         const { el, closed } = this;
         const id = el.id || this.guid;
-        const iconStartEl = (h("calcite-icon", { key: 'dc31a68fd20ffcf451d5b23e2aaae683249aa50a', class: { [CSS.titleIcon]: true, [CSS.iconStart]: true }, flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: getIconScale(this.scale) }));
-        const iconEndEl = (h("calcite-icon", { key: 'b8b85c799e950e050bb6c953cec61ab871894c9c', class: { [CSS.titleIcon]: true, [CSS.iconEnd]: true }, flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: getIconScale(this.scale) }));
-        return (h(Host, { key: '532a18e093cd481a1058e55f1ac936489cad3ddb', "aria-controls": this.controls, "aria-selected": toAriaBoolean(this.selected), id: id, role: "tab", tabIndex: this.selected && !this.disabled ? 0 : -1 }, h(InteractiveContainer, { key: 'dede575160963d2463e50f6e8baab92319acda9f', disabled: this.disabled }, h("div", { key: '79e9c6d5f15626cd84101e7b85365c9af2c1453b', class: {
+        const iconStartEl = (h("calcite-icon", { class: { [CSS.titleIcon]: true, [CSS.iconStart]: true }, flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: getIconScale(this.scale) }));
+        const iconEndEl = (h("calcite-icon", { class: { [CSS.titleIcon]: true, [CSS.iconEnd]: true }, flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: getIconScale(this.scale) }));
+        return (h(Host, { "aria-controls": this.controls, "aria-selected": toAriaBoolean(this.selected), id: id, role: "tab", tabIndex: this.selected && !this.disabled ? 0 : -1 }, h(InteractiveContainer, { disabled: this.disabled }, h("div", { class: {
                 container: true,
                 [CSS.iconPresent]: !!this.iconStart || !!this.iconEnd,
                 [`scale-${this.scale}`]: true,
             }, hidden: closed,
             // 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) => { var _a; return (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(el); } }, h("div", { key: '8076d17c92940370363d9bc1dae416fdcdf4b716', class: { [CSS.content]: true, [CSS.contentHasText]: this.hasText } }, this.iconStart ? iconStartEl : null, h("slot", { key: 'b25df3722162e58cb196ca500a7b4c718d5f2ed7' }), this.iconEnd ? iconEndEl : null), this.renderCloseButton()))));
+            ref: (el) => { var _a; return (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(el); } }, h("div", { class: { [CSS.content]: true, [CSS.contentHasText]: this.hasText } }, this.iconStart ? iconStartEl : null, h("slot", null), this.iconEnd ? iconEndEl : null), this.renderCloseButton()))));
     }
     renderCloseButton() {
         const { closable, messages } = this;
@@ -282,7 +281,7 @@ const TabTitle = /*@__PURE__*/ proxyCustomElement(class TabTitle extends HTMLEle
         "messageOverrides": ["onMessagesChange"],
         "effectiveLocale": ["effectiveLocaleChange"]
     }; }
-    static get style() { return CalciteTabTitleStyle0; }
+    static get style() { return tabTitleCss; }
 }, [1, "calcite-tab-title", {
         "selected": [1540],
         "closable": [516],

package/dist/components/tab.js

@@ -4,21 +4,20 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { z as nodeListToArray } from './dom.js';
+import { x as nodeListToArray } from './dom.js';
 import { g as guid } from './guid.js';
 
 /*!
  * 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.8.2
+ * v2.4.0
  */
 const CSS = {
     container: "container",
     content: "content",
 };
 
-const tabCss = ":host([selected]) section,:host([selected]) .container{display:block}:host{display:none;block-size:100%;inline-size:100%}:host([selected]){display:block;block-size:100%;inline-size:100%;overflow:auto}.content{box-sizing:border-box;padding-block:var(--calcite-internal-tab-content-block-padding)}.scale-s{--calcite-internal-tab-content-block-padding:var(--calcite-tab-content-block-padding, 0.25rem);font-size:var(--calcite-font-size--2);line-height:1rem}.scale-m{--calcite-internal-tab-content-block-padding:var(--calcite-tab-content-block-padding, 0.5rem);font-size:var(--calcite-font-size--1);line-height:1rem}.scale-l{--calcite-internal-tab-content-block-padding:var(--calcite-tab-content-block-padding, 0.625rem);font-size:var(--calcite-font-size-0);line-height:1.25rem}section,.container{display:none;block-size:100%;inline-size:100%}.container{outline-color:transparent}.container:focus{outline:2px solid var(--calcite-ui-focus-color, 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([hidden]){display:none}[hidden]{display:none}";
-const CalciteTabStyle0 = tabCss;
+const tabCss = ":host([selected]) section,:host([selected]) .container{display:block}:host{display:none;block-size:100%;inline-size:100%}:host([selected]){display:block;block-size:100%;inline-size:100%;overflow:auto}.content{box-sizing:border-box;padding-block:var(--calcite-internal-tab-content-block-padding)}.scale-s{--calcite-internal-tab-content-block-padding:var(--calcite-tab-content-block-padding, 0.25rem);font-size:var(--calcite-font-size--2);line-height:1rem}.scale-m{--calcite-internal-tab-content-block-padding:var(--calcite-tab-content-block-padding, 0.5rem);font-size:var(--calcite-font-size--1);line-height:1rem}.scale-l{--calcite-internal-tab-content-block-padding:var(--calcite-tab-content-block-padding, 0.625rem);font-size:var(--calcite-font-size-0);line-height:1.25rem}section,.container{display:none;block-size:100%;inline-size:100%}:host([hidden]){display:none}[hidden]{display:none}";
 
 const Tab = /*@__PURE__*/ proxyCustomElement(class Tab extends HTMLElement {
     constructor() {
@@ -39,7 +38,7 @@ const Tab = /*@__PURE__*/ proxyCustomElement(class Tab extends HTMLElement {
     //--------------------------------------------------------------------------
     render() {
         const id = this.el.id || this.guid;
-        return (h(Host, { key: '71074d2c26a860d7934fbd9b236f9a264ab3c34f', "aria-labelledby": this.labeledBy, id: id }, h("div", { key: '3fcf14f4aaddf9ad579c26c962ad75803febcea0', class: { [CSS.container]: true, [`scale-${this.scale}`]: true }, role: "tabpanel", tabIndex: this.selected ? 0 : -1 }, h("section", { key: 'ba967be2e5121636d81754ec959452160bc4bb0d', class: CSS.content }, h("slot", { key: 'fae921d6fe2ae713bddc83adacbcf7e418aa1b7c' })))));
+        return (h(Host, { "aria-labelledby": this.labeledBy, id: id }, h("div", { class: { [CSS.container]: true, [`scale-${this.scale}`]: true }, role: "tabpanel", tabIndex: this.selected ? 0 : -1 }, h("section", { class: CSS.content }, h("slot", null)))));
     }
     connectedCallback() {
         this.parentTabsEl = this.el.closest("calcite-tabs");
@@ -104,7 +103,7 @@ const Tab = /*@__PURE__*/ proxyCustomElement(class Tab extends HTMLElement {
         this.labeledBy = titleIds[tabIds.indexOf(this.el.id)] || null;
     }
     get el() { return this; }
-    static get style() { return CalciteTabStyle0; }
+    static get style() { return tabCss; }
 }, [1, "calcite-tab", {
         "tab": [513],
         "selected": [1540],