@esri/solutions-components 0.10.4 → 0.10.6

package/dist/components/tab-nav.js

@@ -5,7 +5,7 @@
  */
 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 { y as focusElementInGroup, g as getElementDir, B as filterDirectChildren } from './dom.js';
+import { h as slotChangeGetAssignedElements, y as focusElementInGroup, g as getElementDir, B 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';
@@ -17,14 +17,13 @@ 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/dev/LICENSE.md for details.
- * v2.10.1
+ * v2.11.1
  */
 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",
@@ -35,7 +34,7 @@ const CSS = {
     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 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-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-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-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}.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([hidden]){display:none}[hidden]{display:none}";
 const CalciteTabNavStyle0 = tabNavCss;
 
 const TabNav = /*@__PURE__*/ proxyCustomElement(class TabNav extends HTMLElement {
@@ -44,16 +43,18 @@ const TabNav = /*@__PURE__*/ proxyCustomElement(class TabNav extends HTMLElement
         this.__registerHost();
         this.__attachShadow();
         this.calciteTabChange = createEvent(this, "calciteTabChange", 6);
+        this.calciteInternalTabNavSlotChange = createEvent(this, "calciteInternalTabNavSlotChange", 7);
         this.calciteInternalTabChange = createEvent(this, "calciteInternalTabChange", 6);
         this.effectiveDir = "ltr";
         this.lastScrollWheelAxis = "x";
         this.resizeObserver = createObserver("resize", () => {
             this.updateScrollingState();
-            if (!this.activeIndicatorEl) {
-                return;
-            }
-            this.updateActiveIndicator();
         });
+        //--------------------------------------------------------------------------
+        //
+        //  Private Methods
+        //
+        //--------------------------------------------------------------------------
         this.onTabTitleWheel = (event) => {
             event.preventDefault();
             const { deltaX, deltaY } = event;
@@ -73,16 +74,15 @@ const TabNav = /*@__PURE__*/ proxyCustomElement(class TabNav extends HTMLElement
             }
             const scrollByX = (this.effectiveDir === "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) => {
+            const slottedElements = slotChangeGetAssignedElements(event, "calcite-tab-title");
+            slottedElements.forEach((child) => {
                 this.intersectionObserver?.observe(child);
             });
+            this.calciteInternalTabNavSlotChange.emit(slottedElements);
         };
-        this.storeContainerRef = (el) => (this.containerEl = el);
         this.storeTabTitleWrapperRef = (el) => {
             this.tabTitleContainerEl = el;
             this.intersectionObserver = createObserver("intersection", () => this.updateScrollingState(), {
@@ -152,7 +152,6 @@ const TabNav = /*@__PURE__*/ proxyCustomElement(class TabNav extends HTMLElement
             event.stopPropagation();
         };
         this.onTabTitleScroll = () => {
-            this.updateActiveIndicator();
             this.updateScrollingState();
         };
         this.renderScrollButton = (overflowDirection) => {
@@ -173,8 +172,6 @@ const TabNav = /*@__PURE__*/ proxyCustomElement(class TabNav extends HTMLElement
         this.layout = "inline";
         this.position = "bottom";
         this.bordered = false;
-        this.indicatorOffset = undefined;
-        this.indicatorWidth = undefined;
         this.messages = undefined;
         this.messageOverrides = undefined;
         this.defaultMessages = undefined;
@@ -183,23 +180,13 @@ const TabNav = /*@__PURE__*/ proxyCustomElement(class TabNav extends HTMLElement
         this.hasOverflowingEndTabTitle = false;
         this.selectedTabId = undefined;
     }
-    onMessagesChange() {
-        /* wired up by t9n util */
-    }
-    async selectedTabIdChanged() {
-        if (localStorage &&
-            this.storageId &&
-            this.selectedTabId !== undefined &&
-            this.selectedTabId !== null) {
-            localStorage.setItem(`calcite-tab-nav-${this.storageId}`, JSON.stringify(this.selectedTabId));
-        }
+    selectedTitleChanged() {
         this.calciteInternalTabChange.emit({
             tab: this.selectedTabId,
         });
-        this.selectedTitle = await this.getTabTitleById(this.selectedTabId);
     }
-    selectedTitleChanged() {
-        this.updateActiveIndicator();
+    onMessagesChange() {
+        /* wired up by t9n util */
     }
     //--------------------------------------------------------------------------
     //
@@ -228,9 +215,6 @@ const TabNav = /*@__PURE__*/ proxyCustomElement(class TabNav extends HTMLElement
         this.layout = parentTabsEl?.layout;
         this.bordered = parentTabsEl?.bordered;
         this.effectiveDir = getElementDir(this.el);
-        if (this.selectedTitle) {
-            this.updateActiveIndicator();
-        }
     }
     componentDidRender() {
         // if every tab title is active select the first tab.
@@ -255,21 +239,16 @@ const TabNav = /*@__PURE__*/ proxyCustomElement(class TabNav extends HTMLElement
     //
     //--------------------------------------------------------------------------
     render() {
-        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: '174cd3c34b59be8c237cb1bd2e143d8d9369198c', role: "tablist" }, h("div", { key: '3431edaba38c8875d6077a649610d2f21173df47', class: {
+        return (h(Host, { key: 'dd1f2b015a83e243b6d5b74f5d75f6e15a380326', role: "tablist" }, h("div", { key: 'b855759e9b8f549fe804ed6eeae6da3c1a48ff71', 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",
-            }, ref: this.storeContainerRef }, this.renderScrollButton("start"), h("div", { key: '1fee2edb04f475641523b66d5fbe4e62a7403c26', class: {
+            } }, this.renderScrollButton("start"), h("div", { key: '83290a1781ffe3644be2c33b4df23e02c9bc322e', class: {
                 [CSS.tabTitleSlotWrapper]: true,
-            }, onScroll: this.onTabTitleScroll, onWheel: this.onTabTitleWheel, ref: this.storeTabTitleWrapperRef }, h("slot", { key: 'e14eea620096ffa9bc6d518ce31ebe0f623bdf4e', onSlotchange: this.onSlotChange })), h("div", { key: '1ec5cff7490ac9ae87b0dab467ca3890c217a3b3', class: {
-                [CSS.activeIndicatorContainer]: true,
-            }, ref: (el) => (this.activeIndicatorContainerEl = el) }, h("div", { key: 'e0e10bbeedcae6bcf1f5d5957d35e06e555fd14c', class: "tab-nav-active-indicator", ref: (el) => (this.activeIndicatorEl = el), style: indicatorStyle })), this.renderScrollButton("end"))));
+            }, onScroll: this.onTabTitleScroll, onWheel: this.onTabTitleWheel, ref: this.storeTabTitleWrapperRef }, h("slot", { key: '3564fbf9bfd1c05f1cec10ec330240b8d9572e07', onSlotchange: this.onSlotChange })), this.renderScrollButton("end"))));
     }
     //--------------------------------------------------------------------------
     //
@@ -294,6 +273,7 @@ const TabNav = /*@__PURE__*/ proxyCustomElement(class TabNav extends HTMLElement
             ? event.detail.tab
             : this.getIndexOfTabTitle(activatedTabTitle);
         event.stopPropagation();
+        this.selectedTitle = activatedTabTitle;
         this.scrollTabTitleIntoView(activatedTabTitle);
     }
     scrollTabTitleIntoView(activatedTabTitle, behavior = "smooth") {
@@ -340,9 +320,10 @@ const TabNav = /*@__PURE__*/ proxyCustomElement(class TabNav extends HTMLElement
      *
      * @param event
      */
-    updateTabTitles(event) {
+    async updateTabTitles(event) {
         if (event.target.selected) {
             this.selectedTabId = event.detail;
+            this.selectedTitle = await this.getTabTitleById(this.selectedTabId);
         }
     }
     globalInternalTabChangeHandler(event) {
@@ -354,33 +335,24 @@ const TabNav = /*@__PURE__*/ proxyCustomElement(class TabNav extends HTMLElement
         }
         event.stopPropagation();
     }
-    iconStartChangeHandler() {
-        this.updateActiveIndicator();
-    }
     effectiveLocaleChange() {
         updateMessages(this, this.effectiveLocale);
     }
+    async selectedTabIdChanged() {
+        if (localStorage &&
+            this.storageId &&
+            this.selectedTabId !== undefined &&
+            this.selectedTabId !== null) {
+            localStorage.setItem(`calcite-tab-nav-${this.storageId}`, JSON.stringify(this.selectedTabId));
+        }
+        this.calciteInternalTabChange.emit({
+            tab: this.selectedTabId,
+        });
+    }
     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;
-        const offsetBase = this.effectiveDir === "ltr" ? tabLeft : offsetRight;
-        const multiplier = this.effectiveDir === "ltr" ? -1 : 1;
-        this.indicatorOffset = offsetBase + multiplier * (containerScrollLeft + tabTitleScrollLeft);
-        this.indicatorWidth = this.selectedTitle?.offsetWidth;
-    }
     updateScrollingState() {
         const tabTitleContainer = this.tabTitleContainerEl;
         if (!tabTitleContainer) {
@@ -439,17 +411,16 @@ const TabNav = /*@__PURE__*/ proxyCustomElement(class TabNav extends HTMLElement
             }
         }
         requestAnimationFrame(() => {
-            this.updateActiveIndicator();
             tabTitles[this.selectedTabId].focus();
         });
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return this; }
     static get watchers() { return {
-        "messageOverrides": ["onMessagesChange"],
-        "selectedTabId": ["selectedTabIdChanged"],
         "selectedTitle": ["selectedTitleChanged"],
-        "effectiveLocale": ["effectiveLocaleChange"]
+        "messageOverrides": ["onMessagesChange"],
+        "effectiveLocale": ["effectiveLocaleChange"],
+        "selectedTabId": ["selectedTabIdChanged"]
     }; }
     static get style() { return CalciteTabNavStyle0; }
 }, [1, "calcite-tab-nav", {
@@ -460,8 +431,6 @@ const TabNav = /*@__PURE__*/ proxyCustomElement(class TabNav extends HTMLElement
         "layout": [1537],
         "position": [1],
         "bordered": [1540],
-        "indicatorOffset": [1026, "indicator-offset"],
-        "indicatorWidth": [1026, "indicator-width"],
         "messages": [1040],
         "messageOverrides": [1040],
         "defaultMessages": [32],
@@ -469,11 +438,11 @@ const TabNav = /*@__PURE__*/ proxyCustomElement(class TabNav extends HTMLElement
         "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"],
+    }, [[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"]], {
         "selectedTitle": ["selectedTitleChanged"],
-        "effectiveLocale": ["effectiveLocaleChange"]
+        "messageOverrides": ["onMessagesChange"],
+        "effectiveLocale": ["effectiveLocaleChange"],
+        "selectedTabId": ["selectedTabIdChanged"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/tab-title.js

@@ -3,7 +3,7 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { proxyCustomElement, HTMLElement, createEvent, Build, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { t as toAriaBoolean, g as getElementDir, A 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';
@@ -11,28 +11,32 @@ import { c as createObserver } from './observers.js';
 import { c as connectLocalized, d as disconnectLocalized } from './locale2.js';
 import { c as connectMessages, d as disconnectMessages, s as setUpMessages, u as updateMessages } from './t9n.js';
 import { g as getIconScale } from './component.js';
+import { i as isBrowser } from './browser.js';
 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/dev/LICENSE.md for details.
- * v2.10.1
+ * v2.11.1
  */
 const CSS = {
     closeButton: "close-button",
     container: "container",
+    containerBottom: "container--bottom",
     content: "content",
     contentHasText: "content--has-text",
     iconEnd: "icon-end",
     iconPresent: "icon-present",
     iconStart: "icon-start",
     titleIcon: "calcite-tab-title--icon",
+    scale: (scale) => `scale-${scale}`,
+    selectedIndicator: "selected-indicator",
 };
 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 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{position:relative;margin-block-end:0.125rem;box-sizing:border-box;display:flex;block-size:100%;align-items:center;justify-content:center}.scale-s .content{padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem}.scale-s .close-button{inline-size:1.25rem}.scale-m .content{padding-block:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem}.scale-m .close-button{inline-size:1.75rem}.scale-l .content{padding-block:0.625rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}.scale-l .close-button{inline-size:2rem}:host([closable]) .content{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{position:relative;box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;cursor:pointer;align-content:center;justify-content:space-between;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}.selected-indicator{position:absolute;display:block;block-size:0.125rem;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;inset-block-end:0;inset-inline-start:0;inset-inline-end:0;inline-size:100%}.container--bottom .selected-indicator{inset-block-end:unset;inset-block-start:0}:host([bordered]) .selected-indicator{inset-block-start:0;inset-block-end:unset;inset-inline-start:-1px;inset-inline-end:0;inline-size:calc(100% + var(--calcite-spacing-base))}:host([bordered]) .container:not(.container--bottom){border-block-end:1px solid transparent}:host([bordered]:not([selected]):hover) .container:not(.container--bottom){border-block-end:1px solid var(--calcite-color-border-1)}:host([bordered]:not([selected]):hover:not(:focus)) .selected-indicator{background-color:var(--calcite-color-foreground-2)}:host([bordered]:not([selected]):hover:not(:focus)) .container:not(.container--bottom) .selected-indicator{box-shadow:inset 0 1px var(--calcite-color-border-1)}:host([bordered]:not([selected]):hover:not(:focus)) .container.container--bottom .selected-indicator{box-shadow:inset 0 -1px var(--calcite-color-border-1)}:host([bordered][selected]) .container::after{position:absolute;display:block;block-size:0.125rem;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;inset-block-end:-1px;inset-inline-start:0;inset-inline-end:0;inline-size:100%;background:var(--calcite-color-foreground-1);content:\"\"}:host([bordered][selected]) .container.container--bottom::after{inset-block-start:-1px}:host([bordered][selected]:hover) .container::after{background:var(--calcite-color-foreground-2)}:host([bordered][selected]:focus) .container::after{background:transparent}:host([bordered]) .container--bottom .selected-indicator{inset-block-start:unset;inset-block-end:0}:host([selected]) .selected-indicator,:host([selected]:hover) .selected-indicator{background-color:var(--calcite-color-brand)}:host(:hover) .selected-indicator{background-color:var(--calcite-color-border-3)}:host(:focus) .selected-indicator,:host(:active) .selected-indicator{background-color:var(--calcite-color-brand)}@media (forced-colors: active){.selected-indicator{background-color:highlight}}: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:var(--calcite-spacing-sm)}.content--has-text .calcite-tab-title--icon.icon-end{margin-inline-start:var(--calcite-spacing-sm)}.close-button{display:flex;block-size:100%;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:transparent;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;margin-inline-start:var(--calcite-spacing-sm);margin-inline-end:var(--calcite-spacing-px);block-size:calc(100% - var(--calcite-spacing-xxs))}.close-button:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand))}.close-button:focus,.close-button:hover{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-3)}.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:var(--calcite-spacing-sm)}:host([bordered]) .container:not(.container--bottom) .close-button{block-size:calc(100% - var(--calcite-spacing-px));margin-block-start:-1px}:host([bordered]) .container .close-button calcite-icon{margin-block-start:var(--calcite-spacing-px)}:host([bordered]) .container .close-button:focus,:host([bordered]) .container .close-button:hover,:host([bordered]) .container .close-button:active{box-shadow:0 2px 0 0 var(--calcite-color-foreground-3)}:host([bordered]) .container.container--bottom .close-button{box-shadow:0 -2px 0 0 transparent}:host([bordered]) .container.container--bottom .close-button calcite-icon{margin-block-end:var(--calcite-spacing-px)}:host([bordered]) .container.container--bottom .close-button:focus,:host([bordered]) .container.container--bottom .close-button:hover,:host([bordered]) .container.container--bottom .close-button:active{box-shadow:0 -2px 0 0 var(--calcite-color-foreground-3)}:host([bordered][selected]){box-shadow:inset 0 -1px var(--calcite-color-foreground-1)}:host([bordered]:not([selected])) .container .close-button{box-shadow:0 2px 0 0 transparent}:host([bordered]:hover) .container{background-color:var(--calcite-color-foreground-2)}:host([bordered]) .container{border-inline:var(--calcite-spacing-px) solid transparent}:host([selected][bordered]) .container{border-inline-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]) .container--bottom{border-block-start-style:solid}:host([bordered][selected]) .container{border-block-end-style:none}:host([bordered][selected]) .container--bottom{border-block-start-style:none}.close-button{z-index:var(--calcite-z-index)}}:host([hidden]){display:none}[hidden]{display:none}";
 const CalciteTabTitleStyle0 = tabTitleCss;
 
 const TabTitle = /*@__PURE__*/ proxyCustomElement(class TabTitle extends HTMLElement {
@@ -117,7 +121,7 @@ const TabTitle = /*@__PURE__*/ proxyCustomElement(class TabTitle extends HTMLEle
     }
     async componentWillLoad() {
         await setUpMessages(this);
-        if (Build.isBrowser) {
+        if (isBrowser()) {
             this.updateHasText();
         }
         if (this.tab && this.selected) {
@@ -133,13 +137,14 @@ 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: 'c6c7baa28fe5aa5ed07d85815d0a0ebac4318368', 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: 'fc5e9d925510867e451df60bed298b158a10054b', 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: 'd84446a2e6fb8a9007c70a798e997d2f8bae485e', "aria-controls": this.controls, "aria-selected": toAriaBoolean(this.selected), id: id, role: "tab", tabIndex: this.selected && !this.disabled ? 0 : -1 }, h(InteractiveContainer, { key: '0130123cde98ed0f0e5065387156293fda2d1c4b', disabled: this.disabled }, h("div", { key: 'c37a2e097b38dd17588a7eb81fa4fa2c5f3977a9', class: {
-                container: true,
+        const iconStartEl = (h("calcite-icon", { key: 'ad1702b0148764ff6e4aebb00ea87497d112c293', 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: '8e7b1d4960585f34a03f40b05f9328c02a706c93', 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: 'bd822a327a486c08dad7c9033054863de46591d6', "aria-controls": this.controls, "aria-selected": toAriaBoolean(this.selected), id: id, role: "tab", tabIndex: this.selected && !this.disabled ? 0 : -1 }, h(InteractiveContainer, { key: '23f47db639bbe21922c8c8aa3bbcfe9b0433f2f5', disabled: this.disabled }, h("div", { key: 'c02773329f60ddcba7869df57f83ef5781346f62', class: {
+                [CSS.container]: true,
+                [CSS.containerBottom]: this.position === "bottom",
                 [CSS.iconPresent]: !!this.iconStart || !!this.iconEnd,
-                [`scale-${this.scale}`]: true,
-            }, hidden: closed, ref: (el) => this.resizeObserver?.observe(el) }, h("div", { key: '53065b8558e4e0732aaeb60624367547a0aee7f8', class: { [CSS.content]: true, [CSS.contentHasText]: this.hasText } }, this.iconStart ? iconStartEl : null, h("slot", { key: 'c05fdb2126495f59fe88e32b5368e8ad8a79b303' }), this.iconEnd ? iconEndEl : null), this.renderCloseButton()))));
+                [CSS.scale(this.scale)]: true,
+            }, hidden: closed, ref: (el) => this.resizeObserver?.observe(el) }, h("div", { key: '1cc60233446099ee25cf5231ca22ab7c96647dd8', class: { [CSS.content]: true, [CSS.contentHasText]: this.hasText } }, this.iconStart ? iconStartEl : null, h("slot", { key: 'd4c96c09ee2853b2053ed346fd1221cdfbbe750b' }), this.iconEnd ? iconEndEl : null), this.renderCloseButton(), h("div", { key: '487f585d1c3137a4c7354d9881bf1a777d77238c', class: CSS.selectedIndicator })))));
     }
     renderCloseButton() {
         const { closable, messages } = this;

package/dist/components/tab.js

@@ -3,14 +3,14 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { A 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/dev/LICENSE.md for details.
- * v2.10.1
+ * v2.11.1
  */
 const CSS = {
     container: "container",
@@ -25,7 +25,6 @@ const Tab = /*@__PURE__*/ proxyCustomElement(class Tab extends HTMLElement {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.calciteInternalTabRegister = createEvent(this, "calciteInternalTabRegister", 6);
         this.guid = `calcite-tab-title-${guid()}`;
         this.tab = undefined;
         this.selected = false;
@@ -39,14 +38,11 @@ const Tab = /*@__PURE__*/ proxyCustomElement(class Tab extends HTMLElement {
     //--------------------------------------------------------------------------
     render() {
         const id = this.el.id || this.guid;
-        return (h(Host, { key: '34f25633afec73b771fba5a8d2c35e647dbc7abe', "aria-labelledby": this.labeledBy, id: id }, h("div", { key: '8ee7f4025cc393cfb3f4d53a6762a50017abbfe8', class: { [CSS.container]: true, [`scale-${this.scale}`]: true }, role: "tabpanel", tabIndex: this.selected ? 0 : -1 }, h("section", { key: 'eda53c19a48f0a96b52362a588292139f8526da4', class: CSS.content }, h("slot", { key: 'c1da92b857f33df134cbaf5eeddc3f8fcda1f5dc' })))));
+        return (h(Host, { key: '03e398db2023e422338659deb076c6e6c63cd866', "aria-labelledby": this.labeledBy, id: id }, h("div", { key: '371846888e92a0791d2a5a725d1525808241132e', class: { [CSS.container]: true, [`scale-${this.scale}`]: true }, role: "tabpanel", tabIndex: this.selected ? 0 : -1 }, h("section", { key: '48e3af2254269734886ed512dc3577dfafed52fa', class: CSS.content }, h("slot", { key: 'e25dd14ed3972ed4b488f7abb07484cf5e48681f' })))));
     }
     connectedCallback() {
         this.parentTabsEl = this.el.closest("calcite-tabs");
     }
-    componentDidLoad() {
-        this.calciteInternalTabRegister.emit();
-    }
     disconnectedCallback() {
         // Dispatching to body in order to be listened by other elements that are still connected to the DOM.
         document.body?.dispatchEvent(new CustomEvent("calciteTabUnregister", {

package/dist/components/table-cell.js

@@ -14,7 +14,7 @@ import { C as CSS_UTILITY } from './resources.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.10.1
+ * v2.11.1
  */
 const CSS = {
     contentCell: "content-cell",
@@ -133,7 +133,7 @@ const TableCell = /*@__PURE__*/ proxyCustomElement(class TableCell extends HTMLE
         const staticCell = this.disabled ||
             (this.interactionMode === "static" &&
                 (!this.selectionCell || (this.selectionCell && this.parentRowType === "foot")));
-        return (h(Host, { key: 'c4117a89686d9ad0521b122d11794f4bbbdf7399' }, h(InteractiveContainer, { key: '7dde369a681dc7dcc7f8cb3d6160de4a7444c196', disabled: this.disabled }, h("td", { key: '45d8b5227b0b407982c7c0f5166eab98e1c98f39', "aria-disabled": this.disabled, class: {
+        return (h(Host, { key: '7827c1a5f297e7436e89e33e8bdab1701095c6a4' }, h(InteractiveContainer, { key: '42ffde1bd750dddbaefbe2b7ec29b16a6da83ad0', disabled: this.disabled }, h("td", { key: '3719c428fec09f9237174091d933f05aa1f68136', "aria-disabled": this.disabled, class: {
                 [CSS.footerCell]: this.parentRowType === "foot",
                 [CSS.contentCell]: !this.numberCell && !this.selectionCell,
                 [CSS.numberCell]: this.numberCell,
@@ -143,7 +143,7 @@ const TableCell = /*@__PURE__*/ proxyCustomElement(class TableCell extends HTMLE
                 [CSS_UTILITY.rtl]: dir === "rtl",
                 [CSS.staticCell]: staticCell,
                 [this.parentRowAlignment]: this.parentRowAlignment === "start" || this.parentRowAlignment === "end",
-            }, colSpan: this.colSpan, onBlur: this.onContainerBlur, onFocus: this.onContainerFocus, ref: (el) => (this.containerEl = el), role: this.interactionMode === "interactive" ? "gridcell" : "cell", rowSpan: this.rowSpan, tabIndex: staticCell ? -1 : 0 }, (this.selectionCell || this.readCellContentsToAT) && (h("span", { key: '50dfa94b182cae99c8b8ed1c6f614dece87292a6', "aria-hidden": true, "aria-live": this.focused ? "polite" : "off", class: CSS.assistiveText }, this.selectionCell && this.selectionText, this.readCellContentsToAT && !this.selectionCell && this.contentsText)), h("slot", { key: '235ee7d4ccb170f2dfa73cd601b7bc1a4a110c49', onSlotchange: this.updateScreenReaderContentsText })))));
+            }, colSpan: this.colSpan, onBlur: this.onContainerBlur, onFocus: this.onContainerFocus, ref: (el) => (this.containerEl = el), role: this.interactionMode === "interactive" ? "gridcell" : "cell", rowSpan: this.rowSpan, tabIndex: staticCell ? -1 : 0 }, (this.selectionCell || this.readCellContentsToAT) && (h("span", { key: '70593b5f249e4f3678a9f858b97e23104a6185f4', "aria-hidden": true, "aria-live": this.focused ? "polite" : "off", class: CSS.assistiveText }, this.selectionCell && this.selectionText, this.readCellContentsToAT && !this.selectionCell && this.contentsText)), h("slot", { key: '82258001661931991431268a11fa28a320b08777', onSlotchange: this.updateScreenReaderContentsText })))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return this; }

package/dist/components/table-header.js

@@ -13,7 +13,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/dev/LICENSE.md for details.
- * v2.10.1
+ * v2.11.1
  */
 const CSS = {
     contentCell: "content-cell",
@@ -148,7 +148,7 @@ const TableHeader = /*@__PURE__*/ proxyCustomElement(class TableHeader extends H
         const allSelected = this.selectedRowCount === this.bodyRowCount;
         const selectionIcon = allSelected ? "check-square-f" : "check-square";
         const staticCell = this.interactionMode === "static" && !this.selectionCell;
-        return (h(Host, { key: 'da0b65737ce60dcaea3f4a033e54a5adedc7a252' }, h("th", { key: 'd0a71fbe4da75f578ee69ee14782c2213acad5db', "aria-colindex": this.parentRowType === "head" ? this.positionInRow : undefined, class: {
+        return (h(Host, { key: 'd8e616e4d83977fff658a32eeca9a9b988cc5229' }, h("th", { key: '3121d424b6468511ece08d96d8835bd7a3c102e3', "aria-colindex": this.parentRowType === "head" ? this.positionInRow : undefined, class: {
                 [CSS.bodyRow]: this.parentRowType === "body",
                 [CSS.footerRow]: this.parentRowType === "foot",
                 [CSS.contentCell]: !this.numberCell && !this.selectionCell,
@@ -159,7 +159,7 @@ const TableHeader = /*@__PURE__*/ proxyCustomElement(class TableHeader extends H
                 [CSS.staticCell]: staticCell,
                 [CSS.lastCell]: this.lastCell && (!this.rowSpan || (this.colSpan && !!this.rowSpan)),
                 [this.parentRowAlignment]: this.parentRowAlignment === "center" || this.parentRowAlignment === "end",
-            }, colSpan: this.colSpan, onBlur: this.onContainerBlur, onFocus: this.onContainerFocus, ref: (el) => (this.containerEl = el), role: this.parentRowType === "head" ? "columnheader" : "rowheader", rowSpan: this.rowSpan, scope: scope, tabIndex: this.selectionCell ? 0 : staticCell ? -1 : 0 }, this.heading && h("div", { key: '50b85ffe26c1b305bca0e137431be182281dc893', class: CSS.heading }, this.heading), this.description && h("div", { key: '9d51fa12b4b7f1bccf7bdc2f9899ea1d9352451c', class: CSS.description }, this.description), this.selectionCell && this.selectionMode === "multiple" && (h("calcite-icon", { key: 'fb16d491a9452f26807130358c5997ef7c437e23', class: { [CSS.active]: allSelected }, icon: selectionIcon, scale: getIconScale(this.scale) })), (this.selectionCell || this.numberCell) && (h("span", { key: '3501e1933dffbb49164e97c183e917d82be9fc87', "aria-hidden": true, "aria-live": this.focused ? "polite" : "off", class: CSS.assistiveText }, this.screenReaderText)))));
+            }, colSpan: this.colSpan, onBlur: this.onContainerBlur, onFocus: this.onContainerFocus, ref: (el) => (this.containerEl = el), role: this.parentRowType === "head" ? "columnheader" : "rowheader", rowSpan: this.rowSpan, scope: scope, tabIndex: this.selectionCell ? 0 : staticCell ? -1 : 0 }, this.heading && h("div", { key: '883cb33b4e8c6d1be39d1d9e16103ed012768db0', class: CSS.heading }, this.heading), this.description && h("div", { key: '5d6633a84187d82f2b7f7e0fe1e67c15f5c9881d', class: CSS.description }, this.description), this.selectionCell && this.selectionMode === "multiple" && (h("calcite-icon", { key: '210a2311c2ff0de94fb1513086b94d396bd5d95d', class: { [CSS.active]: allSelected }, icon: selectionIcon, scale: getIconScale(this.scale) })), (this.selectionCell || this.numberCell) && (h("span", { key: '765e886d82775747b676daf4a74ecec40dd0d9c9', "aria-hidden": true, "aria-live": this.focused ? "polite" : "off", class: CSS.assistiveText }, this.screenReaderText)))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return this; }