@zitadel/components 0.0.0 → 0.1.0-alpha.10

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

@@ -1,20 +1,12 @@
-import { _ as __decorate, b as t, v as focusVisibleStyles, y as baseHostStyles } from "./atoms-CmOTltTH.mjs";
-import { r as tokensCss } from "./tokens-TXmurodq.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
@@ -34,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
@@ -118,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 🍺
@@ -165,6 +196,7 @@ var zitadelNextGen_exports = /* @__PURE__ */ __exportAll({
 	getGetKeysUrl: () => getGetKeysUrl,
 	getGetLiveUrl: () => getGetLiveUrl,
 	getGetMySessionUrl: () => getGetMySessionUrl,
+	getGetMyUserUrl: () => getGetMyUserUrl,
 	getGetOpenIDConfigurationUrl: () => getGetOpenIDConfigurationUrl,
 	getGetProjectUrl: () => getGetProjectUrl,
 	getGetReadyUrl: () => getGetReadyUrl,
@@ -183,6 +215,7 @@ var zitadelNextGen_exports = /* @__PURE__ */ __exportAll({
 	getListUsersUrl: () => getListUsersUrl,
 	getLive: () => getLive,
 	getMySession: () => getMySession,
+	getMyUser: () => getMyUser,
 	getOpenIDConfiguration: () => getOpenIDConfiguration,
 	getProject: () => getProject,
 	getReady: () => getReady,
@@ -191,6 +224,7 @@ var zitadelNextGen_exports = /* @__PURE__ */ __exportAll({
 	getRevokeTokenUrl: () => getRevokeTokenUrl,
 	getSchemaById: () => getSchemaById,
 	getSession: () => getSession,
+	getSetUserPasswordUrl: () => getSetUserPasswordUrl,
 	getSubmitFlowEventUrl: () => getSubmitFlowEventUrl,
 	getSubmitFlowStepUrl: () => getSubmitFlowStepUrl,
 	getTeam: () => getTeam,
@@ -207,6 +241,7 @@ var zitadelNextGen_exports = /* @__PURE__ */ __exportAll({
 	revokeMySession: () => revokeMySession,
 	revokeSession: () => revokeSession,
 	revokeToken: () => revokeToken,
+	setUserPassword: () => setUserPassword,
 	submitFlowEvent: () => submitFlowEvent,
 	submitFlowStep: () => submitFlowStep,
 	updateFlowDefinition: () => updateFlowDefinition,
@@ -411,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
@@ -433,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
@@ -450,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
@@ -461,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`;
 };
@@ -985,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: {
@@ -1016,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"
 	});
@@ -1122,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();
 /**
@@ -1150,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
@@ -1424,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
@@ -1467,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;
 }
@@ -1519,458 +1682,6 @@ function lookup(locale, key) {
 	return locale[key] ?? key;
 }
 //#endregion
-//#region src/orchestrator/templates/auth-form.liquid.ts
-/**
-* `auth-form` partial — Sign in and Sign up screens (Figma screens file).
-*
-* Sign up 2xl frame: `6593:141741` (card `6593:141743`, attribution `6593:141767`).
-* Sign in 2xl frame: `6593:141983`, card `6593:141985`, stack `6593:141989`
-* (email + password + forgot link + CTAs on one step).
-* Sign-in errors: wrong credentials `6602:180268`, server alert `6594:125237`.
-*
-* Figma `Field+CTAs` stacks fields + CTAs in one column at 16px (`spacing-03`).
-* Primary/secondary are 48px buttons; register / sign_in are body copy with a
-* purple text link (24px row) — not `<zl-button hierarchy="text">`.
-*/
-const authFormTemplate = String.raw`
-<zl-page-shell data-zl-template-root>
-  {% if branding.logo_url %}
-    <img slot="header" class="zl-card-logo" src="{{ branding.logo_url }}" alt="" />
-  {% endif %}
-  <zl-card>
-    <h1 slot="header" class="zl-card-title">{{ step.texts.title_key | t: identity.display_name }}</h1>
-    {% if step.texts.description_key %}
-      <p slot="header" class="zl-card-subtitle">{{ step.texts.description_key | t: identity.display_name }}</p>
-    {% endif %}
-
-    {% if errors and errors.size > 0 %}
-      {% for err in errors %}
-        {% if err | formLevelError %}
-          {% assign alert_heading = err.text_key | alertHeading %}
-          {% assign alert_body = err.text_key | alertBody %}
-          <zl-alert severity="error"{% if alert_heading != "" %} heading="{{ alert_heading | t }}"{% endif %}>
-            {% if alert_body != "" %}{{ alert_body | t }}{% elsif err.text_key %}{{ err.text_key | t }}{% else %}{{ err.message }}{% endif %}
-          </zl-alert>
-        {% endif %}
-      {% endfor %}
-    {% endif %}
-
-    {% for entry in fields %}
-      {% assign field_placeholder = entry[1].text_key | fieldPlaceholder %}
-      {% assign field_help = entry[1].text_key | fieldHelp %}
-      {% assign field_err = entry[0] | fieldError: errors %}
-      {% assign autocomplete_val = '' %}
-      {% if entry[0] == 'email' %}
-        {% assign autocomplete_val = 'email' %}
-      {% elsif entry[1].type == 'password' and step.name == 'register' %}
-        {% assign autocomplete_val = 'new-password' %}
-      {% elsif entry[1].type == 'password' %}
-        {% assign autocomplete_val = 'current-password' %}
-      {% endif %}
-      <zl-field
-        name="{{ entry[0] }}"
-        label="{{ entry[1].text_key | t }}"
-        type="{{ entry[1].type }}"
-        value="{{ entry[1].value }}"
-        {% if autocomplete_val != '' %}autocomplete="{{ autocomplete_val }}"{% endif %}
-        {% if entry[1].required %}required{% endif %}
-        {% if field_placeholder != "" %}placeholder="{{ field_placeholder }}"{% endif %}
-        {% if field_err != "" %}invalid error="{{ field_err }}"{% endif %}
-      >
-        {% if field_help != "" %}
-          <span slot="help">{{ field_help }}</span>
-        {% endif %}
-      </zl-field>
-    {% endfor %}
-
-    {% if fields.email and fields.password and step.name == 'identifier' %}
-      <p class="zl-card-forgot">
-        <a href="#" class="zl-card-forgot__link" data-action="recover">{{ 'action.forgot_password' | t }}</a>
-      </p>
-    {% endif %}
-
-    {% for entry in actions %}
-      {% if entry[1].primary %}
-        <zl-button
-          hierarchy="primary"
-          size="medium"
-          type="submit"
-          block
-          action="{{ entry[0] }}"
-          label="{{ entry[1].text_key | t }}"
-          {% if loading %}loading{% endif %}
-        ></zl-button>
-      {% endif %}
-    {% endfor %}
-
-    {% if actions.passkey %}
-      <zl-button
-        hierarchy="secondary"
-        size="medium"
-        block
-        action="passkey"
-        label="{{ actions.passkey.text_key | t }}"
-      ></zl-button>
-    {% endif %}
-
-    {% if actions.register %}
-      <p class="zl-card-nav">
-        {{ 'identifier.action.register.lead' | t }}<a href="#" class="zl-card-nav__link" data-action="register">{{ 'identifier.action.register.link' | t }}</a>
-      </p>
-    {% endif %}
-
-    {% if actions.sign_in %}
-      <p class="zl-card-nav">
-        {{ 'register.action.sign_in.lead' | t }}<a href="#" class="zl-card-nav__link" data-action="sign_in">{{ 'register.action.sign_in.link' | t }}</a>
-      </p>
-    {% endif %}
-
-    {% if challenge and challenge.method == "passkey" %}
-      <zl-passkey
-        ceremony="{{ challenge.options.ceremony | default: 'authenticate' }}"
-        challenge-id="{{ challenge.challenge_id }}"
-        options='{{ challenge.options | json }}'
-      ></zl-passkey>
-    {% endif %}
-
-    {% mandatory_gates %}
-  </zl-card>
-</zl-page-shell>
-`;
-//#endregion
-//#region src/orchestrator/templates/default.liquid.ts
-/**
-* Bundled `default.liquid` master template.
-*
-* Renders the four target Figma auth screens (Sign in, Sign up, Passkey
-* upsell, Signed in) by including the appropriate partial based on
-* `step.name`. Tenant-specific layouts (`branding.layout`) replace the
-* outer chrome only — the per-step partials stay shared so atom output
-* tracks the design system without each tenant re-implementing it.
-*
-* Spec: docs/design/branding/templates.md.
-*/
-const defaultTemplate = String.raw`
-{%- if step.name == 'signed-in' or step.complete == 'show' -%}
-  {%- include 'signed-in' -%}
-{%- elsif step.name == 'passkey' or step.name == 'passkey-upsell' or step.name == 'passkey-setup' or step.name == 'passkey-login' -%}
-  {%- include 'passkey-upsell' -%}
-{%- else -%}
-  {%- include 'auth-form' -%}
-{%- endif -%}
-`;
-/**
-* Layout chrome injected as an `adoptedStyleSheet` on the orchestrator's
-* shadow root. Provides the page background and the attribution-footer
-* positioning that lives *outside* any template — the rest of the visual
-* surface is owned by the `<zl-page-shell>` / `<zl-card>` atoms the
-* templates render. Token references resolve against the
-* `@zitadel/design-tokens` CSS variables that are present on
-* `:host` via the branding stylesheet.
-*/
-const layoutChromeCss = `
-:host {
-  display: block;
-  min-height: 100%;
-  background: var(--zl-color-surface-default-black, #0f0f11);
-  color: var(--zl-color-text-primary-white, #f4f4f6);
-  font-family: var(--zl-font-family-sans, system-ui, sans-serif);
-}
-.zl-mount {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-  background: inherit;
-  color: inherit;
-}
-.zl-mount > zl-page-shell,
-.zl-mount > [data-zl-template-root] {
-  flex: 1 1 auto;
-}
-.zl-attribution {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: transparent;
-}
-.zl-attribution[hidden] {
-  display: none;
-}
-/* Card header typography — Figma "Desktop/Headings/Small" + "Body Small
-   Regular" pattern shared by sign-in (6593:141740), passkey upsell
-   (6594:89142 / 6594:12796), and signed-in (6596:132845). Templates
-   slot raw <h1>/<p> elements into <zl-card>, which keeps them in the
-   light DOM where the orchestrator's stylesheet can reach them — the
-   atom intentionally doesn't dictate typography. */
-.zl-card-title {
-  margin: 0;
-  font-family: var(--zl-font-family-heading, var(--zl-font-family-sans, system-ui, sans-serif));
-  font-size: 2rem;
-  font-weight: 400;
-  line-height: 2.5rem;
-  letter-spacing: -0.02em;
-  color: var(--zl-color-text-primary-white, #f4f4f6);
-  text-align: left;
-}
-.zl-card-subtitle {
-  margin: 0;
-  font-family: var(--zl-font-family-sans, system-ui, sans-serif);
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: 400;
-  color: var(--zl-color-text-primary-white, #f4f4f6);
-}
-/* Figma 6593:141989 / 6594:12882 — left-aligned in Field+CTAs (x=0, items-start). */
-.zl-card-nav {
-  margin: 0;
-  font-family: var(--zl-font-family-sans, system-ui, sans-serif);
-  font-size: 1rem;
-  line-height: 1.5rem;
-  font-weight: 400;
-  color: var(--zl-color-text-primary-white, #f4f4f6);
-  text-align: left;
-}
-.zl-card-nav__link {
-  display: inline;
-  margin: 0;
-  padding: 0;
-  border: none;
-  background: transparent;
-  font: inherit;
-  line-height: inherit;
-  color: var(--zl-color-icon-default-purple, #bba5e4);
-  text-decoration: none;
-  cursor: pointer;
-}
-.zl-card-nav__link:hover {
-  text-decoration: underline;
-}
-.zl-card-nav__link:focus-visible {
-  outline: var(--zl-focus-width, 2px) solid var(--zl-focus-color, #f4f4f6);
-  outline-offset: var(--zl-focus-offset, 2px);
-}
-/* Figma 6593:141989 — forgot password row (left-aligned, before CTAs). */
-.zl-card-forgot {
-  margin: 0;
-  text-align: left;
-}
-.zl-card-forgot__link {
-  display: inline;
-  margin: 0;
-  padding: 0;
-  border: none;
-  background: transparent;
-  font-family: var(--zl-font-family-sans, system-ui, sans-serif);
-  font-size: 1rem;
-  line-height: 1.5rem;
-  font-weight: 400;
-  color: var(--zl-color-icon-default-purple, #bba5e4);
-  text-decoration: none;
-  cursor: pointer;
-}
-.zl-card-forgot__link:hover {
-  text-decoration: underline;
-}
-.zl-card-forgot__link:focus-visible {
-  outline: var(--zl-focus-width, 2px) solid var(--zl-focus-color, #f4f4f6);
-  outline-offset: var(--zl-focus-offset, 2px);
-}
-`;
-//#endregion
-//#region src/orchestrator/templates/passkey-upsell.liquid.ts
-/**
-* `passkey-upsell` partial — third Figma target screen (file
-* `xkvBjkOJ8ENuHdTGZHXezK`, node `6594:630`).
-*
-* Differs from `auth-form`:
-*   - heading + subtitle live in a compact card (gap 24px instead of 32px),
-*   - primary "Set up passkey" CTA carries a trailing 24px passkey icon
-*     (Figma slots the icon to the right of the label, not above it),
-*   - secondary "Skip for now" uses the dark secondary hierarchy, not the
-*     `text` hierarchy — the Figma button has a solid #252528 background.
-*
-* Server-side errors land in a `<zl-alert>` the same way as the auth form.
-*/
-const passkeyUpsellTemplate = String.raw`
-<zl-page-shell data-zl-template-root>
-  {% if branding.logo_url %}
-    <img slot="header" class="zl-card-logo" src="{{ branding.logo_url }}" alt="" />
-  {% endif %}
-  <zl-card compact>
-    <h1 slot="header" class="zl-card-title">{{ step.texts.title_key | t: identity.display_name }}</h1>
-    <p slot="header" class="zl-card-subtitle">{{ 'passkey-upsell.description.line1' | t }}</p>
-    <p slot="header" class="zl-card-subtitle">{{ 'passkey-upsell.description.line2' | t }}</p>
-
-    {% if errors and errors.size > 0 %}
-      {% for err in errors %}
-        {% if err | formLevelError %}
-          <zl-alert severity="error">
-            {% if err.text_key %}{{ err.text_key | t }}{% else %}{{ err.message }}{% endif %}
-          </zl-alert>
-        {% endif %}
-      {% endfor %}
-    {% endif %}
-
-    {% for entry in actions %}
-      {% if entry[1].primary %}
-        <zl-button
-          slot="footer"
-          hierarchy="primary"
-          size="medium"
-          type="submit"
-          block
-          action="{{ entry[0] }}"
-          {% if loading %}loading disabled{% endif %}
-        >
-          {{ entry[1].text_key | t }}
-          <zl-icon slot="trailing" name="passkey" size="24"></zl-icon>
-        </zl-button>
-      {% endif %}
-    {% endfor %}
-
-    {% for entry in actions %}
-      {% unless entry[1].primary %}
-        <zl-button
-          slot="footer"
-          hierarchy="secondary"
-          size="medium"
-          type="button"
-          block
-          action="{{ entry[0] }}"
-          label="{{ entry[1].text_key | t }}"
-        ></zl-button>
-      {% endunless %}
-    {% endfor %}
-
-    {% mandatory_gates %}
-
-    {% if challenge and challenge.method == "passkey" %}
-      <zl-passkey
-        ceremony="{{ challenge.options.ceremony | default: 'register' }}"
-        challenge-id="{{ challenge.challenge_id }}"
-        options='{{ challenge.options | json }}'
-      ></zl-passkey>
-    {% endif %}
-  </zl-card>
-</zl-page-shell>
-`;
-//#endregion
-//#region src/orchestrator/templates/signed-in.liquid.ts
-/**
-* `signed-in` partial — fourth Figma target screen (file
-* `xkvBjkOJ8ENuHdTGZHXezK`, node `6596:132844`).
-*
-* Figma layout:
-*   - heading "You're signed in as" (left-aligned, full width)
-*   - body line with the authenticated email address (Arimo Regular 16/24)
-*   - "Continue" primary CTA
-*   - "Logout" secondary CTA
-*
-* No avatar / identity hero glyph: the Figma frame is intentionally a
-* pure modal layover and dropping the avatar keeps the orchestrator
-* default in lockstep with the spec.
-*
-* Rendered when the flow returns a terminal step (`complete: "show"`)
-* and no `post-sign-in-url` is configured, so the user can confirm the
-* identity before the host SPA takes over.
-*/
-const signedInTemplate = String.raw`
-<zl-page-shell data-zl-template-root>
-  {% if branding.logo_url %}
-    <img slot="header" class="zl-card-logo" src="{{ branding.logo_url }}" alt="" />
-  {% endif %}
-  <zl-card compact>
-    <h1 slot="header" class="zl-card-title">
-      {{ step.texts.title_key | t: identity.display_name }}
-    </h1>
-    {% if identity.email_address or identity.display_name %}
-      <p slot="header" class="zl-card-subtitle">
-        {{ identity.email_address | default: identity.display_name }}
-      </p>
-    {% endif %}
-
-    {% if errors and errors.size > 0 %}
-      {% for err in errors %}
-        <zl-alert severity="error">{{ err.text_key | t }}</zl-alert>
-      {% endfor %}
-    {% endif %}
-
-    {% if actions and actions.size > 0 %}
-      {% for entry in actions %}
-        {% if entry[1].primary %}
-          <zl-button
-            slot="footer"
-            hierarchy="primary"
-            size="medium"
-            type="submit"
-            block
-            action="{{ entry[0] }}"
-            label="{{ entry[1].text_key | t }}"
-            {% if loading %}loading{% endif %}
-          ></zl-button>
-        {% endif %}
-      {% endfor %}
-
-      {% for entry in actions %}
-        {% unless entry[1].primary %}
-          <zl-button
-            slot="footer"
-            hierarchy="secondary"
-            size="medium"
-            block
-            action="{{ entry[0] }}"
-            label="{{ entry[1].text_key | t }}"
-          ></zl-button>
-        {% endunless %}
-      {% endfor %}
-    {% else %}
-      {% comment %}
-        Fallback when the API ships a terminal step with no actions —
-        matches Figma node 6596:132844 which always renders Continue
-        + Logout. The orchestrator wires these to its built-in
-        continue / logout handlers.
-      {% endcomment %}
-      <zl-button
-        slot="footer"
-        hierarchy="primary"
-        size="medium"
-        type="submit"
-        block
-        action="continue"
-        label="{{ 'signed-in.continue' | t }}"
-      ></zl-button>
-      <zl-button
-        slot="footer"
-        hierarchy="secondary"
-        size="medium"
-        block
-        action="logout"
-        label="{{ 'signed-in.logout' | t }}"
-      ></zl-button>
-    {% endif %}
-
-    {% mandatory_gates %}
-  </zl-card>
-</zl-page-shell>
-`;
-//#endregion
-//#region src/orchestrator/template-names.ts
-/**
-* Names of the bundled Liquid templates the `<zitadel-login>` orchestrator
-* registers.
-*
-* This lives in its own module — separate from `liquid.ts` — so the public
-* barrel can re-export `TEMPLATE_NAMES` without dragging LiquidJS' `Liquid`
-* type (and its Node ambient-type requirements) into the published
-* declaration surface. See `liquid.ts` / the orchestrator barrel.
-*/
-const TEMPLATE_NAMES = {
-	default: "default",
-	authForm: "auth-form",
-	passkeyUpsell: "passkey-upsell",
-	signedIn: "signed-in"
-};
-//#endregion
 //#region src/orchestrator/liquid.ts
 /**
 * LiquidJS engine factory for the `<zitadel-login>` orchestrator.
@@ -1987,13 +1698,11 @@ const TEMPLATE_NAMES = {
 *   escapes (Layer 1 of the security pipeline).
 * - Partials are loaded from an in-memory map; no filesystem access.
 */
+const TEMPLATE_NAMES$1 = { default: "default" };
 function createLiquidEngine(options) {
 	const engine = new Liquid({
 		templates: {
-			[TEMPLATE_NAMES.default]: defaultTemplate,
-			[TEMPLATE_NAMES.authForm]: authFormTemplate,
-			[TEMPLATE_NAMES.passkeyUpsell]: passkeyUpsellTemplate,
-			[TEMPLATE_NAMES.signedIn]: signedInTemplate,
+			[TEMPLATE_NAMES$1.default]: default_default,
 			...options.templates ?? {}
 		},
 		cache: true,
@@ -2077,6 +1786,23 @@ function interpolate(template, args) {
 	});
 }
 //#endregion
+//#region src/orchestrator/template-names.ts
+/**
+* Names of the bundled Liquid templates the `<zitadel-login>` orchestrator
+* registers.
+*
+* This lives in its own module — separate from `liquid.ts` — so the public
+* barrel can re-export `TEMPLATE_NAMES` without dragging LiquidJS' `Liquid`
+* type (and its Node ambient-type requirements) into the published
+* declaration surface. See `liquid.ts` / the orchestrator barrel.
+*/
+const TEMPLATE_NAMES = {
+	default: "default",
+	authForm: "auth-form",
+	passkeyUpsell: "passkey-upsell",
+	signedIn: "signed-in"
+};
+//#endregion
 //#region src/orchestrator/locales/en.ts
 /**
 * Minimal English locale dictionary.
@@ -2085,53 +1811,103 @@ function interpolate(template, args) {
 * to the raw key (matches the spec in
 * `docs/design/flowengine/flow-engine-guide.md`).
 *
+* Text keys are auto-generated by the server from the flow definition:
+*   - Step titles:       `<step>.title`
+*   - Step descriptions: `<step>.description`
+*   - Field labels:      `<step>.field.<field>`
+*   - Action labels:     `<step>.action.<action>`
+*
 * Copy aligned to Figma screens file `xkvBjkOJ8ENuHdTGZHXezK` (May 2026).
 * MVP only — multi-locale support is deferred.
 */
 const en = {
 	"identifier.title": "Sign in",
+	"identifier.description": "Enter your email to continue",
 	"identifier.field.email": "Work email",
 	"identifier.field.email.placeholder": "you@company.com",
 	"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",
+	"authenticate.title": "Sign in",
+	"authenticate.description": "Enter your password",
+	"authenticate.field.password": "Password",
+	"authenticate.action.submit": "Sign in",
+	"choose-register.title": "Create your account",
+	"choose-register.description": "Choose how you'd like to sign up",
+	"choose-register.action.register-with-password": "Sign up with password",
+	"choose-register.action.register-with-passkey": "Sign up with passkey",
+	"collect-credentials.title": "Create your account",
+	"collect-credentials.description": "Set up your email and password",
+	"collect-credentials.field.email": "Work email",
+	"collect-credentials.field.email.placeholder": "you@company.com",
+	"collect-credentials.field.password": "Password",
+	"collect-credentials.field.password.help": "At least 8 characters, including a symbol and number.",
+	"collect-credentials.action.submit": "Sign up",
+	"register-password.title": "Create your password",
+	"register-password.description": "Choose a secure password for your account",
+	"register-password.field.password": "Password",
+	"register-password.field.password.help": "At least 8 characters, including a symbol and number.",
+	"register-password.action.submit": "Sign up",
+	"passkey-upsell.title": "Sign in faster next time",
+	"passkey-upsell.description": "No password needed ever again.",
+	"passkey-upsell.description.line1": "No password needed ever again.",
+	"passkey-upsell.description.line2": "Sign in with Face ID, Touch ID, or PIN.",
+	"passkey-upsell.action.passkey_register": "Set up passkey",
+	"passkey-upsell.action.skip": "Skip for now",
+	"passkey-upsell.action.setup": "Set up passkey",
+	"collect-passkey-email.title": "Create your account",
+	"collect-passkey-email.description": "Enter your email to set up a passkey",
+	"collect-passkey-email.field.email": "Work email",
+	"collect-passkey-email.field.email.placeholder": "you@company.com",
+	"collect-passkey-email.action.submit": "Continue",
+	"passkey-enroll.title": "Set up your passkey",
+	"passkey-enroll.description": "Use Face ID, Touch ID, or your device PIN to create a passkey.",
+	"passkey-enroll.action.passkey_register": "Set up passkey",
+	"done.title": "You're signed in as",
+	"done.description": "",
 	"password.title": "Sign in",
+	"password.description": "Enter your password",
 	"password.field.password": "Password",
+	"password.action.signin": "Sign in",
 	"password.action.passkey": "Sign in with a passkey",
 	"password.action.register.lead": "Don't have an account? ",
 	"password.action.register.link": "Sign up",
 	"register.title": "Create your account",
+	"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": "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",
-	"passkey-upsell.title": "Sign in faster next time",
-	"passkey-upsell.description.line1": "No password needed ever again.",
-	"passkey-upsell.description.line2": "Sign in with Face ID, Touch ID, or PIN.",
-	"passkey-upsell.action.setup": "Set up passkey",
-	"passkey-upsell.action.skip": "Skip for now",
-	/** Figma `6594:630` setup-passkey annotations — form-level `<zl-alert>`. */
-	"error.passkey_cancelled": "Passkey setup was cancelled",
-	"error.passkey_not_registered": "This passkey is not registered. Please sign in with your email and password.",
-	"error.passkey_setup_failed": "Passkey registration did not complete. Please try again.",
-	"error.passkey_unsupported": "This device does not support passkeys",
-	"error.passkey_failed": "Something went wrong. Please try again.",
 	"complete.title": "You're signed in as",
 	"signed-in.continue": "Continue",
 	"signed-in.logout": "Logout",
+	"passkey-login.title": "Sign in with your passkey",
 	"recover.title": "Check your email",
 	"recover.description": "We sent a password reset link to your email address.",
 	"recover.action.back": "Back to sign in",
-	"passkey-login.title": "Sign in with your passkey",
 	"submit.continue": "Continue",
 	"submit.signin": "Sign in",
 	"action.forgot_password": "Forgot password?",
 	"action.cancel": "Cancel",
 	"sso.redirect.title": "Redirecting to your provider…",
+	"error.passkey_cancelled": "Passkey setup was cancelled",
+	"error.passkey_not_registered": "This passkey is not registered. Please sign in with your email and password.",
+	"error.passkey_setup_failed": "Passkey registration did not complete. Please try again.",
+	"error.passkey_unsupported": "This device does not support passkeys",
+	"error.passkey_failed": "Something went wrong. Please try again.",
 	"error.email_required": "Please enter an email address",
 	"error.email_invalid": "Please enter a valid email",
 	"error.password_required": "Please enter a password",
@@ -2147,47 +1923,92 @@ const en = {
 //#region src/orchestrator/locales/de.ts
 const de = {
 	"identifier.title": "Anmelden",
+	"identifier.description": "Gib deine E-Mail-Adresse ein, um fortzufahren",
 	"identifier.field.email": "E-Mail",
 	"identifier.field.email.placeholder": "du@unternehmen.com",
 	"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",
+	"authenticate.title": "Anmelden",
+	"authenticate.description": "Gib dein Passwort ein",
+	"authenticate.field.password": "Passwort",
+	"authenticate.action.submit": "Anmelden",
+	"choose-register.title": "Konto erstellen",
+	"choose-register.description": "Wähle, wie du dich registrieren möchtest",
+	"choose-register.action.register-with-password": "Mit Passwort registrieren",
+	"choose-register.action.register-with-passkey": "Mit Passkey registrieren",
+	"collect-credentials.title": "Konto erstellen",
+	"collect-credentials.description": "Richte E-Mail und Passwort ein",
+	"collect-credentials.field.email": "E-Mail",
+	"collect-credentials.field.email.placeholder": "du@unternehmen.com",
+	"collect-credentials.field.password": "Passwort",
+	"collect-credentials.field.password.help": "Mindestens 8 Zeichen, einschließlich eines Sonderzeichens und einer Zahl.",
+	"collect-credentials.action.submit": "Registrieren",
+	"register-password.title": "Passwort erstellen",
+	"register-password.description": "Wähle ein sicheres Passwort für dein Konto",
+	"register-password.field.password": "Passwort",
+	"register-password.field.password.help": "Mindestens 8 Zeichen, einschließlich eines Sonderzeichens und einer Zahl.",
+	"register-password.action.submit": "Registrieren",
+	"passkey-upsell.title": "Nächstes Mal schneller anmelden",
+	"passkey-upsell.description": "Kein Passwort mehr nötig.",
+	"passkey-upsell.description.line1": "Kein Passwort mehr nötig.",
+	"passkey-upsell.description.line2": "Melde dich mit Face ID, Touch ID oder PIN an.",
+	"passkey-upsell.action.passkey_register": "Passkey einrichten",
+	"passkey-upsell.action.skip": "Vorerst überspringen",
+	"passkey-upsell.action.setup": "Passkey einrichten",
+	"collect-passkey-email.title": "Konto erstellen",
+	"collect-passkey-email.description": "Gib deine E-Mail-Adresse ein, um einen Passkey einzurichten",
+	"collect-passkey-email.field.email": "E-Mail",
+	"collect-passkey-email.field.email.placeholder": "du@unternehmen.com",
+	"collect-passkey-email.action.submit": "Weiter",
+	"passkey-enroll.title": "Passkey einrichten",
+	"passkey-enroll.description": "Verwende Face ID, Touch ID oder die Geräte-PIN, um einen Passkey zu erstellen.",
+	"passkey-enroll.action.passkey_register": "Passkey einrichten",
+	"done.title": "Du bist angemeldet als",
+	"done.description": "",
 	"password.title": "Anmelden",
+	"password.description": "Gib dein Passwort ein",
 	"password.field.password": "Passwort",
+	"password.action.signin": "Anmelden",
 	"password.action.passkey": "Mit Passkey anmelden",
 	"password.action.register.lead": "Noch kein Konto? ",
 	"password.action.register.link": "Registrieren",
 	"register.title": "Konto erstellen",
+	"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": "Weiter mit Passkey",
 	"register.action.submit": "Registrieren",
 	"register.action.sign_in.lead": "Bereits ein Konto? ",
 	"register.action.sign_in.link": "Anmelden",
-	"passkey-upsell.title": "Nächstes Mal schneller anmelden",
-	"passkey-upsell.description.line1": "Kein Passwort mehr nötig.",
-	"passkey-upsell.description.line2": "Melde dich mit Face ID, Touch ID oder PIN an.",
-	"passkey-upsell.action.setup": "Passkey einrichten",
-	"passkey-upsell.action.skip": "Vorerst überspringen",
-	"error.passkey_cancelled": "Passkey-Einrichtung wurde abgebrochen",
-	"error.passkey_not_registered": "Dieser Passkey ist nicht registriert. Bitte melde dich mit E-Mail und Passwort an.",
-	"error.passkey_setup_failed": "Passkey-Registrierung wurde nicht abgeschlossen. Bitte versuche es erneut.",
-	"error.passkey_unsupported": "Dieses Gerät unterstützt keine Passkeys",
-	"error.passkey_failed": "Etwas ist schiefgelaufen. Bitte versuche es erneut.",
 	"complete.title": "Du bist angemeldet als",
 	"signed-in.continue": "Weiter",
 	"signed-in.logout": "Abmelden",
+	"passkey-login.title": "Mit Passkey anmelden",
 	"recover.title": "E-Mail prüfen",
 	"recover.description": "Wir haben einen Link zum Zurücksetzen des Passworts an deine E-Mail-Adresse gesendet.",
 	"recover.action.back": "Zurück zur Anmeldung",
-	"passkey-login.title": "Mit Passkey anmelden",
 	"submit.continue": "Weiter",
 	"submit.signin": "Anmelden",
 	"action.forgot_password": "Passwort vergessen?",
 	"action.cancel": "Abbrechen",
 	"sso.redirect.title": "Weiterleitung zum Anbieter…",
+	"error.passkey_cancelled": "Passkey-Einrichtung wurde abgebrochen",
+	"error.passkey_not_registered": "Dieser Passkey ist nicht registriert. Bitte melde dich mit E-Mail und Passwort an.",
+	"error.passkey_setup_failed": "Passkey-Registrierung wurde nicht abgeschlossen. Bitte versuche es erneut.",
+	"error.passkey_unsupported": "Dieses Gerät unterstützt keine Passkeys",
+	"error.passkey_failed": "Etwas ist schiefgelaufen. Bitte versuche es erneut.",
 	"error.email_required": "Bitte gib eine E-Mail-Adresse ein",
 	"error.email_invalid": "Bitte gib eine gültige E-Mail-Adresse ein",
 	"error.password_required": "Bitte gib ein Passwort ein",
@@ -2199,10 +2020,111 @@ const de = {
 	"error.sign_in_server.body": "Bitte versuche es in einigen Minuten erneut"
 };
 //#endregion
+//#region src/orchestrator/locales/it.ts
+const it = {
+	"identifier.title": "Accedi",
+	"identifier.description": "Inserisci la tua e-mail per continuare",
+	"identifier.field.email": "E-mail aziendale",
+	"identifier.field.email.placeholder": "tu@azienda.com",
+	"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",
+	"authenticate.title": "Accedi",
+	"authenticate.description": "Inserisci la tua password",
+	"authenticate.field.password": "Password",
+	"authenticate.action.submit": "Accedi",
+	"choose-register.title": "Crea il tuo account",
+	"choose-register.description": "Scegli come registrarti",
+	"choose-register.action.register-with-password": "Registrati con password",
+	"choose-register.action.register-with-passkey": "Registrati con passkey",
+	"collect-credentials.title": "Crea il tuo account",
+	"collect-credentials.description": "Configura e-mail e password",
+	"collect-credentials.field.email": "E-mail aziendale",
+	"collect-credentials.field.email.placeholder": "tu@azienda.com",
+	"collect-credentials.field.password": "Password",
+	"collect-credentials.field.password.help": "Almeno 8 caratteri, incluso un simbolo e un numero.",
+	"collect-credentials.action.submit": "Registrati",
+	"register-password.title": "Crea la tua password",
+	"register-password.description": "Scegli una password sicura per il tuo account",
+	"register-password.field.password": "Password",
+	"register-password.field.password.help": "Almeno 8 caratteri, incluso un simbolo e un numero.",
+	"register-password.action.submit": "Registrati",
+	"passkey-upsell.title": "Accedi più velocemente la prossima volta",
+	"passkey-upsell.description": "Nessuna password necessaria.",
+	"passkey-upsell.description.line1": "Nessuna password necessaria.",
+	"passkey-upsell.description.line2": "Accedi con Face ID, Touch ID o PIN.",
+	"passkey-upsell.action.passkey_register": "Configura passkey",
+	"passkey-upsell.action.skip": "Salta per ora",
+	"passkey-upsell.action.setup": "Configura passkey",
+	"collect-passkey-email.title": "Crea il tuo account",
+	"collect-passkey-email.description": "Inserisci la tua e-mail per configurare una passkey",
+	"collect-passkey-email.field.email": "E-mail aziendale",
+	"collect-passkey-email.field.email.placeholder": "tu@azienda.com",
+	"collect-passkey-email.action.submit": "Continua",
+	"passkey-enroll.title": "Configura la tua passkey",
+	"passkey-enroll.description": "Usa Face ID, Touch ID o il PIN del dispositivo per creare una passkey.",
+	"passkey-enroll.action.passkey_register": "Configura passkey",
+	"done.title": "Sei connesso come",
+	"done.description": "",
+	"password.title": "Accedi",
+	"password.description": "Inserisci la tua password",
+	"password.field.password": "Password",
+	"password.action.signin": "Accedi",
+	"password.action.passkey": "Accedi con passkey",
+	"password.action.register.lead": "Non hai un account? ",
+	"password.action.register.link": "Registrati",
+	"register.title": "Crea il tuo account",
+	"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": "Continua con passkey",
+	"register.action.submit": "Registrati",
+	"register.action.sign_in.lead": "Hai già un account? ",
+	"register.action.sign_in.link": "Accedi",
+	"complete.title": "Sei connesso come",
+	"signed-in.continue": "Continua",
+	"signed-in.logout": "Esci",
+	"passkey-login.title": "Accedi con la tua passkey",
+	"recover.title": "Controlla la tua e-mail",
+	"recover.description": "Abbiamo inviato un link per reimpostare la password al tuo indirizzo e-mail.",
+	"recover.action.back": "Torna all'accesso",
+	"submit.continue": "Continua",
+	"submit.signin": "Accedi",
+	"action.forgot_password": "Password dimenticata?",
+	"action.cancel": "Annulla",
+	"sso.redirect.title": "Reindirizzamento al provider…",
+	"error.passkey_cancelled": "La configurazione della passkey è stata annullata",
+	"error.passkey_not_registered": "Questa passkey non è registrata. Accedi con e-mail e password.",
+	"error.passkey_setup_failed": "La registrazione della passkey non è stata completata. Riprova.",
+	"error.passkey_unsupported": "Questo dispositivo non supporta le passkey",
+	"error.passkey_failed": "Qualcosa è andato storto. Riprova.",
+	"error.email_required": "Inserisci un indirizzo e-mail",
+	"error.email_invalid": "Inserisci un indirizzo e-mail valido",
+	"error.password_required": "Inserisci una password",
+	"error.password_incorrect": "E-mail o password errata.",
+	"error.email_exists": "Esiste già un account con questo indirizzo e-mail.",
+	"error.invalid_credentials": "E-mail o password errata.",
+	"error.required": "Questo campo è obbligatorio.",
+	"error.sign_in_server.title": "Non è stato possibile completare l'accesso.",
+	"error.sign_in_server.body": "Riprova tra qualche minuto"
+};
+//#endregion
 //#region src/orchestrator/locales/index.ts
 const builtinLocales = {
 	en,
-	de
+	de,
+	it
 };
 //#endregion
 //#region ../shared-component-styles/dist/attribution-markup.mjs
@@ -2293,6 +2215,7 @@ const COMMON_ATTRS = [
 	"style",
 	"name",
 	"for",
+	"data-testid",
 	"data-theme",
 	"hidden"
 ];
@@ -2349,6 +2272,9 @@ function createSanitiser() {
 	};
 }
 //#endregion
+//#region src/orchestrator/templates/layout-chrome.css?inline
+var layout_chrome_default = ":host {\n  background: var(--zl-color-surface-default-black, #0f0f11);\n  min-height: 100%;\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n  display: block;\n}\n\n.zl-mount {\n  background: inherit;\n  min-height: 100vh;\n  color: inherit;\n  flex-direction: column;\n  display: flex;\n}\n\n.zl-mount > zl-page-shell, .zl-mount > [data-zl-template-root] {\n  flex: auto;\n}\n\n.zl-attribution {\n  background: none;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n}\n\n.zl-attribution[hidden] {\n  display: none;\n}\n\n.zl-card-title {\n  font-family: var(--zl-font-family-heading, var(--zl-font-family-sans, system-ui, sans-serif));\n  letter-spacing: -.02em;\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  text-align: left;\n  margin: 0;\n  font-size: 2rem;\n  font-weight: 400;\n  line-height: 2.5rem;\n}\n\n.zl-card-subtitle {\n  font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  margin: 0;\n  font-size: .875rem;\n  font-weight: 400;\n  line-height: 1.25rem;\n}\n\n.zl-card-nav {\n  font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  text-align: left;\n  margin: 0;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.5rem;\n}\n\n.zl-card-nav__link {\n  font: inherit;\n  line-height: inherit;\n  color: var(--zl-color-icon-default-purple, #bba5e4);\n  cursor: pointer;\n  background: none;\n  border: none;\n  margin: 0;\n  padding: 0;\n  text-decoration: none;\n  display: inline;\n}\n\n.zl-card-nav__link:hover {\n  text-decoration: underline;\n}\n\n.zl-card-nav__link:focus-visible {\n  outline: var(--zl-focus-width, 2px) solid var(--zl-focus-color, #f4f4f6);\n  outline-offset: var(--zl-focus-offset, 2px);\n}\n\n.zl-card-forgot {\n  text-align: left;\n  margin: 0;\n}\n\n.zl-card-forgot__link {\n  font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n  color: var(--zl-color-icon-default-purple, #bba5e4);\n  cursor: pointer;\n  background: none;\n  border: none;\n  margin: 0;\n  padding: 0;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.5rem;\n  text-decoration: none;\n  display: inline;\n}\n\n.zl-card-forgot__link:hover {\n  text-decoration: underline;\n}\n\n.zl-card-forgot__link:focus-visible {\n  outline: var(--zl-focus-width, 2px) solid var(--zl-focus-color, #f4f4f6);\n  outline-offset: var(--zl-focus-offset, 2px);\n}\n";
+//#endregion
 //#region src/orchestrator/theme-controller.ts
 const DARK_QUERY = "(prefers-color-scheme: dark)";
 var ThemeController = class {
@@ -2430,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;
@@ -2506,7 +2453,7 @@ let ZitadelLogin = class ZitadelLogin extends LitElement {
 		if (root instanceof ShadowRoot) {
 			const existing = Array.isArray(root.adoptedStyleSheets) ? root.adoptedStyleSheets : [];
 			const sheet = new CSSStyleSheet();
-			sheet.replaceSync(layoutChromeCss);
+			sheet.replaceSync(layout_chrome_default);
 			root.adoptedStyleSheets = [...existing, sheet];
 			root.addEventListener("zl-input", this.handleAtomInput);
 			root.addEventListener("zl-submit", this.handleAtomSubmit);
@@ -2535,9 +2482,12 @@ let ZitadelLogin = class ZitadelLogin extends LitElement {
 	* resolved language is used as the base; entries from the `locales` map (if
 	* set) are spread on top so partial overrides work without importing and
 	* spreading the full base dictionary.
+	*
+	* Priority: explicit `lang` attr → `navigator.language` (user preference)
+	* → `document.documentElement.lang` (page default) → English fallback.
 	*/
 	resolveLocale() {
-		const primary = ((this.lang || (typeof document !== "undefined" ? document.documentElement.lang : "") || (typeof navigator !== "undefined" ? navigator.language : "")).split("-")[0] ?? "").toLowerCase();
+		const primary = ((this.lang || (typeof navigator !== "undefined" ? navigator.language : "") || (typeof document !== "undefined" ? document.documentElement.lang : "")).split("-")[0] ?? "").toLowerCase();
 		const builtin = builtinLocales[primary] ?? en;
 		const custom = this.locales?.[primary];
 		return custom ? {
@@ -2559,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>
@@ -2586,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();
@@ -2605,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
 				});
 			}
@@ -2659,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);
@@ -2678,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);
@@ -2692,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,
@@ -2758,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;
@@ -2766,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);
@@ -2802,7 +2802,7 @@ let ZitadelLogin = class ZitadelLogin extends LitElement {
 	handlePasskeyResult = (event) => {
 		if (this.loading) return;
 		const { challenge_id, method, proof } = event.detail;
-		this.submit("submit", {
+		this.submit(method, {
 			challenge_id,
 			method,
 			proof
@@ -2844,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,
@@ -2866,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 {
@@ -2885,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"
@@ -2913,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
@@ -3064,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;
@@ -3190,22 +3210,25 @@ let ZitadelLogout = class ZitadelLogout extends LitElement {
 		this.errorMessage = "";
 	}
 	/**
-	* Calls the typed `endSession` operation (`GET /auth/end-session`) with
-	* `credentials: "include"`. The server clears the session cookie via
-	* `Set-Cookie: Max-Age=0`; on success this element fires `zitadel-signout`
-	* and optionally navigates to `postSignOutUrl`.
+	* Calls `DELETE /sessions/me` (`revokeMySession`) with `credentials: "include"`.
+	* The server validates the `__nextgen_session` cookie, deletes the session, and
+	* 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 = "";
-		const params = {
-			...this.clientId ? { client_id: this.clientId } : {},
-			...this.postSignOutUrl ? { post_logout_redirect_uri: this.postSignOutUrl } : {}
-		};
 		try {
-			const cfg = this.project ?? getZitadelConfig();
-			if (!cfg) throw new Error("<zitadel-logout> requires a `config` prop (from configureZitadel()).");
-			await getApi(cfg).endSession(params, { 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.";
@@ -3214,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;
 	}
 	/**
@@ -3236,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();
@@ -3303,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"
@@ -3331,6 +3357,6 @@ function fillTemplateTokens(fragment, name, email, initial) {
 	}
 }
 //#endregion
-export { startFlow as C, getCurrentStep as S, applyFontUrl as _, builtinLocales as a, buildBrandingStylesheet as b, TEMPLATE_NAMES as c, defaultTemplate as d, layoutChromeCss as f, patchMandatoryGates as g, mandatoryGatesMarkerComment as h, createSanitiser as i, signedInTemplate as l, MANDATORY_GATES_MARKER as m, ZitadelLogin as n, de as o, authFormTemplate as p, ThemeController as r, en as s, ZitadelLogout as t, passkeyUpsellTemplate as u, validateBranding as v, submitStep as w, resolveTheme as x, applyBrandingTokens as y };
+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-CNKo2WQG.mjs.map
+//# sourceMappingURL=orchestrator-BEvS2wA_.mjs.map