/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as customElement } from "../../chunks/runtime.js";
import { css, html } from "lit";
import { LitElement, setAttribute, safeClassMap } from "@arcgis/lumina";
import { n as nodeListToArray } from "../../chunks/dom.js";
import { g as guid } from "../../chunks/guid.js";
const CSS = {
  container: "container",
  content: "content",
  scale: (scale) => `scale-${scale}`
};
const IDS = {
  tabTitleId: (id) => `calcite-tab-title-${id}`
};
const styles = css`:host{display:none}:host,.container,.content{block-size:100%;inline-size:100%}:host([selected]),:host([selected]) .container{display:flex;flex-direction:column}.content{box-sizing:border-box;padding-block:var(--calcite-tab-content-space-y, var(--calcite-tab-content-block-padding, var(--calcite-internal-tab-content-space-y)))}.scale-s{--calcite-internal-tab-content-space-y: .25rem;font-size:var(--calcite-font-size-sm);line-height:1rem}.scale-m{--calcite-internal-tab-content-space-y: .5rem;font-size:var(--calcite-font-size);line-height:1rem}.scale-l{--calcite-internal-tab-content-space-y: var(--calcite-space-sm-plus);font-size:var(--calcite-font-size-md);line-height:1.25rem}.container{display:none;block-size:100%;inline-size:100%;overflow:auto;outline-color:transparent}.container:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host([hidden]){display:none}[hidden]{display:none}`;
class Tab extends LitElement {
  constructor() {
    super();
    this.guid = IDS.tabTitleId(guid());
    this.parentTabsEl = null;
    this.scale = "m";
    this.selected = false;
    this.listenOn(document.body, "calciteInternalTabChange", this.internalTabChangeHandler);
  }
  static {
    this.properties = { labeledBy: [16, {}, { state: true }], scale: 1, selected: [7, {}, { reflect: true, type: Boolean }], tab: [3, {}, { reflect: true }] };
  }
  static {
    this.styles = styles;
  }
  async getTabIndex() {
    return Array.prototype.indexOf.call(nodeListToArray(this.el.parentElement.children).filter((el) => el.matches("calcite-tab")), this.el);
  }
  _updateAriaInfo(tabIds = [], titleIds = []) {
    this.labeledBy = titleIds[tabIds.indexOf(this.el.id)] || void 0;
  }
  connectedCallback() {
    super.connectedCallback();
    this.parentTabsEl = this.el.closest("calcite-tabs");
  }
  disconnectedCallback() {
    super.disconnectedCallback();
    document.body?.dispatchEvent(new CustomEvent("calciteTabUnregister", {
      detail: this.el
    }));
  }
  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();
  }
  render() {
    const id = this.el.id || this.guid;
    setAttribute(this.el, "aria-labelledby", this.labeledBy);
    setAttribute(this.el, "id", id);
    return html`<div class=${safeClassMap({ [CSS.container]: true, [CSS.scale(this.scale)]: true })} role=tabpanel .tabIndex=${this.selected ? 0 : -1}><section class=${safeClassMap(CSS.content)}><slot></slot></section></div>`;
  }
}
customElement("calcite-tab", Tab);
export {
  Tab
};
