//#region src/components/tabs/index.ts
function e(e) {
	if (typeof e == "string") {
		let t = document.querySelector(e);
		if (!t) throw Error(`TabPanel container not found: ${e}`);
		return t;
	}
	return e;
}
var t = 0;
function n(e) {
	return `${e}-${String(++t)}`;
}
var r = class {
	container;
	config;
	instanceId;
	tabs;
	activeTabId;
	barEl = null;
	panelsEl = null;
	panelMap = /* @__PURE__ */ new Map();
	boundKeydownHandler;
	constructor(t) {
		this.container = e(t.container), this.config = t, this.instanceId = n("cmm-tabs"), this.tabs = [...t.tabs];
		let r = this.tabs[0];
		this.activeTabId = t.activeTab ?? (r === void 0 ? "" : r.id), this.boundKeydownHandler = this.handleKeydown.bind(this), this.render();
	}
	setActiveTab(e) {
		let t = this.tabs.find((t) => t.id === e);
		t && t.disabled !== !0 && (this.activeTabId = e, this.updateTabBar(), this.updatePanelVisibility(), this.config.onTabChange?.(e));
	}
	getActiveTab() {
		return this.activeTabId;
	}
	addTab(e) {
		this.tabs.push(e), this.render();
	}
	removeTab(e) {
		let t = this.tabs.findIndex((t) => t.id === e);
		if (!(t < 0)) {
			if (this.tabs.splice(t, 1), this.panelMap.delete(e), this.activeTabId === e) {
				let e = this.tabs[0];
				this.activeTabId = e === void 0 ? "" : e.id;
			}
			this.config.onTabClose?.(e), this.render();
		}
	}
	getPanel(e) {
		let t = this.panelMap.get(e);
		if (t !== void 0) return t;
		let n = document.createElement("div");
		return n.className = "cmm-tabs__panel", n.dataset.slot = "tabs-content", n.dataset.tabPanel = e, n.dataset.state = e === this.activeTabId ? "active" : "inactive", e === this.activeTabId && n.classList.add("cmm-tabs__panel--active"), this.panelMap.set(e, n), this.panelsEl && this.panelsEl.appendChild(n), n;
	}
	destroy() {
		this.barEl !== null && this.barEl.removeEventListener("keydown", this.boundKeydownHandler), this.container.replaceChildren(), this.barEl = null, this.panelsEl = null, this.panelMap.clear();
	}
	handleKeydown(e) {
		let t = this.tabs.filter((e) => e.disabled !== !0);
		if (t.length === 0) return;
		let n = t.findIndex((e) => e.id === this.activeTabId), r;
		switch (e.key) {
			case "ArrowLeft":
				r = n > 0 ? n - 1 : t.length - 1, e.preventDefault();
				break;
			case "ArrowRight":
				r = n < t.length - 1 ? n + 1 : 0, e.preventDefault();
				break;
			case "Home":
				r = 0, e.preventDefault();
				break;
			case "End":
				r = t.length - 1, e.preventDefault();
				break;
			default: return;
		}
		let i = t[r];
		i !== void 0 && i.id !== this.activeTabId && (this.setActiveTab(i.id), this.focusTab(i.id));
	}
	focusTab(e) {
		this.barEl !== null && this.barEl.querySelector(`[data-tab-id="${e}"]`)?.focus();
	}
	render() {
		this.container.replaceChildren(), this.panelMap.clear();
		let e = document.createElement("div");
		e.className = "cmm-tabs", e.dataset.slot = "tabs", e.dataset.orientation = "horizontal";
		let t = document.createElement("div");
		t.className = "cmm-tabs__bar", t.dataset.slot = "tabs-list", t.dataset.orientation = "horizontal", t.setAttribute("role", "tablist"), t.setAttribute("aria-label", "Tabs"), t.setAttribute("aria-orientation", "horizontal"), t.addEventListener("keydown", this.boundKeydownHandler), this.barEl = t;
		for (let e of this.tabs) t.appendChild(this.buildTabButton(e));
		e.appendChild(t);
		let n = document.createElement("div");
		n.className = "cmm-tabs__panels", this.panelsEl = n;
		for (let e of this.tabs) {
			let t = document.createElement("div");
			t.className = "cmm-tabs__panel", t.id = `${this.instanceId}-panel-${e.id}`, t.dataset.slot = "tabs-content", t.dataset.tabPanel = e.id, t.dataset.state = e.id === this.activeTabId ? "active" : "inactive", t.setAttribute("role", "tabpanel"), t.setAttribute("aria-labelledby", `${this.instanceId}-tab-${e.id}`), t.tabIndex = 0, e.id === this.activeTabId && t.classList.add("cmm-tabs__panel--active"), this.panelMap.set(e.id, t), n.appendChild(t);
		}
		e.appendChild(n), this.container.appendChild(e);
	}
	buildTabButton(e) {
		let t = document.createElement("button");
		if (t.type = "button", t.className = "cmm-tabs__tab", t.setAttribute("role", "tab"), t.setAttribute("aria-selected", e.id === this.activeTabId ? "true" : "false"), t.setAttribute("aria-controls", `${this.instanceId}-panel-${e.id}`), t.id = `${this.instanceId}-tab-${e.id}`, t.dataset.slot = "tabs-trigger", t.dataset.tabId = e.id, t.dataset.state = e.id === this.activeTabId ? "active" : "inactive", t.tabIndex = e.id === this.activeTabId ? 0 : -1, e.id === this.activeTabId && t.classList.add("cmm-tabs__tab--active"), e.disabled === !0 && (t.classList.add("cmm-tabs__tab--disabled"), t.disabled = !0, t.tabIndex = -1), e.icon !== void 0) {
			let n = document.createElement("span");
			n.className = "cmm-tabs__tab-icon", n.textContent = e.icon, t.appendChild(n);
		}
		let n = document.createElement("span");
		if (n.className = "cmm-tabs__tab-label", n.textContent = e.label, t.appendChild(n), t.addEventListener("click", () => {
			this.setActiveTab(e.id);
		}), e.closeable === !0) {
			let n = document.createElement("button");
			n.type = "button", n.className = "cmm-tabs__tab-close", n.textContent = "×", n.setAttribute("aria-label", `Close ${e.label}`), n.tabIndex = -1, n.addEventListener("click", (t) => {
				t.stopPropagation(), this.removeTab(e.id);
			}), t.appendChild(n);
		}
		return t;
	}
	updateTabBar() {
		this.barEl && this.barEl.querySelectorAll(".cmm-tabs__tab").forEach((e) => {
			let t = e.dataset.tabId, n = this.tabs.find((e) => e.id === t)?.disabled === !0;
			t === this.activeTabId ? (e.classList.add("cmm-tabs__tab--active"), e.setAttribute("aria-selected", "true"), e.dataset.state = "active", e.tabIndex = 0, e.disabled = !1) : (e.classList.remove("cmm-tabs__tab--active"), e.setAttribute("aria-selected", "false"), e.dataset.state = "inactive", e.tabIndex = -1, e.disabled = n);
		});
	}
	updatePanelVisibility() {
		for (let [e, t] of this.panelMap) e === this.activeTabId ? (t.classList.add("cmm-tabs__panel--active"), t.dataset.state = "active") : (t.classList.remove("cmm-tabs__panel--active"), t.dataset.state = "inactive");
	}
};
//#endregion
export { r as TabPanel };

//# sourceMappingURL=index.js.map