@zitadel/components 0.1.0-alpha.12 → 0.1.0-alpha.14

package/dist/standalone.mjs

@@ -3395,6 +3395,21 @@ async function getCurrentStep(api, id) {
 async function exchangeSession(api, body, params) {
 	return api.exchangeHandoff(body, params, apiRequestInit);
 }
+/**
+* Reads the current session (`GET /sessions/me`) with credentials so the
+* `__nextgen_session` cookie authenticates the request. Used by the
+* orchestrator's signed-in surfaces to render the user's identity.
+*/
+async function getSession$1(api) {
+	return await api.getMySession(apiRequestInit);
+}
+/**
+* Revokes the current session (`DELETE /sessions/me`) with credentials. The
+* server deletes the session and clears the cookie via `Set-Cookie: Max-Age=0`.
+*/
+async function revokeSession$1(api) {
+	await api.revokeMySession(apiRequestInit);
+}
 //#endregion
 //#region ../api/dist/runtime/base-url.mjs
 let proxyPath = "";
@@ -3483,6 +3498,7 @@ var zitadelNextGen_exports = /* @__PURE__ */ __exportAll({
 	getIssueChallengeUrl: () => getIssueChallengeUrl,
 	getKeys: () => getKeys,
 	getListFlowDefinitionsUrl: () => getListFlowDefinitionsUrl,
+	getListSchemasUrl: () => getListSchemasUrl,
 	getListSessionsUrl: () => getListSessionsUrl,
 	getListUsersUrl: () => getListUsersUrl,
 	getLive: () => getLive,
@@ -3508,6 +3524,7 @@ var zitadelNextGen_exports = /* @__PURE__ */ __exportAll({
 	introspect: () => introspect,
 	issueChallenge: () => issueChallenge,
 	listFlowDefinitions: () => listFlowDefinitions,
+	listSchemas: () => listSchemas,
 	listSessions: () => listSessions,
 	listUsers: () => listUsers,
 	revokeMySession: () => revokeMySession,
@@ -4265,6 +4282,26 @@ const createSchema = async (createSchemaBody, params, options) => {
 		body: JSON.stringify(createSchemaBody)
 	});
 };
+const getListSchemasUrl = (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()}/schemas?${stringifiedParams}` : `${getProxyPath()}/schemas`;
+};
+/**
+* Retrieve a list of all schemas available in the system. This endpoint
+supports pagination and filtering based on schema attributes.
+
+* @summary List all schemas
+*/
+const listSchemas = async (params, options) => {
+	return customFetch(getListSchemasUrl(params), {
+		...options,
+		method: "GET"
+	});
+};
 const getGetSchemaByIdUrl = (id, params) => {
 	const normalizedParams = new URLSearchParams();
 	Object.entries(params || {}).forEach(([key, value]) => {
@@ -9469,7 +9506,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      <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    {% 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        {% if challenge.method == \"passkey_register\" %}{% assign ceremony = \"register\" %}{% endif %}\n        <zl-passkey\n          ceremony=\"{{ ceremony }}\"\n          method=\"{{ challenge.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\"{% 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      <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    {% 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";
 //#endregion
 //#region src/orchestrator/liquid.ts
 /**
@@ -9654,6 +9691,7 @@ const en = {
 	"register-password.description": "Choose a secure password for your account",
 	"register-password.field.password": "Password",
 	"register-password.action.submit": "Sign up",
+	"register-password.action.back": "Back",
 	"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.",
@@ -9676,6 +9714,7 @@ const en = {
 	"password.field.password": "Password",
 	"password.action.signin": "Sign in",
 	"password.action.passkey": "Sign in with a passkey",
+	"password.action.back": "Back",
 	"password.action.register.lead": "Don't have an account? ",
 	"password.action.register.link": "Sign up",
 	"register.title": "Create your account",
@@ -9692,11 +9731,12 @@ const en = {
 	"register.action.password": "Continue with password",
 	"register.action.passkey": "Continue with a passkey",
 	"register.action.submit": "Sign up",
+	"register.action.back": "Back",
 	"register.action.sign_in.lead": "Already have an account? ",
 	"register.action.sign_in.link": "Sign in",
 	"complete.title": "You're signed in as",
 	"signed-in.continue": "Continue",
-	"signed-in.logout": "Logout",
+	"signed-in.logout": "Sign out",
 	"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.",
@@ -9753,6 +9793,7 @@ const de = {
 	"register-password.description": "Wähle ein sicheres Passwort für dein Konto",
 	"register-password.field.password": "Passwort",
 	"register-password.action.submit": "Registrieren",
+	"register-password.action.back": "Zurück",
 	"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.",
@@ -9775,6 +9816,7 @@ const de = {
 	"password.field.password": "Passwort",
 	"password.action.signin": "Anmelden",
 	"password.action.passkey": "Mit Passkey anmelden",
+	"password.action.back": "Zurück",
 	"password.action.register.lead": "Noch kein Konto? ",
 	"password.action.register.link": "Registrieren",
 	"register.title": "Konto erstellen",
@@ -9791,6 +9833,7 @@ const de = {
 	"register.action.password": "Mit Passwort fortfahren",
 	"register.action.passkey": "Weiter mit Passkey",
 	"register.action.submit": "Registrieren",
+	"register.action.back": "Zurück",
 	"register.action.sign_in.lead": "Bereits ein Konto? ",
 	"register.action.sign_in.link": "Anmelden",
 	"complete.title": "Du bist angemeldet als",
@@ -9854,6 +9897,7 @@ const builtinLocales = {
 		"register-password.description": "Scegli una password sicura per il tuo account",
 		"register-password.field.password": "Password",
 		"register-password.action.submit": "Registrati",
+		"register-password.action.back": "Indietro",
 		"passkey-upsell.title": "Accedi più velocemente la prossima volta",
 		"passkey-upsell.description": "Nessuna password necessaria.",
 		"passkey-upsell.description.line1": "Nessuna password necessaria.",
@@ -9876,6 +9920,7 @@ const builtinLocales = {
 		"password.field.password": "Password",
 		"password.action.signin": "Accedi",
 		"password.action.passkey": "Accedi con passkey",
+		"password.action.back": "Indietro",
 		"password.action.register.lead": "Non hai un account? ",
 		"password.action.register.link": "Registrati",
 		"register.title": "Crea il tuo account",
@@ -9892,6 +9937,7 @@ const builtinLocales = {
 		"register.action.password": "Continua con password",
 		"register.action.passkey": "Continua con passkey",
 		"register.action.submit": "Registrati",
+		"register.action.back": "Indietro",
 		"register.action.sign_in.lead": "Hai già un account? ",
 		"register.action.sign_in.link": "Accedi",
 		"complete.title": "Sei connesso come",
@@ -12173,7 +12219,7 @@ let ZitadelLogin = class ZitadelLogin extends i$2 {
 			actions,
 			gates: step.gates ?? {},
 			sso_providers: step.sso_providers ?? [],
-			challenge: step.challenge ?? null,
+			challenge: this.loading ? null : step.challenge ?? null,
 			messages: [],
 			identity: this.deriveIdentity(),
 			errors,
@@ -12421,7 +12467,6 @@ function collectInitialValues(step) {
 }
 //#endregion
 //#region src/orchestrator/zitadel-logout.ts
-const DISPLAY_COOKIE_NAME = "__nextgen_display";
 let ZitadelLogout = class ZitadelLogout extends i$2 {
 	static styles = [baseHostStyles, i$5`
       :host {
@@ -12616,6 +12661,13 @@ let ZitadelLogout = class ZitadelLogout extends i$2 {
 	set displayEmail(value) {
 		this.#_displayEmail_accessor_storage = value;
 	}
+	#_displayUserId_accessor_storage = "";
+	get displayUserId() {
+		return this.#_displayUserId_accessor_storage;
+	}
+	set displayUserId(value) {
+		this.#_displayUserId_accessor_storage = value;
+	}
 	#_open_accessor_storage = false;
 	get open() {
 		return this.#_open_accessor_storage;
@@ -12638,17 +12690,21 @@ let ZitadelLogout = class ZitadelLogout extends i$2 {
 		this.#_errorMessage_accessor_storage = value;
 	}
 	templateMode = false;
+	pendingTemplate = null;
+	projectedContainer = null;
+	identityRequested = false;
 	connectedCallback() {
 		super.connectedCallback();
 		this.dataset.theme = "dark";
-		this.readDisplayCookie();
 		const tmpl = this.querySelector("template");
 		if (tmpl instanceof HTMLTemplateElement) {
 			this.templateMode = true;
-			this.renderTemplate(tmpl);
+			this.pendingTemplate = tmpl;
+			this.projectTemplate();
 		}
 		document.addEventListener("click", this.handleDocumentClick);
 		document.addEventListener("keydown", this.handleDocumentKeydown);
+		this.maybeLoadIdentity();
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
@@ -12658,38 +12714,67 @@ let ZitadelLogout = class ZitadelLogout extends i$2 {
 	updated() {
 		const root = this.shadowRoot;
 		if (root && !this.templateMode) applyBaseTokens(root);
+		this.maybeLoadIdentity();
+	}
+	/** Declarative config read from this element's attributes. */
+	get projectAttrs() {
+		return {
+			projectId: this.projectId,
+			proxyPath: this.proxyPath,
+			url: this.url
+		};
 	}
 	/**
-	* Decodes the `__nextgen_display` cookie (base64-encoded JSON, set by the
-	* auth backend on sign-in) and populates `displayName` / `displayEmail`.
-	* A missing or malformed cookie is intentionally non-fatal — the dropdown
-	* still renders, just with empty values.
+	* Fetches the signed-in identity from `GET /sessions/me` once a project is
+	* resolvable. No-ops until then (and on repeat calls) so framework property
+	* timing doesn't matter and we never fire the request twice. A pending
+	* `<template>` is already projected in `connectedCallback`, so when no config
+	* is available yet the logout control still renders; it is re-projected with
+	* the real identity once a later request succeeds.
 	*/
-	readDisplayCookie() {
-		if (typeof document === "undefined") return;
-		const match = document.cookie.match(new RegExp(`(?:^|;\\s*)${DISPLAY_COOKIE_NAME}=([^;]+)`));
-		if (!match || !match[1]) return;
+	maybeLoadIdentity() {
+		if (this.identityRequested) return;
+		let api;
 		try {
-			const data = JSON.parse(atob(match[1]));
-			this.displayName = typeof data.name === "string" ? data.name : "";
-			this.displayEmail = typeof data.email === "string" ? data.email : "";
-		} catch {}
+			({api} = resolveApi(this.project, this.projectAttrs, "<zitadel-logout>"));
+		} catch {
+			return;
+		}
+		this.identityRequested = true;
+		this.loadIdentity(api);
+	}
+	async loadIdentity(api) {
+		try {
+			const session = await getSession$1(api);
+			this.displayName = session.name ?? "";
+			this.displayEmail = session.email ?? "";
+			this.displayUserId = session.user_id ?? "";
+		} catch {} finally {
+			this.projectTemplate();
+		}
 	}
 	get initial() {
-		const source = this.displayName || this.displayEmail;
+		const source = this.displayName || this.displayEmail || this.displayUserId;
 		return source ? source.charAt(0).toUpperCase() : "?";
 	}
 	/**
-	* Clones a consumer-supplied `<template>` into the light DOM, fills the
+	* Clones the consumer-supplied `<template>` into the light DOM, fills the
 	* `{{name}}`, `{{email}}`, and `{{initial}}` tokens via a TreeWalker, and
 	* wires every element with `data-action="logout"` to trigger sign-out.
 	* Light-DOM mounting is deliberate so the consumer's existing CSS applies.
+	*
+	* Re-runnable: each call replaces the previously projected clone, so a late
+	* identity fetch (or a `project` assigned post-mount) updates the rendered
+	* markup instead of leaving the placeholders stuck on their initial values.
 	*/
-	renderTemplate(tmpl) {
-		const clone = tmpl.content.cloneNode(true);
+	projectTemplate() {
+		if (!this.templateMode || !this.pendingTemplate) return;
+		const clone = this.pendingTemplate.content.cloneNode(true);
 		fillTemplateTokens(clone, this.displayName, this.displayEmail, this.initial);
 		const container = document.createElement("span");
 		container.appendChild(clone);
+		this.projectedContainer?.remove();
+		this.projectedContainer = container;
 		this.appendChild(container);
 		container.querySelectorAll("[data-action=\"logout\"]").forEach((el) => {
 			el.addEventListener("click", (event) => {
@@ -12719,20 +12804,12 @@ let ZitadelLogout = class ZitadelLogout extends i$2 {
 	* clears the cookie via `Set-Cookie: Max-Age=0`. On success this element fires
 	* `zitadel-signout` and optionally navigates to `postSignOutUrl`.
 	*/
-	/** Declarative config read from this element's attributes. */
-	get projectAttrs() {
-		return {
-			projectId: this.projectId,
-			proxyPath: this.proxyPath,
-			url: this.url
-		};
-	}
 	async doLogout() {
 		this.loading = true;
 		this.errorMessage = "";
 		try {
 			const { api } = resolveApi(this.project, this.projectAttrs, "<zitadel-logout>");
-			await api.revokeMySession({ credentials: "include" });
+			await revokeSession$1(api);
 		} catch (error) {
 			const message = error instanceof Error ? error.message : "";
 			this.errorMessage = message || "Sign-out failed. Please try again.";
@@ -12784,8 +12861,10 @@ let ZitadelLogout = class ZitadelLogout extends i$2 {
               <div class="preview">
                 <div class="preview-avatar" aria-hidden="true">${this.initial}</div>
                 <div class="preview-info">
-                  <div class="preview-name">${this.displayName || this.displayEmail}</div>
-                  ${this.displayName ? b`<div class="preview-email">${this.displayEmail}</div>` : A}
+                  <div class="preview-name">
+                    ${this.displayName || this.displayEmail || this.displayUserId}
+                  </div>
+                  ${this.displayName && this.displayEmail ? b`<div class="preview-email">${this.displayEmail}</div>` : A}
                 </div>
               </div>
 
@@ -12843,6 +12922,7 @@ __decorate([n$1({
 })], ZitadelLogout.prototype, "clientId", null);
 __decorate([r$1()], ZitadelLogout.prototype, "displayName", null);
 __decorate([r$1()], ZitadelLogout.prototype, "displayEmail", null);
+__decorate([r$1()], ZitadelLogout.prototype, "displayUserId", null);
 __decorate([r$1()], ZitadelLogout.prototype, "open", null);
 __decorate([r$1()], ZitadelLogout.prototype, "loading", null);
 __decorate([r$1()], ZitadelLogout.prototype, "errorMessage", null);
@@ -12861,4 +12941,248 @@ function fillTemplateTokens(fragment, name, email, initial) {
 	}
 }
 //#endregion
-export { TEMPLATE_NAMES, ThemeController, ZitadelLogin, ZitadelLogout, ZlAlert, ZlButton, ZlCard, ZlCheckbox, ZlField, ZlIcon, ZlPageShell, ZlPill, ZlSelect, applyBrandingTokens, applyFontUrl, baseHostStyles, buildBrandingStylesheet, builtinLocales, createSanitiser, cssVars, de, default_default as defaultTemplate, en, findManifest, focusVisibleStyles, getCurrentStep, layout_chrome_default as layoutChromeCss, listKnownTags, manifestRegistry, patchMandatoryGates, resolveTheme, startFlow, submitStep, t, tokens, validateBranding, zlAlertManifest, zlButtonManifest, zlCardManifest, zlCheckboxManifest, zlFieldManifest, zlIconManifest, zlPageShellManifest, zlPillManifest, zlSelectManifest };
+//#region src/orchestrator/zitadel-session.ts
+let ZitadelSession = class ZitadelSession extends i$2 {
+	static styles = [baseHostStyles, i$5`
+      :host {
+        display: block;
+        min-height: 100vh;
+        background: ${t.color.surface.defaultBlack};
+        color: ${t.color.text.primaryWhite};
+      }
+      .title {
+        margin: 0;
+        font-family: ${t.font.family.heading};
+        font-size: 2rem;
+        font-weight: 700;
+        line-height: 2.5rem;
+        letter-spacing: -0.02em;
+        color: ${t.color.text.primaryWhite};
+        text-align: left;
+      }
+      .identity {
+        margin: 0;
+        font-family: ${t.font.family.sans};
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        font-weight: 400;
+        color: ${t.color.text.secondaryGray};
+        text-align: left;
+        overflow-wrap: anywhere;
+      }
+      .error {
+        margin: 0;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        color: ${t.color.text.error};
+      }
+    `];
+	#_project_accessor_storage;
+	get project() {
+		return this.#_project_accessor_storage;
+	}
+	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;
+	}
+	set postSignOutUrl(value) {
+		this.#_postSignOutUrl_accessor_storage = value;
+	}
+	#_heading_accessor_storage = "Signed in as";
+	get heading() {
+		return this.#_heading_accessor_storage;
+	}
+	set heading(value) {
+		this.#_heading_accessor_storage = value;
+	}
+	#_logoutLabel_accessor_storage = "Sign out";
+	get logoutLabel() {
+		return this.#_logoutLabel_accessor_storage;
+	}
+	set logoutLabel(value) {
+		this.#_logoutLabel_accessor_storage = value;
+	}
+	#_displayName_accessor_storage = "";
+	get displayName() {
+		return this.#_displayName_accessor_storage;
+	}
+	set displayName(value) {
+		this.#_displayName_accessor_storage = value;
+	}
+	#_displayEmail_accessor_storage = "";
+	get displayEmail() {
+		return this.#_displayEmail_accessor_storage;
+	}
+	set displayEmail(value) {
+		this.#_displayEmail_accessor_storage = value;
+	}
+	#_displayUserId_accessor_storage = "";
+	get displayUserId() {
+		return this.#_displayUserId_accessor_storage;
+	}
+	set displayUserId(value) {
+		this.#_displayUserId_accessor_storage = value;
+	}
+	#_loading_accessor_storage = false;
+	get loading() {
+		return this.#_loading_accessor_storage;
+	}
+	set loading(value) {
+		this.#_loading_accessor_storage = value;
+	}
+	#_errorMessage_accessor_storage = "";
+	get errorMessage() {
+		return this.#_errorMessage_accessor_storage;
+	}
+	set errorMessage(value) {
+		this.#_errorMessage_accessor_storage = value;
+	}
+	identityRequested = false;
+	connectedCallback() {
+		super.connectedCallback();
+		this.dataset.theme = "dark";
+		this.maybeLoadIdentity();
+	}
+	/** Single identity line: human-readable name, then email, then user_id. */
+	get identityLabel() {
+		return this.displayName || this.displayEmail || this.displayUserId;
+	}
+	updated() {
+		const root = this.shadowRoot;
+		if (root) applyBaseTokens(root);
+		this.maybeLoadIdentity();
+	}
+	/** Declarative config read from this element's attributes. */
+	get projectAttrs() {
+		return {
+			projectId: this.projectId,
+			proxyPath: this.proxyPath,
+			url: this.url
+		};
+	}
+	/**
+	* Fetches the signed-in identity from `GET /sessions/me` once a project is
+	* resolvable. No-ops until then (and on repeat calls) so framework property
+	* timing doesn't matter and we never fire the request twice.
+	*/
+	maybeLoadIdentity() {
+		if (this.identityRequested) return;
+		let api;
+		try {
+			({api} = resolveApi(this.project, this.projectAttrs, "<zitadel-session>"));
+		} catch {
+			return;
+		}
+		this.identityRequested = true;
+		this.fetchIdentity(api);
+	}
+	async fetchIdentity(api) {
+		try {
+			const session = await getSession$1(api);
+			this.displayName = session.name ?? "";
+			this.displayEmail = session.email ?? "";
+			this.displayUserId = session.user_id ?? "";
+		} catch {}
+	}
+	/**
+	* Calls `DELETE /sessions/me` (`revokeMySession`) with credentials. On
+	* success fires `zitadel-signout` and optionally navigates to
+	* `postSignOutUrl`; on failure surfaces an inline error and stays put.
+	*/
+	async doLogout() {
+		this.loading = true;
+		this.errorMessage = "";
+		try {
+			const { api } = resolveApi(this.project, this.projectAttrs, "<zitadel-session>");
+			await revokeSession$1(api);
+		} catch (error) {
+			const message = error instanceof Error ? error.message : "";
+			this.errorMessage = message || "Sign-out failed. Please try again.";
+			this.loading = false;
+			return;
+		}
+		this.loading = false;
+		emit(this, "zitadel-signout", {
+			name: this.displayName,
+			email: this.displayEmail
+		});
+		if (this.postSignOutUrl && typeof window !== "undefined") window.location.assign(this.postSignOutUrl);
+	}
+	handleLogout(event) {
+		event.preventDefault();
+		this.doLogout();
+	}
+	render() {
+		return b`
+      <zl-page-shell>
+        <zl-card>
+          <h1 slot="header" class="title">${this.heading}</h1>
+          ${this.identityLabel ? b`<p slot="header" class="identity">${this.identityLabel}</p>` : A}
+
+          <zl-button
+            hierarchy="primary"
+            size="medium"
+            block
+            ?loading=${this.loading}
+            data-testid="zitadel-session-logout"
+            label=${this.logoutLabel}
+            @zl-submit=${this.handleLogout}
+          ></zl-button>
+
+          ${this.errorMessage ? b`<p class="error" role="alert">${this.errorMessage}</p>` : A}
+        </zl-card>
+      </zl-page-shell>
+    `;
+	}
+};
+__decorate([n$1({ attribute: false })], ZitadelSession.prototype, "project", null);
+__decorate([n$1({
+	type: String,
+	attribute: "project-id"
+})], ZitadelSession.prototype, "projectId", null);
+__decorate([n$1({
+	type: String,
+	attribute: "proxy-path"
+})], ZitadelSession.prototype, "proxyPath", null);
+__decorate([n$1({ type: String })], ZitadelSession.prototype, "url", null);
+__decorate([n$1({
+	type: String,
+	attribute: "post-sign-out-url"
+})], ZitadelSession.prototype, "postSignOutUrl", null);
+__decorate([n$1({ type: String })], ZitadelSession.prototype, "heading", null);
+__decorate([n$1({
+	type: String,
+	attribute: "logout-label"
+})], ZitadelSession.prototype, "logoutLabel", null);
+__decorate([r$1()], ZitadelSession.prototype, "displayName", null);
+__decorate([r$1()], ZitadelSession.prototype, "displayEmail", null);
+__decorate([r$1()], ZitadelSession.prototype, "displayUserId", null);
+__decorate([r$1()], ZitadelSession.prototype, "loading", null);
+__decorate([r$1()], ZitadelSession.prototype, "errorMessage", null);
+ZitadelSession = __decorate([t$4("zitadel-session")], ZitadelSession);
+//#endregion
+export { TEMPLATE_NAMES, ThemeController, ZitadelLogin, ZitadelLogout, ZitadelSession, ZlAlert, ZlButton, ZlCard, ZlCheckbox, ZlField, ZlIcon, ZlPageShell, ZlPill, ZlSelect, applyBrandingTokens, applyFontUrl, baseHostStyles, buildBrandingStylesheet, builtinLocales, createSanitiser, cssVars, de, default_default as defaultTemplate, en, findManifest, focusVisibleStyles, getCurrentStep, layout_chrome_default as layoutChromeCss, listKnownTags, manifestRegistry, patchMandatoryGates, resolveTheme, startFlow, submitStep, t, tokens, validateBranding, zlAlertManifest, zlButtonManifest, zlCardManifest, zlCheckboxManifest, zlFieldManifest, zlIconManifest, zlPageShellManifest, zlPillManifest, zlSelectManifest };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zitadel/components",
-  "version": "0.1.0-alpha.12",
+  "version": "0.1.0-alpha.14",
   "description": "Lit-based atomic web components and the <zitadel-login> orchestrator for the Zitadel auth UI.",
   "homepage": "https://github.com/zitadel/nextgen/tree/main/packages/components#readme",
   "bugs": {
@@ -69,10 +69,10 @@
     "lightningcss": "^1.30.1",
     "tsdown": "^0.21.10",
     "tslib": "^2.8.1",
-    "@zitadel/api-mock": "0.0.0",
-    "@zitadel/api": "0.1.0-alpha.12",
     "@zitadel/design-tokens": "0.1.0-alpha.0",
-    "@zitadel/shared-component-styles": "0.0.0"
+    "@zitadel/api": "0.1.0-alpha.14",
+    "@zitadel/shared-component-styles": "0.0.0",
+    "@zitadel/api-mock": "0.0.0"
   },
   "scripts": {
     "build": "tsdown",