@zitadel/components 0.1.0-alpha.15 → 0.1.0-alpha.17

package/dist/{orchestrator-Ty4uM5n_.mjs → orchestrator-BWqJw4Yl.mjs}

@@ -1,6 +1,6 @@
-import { C as baseHostStyles, S as focusVisibleStyles, T as emit, w as t, x as __decorate } from "./atoms-BSwVl736.mjs";
-import { r as tokensCss } from "./tokens-C0j4iCrs.mjs";
-import { t as default_default } from "./default-BmX2ZEbg.mjs";
+import { C as focusVisibleStyles, E as emit, S as __decorate, T as t, d as hookName, w as baseHostStyles } from "./atoms-KC7OJWXZ.mjs";
+import { r as tokensCss } from "./tokens-CbH2s1jV.mjs";
+import { t as default_default } from "./default-CfF7GoLv.mjs";
 import { manifestRegistry } from "./manifests.mjs";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
@@ -97,6 +97,37 @@ function safeJsonParse(text) {
 		return { raw: text };
 	}
 }
+/**
+* Extracts the server's `{code, message, details}` envelope from an
+* {@link ApiError} into a display string. Falls back to the fetch layer's
+* `"METHOD url returned N"` when the body isn't shaped like an envelope, so
+* transport-level failures (HTML from a proxy, empty 5xx) still say
+* something.
+*/
+function apiErrorMessage(error) {
+	const body = error.body;
+	if (!isRecord(body)) return error.message;
+	const serverMessage = typeof body.message === "string" ? body.message : void 0;
+	const detail = pickDetailString(body.details);
+	if (!serverMessage) return error.message;
+	return detail ? `${serverMessage}: ${detail}` : serverMessage;
+}
+/**
+* Reads the innermost human-readable string out of the spec's error
+* `details` field. Handles both `details: "..."` and the nested
+* `details: { details: "..." }` shape the platform emits for validation
+* failures.
+*/
+function pickDetailString(details) {
+	if (typeof details === "string") return details;
+	if (isRecord(details)) {
+		if (typeof details.details === "string") return details.details;
+		if (typeof details.message === "string") return details.message;
+	}
+}
+function isRecord(value) {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
 //#endregion
 //#region src/orchestrator/api-client.ts
 const apiRequestInit = { credentials: "include" };
@@ -133,7 +164,7 @@ async function exchangeSession(api, body, params) {
 * orchestrator's signed-in surfaces to render the user's identity.
 */
 async function getSession$1(api) {
-	return await api.getMySession(apiRequestInit);
+	return api.getMySession(apiRequestInit);
 }
 /**
 * Revokes the current session (`DELETE /sessions/me`) with credentials. The
@@ -237,7 +268,9 @@ var zitadelNextGen_exports = /* @__PURE__ */ __exportAll({
 	getMySession: () => getMySession,
 	getMyUser: () => getMyUser,
 	getOpenIDConfiguration: () => getOpenIDConfiguration,
+	getPatchProjectUrl: () => getPatchProjectUrl,
 	getProject: () => getProject,
+	getQueryProjectsUrl: () => getQueryProjectsUrl,
 	getReady: () => getReady,
 	getRevokeMySessionUrl: () => getRevokeMySessionUrl,
 	getRevokeSessionUrl: () => getRevokeSessionUrl,
@@ -259,6 +292,8 @@ var zitadelNextGen_exports = /* @__PURE__ */ __exportAll({
 	listSchemas: () => listSchemas,
 	listSessions: () => listSessions,
 	listUsers: () => listUsers,
+	patchProject: () => patchProject,
+	queryProjects: () => queryProjects,
 	revokeMySession: () => revokeMySession,
 	revokeSession: () => revokeSession,
 	revokeToken: () => revokeToken,
@@ -797,6 +832,23 @@ const createProject = async (createProjectBody, options) => {
 		body: JSON.stringify(createProjectBody)
 	});
 };
+const getQueryProjectsUrl = () => {
+	return `${getProxyPath()}/projects/query`;
+};
+/**
+* @summary Query projects
+*/
+const queryProjects = async (queryProjectsBody, options) => {
+	return customFetch(getQueryProjectsUrl(), {
+		...options,
+		method: "POST",
+		headers: {
+			"Content-Type": "application/json",
+			...options?.headers
+		},
+		body: JSON.stringify(queryProjectsBody)
+	});
+};
 const getGetProjectUrl = (projectId) => {
 	return `${getProxyPath()}/projects/${projectId}`;
 };
@@ -811,6 +863,25 @@ const getProject = async (projectId, options) => {
 		method: "GET"
 	});
 };
+const getPatchProjectUrl = (projectId) => {
+	return `${getProxyPath()}/projects/${projectId}`;
+};
+/**
+* Updates the state of a project.
+
+* @summary Update project
+*/
+const patchProject = async (projectId, patchProjectBody, options) => {
+	return customFetch(getPatchProjectUrl(projectId), {
+		...options,
+		method: "PATCH",
+		headers: {
+			"Content-Type": "application/json",
+			...options?.headers
+		},
+		body: JSON.stringify(patchProjectBody)
+	});
+};
 const getCreateSessionUrl = () => {
 	return `${getProxyPath()}/sessions`;
 };
@@ -1815,6 +1886,21 @@ function lookup(locale, key) {
 * - Partials are loaded from an in-memory map; no filesystem access.
 */
 const TEMPLATE_NAMES$1 = { default: "default" };
+/**
+* Maps `error.*` text keys to a field name (Figma inline-error
+* annotations). Shared by the template filters (`fieldError` routes these
+* inline, `formLevelError` suppresses their banner) and by
+* {@link localiseFlowErrorKeys}, which must downgrade them to a banner
+* message when the step doesn't render the mapped field.
+*/
+const fieldErrorKeys = {
+	"error.email_required": "email",
+	"error.email_invalid": "email",
+	"error.email_exists": "email",
+	"error.password_required": "password",
+	"error.password_incorrect": "password",
+	"error.invalid_credentials": "password"
+};
 function createLiquidEngine(options) {
 	const engine = new Liquid({
 		templates: {
@@ -1831,7 +1917,7 @@ function createLiquidEngine(options) {
 	engine.registerFilter("raw", (value) => stringify(value));
 	engine.registerFilter("t", function tFilter(key, ...args) {
 		const lookupKey = stringify(key);
-		return interpolate(options.locale[lookupKey] ?? lookupKey, args.map(stringify));
+		return interpolate(options.locale[lookupKey] ?? injectedKeyFallback(options.locale, lookupKey) ?? fieldLabelFallback(lookupKey) ?? lookupKey, args.map(stringify));
 	});
 	/** Resolves `{text_key}.placeholder` — empty when undefined (not the raw key). */
 	engine.registerFilter("fieldPlaceholder", (textKey) => {
@@ -1859,15 +1945,6 @@ function createLiquidEngine(options) {
 			};
 		});
 	});
-	/** Maps `error.*` text keys to a field name (Figma inline-error annotations). */
-	const fieldErrorKeys = {
-		"error.email_required": "email",
-		"error.email_invalid": "email",
-		"error.email_exists": "email",
-		"error.password_required": "password",
-		"error.password_incorrect": "password",
-		"error.invalid_credentials": "password"
-	};
 	/** Resolves `{text_key}.title` for form-level `<zl-alert heading>`. */
 	engine.registerFilter("alertHeading", (textKey) => {
 		const lookupKey = `${stringify(textKey)}.title`;
@@ -1888,6 +1965,13 @@ function createLiquidEngine(options) {
 		}
 		return "";
 	});
+	/**
+	* Automation-hook token for a field name: strips the
+	* `x-auth-methods#` credential prefix so testids stay method-named
+	* (`zitadel-field-password`), while the `name` attribute keeps the
+	* raw wire key. See hookName for the contract.
+	*/
+	engine.registerFilter("testid", (fieldName) => hookName(stringify(fieldName)));
 	/** True when the error should render as `<zl-alert>`, not on a field. */
 	engine.registerFilter("formLevelError", (err) => {
 		const key = err?.text_key ?? "";
@@ -1901,6 +1985,123 @@ function createLiquidEngine(options) {
 	});
 	return engine;
 }
+/**
+* Fallbacks for text keys the flow engine derives from tenant-chosen step
+* names (`<step>.action.back` for the injected back action — see
+* `internal/domain/flow_state_machine.go` `buildStep`). Step names are open,
+* so no dictionary can enumerate them; a missing step-specific key falls back
+* to its generic entry instead of leaking the raw key into the UI.
+*/
+const INJECTED_KEY_FALLBACKS = [{
+	suffix: ".action.back",
+	fallback: "action.back"
+}];
+function injectedKeyFallback(locale, key) {
+	for (const { suffix, fallback } of INJECTED_KEY_FALLBACKS) if (key.endsWith(suffix)) return locale[fallback];
+}
+/**
+* Fallback for field-label keys (`<step>.field.<name>` — see
+* `FlowField.TextKey` in `internal/domain/flow_field_resolver.go`). Both
+* halves are tenant-chosen (step names and schema property names), so no
+* catalog can enumerate the keys; a miss renders a humanised property name
+* ("dateOfBirth" → "Date of birth") instead of leaking the raw key into the
+* form. Sub-keys like `.placeholder`/`.help` are excluded — they resolve
+* through their own filters, which stay empty on a miss.
+*/
+function fieldLabelFallback(key) {
+	const index = key.lastIndexOf(".field.");
+	if (index === -1) return void 0;
+	const field = key.slice(index + 7);
+	if (field === "" || field.includes(".")) return void 0;
+	return capitaliseFirst(humaniseFieldName(field));
+}
+/**
+* Rule-suffix fallbacks for the server's field-validation keys
+* (`error.<field>_<rule>` — see `FlowFieldValidationError.TextKey` in
+* `internal/domain/flow_field_resolver.go`). Field names come from the
+* tenant's user schema, so no catalog can enumerate the specific keys;
+* a miss resolves to the rule's generic entry, interpolated with the
+* field's label (`{0}`). The server spells the format rule `_invalid`
+* (the catalog's existing convention, e.g. `error.email_invalid`), so
+* that suffix takes the format wording; `_unknown_field` (a submitted
+* name that is not a step field) takes the catch-all.
+*/
+const FLOW_ERROR_RULE_FALLBACKS = [
+	{
+		suffix: "_required",
+		generic: "error.field_required"
+	},
+	{
+		suffix: "_min_length",
+		generic: "error.field_min_length"
+	},
+	{
+		suffix: "_max_length",
+		generic: "error.field_max_length"
+	},
+	{
+		suffix: "_format",
+		generic: "error.field_format"
+	},
+	{
+		suffix: "_invalid",
+		generic: "error.field_format"
+	},
+	{
+		suffix: "_unknown_field",
+		generic: "error.field_invalid"
+	}
+];
+const FLOW_ERROR_CATCH_ALL_KEY = "error.field_invalid";
+/**
+* Localises a `step.error` payload of `error.*` catalog keys —
+* field-validation violations and general engine failures (e.g.
+* `error.invalid_credentials`, `error.passkey_invalid`) alike.
+* Returns `null` unless EVERY `"; "`-joined segment is an `error.*` key
+* — the caller keeps other payloads (outcome tokens such as
+* `user_not_found`) verbatim.
+*
+* Keys the locale knows pass through as `text_key` entries: the template
+* localises them via `| t`, and `fieldErrorKeys` routes the known ones
+* inline to their field. Unknown keys with a recognised rule suffix are
+* pre-localised here from their generic {@link FLOW_ERROR_RULE_FALLBACKS}
+* entry; unknown keys without one pass through as `text_key` (matching
+* `| t`'s behaviour for non-validation keys such as
+* `error.sign_in_server`, which localises via `.title`/`.body`).
+*/
+function localiseFlowErrorKeys(raw, ctx) {
+	const segments = raw.split("; ");
+	if (!segments.every((segment) => segment.startsWith("error."))) return null;
+	return segments.map((key) => localiseFlowErrorKey(key, ctx));
+}
+function localiseFlowErrorKey(key, ctx) {
+	const inlineField = fieldErrorKeys[key];
+	const orphanedInline = inlineField !== void 0 && ctx.fields !== void 0 && !ctx.fields.includes(inlineField);
+	if (!orphanedInline && ctx.locale[key] !== void 0) return { text_key: key };
+	for (const { suffix, generic } of FLOW_ERROR_RULE_FALLBACKS) {
+		if (!key.endsWith(suffix)) continue;
+		const field = key.slice(6, key.length - suffix.length);
+		if (field === "") break;
+		return { message: capitaliseFirst(interpolate(ctx.locale[generic] ?? ctx.locale[FLOW_ERROR_CATCH_ALL_KEY] ?? "Please check {0}.", [fieldLabel(ctx, field)])) };
+	}
+	if (orphanedInline && ctx.locale[key] !== void 0) return { message: ctx.locale[key] };
+	return { text_key: key };
+}
+/** `<step>.field.<name>` from the locale, else a humanised field name. */
+function fieldLabel(ctx, field) {
+	return ctx.locale[`${ctx.stepName}.field.${field}`] ?? humaniseFieldName(field);
+}
+/**
+* `x-auth-methods#password` → "password", `givenName` → "given name",
+* `date_of_birth` → "date of birth".
+*/
+function humaniseFieldName(field) {
+	return (field.includes("#") ? field.split("#").pop() : field).replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/[_.-]+/g, " ").trim().toLowerCase();
+}
+/** Messages may open with a lowercase field label; sentence-case them. */
+function capitaliseFirst(text) {
+	return text.length > 0 ? text[0]?.toUpperCase() + text.slice(1) : text;
+}
 function stringify(value) {
 	if (value == null) return "";
 	if (typeof value === "string") return value;
@@ -1911,6 +2112,11 @@ function stringify(value) {
 		return String(value);
 	}
 }
+/**
+* Positional `{n}` substitution shared by the `| t` filter and the
+* pre-localising fallback in {@link localiseFlowErrorKeys}, so both
+* produce byte-identical output for the same template and args.
+*/
 function interpolate(template, args) {
 	if (args.length === 0) return template;
 	return template.replace(/\{(\d+)\}/g, (match, index) => {
@@ -2028,6 +2234,10 @@ const en = {
 	"signed-in.continue": "Continue",
 	"signed-in.logout": "Sign out",
 	"passkey-login.title": "Sign in with your passkey",
+	"passkey-first.title": "Sign in",
+	"passkey-first.description": "Use your passkey to continue",
+	"passkey-first.action.passkey": "Continue with passkey",
+	"passkey-first.action.email_fallback": "Use email instead",
 	"recover.title": "Check your email",
 	"recover.description": "We sent a password reset link to your email address.",
 	"recover.action.back": "Back to sign in",
@@ -2035,12 +2245,17 @@ const en = {
 	"submit.signin": "Sign in",
 	"action.forgot_password": "Forgot password?",
 	"action.cancel": "Cancel",
+	"action.back": "Back",
 	"sso.redirect.title": "Redirecting to your provider…",
-	"error.passkey_cancelled": "Passkey setup was cancelled",
+	"passkey.pending.status": "Waiting for your passkey…",
+	"error.passkey_cancelled": "The passkey prompt was closed before completing.",
+	"error.passkey_timeout": "The passkey request timed out. Please try again.",
 	"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.passkey_invalid": "This passkey could not be verified. Please try again.",
+	"error.passkey_registration_invalid": "The new passkey could not be verified. Please try registering it again.",
 	"error.email_required": "Please enter an email address",
 	"error.email_invalid": "Please enter a valid email",
 	"error.password_required": "Please enter a password",
@@ -2049,6 +2264,11 @@ const en = {
 	/** Figma sign-in error `6602:180268` — inline on password field. */
 	"error.invalid_credentials": "Wrong email or password.",
 	"error.required": "This field is required.",
+	"error.field_required": "{0} is required.",
+	"error.field_format": "Please enter a valid {0}.",
+	"error.field_min_length": "{0} is too short.",
+	"error.field_max_length": "{0} is too long.",
+	"error.field_invalid": "Please check {0}.",
 	"error.sign_in_server.title": "We couldn't complete your sign in.",
 	"error.sign_in_server.body": "Please try again in a few minutes"
 };
@@ -2130,6 +2350,10 @@ const de = {
 	"signed-in.continue": "Weiter",
 	"signed-in.logout": "Abmelden",
 	"passkey-login.title": "Mit Passkey anmelden",
+	"passkey-first.title": "Anmelden",
+	"passkey-first.description": "Verwende deinen Passkey, um fortzufahren",
+	"passkey-first.action.passkey": "Weiter mit Passkey",
+	"passkey-first.action.email_fallback": "Stattdessen E-Mail verwenden",
 	"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",
@@ -2137,12 +2361,17 @@ const de = {
 	"submit.signin": "Anmelden",
 	"action.forgot_password": "Passwort vergessen?",
 	"action.cancel": "Abbrechen",
+	"action.back": "Zurück",
 	"sso.redirect.title": "Weiterleitung zum Anbieter…",
-	"error.passkey_cancelled": "Passkey-Einrichtung wurde abgebrochen",
+	"passkey.pending.status": "Warten auf deinen Passkey…",
+	"error.passkey_cancelled": "Die Passkey-Abfrage wurde vorzeitig geschlossen.",
+	"error.passkey_timeout": "Die Passkey-Anfrage hat zu lange gedauert. Bitte versuche es erneut.",
 	"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.passkey_invalid": "Dieser Passkey konnte nicht bestätigt werden. Bitte versuche es erneut.",
+	"error.passkey_registration_invalid": "Der neue Passkey konnte nicht bestätigt werden. Bitte registriere ihn 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",
@@ -2150,6 +2379,11 @@ const de = {
 	"error.email_exists": "Ein Konto mit dieser E-Mail-Adresse existiert bereits.",
 	"error.invalid_credentials": "Falsche E-Mail oder falsches Passwort.",
 	"error.required": "Dieses Feld ist erforderlich.",
+	"error.field_required": "{0} ist erforderlich.",
+	"error.field_format": "Bitte gib einen gültigen Wert für {0} ein.",
+	"error.field_min_length": "{0} ist zu kurz.",
+	"error.field_max_length": "{0} ist zu lang.",
+	"error.field_invalid": "Bitte überprüfe {0}.",
 	"error.sign_in_server.title": "Anmeldung konnte nicht abgeschlossen werden.",
 	"error.sign_in_server.body": "Bitte versuche es in einigen Minuten erneut"
 };
@@ -2231,6 +2465,10 @@ const it = {
 	"signed-in.continue": "Continua",
 	"signed-in.logout": "Esci",
 	"passkey-login.title": "Accedi con la tua passkey",
+	"passkey-first.title": "Accedi",
+	"passkey-first.description": "Usa la tua passkey per continuare",
+	"passkey-first.action.passkey": "Continua con passkey",
+	"passkey-first.action.email_fallback": "Usa invece l'email",
 	"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",
@@ -2238,12 +2476,17 @@ const it = {
 	"submit.signin": "Accedi",
 	"action.forgot_password": "Password dimenticata?",
 	"action.cancel": "Annulla",
+	"action.back": "Indietro",
 	"sso.redirect.title": "Reindirizzamento al provider…",
-	"error.passkey_cancelled": "La configurazione della passkey è stata annullata",
+	"passkey.pending.status": "In attesa della tua passkey…",
+	"error.passkey_cancelled": "La richiesta della passkey è stata chiusa prima del completamento.",
+	"error.passkey_timeout": "La richiesta della passkey è scaduta. Riprova.",
 	"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.passkey_invalid": "Non è stato possibile verificare questa passkey. Riprova.",
+	"error.passkey_registration_invalid": "Non è stato possibile verificare la nuova passkey. Riprova a registrarla.",
 	"error.email_required": "Inserisci un indirizzo e-mail",
 	"error.email_invalid": "Inserisci un indirizzo e-mail valido",
 	"error.password_required": "Inserisci una password",
@@ -2251,6 +2494,11 @@ const it = {
 	"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.field_required": "{0} è obbligatorio.",
+	"error.field_format": "Inserisci un valore valido per {0}.",
+	"error.field_min_length": "{0} è troppo corto.",
+	"error.field_max_length": "{0} è troppo lungo.",
+	"error.field_invalid": "Controlla {0}.",
 	"error.sign_in_server.title": "Non è stato possibile completare l'accesso.",
 	"error.sign_in_server.body": "Riprova tra qualche minuto"
 };
@@ -2484,6 +2732,13 @@ let ZitadelLogin = class ZitadelLogin extends LitElement {
 	set purpose(value) {
 		this.#_purpose_accessor_storage = value;
 	}
+	#_flowName_accessor_storage = "";
+	get flowName() {
+		return this.#_flowName_accessor_storage;
+	}
+	set flowName(value) {
+		this.#_flowName_accessor_storage = value;
+	}
 	#_project_accessor_storage;
 	get project() {
 		return this.#_project_accessor_storage;
@@ -2591,6 +2846,8 @@ let ZitadelLogin = class ZitadelLogin extends LitElement {
 			sheet.replaceSync(layout_chrome_default);
 			root.adoptedStyleSheets = [...existing, sheet];
 			root.addEventListener("zl-input", this.handleAtomInput);
+			root.addEventListener("zl-change", this.handleAtomEdited);
+			root.addEventListener("zl-dismiss", this.handleAlertDismiss);
 			root.addEventListener("zl-submit", this.handleAtomSubmit);
 			root.addEventListener("click", this.handleDelegatedAction);
 			root.addEventListener("submit", this.handleFormSubmit);
@@ -2729,17 +2986,32 @@ let ZitadelLogin = class ZitadelLogin extends LitElement {
 				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: cfg.projectId,
-					purpose: this.purpose
+					purpose: this.purpose,
+					...this.flowName ? { flow_definition_name: this.flowName } : {}
 				});
 			}
 			this.applyResponse(wire);
 		} catch (error) {
-			this.handleTransportError(error);
+			this.handleTransportError(this.describeFlowSelectionError(error));
 		} finally {
 			this.loading = false;
 		}
 	}
+	/**
+	* When a `flow-name` lookup fails, the server's envelope only says
+	* "not found" / "purpose mismatch" — it cannot know the name came from
+	* an attribute. Rewrap those two codes with the attribute and the fix;
+	* every other error passes through untouched.
+	*/
+	describeFlowSelectionError(error) {
+		if (!this.flowName || !(error instanceof ApiError)) return error;
+		const code = typeof error.body === "object" && error.body !== null && "code" in error.body ? String(error.body.code) : "";
+		if (code === "flowdef.not_found") return /* @__PURE__ */ new Error(`<zitadel-login> flow-name="${this.flowName}" does not match any active flow definition in this project. Check the \`name\` in your flow file and that it has been applied (\`zitadel apply\`).`);
+		if (code === "flowdef.purpose_mismatch") return /* @__PURE__ */ new Error(`<zitadel-login> flow-name="${this.flowName}" matched a flow definition that does not serve purpose "${this.purpose}".`);
+		return error;
+	}
 	applyResponse(wire) {
+		this.stepErrorDismissed = false;
 		this.response = wire;
 		const { branding, issues } = validateBranding(wire.branding);
 		this.branding = branding;
@@ -2793,7 +3065,12 @@ 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 rawErrors = step.error ? localiseFlowErrorKeys(step.error, {
+			locale: this.resolveLocale(),
+			stepName: step.name ?? "",
+			fields: (step.fields ?? []).map((field) => field.name)
+		}) ?? [{ message: step.error }] : [];
+		const errors = this.loading && this.stepErrorDismissed ? [] : rawErrors;
 		const fields = step.fields ?? [];
 		const actions = step.actions ?? [];
 		const context = {
@@ -2887,6 +3164,17 @@ let ZitadelLogin = class ZitadelLogin extends LitElement {
 		if (native && native.value !== field.value) return native.value;
 		return typeof field.value === "string" ? field.value : void 0;
 	}
+	/**
+	* True once the user retired the current step error by editing a field or
+	* dismissing the alert. Deliberately NON-reactive: consulting reactive
+	* state in `renderStep` would change its output string on the first
+	* post-dismiss keystroke, and `unsafeHTML` would rebuild the whole step
+	* subtree — wiping typed values (`hydrateStepAfterRender` only re-applies
+	* them on response changes) and reconnecting atoms. Reset on every new
+	* response; consulted only by the `loading` re-render, which rebuilds
+	* anyway.
+	*/
+	stepErrorDismissed = false;
 	handleAtomInput = (event) => {
 		if (!event.detail) return;
 		const { name, value } = event.detail;
@@ -2896,11 +3184,41 @@ let ZitadelLogin = class ZitadelLogin extends LitElement {
 			[name]: value
 		};
 		this.syncFieldElementValue(name, value);
+		this.clearStaleErrors(name);
 		emit(this, "zitadel-flow-input", {
 			name,
 			value
 		});
 	};
+	/** `zl-change` from <zl-checkbox>/<zl-select>: only error clearing. */
+	handleAtomEdited = (event) => {
+		const name = event.detail?.name;
+		if (name) this.clearStaleErrors(name);
+	};
+	/** Explicit dismiss of the step-error alert (it removes itself). */
+	handleAlertDismiss = (event) => {
+		if (event.target?.matches?.("zl-alert[data-zl-step-error]")) this.stepErrorDismissed = true;
+	};
+	/**
+	* Retire the current step error after the user edits `fieldName`:
+	* remove the form-level alert(s) and clear the edited field's inline
+	* error — other fields' inline errors stay until they are edited.
+	* Imperative on purpose; see {@link stepErrorDismissed}.
+	*/
+	clearStaleErrors(fieldName) {
+		if (!this.response?.step.error) return;
+		const root = this.shadowRoot;
+		if (!root) return;
+		if (!this.stepErrorDismissed) {
+			this.stepErrorDismissed = true;
+			for (const alert of root.querySelectorAll("zl-alert[data-zl-step-error]")) alert.remove();
+		}
+		for (const field of root.querySelectorAll("zl-field")) {
+			if (field.getAttribute("name") !== fieldName || !field.invalid) continue;
+			field.invalid = false;
+			field.error = "";
+		}
+	}
 	syncFieldElementValue(name, value) {
 		const root = this.shadowRoot;
 		if (!root) return;
@@ -2960,9 +3278,10 @@ let ZitadelLogin = class ZitadelLogin extends LitElement {
 	*/
 	handlePasskeyError = (event) => {
 		if (!this.response) return;
-		const { error: message, aborted } = event.detail;
-		const errorKey = aborted ? "error.passkey_cancelled" : "error.passkey_failed";
+		const { error: message, aborted, timed_out: timedOut } = event.detail;
+		const errorKey = timedOut ? "error.passkey_timeout" : aborted ? "error.passkey_cancelled" : "error.passkey_failed";
 		if (this.response.step.error === errorKey) return;
+		this.stepErrorDismissed = false;
 		const { challenge: _dropped, ...stepWithoutChallenge } = this.response.step;
 		this.response = {
 			...this.response,
@@ -2971,7 +3290,7 @@ let ZitadelLogin = class ZitadelLogin extends LitElement {
 				error: errorKey
 			}
 		};
-		console.warn(`[zitadel-login] passkey ceremony ${aborted ? "cancelled" : "failed"}: ${message}`);
+		console.warn(`[zitadel-login] passkey ceremony ${timedOut ? "timed out" : aborted ? "cancelled" : "failed"}: ${message}`);
 	};
 	findPrimaryAction() {
 		const root = this.shadowRoot;
@@ -3013,13 +3332,17 @@ let ZitadelLogin = class ZitadelLogin extends LitElement {
 		}
 	}
 	handleTransportError(error) {
-		const message = error instanceof Error ? error.message : "Unexpected error contacting the Flow API.";
+		const message = error instanceof ApiError ? apiErrorMessage(error) : error instanceof Error ? error.message : "Unexpected error contacting the Flow API.";
 		this.startupError = message;
 		console.error("[zitadel-login]", error);
 		emit(this, "zitadel-flow-error", { message });
 	}
 };
 __decorate([property({ type: String })], ZitadelLogin.prototype, "purpose", null);
+__decorate([property({
+	type: String,
+	attribute: "flow-name"
+})], ZitadelLogin.prototype, "flowName", null);
 __decorate([property({ attribute: false })], ZitadelLogin.prototype, "project", null);
 __decorate([property({
 	type: String,
@@ -3774,4 +4097,4 @@ ZitadelSession = __decorate([customElement("zitadel-session")], ZitadelSession);
 //#endregion
 export { submitStep as S, applyBrandingTokens as _, layout_chrome_default as a, getCurrentStep as b, it as c, TEMPLATE_NAMES as d, MANDATORY_GATES_MARKER as f, validateBranding as g, applyFontUrl as h, ThemeController as i, de as l, patchMandatoryGates as m, ZitadelLogout as n, createSanitiser as o, mandatoryGatesMarkerComment as p, ZitadelLogin as r, builtinLocales as s, ZitadelSession as t, en as u, buildBrandingStylesheet as v, startFlow as x, resolveTheme as y };
 
-//# sourceMappingURL=orchestrator-Ty4uM5n_.mjs.map
+//# sourceMappingURL=orchestrator-BWqJw4Yl.mjs.map