import { audit as e } from "../internal/controllers/audit.controller.js";
import { generateId as t, sameOrderedStringArray as n, uniqueNonEmptyStrings as r } from "../internal/utils/dom.js";
import { attachInternals as i } from "../internal/utils/a11y.js";
import { useStyles as a } from "../internal/styles/index.js";
import { __decorate as o } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
import { Tabs as s } from "./tabs2.js";
import c from "./tabs-group.js";
import { LitElement as l, html as u } from "lit";
import { property as d } from "lit/decorators/property.js";
import { state as f } from "lit/decorators/state.js";
import { queryAssignedElements as p } from "lit/decorators/query-assigned-elements.js";
//#region src/tabs/tabs-group.ts
var m, h = class extends l {
	static {
		m = this;
	}
	constructor(...e) {
		super(...e), this.alignment = "top", this.panelValues = [], this.selectedValue = "", this.#t = () => {
			this.#i(), this.#a();
		}, this.#n = () => {
			this.#c();
		}, this.#r = (e) => {
			if (e.command !== "--toggle") return;
			let t = e.source?.value;
			if (typeof t != "string" || !t.length) return;
			let n = this.#d(), r = n.find((e) => this.#p(e) && e.value === t);
			r && this.#o(n, r, { emitEvent: !0 });
		};
	}
	static {
		this.styles = a([c]);
	}
	static {
		this.metadata = {
			tag: "nve-tabs-group",
			version: "2.0.2",
			children: ["nve-tabs"]
		};
	}
	static {
		this.subtreeObserverInit = {
			childList: !0,
			subtree: !0,
			attributes: !0,
			attributeFilter: [
				"disabled",
				"id",
				"selected",
				"value"
			]
		};
	}
	#e;
	render() {
		return u`<div internal-host><slot @slotchange="${this.#t}"></slot>${this.panelValues.map((e) => u`<slot name="${e}" @slotchange="${this.#n}"></slot>`)}</div>`;
	}
	connectedCallback() {
		super.connectedCallback(), i(this), this._internals.role = "group", this.addEventListener("command", this.#r);
	}
	firstUpdated() {
		this.updateComplete.then(() => {
			this.isConnected && this.#a();
		});
	}
	disconnectedCallback() {
		super.disconnectedCallback(), this.removeEventListener("command", this.#r), this.#e?.disconnect();
	}
	updated(e) {
		super.updated(e), this.#e || this.#i();
		let t = e;
		(t.has("panelValues") || t.has("selectedValue")) && this.#c();
	}
	#t;
	#n;
	#r;
	#i() {
		this.#e?.disconnect();
		let e = this.#u();
		e && (this.#e = new MutationObserver(() => this.#a()), this.#e.observe(e, m.subtreeObserverInit));
	}
	#a() {
		let e = this.#d(), t = r(e.map((e) => e.value)), n = this.#m(e);
		if (!n) {
			e.forEach((e) => e.selected = !1), this.#s(t, "");
			return;
		}
		this.#o(e, n, {
			emitEvent: !1,
			nextPanelValues: t
		});
	}
	#o(e, t, n) {
		let { emitEvent: i } = n, a = n.nextPanelValues ?? r(e.map((e) => e.value)), o = this.selectedValue !== t.value || !t.selected || e.some((e) => e !== t && e.selected);
		e.forEach((e) => {
			e.selected = e === t;
		}), this.#s(a, t.value), i && o && this.dispatchEvent(new CustomEvent("select", {
			bubbles: !0,
			composed: !0,
			detail: { value: t.value }
		}));
	}
	#s(e, t) {
		n(this.panelValues, e) || (this.panelValues = e), this.selectedValue !== t && (this.selectedValue = t);
	}
	#c() {
		let e = this.#d(), t = new Map(e.filter((e) => this.#p(e)).map((e) => [e.value, e]));
		this.#f().forEach((e) => {
			this.#l(e, t);
		});
	}
	#l(e, n) {
		let r = n.get(e.name), i = e.assignedElements({ flatten: !0 });
		if (!r) {
			i.forEach((e) => {
				e.hidden = !0;
			});
			return;
		}
		r.id ||= t(), i.forEach((n, i) => {
			n.id ||= t(), !r.hasAttribute("aria-controls") && i === 0 && r.setAttribute("aria-controls", n.id), n.hasAttribute("aria-labelledby") || n.setAttribute("aria-labelledby", r.id), n.hasAttribute("role") || n.setAttribute("role", "tabpanel"), n.hidden = e.name !== this.selectedValue;
		});
	}
	#u() {
		let e = this.defaultSlotElements.find((e) => e.localName === s.metadata.tag) ?? this.querySelector(s.metadata.tag);
		return e instanceof s ? e : void 0;
	}
	#d() {
		return Array.from(this.#u()?.querySelectorAll("nve-tabs-item") ?? []);
	}
	#f() {
		return Array.from(this.renderRoot.querySelectorAll("slot[name]"));
	}
	#p(e) {
		return typeof e.value == "string" && e.value.length > 0 && !e.disabled;
	}
	#m(e) {
		return e.find((e) => this.#p(e) && e.selected) ?? e.find((e) => this.#p(e));
	}
};
o([p({ flatten: !0 })], h.prototype, "defaultSlotElements", void 0), o([d({
	type: String,
	reflect: !0
})], h.prototype, "alignment", void 0), o([f()], h.prototype, "panelValues", void 0), o([f()], h.prototype, "selectedValue", void 0), h = m = o([e()], h);
//#endregion
export { h as TabsGroup };

//# sourceMappingURL=tabs-group2.js.map