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

package/dist/standalone.mjs

@@ -823,7 +823,8 @@ const tokens = {
 	"container": {
 		"authCard": "24rem",
 		"page": "80rem"
-	}
+	},
+	"layout": {}
 };
 const cssVars = {
 	"color": {
@@ -942,9 +943,10 @@ const cssVars = {
 	"container": {
 		"authCard": "var(--zl-container-auth-card)",
 		"page": "var(--zl-container-page)"
-	}
+	},
+	"layout": {}
 };
-const tokensCss = "/* AUTOGENERATED by packages/design-tokens/scripts/build.ts — do not edit by hand.\n   Source: src/generated/figma.tokens.json + src/overrides.ts.\n   Re-run: moon run design-tokens:generate */\n\n:root,\n[data-theme=\"dark\"] {\n  --zl-color-surface-default-black: #0f0f11;\n  --zl-color-surface-default-white: #f4f4f6;\n  --zl-color-surface-default-primary-gray: #252528;\n  --zl-color-surface-default-secondary-gray: #37373a;\n  --zl-color-text-primary-white: #f4f4f6;\n  --zl-color-text-secondary-gray: #bfbfcf;\n  --zl-color-text-button-default: #0f0f11;\n  --zl-color-text-button-invert: #f4f4f6;\n  --zl-color-text-disabled: #686883;\n  --zl-color-text-error: #ea4f70;\n  --zl-color-text-success: #33a779;\n  --zl-color-text-subtitle-pink: #f48aa0;\n  --zl-color-text-subtitle-purple: #bba5e4;\n  --zl-color-text-subtitle-gray: #bfbfcf;\n  --zl-color-text-subtitle-orange: #f25543;\n  --zl-color-icon-default-black: #0f0f11;\n  --zl-color-icon-default-white: #f4f4f6;\n  --zl-color-icon-default-gray: #bfbfcf;\n  --zl-color-icon-default-pink: #f48aa0;\n  --zl-color-icon-default-purple: #bba5e4;\n  --zl-color-icon-default-orange: #f25543;\n  --zl-color-icon-disabled: #686883;\n  --zl-color-icon-error: #ea4f70;\n  --zl-color-icon-success: #33a779;\n  --zl-color-border-default-black: #252528;\n  --zl-color-border-default-white: #f4f4f6;\n  --zl-color-border-default-gray-100: #37373a;\n  --zl-color-border-default-gray-200: #484a57;\n  --zl-color-border-default-gray-300: #686883;\n  --zl-color-border-default-gray-400: #82829c;\n  --zl-color-border-error: #ea4f70;\n  --zl-color-border-success: #33a779;\n  --zl-color-gray-50: #0f0f11;\n  --zl-color-gray-75: #252528;\n  --zl-color-gray-100: #37373a;\n  --zl-color-gray-200: #484a57;\n  --zl-color-gray-300: #686883;\n  --zl-color-gray-400: #82829c;\n  --zl-color-gray-500: #9e9eb2;\n  --zl-color-gray-600: #cfcfde;\n  --zl-color-gray-700: #bfbfcf;\n  --zl-color-gray-800: #e1e1e7;\n  --zl-color-gray-900: #f4f4f6;\n  --zl-spacing-01: 0.25rem;\n  --zl-spacing-02: 0.5rem;\n  --zl-spacing-03: 1rem;\n  --zl-spacing-04: 1.5rem;\n  --zl-spacing-05: 2rem;\n  --zl-spacing-06: 1.5rem;\n  --zl-spacing-07: 2.5rem;\n  --zl-spacing-08: 3rem;\n  --zl-spacing-09: 3.5rem;\n  --zl-spacing-10: 4rem;\n  --zl-spacing-11: 5rem;\n  --zl-spacing-12: 5.5rem;\n  --zl-spacing-13: 6rem;\n  --zl-spacing-14: 6.5rem;\n  --zl-spacing-15: 7rem;\n  --zl-spacing-16: 7.5rem;\n  --zl-radius-xs: 0.25rem;\n  --zl-radius-s: 0.5rem;\n  --zl-radius-m: 0.75rem;\n  --zl-radius-l: 1rem;\n  --zl-radius-xl: 1.5rem;\n  --zl-font-family-sans: \"Arimo\", system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif;\n  --zl-font-family-heading: \"Arimo\", system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif;\n  --zl-font-family-mono: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n  --zl-duration-instant: 0ms;\n  --zl-duration-fast: 120ms;\n  --zl-duration-base: 200ms;\n  --zl-duration-slow: 320ms;\n  --zl-easing-standard: cubic-bezier(0.2, 0, 0, 1);\n  --zl-easing-decelerate: cubic-bezier(0, 0, 0, 1);\n  --zl-easing-accelerate: cubic-bezier(0.3, 0, 1, 1);\n  --zl-focus-width: 2px;\n  --zl-focus-offset: 2px;\n  --zl-focus-color: #f4f4f6;\n  --zl-breakpoint-xs: 26.5625rem;\n  --zl-breakpoint-sm: 40rem;\n  --zl-breakpoint-md: 48rem;\n  --zl-breakpoint-lg: 64rem;\n  --zl-breakpoint-xl: 80rem;\n  --zl-breakpoint-2xl: 96rem;\n  --zl-breakpoint-3xl: 120rem;\n  --zl-breakpoint-4xl: 160rem;\n  --zl-container-auth-card: 24rem;\n  --zl-container-page: 80rem;\n}\n\n[data-theme=\"light\"] {\n  /* Reserved. Light mode lands when the Figma design system publishes\n     a light variable mode; the next sync will populate this block. */\n}\n";
+const tokensCss = "/* AUTOGENERATED by packages/design-tokens/scripts/build.ts — do not edit by hand.\n   Source: src/generated/figma.tokens.json + src/overrides.ts.\n   Re-run: moon run design-tokens:generate */\n\n:root,\n[data-theme=\"dark\"] {\n  --zl-color-surface-default-black: #0f0f11;\n  --zl-color-surface-default-white: #f4f4f6;\n  --zl-color-surface-default-primary-gray: #252528;\n  --zl-color-surface-default-secondary-gray: #37373a;\n  --zl-color-text-primary-white: #f4f4f6;\n  --zl-color-text-secondary-gray: #bfbfcf;\n  --zl-color-text-button-default: #0f0f11;\n  --zl-color-text-button-invert: #f4f4f6;\n  --zl-color-text-disabled: #686883;\n  --zl-color-text-error: #ea4f70;\n  --zl-color-text-success: #33a779;\n  --zl-color-text-subtitle-pink: #f48aa0;\n  --zl-color-text-subtitle-purple: #bba5e4;\n  --zl-color-text-subtitle-gray: #bfbfcf;\n  --zl-color-text-subtitle-orange: #f25543;\n  --zl-color-icon-default-black: #0f0f11;\n  --zl-color-icon-default-white: #f4f4f6;\n  --zl-color-icon-default-gray: #bfbfcf;\n  --zl-color-icon-default-pink: #f48aa0;\n  --zl-color-icon-default-purple: #bba5e4;\n  --zl-color-icon-default-orange: #f25543;\n  --zl-color-icon-disabled: #686883;\n  --zl-color-icon-error: #ea4f70;\n  --zl-color-icon-success: #33a779;\n  --zl-color-border-default-black: #252528;\n  --zl-color-border-default-white: #f4f4f6;\n  --zl-color-border-default-gray-100: #37373a;\n  --zl-color-border-default-gray-200: #484a57;\n  --zl-color-border-default-gray-300: #686883;\n  --zl-color-border-default-gray-400: #82829c;\n  --zl-color-border-error: #ea4f70;\n  --zl-color-border-success: #33a779;\n  --zl-color-gray-50: #0f0f11;\n  --zl-color-gray-75: #252528;\n  --zl-color-gray-100: #37373a;\n  --zl-color-gray-200: #484a57;\n  --zl-color-gray-300: #686883;\n  --zl-color-gray-400: #82829c;\n  --zl-color-gray-500: #9e9eb2;\n  --zl-color-gray-600: #cfcfde;\n  --zl-color-gray-700: #bfbfcf;\n  --zl-color-gray-800: #e1e1e7;\n  --zl-color-gray-900: #f4f4f6;\n  --zl-spacing-01: 0.25rem;\n  --zl-spacing-02: 0.5rem;\n  --zl-spacing-03: 1rem;\n  --zl-spacing-04: 1.5rem;\n  --zl-spacing-05: 2rem;\n  --zl-spacing-06: 1.5rem;\n  --zl-spacing-07: 2.5rem;\n  --zl-spacing-08: 3rem;\n  --zl-spacing-09: 3.5rem;\n  --zl-spacing-10: 4rem;\n  --zl-spacing-11: 5rem;\n  --zl-spacing-12: 5.5rem;\n  --zl-spacing-13: 6rem;\n  --zl-spacing-14: 6.5rem;\n  --zl-spacing-15: 7rem;\n  --zl-spacing-16: 7.5rem;\n  --zl-radius-xs: 0.25rem;\n  --zl-radius-s: 0.5rem;\n  --zl-radius-m: 0.75rem;\n  --zl-radius-l: 1rem;\n  --zl-radius-xl: 1.5rem;\n  --zl-font-family-sans: \"Arimo\", system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif;\n  --zl-font-family-heading: \"Arimo\", system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif;\n  --zl-font-family-mono: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n  --zl-duration-instant: 0ms;\n  --zl-duration-fast: 120ms;\n  --zl-duration-base: 200ms;\n  --zl-duration-slow: 320ms;\n  --zl-easing-standard: cubic-bezier(0.2, 0, 0, 1);\n  --zl-easing-decelerate: cubic-bezier(0, 0, 0, 1);\n  --zl-easing-accelerate: cubic-bezier(0.3, 0, 1, 1);\n  --zl-focus-width: 2px;\n  --zl-focus-offset: 2px;\n  --zl-focus-color: #f4f4f6;\n  --zl-breakpoint-xs: 26.5625rem;\n  --zl-breakpoint-sm: 40rem;\n  --zl-breakpoint-md: 48rem;\n  --zl-breakpoint-lg: 64rem;\n  --zl-breakpoint-xl: 80rem;\n  --zl-breakpoint-2xl: 96rem;\n  --zl-breakpoint-3xl: 120rem;\n  --zl-breakpoint-4xl: 160rem;\n  --zl-container-auth-card: 24rem;\n  --zl-container-page: 80rem;\n}\n\n[data-theme=\"light\"] {\n}\n";
 //#endregion
 //#region src/styles/tokens.ts
 function wrap(node) {
@@ -2056,6 +2058,36 @@ var text_field_host_default = ":host {\n  display: block;\n}\n\n::slotted([slot=
 //#region ../shared-component-styles/src/text-field.css?inline
 var text_field_default = ".zr-field {\n  align-items: stretch;\n  gap: var(--zl-spacing-02, .5rem);\n  font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n  flex-direction: column;\n  display: flex;\n}\n\n.zr-field__label-row {\n  justify-content: space-between;\n  align-items: flex-start;\n  gap: var(--zl-spacing-02, .5rem);\n  width: 100%;\n  display: flex;\n}\n\n.zr-field__label {\n  align-items: center;\n  gap: var(--zl-spacing-01, .25rem);\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  font-size: 1rem;\n  font-weight: 600;\n  line-height: 1.5rem;\n  display: inline-flex;\n}\n\n.zr-field__link {\n  color: var(--zl-color-icon-default-purple, #bba5e4);\n  flex-shrink: 0;\n  font-size: .875rem;\n  font-weight: 400;\n  line-height: 1.25rem;\n  text-decoration: none;\n}\n\n.zr-field__link:hover {\n  text-decoration: underline;\n}\n\n.zr-field__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  border-radius: 2px;\n}\n\n.zr-field__required {\n  color: var(--zl-color-text-error, #ea4f70);\n}\n\n.zr-field--disabled .zr-field__label {\n  color: var(--zl-color-text-disabled, #686883);\n}\n\n.zr-field__wrap {\n  align-items: center;\n  gap: var(--zl-spacing-02, .5rem);\n  padding-block: var(--zl-spacing-02, .5rem);\n  padding-inline: var(--zl-spacing-03, 1rem);\n  border-radius: var(--zl-radius-xs, .25rem);\n  border: 1px solid var(--zl-color-border-default-gray-300, #686883);\n  height: 2.5rem;\n  transition: border-color var(--zl-duration-fast, .12s) var(--zl-easing-standard, cubic-bezier(.2, 0, 0, 1)),\n    background-color var(--zl-duration-fast, .12s) var(--zl-easing-standard, cubic-bezier(.2, 0, 0, 1));\n  box-sizing: border-box;\n  background: none;\n  display: flex;\n  position: relative;\n  overflow: visible;\n}\n\n.zr-field__wrap--trailing {\n  padding-inline-end: 2.5rem;\n}\n\n.zr-field:not(.zr-field--disabled) .zr-field__wrap:hover:not(:focus-within) {\n  border-color: var(--zl-color-gray-500, #9e9eb2);\n  background-color: color-mix(in srgb, var(--zl-color-text-primary-white, #f4f4f6) 10%, transparent);\n}\n\n.zr-field:not(.zr-field--invalid):not(.zr-field--disabled):not(.zr-field--success) .zr-field__wrap:has(.zr-field__input:not(:placeholder-shown)):not(:focus-within) {\n  border-color: var(--zl-color-border-default-gray-400, #82829c);\n}\n\n.zr-field:not(.zr-field--invalid):not(.zr-field--disabled):not(.zr-field--success) .zr-field__wrap:focus-within {\n  border-color: var(--zl-color-border-default-white, #f4f4f6);\n  outline: none;\n}\n\n.zr-field--invalid .zr-field__wrap {\n  border-color: var(--zl-color-border-error, #ea4f70);\n}\n\n.zr-field--invalid .zr-field__wrap:focus-within {\n  border-color: var(--zl-color-border-error, #ea4f70);\n  outline: none;\n}\n\n.zr-field--success .zr-field__wrap {\n  border-color: var(--zl-color-border-success, #33a779);\n}\n\n.zr-field--success .zr-field__wrap:focus-within {\n  border-color: var(--zl-color-border-success, #33a779);\n  outline: none;\n}\n\n.zr-field--disabled .zr-field__wrap {\n  border-color: var(--zl-color-border-default-gray-200, #484a57);\n}\n\n.zr-field__input {\n  min-width: 0;\n  height: 100%;\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  background: none;\n  border: 0;\n  outline: none;\n  flex: auto;\n  padding: 0;\n  font-family: inherit;\n  font-size: .875rem;\n  font-weight: 400;\n  line-height: 1.25rem;\n}\n\n.zr-field__input[type=\"password\"] {\n  letter-spacing: .125rem;\n}\n\n.zr-field__input::placeholder {\n  color: var(--zl-color-text-secondary-gray, #bfbfcf);\n}\n\n.zr-field__input:focus, .zr-field__input:focus-visible {\n  outline: none;\n}\n\n.zr-field__input:disabled {\n  cursor: not-allowed;\n  color: var(--zl-color-text-disabled, #686883);\n}\n\n.zr-field--disabled .zr-field__wrap:hover {\n  border-color: var(--zl-color-border-default-gray-200, #484a57);\n  background-color: #0000;\n}\n\n.zr-field__trailing {\n  width: 1rem;\n  height: 1rem;\n  color: var(--zl-color-text-secondary-gray, #bfbfcf);\n  justify-content: center;\n  align-items: center;\n  display: inline-flex;\n  position: absolute;\n  top: 50%;\n  right: .9375rem;\n  transform: translateY(-50%);\n}\n\n.zr-field__trailing-action {\n  color: inherit;\n  cursor: pointer;\n  background: none;\n  border: 0;\n  justify-content: center;\n  align-items: center;\n  margin: 0;\n  padding: 0;\n  line-height: 0;\n  display: inline-flex;\n}\n\n.zr-field__trailing-action:focus-visible {\n  outline: var(--zl-focus-width, 2px) solid var(--zl-focus-color, #f4f4f6);\n  outline-offset: var(--zl-focus-offset, 2px);\n  border-radius: 2px;\n}\n\n.zr-field__trailing-action:disabled {\n  cursor: not-allowed;\n}\n\n.zr-field--invalid .zr-field__trailing {\n  color: var(--zl-color-text-error, #ea4f70);\n}\n\n.zr-field--success .zr-field__trailing {\n  color: var(--zl-color-text-success, #33a779);\n}\n\n.zr-field__help {\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  font-size: .75rem;\n  line-height: 1rem;\n}\n\n.zr-field__success {\n  color: var(--zl-color-text-success, #33a779);\n  font-size: .75rem;\n  line-height: 1rem;\n}\n\n.zr-field__error {\n  color: var(--zl-color-text-error, #ea4f70);\n  font-size: .75rem;\n  line-height: 1rem;\n}\n";
 //#endregion
+//#region src/internal/hook-name.ts
+/**
+* Reserved auth-method credential prefix of flow field names. Mirrors
+* `AUTH_METHOD_PREFIX` in `@zitadel/config` (`src/validate.ts`), which
+* owns the wire dialect; components has no dependency on that package,
+* so the literal is repeated here.
+*/
+const AUTH_METHOD_PREFIX = "x-auth-methods#";
+/**
+* Normalises a flow field name into its automation-hook token.
+*
+* Auth-method credential fields arrive from the flow engine as
+* `x-auth-methods#<method>` (e.g. `x-auth-methods#password`), but the
+* documented `data-testid` hooks are method-named
+* (`zitadel-field-password`, `zitadel-input-password` — see
+* packages/components/README.md and apps/cli/SKILLS.md). This helper
+* feeds both hook construction sites: the bundled template's `testid`
+* Liquid filter and `<zl-field>`'s native-input testid.
+*
+* Only the reserved credential prefix is stripped — user-schema
+* property names are tenant-authored arbitrary strings, so a `#`
+* anywhere else is part of the name and stays in the hook. The
+* after-prefix token is used verbatim (no case or spacing changes),
+* and the field's `name` attribute always keeps the raw wire/form key.
+*/
+function hookName(field) {
+	if (field.startsWith(AUTH_METHOD_PREFIX) && field.length > 15) return field.slice(15);
+	return field;
+}
+//#endregion
 //#region src/atoms/zl-field.ts
 let ZlField = class ZlField extends i$2 {
 	static formAssociated = true;
@@ -2395,7 +2427,7 @@ let ZlField = class ZlField extends i$2 {
 		}
 	};
 	nativeInputTestId() {
-		if (this.name) return `zitadel-input-${this.name}`;
+		if (this.name) return `zitadel-input-${hookName(this.name)}`;
 		if (this.testId) return `${this.testId}-input`;
 	}
 	dispatchNativeInput(source) {
@@ -2583,6 +2615,13 @@ function base64UrlToBuffer(base64url) {
 }
 //#endregion
 //#region src/atoms/zl-passkey.ts
+/**
+* Slack subtracted from `options.timeout` when classifying a
+* `NotAllowedError` as a timeout: browsers clamp and fire the deadline
+* slightly early, so an exact comparison would label real timeouts as
+* user cancellations.
+*/
+const TIMEOUT_GRACE_MS = 1e3;
 let ZlPasskey = class ZlPasskey extends i$2 {
 	#_ceremony_accessor_storage = "authenticate";
 	get ceremony() {
@@ -2619,7 +2658,37 @@ let ZlPasskey = class ZlPasskey extends i$2 {
 	set manual(value) {
 		this.#_manual_accessor_storage = value;
 	}
+	#_pendingLabel_accessor_storage = "Waiting for your passkey…";
+	get pendingLabel() {
+		return this.#_pendingLabel_accessor_storage;
+	}
+	set pendingLabel(value) {
+		this.#_pendingLabel_accessor_storage = value;
+	}
+	#_cancelLabel_accessor_storage = "Cancel";
+	get cancelLabel() {
+		return this.#_cancelLabel_accessor_storage;
+	}
+	set cancelLabel(value) {
+		this.#_cancelLabel_accessor_storage = value;
+	}
+	#_silent_accessor_storage = false;
+	get silent() {
+		return this.#_silent_accessor_storage;
+	}
+	set silent(value) {
+		this.#_silent_accessor_storage = value;
+	}
+	#_pending_accessor_storage = false;
+	get pending() {
+		return this.#_pending_accessor_storage;
+	}
+	set pending(value) {
+		this.#_pending_accessor_storage = value;
+	}
 	abortController = null;
+	/** `Date.now()` at ceremony start, for timeout classification on reject. */
+	startedAt = 0;
 	connectedCallback() {
 		super.connectedCallback();
 		if (!this.manual && this.options) this.startCeremony();
@@ -2630,11 +2699,14 @@ let ZlPasskey = class ZlPasskey extends i$2 {
 	}
 	/**
 	* Abort any in-flight WebAuthn ceremony. Called automatically when the
-	* component disconnects (step change, page navigation).
+	* component disconnects (step change, page navigation) and by the
+	* pending UI's cancel button. Clears `pending` immediately — the
+	* ceremony's own `finally` no longer owns it (its controller is gone).
 	*/
 	abort() {
 		this.abortController?.abort();
 		this.abortController = null;
+		this.pending = false;
 	}
 	/**
 	* Trigger the WebAuthn ceremony. Resolves when the ceremony completes
@@ -2650,7 +2722,11 @@ let ZlPasskey = class ZlPasskey extends i$2 {
 			return;
 		}
 		this.abort();
-		this.abortController = new AbortController();
+		const controller = new AbortController();
+		this.abortController = controller;
+		this.pending = true;
+		this.startedAt = Date.now();
+		this.emitStarted();
 		try {
 			const credential = this.ceremony === "register" ? await this.createCredential() : await this.getCredential();
 			if (!credential) {
@@ -2661,9 +2737,33 @@ let ZlPasskey = class ZlPasskey extends i$2 {
 			this.emitResult(proof);
 		} catch (error) {
 			const aborted = error instanceof DOMException && (error.name === "AbortError" || error.name === "NotAllowedError");
-			this.emitError(error instanceof Error ? error.message : "WebAuthn ceremony failed.", aborted);
+			const timeoutMs = typeof this.options?.timeout === "number" ? this.options.timeout : null;
+			const timedOut = error instanceof DOMException && error.name === "NotAllowedError" && timeoutMs !== null && Date.now() - this.startedAt >= timeoutMs - TIMEOUT_GRACE_MS;
+			this.emitError(error instanceof Error ? error.message : "WebAuthn ceremony failed.", aborted, timedOut);
+		} finally {
+			if (this.abortController === controller) this.pending = false;
 		}
 	}
+	handleCancelSubmit = (event) => {
+		event.stopPropagation();
+		this.abort();
+	};
+	render() {
+		if (!this.pending || this.silent) return A;
+		return b`
+      <div class="zl-passkey-pending" data-testid="zitadel-passkey-pending">
+        <zl-alert severity="info">${this.pendingLabel}</zl-alert>
+        <zl-button
+          hierarchy="secondary"
+          type="button"
+          block
+          data-testid="zitadel-passkey-cancel"
+          label=${this.cancelLabel}
+          @zl-submit=${this.handleCancelSubmit}
+        ></zl-button>
+      </div>
+    `;
+	}
 	/**
 	* `navigator.credentials.get()` — authentication ceremony.
 	*/
@@ -2765,11 +2865,12 @@ let ZlPasskey = class ZlPasskey extends i$2 {
 			detail
 		}));
 	}
-	emitError(message, aborted) {
+	emitError(message, aborted, timedOut = false) {
 		const detail = {
 			challenge_id: this.challengeId,
 			error: message,
-			aborted
+			aborted,
+			timed_out: timedOut
 		};
 		this.dispatchEvent(new CustomEvent("zl-passkey-error", {
 			bubbles: true,
@@ -2777,7 +2878,23 @@ let ZlPasskey = class ZlPasskey extends i$2 {
 			detail
 		}));
 	}
-	/** Invisible component — no shadow DOM rendering needed. */
+	emitStarted() {
+		const detail = {
+			challenge_id: this.challengeId,
+			method: this.method
+		};
+		this.dispatchEvent(new CustomEvent("zl-passkey-started", {
+			bubbles: true,
+			composed: true,
+			detail
+		}));
+	}
+	/**
+	* Light DOM on purpose: the pending UI must land inside the
+	* orchestrator's shadow root (where the step's adopted styles apply)
+	* without altering the `unsafeHTML` step markup — runtime children don't
+	* participate in its string comparison, so the ceremony never restarts.
+	*/
 	createRenderRoot() {
 		return this;
 	}
@@ -2802,6 +2919,10 @@ __decorate([n$1({
 })], ZlPasskey.prototype, "options", null);
 __decorate([n$1({ type: String })], ZlPasskey.prototype, "method", null);
 __decorate([n$1({ type: Boolean })], ZlPasskey.prototype, "manual", null);
+__decorate([n$1({ attribute: "pending-label" })], ZlPasskey.prototype, "pendingLabel", null);
+__decorate([n$1({ attribute: "cancel-label" })], ZlPasskey.prototype, "cancelLabel", null);
+__decorate([n$1({ type: Boolean })], ZlPasskey.prototype, "silent", null);
+__decorate([r$1()], ZlPasskey.prototype, "pending", null);
 ZlPasskey = __decorate([t$4("zl-passkey")], ZlPasskey);
 const zlPasskeyManifest = {
 	tag: "zl-passkey",
@@ -2811,11 +2932,18 @@ const zlPasskeyManifest = {
 		"method",
 		"challenge-id",
 		"options",
-		"manual"
+		"manual",
+		"pending-label",
+		"cancel-label",
+		"silent"
 	],
 	parts: [],
 	slots: [],
-	events: ["zl-passkey-result", "zl-passkey-error"]
+	events: [
+		"zl-passkey-result",
+		"zl-passkey-error",
+		"zl-passkey-started"
+	]
 };
 //#endregion
 //#region ../shared-component-styles/src/lit/pill-host.css?inline
@@ -3365,6 +3493,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" };
@@ -3401,7 +3560,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
@@ -3505,7 +3664,9 @@ var zitadelNextGen_exports = /* @__PURE__ */ __exportAll({
 	getMySession: () => getMySession,
 	getMyUser: () => getMyUser,
 	getOpenIDConfiguration: () => getOpenIDConfiguration,
+	getPatchProjectUrl: () => getPatchProjectUrl,
 	getProject: () => getProject,
+	getQueryProjectsUrl: () => getQueryProjectsUrl,
 	getReady: () => getReady,
 	getRevokeMySessionUrl: () => getRevokeMySessionUrl,
 	getRevokeSessionUrl: () => getRevokeSessionUrl,
@@ -3527,6 +3688,8 @@ var zitadelNextGen_exports = /* @__PURE__ */ __exportAll({
 	listSchemas: () => listSchemas,
 	listSessions: () => listSessions,
 	listUsers: () => listUsers,
+	patchProject: () => patchProject,
+	queryProjects: () => queryProjects,
 	revokeMySession: () => revokeMySession,
 	revokeSession: () => revokeSession,
 	revokeToken: () => revokeToken,
@@ -4065,6 +4228,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}`;
 };
@@ -4079,6 +4259,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`;
 };
@@ -9506,7 +9705,7 @@ function lookup(locale, key) {
 }
 //#endregion
 //#region src/orchestrator/templates/default.liquid
-var default_default = "<zl-page-shell data-zl-template-root>\n  {% if branding.logo_url %}\n    <img slot=\"header\" class=\"zl-card-logo\" src=\"{{ branding.logo_url }}\" alt=\"\" />\n  {% endif %}\n  <zl-card>\n    <h1 slot=\"header\" class=\"zl-card-title\">{{ step.texts.title_key | t: identity.display_name }}</h1>\n    {% if step.texts.description_key %}\n      {% assign card_subtitle = step.texts.description_key | t: identity.display_name %}\n      {% if card_subtitle != \"\" %}\n        <p slot=\"header\" class=\"zl-card-subtitle\">{{ card_subtitle }}</p>\n      {% endif %}\n    {% endif %}\n\n    {% if errors and errors.size > 0 %}\n      {% for err in errors %}\n        {% if err | formLevelError %}\n          {% assign alert_heading = err.text_key | alertHeading %}\n          {% assign alert_body = err.text_key | alertBody %}\n          <zl-alert severity=\"error\"{% if alert_heading != \"\" %} heading=\"{{ alert_heading | t }}\"{% endif %}>\n            {% if alert_body != \"\" %}{{ alert_body | t }}{% elsif err.text_key %}{{ err.text_key | t }}{% else %}{{ err.message }}{% endif %}\n          </zl-alert>\n        {% endif %}\n      {% endfor %}\n    {% endif %}\n\n    {% for f in fields %}\n      {% assign field_placeholder = f.text_key | fieldPlaceholder %}\n      {% assign field_help = f.text_key | fieldHelp %}\n      {% assign field_err = f.name | fieldError: errors %}\n      {% case f.type %}\n      {% when 'checkbox' %}\n        <zl-checkbox\n          name=\"{{ f.name }}\"\n          data-testid=\"zitadel-field-{{ f.name }}\"\n          label=\"{{ f.text_key | t }}\"\n          value=\"true\"\n          {% if f.value %}checked{% endif %}\n          {% if f.required %}required{% endif %}\n        ></zl-checkbox>\n      {% when 'select' %}\n        <zl-select\n          name=\"{{ f.name }}\"\n          data-testid=\"zitadel-field-{{ f.name }}\"\n          label=\"{{ f.text_key | t }}\"\n          value=\"{{ f.value }}\"\n          options='{{ f.validation.enum | selectOptions | json }}'\n          {% if f.required %}required{% endif %}\n          {% if field_placeholder != \"\" %}placeholder=\"{{ field_placeholder }}\"{% endif %}\n        ></zl-select>\n      {% else %}\n        {% assign autocomplete_val = '' %}\n        {% if f.name == 'email' %}\n          {% assign autocomplete_val = 'email' %}\n        {% elsif f.type == 'password' and step.name contains 'register' %}\n          {% assign autocomplete_val = 'new-password' %}\n        {% elsif f.type == 'password' %}\n          {% assign autocomplete_val = 'current-password' %}\n        {% endif %}\n        <zl-field\n          name=\"{{ f.name }}\"\n          data-testid=\"zitadel-field-{{ f.name }}\"\n          label=\"{{ f.text_key | t }}\"\n          type=\"{{ f.type }}\"\n          value=\"{{ f.value }}\"\n          {% if autocomplete_val != '' %}autocomplete=\"{{ autocomplete_val }}\"{% endif %}\n          {% if f.required %}required{% endif %}\n          {% if field_placeholder != \"\" %}placeholder=\"{{ field_placeholder }}\"{% endif %}\n          {% if field_err != \"\" %}invalid error=\"{{ field_err }}\"{% endif %}\n        >\n          {% if field_help != \"\" %}\n            <span slot=\"help\">{{ field_help }}</span>\n          {% endif %}\n        </zl-field>\n      {% endcase %}\n    {% endfor %}\n\n    {% assign recover = actions | where: \"name\", \"recover\" | first %}\n    {% if recover %}\n      <p class=\"zl-card-forgot\">\n        <a href=\"#\" class=\"zl-card-forgot__link\" data-action=\"recover\">{{ recover.text_key | t }}</a>\n      </p>\n    {% endif %}\n\n    {% for a in actions %}\n      {% if a.primary %}\n        <zl-button\n          hierarchy=\"primary\"\n          size=\"medium\"\n          type=\"submit\"\n          block\n          action=\"{{ a.name }}\"\n          data-testid=\"zitadel-action-{{ a.name }}\"\n          label=\"{{ a.text_key | t }}\"\n          {% if loading %}loading{% endif %}\n        ></zl-button>\n      {% endif %}\n    {% endfor %}\n\n    {% for a in actions %}\n      {% unless a.primary or a.name == 'passkey' or a.name == 'register' or a.name == 'sign_in' or a.name == 'recover' %}\n        <zl-button\n          hierarchy=\"secondary\"\n          size=\"medium\"\n          type=\"button\"\n          block\n          action=\"{{ a.name }}\"\n          data-testid=\"zitadel-action-{{ a.name }}\"\n          label=\"{{ a.text_key | t }}\"\n        ></zl-button>\n      {% endunless %}\n    {% endfor %}\n\n    {% assign passkey = actions | where: \"name\", \"passkey\" | first %}\n    {% if passkey %}\n      {% unless passkey.primary %}\n        <zl-button\n          hierarchy=\"secondary\"\n          size=\"medium\"\n          block\n          action=\"passkey\"\n          data-testid=\"zitadel-action-passkey\"\n          label=\"{{ passkey.text_key | t }}\"\n        ></zl-button>\n      {% endunless %}\n    {% endif %}\n\n\n    {% assign register = actions | where: \"name\", \"register\" | first %}\n    {% if register %}\n      <p class=\"zl-card-nav\">\n        {{ 'identifier.action.register.lead' | t }}<a href=\"#\" class=\"zl-card-nav__link\" data-action=\"register\" data-testid=\"zitadel-action-register-link\">{{ 'identifier.action.register.link' | t }}</a>\n      </p>\n    {% endif %}\n\n    {% assign sign_in = actions | where: \"name\", \"sign_in\" | first %}\n    {% if sign_in %}\n      <p class=\"zl-card-nav\">\n        {{ 'register.action.sign_in.lead' | t }}<a href=\"#\" class=\"zl-card-nav__link\" data-action=\"sign_in\" data-testid=\"zitadel-action-sign_in-link\">{{ 'register.action.sign_in.link' | t }}</a>\n      </p>\n    {% endif %}\n\n    {% if challenge %}\n      {% if challenge.method == \"passkey\" or challenge.method == \"passkey_register\" %}\n        {% assign ceremony = \"authenticate\" %}\n        {% assign submit_method = challenge.method %}\n        {% if challenge.method == \"passkey_register\" or challenge.options.user %}\n          {% assign ceremony = \"register\" %}\n          {% assign submit_method = \"passkey_register\" %}\n        {% endif %}\n        <zl-passkey\n          ceremony=\"{{ ceremony }}\"\n          method=\"{{ submit_method }}\"\n          challenge-id=\"{{ challenge.challenge_id }}\"\n          options='{{ challenge.options | json }}'\n        ></zl-passkey>\n      {% endif %}\n    {% endif %}\n\n    {% mandatory_gates %}\n  </zl-card>\n</zl-page-shell>\n";
+var default_default = "<zl-page-shell data-zl-template-root>\n  {% if branding.logo_url %}\n    <img slot=\"header\" class=\"zl-card-logo\" src=\"{{ branding.logo_url }}\" alt=\"\" />\n  {% endif %}\n  <zl-card>\n    <h1 slot=\"header\" class=\"zl-card-title\">{{ step.texts.title_key | t: identity.display_name }}</h1>\n    {% if step.texts.description_key %}\n      {% assign card_subtitle = step.texts.description_key | t: identity.display_name %}\n      {% if card_subtitle != \"\" %}\n        <p slot=\"header\" class=\"zl-card-subtitle\">{{ card_subtitle }}</p>\n      {% endif %}\n    {% endif %}\n\n    {% if errors and errors.size > 0 %}\n      {% for err in errors %}\n        {% if err | formLevelError %}\n          {% assign alert_heading = err.text_key | alertHeading %}\n          {% assign alert_body = err.text_key | alertBody %}\n          <zl-alert severity=\"error\" dismissible data-zl-step-error{% if alert_heading != \"\" %} heading=\"{{ alert_heading | t }}\"{% endif %}>\n            {% if alert_body != \"\" %}{{ alert_body | t }}{% elsif err.text_key %}{{ err.text_key | t }}{% else %}{{ err.message }}{% endif %}\n          </zl-alert>\n        {% endif %}\n      {% endfor %}\n    {% endif %}\n\n    {% for f in fields %}\n      {% assign field_placeholder = f.text_key | fieldPlaceholder %}\n      {% assign field_help = f.text_key | fieldHelp %}\n      {% assign field_err = f.name | fieldError: errors %}\n      {% case f.type %}\n      {% when 'checkbox' %}\n        <zl-checkbox\n          name=\"{{ f.name }}\"\n          data-testid=\"zitadel-field-{{ f.name | testid }}\"\n          label=\"{{ f.text_key | t }}\"\n          value=\"true\"\n          {% if f.value %}checked{% endif %}\n          {% if f.required %}required{% endif %}\n        ></zl-checkbox>\n      {% when 'select' %}\n        <zl-select\n          name=\"{{ f.name }}\"\n          data-testid=\"zitadel-field-{{ f.name | testid }}\"\n          label=\"{{ f.text_key | t }}\"\n          value=\"{{ f.value }}\"\n          options='{{ f.validation.enum | selectOptions | json }}'\n          {% if f.required %}required{% endif %}\n          {% if field_placeholder != \"\" %}placeholder=\"{{ field_placeholder }}\"{% endif %}\n        ></zl-select>\n      {% else %}\n        {% assign autocomplete_val = '' %}\n        {% if f.name == 'email' %}\n          {% assign autocomplete_val = 'email' %}\n        {% elsif f.type == 'password' and step.name contains 'register' %}\n          {% assign autocomplete_val = 'new-password' %}\n        {% elsif f.type == 'password' %}\n          {% assign autocomplete_val = 'current-password' %}\n        {% endif %}\n        <zl-field\n          name=\"{{ f.name }}\"\n          data-testid=\"zitadel-field-{{ f.name | testid }}\"\n          label=\"{{ f.text_key | t }}\"\n          type=\"{{ f.type }}\"\n          value=\"{{ f.value }}\"\n          {% if autocomplete_val != '' %}autocomplete=\"{{ autocomplete_val }}\"{% endif %}\n          {% if f.required %}required{% endif %}\n          {% if field_placeholder != \"\" %}placeholder=\"{{ field_placeholder }}\"{% endif %}\n          {% if field_err != \"\" %}invalid error=\"{{ field_err }}\"{% endif %}\n        >\n          {% if field_help != \"\" %}\n            <span slot=\"help\">{{ field_help }}</span>\n          {% endif %}\n        </zl-field>\n      {% endcase %}\n    {% endfor %}\n\n    {% assign recover = actions | where: \"name\", \"recover\" | first %}\n    {% if recover %}\n      <p class=\"zl-card-forgot\">\n        <a href=\"#\" class=\"zl-card-forgot__link\" data-action=\"recover\">{{ recover.text_key | t }}</a>\n      </p>\n    {% endif %}\n\n    {% for a in actions %}\n      {% if a.primary %}\n        <zl-button\n          hierarchy=\"primary\"\n          size=\"medium\"\n          type=\"submit\"\n          block\n          action=\"{{ a.name }}\"\n          data-testid=\"zitadel-action-{{ a.name }}\"\n          label=\"{{ a.text_key | t }}\"\n          {% if loading %}loading{% endif %}\n        ></zl-button>\n      {% endif %}\n    {% endfor %}\n\n    {% for a in actions %}\n      {% unless a.primary or a.name == 'passkey' or a.name == 'register' or a.name == 'sign_in' or a.name == 'recover' %}\n        <zl-button\n          hierarchy=\"secondary\"\n          size=\"medium\"\n          type=\"button\"\n          block\n          action=\"{{ a.name }}\"\n          data-testid=\"zitadel-action-{{ a.name }}\"\n          label=\"{{ a.text_key | t }}\"\n        ></zl-button>\n      {% endunless %}\n    {% endfor %}\n\n    {% assign passkey = actions | where: \"name\", \"passkey\" | first %}\n    {% if passkey %}\n      {% unless passkey.primary %}\n        <zl-button\n          hierarchy=\"secondary\"\n          size=\"medium\"\n          block\n          action=\"passkey\"\n          data-testid=\"zitadel-action-passkey\"\n          label=\"{{ passkey.text_key | t }}\"\n        ></zl-button>\n      {% endunless %}\n    {% endif %}\n\n\n    {% assign register = actions | where: \"name\", \"register\" | first %}\n    {% if register %}\n      <p class=\"zl-card-nav\">\n        {{ 'identifier.action.register.lead' | t }}<a href=\"#\" class=\"zl-card-nav__link\" data-action=\"register\" data-testid=\"zitadel-action-register-link\">{{ 'identifier.action.register.link' | t }}</a>\n      </p>\n    {% endif %}\n\n    {% assign sign_in = actions | where: \"name\", \"sign_in\" | first %}\n    {% if sign_in %}\n      <p class=\"zl-card-nav\">\n        {{ 'register.action.sign_in.lead' | t }}<a href=\"#\" class=\"zl-card-nav__link\" data-action=\"sign_in\" data-testid=\"zitadel-action-sign_in-link\">{{ 'register.action.sign_in.link' | t }}</a>\n      </p>\n    {% endif %}\n\n    {% if challenge %}\n      {% if challenge.method == \"passkey\" or challenge.method == \"passkey_register\" %}\n        {% assign ceremony = \"authenticate\" %}\n        {% assign submit_method = challenge.method %}\n        {% if challenge.method == \"passkey_register\" or challenge.options.user %}\n          {% assign ceremony = \"register\" %}\n          {% assign submit_method = \"passkey_register\" %}\n        {% endif %}\n        <zl-passkey\n          ceremony=\"{{ ceremony }}\"\n          method=\"{{ submit_method }}\"\n          challenge-id=\"{{ challenge.challenge_id }}\"\n          options='{{ challenge.options | json }}'\n          pending-label=\"{{ 'passkey.pending.status' | t }}\"\n          cancel-label=\"{{ 'action.cancel' | t }}\"\n        ></zl-passkey>\n      {% endif %}\n    {% endif %}\n\n    {% mandatory_gates %}\n  </zl-card>\n</zl-page-shell>\n";
 //#endregion
 //#region src/orchestrator/liquid.ts
 /**
@@ -9525,6 +9724,21 @@ var default_default = "<zl-page-shell data-zl-template-root>\n  {% if branding.l
 * - 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: {
@@ -9541,7 +9755,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) => {
@@ -9569,15 +9783,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`;
@@ -9598,6 +9803,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 ?? "";
@@ -9611,6 +9823,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;
@@ -9621,6 +9950,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) => {
@@ -9738,6 +10072,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",
@@ -9745,12 +10083,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",
@@ -9759,6 +10102,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"
 };
@@ -9840,6 +10188,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",
@@ -9847,12 +10199,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",
@@ -9860,6 +10217,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"
 };
@@ -9944,6 +10306,10 @@ const builtinLocales = {
 		"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",
@@ -9951,12 +10317,17 @@ const builtinLocales = {
 		"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",
@@ -9964,6 +10335,11 @@ const builtinLocales = {
 		"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"
 	}
@@ -11897,6 +12273,13 @@ let ZitadelLogin = class ZitadelLogin extends i$2 {
 	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;
@@ -12004,6 +12387,8 @@ let ZitadelLogin = class ZitadelLogin extends i$2 {
 			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);
@@ -12142,17 +12527,32 @@ let ZitadelLogin = class ZitadelLogin extends i$2 {
 				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;
@@ -12206,7 +12606,12 @@ let ZitadelLogin = class ZitadelLogin extends i$2 {
 	}
 	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 = {
@@ -12300,6 +12705,17 @@ let ZitadelLogin = class ZitadelLogin extends i$2 {
 		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;
@@ -12309,11 +12725,41 @@ let ZitadelLogin = class ZitadelLogin extends i$2 {
 			[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;
@@ -12373,9 +12819,10 @@ let ZitadelLogin = class ZitadelLogin extends i$2 {
 	*/
 	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,
@@ -12384,7 +12831,7 @@ let ZitadelLogin = class ZitadelLogin extends i$2 {
 				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;
@@ -12426,13 +12873,17 @@ let ZitadelLogin = class ZitadelLogin extends i$2 {
 		}
 	}
 	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([n$1({ type: String })], ZitadelLogin.prototype, "purpose", null);
+__decorate([n$1({
+	type: String,
+	attribute: "flow-name"
+})], ZitadelLogin.prototype, "flowName", null);
 __decorate([n$1({ attribute: false })], ZitadelLogin.prototype, "project", null);
 __decorate([n$1({
 	type: String,