@esri/calcite-components 1.0.0-beta.67 → 1.0.0-beta.68

package/dist/components/calcite-tab-title.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CalciteTabTitle extends Components.CalciteTabTitle, HTMLElement {}
+export const CalciteTabTitle: {
+  prototype: CalciteTabTitle;
+  new (): CalciteTabTitle;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/calcite-tab-title.js

@@ -0,0 +1,10 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+import { C as CalciteTabTitle$1, d as defineCustomElement$1 } from './calcite-tab-title2.js';
+
+const CalciteTabTitle = CalciteTabTitle$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalciteTabTitle, defineCustomElement };

package/dist/components/calcite-tab-title2.js

@@ -0,0 +1,230 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+import { attachShadow, createEvent, Build, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { g as guid } from './guid.js';
+import { g as getElementProp, a as getElementDir, C as CSS_UTILITY } from './dom.js';
+import { g as getKey } from './key.js';
+import { c as createObserver } from './observers.js';
+import { d as defineCustomElement$1 } from './calcite-icon2.js';
+
+const calciteTabTitleCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:300ms}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{display:block;-ms-flex:0 1 auto;flex:0 1 auto;outline:2px solid transparent;outline-offset:2px;margin-right:1.25rem;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:1.25rem;margin-inline-end:1.25rem}:host([layout=center]){text-align:center;margin-top:0;margin-bottom:0;margin-left:1.25rem;margin-right:1.25rem;-ms-flex-preferred-size:12rem;flex-basis:12rem}:host([position=below]) a{border-bottom-width:0;border-top-width:2px;border-top-color:transparent;border-top-style:solid}:host a{outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out}:host(:focus) a{outline:2px solid var(--calcite-ui-brand);outline-offset:2px}:host(:active) a,:host(:focus) a,:host(:hover) a{text-decoration:none;color:var(--calcite-ui-text-1);border-color:var(--calcite-ui-border-2)}:host([active]) a{color:var(--calcite-ui-text-1);border-color:transparent}:host([disabled]){pointer-events:none}:host([disabled]) span,:host([disabled]) a{pointer-events:none;opacity:0.5}:host([scale=s]){-webkit-margin-end:1rem;margin-inline-end:1rem}:host([scale=s]) a,:host([scale=s]) span{font-size:var(--calcite-font-size--2);line-height:1rem;padding-top:0.25rem;padding-bottom:0.25rem}:host([scale=m]) a,:host([scale=m]) span{font-size:var(--calcite-font-size--1);line-height:1rem;padding-top:0.5rem;padding-bottom:0.5rem}:host([scale=l]){-webkit-margin-end:1.5rem;margin-inline-end:1.5rem}:host([scale=l]) a,:host([scale=l]) span{font-size:var(--calcite-font-size-0);line-height:1.25rem;padding-top:0.75rem;padding-bottom:0.75rem}a,span{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom-width:2px;border-bottom-color:transparent;width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;color:var(--calcite-ui-text-3);font-size:var(--calcite-font-size--1);line-height:1rem;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-delay:0s;transition-delay:0s;padding-left:0;padding-right:0;padding-top:0.5rem;padding-bottom:0.5rem;border-bottom-style:solid}span{cursor:default}.calcite-tab-title--icon{display:-ms-inline-flexbox;display:inline-flex;position:relative;margin:0;-ms-flex-item-align:center;align-self:center}.calcite-tab-title--icon svg{-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-delay:0s;transition-delay:0s}.container--has-text .calcite-tab-title--icon.icon-start{margin-right:0.5rem}.container--has-text .calcite-tab-title--icon.icon-end{margin-left:0.5rem}:host([icon-start][icon-end]) .calcite-tab-title--icon:first-child{margin-right:0.5rem}.container--has-text.calcite--rtl .calcite-tab-title--icon.icon-end{margin-left:0;margin-right:0.5rem}.container--has-text.calcite--rtl .calcite-tab-title--icon.icon-start{margin-left:0.5rem;margin-right:0}:host([icon-start][icon-end]) .calcite--rtl .calcite-tab-title--icon:first-child{margin-left:0.5rem;margin-right:0}:host([bordered]){-webkit-margin-end:0;margin-inline-end:0}:host([bordered][active]){-webkit-box-shadow:inset 0px -2px var(--calcite-ui-foreground-1);box-shadow:inset 0px -2px var(--calcite-ui-foreground-1)}:host([bordered][active][position=below]){-webkit-box-shadow:inset 0 2px 0 var(--calcite-ui-foreground-1);box-shadow:inset 0 2px 0 var(--calcite-ui-foreground-1)}:host([bordered]:hover) a,:host([bordered]:focus) a,:host([bordered]:active) a{position:relative}:host([bordered]:hover) a{background-color:var(--calcite-button-transparent-hover);-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-delay:0s;transition-delay:0s}:host([bordered]) a{border-bottom-style:unset}:host([bordered][position=below]) a{border-top-style:unset}:host([active][bordered]) a{border-left:1px solid var(--calcite-ui-border-1);border-right:1px solid var(--calcite-ui-border-1)}:host([bordered]) a,:host([bordered]) span{padding-left:0.75rem;padding-right:0.75rem}:host([bordered][scale=s]) a,:host([bordered][scale=s]) span{padding-left:0.5rem;padding-right:0.5rem}:host([bordered][scale=l]) a,:host([bordered][scale=l]) span{padding-left:1rem;padding-right:1rem}";
+
+let CalciteTabTitle = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    attachShadow(this);
+    this.calciteTabsActivate = createEvent(this, "calciteTabsActivate", 7);
+    this.calciteTabsFocusNext = createEvent(this, "calciteTabsFocusNext", 7);
+    this.calciteTabsFocusPrevious = createEvent(this, "calciteTabsFocusPrevious", 7);
+    this.calciteTabTitleRegister = createEvent(this, "calciteTabTitleRegister", 7);
+    //--------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    //--------------------------------------------------------------------------
+    /** Show this tab title as selected */
+    this.active = false;
+    /** Disable this tab title  */
+    this.disabled = false;
+    /** @internal Parent tabs component bordered value */
+    this.bordered = false;
+    //--------------------------------------------------------------------------
+    //
+    //  Private State/Props
+    //
+    //--------------------------------------------------------------------------
+    /** watches for changing text content **/
+    this.mutationObserver = createObserver("mutation", () => this.updateHasText());
+    /** determine if there is slotted text for styling purposes */
+    this.hasText = false;
+    /**
+     * @internal
+     */
+    this.guid = `calcite-tab-title-${guid()}`;
+  }
+  activeTabChanged() {
+    if (this.active) {
+      this.emitActiveTab();
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  connectedCallback() {
+    this.setupTextContentObserver();
+    this.parentTabNavEl = this.el.closest("calcite-tab-nav");
+    this.parentTabsEl = this.el.closest("calcite-tabs");
+  }
+  disconnectedCallback() {
+    var _a, _b;
+    (_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
+    }));
+  }
+  componentWillLoad() {
+    if (Build.isBrowser) {
+      this.updateHasText();
+    }
+    if (this.tab && this.active) {
+      this.emitActiveTab();
+    }
+  }
+  componentWillRender() {
+    if (this.parentTabsEl) {
+      this.layout = this.parentTabsEl.layout;
+      this.position = this.parentTabsEl.position;
+      this.scale = this.parentTabsEl.scale;
+      this.bordered = this.parentTabsEl.bordered;
+    }
+    // handle case when tab-nav is only parent
+    if (!this.parentTabsEl && this.parentTabNavEl) {
+      this.position = getElementProp(this.parentTabNavEl, "position", this.position);
+      this.scale = getElementProp(this.parentTabNavEl, "scale", this.scale);
+    }
+  }
+  render() {
+    const dir = getElementDir(this.el);
+    const id = this.el.id || this.guid;
+    const Tag = this.disabled ? "span" : "a";
+    const showSideBorders = this.bordered && !this.disabled && this.layout !== "center";
+    const iconStartEl = (h("calcite-icon", { class: "calcite-tab-title--icon icon-start", dir: dir, flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: "s" }));
+    const iconEndEl = (h("calcite-icon", { class: "calcite-tab-title--icon icon-end", dir: dir, flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: "s" }));
+    return (h(Host, { "aria-controls": this.controls, "aria-expanded": this.active.toString(), id: id, role: "tab", tabindex: this.disabled ? "-1" : "0" }, h(Tag, { class: {
+        container: true,
+        "container--has-text": this.hasText,
+        [CSS_UTILITY.rtl]: dir === "rtl"
+      }, style: showSideBorders && { width: `${this.parentTabNavEl.indicatorWidth}px` } }, this.iconStart ? iconStartEl : null, h("slot", null), this.iconEnd ? iconEndEl : null)));
+  }
+  async componentDidLoad() {
+    this.calciteTabTitleRegister.emit(await this.getTabIdentifier());
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Event Listeners
+  //
+  //--------------------------------------------------------------------------
+  tabChangeHandler(event) {
+    if (this.parentTabNavEl === event.target) {
+      if (this.tab) {
+        this.active = this.tab === event.detail.tab;
+      }
+      else {
+        this.getTabIndex().then((index) => {
+          this.active = index === event.detail.tab;
+        });
+      }
+    }
+  }
+  onClick() {
+    this.emitActiveTab();
+  }
+  keyDownHandler(e) {
+    switch (getKey(e.key)) {
+      case " ":
+      case "Enter":
+        this.emitActiveTab();
+        e.preventDefault();
+        break;
+      case "ArrowRight":
+        if (getElementDir(this.el) === "ltr") {
+          this.calciteTabsFocusNext.emit();
+        }
+        else {
+          this.calciteTabsFocusPrevious.emit();
+        }
+        break;
+      case "ArrowLeft":
+        if (getElementDir(this.el) === "ltr") {
+          this.calciteTabsFocusPrevious.emit();
+        }
+        else {
+          this.calciteTabsFocusNext.emit();
+        }
+        break;
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Return the index of this title within the nav
+   */
+  async getTabIndex() {
+    return Array.prototype.indexOf.call(this.el.parentElement.querySelectorAll("calcite-tab-title"), this.el);
+  }
+  /**
+   * @internal
+   */
+  async getTabIdentifier() {
+    return this.tab ? this.tab : this.getTabIndex();
+  }
+  /**
+   * @internal
+   */
+  async updateAriaInfo(tabIds = [], titleIds = []) {
+    this.controls = tabIds[titleIds.indexOf(this.el.id)] || null;
+  }
+  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 });
+  }
+  emitActiveTab() {
+    if (!this.disabled) {
+      this.calciteTabsActivate.emit({
+        tab: this.tab
+      });
+    }
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "active": ["activeTabChanged"]
+  }; }
+  static get style() { return calciteTabTitleCss; }
+};
+CalciteTabTitle = /*@__PURE__*/ proxyCustomElement(CalciteTabTitle, [1, "calcite-tab-title", {
+    "active": [1540],
+    "disabled": [516],
+    "iconEnd": [513, "icon-end"],
+    "iconFlipRtl": [513, "icon-flip-rtl"],
+    "iconStart": [513, "icon-start"],
+    "layout": [1537],
+    "position": [1537],
+    "scale": [1537],
+    "bordered": [1540],
+    "tab": [513],
+    "controls": [32],
+    "hasText": [32],
+    "getTabIndex": [64],
+    "getTabIdentifier": [64],
+    "updateAriaInfo": [64]
+  }, [[16, "calciteTabChange", "tabChangeHandler"], [0, "click", "onClick"], [0, "keydown", "keyDownHandler"]]]);
+function defineCustomElement() {
+  const components = ["calcite-tab-title", "calcite-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-tab-title":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CalciteTabTitle);
+      }
+      break;
+    case "calcite-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { CalciteTabTitle as C, defineCustomElement as d };

package/dist/components/calcite-tab.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CalciteTab extends Components.CalciteTab, HTMLElement {}
+export const CalciteTab: {
+  prototype: CalciteTab;
+  new (): CalciteTab;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/calcite-tab.js

@@ -0,0 +1,10 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+import { C as CalciteTab$1, d as defineCustomElement$1 } from './calcite-tab2.js';
+
+const CalciteTab = CalciteTab$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalciteTab, defineCustomElement };

package/dist/components/calcite-tab2.js

@@ -0,0 +1,122 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+import { attachShadow, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { g as guid } from './guid.js';
+import { n as nodeListToArray } from './dom.js';
+
+const calciteTabCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:300ms}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host([active]) section{display:block}:host{display:none;color:var(--calcite-ui-text-3)}:host([active]){display:block}section{height:100%;width:100%;display:none}:host([scale=s]){font-size:var(--calcite-font-size--2);line-height:1rem;padding-top:0.25rem;padding-bottom:0.25rem}:host([scale=m]){font-size:var(--calcite-font-size--1);line-height:1rem;padding-top:0.5rem;padding-bottom:0.5rem}:host([scale=l]){font-size:var(--calcite-font-size-0);line-height:1.25rem;padding-top:0.75rem;padding-bottom:0.75rem}";
+
+let CalciteTab = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    attachShadow(this);
+    this.calciteTabRegister = createEvent(this, "calciteTabRegister", 7);
+    /**
+     * Show this tab
+     */
+    this.active = false;
+    /** @internal Parent tabs component scale value */
+    this.scale = "m";
+    //--------------------------------------------------------------------------
+    //
+    //  Private State/Props
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * @internal
+     */
+    this.guid = `calcite-tab-title-${guid()}`;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  render() {
+    const id = this.el.id || this.guid;
+    return (h(Host, { "aria-expanded": this.active.toString(), "aria-labelledby": this.labeledBy, id: id, role: "tabpanel" }, h("section", null, h("slot", null))));
+  }
+  componentDidLoad() {
+    this.calciteTabRegister.emit();
+  }
+  componentWillRender() {
+    var _a;
+    this.scale = (_a = this.el.closest("calcite-tabs")) === null || _a === void 0 ? void 0 : _a.scale;
+  }
+  disconnectedCallback() {
+    var _a;
+    // Dispatching to body in order to be listened by other elements that are still connected to the DOM.
+    (_a = document.body) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent("calciteTabUnregister", {
+      detail: this.el
+    }));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Event Listeners
+  //
+  //--------------------------------------------------------------------------
+  tabChangeHandler(event) {
+    // to allow `<calcite-tabs>` to be nested we need to make sure this
+    // `calciteTabChange` event was actually fired from a title that is a
+    // child of the `<calcite-tabs>` that is the a parent of this tab.
+    if (event.target.closest("calcite-tabs") !== this.el.closest("calcite-tabs")) {
+      return;
+    }
+    if (this.tab) {
+      this.active = this.tab === event.detail.tab;
+    }
+    else {
+      this.getTabIndex().then((index) => {
+        this.active = index === event.detail.tab;
+      });
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Return the index of this tab within the tab array
+   */
+  async getTabIndex() {
+    return Array.prototype.indexOf.call(nodeListToArray(this.el.parentElement.children).filter((e) => e.matches("calcite-tab")), this.el);
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * @internal
+   */
+  async updateAriaInfo(tabIds = [], titleIds = []) {
+    this.labeledBy = titleIds[tabIds.indexOf(this.el.id)] || null;
+  }
+  get el() { return this; }
+  static get style() { return calciteTabCss; }
+};
+CalciteTab = /*@__PURE__*/ proxyCustomElement(CalciteTab, [1, "calcite-tab", {
+    "tab": [513],
+    "active": [1540],
+    "scale": [1537],
+    "labeledBy": [32],
+    "getTabIndex": [64],
+    "updateAriaInfo": [64]
+  }, [[16, "calciteTabChange", "tabChangeHandler"]]]);
+function defineCustomElement() {
+  const components = ["calcite-tab"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-tab":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CalciteTab);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { CalciteTab as C, defineCustomElement as d };

package/dist/components/calcite-tabs.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CalciteTabs extends Components.CalciteTabs, HTMLElement {}
+export const CalciteTabs: {
+  prototype: CalciteTabs;
+  new (): CalciteTabs;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/calcite-tabs.js

@@ -0,0 +1,10 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+import { C as CalciteTabs$1, d as defineCustomElement$1 } from './calcite-tabs2.js';
+
+const CalciteTabs = CalciteTabs$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalciteTabs, defineCustomElement };

package/dist/components/calcite-tabs2.js

@@ -0,0 +1,183 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+import { attachShadow, h, Fragment, proxyCustomElement } from '@stencil/core/internal/client';
+
+const SLOTS = {
+  tabNav: "tab-nav"
+};
+
+const calciteTabsCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:300ms}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host([bordered]){-webkit-box-shadow:inset 0 1px 0 var(--calcite-ui-border-1);box-shadow:inset 0 1px 0 var(--calcite-ui-border-1);background-color:var(--calcite-ui-foreground-1)}:host([bordered]:not([position=below])) ::slotted(calcite-tab-nav){margin-bottom:-1px}:host([bordered][position=below]) ::slotted(calcite-tab-nav){margin-top:-1px}:host([bordered][position=below]){-webkit-box-shadow:inset 0 1px 0 var(--calcite-ui-border-1), inset 0 -1px 0 var(--calcite-ui-border-1);box-shadow:inset 0 1px 0 var(--calcite-ui-border-1), inset 0 -1px 0 var(--calcite-ui-border-1)}:host([bordered]) section{border-width:1px;border-style:solid;border-color:var(--calcite-ui-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=below]){-ms-flex-direction:column-reverse;flex-direction:column-reverse}section{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;overflow:hidden;border-top-width:1px;border-top-color:var(--calcite-ui-border-1);border-top-style:solid}:host([position=below]) section{-ms-flex-direction:column-reverse;flex-direction:column-reverse;border-top-width:0;border-bottom-width:1px;border-bottom-color:var(--calcite-ui-border-1)}:host([position=below]:not([bordered])) section{border-bottom-style:solid}";
+
+let CalciteTabs = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    attachShadow(this);
+    //--------------------------------------------------------------------------
+    //
+    //  Public Properties
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Align tab titles to the edge or fully justify them across the tab nav ("center")
+     */
+    this.layout = "inline";
+    /**
+     * Display the tabs above (default) or below the tab content
+     */
+    this.position = "above";
+    /**
+     * Specify the scale of the tabs component, defaults to m
+     */
+    this.scale = "m";
+    /**
+     * Optionally enable tabs to appear like a folder-style menu when its layout is "inline"
+     */
+    this.bordered = false;
+    //--------------------------------------------------------------------------
+    //
+    //  Events
+    //
+    //--------------------------------------------------------------------------
+    //--------------------------------------------------------------------------
+    //
+    //  Private State/Props
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * @internal
+     *
+     * Stores an array of ids of `<calcite-tab-titles>`s to match up ARIA
+     * attributes.
+     */
+    this.titles = [];
+    /**
+     * @internal
+     *
+     * Stores an array of ids of `<calcite-tab>`s to match up ARIA attributes.
+     */
+    this.tabs = [];
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  connectedCallback() {
+    if (this.layout === "center") {
+      this.bordered = false;
+    }
+  }
+  render() {
+    return (h(Fragment, null, h("slot", { name: SLOTS.tabNav }), h("section", null, h("slot", null))));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Event Listeners
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * @internal
+   */
+  calciteTabTitleRegister(e) {
+    this.titles = [...this.titles, e.target];
+    this.registryHandler();
+    e.stopPropagation();
+  }
+  /**
+   * @internal
+   */
+  calciteTabTitleUnregister(e) {
+    this.titles = this.titles.filter((el) => el !== e.detail);
+    this.registryHandler();
+    e.stopPropagation();
+  }
+  /**
+   * @internal
+   */
+  calciteTabRegister(e) {
+    this.tabs = [...this.tabs, e.target];
+    this.registryHandler();
+    e.stopPropagation();
+  }
+  /**
+   * @internal
+   */
+  calciteTabUnregister(e) {
+    this.tabs = this.tabs.filter((el) => el !== e.detail);
+    this.registryHandler();
+    e.stopPropagation();
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * @internal
+   *
+   * 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((e) => e.tab) || this.titles.some((e) => e.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((e) => e.id);
+      titleIds = this.titles.sort((a, b) => a.tab.localeCompare(b.tab)).map((e) => e.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 this; }
+  static get style() { return calciteTabsCss; }
+};
+CalciteTabs = /*@__PURE__*/ proxyCustomElement(CalciteTabs, [1, "calcite-tabs", {
+    "layout": [513],
+    "position": [513],
+    "scale": [513],
+    "bordered": [1540],
+    "titles": [32],
+    "tabs": [32]
+  }, [[0, "calciteTabTitleRegister", "calciteTabTitleRegister"], [16, "calciteTabTitleUnregister", "calciteTabTitleUnregister"], [0, "calciteTabRegister", "calciteTabRegister"], [16, "calciteTabUnregister", "calciteTabUnregister"]]]);
+function defineCustomElement() {
+  const components = ["calcite-tabs"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-tabs":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CalciteTabs);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { CalciteTabs as C, defineCustomElement as d };

package/dist/components/calcite-tile-select-group.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CalciteTileSelectGroup extends Components.CalciteTileSelectGroup, HTMLElement {}
+export const CalciteTileSelectGroup: {
+  prototype: CalciteTileSelectGroup;
+  new (): CalciteTileSelectGroup;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;