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

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

@@ -1,10 +1,11 @@
-import { C as focusVisibleStyles, E as emit, S as __decorate, T as t, d as hookName, w as baseHostStyles } from "./atoms-KC7OJWXZ.mjs";
-import { r as tokensCss } from "./tokens-CbH2s1jV.mjs";
-import { t as default_default } from "./default-CfF7GoLv.mjs";
+import { C as focusVisibleStyles, E as emit, S as __decorate, T as t, d as hookName, w as baseHostStyles } from "./atoms-5-wYIl88.mjs";
+import { r as tokensCss } from "./tokens-BV-PPbQd.mjs";
 import { manifestRegistry } from "./manifests.mjs";
+import { t as default_default } from "./default-Bnjy2dJB.mjs";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { MANDATORY_GATES_TAG } from "@zitadel/config/template";
 import { Liquid } from "liquidjs";
 import DOMPurify from "dompurify";
 //#region ../api/dist/runtime/auth.mjs
@@ -204,10 +205,9 @@ var __exportAll = (all, no_symbols) => {
 * OpenAPI spec version: 0.0.1
 */
 var zitadelNextGen_exports = /* @__PURE__ */ __exportAll({
-	activateFlowDefinition: () => activateFlowDefinition,
-	authorizeDevice: () => authorizeDevice,
-	authorizeGet: () => authorizeGet,
+	completeClaim: () => completeClaim,
 	createAuthAttempt: () => createAuthAttempt,
+	createBranding: () => createBranding,
 	createFlow: () => createFlow,
 	createFlowDefinition: () => createFlowDefinition,
 	createHandoff: () => createHandoff,
@@ -216,15 +216,16 @@ var zitadelNextGen_exports = /* @__PURE__ */ __exportAll({
 	createSession: () => createSession,
 	createTeam: () => createTeam,
 	createUser: () => createUser,
-	deactivateFlowDefinition: () => deactivateFlowDefinition,
 	deleteFlowDefinition: () => deleteFlowDefinition,
-	endSession: () => endSession,
+	deleteTeam: () => deleteTeam,
+	deleteUserByID: () => deleteUserByID,
 	exchangeHandoff: () => exchangeHandoff,
-	getActivateFlowDefinitionUrl: () => getActivateFlowDefinitionUrl,
 	getAuthAttempt: () => getAuthAttempt,
-	getAuthorizeDeviceUrl: () => getAuthorizeDeviceUrl,
-	getAuthorizeGetUrl: () => getAuthorizeGetUrl,
+	getBrandingById: () => getBrandingById,
+	getClaimStatus: () => getClaimStatus,
+	getCompleteClaimUrl: () => getCompleteClaimUrl,
 	getCreateAuthAttemptUrl: () => getCreateAuthAttemptUrl,
+	getCreateBrandingUrl: () => getCreateBrandingUrl,
 	getCreateFlowDefinitionUrl: () => getCreateFlowDefinitionUrl,
 	getCreateFlowUrl: () => getCreateFlowUrl,
 	getCreateHandoffUrl: () => getCreateHandoffUrl,
@@ -233,230 +234,76 @@ var zitadelNextGen_exports = /* @__PURE__ */ __exportAll({
 	getCreateSessionUrl: () => getCreateSessionUrl,
 	getCreateTeamUrl: () => getCreateTeamUrl,
 	getCreateUserUrl: () => getCreateUserUrl,
-	getDeactivateFlowDefinitionUrl: () => getDeactivateFlowDefinitionUrl,
 	getDeleteFlowDefinitionUrl: () => getDeleteFlowDefinitionUrl,
-	getEndSessionUrl: () => getEndSessionUrl,
+	getDeleteTeamUrl: () => getDeleteTeamUrl,
+	getDeleteUserByIDUrl: () => getDeleteUserByIDUrl,
 	getExchangeHandoffUrl: () => getExchangeHandoffUrl,
 	getFlowDefinition: () => getFlowDefinition,
 	getFlowStep: () => getFlowStep,
 	getGetAuthAttemptUrl: () => getGetAuthAttemptUrl,
+	getGetBrandingByIdUrl: () => getGetBrandingByIdUrl,
+	getGetClaimStatusUrl: () => getGetClaimStatusUrl,
 	getGetFlowDefinitionUrl: () => getGetFlowDefinitionUrl,
 	getGetFlowStepUrl: () => getGetFlowStepUrl,
 	getGetHealthUrl: () => getGetHealthUrl,
-	getGetKeysUrl: () => getGetKeysUrl,
 	getGetLiveUrl: () => getGetLiveUrl,
 	getGetMySessionUrl: () => getGetMySessionUrl,
 	getGetMyUserUrl: () => getGetMyUserUrl,
-	getGetOpenIDConfigurationUrl: () => getGetOpenIDConfigurationUrl,
 	getGetProjectUrl: () => getGetProjectUrl,
 	getGetReadyUrl: () => getGetReadyUrl,
 	getGetSchemaByIdUrl: () => getGetSchemaByIdUrl,
 	getGetSessionUrl: () => getGetSessionUrl,
 	getGetTeamUrl: () => getGetTeamUrl,
-	getGetTokenUrl: () => getGetTokenUrl,
 	getGetUserByIDUrl: () => getGetUserByIDUrl,
-	getGetUserInfoUrl: () => getGetUserInfoUrl,
 	getHealth: () => getHealth,
-	getIntrospectUrl: () => getIntrospectUrl,
+	getInitClaimUrl: () => getInitClaimUrl,
 	getIssueChallengeUrl: () => getIssueChallengeUrl,
-	getKeys: () => getKeys,
+	getListBrandingUrl: () => getListBrandingUrl,
 	getListFlowDefinitionsUrl: () => getListFlowDefinitionsUrl,
 	getListSchemasUrl: () => getListSchemasUrl,
-	getListSessionsUrl: () => getListSessionsUrl,
+	getListUserPasskeysUrl: () => getListUserPasskeysUrl,
+	getListUserTeamsUrl: () => getListUserTeamsUrl,
 	getListUsersUrl: () => getListUsersUrl,
 	getLive: () => getLive,
 	getMySession: () => getMySession,
 	getMyUser: () => getMyUser,
-	getOpenIDConfiguration: () => getOpenIDConfiguration,
 	getPatchProjectUrl: () => getPatchProjectUrl,
 	getProject: () => getProject,
 	getQueryProjectsUrl: () => getQueryProjectsUrl,
+	getQuerySessionsUrl: () => getQuerySessionsUrl,
+	getQueryTeamsUrl: () => getQueryTeamsUrl,
 	getReady: () => getReady,
 	getRevokeMySessionUrl: () => getRevokeMySessionUrl,
 	getRevokeSessionUrl: () => getRevokeSessionUrl,
-	getRevokeTokenUrl: () => getRevokeTokenUrl,
 	getSchemaById: () => getSchemaById,
 	getSession: () => getSession,
 	getSetUserPasswordUrl: () => getSetUserPasswordUrl,
-	getSubmitFlowEventUrl: () => getSubmitFlowEventUrl,
 	getSubmitFlowStepUrl: () => getSubmitFlowStepUrl,
 	getTeam: () => getTeam,
-	getToken: () => getToken,
 	getUpdateFlowDefinitionUrl: () => getUpdateFlowDefinitionUrl,
+	getUpdateTeamUrl: () => getUpdateTeamUrl,
 	getUserByID: () => getUserByID,
-	getUserInfo: () => getUserInfo,
 	getVerifyChallengeProofUrl: () => getVerifyChallengeProofUrl,
-	introspect: () => introspect,
+	initClaim: () => initClaim,
 	issueChallenge: () => issueChallenge,
+	listBranding: () => listBranding,
 	listFlowDefinitions: () => listFlowDefinitions,
 	listSchemas: () => listSchemas,
-	listSessions: () => listSessions,
+	listUserPasskeys: () => listUserPasskeys,
+	listUserTeams: () => listUserTeams,
 	listUsers: () => listUsers,
 	patchProject: () => patchProject,
 	queryProjects: () => queryProjects,
+	querySessions: () => querySessions,
+	queryTeams: () => queryTeams,
 	revokeMySession: () => revokeMySession,
 	revokeSession: () => revokeSession,
-	revokeToken: () => revokeToken,
 	setUserPassword: () => setUserPassword,
-	submitFlowEvent: () => submitFlowEvent,
 	submitFlowStep: () => submitFlowStep,
 	updateFlowDefinition: () => updateFlowDefinition,
+	updateTeam: () => updateTeam,
 	verifyChallengeProof: () => verifyChallengeProof
 });
-const getGetOpenIDConfigurationUrl = () => {
-	return `${getProxyPath()}/.well-known/openid-configuration`;
-};
-/**
-* Retrieve the OpenID Connect configuration
-* @summary Get OpenID Connect configuration
-*/
-const getOpenIDConfiguration = async (options) => {
-	return customFetch(getGetOpenIDConfigurationUrl(), {
-		...options,
-		method: "GET"
-	});
-};
-const getAuthorizeGetUrl = (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()}/auth/authorize?${stringifiedParams}` : `${getProxyPath()}/auth/authorize`;
-};
-/**
-* @summary Authorize a user
-*/
-const authorizeGet = async (params, options) => {
-	return customFetch(getAuthorizeGetUrl(params), {
-		...options,
-		method: "GET"
-	});
-};
-const getAuthorizeDeviceUrl = (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()}/auth/device-authorization?${stringifiedParams}` : `${getProxyPath()}/auth/device-authorization`;
-};
-/**
-* @summary Authorize a device
-*/
-const authorizeDevice = async (params, options) => {
-	return customFetch(getAuthorizeDeviceUrl(params), {
-		...options,
-		method: "GET"
-	});
-};
-const getEndSessionUrl = (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()}/auth/end-session?${stringifiedParams}` : `${getProxyPath()}/auth/end-session`;
-};
-/**
-* @summary End a session
-*/
-const endSession = async (params, options) => {
-	return customFetch(getEndSessionUrl(params), {
-		...options,
-		method: "GET"
-	});
-};
-const getIntrospectUrl = () => {
-	return `${getProxyPath()}/auth/introspect`;
-};
-/**
-* @summary Introspect a token
-*/
-const introspect = async (introspectBody, options) => {
-	const formUrlEncoded = new URLSearchParams();
-	formUrlEncoded.append(`token`, introspectBody.token);
-	if (introspectBody.token_type_hint !== void 0) formUrlEncoded.append(`token_type_hint`, introspectBody.token_type_hint);
-	return customFetch(getIntrospectUrl(), {
-		...options,
-		method: "POST",
-		headers: {
-			"Content-Type": "application/x-www-form-urlencoded",
-			...options?.headers
-		},
-		body: formUrlEncoded
-	});
-};
-const getGetKeysUrl = () => {
-	return `${getProxyPath()}/auth/keys`;
-};
-/**
-* @summary Get public keys
-*/
-const getKeys = async (options) => {
-	return customFetch(getGetKeysUrl(), {
-		...options,
-		method: "GET"
-	});
-};
-const getRevokeTokenUrl = () => {
-	return `${getProxyPath()}/auth/revoke`;
-};
-/**
-* @summary Revoke an access token or refresh token
-*/
-const revokeToken = async (revokeTokenBody, options) => {
-	const formUrlEncoded = new URLSearchParams();
-	if (revokeTokenBody.token !== void 0) formUrlEncoded.append(`token`, revokeTokenBody.token);
-	if (revokeTokenBody.token_type_hint !== void 0) formUrlEncoded.append(`token_type_hint`, revokeTokenBody.token_type_hint);
-	return customFetch(getRevokeTokenUrl(), {
-		...options,
-		method: "POST",
-		headers: {
-			"Content-Type": "application/x-www-form-urlencoded",
-			...options?.headers
-		},
-		body: formUrlEncoded
-	});
-};
-const getGetTokenUrl = () => {
-	return `${getProxyPath()}/auth/token`;
-};
-/**
-* @summary Get access token
-*/
-const getToken = async (getTokenBody, options) => {
-	const formUrlEncoded = new URLSearchParams();
-	if (getTokenBody.code !== void 0) formUrlEncoded.append(`code`, getTokenBody.code);
-	if (getTokenBody.client_assertion !== void 0) formUrlEncoded.append(`client_assertion`, getTokenBody.client_assertion);
-	if (getTokenBody.client_assertion_type !== void 0) formUrlEncoded.append(`client_assertion_type`, getTokenBody.client_assertion_type);
-	if (getTokenBody.client_id !== void 0) formUrlEncoded.append(`client_id`, getTokenBody.client_id);
-	if (getTokenBody.client_secret !== void 0) formUrlEncoded.append(`client_secret`, getTokenBody.client_secret);
-	if (getTokenBody.code_verifier !== void 0) formUrlEncoded.append(`code_verifier`, getTokenBody.code_verifier);
-	if (getTokenBody.grant_type !== void 0) formUrlEncoded.append(`grant_type`, getTokenBody.grant_type);
-	if (getTokenBody.redirect_uri !== void 0) formUrlEncoded.append(`redirect_uri`, getTokenBody.redirect_uri);
-	return customFetch(getGetTokenUrl(), {
-		...options,
-		method: "POST",
-		headers: {
-			"Content-Type": "application/x-www-form-urlencoded",
-			...options?.headers
-		},
-		body: formUrlEncoded
-	});
-};
-const getGetUserInfoUrl = () => {
-	return `${getProxyPath()}/auth/userinfo`;
-};
-/**
-* @summary Get user info
-*/
-const getUserInfo = async (options) => {
-	return customFetch(getGetUserInfoUrl(), {
-		...options,
-		method: "GET"
-	});
-};
 const getGetHealthUrl = () => {
 	return `${getProxyPath()}/healthz`;
 };
@@ -552,6 +399,40 @@ const getUserByID = async (userId, params, options) => {
 		method: "GET"
 	});
 };
+const getDeleteUserByIDUrl = (userId, params) => {
+	const normalizedParams = new URLSearchParams();
+	Object.entries(params || {}).forEach(([key, value]) => {
+		if (value !== void 0) normalizedParams.append(key, value === null ? "null" : value.toString());
+	});
+	const stringifiedParams = normalizedParams.toString();
+	return stringifiedParams.length > 0 ? `${getProxyPath()}/users/${userId}?${stringifiedParams}` : `${getProxyPath()}/users/${userId}`;
+};
+/**
+* @summary Delete user by ID
+*/
+const deleteUserByID = async (userId, params, options) => {
+	return customFetch(getDeleteUserByIDUrl(userId, params), {
+		...options,
+		method: "DELETE"
+	});
+};
+const getListUserPasskeysUrl = (userId, params) => {
+	const normalizedParams = new URLSearchParams();
+	Object.entries(params || {}).forEach(([key, value]) => {
+		if (value !== void 0) normalizedParams.append(key, value === null ? "null" : value.toString());
+	});
+	const stringifiedParams = normalizedParams.toString();
+	return stringifiedParams.length > 0 ? `${getProxyPath()}/users/${userId}/passkeys?${stringifiedParams}` : `${getProxyPath()}/users/${userId}/passkeys`;
+};
+/**
+* @summary List user passkeys
+*/
+const listUserPasskeys = async (userId, params, options) => {
+	return customFetch(getListUserPasskeysUrl(userId, params), {
+		...options,
+		method: "GET"
+	});
+};
 const getSetUserPasswordUrl = (userId, params) => {
 	const normalizedParams = new URLSearchParams();
 	Object.entries(params || {}).forEach(([key, value]) => {
@@ -574,6 +455,31 @@ const setUserPassword = async (userId, setUserPasswordBody, params, options) =>
 		body: JSON.stringify(setUserPasswordBody)
 	});
 };
+const getListUserTeamsUrl = (userId, params) => {
+	const normalizedParams = new URLSearchParams();
+	Object.entries(params || {}).forEach(([key, value]) => {
+		if (value !== void 0) normalizedParams.append(key, value === null ? "null" : value.toString());
+	});
+	const stringifiedParams = normalizedParams.toString();
+	return stringifiedParams.length > 0 ? `${getProxyPath()}/users/${userId}/teams?${stringifiedParams}` : `${getProxyPath()}/users/${userId}/teams`;
+};
+/**
+* The user's team roster, ordered by team name. Each entry carries the
+team's name, so a client renders a page without resolving ids one by one.
+
+This is the N:N roster and it is not lifecycle ownership: the single team
+that owns the user's lifecycle is reported as `metadata.lifecycle_owner_team_id`
+on the user read endpoints. Memberships the user was removed from are not
+returned.
+
+* @summary List the teams a user belongs to
+*/
+const listUserTeams = async (userId, params, options) => {
+	return customFetch(getListUserTeamsUrl(userId, params), {
+		...options,
+		method: "GET"
+	});
+};
 const getGetMyUserUrl = () => {
 	return `${getProxyPath()}/users/me`;
 };
@@ -595,7 +501,7 @@ the first capability step. Creates a new session implicitly unless
 `session_id` is provided (for step-up / reauth on an existing session).
 
 The response contains an `id` field — the flow handle. Use it as the path
-parameter for all subsequent `/flow/{id}/submit` and `/flow/{id}/event` calls.
+parameter for all subsequent `/flow/{id}/submit` calls.
 
 The response also sets an encrypted `HttpOnly` cookie (`_zflow`) containing
 the flow's orchestration state (current step, collected data, history).
@@ -675,26 +581,6 @@ const submitFlowStep = async (id, submitFlowStepBody, options) => {
 		body: JSON.stringify(submitFlowStepBody)
 	});
 };
-const getSubmitFlowEventUrl = (id) => {
-	return `${getProxyPath()}/flow/${id}/event`;
-};
-/**
-* Submits telemetry or fingerprint data from the frontend.
-Does not advance the state machine. Used for risk evaluation.
-
-* @summary Submit client-side event
-*/
-const submitFlowEvent = async (id, submitFlowEventBody, options) => {
-	return customFetch(getSubmitFlowEventUrl(id), {
-		...options,
-		method: "POST",
-		headers: {
-			"Content-Type": "application/json",
-			...options?.headers
-		},
-		body: JSON.stringify(submitFlowEventBody)
-	});
-};
 const getCreateAuthAttemptUrl = () => {
 	return `${getProxyPath()}/auth_attempts`;
 };
@@ -882,6 +768,68 @@ const patchProject = async (projectId, patchProjectBody, options) => {
 		body: JSON.stringify(patchProjectBody)
 	});
 };
+const getInitClaimUrl = (projectId) => {
+	return `${getProxyPath()}/projects/${projectId}/claim/init`;
+};
+/**
+* Starts a claim challenge for an unclaimed project. Authenticated by the
+project secret, this mints a single-use, short-lived challenge and returns
+the `claim_url` the developer opens in a browser to complete the claim,
+together with the `challenge_id` the CLI polls with. The exact expiry is
+carried by `expires_at` on the response.
+
+* @summary Initialize a project claim
+*/
+const initClaim = async (projectId, options) => {
+	return customFetch(getInitClaimUrl(projectId), {
+		...options,
+		method: "POST"
+	});
+};
+const getGetClaimStatusUrl = (projectId, 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()}/projects/${projectId}/claim/status?${stringifiedParams}` : `${getProxyPath()}/projects/${projectId}/claim/status`;
+};
+/**
+* Polled by the CLI while a browser completes the claim. Authorized by the
+project secret that initiated the challenge. Returns `pending`, or
+`completed` with the owning team, the claim timestamp, and the dashboard
+URL once the browser leg has finished.
+
+* @summary Get claim status
+*/
+const getClaimStatus = async (projectId, params, options) => {
+	return customFetch(getGetClaimStatusUrl(projectId, params), {
+		...options,
+		method: "GET"
+	});
+};
+const getCompleteClaimUrl = (projectId) => {
+	return `${getProxyPath()}/projects/${projectId}/claim/complete`;
+};
+/**
+* Called by the browser after the developer authenticates on the claim page.
+Authenticated by the `__nextgen_session` cookie, it attaches the project to
+the developer's personal team using the `challenge_id` from the claim URL as
+its single-use, browser-safe authorization.
+
+* @summary Complete a project claim
+*/
+const completeClaim = async (projectId, completeClaimBody, options) => {
+	return customFetch(getCompleteClaimUrl(projectId), {
+		...options,
+		method: "POST",
+		headers: {
+			"Content-Type": "application/json",
+			...options?.headers
+		},
+		body: JSON.stringify(completeClaimBody)
+	});
+};
 const getCreateSessionUrl = () => {
 	return `${getProxyPath()}/sessions`;
 };
@@ -894,8 +842,16 @@ Use this explicitly when you want to:
 can be correlated with the eventual authenticated session from the start.
 - Track anonymous state (bot detection, device fingerprint) that survives until authentication.
 
-The returned `session_token` authorises GET and DELETE on this session.
-It is superseded when a handoff exchange completes — clients must replace it at that point.
+Creating a session is an app-plane operation on the project credential
+(`session.write`). The returned `session_token` is a session credential for the
+end-user client, not a management scope: it is delivered as the
+`__nextgen_session` cookie and authorises the self-service operations
+`GET /sessions/me` and `DELETE /sessions/me` (`nextgenSession` scheme). The
+by-id operations `GET /sessions/{session_id}` and `DELETE /sessions/{session_id}`
+are operator endpoints and require `session.read` / `session.delete` instead.
+
+The `session_token` is superseded when a handoff exchange completes — clients must
+replace it at that point.
 
 Anonymous sessions expire aggressively (10-minute TTL). The TTL resets to the configured
 full session TTL when the first authentication factor is written via a completing `auth_attempt`.
@@ -913,24 +869,30 @@ const createSession = async (createSessionBody, options) => {
 		body: JSON.stringify(createSessionBody)
 	});
 };
-const getListSessionsUrl = (params) => {
+const getQuerySessionsUrl = (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()}/sessions?${stringifiedParams}` : `${getProxyPath()}/sessions`;
+	return stringifiedParams.length > 0 ? `${getProxyPath()}/sessions/query?${stringifiedParams}` : `${getProxyPath()}/sessions/query`;
 };
 /**
-* Returns a paginated list of sessions for a project.
-Requires a project service key (OAuth2 client credentials).
+* Returns the sessions of a project, paginated with a cursor.
+Sessions of every lifecycle state are returned; each carries its `state`.
+Requires `session.read` permission.
 
-* @summary List sessions
+* @summary Query sessions
 */
-const listSessions = async (params, options) => {
-	return customFetch(getListSessionsUrl(params), {
+const querySessions = async (querySessionsBody, params, options) => {
+	return customFetch(getQuerySessionsUrl(params), {
 		...options,
-		method: "GET"
+		method: "POST",
+		headers: {
+			"Content-Type": "application/json",
+			...options?.headers
+		},
+		body: JSON.stringify(querySessionsBody)
 	});
 };
 const getExchangeHandoffUrl = (params) => {
@@ -1006,10 +968,15 @@ const getRevokeSessionUrl = (sessionId, params) => {
 	return stringifiedParams.length > 0 ? `${getProxyPath()}/sessions/${sessionId}?${stringifiedParams}` : `${getProxyPath()}/sessions/${sessionId}`;
 };
 /**
-* Revokes the session immediately (`state: revoked`). This is the logout operation.
+* Permanently deletes the session, terminating it immediately.
+
+This is the operator revoke path and requires the `session.delete` scope on a
+project-bound credential. End-user logout with the `__nextgen_session` cookie is
+`DELETE /sessions/me` (`nextgenSession` scheme).
 
-The session_token issued at creation (or superseded by a handoff exchange) is required.
-After revocation, any tokens derived from this session are invalidated.
+Idempotent: deleting a session that does not exist (or was already deleted)
+still returns 204. After deletion, any tokens derived from the session are
+invalidated.
 
 * @summary Revoke session
 */
@@ -1042,10 +1009,12 @@ const getRevokeMySessionUrl = () => {
 	return `${getProxyPath()}/sessions/me`;
 };
 /**
-* Revokes the session immediately (`state: revoked`). This is the logout operation.
+* Logs out by permanently deleting the session.
 
-The __nextgen_session cookie issued at creation (or superseded by a handoff exchange) is required.
-After revocation, any tokens derived from this session are invalidated including the cookie itself, which is cleared in the response.
+The `__nextgen_session` cookie issued at creation (or superseded by a handoff
+exchange) is required. Idempotent: if the session is already gone this still
+returns 204. Any tokens derived from the session are invalidated, and the
+cookie itself is cleared in the response.
 
 * @summary Revoke my session
 */
@@ -1064,10 +1033,12 @@ const getCreateSchemaUrl = (params) => {
 	return stringifiedParams.length > 0 ? `${getProxyPath()}/schemas?${stringifiedParams}` : `${getProxyPath()}/schemas`;
 };
 /**
-* Create a new schema. The schema definition must include a unique $id field,
-which will be used to identify the schema in future requests. The $id must
-be a valid URI and should ideally point to the location where the schema
-can be accessed.
+* Create a new schema. The optional `$id` field is the JSON Schema document
+URI used to identify the schema in future requests (GitOps-stable identity,
+not a free-form resource primary key). When `$id` is omitted, the server
+generates a `sch_*` URL. When provided, `$id` must be unique within the
+project and should ideally be a valid URI pointing at where the schema can
+be accessed.
 
 The schema can either be a concrete schema, e.g. a user schema, or a
 schema-url which will be resolved by the server.
@@ -1230,93 +1201,200 @@ const deleteFlowDefinition = async (id, params, options) => {
 		method: "DELETE"
 	});
 };
-const getActivateFlowDefinitionUrl = (id, params) => {
+const getCreateTeamUrl = (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()}/teams?${stringifiedParams}` : `${getProxyPath()}/teams`;
+};
+/**
+* @summary Create team
+*/
+const createTeam = async (createTeamBody, params, options) => {
+	return customFetch(getCreateTeamUrl(params), {
+		...options,
+		method: "POST",
+		headers: {
+			"Content-Type": "application/json",
+			...options?.headers
+		},
+		body: JSON.stringify(createTeamBody)
+	});
+};
+const getQueryTeamsUrl = (params) => {
 	const normalizedParams = new URLSearchParams();
 	Object.entries(params || {}).forEach(([key, value]) => {
 		if (value !== void 0) normalizedParams.append(key, value === null ? "null" : value.toString());
 	});
 	const stringifiedParams = normalizedParams.toString();
-	return stringifiedParams.length > 0 ? `${getProxyPath()}/flow_definitions/${id}/activate?${stringifiedParams}` : `${getProxyPath()}/flow_definitions/${id}/activate`;
+	return stringifiedParams.length > 0 ? `${getProxyPath()}/teams/query?${stringifiedParams}` : `${getProxyPath()}/teams/query`;
 };
 /**
-* Activate a flow definition by transitioning it from a `draft` state to an `active` state.
-Alternatively, the status of a flow definition can also be set via the `POST /flow_definitions` and `PUT /flow_definitions/{id}` endpoints by setting the `status` attribute in the flow definition payload.
+* Returns the teams of a project, paginated with a cursor.
+Teams of every lifecycle status are returned; each carries its `status`.
 
-* @summary Activate a flow definition by ID.
+* @summary Query teams
 */
-const activateFlowDefinition = async (id, params, options) => {
-	return customFetch(getActivateFlowDefinitionUrl(id, params), {
+const queryTeams = async (queryTeamsBody, params, options) => {
+	return customFetch(getQueryTeamsUrl(params), {
 		...options,
-		method: "POST"
+		method: "POST",
+		headers: {
+			"Content-Type": "application/json",
+			...options?.headers
+		},
+		body: JSON.stringify(queryTeamsBody)
 	});
 };
-const getDeactivateFlowDefinitionUrl = (id, params) => {
+const getGetTeamUrl = (teamId, params) => {
 	const normalizedParams = new URLSearchParams();
 	Object.entries(params || {}).forEach(([key, value]) => {
 		if (value !== void 0) normalizedParams.append(key, value === null ? "null" : value.toString());
 	});
 	const stringifiedParams = normalizedParams.toString();
-	return stringifiedParams.length > 0 ? `${getProxyPath()}/flow_definitions/${id}/deactivate?${stringifiedParams}` : `${getProxyPath()}/flow_definitions/${id}/deactivate`;
+	return stringifiedParams.length > 0 ? `${getProxyPath()}/teams/${teamId}?${stringifiedParams}` : `${getProxyPath()}/teams/${teamId}`;
 };
 /**
-* Deactivates a flow definition in the `active` state by transitioning it to the `draft` state.
-Flow definitions in `draft` state cannot be used to start new flows. Existing flows that use the deactivated flow definition must gracefully handle this.
-Alternatively, the status of a flow definition can also be set via the `POST /flow_definitions` and `PUT /flow_definitions/{id}` endpoints by setting the `status` attribute in the flow definition payload.
+* Returns a Team by its id.
 
-* @summary Deactivate a flow definition by ID.
+* @summary Get team
 */
-const deactivateFlowDefinition = async (id, params, options) => {
-	return customFetch(getDeactivateFlowDefinitionUrl(id, params), {
+const getTeam = async (teamId, params, options) => {
+	return customFetch(getGetTeamUrl(teamId, params), {
 		...options,
-		method: "POST"
+		method: "GET"
 	});
 };
-const getCreateTeamUrl = (params) => {
+const getDeleteTeamUrl = (teamId, 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()}/teams?${stringifiedParams}` : `${getProxyPath()}/teams`;
+	return stringifiedParams.length > 0 ? `${getProxyPath()}/teams/${teamId}?${stringifiedParams}` : `${getProxyPath()}/teams/${teamId}`;
 };
 /**
-* @summary Create team
+* Deactivates the team.
+
+The team is tombstoned rather than erased: it stays readable through
+getTeam with status `deactivated`. Its memberships are removed and the
+users whose lifecycle it owns are deactivated with it.
+
+The request is idempotent. Deleting a team that is already deactivated
+or doesn't exist succeeds without changing anything.
+
+* @summary Delete team
 */
-const createTeam = async (params, createTeamBody, options) => {
-	return customFetch(getCreateTeamUrl(params), {
+const deleteTeam = async (teamId, params, options) => {
+	return customFetch(getDeleteTeamUrl(teamId, params), {
 		...options,
-		method: "POST",
+		method: "DELETE"
+	});
+};
+const getUpdateTeamUrl = (teamId, 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()}/teams/${teamId}?${stringifiedParams}` : `${getProxyPath()}/teams/${teamId}`;
+};
+/**
+* Update team. Only active teams can be updated.
+
+* @summary Update team
+*/
+const updateTeam = async (teamId, updateTeamBody, params, options) => {
+	return customFetch(getUpdateTeamUrl(teamId, params), {
+		...options,
+		method: "PATCH",
 		headers: {
 			"Content-Type": "application/json",
 			...options?.headers
 		},
-		body: JSON.stringify(createTeamBody)
+		body: JSON.stringify(updateTeamBody)
 	});
 };
-const getGetTeamUrl = (teamId, params) => {
+const getCreateBrandingUrl = (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()}/teams/${teamId}?${stringifiedParams}` : `${getProxyPath()}/teams/${teamId}`;
+	return stringifiedParams.length > 0 ? `${getProxyPath()}/branding?${stringifiedParams}` : `${getProxyPath()}/branding`;
 };
 /**
-* Returns the current state of a team.
+* Publishes a new immutable branding revision for the project. Branding
+revisions cannot be updated or deleted; every edit publishes a new
+revision, and flow responses resolve the latest revision per project
+(see ADR 040).
 
-* @summary Get team
+The `liquid_template` is validated lexically on save (size, encoding,
+banned patterns such as `<script>` tags, inline event handlers, and the
+`| raw` filter). Authoritative LiquidJS validation runs at authoring
+time via `zitadel plan` / `zitadel apply`.
+
+* @summary Publish a new branding revision
 */
-const getTeam = async (teamId, params, options) => {
-	return customFetch(getGetTeamUrl(teamId, params), {
+const createBranding = async (createBrandingBody, params, options) => {
+	return customFetch(getCreateBrandingUrl(params), {
 		...options,
-		method: "GET"
+		method: "POST",
+		headers: {
+			"Content-Type": "application/json",
+			...options?.headers
+		},
+		body: JSON.stringify(createBrandingBody)
 	});
 };
-//#endregion
-//#region ../api/dist/runtime/api-factory.mjs
-/**
-* Factory for the typed Zitadel client every consumer reaches for.
-*
+const getListBrandingUrl = (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()}/branding?${stringifiedParams}` : `${getProxyPath()}/branding`;
+};
+/**
+* Lists branding revisions for the project, newest first, capped at the
+100 most recent. The first entry is the revision flow responses
+currently resolve. Deliberately unpaginated in v1 — list endpoints
+gain a real query mechanism together (ADR 031); advertising pagination
+parameters the server ignores would be worse than none.
+
+* @summary List branding revisions
+*/
+const listBranding = async (params, options) => {
+	return customFetch(getListBrandingUrl(params), {
+		...options,
+		method: "GET"
+	});
+};
+const getGetBrandingByIdUrl = (id, params) => {
+	const normalizedParams = new URLSearchParams();
+	Object.entries(params || {}).forEach(([key, value]) => {
+		if (value !== void 0) normalizedParams.append(key, value === null ? "null" : value.toString());
+	});
+	const stringifiedParams = normalizedParams.toString();
+	return stringifiedParams.length > 0 ? `${getProxyPath()}/branding/${id}?${stringifiedParams}` : `${getProxyPath()}/branding/${id}`;
+};
+/**
+* Retrieves a single branding revision, including its stored configuration.
+* @summary Get a branding revision by ID
+*/
+const getBrandingById = async (id, params, options) => {
+	return customFetch(getGetBrandingByIdUrl(id, params), {
+		...options,
+		method: "GET"
+	});
+};
+//#endregion
+//#region ../api/dist/runtime/api-factory.mjs
+/**
+* Factory for the typed Zitadel client every consumer reaches for.
+*
 * Wraps the orval-generated endpoints in a {@link Proxy} so each
 * generated function sees the right base URL and (optionally) the
 * right bearer token at call time — without the caller having to
@@ -1338,11 +1416,12 @@ const getTeam = async (teamId, params, options) => {
 * generated orval function:
 *
 *     const client = createZitadelClient({ baseUrl, token });
-*     await client.createProject({ previewOrigins: [] });
+*     await client.createProject({ preview_origins: [] });
 *     await client.createSchema(body, { project_id });
 */
 function createZitadelClient(opts) {
-	const baseUrl = opts.baseUrl.replace(/\/+$/, "");
+	let baseUrl = opts.baseUrl;
+	while (baseUrl.endsWith("/")) baseUrl = baseUrl.slice(0, -1);
 	return new Proxy(zitadelNextGen_exports, { get(target, prop, receiver) {
 		const value = Reflect.get(target, prop, receiver);
 		if (typeof value !== "function") return value;
@@ -1353,15 +1432,6 @@ function createZitadelClient(opts) {
 		};
 	} });
 }
-/**
-* Legacy entry point: builds a client with only the base URL set, no
-* token. Components and SDKs that don't carry an auth token (browser
-* flows authenticated by platform cookies) still consume this name.
-* Equivalent to `createZitadelClient({ baseUrl: apiBase })`.
-*/
-function createApi(apiBase) {
-	return createZitadelClient({ baseUrl: apiBase });
-}
 //#endregion
 //#region ../api/dist/runtime/config.mjs
 /**
@@ -1401,7 +1471,10 @@ const apiCache = /* @__PURE__ */ new WeakMap();
 function getApi(project) {
 	let api = apiCache.get(project);
 	if (!api) {
-		api = createApi(project.proxyPath);
+		api = createZitadelClient({
+			baseUrl: project.proxyPath,
+			token: project.publishableKey
+		});
 		apiCache.set(project, api);
 	}
 	return api;
@@ -1489,183 +1562,6 @@ function resolveApi(project, attrs, element) {
 	};
 }
 //#endregion
-//#region src/orchestrator/branding-to-tokens.ts
-/**
-* Branding -> CSS token bridge.
-*
-* Per `docs/design/branding/README.md` the orchestrator owns theming. Templates
-* never emit `<style>` blocks; they only structure HTML. This module translates
-* the `Branding` JSON into a CSSStyleSheet of `:host { --zl-* }` declarations
-* and applies it via `shadowRoot.adoptedStyleSheets`.
-*
-* Dark-mode overrides are emitted as `:host([data-theme="dark"]) { ... }`
-* (matching `docs/design/branding/tokens.md`). Resolution between
-* `light | dark | auto` happens in `<zitadel-login>`.
-*
-* Base layer: the design-tokens package ships the full `--zl-*` set as both a
-* `.css` file (for host pages) and a `tokensCss` string (for shadow roots and
-* SSR). We adopt the string into every orchestrator shadow root so atoms
-* paint correctly even when the host page didn't `@import` tokens.css — the
-* orchestrator is meant to drop into any page.
-*/
-const RADIUS_MAP = {
-	none: "0",
-	sm: "0.25rem",
-	md: "0.5rem",
-	lg: "0.75rem",
-	full: "9999px"
-};
-const DENSITY_MAP = {
-	compact: {
-		"--zl-spacing-03": "0.75rem",
-		"--zl-spacing-05": "1.5rem"
-	},
-	regular: {},
-	comfortable: {
-		"--zl-spacing-03": "1.25rem",
-		"--zl-spacing-05": "2.25rem"
-	}
-};
-const PALETTE_MAP = {
-	primary: ["--zl-color-surface-default-white"],
-	on_primary: ["--zl-color-text-button-default"],
-	background: ["--zl-color-surface-default-black"],
-	surface: ["--zl-color-surface-default-primary-gray"],
-	muted: ["--zl-color-surface-default-secondary-gray"],
-	border: ["--zl-color-border-default-gray-200", "--zl-color-border-default-gray-100"],
-	text: ["--zl-color-text-primary-white"],
-	text_muted: ["--zl-color-text-secondary-gray"],
-	link: ["--zl-color-text-subtitle-pink"],
-	success: [
-		"--zl-color-text-success",
-		"--zl-color-border-success",
-		"--zl-color-icon-success"
-	],
-	warning: ["--zl-color-text-subtitle-orange"],
-	error: [
-		"--zl-color-text-error",
-		"--zl-color-border-error",
-		"--zl-color-icon-error"
-	]
-};
-/**
-* Build a CSS string of `:host { --zl-* }` declarations from a Branding
-* payload. Light values land on `:host`; dark overrides land on
-* `:host([data-theme="dark"])`.
-*/
-function buildBrandingStylesheet(branding, options = {}) {
-	const lightDecls = collectDeclarations(branding);
-	const darkPalette = branding?.theme?.dark?.palette;
-	const darkDecls = darkPalette ? mapPalette(darkPalette) : {};
-	const blocks = [];
-	if (Object.keys(lightDecls).length > 0) blocks.push(formatBlock(":host", lightDecls));
-	if (Object.keys(darkDecls).length > 0) blocks.push(formatBlock(":host([data-theme=\"dark\"])", darkDecls));
-	if (options.resolvedTheme === "dark" && darkPalette) {
-		const merged = {
-			...lightDecls,
-			...darkDecls
-		};
-		blocks.length = 0;
-		blocks.push(formatBlock(":host", merged));
-	}
-	return blocks.join("\n");
-}
-function collectDeclarations(branding) {
-	if (!branding) return {};
-	const decls = {};
-	Object.assign(decls, mapPalette(branding.palette));
-	Object.assign(decls, mapTypography(branding.typography));
-	Object.assign(decls, mapShape(branding.shape));
-	return decls;
-}
-function mapPalette(palette) {
-	if (!palette) return {};
-	const out = {};
-	for (const [key, varNames] of Object.entries(PALETTE_MAP)) {
-		const value = palette[key];
-		if (typeof value === "string" && value.length > 0) for (const varName of varNames) out[varName] = value;
-	}
-	return out;
-}
-function mapTypography(typography) {
-	if (!typography) return {};
-	const out = {};
-	if (typography.font_family) {
-		out["--zl-font-family-sans"] = typography.font_family;
-		out["--zl-font-family-heading"] = typography.font_family;
-	}
-	if (typography.font_family_mono) out["--zl-font-family-mono"] = typography.font_family_mono;
-	const scale = clamp(typography.scale ?? 1, .75, 1.25);
-	if (scale !== 1) out["--zl-font-scale"] = `${scale}`;
-	return out;
-}
-function mapShape(shape) {
-	if (!shape) return {};
-	const out = {};
-	if (shape.radius && RADIUS_MAP[shape.radius]) {
-		const radius = RADIUS_MAP[shape.radius];
-		out["--zl-radius-s"] = radius;
-		out["--zl-radius-m"] = radius === "0" ? "0" : `calc(${radius} * 1.5)`;
-		out["--zl-radius-l"] = radius === "0" ? "0" : `calc(${radius} * 2)`;
-	}
-	if (shape.density) Object.assign(out, DENSITY_MAP[shape.density]);
-	return out;
-}
-function formatBlock(selector, decls) {
-	return `${selector} {\n${Object.entries(decls).map(([prop, value]) => `  ${prop}: ${value};`).join("\n")}\n}`;
-}
-function clamp(value, min, max) {
-	if (Number.isNaN(value)) return min;
-	return Math.min(max, Math.max(min, value));
-}
-let baseTokenSheet;
-function getBaseTokenSheet() {
-	if (typeof CSSStyleSheet === "undefined") return void 0;
-	if (!baseTokenSheet) {
-		baseTokenSheet = new CSSStyleSheet();
-		baseTokenSheet.replaceSync(tokensCss.replaceAll(":root,\n[data-theme=\"dark\"]", ":host,\n:host([data-theme=\"dark\"])").replaceAll("[data-theme=\"light\"]", ":host([data-theme=\"light\"])"));
-	}
-	return baseTokenSheet;
-}
-/**
-* Adopt the design-system base token layer onto a `ShadowRoot`. Safe to call
-* many times — the underlying constructable sheet is shared across every
-* orchestrator instance and de-duplicated in the adopted list.
-*/
-function applyBaseTokens(shadowRoot) {
-	const sheet = getBaseTokenSheet();
-	if (!sheet) return;
-	const existing = Array.isArray(shadowRoot.adoptedStyleSheets) ? shadowRoot.adoptedStyleSheets : [];
-	if (existing.includes(sheet)) return;
-	try {
-		shadowRoot.adoptedStyleSheets = [sheet, ...existing];
-	} catch {}
-}
-/**
-* Apply a branding payload as a `--zl-*` overrides layer on top of the base
-* token sheet. Subsequent calls replace the previous override sheet so a new
-* branding payload paints cleanly without leaking older declarations.
-*
-* Callers should run `applyBaseTokens(shadowRoot)` first (once per shadow
-* root) so the base values exist before branding patches them.
-*/
-function applyBrandingTokens(shadowRoot, branding, resolvedTheme) {
-	const css = buildBrandingStylesheet(branding, { resolvedTheme });
-	if (typeof CSSStyleSheet === "undefined") return;
-	const sheet = new CSSStyleSheet();
-	sheet.replaceSync(css);
-	const previous = shadowRoot.__zlTokenSheet;
-	shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets.filter((s) => s !== previous), sheet];
-	shadowRoot.__zlTokenSheet = sheet;
-}
-function resolveTheme(branding) {
-	const mode = branding?.theme?.mode ?? "dark";
-	if (mode === "light") return "light";
-	if (mode === "dark") return "dark";
-	if (typeof matchMedia === "function") return matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
-	return "dark";
-}
-//#endregion
 //#region ../api/dist/generated/model/index.mjs
 const CreateFlow201BrandingLayout = {
 	centered: "centered",
@@ -1728,83 +1624,57 @@ function sanitiseUrl(value, field, issues) {
 	}
 }
 //#endregion
-//#region src/orchestrator/font-loader.ts
+//#region src/orchestrator/exportparts.ts
 /**
-* Document-level font stylesheet injection for `<zitadel-login>`.
-*
-* Two faces can be linked into the host document's `<head>`:
-*
-* - The **design-system default** (`applyDefaultFont`) — the brand body face
-*   (Arimo, named first in `--zl-font-family-sans`). The component ships this
-*   so the auth screens render in the brand font out of the box, even when the
-*   server returns no branding. This is the "default users can override" layer.
-* - The **tenant override** (`applyFontUrl`) — `branding.font_url`, resolved
-*   server-side from the app → team → project branding hierarchy.
+* Forwards atom-internal CSS Shadow Parts through the orchestrator boundary.
 *
-* Both must live at document level, not inside the shadow root: browsers ignore
-* `@font-face` rules declared in shadow-tree stylesheets, so a shadow-scoped
-* link would never register the font faces and every branded font silently
-* falls back to the system stack. `font-family` references inside the shadow
-* tree resolve against document-level faces.
+* Atoms stamp `part="..."` on their internals and declare the public set in
+* their manifest (`parts`). Those parts are visible one shadow boundary up —
+* inside the orchestrator's shadow root — but not to the embedding page,
+* because `::part()` pierces a single boundary unless each host in the chain
+* re-exports (`exportparts`). Templates never author the forwarding (the
+* sanitiser strips `exportparts`); the orchestrator stamps it after every
+* render commit so the mapping stays canonical for template-rendered and
+* gate-patched atoms alike.
 *
-* Both injectors are idempotent: calling with the same URL is a no-op; calling
-* with a new URL replaces the previous link; calling with `null`/`undefined`
-* removes any previously injected link.
-*/
-const TENANT_LINK_ID = "zl-font-link";
-const DEFAULT_LINK_ID = "zl-default-font-link";
-/**
-* Design-system default brand font. Arimo is the Figma body face and leads the
-* `--zl-font-family-sans` stack; loading it here makes the unbranded auth UI
-* paint in the brand font instead of the system fallback. Tenants override it
-* with `branding.font_url`. Exported so a privacy- or offline-sensitive
-* deployment can self-host the same face and swap this single URL.
+* Exported names are mechanical, collision-free, and public contract
+* (override-ladder Tier 2, same stability rules as token names):
+* `<atom>-<part>` with the `zl-` prefix dropped — `zl-field`'s `input` part
+* becomes `zitadel-login::part(field-input)` on the host page. Manifests are
+* the canonical part catalogue; this module derives, never curates.
 */
-const DEFAULT_BRAND_FONT_HREF = "https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap";
+const exportpartsByTag = new Map(manifestRegistry.filter((manifest) => manifest.parts.length > 0).map((manifest) => {
+	const short = manifest.tag.replace(/^zl-/, "");
+	const value = manifest.parts.map((part) => `${part}: ${short}-${part}`).join(", ");
+	return [manifest.tag, value];
+}));
 /**
-* Inject the tenant's `branding.font_url` stylesheet. Pass `null`/`undefined`
-* to remove it (e.g. when a flow resolves with no tenant font).
+* Stamps `exportparts` onto every known atom in `scope`. Idempotent — call
+* after each render commit: `unsafeHTML` re-parses replace previously
+* stamped nodes, and the mandatory-gates patcher appends atoms after
+* sanitisation.
 */
-function applyFontUrl(shadowRoot, fontUrl) {
-	applyLinkedStylesheet(shadowRoot, TENANT_LINK_ID, fontUrl);
+function stampExportparts(scope) {
+	for (const [tag, value] of exportpartsByTag) for (const el of scope.querySelectorAll(tag)) if (el.getAttribute("exportparts") !== value) el.setAttribute("exportparts", value);
 }
+//#endregion
+//#region src/internal/escape-html.ts
 /**
-* Inject the design-system default font stylesheet. Defaults to
-* {@link DEFAULT_BRAND_FONT_HREF}; pass `null` to remove it (the orchestrator
-* does this when a tenant `font_url` takes over, to avoid a redundant request).
+* Escapes the five HTML-significant characters so a string is safe to
+* interpolate into either element text or a double-quoted attribute value.
+*
+* Used for the orchestrator-owned attribution markup, which is appended after
+* the Liquid output has already been sanitised — so it can't rely on the
+* DOMPurify pass and must escape its own (tenant-supplied) values.
 */
-function applyDefaultFont(shadowRoot, href = DEFAULT_BRAND_FONT_HREF) {
-	applyLinkedStylesheet(shadowRoot, DEFAULT_LINK_ID, href);
-}
-function applyLinkedStylesheet(shadowRoot, linkId, href) {
-	const ownerDocument = shadowRoot.ownerDocument ?? document;
-	const existing = ownerDocument.head.querySelector(`link#${linkId}`);
-	if (!href) {
-		existing?.remove();
-		return;
-	}
-	const link = existing ?? ownerDocument.createElement("link");
-	link.id = linkId;
-	link.rel = "stylesheet";
-	if (link.href !== href) link.href = href;
-	if (!existing) ownerDocument.head.appendChild(link);
-}
-//#endregion
-//#region src/internal/escape-html.ts
-/**
-* Escapes the five HTML-significant characters so a string is safe to
-* interpolate into either element text or a double-quoted attribute value.
-*
-* Used for the orchestrator-owned attribution markup, which is appended after
-* the Liquid output has already been sanitised — so it can't rely on the
-* DOMPurify pass and must escape its own (tenant-supplied) values.
-*/
-function escapeHtml(value) {
-	return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+function escapeHtml(value) {
+	return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
 //#endregion
 //#region src/orchestrator/mandatory-gates.ts
 const MANDATORY_GATES_MARKER = "ZL_MANDATORY_GATES";
+/** Every atom tag that participates as a named form field. */
+const FIELD_ATOM_TAGS = "zl-field, zl-select, zl-checkbox";
 const mandatoryGatesMarkerComment = `<!--${MANDATORY_GATES_MARKER}-->`;
 function patchMandatoryGates(html, step, locale) {
 	const template = document.createElement("template");
@@ -1835,7 +1705,7 @@ function hasPrimaryButton(fragment) {
 	return Boolean(fragment.querySelector("zl-button[hierarchy=\"primary\"]"));
 }
 function hasFieldFor(fragment, name) {
-	for (const field of fragment.querySelectorAll("zl-field")) if (field.getAttribute("name") === name) return true;
+	for (const field of fragment.querySelectorAll(FIELD_ATOM_TAGS)) if (field.getAttribute("name") === name) return true;
 	return false;
 }
 function findMarkerComment(fragment) {
@@ -1887,11 +1757,15 @@ function lookup(locale, key) {
 */
 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.
+* Maps catalog `error.*` keys with no `_<rule>` suffix (so
+* {@link localiseFlowErrorKeys} can't derive the field from the key itself)
+* to their field name — the credential errors with bespoke catalog copy
+* (`error.email_exists`, `error.invalid_credentials`, …). Rule-suffixed keys
+* (`error.<field>_<rule>`) derive their field from the key. Consumed only by
+* {@link localiseFlowErrorKeys}, which stamps the resolved `field` onto the
+* error; the template filters (`fieldError` / `formLevelError`) then route by
+* that `field`, and an error whose field the step omits is downgraded to a
+* fieldless banner message.
 */
 const fieldErrorKeys = {
 	"error.email_required": "email",
@@ -1915,9 +1789,18 @@ function createLiquidEngine(options) {
 		outputEscape: "escape"
 	});
 	engine.registerFilter("raw", (value) => stringify(value));
+	const warnedMissingKeys = /* @__PURE__ */ new Set();
 	engine.registerFilter("t", function tFilter(key, ...args) {
 		const lookupKey = stringify(key);
-		return interpolate(options.locale[lookupKey] ?? injectedKeyFallback(options.locale, lookupKey) ?? fieldLabelFallback(lookupKey) ?? lookupKey, args.map(stringify));
+		let template = options.locale[lookupKey] ?? injectedKeyFallback(options.locale, lookupKey) ?? fieldLabelFallback(lookupKey);
+		if (template === void 0) {
+			template = lookupKey;
+			if (lookupKey !== "" && !warnedMissingKeys.has(lookupKey)) {
+				warnedMissingKeys.add(lookupKey);
+				console.warn(`[zitadel-login] missing text key "${lookupKey}" — rendering the raw key`);
+			}
+		}
+		return interpolate(template, args.map(stringify));
 	});
 	/** Resolves `{text_key}.placeholder` — empty when undefined (not the raw key). */
 	engine.registerFilter("fieldPlaceholder", (textKey) => {
@@ -1960,8 +1843,9 @@ function createLiquidEngine(options) {
 		const name = stringify(fieldName);
 		if (!Array.isArray(errors)) return "";
 		for (const item of errors) {
-			const key = item.text_key ?? "";
-			if (fieldErrorKeys[key] === name) return options.locale[key] ?? key;
+			const err = item;
+			if (err.field !== name) continue;
+			return err.text_key ? options.locale[err.text_key] ?? err.text_key : err.message ?? "";
 		}
 		return "";
 	});
@@ -1972,12 +1856,17 @@ function createLiquidEngine(options) {
 	* 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. */
+	/**
+	* True when the error should render as `<zl-alert>`, not on a field. A
+	* field-scoped error (`field` set by {@link localiseFlowErrorKeys} when the
+	* step renders that field) routes inline instead; everything else — engine
+	* errors, and orphaned field errors already downgraded to a fieldless
+	* message — falls to the banner.
+	*/
 	engine.registerFilter("formLevelError", (err) => {
-		const key = err?.text_key ?? "";
-		return key === "" || !(key in fieldErrorKeys);
+		return !err?.field;
 	});
-	engine.registerTag("mandatory_gates", {
+	engine.registerTag(MANDATORY_GATES_TAG, {
 		parse() {},
 		render() {
 			return mandatoryGatesMarkerComment;
@@ -2077,12 +1966,19 @@ function localiseFlowErrorKeys(raw, 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 };
+	if (!orphanedInline && ctx.locale[key] !== void 0) return inlineField !== void 0 ? {
+		field: inlineField,
+		text_key: key
+	} : { 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)])) };
+		const message = capitaliseFirst(interpolate(ctx.locale[generic] ?? ctx.locale[FLOW_ERROR_CATCH_ALL_KEY] ?? "Please check {0}.", [fieldLabel(ctx, field)]));
+		return ctx.fields !== void 0 && ctx.fields.includes(field) ? {
+			field,
+			message
+		} : { message };
 	}
 	if (orphanedInline && ctx.locale[key] !== void 0) return { message: ctx.locale[key] };
 	return { text_key: key };
@@ -2161,8 +2057,8 @@ const TEMPLATE_NAMES = {
 const en = {
 	"identifier.title": "Sign in",
 	"identifier.description": "Enter your email to continue",
-	"identifier.field.email": "Work email",
-	"identifier.field.email.placeholder": "you@company.com",
+	"identifier.field.email": "Email",
+	"identifier.field.email.placeholder": "you@example.com",
 	"identifier.field.password": "Password",
 	"identifier.action.submit": "Sign in",
 	"identifier.action.continue": "Sign in",
@@ -2179,8 +2075,8 @@ const en = {
 	"choose-register.action.register-with-passkey": "Sign up with passkey",
 	"collect-credentials.title": "Create your account",
 	"collect-credentials.description": "Set up your email and password",
-	"collect-credentials.field.email": "Work email",
-	"collect-credentials.field.email.placeholder": "you@company.com",
+	"collect-credentials.field.email": "Email",
+	"collect-credentials.field.email.placeholder": "you@example.com",
 	"collect-credentials.field.password": "Password",
 	"collect-credentials.action.submit": "Sign up",
 	"register-password.title": "Create your password",
@@ -2197,8 +2093,8 @@ const en = {
 	"passkey-upsell.action.setup": "Set up passkey",
 	"collect-passkey-email.title": "Create your account",
 	"collect-passkey-email.description": "Enter your email to set up a passkey",
-	"collect-passkey-email.field.email": "Work email",
-	"collect-passkey-email.field.email.placeholder": "you@company.com",
+	"collect-passkey-email.field.email": "Email",
+	"collect-passkey-email.field.email.placeholder": "you@example.com",
 	"collect-passkey-email.action.submit": "Continue",
 	"passkey-enroll.title": "Set up your passkey",
 	"passkey-enroll.description": "Use Face ID, Touch ID, or your device PIN to create a passkey.",
@@ -2215,11 +2111,12 @@ const en = {
 	"password.action.register.link": "Sign up",
 	"register.title": "Create your account",
 	"register.description": "",
-	"register.field.email": "Work email",
-	"register.field.email.placeholder": "you@company.com",
+	"register.field.email": "Email",
+	"register.field.email.placeholder": "you@example.com",
 	"register.field.password": "Password",
 	"register.field.givenName": "Given name",
 	"register.field.familyName": "Family name",
+	"register.field.companyName": "Company name",
 	"register.field.dateOfBirth": "Date of birth",
 	"register.field.country": "Country",
 	"register.field.country.placeholder": "Select your country",
@@ -2278,7 +2175,7 @@ const de = {
 	"identifier.title": "Anmelden",
 	"identifier.description": "Gib deine E-Mail-Adresse ein, um fortzufahren",
 	"identifier.field.email": "E-Mail",
-	"identifier.field.email.placeholder": "du@unternehmen.com",
+	"identifier.field.email.placeholder": "du@beispiel.de",
 	"identifier.field.password": "Passwort",
 	"identifier.action.submit": "Anmelden",
 	"identifier.action.continue": "Anmelden",
@@ -2296,7 +2193,7 @@ const de = {
 	"collect-credentials.title": "Konto erstellen",
 	"collect-credentials.description": "Richte E-Mail und Passwort ein",
 	"collect-credentials.field.email": "E-Mail",
-	"collect-credentials.field.email.placeholder": "du@unternehmen.com",
+	"collect-credentials.field.email.placeholder": "du@beispiel.de",
 	"collect-credentials.field.password": "Passwort",
 	"collect-credentials.action.submit": "Registrieren",
 	"register-password.title": "Passwort erstellen",
@@ -2314,7 +2211,7 @@ const de = {
 	"collect-passkey-email.title": "Konto erstellen",
 	"collect-passkey-email.description": "Gib deine E-Mail-Adresse ein, um einen Passkey einzurichten",
 	"collect-passkey-email.field.email": "E-Mail",
-	"collect-passkey-email.field.email.placeholder": "du@unternehmen.com",
+	"collect-passkey-email.field.email.placeholder": "du@beispiel.de",
 	"collect-passkey-email.action.submit": "Weiter",
 	"passkey-enroll.title": "Passkey einrichten",
 	"passkey-enroll.description": "Verwende Face ID, Touch ID oder die Geräte-PIN, um einen Passkey zu erstellen.",
@@ -2332,10 +2229,11 @@ const de = {
 	"register.title": "Konto erstellen",
 	"register.description": "",
 	"register.field.email": "E-Mail",
-	"register.field.email.placeholder": "du@unternehmen.com",
+	"register.field.email.placeholder": "du@beispiel.de",
 	"register.field.password": "Passwort",
 	"register.field.givenName": "Vorname",
 	"register.field.familyName": "Nachname",
+	"register.field.companyName": "Firmenname",
 	"register.field.dateOfBirth": "Geburtsdatum",
 	"register.field.country": "Land",
 	"register.field.country.placeholder": "Land auswählen",
@@ -2392,8 +2290,8 @@ const de = {
 const it = {
 	"identifier.title": "Accedi",
 	"identifier.description": "Inserisci la tua e-mail per continuare",
-	"identifier.field.email": "E-mail aziendale",
-	"identifier.field.email.placeholder": "tu@azienda.com",
+	"identifier.field.email": "E-mail",
+	"identifier.field.email.placeholder": "tu@esempio.com",
 	"identifier.field.password": "Password",
 	"identifier.action.submit": "Accedi",
 	"identifier.action.continue": "Accedi",
@@ -2410,8 +2308,8 @@ const it = {
 	"choose-register.action.register-with-passkey": "Registrati con passkey",
 	"collect-credentials.title": "Crea il tuo account",
 	"collect-credentials.description": "Configura e-mail e password",
-	"collect-credentials.field.email": "E-mail aziendale",
-	"collect-credentials.field.email.placeholder": "tu@azienda.com",
+	"collect-credentials.field.email": "E-mail",
+	"collect-credentials.field.email.placeholder": "tu@esempio.com",
 	"collect-credentials.field.password": "Password",
 	"collect-credentials.action.submit": "Registrati",
 	"register-password.title": "Crea la tua password",
@@ -2428,8 +2326,8 @@ const it = {
 	"passkey-upsell.action.setup": "Configura passkey",
 	"collect-passkey-email.title": "Crea il tuo account",
 	"collect-passkey-email.description": "Inserisci la tua e-mail per configurare una passkey",
-	"collect-passkey-email.field.email": "E-mail aziendale",
-	"collect-passkey-email.field.email.placeholder": "tu@azienda.com",
+	"collect-passkey-email.field.email": "E-mail",
+	"collect-passkey-email.field.email.placeholder": "tu@esempio.com",
 	"collect-passkey-email.action.submit": "Continua",
 	"passkey-enroll.title": "Configura la tua passkey",
 	"passkey-enroll.description": "Usa Face ID, Touch ID o il PIN del dispositivo per creare una passkey.",
@@ -2446,11 +2344,12 @@ const it = {
 	"password.action.register.link": "Registrati",
 	"register.title": "Crea il tuo account",
 	"register.description": "",
-	"register.field.email": "E-mail aziendale",
-	"register.field.email.placeholder": "tu@azienda.com",
+	"register.field.email": "E-mail",
+	"register.field.email.placeholder": "tu@esempio.com",
 	"register.field.password": "Password",
 	"register.field.givenName": "Nome",
 	"register.field.familyName": "Cognome",
+	"register.field.companyName": "Nome azienda",
 	"register.field.dateOfBirth": "Data di nascita",
 	"register.field.country": "Paese",
 	"register.field.country.placeholder": "Seleziona il tuo paese",
@@ -2503,6 +2402,40 @@ const it = {
 	"error.sign_in_server.body": "Riprova tra qualche minuto"
 };
 //#endregion
+//#region src/orchestrator/locales/business.ts
+const businessLocales = {
+	en: {
+		"identifier.field.email": "Work email",
+		"identifier.field.email.placeholder": "you@company.com",
+		"collect-credentials.field.email": "Work email",
+		"collect-credentials.field.email.placeholder": "you@company.com",
+		"collect-passkey-email.field.email": "Work email",
+		"collect-passkey-email.field.email.placeholder": "you@company.com",
+		"register.field.email": "Work email",
+		"register.field.email.placeholder": "you@company.com"
+	},
+	de: {
+		"identifier.field.email": "Geschäftliche E-Mail",
+		"identifier.field.email.placeholder": "du@unternehmen.com",
+		"collect-credentials.field.email": "Geschäftliche E-Mail",
+		"collect-credentials.field.email.placeholder": "du@unternehmen.com",
+		"collect-passkey-email.field.email": "Geschäftliche E-Mail",
+		"collect-passkey-email.field.email.placeholder": "du@unternehmen.com",
+		"register.field.email": "Geschäftliche E-Mail",
+		"register.field.email.placeholder": "du@unternehmen.com"
+	},
+	it: {
+		"identifier.field.email": "E-mail aziendale",
+		"identifier.field.email.placeholder": "tu@azienda.com",
+		"collect-credentials.field.email": "E-mail aziendale",
+		"collect-credentials.field.email.placeholder": "tu@azienda.com",
+		"collect-passkey-email.field.email": "E-mail aziendale",
+		"collect-passkey-email.field.email.placeholder": "tu@azienda.com",
+		"register.field.email": "E-mail aziendale",
+		"register.field.email.placeholder": "tu@azienda.com"
+	}
+};
+//#endregion
 //#region src/orchestrator/locales/index.ts
 const builtinLocales = {
 	en,
@@ -2541,128 +2474,411 @@ function zitadelAttributionPillInnerHtml() {
 * `<zl-*>` atoms. Anything outside this list and the manifest registry is
 * stripped at sanitise-time.
 */
-const STRUCTURAL_TAGS = [
-	"div",
-	"span",
-	"p",
-	"small",
-	"strong",
-	"em",
-	"br",
-	"hr",
-	"h1",
-	"h2",
-	"h3",
-	"h4",
-	"h5",
-	"h6",
-	"ul",
-	"ol",
-	"li",
-	"a",
-	"img",
-	"section",
-	"header",
-	"footer",
-	"main",
-	"nav",
-	"aside",
-	"article",
-	"figure",
-	"figcaption",
-	"label",
-	"fieldset",
-	"legend"
-];
+const STRUCTURAL_TAGS = [
+	"div",
+	"span",
+	"p",
+	"small",
+	"strong",
+	"em",
+	"br",
+	"hr",
+	"h1",
+	"h2",
+	"h3",
+	"h4",
+	"h5",
+	"h6",
+	"ul",
+	"ol",
+	"li",
+	"a",
+	"img",
+	"section",
+	"header",
+	"footer",
+	"main",
+	"nav",
+	"aside",
+	"article",
+	"figure",
+	"figcaption",
+	"label",
+	"fieldset",
+	"legend"
+];
+/**
+* Attributes templates may carry on structural tags. Per-atom attributes are
+* derived from the manifest registry below — manifests are the single source
+* of truth for "what attributes does `<zl-field>` accept?".
+*/
+const COMMON_ATTRS = [
+	"id",
+	"class",
+	"role",
+	"slot",
+	"tabindex",
+	"lang",
+	"dir",
+	"alt",
+	"title",
+	"src",
+	"srcset",
+	"sizes",
+	"href",
+	"target",
+	"rel",
+	"style",
+	"name",
+	"for",
+	"data-testid",
+	"data-theme",
+	"hidden"
+];
+const CUSTOM_TAG_PATTERN = /^zl-[a-z0-9-]+$/;
+function buildAllowedTagList() {
+	const set = new Set(STRUCTURAL_TAGS);
+	for (const manifest of manifestRegistry) set.add(manifest.tag);
+	return [...set];
+}
+function buildAllowedAttrList() {
+	const set = new Set(COMMON_ATTRS);
+	for (const manifest of manifestRegistry) for (const attr of manifest.attrs) set.add(attr);
+	return [...set];
+}
+/**
+* Returns a sanitiser bound to the current manifest registry. Callers should
+* cache the result; rebuilding is cheap but allocates a fresh DOMPurify config.
+*/
+function createSanitiser() {
+	const config = {
+		USE_PROFILES: { html: true },
+		ADD_TAGS: buildAllowedTagList(),
+		ADD_ATTR: buildAllowedAttrList(),
+		FORBID_TAGS: [
+			"script",
+			"style",
+			"iframe",
+			"object",
+			"embed",
+			"form",
+			"input",
+			"button"
+		],
+		FORBID_ATTR: [
+			"onerror",
+			"onclick",
+			"onload",
+			"onfocus",
+			"onblur"
+		],
+		CUSTOM_ELEMENT_HANDLING: {
+			tagNameCheck: CUSTOM_TAG_PATTERN,
+			attributeNameCheck: /^(?:[a-z][a-z0-9-]*)$/,
+			allowCustomizedBuiltInElements: false
+		},
+		KEEP_CONTENT: true,
+		ALLOW_DATA_ATTR: true,
+		ALLOW_ARIA_ATTR: true,
+		RETURN_TRUSTED_TYPE: false
+	};
+	return function sanitise(html) {
+		const result = DOMPurify.sanitize(html, config);
+		return typeof result === "string" ? result : String(result);
+	};
+}
+//#endregion
+//#region src/orchestrator/branding-to-tokens.ts
+/**
+* Branding -> CSS token bridge.
+*
+* Per `docs/design/branding/README.md` the orchestrator owns theming. Templates
+* never emit `<style>` blocks; they only structure HTML. This module translates
+* the `Branding` JSON into a CSSStyleSheet of `:host { --zl-* }` declarations
+* and applies it via `shadowRoot.adoptedStyleSheets`.
+*
+* Dark-mode overrides are emitted as `:host([data-theme="dark"]) { ... }`
+* (matching `docs/design/branding/tokens.md`). Resolution between
+* `light | dark | auto` happens in `<zitadel-login>`.
+*
+* Base layer: the design-tokens package ships the full `--zl-*` set as both a
+* `.css` file (for host pages) and a `tokensCss` string (for shadow roots and
+* SSR). We adopt the string into every orchestrator shadow root so atoms
+* paint correctly even when the host page didn't `@import` tokens.css — the
+* orchestrator is meant to drop into any page.
+*/
+const RADIUS_MAP = {
+	none: "0",
+	sm: "0.25rem",
+	md: "0.5rem",
+	lg: "0.75rem",
+	full: "9999px"
+};
+const DENSITY_MAP = {
+	compact: {
+		"--zl-spacing-03": "0.75rem",
+		"--zl-spacing-05": "1.5rem"
+	},
+	regular: {},
+	comfortable: {
+		"--zl-spacing-03": "1.25rem",
+		"--zl-spacing-05": "2.25rem"
+	}
+};
+const PALETTE_MAP = {
+	primary: ["--zl-color-surface-default-white"],
+	on_primary: ["--zl-color-text-button-default"],
+	background: ["--zl-color-surface-default-black"],
+	surface: ["--zl-color-surface-default-primary-gray"],
+	muted: ["--zl-color-surface-default-secondary-gray"],
+	border: ["--zl-color-border-default-gray-200", "--zl-color-border-default-gray-100"],
+	text: ["--zl-color-text-primary-white"],
+	text_muted: ["--zl-color-text-secondary-gray"],
+	link: ["--zl-color-text-subtitle-pink"],
+	success: [
+		"--zl-color-text-success",
+		"--zl-color-border-success",
+		"--zl-color-icon-success"
+	],
+	warning: ["--zl-color-text-subtitle-orange"],
+	error: [
+		"--zl-color-text-error",
+		"--zl-color-border-error",
+		"--zl-color-icon-error"
+	]
+};
+/**
+* Build a CSS string of `:host { --zl-* }` declarations from a Branding
+* payload. Light values land on `:host`; dark overrides land on
+* `:host([data-theme="dark"])`.
+*/
+function buildBrandingStylesheet(branding, options = {}) {
+	const lightDecls = collectDeclarations(branding);
+	const darkPalette = branding?.theme?.dark?.palette;
+	const darkDecls = darkPalette ? mapPalette(darkPalette) : {};
+	const blocks = [];
+	if (Object.keys(lightDecls).length > 0) blocks.push(formatBlock(":host", lightDecls));
+	if (Object.keys(darkDecls).length > 0) blocks.push(formatBlock(":host([data-theme=\"dark\"])", darkDecls));
+	if (options.resolvedTheme === "dark" && darkPalette) {
+		const merged = {
+			...lightDecls,
+			...darkDecls
+		};
+		blocks.length = 0;
+		blocks.push(formatBlock(":host", merged));
+	}
+	return blocks.join("\n");
+}
+function collectDeclarations(branding) {
+	if (!branding) return {};
+	const decls = {};
+	Object.assign(decls, mapPalette(branding.palette));
+	Object.assign(decls, mapTypography(branding.typography));
+	Object.assign(decls, mapShape(branding.shape));
+	return decls;
+}
+function mapPalette(palette) {
+	if (!palette) return {};
+	const out = {};
+	for (const [key, varNames] of Object.entries(PALETTE_MAP)) {
+		const value = palette[key];
+		if (typeof value === "string" && value.length > 0) for (const varName of varNames) out[varName] = value;
+	}
+	return out;
+}
+function mapTypography(typography) {
+	if (!typography) return {};
+	const out = {};
+	if (typography.font_family) {
+		out["--zl-font-family-sans"] = typography.font_family;
+		out["--zl-font-family-heading"] = typography.font_family;
+	}
+	if (typography.font_family_mono) out["--zl-font-family-mono"] = typography.font_family_mono;
+	const scale = clamp(typography.scale ?? 1, .75, 1.25);
+	if (scale !== 1) out["--zl-font-scale"] = `${scale}`;
+	return out;
+}
+function mapShape(shape) {
+	if (!shape) return {};
+	const out = {};
+	if (shape.radius && RADIUS_MAP[shape.radius]) {
+		const radius = RADIUS_MAP[shape.radius];
+		out["--zl-radius-s"] = radius;
+		out["--zl-radius-m"] = radius === "0" ? "0" : `calc(${radius} * 1.5)`;
+		out["--zl-radius-l"] = radius === "0" ? "0" : `calc(${radius} * 2)`;
+	}
+	if (shape.density) Object.assign(out, DENSITY_MAP[shape.density]);
+	return out;
+}
+function formatBlock(selector, decls) {
+	return `${selector} {\n${Object.entries(decls).map(([prop, value]) => `  ${prop}: ${value};`).join("\n")}\n}`;
+}
+function clamp(value, min, max) {
+	if (Number.isNaN(value)) return min;
+	return Math.min(max, Math.max(min, value));
+}
+let baseTokenSheet;
+function getBaseTokenSheet() {
+	if (typeof CSSStyleSheet === "undefined") return void 0;
+	if (!baseTokenSheet) {
+		baseTokenSheet = new CSSStyleSheet();
+		baseTokenSheet.replaceSync(tokensCss.replaceAll(":root,\n[data-theme=\"dark\"]", ":host,\n:host([data-theme=\"dark\"])").replaceAll("[data-theme=\"light\"]", ":host([data-theme=\"light\"])"));
+	}
+	return baseTokenSheet;
+}
+/**
+* Adopt the design-system base token layer onto a `ShadowRoot`. Safe to call
+* many times — the underlying constructable sheet is shared across every
+* orchestrator instance and de-duplicated in the adopted list.
+*/
+function applyBaseTokens(shadowRoot) {
+	const sheet = getBaseTokenSheet();
+	if (!sheet) return;
+	const existing = Array.isArray(shadowRoot.adoptedStyleSheets) ? shadowRoot.adoptedStyleSheets : [];
+	if (existing.includes(sheet)) return;
+	try {
+		shadowRoot.adoptedStyleSheets = [sheet, ...existing];
+	} catch {}
+}
+/**
+* Apply a branding payload as a `--zl-*` overrides layer on top of the base
+* token sheet. Subsequent calls replace the previous override sheet so a new
+* branding payload paints cleanly without leaking older declarations.
+*
+* Callers should run `applyBaseTokens(shadowRoot)` first (once per shadow
+* root) so the base values exist before branding patches them.
+*/
+function applyBrandingTokens(shadowRoot, branding, resolvedTheme) {
+	const css = buildBrandingStylesheet(branding, { resolvedTheme });
+	if (typeof CSSStyleSheet === "undefined") return;
+	const sheet = new CSSStyleSheet();
+	sheet.replaceSync(css);
+	const previous = shadowRoot.__zlTokenSheet;
+	shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets.filter((s) => s !== previous), sheet];
+	shadowRoot.__zlTokenSheet = sheet;
+}
+/**
+* Standalone branding→theme resolution for callers outside the orchestrator
+* (SSR, tests, embedders composing atoms by hand). `<zitadel-login>` itself
+* uses {@link ThemeController}, which layers the element's `theme` property
+* and a variant-derived fallback on top of the same branding input.
+*
+* Defaults to dark: the design system's primary surface, and the mode a
+* hosted login page renders when a tenant states no preference.
+*/
+function resolveTheme(branding) {
+	const mode = branding?.theme?.mode ?? "dark";
+	if (mode === "light") return "light";
+	if (mode === "dark") return "dark";
+	if (typeof matchMedia === "function") return matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
+	return "dark";
+}
+//#endregion
+//#region src/orchestrator/font-loader.ts
+/**
+* Document-level font stylesheet injection for the orchestrator surfaces.
+*
+* Two faces can be linked into the host document's `<head>`:
+*
+* - The **design-system default** (`applyDefaultFont`) — the brand body face
+*   (Arimo, named first in `--zl-font-family-sans`). The component ships this
+*   so the auth screens render in the brand font out of the box, even when the
+*   server returns no branding. This is the "default users can override" layer.
+* - The **tenant override** (`applyFontUrl`) — `branding.font_url`, resolved
+*   server-side from the app → team → project branding hierarchy.
+*
+* Both must live at document level, not inside the shadow root: browsers ignore
+* `@font-face` rules declared in shadow-tree stylesheets, so a shadow-scoped
+* link would never register the font faces and every branded font silently
+* falls back to the system stack. `font-family` references inside the shadow
+* tree resolve against document-level faces.
+*
+* Each `<link>` is shared per document but **owned collectively**: every
+* calling surface (identified by its shadow root) registers the href it wants,
+* and passing `null`/`undefined` withdraws only that surface's registration —
+* never the link another surface still needs. Multiple surfaces now call these
+* helpers on every update (`<zitadel-login>` and `<zitadel-session>` via the
+* shared surface base), so a widget-mode session mounting next to a page-mode
+* login must not strip the login's fonts. The rendered href is the most
+* recently registered one (matching the old single-owner behavior when only
+* one surface is present); the link is removed once no surface wants it.
+* Registrations from since-disconnected surfaces are pruned lazily on the
+* next call, so a removed element neither pins a link forever nor leaks its
+* shadow root — while the link itself stays in place until another surface
+* actually updates, exactly like the pre-ownership behavior.
+*/
+const TENANT_LINK_ID = "zl-font-link";
+const DEFAULT_LINK_ID = "zl-default-font-link";
+/**
+* Design-system default brand font. Arimo is the Figma body face and leads the
+* `--zl-font-family-sans` stack; loading it here makes the unbranded auth UI
+* paint in the brand font instead of the system fallback. Tenants override it
+* with `branding.font_url`. Exported so a privacy- or offline-sensitive
+* deployment can self-host the same face and swap this single URL.
+*/
+const DEFAULT_BRAND_FONT_HREF = "https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap";
+/** Per-document, per-link-id map of each owner's desired href. */
+const registries = /* @__PURE__ */ new WeakMap();
 /**
-* Attributes templates may carry on structural tags. Per-atom attributes are
-* derived from the manifest registry below — manifests are the single source
-* of truth for "what attributes does `<zl-field>` accept?".
+* Inject the tenant's `branding.font_url` stylesheet. Pass `null`/`undefined`
+* to withdraw this surface's registration (e.g. when a flow resolves with no
+* tenant font); the link disappears once no surface registers a URL.
 */
-const COMMON_ATTRS = [
-	"id",
-	"class",
-	"role",
-	"slot",
-	"tabindex",
-	"lang",
-	"dir",
-	"alt",
-	"title",
-	"src",
-	"srcset",
-	"sizes",
-	"href",
-	"target",
-	"rel",
-	"style",
-	"name",
-	"for",
-	"data-testid",
-	"data-theme",
-	"hidden"
-];
-const CUSTOM_TAG_PATTERN = /^zl-[a-z0-9-]+$/;
-function buildAllowedTagList() {
-	const set = new Set(STRUCTURAL_TAGS);
-	for (const manifest of manifestRegistry) set.add(manifest.tag);
-	return [...set];
-}
-function buildAllowedAttrList() {
-	const set = new Set(COMMON_ATTRS);
-	for (const manifest of manifestRegistry) for (const attr of manifest.attrs) set.add(attr);
-	return [...set];
+function applyFontUrl(shadowRoot, fontUrl) {
+	applyLinkedStylesheet(shadowRoot, TENANT_LINK_ID, fontUrl);
 }
 /**
-* Returns a sanitiser bound to the current manifest registry. Callers should
-* cache the result; rebuilding is cheap but allocates a fresh DOMPurify config.
+* Inject the design-system default font stylesheet. Defaults to
+* {@link DEFAULT_BRAND_FONT_HREF}; pass `null` to withdraw this surface's
+* registration (the orchestrator does this when a tenant `font_url` takes
+* over, to avoid a redundant request).
 */
-function createSanitiser() {
-	const config = {
-		USE_PROFILES: { html: true },
-		ADD_TAGS: buildAllowedTagList(),
-		ADD_ATTR: buildAllowedAttrList(),
-		FORBID_TAGS: [
-			"script",
-			"style",
-			"iframe",
-			"object",
-			"embed",
-			"form",
-			"input",
-			"button"
-		],
-		FORBID_ATTR: [
-			"onerror",
-			"onclick",
-			"onload",
-			"onfocus",
-			"onblur"
-		],
-		CUSTOM_ELEMENT_HANDLING: {
-			tagNameCheck: CUSTOM_TAG_PATTERN,
-			attributeNameCheck: /^(?:[a-z][a-z0-9-]*)$/,
-			allowCustomizedBuiltInElements: false
-		},
-		KEEP_CONTENT: true,
-		ALLOW_DATA_ATTR: true,
-		ALLOW_ARIA_ATTR: true,
-		RETURN_TRUSTED_TYPE: false
-	};
-	return function sanitise(html) {
-		const result = DOMPurify.sanitize(html, config);
-		return typeof result === "string" ? result : String(result);
-	};
+function applyDefaultFont(shadowRoot, href = DEFAULT_BRAND_FONT_HREF) {
+	applyLinkedStylesheet(shadowRoot, DEFAULT_LINK_ID, href);
+}
+function applyLinkedStylesheet(shadowRoot, linkId, href) {
+	const ownerDocument = shadowRoot.ownerDocument ?? document;
+	let registry = registries.get(ownerDocument);
+	if (!registry) {
+		registry = /* @__PURE__ */ new Map();
+		registries.set(ownerDocument, registry);
+	}
+	let desires = registry.get(linkId);
+	if (!desires) {
+		desires = /* @__PURE__ */ new Map();
+		registry.set(linkId, desires);
+	}
+	for (const owner of desires.keys()) if (!owner.host.isConnected) desires.delete(owner);
+	if (href) {
+		desires.delete(shadowRoot);
+		desires.set(shadowRoot, href);
+	} else desires.delete(shadowRoot);
+	const effective = [...desires.values()].at(-1) ?? null;
+	const existing = ownerDocument.head.querySelector(`link#${linkId}`);
+	if (!effective) {
+		existing?.remove();
+		return;
+	}
+	if (!href) {
+		if (existing && existing.href !== effective) existing.href = effective;
+		return;
+	}
+	const link = existing ?? ownerDocument.createElement("link");
+	link.id = linkId;
+	link.rel = "stylesheet";
+	if (link.href !== effective) link.href = effective;
+	if (!existing) ownerDocument.head.appendChild(link);
 }
-//#endregion
-//#region src/orchestrator/templates/layout-chrome.css?inline
-var layout_chrome_default = ":host {\n  background: var(--zl-color-surface-default-black, #0f0f11);\n  min-height: 100%;\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n  display: block;\n}\n\n.zl-mount {\n  background: inherit;\n  min-height: 100vh;\n  color: inherit;\n  flex-direction: column;\n  display: flex;\n}\n\n.zl-mount > zl-page-shell, .zl-mount > [data-zl-template-root] {\n  flex: auto;\n}\n\n.zl-attribution {\n  background: none;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n}\n\n.zl-attribution[hidden] {\n  display: none;\n}\n\n.zl-card-title {\n  font-family: var(--zl-font-family-heading, var(--zl-font-family-sans, system-ui, sans-serif));\n  letter-spacing: -.02em;\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  text-align: left;\n  margin: 0;\n  font-size: 2rem;\n  font-weight: 700;\n  line-height: 2.5rem;\n}\n\n.zl-card-subtitle {\n  font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  margin: 0;\n  font-size: .875rem;\n  font-weight: 400;\n  line-height: 1.25rem;\n}\n\n.zl-card-nav {\n  font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  text-align: left;\n  margin: 0;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.5rem;\n}\n\n.zl-card-nav__link {\n  font: inherit;\n  line-height: inherit;\n  color: var(--zl-color-icon-default-purple, #bba5e4);\n  cursor: pointer;\n  background: none;\n  border: none;\n  margin: 0;\n  padding: 0;\n  text-decoration: none;\n  display: inline;\n}\n\n.zl-card-nav__link:hover {\n  text-decoration: underline;\n}\n\n.zl-card-nav__link:focus-visible {\n  outline: var(--zl-focus-width, 2px) solid var(--zl-focus-color, #f4f4f6);\n  outline-offset: var(--zl-focus-offset, 2px);\n}\n\n.zl-card-forgot {\n  text-align: left;\n  margin: 0;\n}\n\n.zl-card-forgot__link {\n  font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n  color: var(--zl-color-icon-default-purple, #bba5e4);\n  cursor: pointer;\n  background: none;\n  border: none;\n  margin: 0;\n  padding: 0;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.5rem;\n  text-decoration: none;\n  display: inline;\n}\n\n.zl-card-forgot__link:hover {\n  text-decoration: underline;\n}\n\n.zl-card-forgot__link:focus-visible {\n  outline: var(--zl-focus-width, 2px) solid var(--zl-focus-color, #f4f4f6);\n  outline-offset: var(--zl-focus-offset, 2px);\n}\n";
 //#endregion
 //#region src/orchestrator/theme-controller.ts
 const DARK_QUERY = "(prefers-color-scheme: dark)";
 var ThemeController = class {
 	host;
 	branding;
+	/** Element-level `theme` property — the embedding developer's explicit call. */
+	explicitMode;
+	/** Used when neither the element nor the branding payload names a mode. */
+	fallbackMode = "dark";
 	mediaQuery = null;
 	_theme = "dark";
 	constructor(host) {
@@ -2676,6 +2892,19 @@ var ThemeController = class {
 		this.branding = branding;
 		this.refresh();
 	}
+	/**
+	* Sets the element-level preference and the fallback used when neither the
+	* element nor the branding payload names a mode. Precedence, strongest
+	* first: element `theme` property → `branding.theme.mode` → fallback. The
+	* element wins because the page embedding the widget knows its own surface
+	* better than the tenant's stored branding does.
+	*/
+	setModePreference(explicit, fallback) {
+		if (this.explicitMode === explicit && this.fallbackMode === fallback) return;
+		this.explicitMode = explicit;
+		this.fallbackMode = fallback;
+		this.refresh();
+	}
 	hostConnected() {
 		this.refresh();
 	}
@@ -2683,7 +2912,7 @@ var ThemeController = class {
 		this.detach();
 	}
 	refresh() {
-		const mode = this.branding?.theme?.mode ?? "dark";
+		const mode = this.explicitMode ?? this.branding?.theme?.mode ?? this.fallbackMode;
 		if (mode === "auto") {
 			this.attach();
 			this.update(this.mediaQuery?.matches === false ? "light" : "dark");
@@ -2712,8 +2941,72 @@ var ThemeController = class {
 	}
 };
 //#endregion
+//#region src/orchestrator/surface.ts
+/**
+* Shared base for the orchestrator host elements (`<zitadel-login>`,
+* `<zitadel-session>`) that render a themable page/widget surface.
+*
+* Owns the `variant` / `theme` public properties, the {@link ThemeController},
+* and the per-update surface application (base tokens, branding overrides,
+* font links, and the `data-theme` host stamp). Subclasses call
+* {@link applySurfaceTheme} from their `willUpdate` so the resolved theme is
+* committed in the same update cycle that reads it.
+*
+* Not a registered custom element — purely an implementation-sharing base.
+*/
+var ZitadelSurface = class extends LitElement {
+	#_variant_accessor_storage = "widget";
+	get variant() {
+		return this.#_variant_accessor_storage;
+	}
+	set variant(value) {
+		this.#_variant_accessor_storage = value;
+	}
+	#_theme_accessor_storage = "";
+	get theme() {
+		return this.#_theme_accessor_storage;
+	}
+	set theme(value) {
+		this.#_theme_accessor_storage = value;
+	}
+	themeController = new ThemeController(this);
+	/**
+	* Resolve the active theme and commit it to this element's surface: adopt
+	* the base token sheet, layer the branding overrides, manage the
+	* document-level font links, and stamp `data-theme` / `data-theme-dark` on
+	* the host so token lookups (and host-page selectors) flip with the mode.
+	* `branding` is `undefined` for surfaces without a tenant payload — the
+	* theme then resolves through the element preference and variant fallback.
+	*/
+	applySurfaceTheme(branding) {
+		this.themeController.setModePreference(this.theme === "" ? void 0 : this.theme, this.variant === "page" ? "dark" : "auto");
+		const root = this.shadowRoot;
+		if (root) {
+			applyBaseTokens(root);
+			applyBrandingTokens(root, branding, this.themeController.theme);
+			const tenantFontUrl = branding?.font_url ?? null;
+			applyDefaultFont(root, this.variant === "page" && !tenantFontUrl ? void 0 : null);
+			applyFontUrl(root, tenantFontUrl);
+		}
+		this.dataset.theme = this.themeController.theme;
+		this.toggleAttribute("data-theme-dark", this.themeController.theme === "dark");
+	}
+};
+__decorate([property({
+	type: String,
+	reflect: true
+})], ZitadelSurface.prototype, "variant", null);
+__decorate([property({ type: String })], ZitadelSurface.prototype, "theme", null);
+//#endregion
+//#region src/orchestrator/templates/layout-chrome.css?inline
+var layout_chrome_default = ":host {\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n  background: none;\n  display: block;\n}\n\n:host([variant=\"page\"]) {\n  background: var(--zl-color-surface-default-black, #0f0f11);\n  min-height: 100%;\n}\n\n.zl-mount {\n  min-height: var(--zl-page-min-height, auto);\n  background: inherit;\n  color: inherit;\n  flex-direction: column;\n  display: flex;\n  container-type: inline-size;\n}\n\n:host([variant=\"page\"]) .zl-mount {\n  min-height: var(--zl-page-min-height, 100vh);\n}\n\n.zl-mount > zl-page-shell, .zl-mount > [data-zl-template-root] {\n  flex: auto;\n}\n\n.zl-attribution {\n  background: none;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n}\n\n.zl-attribution[hidden] {\n  display: none;\n}\n\n.zl-card-title {\n  font-family: var(--zl-font-family-heading, var(--zl-font-family-sans, system-ui, sans-serif));\n  letter-spacing: -.02em;\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  text-align: left;\n  margin: 0;\n  font-size: 2rem;\n  font-weight: 700;\n  line-height: 2.5rem;\n}\n\n.zl-card-subtitle {\n  font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  margin: 0;\n  font-size: .875rem;\n  font-weight: 400;\n  line-height: 1.25rem;\n}\n\n.zl-card-nav {\n  font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  text-align: left;\n  margin: 0;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.5rem;\n}\n\n.zl-card-nav__link {\n  font: inherit;\n  line-height: inherit;\n  color: var(--zl-color-icon-default-purple, #bba5e4);\n  cursor: pointer;\n  background: none;\n  border: none;\n  margin: 0;\n  padding: 0;\n  text-decoration: none;\n  display: inline;\n}\n\n.zl-card-nav__link:hover {\n  text-decoration: underline;\n}\n\n.zl-card-nav__link:focus-visible {\n  outline: var(--zl-focus-width, 2px) solid var(--zl-focus-color, #f4f4f6);\n  outline-offset: var(--zl-focus-offset, 2px);\n}\n\n.zl-card-forgot {\n  text-align: left;\n  margin: 0;\n}\n\n.zl-card-forgot__link {\n  font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n  color: var(--zl-color-icon-default-purple, #bba5e4);\n  cursor: pointer;\n  background: none;\n  border: none;\n  margin: 0;\n  padding: 0;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.5rem;\n  text-decoration: none;\n  display: inline;\n}\n\n.zl-card-forgot__link:hover {\n  text-decoration: underline;\n}\n\n.zl-card-forgot__link:focus-visible {\n  outline: var(--zl-focus-width, 2px) solid var(--zl-focus-color, #f4f4f6);\n  outline-offset: var(--zl-focus-offset, 2px);\n}\n\n.zl-split {\n  grid-template-columns: var(--zl-split-columns, minmax(0, 1fr) minmax(0, 1fr));\n  align-items: var(--zl-split-align, center);\n  gap: var(--zl-spacing-05, 2rem);\n  min-height: 100%;\n  display: grid;\n}\n\n.zl-split__brand {\n  justify-content: center;\n  align-items: center;\n  gap: var(--zl-spacing-04, 1.5rem);\n  flex-direction: column;\n  padding: 52px 16px;\n  display: flex;\n}\n\n.zl-split__logo {\n  max-width: min(16rem, 60%);\n}\n\n.zl-split__hero {\n  border-radius: var(--zl-radius-m, .75rem);\n  object-fit: cover;\n  max-width: 100%;\n}\n\n.zl-split__form {\n  justify-content: center;\n  align-items: center;\n  padding: 16px;\n  display: flex;\n}\n\n.zl-split__compact {\n  max-width: min(12rem, 60%);\n  display: none;\n}\n\nimg.zl-split__compact {\n  max-height: 2.5rem;\n}\n\nimg.zl-split__compact--hero {\n  border-radius: var(--zl-radius-m, .75rem);\n  object-fit: cover;\n  width: 100%;\n  max-width: 100%;\n  max-height: 6rem;\n}\n\n.zl-split--right .zl-split__brand {\n  order: 2;\n}\n\n.zl-split--right .zl-split__form {\n  order: 1;\n}\n\n@container (width <= 48rem) {\n  .zl-split {\n    grid-template-columns: minmax(0, 1fr);\n  }\n\n  .zl-split__brand {\n    display: var(--zl-split-brand-mobile, none);\n  }\n\n  .zl-split__form {\n    gap: var(--zl-spacing-04, 1.5rem);\n    flex-direction: column;\n  }\n\n  .zl-split__compact {\n    display: block;\n  }\n}\n\n.zl-hero {\n  text-align: left;\n  width: 100%;\n  max-width: 34rem;\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n  flex-direction: column;\n  display: flex;\n}\n\n.zl-hero__nav {\n  margin-bottom: var(--zl-spacing-05, 2rem);\n  justify-content: space-between;\n  align-items: center;\n  display: flex;\n}\n\n.zl-hero__brand {\n  align-items: center;\n  gap: var(--zl-spacing-02, .5rem);\n  letter-spacing: -.01em;\n  font-size: 1.125rem;\n  font-weight: 700;\n  display: inline-flex;\n}\n\n.zl-hero__brand-logo {\n  max-height: 1.75rem;\n}\n\n.zl-hero__brand-mark {\n  border-radius: var(--zl-radius-s, .5rem);\n  background: linear-gradient(135deg,\n    var(--zl-color-icon-default-purple, #bba5e4),\n    var(--zl-color-icon-default-pink, #f48aa0));\n  width: 1.75rem;\n  height: 1.75rem;\n  display: inline-flex;\n}\n\n.zl-hero__compact-brand {\n  overflow-wrap: anywhere;\n  letter-spacing: -.01em;\n  max-width: 100%;\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  margin: 0;\n  font-size: 1.125rem;\n  font-weight: 700;\n}\n\n.zl-hero__nav-links {\n  gap: var(--zl-spacing-04, 1.5rem);\n  color: var(--zl-color-text-secondary-gray, #bfbfcf);\n  font-size: .9375rem;\n  display: flex;\n}\n\n.zl-hero__nav-links a {\n  color: inherit;\n  text-decoration: none;\n}\n\n.zl-hero__nav-links a:hover {\n  text-decoration: underline;\n}\n\n.zl-hero__eyebrow {\n  margin: 0 0 var(--zl-spacing-03, 1rem);\n  letter-spacing: .08em;\n  text-transform: uppercase;\n  color: var(--zl-color-text-subtitle-purple, #bba5e4);\n  font-size: .8125rem;\n  font-weight: 600;\n}\n\n.zl-hero__headline {\n  margin: 0 0 var(--zl-spacing-03, 1rem);\n  font-family: var(--zl-font-family-heading, var(--zl-font-family-sans, system-ui, sans-serif));\n  letter-spacing: -.02em;\n  font-size: 2.75rem;\n  font-weight: 700;\n  line-height: 1.1;\n}\n\n.zl-hero__sub {\n  margin: 0 0 var(--zl-spacing-05, 2rem);\n  max-width: 30rem;\n  color: var(--zl-color-text-secondary-gray, #bfbfcf);\n  font-size: 1.0625rem;\n  line-height: 1.6;\n}\n\n.zl-hero__bullets {\n  gap: var(--zl-spacing-02, .5rem);\n  margin: 0 0 var(--zl-spacing-05, 2rem);\n  flex-direction: column;\n  padding: 0;\n  list-style: none;\n  display: flex;\n}\n\n.zl-hero__bullets li {\n  align-items: center;\n  gap: var(--zl-spacing-02, .5rem);\n  font-size: 1rem;\n  display: flex;\n}\n\n.zl-hero__bullets li:before {\n  content: \"✓\";\n  color: var(--zl-color-icon-default-purple, #bba5e4);\n  font-weight: 700;\n}\n\n.zl-hero__footnote {\n  padding-top: var(--zl-spacing-04, 1.5rem);\n  border-top: 1px solid var(--zl-color-border-default-black, #252528);\n  color: var(--zl-color-text-disabled, #686883);\n  margin: 0;\n  font-size: .8125rem;\n}\n\n.zl-hero__footnote strong {\n  color: var(--zl-color-text-secondary-gray, #bfbfcf);\n  font-weight: 600;\n}\n\n.zl-minimal {\n  gap: var(--zl-spacing-04, 1.5rem);\n  flex-direction: column;\n  width: min(24rem, 100%);\n  margin-inline: auto;\n  display: flex;\n}\n\n:host([variant=\"page\"]) .zl-minimal {\n  padding: 52px 16px;\n}\n";
+//#endregion
 //#region src/orchestrator/zitadel-login.ts
-let ZitadelLogin = class ZitadelLogin extends LitElement {
+/** Narrow a rendered named element to the `formValue` field-atom contract. */
+function isFieldAtom(el) {
+	return typeof el.formValue === "string";
+}
+let ZitadelLogin = class ZitadelLogin extends ZitadelSurface {
 	static shadowRootOptions = {
 		...LitElement.shadowRootOptions,
 		delegatesFocus: true
@@ -2722,7 +3015,6 @@ let ZitadelLogin = class ZitadelLogin extends LitElement {
     :host {
       display: block;
       width: 100%;
-      min-height: 100vh;
     }
   `;
 	#_purpose_accessor_storage = "login";
@@ -2830,7 +3122,6 @@ let ZitadelLogin = class ZitadelLogin extends LitElement {
 	set formValues(value) {
 		this.#_formValues_accessor_storage = value;
 	}
-	themeController = new ThemeController(this);
 	engine = null;
 	sanitise = createSanitiser();
 	/**
@@ -2838,6 +3129,25 @@ let ZitadelLogin = class ZitadelLogin extends LitElement {
 	* every `formValues` change otherwise re-parses the same template.
 	*/
 	tenantTemplateCache = null;
+	/**
+	* Whether the widget currently owns a same-document history entry (the
+	* "sentinel"). The sentinel exists so the browser's back gesture fires
+	* `popstate` instead of leaving the page. Exactly one sentinel is on
+	* the stack at a time: it is pushed when a step with a `kind: "back"`
+	* action renders, re-armed by `onPopState` after the browser consumes
+	* it, and retired by `applyResponse` when a step without a back action
+	* renders. The entry reuses the current URL, so the host page's
+	* location (including any hash-router fragment) is never modified.
+	*/
+	armed = false;
+	/**
+	* Set immediately before a self-initiated `history.back()` so the
+	* resulting `popstate` is ignored instead of being interpreted as a
+	* user back gesture.
+	*/
+	ignoreNextPop = false;
+	/** Bound `popstate` handler stored for cleanup in `disconnectedCallback`. */
+	handlePopState = this.onPopState.bind(this);
 	createRenderRoot() {
 		const root = super.createRenderRoot();
 		if (root instanceof ShadowRoot) {
@@ -2856,6 +3166,14 @@ let ZitadelLogin = class ZitadelLogin extends LitElement {
 		}
 		return root;
 	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (typeof window !== "undefined") window.addEventListener("popstate", this.handlePopState);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if (typeof window !== "undefined") window.removeEventListener("popstate", this.handlePopState);
+	}
 	/**
 	* Start the flow after the first render rather than in `connectedCallback`.
 	* Frameworks that wrap web components (e.g. `@lit/react` in the console)
@@ -2882,28 +3200,25 @@ let ZitadelLogin = class ZitadelLogin extends LitElement {
 		const primary = ((this.lang || (typeof navigator !== "undefined" ? navigator.language : "") || (typeof document !== "undefined" ? document.documentElement.lang : "")).split("-")[0] ?? "").toLowerCase();
 		const builtin = builtinLocales[primary] ?? en;
 		const custom = this.locales?.[primary];
-		return custom ? {
-			...builtin,
-			...custom
-		} : builtin;
+		if (!custom) return builtin;
+		const merged = { ...builtin };
+		for (const [key, value] of Object.entries(custom)) if (value !== void 0) merged[key] = value;
+		return merged;
 	}
 	willUpdate(changed) {
 		if (!this.engine || changed.has("locales") || changed.has("lang")) this.engine = createLiquidEngine({ locale: this.resolveLocale() });
-		const root = this.shadowRoot;
-		if (root) {
-			applyBaseTokens(root);
-			applyBrandingTokens(root, this.branding, this.themeController.theme);
-			const tenantFontUrl = this.branding?.font_url ?? null;
-			applyDefaultFont(root, tenantFontUrl ? null : void 0);
-			applyFontUrl(root, tenantFontUrl);
-		}
-		this.dataset.theme = this.themeController.theme;
-		this.toggleAttribute("data-theme-dark", this.themeController.theme === "dark");
+		this.applySurfaceTheme(this.branding);
 		this.setAttribute("aria-busy", this.loading ? "true" : "false");
 	}
 	updated(changed) {
-		if (!changed.has("response")) return;
-		this.hydrateStepAfterRender();
+		if (this.shadowRoot) {
+			stampExportparts(this.shadowRoot);
+			const widget = this.variant !== "page";
+			for (const shell of this.shadowRoot.querySelectorAll("zl-page-shell")) shell.toggleAttribute("data-widget", widget);
+		}
+		const props = changed;
+		if (!props.has("response")) return;
+		this.hydrateStepAfterRender(props.get("response") == null);
 	}
 	/**
 	* Apply captured values and move focus once the new step has fully
@@ -2911,13 +3226,18 @@ let ZitadelLogin = class ZitadelLogin extends LitElement {
 	* but those render their own shadow DOM on a later microtask — so await
 	* this element's update *and* the child atoms' first render before touching
 	* them, rather than guessing a frame with `requestAnimationFrame`.
+	*
+	* Focus on the *initial* response is page-mode-only: a dedicated login
+	* route should focus its first field, but a widget embedded further down
+	* an arbitrary page must not steal focus and scroll-jump on load. Step
+	* swaps are user-initiated, so focus moves in both modes.
 	*/
-	async hydrateStepAfterRender() {
+	async hydrateStepAfterRender(initial = false) {
 		await this.updateComplete;
 		const atoms = this.shadowRoot?.querySelectorAll("zl-field, zl-button");
 		if (atoms) await Promise.all(Array.from(atoms).map((atom) => atom.updateComplete));
 		this.applyValuesToFields();
-		this.moveFocusToFirstField();
+		if (!initial || this.variant === "page") this.moveFocusToFirstField();
 	}
 	render() {
 		if (this.startupError) return html`<form class="zl-mount" novalidate>
@@ -2991,6 +3311,7 @@ let ZitadelLogin = class ZitadelLogin extends LitElement {
 				});
 			}
 			this.applyResponse(wire);
+			emit(this, "zitadel-flow-step", { step: wire.step });
 		} catch (error) {
 			this.handleTransportError(this.describeFlowSelectionError(error));
 		} finally {
@@ -3021,6 +3342,22 @@ let ZitadelLogin = class ZitadelLogin extends LitElement {
 			...collectInitialValues(wire.step),
 			...this.formValues
 		};
+		if (typeof window !== "undefined") {
+			const hasBack = Boolean(wire.step.actions?.some((a) => a.kind === "back"));
+			if (hasBack && !this.armed) {
+				history.pushState({
+					...history.state,
+					zl: true
+				}, "");
+				this.armed = true;
+			} else if (!hasBack && this.armed) {
+				this.armed = false;
+				if (history.state?.zl === true) {
+					this.ignoreNextPop = true;
+					history.back();
+				}
+			}
+		}
 		this.maybeCompleteFlow(wire);
 	}
 	/**
@@ -3127,42 +3464,89 @@ let ZitadelLogin = class ZitadelLogin extends LitElement {
 			...display ? { display_name: display } : email ? { display_name: email } : {}
 		};
 	}
-	applyValuesToFields() {
+	/** All rendered input atoms exposing the `formValue` contract. */
+	fieldAtoms() {
 		const root = this.shadowRoot;
-		if (!root) return;
-		const fields = root.querySelectorAll("zl-field");
-		if (fields.length === 0) return;
-		for (const field of fields) {
-			const name = field.getAttribute("name");
-			if (!name || !(name in this.formValues)) continue;
+		if (!root) return [];
+		return Array.from(root.querySelectorAll("[name]")).filter(isFieldAtom);
+	}
+	applyValuesToFields() {
+		for (const atom of this.fieldAtoms()) {
+			const name = atom.getAttribute("name");
+			if (!name) continue;
 			const next = this.formValues[name];
-			if (field.value !== next) field.value = next;
+			if (next !== void 0 && atom.formValue !== next) atom.formValue = next;
 		}
 	}
-	captureValuesFromFields() {
-		const root = this.shadowRoot;
-		if (!root) return this.formValues;
-		const fields = root.querySelectorAll("zl-field");
-		if (fields.length === 0) return this.formValues;
-		const next = { ...this.formValues };
-		let changed = false;
-		for (const field of fields) {
-			const name = field.getAttribute("name");
-			const value = this.currentFieldValue(field);
-			if (!name || value === void 0) continue;
-			if (field.value !== value) field.value = value;
-			if (next[name] !== value) {
-				next[name] = value;
-				changed = true;
-			}
+	/**
+	* Names of the current step's `required` fields whose captured value is
+	* empty. Reads each atom's live `formValue` (the getter reflects the native
+	* control, so autofill that skipped `input` events is still seen), so this
+	* is browser-independent and does not rely on native constraint validation.
+	*/
+	missingRequiredFields() {
+		const values = /* @__PURE__ */ new Map();
+		for (const atom of this.fieldAtoms()) {
+			const name = atom.getAttribute("name");
+			if (name) values.set(name, atom.formValue);
 		}
-		if (changed) this.formValues = next;
-		return next;
+		const missing = [];
+		for (const field of this.response?.step.fields ?? []) {
+			if (field.type === "checkbox") continue;
+			if (field.required && (values.get(field.name) ?? "") === "") missing.push(field.name);
+		}
+		return missing;
+	}
+	/**
+	* Surface a client-side required-field error using the server's own
+	* validation dialect (`error.<field>_required`, "; "-joined), so it flows
+	* through the same localisation and inline/banner routing as a real
+	* backend rejection — no native browser bubble. Idempotent: re-running with
+	* the same keys (both submit entry points fire on one click) is a no-op.
+	*/
+	reportRequiredErrors(fields) {
+		if (!this.response) return;
+		const errorKey = fields.map((name) => `error.${name}_required`).join("; ");
+		if (this.response.step.error === errorKey) return;
+		this.stepErrorDismissed = false;
+		this.response = {
+			...this.response,
+			step: {
+				...this.response.step,
+				error: errorKey
+			}
+		};
 	}
-	currentFieldValue(field) {
-		const native = field.shadowRoot?.querySelector("input");
-		if (native && native.value !== field.value) return native.value;
-		return typeof field.value === "string" ? field.value : void 0;
+	/**
+	* Snapshot the current step's field values straight from the rendered input
+	* atoms through their uniform `formValue` contract. Tag-agnostic: every
+	* form-participating atom is read the same way, so a new field type needs no
+	* change here. Declared fields default to "" so the backend still runs its
+	* required-checks and challenge dispatch instead of silently advancing on a
+	* field-less payload. Captured values are folded into `formValues` for
+	* cross-step identity (the signed-in greeting) and post-error restoration.
+	*/
+	collectSubmitFields() {
+		const current = /* @__PURE__ */ new Map();
+		for (const atom of this.fieldAtoms()) {
+			const name = atom.getAttribute("name");
+			if (name) current.set(name, atom.formValue);
+		}
+		if (current.size > 0) this.formValues = {
+			...this.formValues,
+			...Object.fromEntries(current)
+		};
+		const fields = {};
+		for (const f of this.response?.step.fields ?? []) {
+			const value = current.get(f.name) ?? "";
+			if (f.type === "checkbox") {
+				fields[f.name] = value !== "";
+				continue;
+			}
+			if (f.type === "select" && !isAllowedSelectValue(f, value)) continue;
+			fields[f.name] = value;
+		}
+		return fields;
 	}
 	/**
 	* True once the user retired the current step error by editing a field or
@@ -3190,10 +3574,25 @@ let ZitadelLogin = class ZitadelLogin extends LitElement {
 			value
 		});
 	};
-	/** `zl-change` from <zl-checkbox>/<zl-select>: only error clearing. */
+	/**
+	* `zl-change` from <zl-checkbox>/<zl-select>. Persist the atom's value into
+	* `formValues` — mirroring `handleAtomInput` for text fields — so a later
+	* step re-render (a validation error re-parses the template via `unsafeHTML`
+	* and rebuilds the atoms) restores the selection/checked state through
+	* `applyValuesToFields` instead of dropping back to the template default.
+	* Reads the live `formValue` off the atom rather than the event's `value`
+	* token, because an unchecked checkbox reports "" there but keeps its token
+	* in the detail. Also clears stale errors on the edited field.
+	*/
 	handleAtomEdited = (event) => {
 		const name = event.detail?.name;
-		if (name) this.clearStaleErrors(name);
+		if (!name) return;
+		const atom = event.target;
+		if (atom instanceof HTMLElement && isFieldAtom(atom)) this.formValues = {
+			...this.formValues,
+			[name]: atom.formValue
+		};
+		this.clearStaleErrors(name);
 	};
 	/** Explicit dismiss of the step-error alert (it removes itself). */
 	handleAlertDismiss = (event) => {
@@ -3219,16 +3618,9 @@ let ZitadelLogin = class ZitadelLogin extends LitElement {
 			field.error = "";
 		}
 	}
+	/** Mirror a value onto the matching rendered atom (used after atom events). */
 	syncFieldElementValue(name, value) {
-		const root = this.shadowRoot;
-		if (!root) return;
-		const fields = root.querySelectorAll("zl-field");
-		for (const field of fields) {
-			if (field.getAttribute("name") !== name) continue;
-			if (field.value !== value) field.value = value;
-			const native = field.shadowRoot?.querySelector("input");
-			if (native && native.value !== value) native.value = value;
-		}
+		for (const atom of this.fieldAtoms()) if (atom.getAttribute("name") === name && atom.formValue !== value) atom.formValue = value;
 	}
 	handleAtomSubmit = (event) => {
 		if (this.loading) return;
@@ -3246,6 +3638,11 @@ let ZitadelLogin = class ZitadelLogin extends LitElement {
 	handleFormSubmit = (event) => {
 		event.preventDefault();
 		if (this.loading) return;
+		const missing = this.missingRequiredFields();
+		if (missing.length > 0) {
+			this.reportRequiredErrors(missing);
+			return;
+		}
 		const action = event.submitter?.getAttribute?.("action") ?? null ?? this.findPrimaryAction();
 		this.submit(action);
 	};
@@ -3308,13 +3705,7 @@ let ZitadelLogin = class ZitadelLogin extends LitElement {
 		const { id, session_token } = this.response;
 		this.loading = true;
 		try {
-			const formValues = this.captureValuesFromFields();
-			const stepFields = this.response.step.fields ?? [];
-			const fields = {};
-			for (const f of stepFields) {
-				const value = formValues[f.name];
-				if (value !== void 0) fields[f.name] = value;
-			}
+			const fields = this.collectSubmitFields();
 			const body = {
 				session_token,
 				action: action ?? "submit",
@@ -3331,6 +3722,47 @@ let ZitadelLogin = class ZitadelLogin extends LitElement {
 			this.loading = false;
 		}
 	}
+	/**
+	* Handle the browser's back/forward gesture (ADR 022). When `popstate`
+	* fires:
+	*
+	* - **Self-initiated** (`ignoreNextPop`) → `applyResponse` is retiring
+	*   the sentinel; ignore.
+	* - **Back press while armed** → the browser consumed the sentinel.
+	*   Re-arm it immediately — so the stack shape is identical on every
+	*   step and repeated presses behave the same at any flow depth — then
+	*   submit the step's `kind: "back"` action.
+	* - **Landing on the sentinel while armed** → the host page pushed an
+	*   entry above the sentinel (e.g. an in-page `#anchor` click) and the
+	*   user backed out of it. They are back where the widget expects them
+	*   — not asking the flow to go back; do nothing.
+	* - **Forward press onto a retired sentinel** (it survives as a forward
+	*   entry after `history.back()`) → bounce back: flow state is
+	*   server-authoritative, the browser cannot skip ahead
+	*   (ADR 022 §Edge cases).
+	* - Anything else is host-page traversal — leave the browser alone.
+	*/
+	onPopState(event) {
+		if (this.ignoreNextPop) {
+			this.ignoreNextPop = false;
+			return;
+		}
+		if (this.armed) {
+			if (event.state?.zl === true) return;
+			this.armed = false;
+			const backAction = this.response?.step?.actions?.find((a) => a.kind === "back");
+			if (backAction) {
+				history.pushState({ zl: true }, "");
+				this.armed = true;
+				this.submit(backAction.name);
+			}
+			return;
+		}
+		if (event.state?.zl === true) {
+			this.ignoreNextPop = true;
+			history.back();
+		}
+	}
 	handleTransportError(error) {
 		const message = error instanceof ApiError ? apiErrorMessage(error) : error instanceof Error ? error.message : "Unexpected error contacting the Flow API.";
 		this.startupError = message;
@@ -3369,6 +3801,16 @@ __decorate([state()], ZitadelLogin.prototype, "loading", null);
 __decorate([state()], ZitadelLogin.prototype, "startupError", null);
 __decorate([state()], ZitadelLogin.prototype, "formValues", null);
 ZitadelLogin = __decorate([customElement("zitadel-login")], ZitadelLogin);
+/**
+* Whether `value` is a member of a select field's closed `enum`. A select
+* with no explicit enum has no submittable value, so this returns `false`
+* and the caller omits the field. Because the enum never contains "" unless
+* the schema deliberately lists it, an untouched placeholder ("") is omitted
+* rather than sent and rejected by the server's enum validation.
+*/
+function isAllowedSelectValue(field, value) {
+	return field.validation?.enum?.includes(value) ?? false;
+}
 function collectInitialValues(step) {
 	const values = {};
 	if (!step.fields) return values;
@@ -3550,12 +3992,12 @@ let ZitadelLogout = class ZitadelLogout extends LitElement {
 	set postSignOutUrl(value) {
 		this.#_postSignOutUrl_accessor_storage = value;
 	}
-	#_clientId_accessor_storage = "";
-	get clientId() {
-		return this.#_clientId_accessor_storage;
+	#_theme_accessor_storage = "";
+	get theme() {
+		return this.#_theme_accessor_storage;
 	}
-	set clientId(value) {
-		this.#_clientId_accessor_storage = value;
+	set theme(value) {
+		this.#_theme_accessor_storage = value;
 	}
 	#_displayName_accessor_storage = "";
 	get displayName() {
@@ -3603,9 +4045,9 @@ let ZitadelLogout = class ZitadelLogout extends LitElement {
 	pendingTemplate = null;
 	projectedContainer = null;
 	identityRequested = false;
+	themeController = new ThemeController(this);
 	connectedCallback() {
 		super.connectedCallback();
-		this.dataset.theme = "dark";
 		const tmpl = this.querySelector("template");
 		if (tmpl instanceof HTMLTemplateElement) {
 			this.templateMode = true;
@@ -3621,9 +4063,17 @@ let ZitadelLogout = class ZitadelLogout extends LitElement {
 		document.removeEventListener("click", this.handleDocumentClick);
 		document.removeEventListener("keydown", this.handleDocumentKeydown);
 	}
-	updated() {
+	willUpdate() {
+		this.themeController.setModePreference(this.theme === "" ? void 0 : this.theme, "auto");
 		const root = this.shadowRoot;
-		if (root && !this.templateMode) applyBaseTokens(root);
+		if (root && !this.templateMode) {
+			applyBaseTokens(root);
+			applyBrandingTokens(root, void 0, this.themeController.theme);
+		}
+		this.dataset.theme = this.themeController.theme;
+		this.toggleAttribute("data-theme-dark", this.themeController.theme === "dark");
+	}
+	updated() {
 		this.maybeLoadIdentity();
 	}
 	/** Declarative config read from this element's attributes. */
@@ -3734,20 +4184,6 @@ let ZitadelLogout = class ZitadelLogout extends LitElement {
 		});
 		if (this.postSignOutUrl && typeof window !== "undefined") window.location.href = this.postSignOutUrl;
 	}
-	/**
-	* Returns the absolute URL the end-session request will hit. Useful for
-	* test assertions and for consumers that prefer to navigate the browser
-	* directly (instead of fetching) so the OIDC session-end redirect is
-	* driven by the user agent.
-	*/
-	getEndSessionUrl() {
-		const params = {
-			...this.clientId ? { client_id: this.clientId } : {},
-			...this.postSignOutUrl ? { post_logout_redirect_uri: this.postSignOutUrl } : {}
-		};
-		const { api } = resolveApi(this.project, this.projectAttrs, "<zitadel-logout>");
-		return api.getEndSessionUrl(params);
-	}
 	handleSignOutClick(event) {
 		event.preventDefault();
 		this.doLogout();
@@ -3826,10 +4262,7 @@ __decorate([property({
 	type: String,
 	attribute: "post-sign-out-url"
 })], ZitadelLogout.prototype, "postSignOutUrl", null);
-__decorate([property({
-	type: String,
-	attribute: "client-id"
-})], ZitadelLogout.prototype, "clientId", null);
+__decorate([property({ type: String })], ZitadelLogout.prototype, "theme", null);
 __decorate([state()], ZitadelLogout.prototype, "displayName", null);
 __decorate([state()], ZitadelLogout.prototype, "displayEmail", null);
 __decorate([state()], ZitadelLogout.prototype, "displayUserId", null);
@@ -3852,13 +4285,11 @@ function fillTemplateTokens(fragment, name, email, initial) {
 }
 //#endregion
 //#region src/orchestrator/zitadel-session.ts
-let ZitadelSession = class ZitadelSession extends LitElement {
+let ZitadelSession = class ZitadelSession extends ZitadelSurface {
 	static styles = [baseHostStyles, css`
       :host {
         display: block;
-        min-height: 100vh;
-        background: ${t.color.surface.defaultBlack};
-        color: ${t.color.text.primaryWhite};
+        width: 100%;
       }
       .title {
         margin: 0;
@@ -3974,16 +4405,16 @@ let ZitadelSession = class ZitadelSession extends LitElement {
 	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;
 	}
+	willUpdate() {
+		this.applySurfaceTheme(void 0);
+	}
 	updated() {
-		const root = this.shadowRoot;
-		if (root) applyBaseTokens(root);
 		this.maybeLoadIdentity();
 	}
 	/** Declarative config read from this element's attributes. */
@@ -4048,7 +4479,7 @@ let ZitadelSession = class ZitadelSession extends LitElement {
 	}
 	render() {
 		return html`
-      <zl-page-shell>
+      <zl-page-shell ?data-widget=${this.variant !== "page"}>
         <zl-card>
           <h1 slot="header" class="title">${this.heading}</h1>
           ${this.identityLabel ? html`<p slot="header" class="identity">${this.identityLabel}</p>` : nothing}
@@ -4095,6 +4526,6 @@ __decorate([state()], ZitadelSession.prototype, "loading", null);
 __decorate([state()], ZitadelSession.prototype, "errorMessage", null);
 ZitadelSession = __decorate([customElement("zitadel-session")], ZitadelSession);
 //#endregion
-export { submitStep as S, applyBrandingTokens as _, layout_chrome_default as a, getCurrentStep as b, it as c, TEMPLATE_NAMES as d, MANDATORY_GATES_MARKER as f, validateBranding as g, applyFontUrl as h, ThemeController as i, de as l, patchMandatoryGates as m, ZitadelLogout as n, createSanitiser as o, mandatoryGatesMarkerComment as p, ZitadelLogin as r, builtinLocales as s, ZitadelSession as t, en as u, buildBrandingStylesheet as v, startFlow as x, resolveTheme as y };
+export { submitStep as C, startFlow as S, MANDATORY_GATES_MARKER as _, ThemeController as a, validateBranding as b, buildBrandingStylesheet as c, builtinLocales as d, businessLocales as f, TEMPLATE_NAMES as g, en as h, layout_chrome_default as i, resolveTheme as l, de as m, ZitadelLogout as n, applyFontUrl as o, it as p, ZitadelLogin as r, applyBrandingTokens as s, ZitadelSession as t, createSanitiser as u, mandatoryGatesMarkerComment as v, getCurrentStep as x, patchMandatoryGates as y };
 
-//# sourceMappingURL=orchestrator-BWqJw4Yl.mjs.map
+//# sourceMappingURL=orchestrator-CctLkpmB.mjs.map