@esri/solutions-components 0.8.3 → 0.8.4

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

@@ -1,70 +0,0 @@
-/*!
- * Copyright 2022 Esri
- * Licensed under the Apache License, Version 2.0
- * http://www.apache.org/licenses/LICENSE-2.0
- */
-import { r as registerInstance, h, a as Host } from './index-bdfaac50.js';
-import { u as slotChangeHasAssignedElement } from './dom-b91aa537.js';
-import { C as CSS, S as SLOTS } from './resources-3c6947d3.js';
-import './guid-b75a5f7b.js';
-import './resources-0f8db821.js';
-
-const stackCss = ":host([disabled]) .content{cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) .content *,:host([disabled]) .content ::slotted(*){pointer-events:none}:host{display:flex;flex:1 1 0%;flex-direction:column}.container{display:flex;flex:1 1 auto;align-items:stretch;font-family:var(--calcite-sans-family);font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2)}.content{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;font-size:var(--calcite-font-size--2);line-height:1.375;padding-inline:var(--calcite-stack-padding-inline, 0.75rem);padding-block:var(--calcite-stack-padding-block, 0.5rem)}.content-start{justify-content:flex-start}.content-end{justify-content:flex-end}.content-start,.content-end{flex:0 1 auto}.actions-start,.actions-end,.content-start,.content-end{display:flex;align-items:center}.content-start ::slotted(calcite-icon),.content-end ::slotted(calcite-icon){margin-inline:0.75rem;align-self:center}.actions-start ::slotted(calcite-action),.actions-start ::slotted(calcite-action-menu),.actions-start ::slotted(calcite-handle),.actions-start ::slotted(calcite-dropdown),.actions-end ::slotted(calcite-action),.actions-end ::slotted(calcite-action-menu),.actions-end ::slotted(calcite-handle),.actions-end ::slotted(calcite-dropdown){align-self:stretch;color:inherit}:host([hidden]){display:none}[hidden]{display:none}";
-
-const Stack = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        // --------------------------------------------------------------------------
-        //
-        //  Private Methods
-        //
-        // --------------------------------------------------------------------------
-        this.handleActionsStartSlotChange = (event) => {
-            this.hasActionsStart = slotChangeHasAssignedElement(event);
-        };
-        this.handleActionsEndSlotChange = (event) => {
-            this.hasActionsEnd = slotChangeHasAssignedElement(event);
-        };
-        this.handleContentStartSlotChange = (event) => {
-            this.hasContentStart = slotChangeHasAssignedElement(event);
-        };
-        this.handleContentEndSlotChange = (event) => {
-            this.hasContentEnd = slotChangeHasAssignedElement(event);
-        };
-        this.disabled = false;
-        this.hasActionsStart = false;
-        this.hasActionsEnd = false;
-        this.hasContentStart = false;
-        this.hasContentEnd = false;
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    renderActionsStart() {
-        const { hasActionsStart } = this;
-        return (h("div", { class: CSS.actionsStart, hidden: !hasActionsStart, key: "actions-start-container" }, h("slot", { name: SLOTS.actionsStart, onSlotchange: this.handleActionsStartSlotChange })));
-    }
-    renderActionsEnd() {
-        const { hasActionsEnd } = this;
-        return (h("div", { class: CSS.actionsEnd, hidden: !hasActionsEnd, key: "actions-end-container" }, h("slot", { name: SLOTS.actionsEnd, onSlotchange: this.handleActionsEndSlotChange })));
-    }
-    renderContentStart() {
-        const { hasContentStart } = this;
-        return (h("div", { class: CSS.contentStart, hidden: !hasContentStart }, h("slot", { name: SLOTS.contentStart, onSlotchange: this.handleContentStartSlotChange })));
-    }
-    renderDefaultContent() {
-        return (h("div", { class: CSS.content }, h("slot", null)));
-    }
-    renderContentEnd() {
-        const { hasContentEnd } = this;
-        return (h("div", { class: CSS.contentEnd, hidden: !hasContentEnd }, h("slot", { name: SLOTS.contentEnd, onSlotchange: this.handleContentEndSlotChange })));
-    }
-    render() {
-        return (h(Host, null, h("div", { class: CSS.container }, this.renderActionsStart(), this.renderContentStart(), this.renderDefaultContent(), this.renderContentEnd(), this.renderActionsEnd())));
-    }
-};
-Stack.style = stackCss;
-
-export { Stack as calcite_stack };

package/dist/esm/calcite-tab-nav.entry.js

@@ -1,259 +0,0 @@
-/*!
- * Copyright 2022 Esri
- * Licensed under the Apache License, Version 2.0
- * http://www.apache.org/licenses/LICENSE-2.0
- */
-import { r as registerInstance, e as createEvent, h, a as Host, g as getElement } from './index-bdfaac50.js';
-import { d as focusElementInGroup, a as getElementDir, y as filterDirectChildren } from './dom-b91aa537.js';
-import { c as createObserver } from './observers-5ba39eee.js';
-import './guid-b75a5f7b.js';
-import './resources-0f8db821.js';
-
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.4.0
- */
-const CSS = {
-    container: "tab-nav",
-};
-
-const tabNavCss = ":host{position:relative;display:flex}.scale-s{min-block-size:1.5rem}.scale-m{min-block-size:2rem}.scale-l{min-block-size:2.75rem}:host([layout=center]:not([bordered])){padding-inline:1.25rem}:host([layout=center]:not([bordered])) .tab-nav ::slotted(calcite-tab-title:last-child){margin-inline-end:0px}:host(:not([bordered])) .scale-l ::slotted(calcite-tab-title){margin-inline-end:1.5rem}:host(:not([bordered])) .scale-m ::slotted(calcite-tab-title){margin-inline-end:1.25rem}:host(:not([bordered])) .scale-s ::slotted(calcite-tab-title){margin-inline-end:1rem}.tab-nav{display:flex;inline-size:100%;justify-content:flex-start;overflow:auto}.tab-nav-active-indicator-container{position:absolute;inset-inline:0px;inset-block-end:0px;block-size:0.125rem;inline-size:100%;overflow:hidden}.tab-nav-active-indicator{position:absolute;inset-block-end:0px;display:block;block-size:0.125rem;background-color:var(--calcite-color-brand);transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}:host([layout=center]) .tab-nav{justify-content:space-evenly}:host .position-bottom .tab-nav-active-indicator{inset-block-end:unset;inset-block-start:0px}:host .position-bottom .tab-nav-active-indicator-container{inset-block-end:unset;inset-block-start:0px}:host([bordered]) .tab-nav-active-indicator-container{inset-block-end:unset}:host([bordered]) .position-bottom .tab-nav-active-indicator-container{inset-block-end:0;inset-block-start:unset}@media (forced-colors: active){.tab-nav-active-indicator{background-color:highlight}}:host([hidden]){display:none}[hidden]{display:none}";
-
-const TabNav = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.calciteTabChange = createEvent(this, "calciteTabChange", 6);
-        this.calciteInternalTabChange = createEvent(this, "calciteInternalTabChange", 6);
-        this.animationActiveDuration = 0.3;
-        this.resizeObserver = createObserver("resize", () => {
-            if (!this.activeIndicatorEl) {
-                return;
-            }
-            // remove active indicator transition duration during resize to prevent wobble
-            this.activeIndicatorEl.style.transitionDuration = "0s";
-            this.updateActiveWidth();
-            this.updateOffsetPosition();
-        });
-        //--------------------------------------------------------------------------
-        //
-        //  Private Methods
-        //
-        //--------------------------------------------------------------------------
-        this.handleTabFocus = (event, el, destination) => {
-            focusElementInGroup(this.enabledTabTitles, el, destination);
-            event.stopPropagation();
-        };
-        this.handleContainerScroll = () => {
-            // remove active indicator transition duration while container is scrolling to prevent wobble
-            this.activeIndicatorEl.style.transitionDuration = "0s";
-            this.updateOffsetPosition();
-        };
-        this.storageId = undefined;
-        this.syncId = undefined;
-        this.selectedTitle = null;
-        this.scale = "m";
-        this.layout = "inline";
-        this.position = "bottom";
-        this.bordered = false;
-        this.indicatorOffset = undefined;
-        this.indicatorWidth = undefined;
-        this.selectedTabId = undefined;
-    }
-    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,
-        });
-        this.selectedTitle = await this.getTabTitleById(this.selectedTabId);
-    }
-    selectedTitleChanged() {
-        this.updateOffsetPosition();
-        this.updateActiveWidth();
-        // reset the animation time on tab selection
-        this.activeIndicatorEl.style.transitionDuration = `${this.animationActiveDuration}s`;
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Lifecycle
-    //
-    //--------------------------------------------------------------------------
-    connectedCallback() {
-        var _a;
-        this.parentTabsEl = this.el.closest("calcite-tabs");
-        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el);
-    }
-    componentWillLoad() {
-        const storageKey = `calcite-tab-nav-${this.storageId}`;
-        if (localStorage && this.storageId && localStorage.getItem(storageKey)) {
-            const storedTab = JSON.parse(localStorage.getItem(storageKey));
-            this.selectedTabId = storedTab;
-        }
-    }
-    componentWillRender() {
-        const { parentTabsEl } = this;
-        this.layout = parentTabsEl === null || parentTabsEl === void 0 ? void 0 : parentTabsEl.layout;
-        this.bordered = parentTabsEl === null || parentTabsEl === void 0 ? void 0 : parentTabsEl.bordered;
-        // fix issue with active tab-title not lining up with blue indicator
-        if (this.selectedTitle) {
-            this.updateOffsetPosition();
-        }
-    }
-    componentDidRender() {
-        // if every tab title is active select the first tab.
-        if (this.tabTitles.length &&
-            this.tabTitles.every((title) => !title.selected) &&
-            !this.selectedTabId) {
-            this.tabTitles[0].getTabIdentifier().then((tab) => {
-                this.calciteInternalTabChange.emit({
-                    tab,
-                });
-            });
-        }
-    }
-    disconnectedCallback() {
-        var _a;
-        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-    }
-    render() {
-        const dir = getElementDir(this.el);
-        const width = `${this.indicatorWidth}px`;
-        const offset = `${this.indicatorOffset}px`;
-        const indicatorStyle = dir !== "rtl" ? { width, left: offset } : { width, right: offset };
-        return (h(Host, { role: "tablist" }, h("div", { class: {
-                [CSS.container]: true,
-                [`scale-${this.scale}`]: true,
-                [`position-${this.position}`]: true,
-            }, onScroll: this.handleContainerScroll,
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: (el) => (this.tabNavEl = el) }, h("slot", null), h("div", { class: "tab-nav-active-indicator-container",
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: (el) => (this.activeIndicatorContainerEl = el) }, h("div", { class: "tab-nav-active-indicator", style: indicatorStyle,
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: (el) => (this.activeIndicatorEl = el) })))));
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Event Listeners
-    //
-    //--------------------------------------------------------------------------
-    focusPreviousTabHandler(event) {
-        this.handleTabFocus(event, event.target, "previous");
-    }
-    focusNextTabHandler(event) {
-        this.handleTabFocus(event, event.target, "next");
-    }
-    focusFirstTabHandler(event) {
-        this.handleTabFocus(event, event.target, "first");
-    }
-    focusLastTabHandler(event) {
-        this.handleTabFocus(event, event.target, "last");
-    }
-    internalActivateTabHandler(event) {
-        this.selectedTabId = event.detail.tab
-            ? event.detail.tab
-            : this.getIndexOfTabTitle(event.target);
-        event.stopPropagation();
-    }
-    activateTabHandler(event) {
-        this.calciteTabChange.emit();
-        event.stopPropagation();
-    }
-    internalCloseTabHandler(event) {
-        const closedTabTitleEl = event.target;
-        this.handleTabTitleClose(closedTabTitleEl);
-        event.stopPropagation();
-    }
-    /**
-     * Check for active tabs on register and update selected
-     *
-     * @param event
-     */
-    updateTabTitles(event) {
-        if (event.target.selected) {
-            this.selectedTabId = event.detail;
-        }
-    }
-    globalInternalTabChangeHandler(event) {
-        if (this.syncId &&
-            event.target !== this.el &&
-            event.target.syncId === this.syncId &&
-            this.selectedTabId !== event.detail.tab) {
-            this.selectedTabId = event.detail.tab;
-        }
-        event.stopPropagation();
-    }
-    iconStartChangeHandler() {
-        this.updateActiveWidth();
-        this.updateOffsetPosition();
-    }
-    updateOffsetPosition() {
-        var _a, _b, _c, _d, _e;
-        const dir = getElementDir(this.el);
-        const navWidth = (_a = this.activeIndicatorContainerEl) === null || _a === void 0 ? void 0 : _a.offsetWidth;
-        const tabLeft = (_b = this.selectedTitle) === null || _b === void 0 ? void 0 : _b.offsetLeft;
-        const tabWidth = (_c = this.selectedTitle) === null || _c === void 0 ? void 0 : _c.offsetWidth;
-        const offsetRight = navWidth - (tabLeft + tabWidth);
-        this.indicatorOffset =
-            dir !== "rtl" ? tabLeft - ((_d = this.tabNavEl) === null || _d === void 0 ? void 0 : _d.scrollLeft) : offsetRight + ((_e = this.tabNavEl) === null || _e === void 0 ? void 0 : _e.scrollLeft);
-    }
-    updateActiveWidth() {
-        var _a;
-        this.indicatorWidth = (_a = this.selectedTitle) === null || _a === void 0 ? void 0 : _a.offsetWidth;
-    }
-    getIndexOfTabTitle(el, tabTitles = this.tabTitles) {
-        // In most cases, since these indexes correlate with tab contents, we want to consider all tab titles.
-        // However, when doing relative index operations, it makes sense to pass in this.enabledTabTitles as the 2nd arg.
-        return tabTitles.indexOf(el);
-    }
-    async getTabTitleById(id) {
-        return Promise.all(this.tabTitles.map((el) => el.getTabIdentifier())).then((ids) => {
-            return this.tabTitles[ids.indexOf(id)];
-        });
-    }
-    get tabTitles() {
-        return filterDirectChildren(this.el, "calcite-tab-title");
-    }
-    get enabledTabTitles() {
-        return filterDirectChildren(this.el, "calcite-tab-title:not([disabled])").filter((tabTitle) => !tabTitle.closed);
-    }
-    handleTabTitleClose(closedTabTitleEl) {
-        const { tabTitles } = this;
-        const selectionModified = closedTabTitleEl.selected;
-        const visibleTabTitlesIndices = tabTitles.reduce((tabTitleIndices, tabTitle, index) => !tabTitle.closed ? [...tabTitleIndices, index] : tabTitleIndices, []);
-        const totalVisibleTabTitles = visibleTabTitlesIndices.length;
-        if (totalVisibleTabTitles === 1 && tabTitles[visibleTabTitlesIndices[0]].closable) {
-            tabTitles[visibleTabTitlesIndices[0]].closable = false;
-            this.selectedTabId = visibleTabTitlesIndices[0];
-            if (selectionModified) {
-                tabTitles[visibleTabTitlesIndices[0]].activateTab();
-            }
-        }
-        else if (totalVisibleTabTitles > 1) {
-            const closedTabTitleIndex = tabTitles.findIndex((el) => el === closedTabTitleEl);
-            const nextTabTitleIndex = visibleTabTitlesIndices.find((value) => value > closedTabTitleIndex);
-            if (this.selectedTabId === closedTabTitleIndex) {
-                this.selectedTabId = nextTabTitleIndex ? nextTabTitleIndex : totalVisibleTabTitles - 1;
-                tabTitles[this.selectedTabId].activateTab();
-            }
-        }
-        requestAnimationFrame(() => {
-            this.updateOffsetPosition();
-            this.updateActiveWidth();
-            tabTitles[this.selectedTabId].focus();
-        });
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "selectedTabId": ["selectedTabIdChanged"],
-        "selectedTitle": ["selectedTitleChanged"]
-    }; }
-};
-TabNav.style = tabNavCss;
-
-export { TabNav as calcite_tab_nav };

package/dist/esm/calcite-tab-title.entry.js

@@ -1,287 +0,0 @@
-/*!
- * Copyright 2022 Esri
- * Licensed under the Apache License, Version 2.0
- * http://www.apache.org/licenses/LICENSE-2.0
- */
-import { r as registerInstance, e as createEvent, f as Build, h, a as Host, g as getElement } from './index-bdfaac50.js';
-import { t as toAriaBoolean, a as getElementDir, n as nodeListToArray } from './dom-b91aa537.js';
-import { g as guid } from './guid-b75a5f7b.js';
-import { c as connectInteractive, d as disconnectInteractive, I as InteractiveContainer, u as updateHostInteraction } from './interactive-71585ecc.js';
-import { c as createObserver } from './observers-5ba39eee.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-857f39cf.js';
-import { c as connectMessages, d as disconnectMessages, s as setUpMessages, u as updateMessages } from './t9n-b39c5433.js';
-import { g as getIconScale } from './component-edd2c3cd.js';
-import './resources-0f8db821.js';
-import './browser-b8d08bed.js';
-import './key-9a10d862.js';
-
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.4.0
- */
-const CSS = {
-    closeButton: "close-button",
-    container: "container",
-    content: "content",
-    contentHasText: "content--has-text",
-    iconEnd: "icon-end",
-    iconPresent: "icon-present",
-    iconStart: "icon-start",
-    titleIcon: "calcite-tab-title--icon",
-};
-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}:host([layout=center]) .scale-s,:host([layout=center]) .scale-m,:host([layout=center]) .scale-l{margin-block:0px;text-align:center;flex-basis:12rem}:host([layout=center]) .scale-s .content,:host([layout=center]) .scale-m .content,:host([layout=center]) .scale-l .content{margin:auto}:host([layout=center][closable]) .content{padding-inline-start:32px}:host([layout=center][bordered][closable]) .scale-s .content{padding-inline-start:36px}:host([layout=center][bordered][closable]) .scale-m .content{padding-inline-start:40px}:host([layout=center][closable]) .scale-l .content{padding-inline-start:40px}:host([layout=center][closable][bordered]) .scale-s .content{padding-inline-start:52px}:host([position=bottom]) .container{border-block-end-width:0px;border-block-start-width:2px;border-block-start-color:transparent;border-block-start-style:solid}:host([closed]){display:none}.container{outline-color:transparent}:host(:focus) .container{outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host(:focus) .container:focus-within{outline-color:transparent}:host(:active) a,:host(:focus) a,:host(:hover) a{border-color:var(--calcite-color-border-2);color:var(--calcite-color-text-1);-webkit-text-decoration-line:none;text-decoration-line:none}:host([selected]) .container{border-color:transparent;color:var(--calcite-color-text-1)}:host([disabled]) .container{pointer-events:none;opacity:0.5}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.scale-s .content{padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem}.scale-m .content{padding-block:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem}.scale-l .content{padding-block:0.625rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}.container{box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;cursor:pointer;align-content:center;justify-content:space-between;border-block-end-width:2px;padding-inline:0px;font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-color-text-3);transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-block-end-color:transparent;border-block-end-style:solid}.content{display:flex;align-items:center;justify-content:center}.calcite-tab-title--icon{position:relative;margin:0px;display:inline-flex;align-self:center}.calcite-tab-title--icon svg{transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}.content--has-text{padding:0.25rem}.content--has-text .calcite-tab-title--icon.icon-start{margin-inline-end:0.5rem}.content--has-text .calcite-tab-title--icon.icon-end{margin-inline-start:0.5rem}.close-button{display:flex;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;align-content:center;align-items:center;justify-content:center;align-self:center;border-style:none;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-3);outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;block-size:calc(100% - 2px);background-color:var(--calcite-button-transparent-1);margin-inline-start:auto}.close-button:focus{outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          );outline-offset:-1px}.close-button:focus,.close-button:hover{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-2)}.close-button:active{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-3)}.close-button calcite-icon{color:inherit}:host([icon-start][icon-end]) .calcite-tab-title--icon:first-child{margin-inline-end:0.5rem}:host([bordered]){margin-inline-end:0}:host([bordered][selected]){box-shadow:inset 0px -2px var(--calcite-color-foreground-1)}:host([bordered][selected][position=bottom]){box-shadow:inset 0 2px 0 var(--calcite-color-foreground-1)}:host([bordered]:hover) .container,:host([bordered]:focus) .container,:host([bordered]:active) .container{position:relative}:host([bordered]:hover) .container{background-color:var(--calcite-color-transparent-hover)}:host([closable]) .container,:host([bordered]) .container{border-inline-start:1px solid transparent;border-inline-end:1px solid transparent}:host([closable]) .container .close-button,:host([bordered]) .container .close-button{margin-inline:0}:host([closable]) .content{box-sizing:border-box;block-size:100%;border-block-end-color:transparent}:host([closable][position=bottom]) .container,:host([bordered][position=bottom]) .container{border-block-start-style:unset}:host([selected][bordered]) .container{border-inline-start-color:var(--calcite-color-border-1);border-inline-end-color:var(--calcite-color-border-1)}:host([bordered]) .content{padding-inline:0.75rem}:host([bordered]) .scale-s .content{padding-inline:0.5rem}:host([bordered]) .scale-l .content{padding-inline:1rem}@media (forced-colors: active){:host{outline-width:0;outline-offset:0}:host(:focus) .container{outline-color:highlight}:host([bordered]) .container{border-block-end-style:solid}:host([bordered][position=bottom]) .container{border-block-start-style:solid}:host([bordered][selected]) .container{border-block-end-style:none}:host([bordered][position=bottom][selected]) .container{border-block-start-style:none}.close-button{z-index:var(--calcite-z-index)}}:host([hidden]){display:none}[hidden]{display:none}";
-
-const TabTitle = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.calciteTabsActivate = createEvent(this, "calciteTabsActivate", 6);
-        this.calciteInternalTabsActivate = createEvent(this, "calciteInternalTabsActivate", 6);
-        this.calciteTabsClose = createEvent(this, "calciteTabsClose", 6);
-        this.calciteInternalTabsClose = createEvent(this, "calciteInternalTabsClose", 6);
-        this.calciteInternalTabsFocusNext = createEvent(this, "calciteInternalTabsFocusNext", 6);
-        this.calciteInternalTabsFocusPrevious = createEvent(this, "calciteInternalTabsFocusPrevious", 6);
-        this.calciteInternalTabsFocusFirst = createEvent(this, "calciteInternalTabsFocusFirst", 6);
-        this.calciteInternalTabsFocusLast = createEvent(this, "calciteInternalTabsFocusLast", 6);
-        this.calciteInternalTabTitleRegister = createEvent(this, "calciteInternalTabTitleRegister", 6);
-        this.calciteInternalTabIconChanged = createEvent(this, "calciteInternalTabIconChanged", 6);
-        //--------------------------------------------------------------------------
-        //
-        //  Private Methods
-        //
-        //--------------------------------------------------------------------------
-        this.closeClickHandler = () => {
-            this.closeTabTitleAndNotify();
-        };
-        /** watches for changing text content */
-        this.mutationObserver = createObserver("mutation", () => this.updateHasText());
-        this.resizeObserver = createObserver("resize", () => {
-            this.calciteInternalTabIconChanged.emit();
-        });
-        this.guid = `calcite-tab-title-${guid()}`;
-        this.selected = false;
-        this.closable = false;
-        this.closed = false;
-        this.disabled = false;
-        this.iconEnd = undefined;
-        this.iconFlipRtl = undefined;
-        this.iconStart = undefined;
-        this.layout = undefined;
-        this.position = "top";
-        this.scale = "m";
-        this.bordered = false;
-        this.tab = undefined;
-        this.messages = undefined;
-        this.messageOverrides = undefined;
-        this.controls = undefined;
-        this.defaultMessages = undefined;
-        this.effectiveLocale = undefined;
-        this.hasText = false;
-    }
-    selectedHandler() {
-        if (this.selected) {
-            this.activateTab(false);
-        }
-    }
-    onMessagesChange() {
-        /* wired up by t9n util */
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Lifecycle
-    //
-    //--------------------------------------------------------------------------
-    connectedCallback() {
-        connectInteractive(this);
-        connectLocalized(this);
-        connectMessages(this);
-        this.setupTextContentObserver();
-        this.parentTabNavEl = this.el.closest("calcite-tab-nav");
-        this.parentTabsEl = this.el.closest("calcite-tabs");
-    }
-    disconnectedCallback() {
-        var _a, _b, _c;
-        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-        // Dispatching to body in order to be listened by other elements that are still connected to the DOM.
-        (_b = document.body) === null || _b === void 0 ? void 0 : _b.dispatchEvent(new CustomEvent("calciteTabTitleUnregister", {
-            detail: this.el,
-        }));
-        (_c = this.resizeObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
-        disconnectInteractive(this);
-        disconnectLocalized(this);
-        disconnectMessages(this);
-    }
-    async componentWillLoad() {
-        await setUpMessages(this);
-        if (Build.isBrowser) {
-            this.updateHasText();
-        }
-        if (this.tab && this.selected) {
-            this.activateTab(false);
-        }
-    }
-    componentWillRender() {
-        if (this.parentTabsEl) {
-            this.layout = this.parentTabsEl.layout;
-            this.bordered = this.parentTabsEl.bordered;
-        }
-    }
-    render() {
-        const { el, closed } = this;
-        const id = el.id || this.guid;
-        const iconStartEl = (h("calcite-icon", { class: { [CSS.titleIcon]: true, [CSS.iconStart]: true }, flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: getIconScale(this.scale) }));
-        const iconEndEl = (h("calcite-icon", { class: { [CSS.titleIcon]: true, [CSS.iconEnd]: true }, flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: getIconScale(this.scale) }));
-        return (h(Host, { "aria-controls": this.controls, "aria-selected": toAriaBoolean(this.selected), id: id, role: "tab", tabIndex: this.selected && !this.disabled ? 0 : -1 }, h(InteractiveContainer, { disabled: this.disabled }, h("div", { class: {
-                container: true,
-                [CSS.iconPresent]: !!this.iconStart || !!this.iconEnd,
-                [`scale-${this.scale}`]: true,
-            }, hidden: closed,
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: (el) => { var _a; return (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(el); } }, h("div", { class: { [CSS.content]: true, [CSS.contentHasText]: this.hasText } }, this.iconStart ? iconStartEl : null, h("slot", null), this.iconEnd ? iconEndEl : null), this.renderCloseButton()))));
-    }
-    renderCloseButton() {
-        const { closable, messages } = this;
-        return closable ? (h("button", { "aria-label": messages.close, class: CSS.closeButton, disabled: false, key: CSS.closeButton, onClick: this.closeClickHandler, title: messages.close, type: "button",
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: (el) => (this.closeButtonEl = el) }, h("calcite-icon", { icon: ICONS.close, scale: getIconScale(this.scale) }))) : null;
-    }
-    async componentDidLoad() {
-        this.calciteInternalTabTitleRegister.emit(await this.getTabIdentifier());
-    }
-    componentDidRender() {
-        updateHostInteraction(this);
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Event Listeners
-    //
-    //--------------------------------------------------------------------------
-    internalTabChangeHandler(event) {
-        const targetTabsEl = event
-            .composedPath()
-            .find((el) => el.tagName === "CALCITE-TABS");
-        if (targetTabsEl !== this.parentTabsEl) {
-            return;
-        }
-        if (this.tab) {
-            this.selected = this.tab === event.detail.tab;
-        }
-        else {
-            this.getTabIndex().then((index) => {
-                this.selected = index === event.detail.tab;
-            });
-        }
-        event.stopPropagation();
-    }
-    onClick() {
-        this.activateTab();
-    }
-    keyDownHandler(event) {
-        switch (event.key) {
-            case " ":
-            case "Enter":
-                if (!event.composedPath().includes(this.closeButtonEl)) {
-                    this.activateTab();
-                    event.preventDefault();
-                }
-                break;
-            case "ArrowRight":
-                event.preventDefault();
-                if (getElementDir(this.el) === "ltr") {
-                    this.calciteInternalTabsFocusNext.emit();
-                }
-                else {
-                    this.calciteInternalTabsFocusPrevious.emit();
-                }
-                break;
-            case "ArrowLeft":
-                event.preventDefault();
-                if (getElementDir(this.el) === "ltr") {
-                    this.calciteInternalTabsFocusPrevious.emit();
-                }
-                else {
-                    this.calciteInternalTabsFocusNext.emit();
-                }
-                break;
-            case "Home":
-                event.preventDefault();
-                this.calciteInternalTabsFocusFirst.emit();
-                break;
-            case "End":
-                event.preventDefault();
-                this.calciteInternalTabsFocusLast.emit();
-                break;
-        }
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Public Methods
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * Returns the index of the title within the `calcite-tab-nav`.
-     */
-    async getTabIndex() {
-        return Array.prototype.indexOf.call(nodeListToArray(this.el.parentElement.children).filter((el) => el.matches("calcite-tab-title")), this.el);
-    }
-    /**
-     * @internal
-     */
-    async getTabIdentifier() {
-        return this.tab ? this.tab : this.getTabIndex();
-    }
-    /**
-     * @param tabIds
-     * @param titleIds
-     * @internal
-     */
-    async updateAriaInfo(tabIds = [], titleIds = []) {
-        this.controls = tabIds[titleIds.indexOf(this.el.id)] || null;
-    }
-    /**
-     * This activates a tab in order for it and its associated tab-title be selected.
-     *
-     * @param userTriggered - when `true`, user-interaction events will be emitted in addition to internal events
-     * @internal
-     */
-    async activateTab(userTriggered = true) {
-        if (this.disabled || this.closed) {
-            return;
-        }
-        const payload = { tab: this.tab };
-        this.calciteInternalTabsActivate.emit(payload);
-        if (userTriggered) {
-            // emit in the next frame to let internal events sync up
-            requestAnimationFrame(() => this.calciteTabsActivate.emit());
-        }
-    }
-    effectiveLocaleChange() {
-        updateMessages(this, this.effectiveLocale);
-    }
-    updateHasText() {
-        this.hasText = this.el.textContent.trim().length > 0;
-    }
-    setupTextContentObserver() {
-        var _a;
-        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
-    }
-    closeTabTitleAndNotify() {
-        this.closed = true;
-        this.calciteInternalTabsClose.emit({ tab: this.tab });
-        this.calciteTabsClose.emit();
-    }
-    static get assetsDirs() { return ["assets"]; }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "selected": ["selectedHandler"],
-        "messageOverrides": ["onMessagesChange"],
-        "effectiveLocale": ["effectiveLocaleChange"]
-    }; }
-};
-TabTitle.style = tabTitleCss;
-
-export { TabTitle as calcite_tab_title };