@esri/solutions-components 0.8.2 → 0.8.3

package/dist/solutions-components/calcite-table.entry.js

@@ -0,0 +1,314 @@
+/*!
+ * 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 { s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-aea90723.js';
+import { u as updateMessages, s as setUpMessages, c as connectMessages, d as disconnectMessages } from './t9n-b39c5433.js';
+import { n as numberStringFormatter, c as connectLocalized, d as disconnectLocalized } from './locale-857f39cf.js';
+import { g as getUserAgentString } from './browser-b8d08bed.js';
+import './dom-b91aa537.js';
+import './guid-b75a5f7b.js';
+import './resources-0f8db821.js';
+import './key-9a10d862.js';
+import './observers-5ba39eee.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 = {
+    bordered: "bordered",
+    striped: "striped",
+    selectionArea: "selection-area",
+    paginationArea: "pagination-area",
+    container: "container",
+    tableContainer: "table-container",
+    tableFixed: "table--fixed",
+    assistiveText: "assistive-text",
+    selectionActions: "selection-actions",
+};
+const SLOTS = {
+    selectionActions: "selection-actions",
+    tableHeader: "table-header",
+    tableFooter: "table-footer",
+};
+
+const tableCss = ":host([scale=s]){--calcite-internal-table-cell-padding:0.25rem;--calcite-internal-table-cell-font-size:var(--calcite-font-size--2);--calcite-internal-table-cell-font-size-secondary:var(--calcite-font-size--3)}:host([scale=m]){--calcite-internal-table-cell-padding:0.5rem;--calcite-internal-table-cell-font-size:var(--calcite-font-size--1);--calcite-internal-table-cell-font-size-secondary:var(--calcite-font-size--2)}:host([scale=l]){--calcite-internal-table-cell-padding:1rem;--calcite-internal-table-cell-font-size:var(--calcite-font-size-0);--calcite-internal-table-cell-font-size-secondary:var(--calcite-font-size--1)}:host{display:flex}.container{display:flex;block-size:100%;inline-size:100%;flex-direction:column}.table-container{overflow:auto;white-space:nowrap;border:1px solid var(--calcite-color-border-3)}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}table{inline-size:100%;border-collapse:collapse;overflow-x:scroll}.table--fixed{table-layout:fixed}.bordered ::slotted(calcite-table-row){--calcite-table-row-border-color:var(--calcite-color-border-3)}.striped ::slotted(calcite-table-row:nth-child(2n+1)){--calcite-table-row-background:var(--calcite-color-foreground-2)}.selection-actions{display:flex;flex-direction:row;margin-inline-start:auto}.selection-area{display:flex;flex-direction:row;align-items:center;padding-block:var(--calcite-internal-table-cell-padding)}.selection-area calcite-chip:last-of-type{margin-inline-end:0.5rem}.selection-area calcite-chip:last-of-type:not(:first-of-type){margin-inline-start:0.5rem}.selection-area calcite-button{margin-inline-end:1rem}.pagination-area{display:flex;inline-size:100%;flex-direction:row;justify-content:center;padding-block:var(--calcite-internal-table-cell-padding)}calcite-pagination{flex:1;justify-content:center}:host([hidden]){display:none}[hidden]{display:none}";
+
+const Table = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.calciteTableSelect = createEvent(this, "calciteTableSelect", 6);
+        this.calciteTablePageChange = createEvent(this, "calciteTablePageChange", 6);
+        this.calciteInternalTableRowFocusChange = createEvent(this, "calciteInternalTableRowFocusChange", 6);
+        // --------------------------------------------------------------------------
+        //
+        //  Private Methods
+        //
+        // --------------------------------------------------------------------------
+        this.getSlottedRows = (el) => {
+            var _a;
+            return (_a = el === null || el === void 0 ? void 0 : el.assignedElements({ flatten: true })) === null || _a === void 0 ? void 0 : _a.filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-table-row"));
+        };
+        this.updateRows = () => {
+            var _a, _b, _c;
+            const headRows = this.getSlottedRows(this.tableHeadSlotEl) || [];
+            const bodyRows = this.getSlottedRows(this.tableBodySlotEl) || [];
+            const footRows = this.getSlottedRows(this.tableFootSlotEl) || [];
+            const allRows = [...headRows, ...bodyRows, ...footRows];
+            headRows === null || headRows === void 0 ? void 0 : headRows.forEach((row) => {
+                const position = headRows === null || headRows === void 0 ? void 0 : headRows.indexOf(row);
+                row.rowType = "head";
+                row.positionSection = position;
+                row.positionSectionLocalized = this.localizeNumber((position + 1).toString());
+            });
+            bodyRows === null || bodyRows === void 0 ? void 0 : bodyRows.forEach((row) => {
+                const position = bodyRows === null || bodyRows === void 0 ? void 0 : bodyRows.indexOf(row);
+                row.rowType = "body";
+                row.positionSection = position;
+                row.positionSectionLocalized = this.localizeNumber((position + 1).toString());
+            });
+            footRows === null || footRows === void 0 ? void 0 : footRows.forEach((row) => {
+                const position = footRows === null || footRows === void 0 ? void 0 : footRows.indexOf(row);
+                row.rowType = "foot";
+                row.positionSection = position;
+                row.positionSectionLocalized = this.localizeNumber((position + 1).toString());
+            });
+            allRows === null || allRows === void 0 ? void 0 : allRows.forEach((row) => {
+                row.selectionMode = this.selectionMode;
+                row.bodyRowCount = bodyRows === null || bodyRows === void 0 ? void 0 : bodyRows.length;
+                row.positionAll = allRows === null || allRows === void 0 ? void 0 : allRows.indexOf(row);
+                row.numbered = this.numbered;
+                row.scale = this.scale;
+                row.readCellContentsToAT = this.readCellContentsToAT;
+                row.lastVisibleRow = (allRows === null || allRows === void 0 ? void 0 : allRows.indexOf(row)) === allRows.length - 1;
+            });
+            const colCount = ((_a = headRows[0]) === null || _a === void 0 ? void 0 : _a.cellCount) || ((_c = (_b = headRows[0]) === null || _b === void 0 ? void 0 : _b.querySelectorAll("calcite-table-header")) === null || _c === void 0 ? void 0 : _c.length);
+            this.colCount = colCount;
+            this.headRows = headRows;
+            this.bodyRows = bodyRows;
+            this.footRows = footRows;
+            this.allRows = allRows;
+            this.updateSelectedItems();
+            this.paginateRows();
+        };
+        this.handlePaginationChange = () => {
+            var _a;
+            const requestedItem = (_a = this.paginationEl) === null || _a === void 0 ? void 0 : _a.startItem;
+            this.pageStartRow = requestedItem || 1;
+            this.calciteTablePageChange.emit();
+            this.updateRows();
+        };
+        this.paginateRows = () => {
+            var _a;
+            (_a = this.bodyRows) === null || _a === void 0 ? void 0 : _a.forEach((row) => {
+                const rowPos = row.positionSection + 1;
+                const inView = rowPos >= this.pageStartRow && rowPos < this.pageStartRow + this.pageSize;
+                row.hidden = this.pageSize > 0 && !inView && !this.footRows.includes(row);
+                row.lastVisibleRow =
+                    rowPos === this.pageStartRow + this.pageSize - 1 || rowPos === this.bodyRows.length;
+            });
+        };
+        this.updateSelectedItems = (emit) => {
+            var _a, _b;
+            const selectedItems = (_a = this.bodyRows) === null || _a === void 0 ? void 0 : _a.filter((el) => el.selected);
+            this.selectedItems = selectedItems;
+            this.selectedCount = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length;
+            (_b = this.allRows) === null || _b === void 0 ? void 0 : _b.forEach((row) => {
+                row.selectedRowCount = this.selectedCount;
+                row.selectedRowCountLocalized = this.localizeNumber(this.selectedCount);
+            });
+            if (emit) {
+                this.calciteTableSelect.emit();
+            }
+        };
+        this.handleDeselectAllRows = () => {
+            var _a;
+            (_a = this.bodyRows) === null || _a === void 0 ? void 0 : _a.forEach((row) => {
+                row.selected = false;
+            });
+            this.updateSelectedItems(true);
+        };
+        this.setSelectedItems = (elToMatch) => {
+            var _a;
+            (_a = this.bodyRows) === null || _a === void 0 ? void 0 : _a.forEach((el) => {
+                var _a;
+                if ((elToMatch === null || elToMatch === void 0 ? void 0 : elToMatch.rowType) === "head") {
+                    el.selected = this.selectedCount !== ((_a = this.bodyRows) === null || _a === void 0 ? void 0 : _a.length);
+                }
+                else {
+                    el.selected =
+                        elToMatch === el ? !el.selected : this.selectionMode === "multiple" ? el.selected : false;
+                }
+            });
+            this.updateSelectedItems(true);
+        };
+        this.localizeNumber = (value) => {
+            numberStringFormatter.numberFormatOptions = {
+                locale: this.effectiveLocale,
+                numberingSystem: this.numberingSystem,
+                useGrouping: this.groupSeparator,
+            };
+            return numberStringFormatter.localize(value.toString());
+        };
+        this.bordered = false;
+        this.caption = undefined;
+        this.groupSeparator = false;
+        this.layout = "auto";
+        this.numbered = false;
+        this.numberingSystem = undefined;
+        this.pageSize = 0;
+        this.scale = "m";
+        this.selectionMode = "none";
+        this.zebra = false;
+        this.striped = false;
+        this.selectedItems = [];
+        this.messages = undefined;
+        this.messageOverrides = undefined;
+        this.colCount = 0;
+        this.pageStartRow = 1;
+        this.selectedCount = 0;
+        this.readCellContentsToAT = undefined;
+        this.defaultMessages = undefined;
+        this.effectiveLocale = "";
+    }
+    handleNumberedChange() {
+        this.updateRows();
+    }
+    onMessagesChange() {
+        /* wired up by t9n util */
+    }
+    effectiveLocaleChange() {
+        updateMessages(this, this.effectiveLocale);
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Lifecycle
+    //
+    //--------------------------------------------------------------------------
+    async componentWillLoad() {
+        setUpLoadableComponent(this);
+        await setUpMessages(this);
+        this.readCellContentsToAT = /safari/i.test(getUserAgentString());
+        this.updateRows();
+    }
+    componentDidLoad() {
+        setComponentLoaded(this);
+    }
+    connectedCallback() {
+        connectLocalized(this);
+        connectMessages(this);
+    }
+    disconnectedCallback() {
+        disconnectLocalized(this);
+        disconnectMessages(this);
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Event Listeners
+    //
+    //--------------------------------------------------------------------------
+    calciteChipSelectListener(event) {
+        if (event.composedPath().includes(this.el)) {
+            this.setSelectedItems(event.target);
+        }
+    }
+    calciteInternalTableRowFocusEvent(event) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        const cellPosition = event["detail"].cellPosition;
+        const rowPos = event["detail"].rowPosition;
+        const destination = event["detail"].destination;
+        const lastCell = event["detail"].lastCell;
+        const visibleBody = (_a = this.bodyRows) === null || _a === void 0 ? void 0 : _a.filter((row) => !row.hidden);
+        const visibleAll = (_b = this.allRows) === null || _b === void 0 ? void 0 : _b.filter((row) => !row.hidden);
+        const lastHeadRow = (_c = this.headRows[this.headRows.length - 1]) === null || _c === void 0 ? void 0 : _c.positionAll;
+        const firstBodyRow = (_d = visibleBody[0]) === null || _d === void 0 ? void 0 : _d.positionAll;
+        const lastBodyRow = (_e = visibleBody[visibleBody.length - 1]) === null || _e === void 0 ? void 0 : _e.positionAll;
+        const firstFootRow = (_f = this.footRows[0]) === null || _f === void 0 ? void 0 : _f.positionAll;
+        const lastTableRow = (_g = visibleAll[visibleAll.length - 1]) === null || _g === void 0 ? void 0 : _g.positionAll;
+        const leavingHeader = destination === "next" && rowPos === lastHeadRow;
+        const leavingFooter = destination === "previous" && rowPos === firstFootRow;
+        const enteringHeader = destination === "previous" && rowPos === firstBodyRow;
+        const enteringFooter = destination === "next" && rowPos === lastBodyRow;
+        let rowPosition;
+        switch (destination) {
+            case "first":
+                rowPosition = 0;
+                break;
+            case "last":
+                rowPosition = lastTableRow;
+                break;
+            case "next":
+                rowPosition = leavingHeader ? firstBodyRow : enteringFooter ? firstFootRow : rowPos + 1;
+                break;
+            case "previous":
+                rowPosition = leavingFooter ? lastBodyRow : enteringHeader ? lastHeadRow : rowPos - 1;
+                break;
+        }
+        const destinationCount = (_j = (_h = this.allRows) === null || _h === void 0 ? void 0 : _h.find((row) => row.positionAll === rowPosition)) === null || _j === void 0 ? void 0 : _j.cellCount;
+        const adjustedPos = cellPosition > destinationCount ? destinationCount : cellPosition;
+        if (rowPosition !== undefined) {
+            this.calciteInternalTableRowFocusChange.emit({
+                cellPosition: adjustedPos,
+                rowPosition,
+                destination,
+                lastCell,
+            });
+        }
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Render Methods
+    //
+    // --------------------------------------------------------------------------
+    renderSelectionArea() {
+        var _a, _b, _c;
+        const outOfViewCount = (_b = (_a = this.selectedItems) === null || _a === void 0 ? void 0 : _a.filter((el) => el.hidden)) === null || _b === void 0 ? void 0 : _b.length;
+        const localizedOutOfView = this.localizeNumber(outOfViewCount === null || outOfViewCount === void 0 ? void 0 : outOfViewCount.toString());
+        const localizedSelectedCount = this.localizeNumber((_c = this.selectedCount) === null || _c === void 0 ? void 0 : _c.toString());
+        const selectionText = `${localizedSelectedCount} ${this.messages.selected}`;
+        const outOfView = `${localizedOutOfView} ${this.messages.hiddenSelected}`;
+        return (h("div", { class: CSS.selectionArea }, h("calcite-chip", { kind: this.selectedCount > 0 ? "brand" : "neutral", scale: this.scale, value: selectionText }, selectionText), outOfViewCount > 0 && (h("calcite-chip", { icon: "hide-empty", scale: this.scale, title: outOfView, value: outOfView }, localizedOutOfView)), this.selectedCount > 0 && (h("calcite-button", { "icon-start": "x", kind: "neutral", onClick: this.handleDeselectAllRows, round: true, scale: this.scale, title: `${this.messages.clear} ${selectionText} ${this.messages.row}` }, this.messages.clear)), h("div", { class: CSS.selectionActions }, h("slot", { name: SLOTS.selectionActions }))));
+    }
+    renderPaginationArea() {
+        var _a;
+        return (h("div", { class: CSS.paginationArea }, h("calcite-pagination", { groupSeparator: this.groupSeparator, numberingSystem: this.numberingSystem, onCalcitePaginationChange: this.handlePaginationChange, pageSize: this.pageSize, scale: this.scale, startItem: 1, totalItems: (_a = this.bodyRows) === null || _a === void 0 ? void 0 : _a.length,
+            // 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.paginationEl = el) })));
+    }
+    renderTHead() {
+        return (h("thead", null, h("slot", { name: SLOTS.tableHeader, onSlotchange: this.updateRows, ref: (el) => (this.tableHeadSlotEl = el) })));
+    }
+    renderTBody() {
+        return (h("tbody", null, h("slot", { onSlotchange: this.updateRows, ref: (el) => (this.tableBodySlotEl = el) })));
+    }
+    renderTFoot() {
+        return (h("tfoot", null, h("slot", { name: SLOTS.tableFooter, onSlotchange: this.updateRows, ref: (el) => (this.tableFootSlotEl = el) })));
+    }
+    render() {
+        var _a;
+        return (h(Host, null, h("div", { class: CSS.container }, this.selectionMode !== "none" && this.renderSelectionArea(), h("div", { class: {
+                [CSS.bordered]: this.bordered,
+                [CSS.striped]: this.striped || this.zebra,
+                [CSS.tableContainer]: true,
+            } }, h("table", { "aria-colcount": this.colCount, "aria-multiselectable": this.selectionMode === "multiple", "aria-readonly": true, "aria-rowcount": (_a = this.allRows) === null || _a === void 0 ? void 0 : _a.length, class: { [CSS.tableFixed]: this.layout === "fixed" }, role: "grid" }, h("caption", { class: CSS.assistiveText }, this.caption), this.renderTHead(), this.renderTBody(), this.renderTFoot())), this.pageSize > 0 && this.renderPaginationArea())));
+    }
+    static get assetsDirs() { return ["assets"]; }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "groupSeparator": ["handleNumberedChange"],
+        "numbered": ["handleNumberedChange"],
+        "numberingSystem": ["handleNumberedChange"],
+        "pageSize": ["handleNumberedChange"],
+        "scale": ["handleNumberedChange"],
+        "selectionMode": ["handleNumberedChange"],
+        "messageOverrides": ["onMessagesChange"],
+        "effectiveLocale": ["effectiveLocaleChange"]
+    }; }
+};
+Table.style = tableCss;
+
+export { Table as calcite_table };

package/dist/solutions-components/calcite-tabs.entry.js

@@ -0,0 +1,174 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { r as registerInstance, h, F as Fragment, g as getElement } from './index-bdfaac50.js';
+import { c as createObserver } from './observers-5ba39eee.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 SLOTS = {
+    titleGroup: "title-group",
+};
+
+const tabsCss = ":host{display:flex;flex-direction:column}:host([bordered]){box-shadow:inset 0 1px 0 var(--calcite-color-border-1);background-color:var(--calcite-color-foreground-1)}:host([bordered]:not([position=bottom])) ::slotted(calcite-tab-nav){margin-block-end:-1px}:host([bordered][position=bottom]){box-shadow:inset 0 1px 0 var(--calcite-color-border-1), inset 0 -1px 0 var(--calcite-color-border-1)}:host([bordered]) section{border-width:1px;border-style:solid;border-color:var(--calcite-color-border-1)}:host([bordered][scale=s]) section{padding:0.75rem}:host([bordered][scale=m]) section{padding:0.5rem}:host([bordered][scale=l]) section{padding:1rem}:host([position=bottom]){flex-direction:column-reverse}section{display:flex;flex-grow:1;overflow:hidden;border-block-start-width:1px;border-block-start-color:var(--calcite-color-border-1);border-block-start-style:solid}:host([position=bottom]) section{flex-direction:column-reverse;border-block-start-width:0px;border-block-end-width:1px;border-block-end-color:var(--calcite-color-border-1)}:host([position=bottom]:not([bordered])) section{border-block-end-style:solid}@media (forced-colors: active){:host([bordered]) section{border-block-start-width:0px;border-block-end-width:1px}:host([position=bottom][bordered]) section{border-block-start-width:1px;border-block-end-width:0px}}:host([hidden]){display:none}[hidden]{display:none}";
+
+const Tabs = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.mutationObserver = createObserver("mutation", (mutationsList) => {
+            for (const mutation of mutationsList) {
+                const target = mutation.target;
+                if (target.nodeName === "CALCITE-TAB-NAV" ||
+                    target.nodeName === "CALCITE-TAB-TITLE" ||
+                    target.nodeName === "CALCITE-TAB") {
+                    this.updateItems();
+                }
+            }
+        });
+        this.layout = "inline";
+        this.position = "top";
+        this.scale = "m";
+        this.bordered = false;
+        this.titles = [];
+        this.tabs = [];
+    }
+    handleInheritableProps() {
+        this.updateItems();
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Lifecycle
+    //
+    //--------------------------------------------------------------------------
+    connectedCallback() {
+        this.mutationObserver.observe(this.el, { childList: true });
+        this.updateItems();
+    }
+    async componentWillLoad() {
+        this.updateItems();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    render() {
+        return (h(Fragment, null, h("slot", { name: SLOTS.titleGroup }), h("section", null, h("slot", null))));
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Event Listeners
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * @param event
+     * @internal
+     */
+    calciteInternalTabTitleRegister(event) {
+        this.titles = [...this.titles, event.target];
+        this.registryHandler();
+        event.stopPropagation();
+    }
+    /**
+     * @param event
+     * @internal
+     */
+    calciteTabTitleUnregister(event) {
+        this.titles = this.titles.filter((el) => el !== event.detail);
+        this.registryHandler();
+        event.stopPropagation();
+    }
+    /**
+     * @param event
+     * @internal
+     */
+    calciteInternalTabRegister(event) {
+        this.tabs = [...this.tabs, event.target];
+        this.registryHandler();
+        event.stopPropagation();
+    }
+    /**
+     * @param event
+     * @internal
+     */
+    calciteTabUnregister(event) {
+        this.tabs = this.tabs.filter((el) => el !== event.detail);
+        this.registryHandler();
+        event.stopPropagation();
+    }
+    updateItems() {
+        const { position, scale } = this;
+        const nav = this.el.querySelector("calcite-tab-nav");
+        if (nav) {
+            nav.position = position;
+            nav.scale = scale;
+        }
+        Array.from(this.el.querySelectorAll("calcite-tab")).forEach((tab) => {
+            if (tab.parentElement === this.el) {
+                tab.scale = scale;
+            }
+        });
+        Array.from(this.el.querySelectorAll("calcite-tab-nav > calcite-tab-title")).forEach((title) => {
+            title.position = position;
+            title.scale = scale;
+        });
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    /**
+     *
+     * Matches up elements from the internal `tabs` and `titles` to automatically
+     * update the ARIA attributes and link `<calcite-tab>` and
+     * `<calcite-tab-title>` components.
+     */
+    async registryHandler() {
+        let tabIds;
+        let titleIds;
+        // determine if we are using `tab` based or `index` based tab identifiers.
+        if (this.tabs.some((el) => el.tab) || this.titles.some((el) => el.tab)) {
+            // if we are using `tab` based identifiers sort by `tab` to account for
+            // possible out of order tabs and get the id of each tab
+            tabIds = this.tabs.sort((a, b) => a.tab.localeCompare(b.tab)).map((el) => el.id);
+            titleIds = this.titles.sort((a, b) => a.tab.localeCompare(b.tab)).map((el) => el.id);
+        }
+        else {
+            // if we are using index based tabs then the `<calcite-tab>` and
+            // `<calcite-tab-title>` might have been rendered out of order so the
+            // order of `this.tabs` and `this.titles` might not reflect the DOM state,
+            // and might not match each other so we need to get the index of all the
+            // tabs and titles in the DOM order to match them up as a source of truth
+            const tabDomIndexes = await Promise.all(this.tabs.map((el) => el.getTabIndex()));
+            const titleDomIndexes = await Promise.all(this.titles.map((el) => el.getTabIndex()));
+            // once we have the DOM order as a source of truth we can build the
+            // matching tabIds and titleIds arrays
+            tabIds = tabDomIndexes.reduce((ids, indexInDOM, registryIndex) => {
+                ids[indexInDOM] = this.tabs[registryIndex].id;
+                return ids;
+            }, []);
+            titleIds = titleDomIndexes.reduce((ids, indexInDOM, registryIndex) => {
+                ids[indexInDOM] = this.titles[registryIndex].id;
+                return ids;
+            }, []);
+        }
+        // pass all our new aria information to each `<calcite-tab>` and
+        // `<calcite-tab-title>` which will check if they can update their internal
+        // `controlled` or `labeledBy` states and re-render if necessary
+        this.tabs.forEach((el) => el.updateAriaInfo(tabIds, titleIds));
+        this.titles.forEach((el) => el.updateAriaInfo(tabIds, titleIds));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "position": ["handleInheritableProps"],
+        "scale": ["handleInheritableProps"]
+    }; }
+};
+Tabs.style = tabsCss;
+
+export { Tabs as calcite_tabs };