@esri/calcite-components 2.11.0-next.21 → 2.11.0-next.23

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

@@ -1,20 +1,20 @@
 /*!
  * 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.11.0-next.21
+ * v2.11.0-next.23
  */
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent, e as readTask, F as Fragment } from './index-fb64d7c1.js';
-import { C as nodeListToArray, s as slotChangeGetAssignedElements, k as focusElementInGroup, g as getElementDir, D as filterDirectChildren, t as toAriaBoolean, H as getSlotAssignedElements } from './dom-f039b73f.js';
-import { g as guid } from './guid-69d00190.js';
-import { a as calciteSize24, b as calciteSize32, d as calciteSize44 } from './core-a0d0b5a8.js';
-import { c as createObserver } from './observers-8a8197b5.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-c3c787f4.js';
-import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n-b28db99e.js';
-import { C as CSS_UTILITY } from './resources-f67d8c3c.js';
-import { c as connectInteractive, d as disconnectInteractive, I as InteractiveContainer, u as updateHostInteraction } from './interactive-afffda99.js';
-import { g as getIconScale } from './component-953123ef.js';
-import './key-e74ae323.js';
-import './browser-51968afa.js';
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent, e as readTask, F as Fragment } from './index-4d54fef5.js';
+import { C as nodeListToArray, s as slotChangeGetAssignedElements, k as focusElementInGroup, g as getElementDir, D as filterDirectChildren, t as toAriaBoolean, H as getSlotAssignedElements } from './dom-c331e7c7.js';
+import { g as guid } from './guid-37534361.js';
+import { a as calciteSize24, b as calciteSize32, d as calciteSize44 } from './core-bd267931.js';
+import { c as createObserver } from './observers-86fdf3c6.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-c2bd261a.js';
+import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n-af8dd5bd.js';
+import { C as CSS_UTILITY } from './resources-5f53326f.js';
+import { c as connectInteractive, d as disconnectInteractive, I as InteractiveContainer, u as updateHostInteraction } from './interactive-83e10cb3.js';
+import { g as getIconScale } from './component-61aff13f.js';
+import './key-39ba37fe.js';
+import './browser-6f75eff7.js';
 
 const CSS$2 = {
     container: "container",
@@ -109,7 +109,6 @@ const ICON = {
     chevronLeft: "chevron-left",
 };
 const CSS$1 = {
-    activeIndicatorContainer: "tab-nav-active-indicator-container",
     container: "tab-nav",
     containerHasEndTabTitleOverflow: "tab-nav--end-overflow",
     containerHasStartTabTitleOverflow: "tab-nav--start-overflow",
@@ -120,7 +119,7 @@ const CSS$1 = {
     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{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{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{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{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{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{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 = class {
@@ -133,11 +132,12 @@ const TabNav = class {
         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;
@@ -157,7 +157,6 @@ const TabNav = class {
             }
             const scrollByX = (this.effectiveDir === "rtl" ? -1 : 1) * scrollBy;
             event.currentTarget.scrollBy(scrollByX, 0);
-            requestAnimationFrame(() => this.updateActiveIndicator());
         };
         this.onSlotChange = (event) => {
             this.intersectionObserver?.disconnect();
@@ -167,7 +166,6 @@ const TabNav = class {
             });
             this.calciteInternalTabNavSlotChange.emit(slottedElements);
         };
-        this.storeContainerRef = (el) => (this.containerEl = el);
         this.storeTabTitleWrapperRef = (el) => {
             this.tabTitleContainerEl = el;
             this.intersectionObserver = createObserver("intersection", () => this.updateScrollingState(), {
@@ -237,7 +235,6 @@ const TabNav = class {
             event.stopPropagation();
         };
         this.onTabTitleScroll = () => {
-            this.updateActiveIndicator();
             this.updateScrollingState();
         };
         this.renderScrollButton = (overflowDirection) => {
@@ -258,8 +255,6 @@ const TabNav = class {
         this.layout = "inline";
         this.position = "bottom";
         this.bordered = false;
-        this.indicatorOffset = undefined;
-        this.indicatorWidth = undefined;
         this.messages = undefined;
         this.messageOverrides = undefined;
         this.defaultMessages = undefined;
@@ -272,7 +267,6 @@ const TabNav = class {
         this.calciteInternalTabChange.emit({
             tab: this.selectedTabId,
         });
-        this.updateActiveIndicator();
     }
     onMessagesChange() {
         /* wired up by t9n util */
@@ -304,9 +298,6 @@ const TabNav = class {
         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.
@@ -331,21 +322,16 @@ const TabNav = class {
     //
     //--------------------------------------------------------------------------
     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: '03a7e31efc324cf2f7f627828b634282158a1d4f', role: "tablist" }, h("div", { key: 'b718384a646328943a023329c3eec6425a3c4935', class: {
+        return (h(Host, { key: '1e35ab32be6d2a978d46f3f6d74f40ca103236d6', role: "tablist" }, h("div", { key: 'e69c99975a0e592601b71774c2b8370dc9a27a63', class: {
                 [CSS$1.container]: true,
                 [CSS$1.containerHasStartTabTitleOverflow]: !!this.hasOverflowingStartTabTitle,
                 [CSS$1.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: '50d3c33b30379f2b2d08374bfa0addfc0ce5954f', class: {
+            } }, this.renderScrollButton("start"), h("div", { key: '5123b631919613f7cb4cdcf80eb2a2c17de7b8b9', class: {
                 [CSS$1.tabTitleSlotWrapper]: true,
-            }, onScroll: this.onTabTitleScroll, onWheel: this.onTabTitleWheel, ref: this.storeTabTitleWrapperRef }, h("slot", { key: '94f8b54ec53391f0f58f572f637153594df35a57', onSlotchange: this.onSlotChange })), h("div", { key: '773ebbcc7b2bbab16e068d00667b2c7d8de19571', class: {
-                [CSS$1.activeIndicatorContainer]: true,
-            }, ref: (el) => (this.activeIndicatorContainerEl = el) }, h("div", { key: '167234b76ea91436674ee1443652214f6843e023', 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: 'a18d8dd6c2163b1e3c777b396395c6dc2143aca5', onSlotchange: this.onSlotChange })), this.renderScrollButton("end"))));
     }
     //--------------------------------------------------------------------------
     //
@@ -432,9 +418,6 @@ const TabNav = class {
         }
         event.stopPropagation();
     }
-    iconStartChangeHandler() {
-        this.updateActiveIndicator();
-    }
     effectiveLocaleChange() {
         updateMessages(this, this.effectiveLocale);
     }
@@ -453,23 +436,6 @@ const TabNav = class {
         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) {
@@ -528,7 +494,6 @@ const TabNav = class {
             }
         }
         requestAnimationFrame(() => {
-            this.updateActiveIndicator();
             tabTitles[this.selectedTabId].focus();
         });
     }
@@ -546,18 +511,21 @@ TabNav.style = CalciteTabNavStyle0;
 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;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;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 0 -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;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;inline-size:100%;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][selected]) .container::after{position:absolute;display:block;block-size:0.125rem;inline-size:100%;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%;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;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: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-end:var(--calcite-spacing-px);box-shadow:var(--calcite-spacing-px) 0 0 0 transparent, 0 var(--calcite-spacing-xxs) 0 0 transparent;block-size:calc(100% - var(--calcite-spacing-xxs))}.close-button:hover{box-shadow:var(--calcite-spacing-px) 0 0 0 var(--calcite-color-foreground-3)}.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]){margin-inline-end:0}:host([bordered][selected]){box-shadow:inset 0 -1px var(--calcite-color-foreground-1)}:host([bordered][selected][position=bottom]){box-shadow:inset 0 var(--calcite-spacing-base) 0 var(--calcite-color-foreground-1)}:host([bordered]:hover) .container{background-color:var(--calcite-color-foreground-2)}:host([closable]) .container,:host([bordered]) .container{border-inline-start:var(--calcite-spacing-px) solid transparent;border-inline-end:var(--calcite-spacing-px) solid transparent}:host([closable]) .container .close-button,:host([bordered]) .container .close-button{margin-inline-start:var(--calcite-spacing-sm)}: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]) .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 = class {
@@ -656,13 +624,14 @@ const TabTitle = class {
     render() {
         const { el, closed } = this;
         const id = el.id || this.guid;
-        const iconStartEl = (h("calcite-icon", { key: '37a9766daa93ec03e08b32a8ecd6bd688b14488d', 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: '7c291ddb6371c11de0700b641c14c692df410cf2', 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: '28845761bba17ef7881a4648e3ddd337a196dd43', "aria-controls": this.controls, "aria-selected": toAriaBoolean(this.selected), id: id, role: "tab", tabIndex: this.selected && !this.disabled ? 0 : -1 }, h(InteractiveContainer, { key: '684b4b67e1e964eb2f1ff749e4830d84e923bb3d', disabled: this.disabled }, h("div", { key: 'a32e2de00c7038897f47c6a74b179fcd5009d3c9', class: {
-                container: true,
+        const iconStartEl = (h("calcite-icon", { key: '0a315a11b4e02ff44930fcfc12e626b10d0ae3be', 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: 'ff26afbee47f3d6cc8d2e89149cb8effe635e04b', 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: '35980e1a6e89e4dcbf2d4deefbaf364aa50fe6a1', "aria-controls": this.controls, "aria-selected": toAriaBoolean(this.selected), id: id, role: "tab", tabIndex: this.selected && !this.disabled ? 0 : -1 }, h(InteractiveContainer, { key: 'd067c111b05b0a59be00bd317c8768709a98faef', disabled: this.disabled }, h("div", { key: '2a1cef97120aff9f98cd2a7d1f3db3715b16fe3c', 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: '55c1753e5dac17066529d5dc2544bf04fa0e12d6', class: { [CSS.content]: true, [CSS.contentHasText]: this.hasText } }, this.iconStart ? iconStartEl : null, h("slot", { key: '8d44e6db400cfd6aa6f3fd4575e1910d8998ab5c' }), this.iconEnd ? iconEndEl : null), this.renderCloseButton()))));
+                [CSS.scale(this.scale)]: true,
+            }, hidden: closed, ref: (el) => this.resizeObserver?.observe(el) }, h("div", { key: 'ed8c5e8fd2249712df4a468c5685242d5642f00e', class: { [CSS.content]: true, [CSS.contentHasText]: this.hasText } }, this.iconStart ? iconStartEl : null, h("slot", { key: '63a872b368e6684dafd5fcfb47becb404affcbca' }), this.iconEnd ? iconEndEl : null), this.renderCloseButton(), h("div", { key: '5e579bcfe3ade4f3ecf65219198df546fcfbacc7', class: CSS.selectedIndicator })))));
     }
     renderCloseButton() {
         const { closable, messages } = this;
@@ -922,7 +891,7 @@ const Tabs = class {
     }
     disconnectedCallback() { }
     render() {
-        return (h(Fragment, { key: 'a712772a21d6264edd6346bc4a9a68074428aee3' }, h("slot", { key: '89e0518a234bd2aa3b5d985b5ed508c3af82e873', name: SLOTS.titleGroup }), h("section", { key: 'bf96baaebf2999581e259e51a3e5a48fb10d924e' }, h("slot", { key: '20cefef4f843e8bbc2f88f1b864a3cb703f7718d', onSlotchange: this.defaultSlotChangeHandler, ref: this.setDefaultSlotRef }))));
+        return (h(Fragment, { key: 'c8be9a0f6620441487586e0b7be0bfe27447ce83' }, h("slot", { key: '01cdac40840a465bb73e4763caa29db4c0973233', name: SLOTS.titleGroup }), h("section", { key: 'e5287ab0fb9f39ab8354311ecd06316e7a93c73b' }, h("slot", { key: '0d4974a5b802f27fc319c97c0e632110b84ce246', onSlotchange: this.defaultSlotChangeHandler, ref: this.setDefaultSlotRef }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {