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

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

@@ -1,21 +1,12 @@
-import { _ as __decorate, b as t, v as focusVisibleStyles, y as baseHostStyles } from "./atoms-B9yd0c-i.mjs";
-import { r as tokensCss } from "./tokens-TXmurodq.mjs";
-import { t as default_default } from "./default-DP74t2io.mjs";
+import { _ as __decorate, b as t, v as focusVisibleStyles, x as emit, y as baseHostStyles } from "./atoms-BaayzEsr.mjs";
+import { r as tokensCss } from "./tokens-BQ_augxi.mjs";
+import { t as default_default } from "./default-Cpl78hQN.mjs";
 import { manifestRegistry } from "./manifests.mjs";
 import { LitElement, css, html, nothing } from "lit";
 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
@@ -1425,30 +1572,48 @@ function sanitiseUrl(value, field, issues) {
 //#endregion
 //#region src/orchestrator/font-loader.ts
 /**
-* Inject `branding.font_url` as `<link rel="stylesheet">` inside the
-* `<zitadel-login>` Shadow DOM. Per `docs/design/branding/templates.md`:
+* Inject `branding.font_url` as `<link rel="stylesheet">` into the host
+* document's `<head>`. Per `docs/design/branding/templates.md`:
 *
 *   "The `font_url` stylesheet is injected by the orchestrator; the template
 *    does not emit the `<link>` tag itself."
 *
+* The link must live at document level, not inside the shadow root:
+* browsers ignore `@font-face` rules declared in shadow-tree stylesheets,
+* so a shadow-scoped link would never register the font faces and every
+* branded font silently falls back to the system stack. `font-family`
+* references inside the shadow tree resolve against document-level faces.
+*
 * Idempotent: calling with the same URL is a no-op; calling with a new URL
 * replaces the previous link. Calling with `null`/`undefined` removes any
 * previously injected link.
 */
 const LINK_ID = "zl-font-link";
 function applyFontUrl(shadowRoot, fontUrl) {
-	const existing = shadowRoot.getElementById?.(LINK_ID);
+	const ownerDocument = shadowRoot.ownerDocument ?? document;
+	const existing = ownerDocument.head.querySelector(`link#${LINK_ID}`);
 	if (!fontUrl) {
 		existing?.remove();
 		return;
 	}
-	if (existing && existing.href === fontUrl) return;
-	existing?.remove();
-	const link = (shadowRoot.ownerDocument ?? document).createElement("link");
+	const link = existing ?? ownerDocument.createElement("link");
 	link.id = LINK_ID;
 	link.rel = "stylesheet";
-	link.href = fontUrl;
-	shadowRoot.prepend(link);
+	if (link.href !== fontUrl) link.href = fontUrl;
+	if (!existing) ownerDocument.head.appendChild(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
@@ -1468,17 +1633,14 @@ function patchMandatoryGates(html, step, locale) {
 }
 function collectMissingAtoms(fragment, step, locale) {
 	const additions = [];
-	if (step.fields) for (const [name, field] of Object.entries(step.fields)) {
+	if (step.fields) for (const field of step.fields) {
 		if (!field.required) continue;
-		if (hasFieldFor(fragment, name)) continue;
-		additions.push(buildField(name, field.text_key, field.type, locale, field.required));
+		if (hasFieldFor(fragment, field.name)) continue;
+		additions.push(buildField(field.name, field.text_key, field.type, locale, field.required));
 	}
 	if (step.actions && !hasPrimaryButton(fragment)) {
-		const primary = Object.entries(step.actions).find(([, action]) => action.primary);
-		if (primary) {
-			const [name, action] = primary;
-			additions.push(buildSubmit(name, action.text_key, locale));
-		}
+		const primary = step.actions.find((action) => action.primary);
+		if (primary) additions.push(buildSubmit(primary.name, primary.text_key, locale));
 	}
 	return additions;
 }
@@ -1663,8 +1825,9 @@ const en = {
 	"identifier.description": "Enter your email to continue",
 	"identifier.field.email": "Work email",
 	"identifier.field.email.placeholder": "you@company.com",
-	"identifier.action.submit": "Continue",
-	"identifier.action.continue": "Continue",
+	"identifier.field.password": "Password",
+	"identifier.action.submit": "Sign in",
+	"identifier.action.continue": "Sign in",
 	"identifier.action.passkey": "Sign in with a passkey",
 	"identifier.action.register.lead": "Don't have an account? ",
 	"identifier.action.register.link": "Sign up",
@@ -1713,13 +1876,18 @@ const en = {
 	"password.action.register.lead": "Don't have an account? ",
 	"password.action.register.link": "Sign up",
 	"register.title": "Create your account",
-	"register.description": "Enter your email to get started",
+	"register.description": "",
 	"register.field.email": "Work email",
 	"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.field.dateOfBirth.placeholder": "YYYY-MM-DD",
+	"register.field.dateOfBirth.help": "Use YYYY-MM-DD.",
 	"register.action.password": "Continue with password",
-	"register.action.passkey": "Register with a passkey",
+	"register.action.passkey": "Continue with a passkey",
 	"register.action.submit": "Sign up",
 	"register.action.sign_in.lead": "Already have an account? ",
 	"register.action.sign_in.link": "Sign in",
@@ -1758,8 +1926,9 @@ const de = {
 	"identifier.description": "Gib deine E-Mail-Adresse ein, um fortzufahren",
 	"identifier.field.email": "E-Mail",
 	"identifier.field.email.placeholder": "du@unternehmen.com",
-	"identifier.action.submit": "Weiter",
-	"identifier.action.continue": "Weiter",
+	"identifier.field.password": "Passwort",
+	"identifier.action.submit": "Anmelden",
+	"identifier.action.continue": "Anmelden",
 	"identifier.action.passkey": "Mit Passkey anmelden",
 	"identifier.action.register.lead": "Noch kein Konto? ",
 	"identifier.action.register.link": "Registrieren",
@@ -1808,13 +1977,18 @@ const de = {
 	"password.action.register.lead": "Noch kein Konto? ",
 	"password.action.register.link": "Registrieren",
 	"register.title": "Konto erstellen",
-	"register.description": "Gib deine E-Mail-Adresse ein, um loszulegen",
+	"register.description": "",
 	"register.field.email": "E-Mail",
 	"register.field.email.placeholder": "du@unternehmen.com",
 	"register.field.password": "Passwort",
 	"register.field.password.help": "Mindestens 8 Zeichen, einschließlich eines Sonderzeichens und einer Zahl.",
+	"register.field.givenName": "Vorname",
+	"register.field.familyName": "Nachname",
+	"register.field.dateOfBirth": "Geburtsdatum",
+	"register.field.dateOfBirth.placeholder": "JJJJ-MM-TT",
+	"register.field.dateOfBirth.help": "Verwende JJJJ-MM-TT.",
 	"register.action.password": "Mit Passwort fortfahren",
-	"register.action.passkey": "Mit Passkey registrieren",
+	"register.action.passkey": "Weiter mit Passkey",
 	"register.action.submit": "Registrieren",
 	"register.action.sign_in.lead": "Bereits ein Konto? ",
 	"register.action.sign_in.link": "Anmelden",
@@ -1852,8 +2026,9 @@ const it = {
 	"identifier.description": "Inserisci la tua e-mail per continuare",
 	"identifier.field.email": "E-mail aziendale",
 	"identifier.field.email.placeholder": "tu@azienda.com",
-	"identifier.action.submit": "Continua",
-	"identifier.action.continue": "Continua",
+	"identifier.field.password": "Password",
+	"identifier.action.submit": "Accedi",
+	"identifier.action.continue": "Accedi",
 	"identifier.action.passkey": "Accedi con passkey",
 	"identifier.action.register.lead": "Non hai un account? ",
 	"identifier.action.register.link": "Registrati",
@@ -1902,13 +2077,18 @@ const it = {
 	"password.action.register.lead": "Non hai un account? ",
 	"password.action.register.link": "Registrati",
 	"register.title": "Crea il tuo account",
-	"register.description": "Inserisci la tua e-mail per iniziare",
+	"register.description": "",
 	"register.field.email": "E-mail aziendale",
 	"register.field.email.placeholder": "tu@azienda.com",
 	"register.field.password": "Password",
 	"register.field.password.help": "Almeno 8 caratteri, incluso un simbolo e un numero.",
+	"register.field.givenName": "Nome",
+	"register.field.familyName": "Cognome",
+	"register.field.dateOfBirth": "Data di nascita",
+	"register.field.dateOfBirth.placeholder": "AAAA-MM-GG",
+	"register.field.dateOfBirth.help": "Usa AAAA-MM-GG.",
 	"register.action.password": "Continua con password",
-	"register.action.passkey": "Registrati con passkey",
+	"register.action.passkey": "Continua con passkey",
 	"register.action.submit": "Registrati",
 	"register.action.sign_in.lead": "Hai già un account? ",
 	"register.action.sign_in.link": "Accedi",
@@ -2035,6 +2215,7 @@ const COMMON_ATTRS = [
 	"style",
 	"name",
 	"for",
+	"data-testid",
 	"data-theme",
 	"hidden"
 ];
@@ -2175,6 +2356,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 +2509,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 +2547,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 +2570,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 +2629,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 +2644,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);
@@ -2440,14 +2657,16 @@ let ZitadelLogin = class ZitadelLogin extends LitElement {
 	renderStep(step, engine) {
 		const tenantSource = typeof this.branding?.liquid_template === "string" && this.branding.liquid_template.length > 0 ? this.branding.liquid_template : null;
 		const errors = step.error ? step.error.startsWith("error.") ? [{ text_key: step.error }] : [{ message: step.error }] : [];
+		const fields = step.fields ?? [];
+		const actions = step.actions ?? [];
 		const context = {
 			step: {
 				name: step.name,
 				complete: step.complete,
 				texts: step.texts ?? {}
 			},
-			fields: step.fields ?? {},
-			actions: step.actions ?? {},
+			fields,
+			actions,
 			gates: step.gates ?? {},
 			sso_providers: step.sso_providers ?? [],
 			challenge: step.challenge ?? null,
@@ -2506,6 +2725,31 @@ let ZitadelLogin = class ZitadelLogin extends LitElement {
 			if (field.value !== next) field.value = next;
 		}
 	}
+	captureValuesFromFields() {
+		const root = this.shadowRoot;
+		if (!root) return this.formValues;
+		const fields = root.querySelectorAll("zl-field");
+		if (fields.length === 0) return this.formValues;
+		const next = { ...this.formValues };
+		let changed = false;
+		for (const field of fields) {
+			const name = field.getAttribute("name");
+			const value = this.currentFieldValue(field);
+			if (!name || value === void 0) continue;
+			if (field.value !== value) field.value = value;
+			if (next[name] !== value) {
+				next[name] = value;
+				changed = true;
+			}
+		}
+		if (changed) this.formValues = next;
+		return next;
+	}
+	currentFieldValue(field) {
+		const native = field.shadowRoot?.querySelector("input");
+		if (native && native.value !== field.value) return native.value;
+		return typeof field.value === "string" ? field.value : void 0;
+	}
 	handleAtomInput = (event) => {
 		if (!event.detail) return;
 		const { name, value } = event.detail;
@@ -2514,15 +2758,23 @@ let ZitadelLogin = class ZitadelLogin extends LitElement {
 			...this.formValues,
 			[name]: value
 		};
-		this.dispatchEvent(new CustomEvent("zitadel-flow-input", {
-			bubbles: true,
-			composed: true,
-			detail: {
-				name,
-				value
-			}
-		}));
+		this.syncFieldElementValue(name, value);
+		emit(this, "zitadel-flow-input", {
+			name,
+			value
+		});
 	};
+	syncFieldElementValue(name, value) {
+		const root = this.shadowRoot;
+		if (!root) return;
+		const fields = root.querySelectorAll("zl-field");
+		for (const field of fields) {
+			if (field.getAttribute("name") !== name) continue;
+			if (field.value !== value) field.value = value;
+			const native = field.shadowRoot?.querySelector("input");
+			if (native && native.value !== value) native.value = value;
+		}
+	}
 	handleAtomSubmit = (event) => {
 		if (this.loading) return;
 		this.submit(event.detail?.action ?? null);
@@ -2592,21 +2844,20 @@ 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;
 		const { id, session_token } = this.response;
 		this.loading = true;
 		try {
-			const stepFieldKeys = Object.keys(this.response.step.fields ?? {});
+			const formValues = this.captureValuesFromFields();
+			const stepFields = this.response.step.fields ?? [];
 			const fields = {};
-			for (const key of stepFieldKeys) {
-				const value = this.formValues[key];
-				if (value !== void 0) fields[key] = value;
+			for (const f of stepFields) {
+				const value = formValues[f.name];
+				if (value !== void 0) fields[f.name] = value;
 			}
 			const body = {
 				session_token,
@@ -2614,15 +2865,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 +2879,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"
@@ -2661,7 +2912,7 @@ ZitadelLogin = __decorate([customElement("zitadel-login")], ZitadelLogin);
 function collectInitialValues(step) {
 	const values = {};
 	if (!step.fields) return values;
-	for (const [name, field] of Object.entries(step.fields)) values[name] = typeof field.value === "string" ? field.value : "";
+	for (const field of step.fields) values[field.name] = typeof field.value === "string" ? field.value : "";
 	return values;
 }
 //#endregion
@@ -2812,6 +3063,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 +3215,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 +3237,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 +3254,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 +3320,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 +3359,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-BEvS2wA_.mjs.map