@zitadel/components 0.1.0-alpha.0 → 0.1.0-alpha.2

package/dist/{orchestrator-B8eXcPRi.mjs → orchestrator-Dds72XrU.mjs}

@@ -1,4 +1,4 @@
-import { _ as __decorate, b as t, v as focusVisibleStyles, y as baseHostStyles } from "./atoms-B9yd0c-i.mjs";
+import { _ as __decorate, b as t, v as focusVisibleStyles, x as emit, y as baseHostStyles } from "./atoms-eOxuoGDq.mjs";
 import { r as tokensCss } from "./tokens-TXmurodq.mjs";
 import { t as default_default } from "./default-DP74t2io.mjs";
 import { manifestRegistry } from "./manifests.mjs";
@@ -7,15 +7,6 @@ import { customElement, property, state } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { Liquid } from "liquidjs";
 import DOMPurify from "dompurify";
-//#region ../api/dist/runtime/base-url.mjs
-let proxyPath = "";
-function getProxyPath() {
-	return proxyPath;
-}
-function setProxyPath(path) {
-	proxyPath = path;
-}
-//#endregion
 //#region ../api/dist/runtime/auth.mjs
 /**
 * Module-global bearer token used by the orval-generated client's
@@ -35,18 +26,6 @@ function setApiAuthToken(token) {
 	apiAuthToken = token;
 }
 //#endregion
-//#region ../api/dist/chunk-CfYAbeIz.mjs
-var __defProp = Object.defineProperty;
-var __exportAll = (all, no_symbols) => {
-	let target = {};
-	for (var name in all) __defProp(target, name, {
-		get: all[name],
-		enumerable: true
-	});
-	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
-	return target;
-};
-//#endregion
 //#region ../api/dist/runtime/fetch.mjs
 /**
 * Framework-neutral failure type the orval-generated client throws on
@@ -119,6 +98,57 @@ function safeJsonParse(text) {
 	}
 }
 //#endregion
+//#region src/orchestrator/api-client.ts
+const apiRequestInit = { credentials: "include" };
+async function startFlow(api, input) {
+	return api.createFlow(input, apiRequestInit);
+}
+async function submitStep(api, id, body) {
+	try {
+		return await api.submitFlowStep(id, body, apiRequestInit);
+	} catch (error) {
+		if (error instanceof ApiError && error.status === 400 && isFlowResponse(error.body)) return error.body;
+		throw error;
+	}
+}
+function isFlowResponse(body) {
+	return typeof body === "object" && body !== null && "step" in body;
+}
+async function getCurrentStep(api, id) {
+	return api.getFlowStep(id, apiRequestInit);
+}
+/**
+* Exchange a terminal-flow `handoff_token` for an authenticated session.
+* The server sets the `__nextgen_session` HttpOnly cookie on success.
+*
+* Uses the generated `exchangeHandoff` client which handles the
+* `project_id` query parameter via {@link ExchangeHandoffParams}.
+*/
+async function exchangeSession(api, body, params) {
+	return api.exchangeHandoff(body, params, apiRequestInit);
+}
+//#endregion
+//#region ../api/dist/runtime/base-url.mjs
+let proxyPath = "";
+function getProxyPath() {
+	return proxyPath;
+}
+function setProxyPath(path) {
+	proxyPath = path;
+}
+//#endregion
+//#region ../api/dist/chunk-CfYAbeIz.mjs
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+//#endregion
 //#region ../api/dist/generated/endpoints/zitadelNextGen.mjs
 /**
 * Generated by orval v8.10.0 🍺
@@ -166,6 +196,7 @@ var zitadelNextGen_exports = /* @__PURE__ */ __exportAll({
 	getGetKeysUrl: () => getGetKeysUrl,
 	getGetLiveUrl: () => getGetLiveUrl,
 	getGetMySessionUrl: () => getGetMySessionUrl,
+	getGetMyUserUrl: () => getGetMyUserUrl,
 	getGetOpenIDConfigurationUrl: () => getGetOpenIDConfigurationUrl,
 	getGetProjectUrl: () => getGetProjectUrl,
 	getGetReadyUrl: () => getGetReadyUrl,
@@ -184,6 +215,7 @@ var zitadelNextGen_exports = /* @__PURE__ */ __exportAll({
 	getListUsersUrl: () => getListUsersUrl,
 	getLive: () => getLive,
 	getMySession: () => getMySession,
+	getMyUser: () => getMyUser,
 	getOpenIDConfiguration: () => getOpenIDConfiguration,
 	getProject: () => getProject,
 	getReady: () => getReady,
@@ -192,6 +224,7 @@ var zitadelNextGen_exports = /* @__PURE__ */ __exportAll({
 	getRevokeTokenUrl: () => getRevokeTokenUrl,
 	getSchemaById: () => getSchemaById,
 	getSession: () => getSession,
+	getSetUserPasswordUrl: () => getSetUserPasswordUrl,
 	getSubmitFlowEventUrl: () => getSubmitFlowEventUrl,
 	getSubmitFlowStepUrl: () => getSubmitFlowStepUrl,
 	getTeam: () => getTeam,
@@ -208,6 +241,7 @@ var zitadelNextGen_exports = /* @__PURE__ */ __exportAll({
 	revokeMySession: () => revokeMySession,
 	revokeSession: () => revokeSession,
 	revokeToken: () => revokeToken,
+	setUserPassword: () => setUserPassword,
 	submitFlowEvent: () => submitFlowEvent,
 	submitFlowStep: () => submitFlowStep,
 	updateFlowDefinition: () => updateFlowDefinition,
@@ -412,7 +446,7 @@ const getCreateUserUrl = (params) => {
 		if (value !== void 0) normalizedParams.append(key, value === null ? "null" : value.toString());
 	});
 	const stringifiedParams = normalizedParams.toString();
-	return stringifiedParams.length > 0 ? `${getProxyPath()}/user?${stringifiedParams}` : `${getProxyPath()}/user`;
+	return stringifiedParams.length > 0 ? `${getProxyPath()}/users?${stringifiedParams}` : `${getProxyPath()}/users`;
 };
 /**
 * @summary Create user
@@ -434,7 +468,7 @@ const getListUsersUrl = (params) => {
 		if (value !== void 0) normalizedParams.append(key, value === null ? "null" : value.toString());
 	});
 	const stringifiedParams = normalizedParams.toString();
-	return stringifiedParams.length > 0 ? `${getProxyPath()}/user?${stringifiedParams}` : `${getProxyPath()}/user`;
+	return stringifiedParams.length > 0 ? `${getProxyPath()}/users?${stringifiedParams}` : `${getProxyPath()}/users`;
 };
 /**
 * @summary List users
@@ -451,7 +485,7 @@ const getGetUserByIDUrl = (userId, params) => {
 		if (value !== void 0) normalizedParams.append(key, value === null ? "null" : value.toString());
 	});
 	const stringifiedParams = normalizedParams.toString();
-	return stringifiedParams.length > 0 ? `${getProxyPath()}/user/${userId}?${stringifiedParams}` : `${getProxyPath()}/user/${userId}`;
+	return stringifiedParams.length > 0 ? `${getProxyPath()}/users/${userId}?${stringifiedParams}` : `${getProxyPath()}/users/${userId}`;
 };
 /**
 * @summary Get user by ID
@@ -462,6 +496,40 @@ const getUserByID = async (userId, params, options) => {
 		method: "GET"
 	});
 };
+const getSetUserPasswordUrl = (userId, params) => {
+	const normalizedParams = new URLSearchParams();
+	Object.entries(params || {}).forEach(([key, value]) => {
+		if (value !== void 0) normalizedParams.append(key, value === null ? "null" : value.toString());
+	});
+	const stringifiedParams = normalizedParams.toString();
+	return stringifiedParams.length > 0 ? `${getProxyPath()}/users/${userId}/password?${stringifiedParams}` : `${getProxyPath()}/users/${userId}/password`;
+};
+/**
+* @summary Set user password
+*/
+const setUserPassword = async (userId, setUserPasswordBody, params, options) => {
+	return customFetch(getSetUserPasswordUrl(userId, params), {
+		...options,
+		method: "PUT",
+		headers: {
+			"Content-Type": "application/json",
+			...options?.headers
+		},
+		body: JSON.stringify(setUserPasswordBody)
+	});
+};
+const getGetMyUserUrl = () => {
+	return `${getProxyPath()}/users/me`;
+};
+/**
+* @summary Get my user information
+*/
+const getMyUser = async (options) => {
+	return customFetch(getGetMyUserUrl(), {
+		...options,
+		method: "GET"
+	});
+};
 const getCreateFlowUrl = () => {
 	return `${getProxyPath()}/flow`;
 };
@@ -986,28 +1054,38 @@ const listFlowDefinitions = async (params, options) => {
 		method: "GET"
 	});
 };
-const getGetFlowDefinitionUrl = (id) => {
-	return `${getProxyPath()}/flow_definitions/${id}`;
+const getGetFlowDefinitionUrl = (id, params) => {
+	const normalizedParams = new URLSearchParams();
+	Object.entries(params || {}).forEach(([key, value]) => {
+		if (value !== void 0) normalizedParams.append(key, value === null ? "null" : value.toString());
+	});
+	const stringifiedParams = normalizedParams.toString();
+	return stringifiedParams.length > 0 ? `${getProxyPath()}/flow_definitions/${id}?${stringifiedParams}` : `${getProxyPath()}/flow_definitions/${id}`;
 };
 /**
 * Get a flow definition by id
 * @summary Get a flow definition by id
 */
-const getFlowDefinition = async (id, options) => {
-	return customFetch(getGetFlowDefinitionUrl(id), {
+const getFlowDefinition = async (id, params, options) => {
+	return customFetch(getGetFlowDefinitionUrl(id, params), {
 		...options,
 		method: "GET"
 	});
 };
-const getUpdateFlowDefinitionUrl = (id) => {
-	return `${getProxyPath()}/flow_definitions/${id}`;
+const getUpdateFlowDefinitionUrl = (id, params) => {
+	const normalizedParams = new URLSearchParams();
+	Object.entries(params || {}).forEach(([key, value]) => {
+		if (value !== void 0) normalizedParams.append(key, value === null ? "null" : value.toString());
+	});
+	const stringifiedParams = normalizedParams.toString();
+	return stringifiedParams.length > 0 ? `${getProxyPath()}/flow_definitions/${id}?${stringifiedParams}` : `${getProxyPath()}/flow_definitions/${id}`;
 };
 /**
 * Update a flow definition by id
 * @summary Update a flow definition by id
 */
-const updateFlowDefinition = async (id, updateFlowDefinitionBody, options) => {
-	return customFetch(getUpdateFlowDefinitionUrl(id), {
+const updateFlowDefinition = async (id, updateFlowDefinitionBody, params, options) => {
+	return customFetch(getUpdateFlowDefinitionUrl(id, params), {
 		...options,
 		method: "PATCH",
 		headers: {
@@ -1017,15 +1095,20 @@ const updateFlowDefinition = async (id, updateFlowDefinitionBody, options) => {
 		body: JSON.stringify(updateFlowDefinitionBody)
 	});
 };
-const getDeleteFlowDefinitionUrl = (id) => {
-	return `${getProxyPath()}/flow_definitions/${id}`;
+const getDeleteFlowDefinitionUrl = (id, params) => {
+	const normalizedParams = new URLSearchParams();
+	Object.entries(params || {}).forEach(([key, value]) => {
+		if (value !== void 0) normalizedParams.append(key, value === null ? "null" : value.toString());
+	});
+	const stringifiedParams = normalizedParams.toString();
+	return stringifiedParams.length > 0 ? `${getProxyPath()}/flow_definitions/${id}?${stringifiedParams}` : `${getProxyPath()}/flow_definitions/${id}`;
 };
 /**
 * Delete a flow definition by id
 * @summary Delete a flow definition by id
 */
-const deleteFlowDefinition = async (id, options) => {
-	return customFetch(getDeleteFlowDefinitionUrl(id), {
+const deleteFlowDefinition = async (id, params, options) => {
+	return customFetch(getDeleteFlowDefinitionUrl(id, params), {
 		...options,
 		method: "DELETE"
 	});
@@ -1123,10 +1206,29 @@ function createApi(apiBase) {
 }
 //#endregion
 //#region ../api/dist/runtime/config.mjs
-let currentProject = null;
+/**
+* Slot for the configured project, stored on `globalThis` under a
+* {@link Symbol.for} key. Every copy of this module evaluated in the
+* same JS realm resolves the symbol through the global symbol registry
+* to the same identity, so they all read and write a single slot —
+* needed because the standalone components bundle inlines its own copy
+* of this file, and dual-package hazards / monorepo duplicates can load
+* a second copy alongside the app's. With a module-local `let` each
+* instance kept its own singleton and `configureZitadel()` calls in one
+* were invisible to `getZitadelConfig()` calls in another. Sharing is
+* realm-scoped — separate realms (iframes, Node `vm` contexts, worker
+* threads) have their own registries and are not unified by this.
+*/
+const PROJECT_SLOT = Symbol.for("@zitadel/api/config:currentProject");
+function readSlot() {
+	return globalThis[PROJECT_SLOT] ?? null;
+}
 /**
 * Per-project API client cache. Ensures `getApi(project)` returns the
 * same instance for the same project handle — no re-wrapping on every call.
+* Module-local on purpose: keyed by the shared frozen `ZitadelProject`
+* object identity, so cross-instance reads still resolve through the
+* same key and at worst memoize once per module instance.
 */
 const apiCache = /* @__PURE__ */ new WeakMap();
 /**
@@ -1151,37 +1253,82 @@ function getApi(project) {
 * has not been called yet.
 */
 function getZitadelConfig() {
-	return currentProject;
+	return readSlot();
 }
 //#endregion
-//#region src/orchestrator/api-client.ts
-const apiRequestInit = { credentials: "include" };
-async function startFlow(api, input) {
-	return api.createFlow(input, apiRequestInit);
-}
-async function submitStep(api, id, body) {
-	try {
-		return await api.submitFlowStep(id, body, apiRequestInit);
-	} catch (error) {
-		if (error instanceof ApiError && error.status === 400 && isFlowResponse(error.body)) return error.body;
-		throw error;
+//#region src/orchestrator/resolve-api.ts
+/** Matches the `configureZitadel()` default so attribute and JS config agree. */
+const DEFAULT_PROXY_PATH = "/__nextgen";
+/**
+* Cache of project handles synthesized from attributes, keyed by their value
+* tuple. `getApi()` caches its client in a `WeakMap` keyed by the project's
+* identity, so the same attribute values must yield the *same* frozen object
+* across the several `resolveApi()` calls a single flow makes — otherwise
+* every call misses the cache and re-wraps a fresh client. A real page uses a
+* handful of distinct configs at most; the FIFO bound below is just a guard so
+* a pathological page that churns through unique configs can't leak memory.
+*/
+const MAX_SYNTHETIC_PROJECTS = 32;
+const syntheticProjects = /* @__PURE__ */ new Map();
+/**
+* Builds a `ZitadelProject` from declarative attributes, or `undefined` when
+* no `project-id` was given (nothing to configure). Mirrors
+* `configureZitadel()`'s proxy-path defaulting so the two config paths are
+* interchangeable.
+*/
+function projectFromAttrs({ projectId, proxyPath, url }) {
+	if (!projectId) return void 0;
+	const resolvedProxyPath = proxyPath || DEFAULT_PROXY_PATH;
+	const resolvedUrl = url || void 0;
+	const key = JSON.stringify([
+		projectId,
+		resolvedProxyPath,
+		resolvedUrl ?? ""
+	]);
+	let project = syntheticProjects.get(key);
+	if (!project) {
+		project = Object.freeze({
+			projectId,
+			proxyPath: resolvedProxyPath,
+			url: resolvedUrl
+		});
+		if (syntheticProjects.size >= MAX_SYNTHETIC_PROJECTS) {
+			const oldest = syntheticProjects.keys().next().value;
+			if (oldest !== void 0) syntheticProjects.delete(oldest);
+		}
+		syntheticProjects.set(key, project);
 	}
-}
-function isFlowResponse(body) {
-	return typeof body === "object" && body !== null && "step" in body;
-}
-async function getCurrentStep(api, id) {
-	return api.getFlowStep(id, apiRequestInit);
+	return project;
 }
 /**
-* Exchange a terminal-flow `handoff_token` for an authenticated session.
-* The server sets the `__nextgen_session` HttpOnly cookie on success.
+* Resolves the effective SDK project handle and its typed API client for an
+* orchestrator element. Precedence, highest first:
 *
-* Uses the generated `exchangeHandoff` client which handles the
-* `project_id` query parameter via {@link ExchangeHandoffParams}.
+* 1. the element's `project` property (an SDK handle set from JS / a framework),
+* 2. the global handle from `configureZitadel()`,
+* 3. the `project-id` / `proxy-path` / `url` attributes set declaratively in HTML.
+*
+* Both JS paths (property and global) win over the declarative attributes, so a
+* deliberate `configureZitadel()` is never silently overridden by fallback or
+* stale HTML attributes; the attributes are the no-JS fallback.
+*
+* Both `<zitadel-login>` and `<zitadel-logout>` need the same resolution and
+* the same "no config" failure, so it lives here rather than being copied
+* into each element. Callers run this inside their try/catch so a missing
+* configuration surfaces through the element's normal error path rather than
+* as an unhandled rejection.
+*
+* @param project Optional per-element override handle.
+* @param attrs Declarative config read from the element's attributes.
+* @param element Tag name used in the thrown error (e.g. `<zitadel-login>`).
 */
-async function exchangeSession(api, body, params) {
-	return api.exchangeHandoff(body, params, apiRequestInit);
+function resolveApi(project, attrs, element) {
+	const cfg = project ?? getZitadelConfig() ?? projectFromAttrs(attrs);
+	if (!cfg) throw new Error(`${element} requires a configured project: set the \`project-id\` attribute, set the \`project\` property, or call configureZitadel().`);
+	return {
+		project: cfg,
+		api: getApi(cfg)
+	};
 }
 //#endregion
 //#region src/orchestrator/branding-to-tokens.ts
@@ -1451,6 +1598,19 @@ function applyFontUrl(shadowRoot, fontUrl) {
 	shadowRoot.prepend(link);
 }
 //#endregion
+//#region src/internal/escape-html.ts
+/**
+* Escapes the five HTML-significant characters so a string is safe to
+* interpolate into either element text or a double-quoted attribute value.
+*
+* Used for the orchestrator-owned attribution markup, which is appended after
+* the Liquid output has already been sanitised — so it can't rely on the
+* DOMPurify pass and must escape its own (tenant-supplied) values.
+*/
+function escapeHtml(value) {
+	return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+//#endregion
 //#region src/orchestrator/mandatory-gates.ts
 const MANDATORY_GATES_MARKER = "ZL_MANDATORY_GATES";
 const mandatoryGatesMarkerComment = `<!--${MANDATORY_GATES_MARKER}-->`;
@@ -1718,6 +1878,9 @@ const en = {
 	"register.field.email.placeholder": "you@company.com",
 	"register.field.password": "Password",
 	"register.field.password.help": "At least 8 characters, including a symbol and number.",
+	"register.field.givenName": "Given name",
+	"register.field.familyName": "Family name",
+	"register.field.dateOfBirth": "Date of birth",
 	"register.action.password": "Continue with password",
 	"register.action.passkey": "Register with a passkey",
 	"register.action.submit": "Sign up",
@@ -2175,6 +2338,27 @@ let ZitadelLogin = class ZitadelLogin extends LitElement {
 	set project(value) {
 		this.#_project_accessor_storage = value;
 	}
+	#_projectId_accessor_storage = "";
+	get projectId() {
+		return this.#_projectId_accessor_storage;
+	}
+	set projectId(value) {
+		this.#_projectId_accessor_storage = value;
+	}
+	#_proxyPath_accessor_storage = "";
+	get proxyPath() {
+		return this.#_proxyPath_accessor_storage;
+	}
+	set proxyPath(value) {
+		this.#_proxyPath_accessor_storage = value;
+	}
+	#_url_accessor_storage = "";
+	get url() {
+		return this.#_url_accessor_storage;
+	}
+	set url(value) {
+		this.#_url_accessor_storage = value;
+	}
 	#_postSignInUrl_accessor_storage = "";
 	get postSignInUrl() {
 		return this.#_postSignInUrl_accessor_storage;
@@ -2307,10 +2491,21 @@ let ZitadelLogin = class ZitadelLogin extends LitElement {
 	}
 	updated(changed) {
 		if (!changed.has("response")) return;
-		requestAnimationFrame(() => {
-			this.applyValuesToFields();
-			this.moveFocusToFirstField();
-		});
+		this.hydrateStepAfterRender();
+	}
+	/**
+	* Apply captured values and move focus once the new step has fully
+	* rendered. This commit produces the step's `zl-field`/`zl-button` atoms,
+	* but those render their own shadow DOM on a later microtask — so await
+	* this element's update *and* the child atoms' first render before touching
+	* them, rather than guessing a frame with `requestAnimationFrame`.
+	*/
+	async hydrateStepAfterRender() {
+		await this.updateComplete;
+		const atoms = this.shadowRoot?.querySelectorAll("zl-field, zl-button");
+		if (atoms) await Promise.all(Array.from(atoms).map((atom) => atom.updateComplete));
+		this.applyValuesToFields();
+		this.moveFocusToFirstField();
 	}
 	render() {
 		if (this.startupError) return html`<form class="zl-mount" novalidate>
@@ -2334,6 +2529,10 @@ let ZitadelLogin = class ZitadelLogin extends LitElement {
 	* Figma sign-in frame where the pill sits 24px below the card, both
 	* centred on the page). It can't be a sibling of the page-shell because
 	* the page-shell already occupies the full viewport height.
+	*
+	* This markup is appended AFTER `renderStep` has sanitised the Liquid
+	* output, so it is not run through DOMPurify. It is orchestrator-owned and
+	* any tenant-supplied values (`custom_link`) are escaped via `escapeHtml`.
 	*/
 	injectAttribution(rendered) {
 		const html = this.renderAttributionHtml();
@@ -2353,23 +2552,28 @@ let ZitadelLogin = class ZitadelLogin extends LitElement {
 		const show = attribution?.show_zitadel !== false;
 		const custom = attribution?.custom_link;
 		if (!show && !custom) return "";
-		if (custom) return `<div slot="footer" part="attribution" class="zl-attribution"><zl-pill tone="neutral" href="${String(custom.href).replace(/"/g, "&quot;")}">${String(custom.label).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;")}</zl-pill></div>`;
+		if (custom) return `<div slot="footer" part="attribution" class="zl-attribution"><zl-pill tone="neutral" href="${escapeHtml(String(custom.href))}">${escapeHtml(String(custom.label))}</zl-pill></div>`;
 		return `<div slot="footer" part="attribution" class="zl-attribution"><zl-pill tone="neutral" href="https://zitadel.com" part="attribution-pill" aria-label="Secured with Zitadel">${zitadelAttributionPillInnerHtml()}</zl-pill></div>`;
 	}
+	/** Declarative config read from this element's attributes. */
+	get projectAttrs() {
+		return {
+			projectId: this.projectId,
+			proxyPath: this.proxyPath,
+			url: this.url
+		};
+	}
 	async startFlow() {
-		const cfg = this.project ?? getZitadelConfig();
-		const projectId = cfg?.projectId || "";
-		if (!cfg) throw new Error("<zitadel-login> requires a `config` prop (from configureZitadel()) or configureZitadel() must be called before use.");
-		const api = getApi(cfg);
 		this.loading = true;
 		this.startupError = null;
 		try {
+			const { project: cfg, api } = resolveApi(this.project, this.projectAttrs, "<zitadel-login>");
 			let wire;
 			if (this.resumeFlowId) wire = await getCurrentStep(api, this.resumeFlowId);
 			else {
-				if (!projectId) throw new Error("<zitadel-login> requires a `project-id` attribute (or configureZitadel()) to start a flow.");
+				if (!cfg.projectId) throw new Error("<zitadel-login> requires a project id (the `project-id` attribute, `configureZitadel({ projectId })`, or a `project` handle) to start a flow.");
 				wire = await startFlow(api, {
-					project_id: projectId,
+					project_id: cfg.projectId,
 					purpose: this.purpose
 				});
 			}
@@ -2407,16 +2611,12 @@ let ZitadelLogin = class ZitadelLogin extends LitElement {
 	async maybeCompleteFlow(response) {
 		const behavior = response.step.complete;
 		if (!behavior) return;
-		this.dispatchEvent(new CustomEvent("zitadel-flow-complete", {
-			bubbles: true,
-			composed: true,
-			detail: {
-				behavior,
-				redirect_uri: response.redirect_uri,
-				handoff_token: response.handoff_token,
-				handoff_token_expires_at: response.handoff_token_expires_at
-			}
-		}));
+		emit(this, "zitadel-flow-complete", {
+			behavior,
+			redirect_uri: response.redirect_uri,
+			handoff_token: response.handoff_token,
+			handoff_token_expires_at: response.handoff_token_expires_at
+		});
 		if (typeof window === "undefined") return;
 		if (behavior === "redirect" && response.redirect_uri) {
 			window.location.assign(response.redirect_uri);
@@ -2426,9 +2626,8 @@ let ZitadelLogin = class ZitadelLogin extends LitElement {
 		if (behavior === "show" && handoffToken && this.postSignInUrl) {
 			this.loading = true;
 			try {
-				const cfg = this.project ?? getZitadelConfig();
-				if (!cfg) throw new Error("<zitadel-login> config is required for exchange.");
-				await exchangeSession(getApi(cfg), { handoff_token: handoffToken }, { project_id: cfg.projectId });
+				const { project: cfg, api } = resolveApi(this.project, this.projectAttrs, "<zitadel-login>");
+				await exchangeSession(api, { handoff_token: handoffToken }, { project_id: cfg.projectId });
 				window.location.assign(this.postSignInUrl);
 			} catch (error) {
 				this.handleTransportError(error);
@@ -2514,14 +2713,10 @@ let ZitadelLogin = class ZitadelLogin extends LitElement {
 			...this.formValues,
 			[name]: value
 		};
-		this.dispatchEvent(new CustomEvent("zitadel-flow-input", {
-			bubbles: true,
-			composed: true,
-			detail: {
-				name,
-				value
-			}
-		}));
+		emit(this, "zitadel-flow-input", {
+			name,
+			value
+		});
 	};
 	handleAtomSubmit = (event) => {
 		if (this.loading) return;
@@ -2592,10 +2787,8 @@ let ZitadelLogin = class ZitadelLogin extends LitElement {
 	moveFocusToFirstField() {
 		const root = this.shadowRoot;
 		if (!root) return;
-		requestAnimationFrame(() => {
-			const focusables = root.querySelectorAll("zl-field, zl-button");
-			Array.from(focusables).find((el) => !el.hasAttribute("disabled"))?.focus();
-		});
+		const focusables = root.querySelectorAll("zl-field, zl-button");
+		Array.from(focusables).find((el) => !el.hasAttribute("disabled"))?.focus();
 	}
 	async submit(action, challengeResponse) {
 		if (!this.response || this.loading) return;
@@ -2614,15 +2807,10 @@ let ZitadelLogin = class ZitadelLogin extends LitElement {
 				fields,
 				...challengeResponse ? { challenge_response: challengeResponse } : {}
 			};
-			const cfg = this.project ?? getZitadelConfig();
-			if (!cfg) throw new Error("<zitadel-login> config is required for submit.");
-			const wire = await submitStep(getApi(cfg), id, body);
+			const { api } = resolveApi(this.project, this.projectAttrs, "<zitadel-login>");
+			const wire = await submitStep(api, id, body);
 			this.applyResponse(wire);
-			this.dispatchEvent(new CustomEvent("zitadel-flow-step", {
-				bubbles: true,
-				composed: true,
-				detail: { step: wire.step }
-			}));
+			emit(this, "zitadel-flow-step", { step: wire.step });
 		} catch (error) {
 			this.handleTransportError(error);
 		} finally {
@@ -2633,15 +2821,20 @@ let ZitadelLogin = class ZitadelLogin extends LitElement {
 		const message = error instanceof Error ? error.message : "Unexpected error contacting the Flow API.";
 		this.startupError = message;
 		console.error("[zitadel-login]", error);
-		this.dispatchEvent(new CustomEvent("zitadel-flow-error", {
-			bubbles: true,
-			composed: true,
-			detail: { message }
-		}));
+		emit(this, "zitadel-flow-error", { message });
 	}
 };
 __decorate([property({ type: String })], ZitadelLogin.prototype, "purpose", null);
 __decorate([property({ attribute: false })], ZitadelLogin.prototype, "project", null);
+__decorate([property({
+	type: String,
+	attribute: "project-id"
+})], ZitadelLogin.prototype, "projectId", null);
+__decorate([property({
+	type: String,
+	attribute: "proxy-path"
+})], ZitadelLogin.prototype, "proxyPath", null);
+__decorate([property({ type: String })], ZitadelLogin.prototype, "url", null);
 __decorate([property({
 	type: String,
 	attribute: "post-sign-in-url"
@@ -2812,6 +3005,27 @@ let ZitadelLogout = class ZitadelLogout extends LitElement {
 	set project(value) {
 		this.#_project_accessor_storage = value;
 	}
+	#_projectId_accessor_storage = "";
+	get projectId() {
+		return this.#_projectId_accessor_storage;
+	}
+	set projectId(value) {
+		this.#_projectId_accessor_storage = value;
+	}
+	#_proxyPath_accessor_storage = "";
+	get proxyPath() {
+		return this.#_proxyPath_accessor_storage;
+	}
+	set proxyPath(value) {
+		this.#_proxyPath_accessor_storage = value;
+	}
+	#_url_accessor_storage = "";
+	get url() {
+		return this.#_url_accessor_storage;
+	}
+	set url(value) {
+		this.#_url_accessor_storage = value;
+	}
 	#_postSignOutUrl_accessor_storage = "";
 	get postSignOutUrl() {
 		return this.#_postSignOutUrl_accessor_storage;
@@ -2943,13 +3157,20 @@ let ZitadelLogout = class ZitadelLogout extends LitElement {
 	* clears the cookie via `Set-Cookie: Max-Age=0`. On success this element fires
 	* `zitadel-signout` and optionally navigates to `postSignOutUrl`.
 	*/
+	/** Declarative config read from this element's attributes. */
+	get projectAttrs() {
+		return {
+			projectId: this.projectId,
+			proxyPath: this.proxyPath,
+			url: this.url
+		};
+	}
 	async doLogout() {
 		this.loading = true;
 		this.errorMessage = "";
 		try {
-			const cfg = this.project ?? getZitadelConfig();
-			if (!cfg) throw new Error("<zitadel-logout> requires a `config` prop (from configureZitadel()).");
-			await getApi(cfg).revokeMySession({ credentials: "include" });
+			const { api } = resolveApi(this.project, this.projectAttrs, "<zitadel-logout>");
+			await api.revokeMySession({ credentials: "include" });
 		} catch (error) {
 			const message = error instanceof Error ? error.message : "";
 			this.errorMessage = message || "Sign-out failed. Please try again.";
@@ -2958,15 +3179,10 @@ let ZitadelLogout = class ZitadelLogout extends LitElement {
 		}
 		this.open = false;
 		this.loading = false;
-		const detail = {
+		emit(this, "zitadel-signout", {
 			name: this.displayName,
 			email: this.displayEmail
-		};
-		this.dispatchEvent(new CustomEvent("zitadel-signout", {
-			bubbles: true,
-			composed: true,
-			detail
-		}));
+		});
 		if (this.postSignOutUrl && typeof window !== "undefined") window.location.href = this.postSignOutUrl;
 	}
 	/**
@@ -2980,9 +3196,8 @@ let ZitadelLogout = class ZitadelLogout extends LitElement {
 			...this.clientId ? { client_id: this.clientId } : {},
 			...this.postSignOutUrl ? { post_logout_redirect_uri: this.postSignOutUrl } : {}
 		};
-		const cfg = this.project ?? getZitadelConfig();
-		if (!cfg) throw new Error("<zitadel-logout> requires a `config` prop (from configureZitadel()).");
-		return getApi(cfg).getEndSessionUrl(params);
+		const { api } = resolveApi(this.project, this.projectAttrs, "<zitadel-logout>");
+		return api.getEndSessionUrl(params);
 	}
 	handleSignOutClick(event) {
 		event.preventDefault();
@@ -3047,6 +3262,15 @@ let ZitadelLogout = class ZitadelLogout extends LitElement {
 	}
 };
 __decorate([property({ attribute: false })], ZitadelLogout.prototype, "project", null);
+__decorate([property({
+	type: String,
+	attribute: "project-id"
+})], ZitadelLogout.prototype, "projectId", null);
+__decorate([property({
+	type: String,
+	attribute: "proxy-path"
+})], ZitadelLogout.prototype, "proxyPath", null);
+__decorate([property({ type: String })], ZitadelLogout.prototype, "url", null);
 __decorate([property({
 	type: String,
 	attribute: "post-sign-out-url"
@@ -3077,4 +3301,4 @@ function fillTemplateTokens(fragment, name, email, initial) {
 //#endregion
 export { buildBrandingStylesheet as _, createSanitiser as a, startFlow as b, de as c, MANDATORY_GATES_MARKER as d, mandatoryGatesMarkerComment as f, applyBrandingTokens as g, validateBranding as h, layout_chrome_default as i, en as l, applyFontUrl as m, ZitadelLogin as n, builtinLocales as o, patchMandatoryGates as p, ThemeController as r, it as s, ZitadelLogout as t, TEMPLATE_NAMES as u, resolveTheme as v, submitStep as x, getCurrentStep as y };
 
-//# sourceMappingURL=orchestrator-B8eXcPRi.mjs.map
+//# sourceMappingURL=orchestrator-Dds72XrU.mjs.map