@zitadel/components 1.0.0-alpha.20 → 1.0.0-alpha.22

package/dist/standalone.mjs

@@ -681,7 +681,7 @@ const e$5 = (e, t, c) => (c.configurable = !0, c.enumerable = !0, Reflect.decora
 }
 //#endregion
 //#region src/atoms/zl-alert.css?inline
-var zl_alert_default = ":host {\n  display: block;\n}\n\n.zr-alert {\n  align-items: flex-start;\n  gap: var(--zl-spacing-2);\n  padding-block: var(--zl-spacing-3);\n  padding-inline: var(--zl-spacing-4);\n  background: var(--zl-muted);\n  color: var(--zl-foreground);\n  border: 1px solid var(--zl-border);\n  border-radius: var(--zl-radius-lg);\n  font-family: var(--zl-font-family-sans);\n  font-size: var(--zl-text-sm-size);\n  line-height: var(--zl-text-sm-leading);\n  display: flex;\n}\n\n.zr-alert__icon {\n  color: currentColor;\n  flex-shrink: 0;\n  padding-block-start: var(--zl-spacing-0-5);\n}\n\n.zr-alert__body {\n  gap: var(--zl-spacing-0-5);\n  flex-direction: column;\n  flex: auto;\n  min-width: 0;\n  display: flex;\n}\n\n.zr-alert__title {\n  font-family: var(--zl-font-family-heading);\n  color: var(--zl-foreground);\n}\n\n.zr-alert__message {\n  color: var(--zl-muted-foreground);\n  margin: 0;\n}\n\n.zr-alert:not(:has(.zr-alert__title)) .zr-alert__message {\n  color: var(--zl-foreground);\n}\n\n.zr-alert--error, .zr-alert--error .zr-alert__title {\n  color: var(--zl-destructive);\n}\n\n.zr-alert--success .zr-alert__icon {\n  color: var(--zl-success);\n}\n\n.zr-alert--warning .zr-alert__icon, .zr-alert--info .zr-alert__icon {\n  color: var(--zl-muted-foreground);\n}\n\n.zr-alert__close {\n  all: unset;\n  width: var(--zl-spacing-6);\n  height: var(--zl-spacing-6);\n  border-radius: var(--zl-radius-md);\n  color: var(--zl-muted-foreground);\n  cursor: pointer;\n  transition: background-color var(--zl-duration-fast) var(--zl-easing-standard);\n  flex-shrink: 0;\n  justify-content: center;\n  align-items: center;\n  display: inline-flex;\n}\n\n.zr-alert__close .zr-icon {\n  --zl-icon-size: var(--zl-spacing-4);\n  width: var(--zl-spacing-4);\n  height: var(--zl-spacing-4);\n}\n\n.zr-alert__close:hover {\n  background: var(--zl-accent);\n  color: var(--zl-accent-foreground);\n}\n\n.zr-alert__close:focus-visible {\n  outline: var(--zl-focus-width) solid var(--zl-ring);\n  outline-offset: var(--zl-focus-offset);\n}\n";
+var zl_alert_default = ":host {\n  display: block;\n}\n\n.zr-alert {\n  align-items: flex-start;\n  gap: var(--zl-spacing-2);\n  padding-block: var(--zl-spacing-3);\n  padding-inline: var(--zl-spacing-4);\n  background: var(--zl-muted);\n  color: var(--zl-foreground);\n  border: 1px solid var(--zl-border);\n  border-radius: var(--zl-radius-lg);\n  font-family: var(--zl-font-family-sans);\n  font-size: var(--zl-text-sm-size);\n  line-height: var(--zl-text-sm-leading);\n  display: flex;\n}\n\n.zr-alert__icon {\n  height: var(--zl-text-sm-leading);\n  color: currentColor;\n  flex-shrink: 0;\n  align-items: center;\n  display: inline-flex;\n}\n\n.zr-alert__body {\n  gap: var(--zl-spacing-0-5);\n  flex-direction: column;\n  flex: auto;\n  min-width: 0;\n  display: flex;\n}\n\n.zr-alert__title {\n  font-family: var(--zl-font-family-heading);\n  color: var(--zl-foreground);\n}\n\n.zr-alert__message {\n  color: var(--zl-muted-foreground);\n  margin: 0;\n}\n\n.zr-alert:not(:has(.zr-alert__title)) .zr-alert__message {\n  color: var(--zl-foreground);\n}\n\n.zr-alert--error {\n  color: var(--zl-destructive);\n}\n\n.zr-alert--success .zr-alert__icon {\n  color: var(--zl-success);\n}\n\n.zr-alert--warning .zr-alert__icon, .zr-alert--info .zr-alert__icon {\n  color: var(--zl-muted-foreground);\n}\n\n.zr-alert__close {\n  all: unset;\n  width: var(--zl-spacing-6);\n  height: var(--zl-spacing-6);\n  border-radius: var(--zl-radius-md);\n  color: var(--zl-muted-foreground);\n  cursor: pointer;\n  transition: background-color var(--zl-duration-fast) var(--zl-easing-standard);\n  flex-shrink: 0;\n  justify-content: center;\n  align-items: center;\n  display: inline-flex;\n}\n\n.zr-alert__close zl-icon {\n  flex-shrink: 0;\n  display: inline-flex;\n}\n\n.zr-alert__close:hover {\n  background: var(--zl-accent);\n  color: var(--zl-accent-foreground);\n}\n\n.zr-alert__close:focus-visible {\n  outline: var(--zl-focus-width) solid var(--zl-ring);\n  outline-offset: var(--zl-focus-offset);\n}\n";
 //#endregion
 //#region src/internal/emit.ts
 /**
@@ -9039,7 +9039,7 @@ const en = {
 	"password.action.register.lead": "Don't have an account? ",
 	"password.action.register.link": "Sign up",
 	"register.title": "Create your account",
-	"register.description": "",
+	"register.description": "Enter your details to get started",
 	"register.field.email": "Email",
 	"register.field.email.placeholder": "you@example.com",
 	"register.field.password": "Password",
@@ -9156,7 +9156,7 @@ const de = {
 	"password.action.register.lead": "Noch kein Konto? ",
 	"password.action.register.link": "Registrieren",
 	"register.title": "Konto erstellen",
-	"register.description": "",
+	"register.description": "Gib deine Daten ein, um loszulegen",
 	"register.field.email": "E-Mail",
 	"register.field.email.placeholder": "du@beispiel.de",
 	"register.field.password": "Passwort",
@@ -9272,7 +9272,7 @@ const it = {
 	"password.action.register.lead": "Non hai un account? ",
 	"password.action.register.link": "Registrati",
 	"register.title": "Crea il tuo account",
-	"register.description": "",
+	"register.description": "Inserisci i tuoi dati per iniziare",
 	"register.field.email": "E-mail",
 	"register.field.email.placeholder": "tu@esempio.com",
 	"register.field.password": "Password",
@@ -9426,6 +9426,7 @@ var zitadelNextGen_exports = /* @__PURE__ */ __exportAll({
 	getBeginUserPasskeyRegistrationUrl: () => getBeginUserPasskeyRegistrationUrl,
 	getBrandingById: () => getBrandingById,
 	getClaimStatus: () => getClaimStatus,
+	getClaimWindow: () => getClaimWindow,
 	getCompleteClaimUrl: () => getCompleteClaimUrl,
 	getCreateAuthAttemptUrl: () => getCreateAuthAttemptUrl,
 	getCreateBrandingUrl: () => getCreateBrandingUrl,
@@ -9452,6 +9453,7 @@ var zitadelNextGen_exports = /* @__PURE__ */ __exportAll({
 	getGetAuthAttemptUrl: () => getGetAuthAttemptUrl,
 	getGetBrandingByIdUrl: () => getGetBrandingByIdUrl,
 	getGetClaimStatusUrl: () => getGetClaimStatusUrl,
+	getGetClaimWindowUrl: () => getGetClaimWindowUrl,
 	getGetEnvironmentByNameUrl: () => getGetEnvironmentByNameUrl,
 	getGetEventUrl: () => getGetEventUrl,
 	getGetFlowDefinitionUrl: () => getGetFlowDefinitionUrl,
@@ -9485,6 +9487,7 @@ var zitadelNextGen_exports = /* @__PURE__ */ __exportAll({
 	getMyUser: () => getMyUser,
 	getPatchProjectUrl: () => getPatchProjectUrl,
 	getProject: () => getProject,
+	getQueryGrantsUrl: () => getQueryGrantsUrl,
 	getQueryProjectsUrl: () => getQueryProjectsUrl,
 	getQuerySessionsUrl: () => getQuerySessionsUrl,
 	getQueryTeamsUrl: () => getQueryTeamsUrl,
@@ -9513,6 +9516,7 @@ var zitadelNextGen_exports = /* @__PURE__ */ __exportAll({
 	listUserPasskeys: () => listUserPasskeys,
 	listUserTeams: () => listUserTeams,
 	patchProject: () => patchProject,
+	queryGrants: () => queryGrants,
 	queryProjects: () => queryProjects,
 	querySessions: () => querySessions,
 	queryTeams: () => queryTeams,
@@ -10062,7 +10066,11 @@ const getGetClaimStatusUrl = (projectId, params) => {
 * 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.
+URL once the project is claimed. The claim grant, not the polled
+challenge, is the source of truth: a project claimed through another
+concurrent challenge also reports `completed`, and a completed claim
+keeps reporting `completed` past this challenge's expiry and past the
+project's claim window.
 
 * @summary Get claim status
 */
@@ -10094,6 +10102,30 @@ const completeClaim = async (projectId, completeClaimBody, options) => {
 		body: JSON.stringify(completeClaimBody)
 	});
 };
+const getGetClaimWindowUrl = (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/window?${stringifiedParams}` : `${getProxyPath()}/projects/${projectId}/claim/window`;
+};
+/**
+* Read by the claim page in the browser to show how long is left to claim the
+project. Unauthenticated by design: the claim page runs this before the
+developer has signed in, and holding the `challenge_id` from the claim URL
+is the authorization — the same capability `claim/complete` accepts. It
+reveals only the window, never the project itself, and unlike
+`claim/complete` it spends nothing, so a reload is free.
+
+* @summary Get the claim window for a project
+*/
+const getClaimWindow = async (projectId, params, options) => {
+	return customFetch(getGetClaimWindowUrl(projectId, params), {
+		...options,
+		method: "GET"
+	});
+};
 const getCreateSessionUrl = () => {
 	return `${getProxyPath()}/sessions`;
 };
@@ -10355,12 +10387,17 @@ const getCreateFlowDefinitionUrl = () => {
 	return `${getProxyPath()}/flow_definitions`;
 };
 /**
-* Creates a new flow definition.
+* Publishes a new flow definition revision.
 Flow definitions are templates that define the sequence of steps (capabilities)
 for a particular user journey (e.g., registration, login, password reset).
 
 Flow definitions are created based on the flow definition schema, which includes the flow's purpose, audience, and the steps involved.
 
+Every call allocates a new opaque id. Revisions of one flow share its
+`name`; posting a definition under an existing `name` publishes a new
+revision of that flow, it is not a conflict. List with `name` to see a
+flow's revisions, newest by creation time first.
+
 * @summary Create a new flow definition
 */
 const createFlowDefinition = async (createFlowDefinitionBody, options) => {
@@ -10383,8 +10420,9 @@ const getListFlowDefinitionsUrl = (params) => {
 	return stringifiedParams.length > 0 ? `${getProxyPath()}/flow_definitions?${stringifiedParams}` : `${getProxyPath()}/flow_definitions`;
 };
 /**
-* Retrieves a list of all flow definitions.
+* Retrieves a list of all flow definitions, newest by creation time first.
 This endpoint can be used to view existing flow definitions and their configurations.
+Filter by `name` to list the revisions of one flow.
 
 * @summary List flow definitions
 */
@@ -10769,6 +10807,39 @@ const createGrant = async (createGrantBody, params, options) => {
 		body: JSON.stringify(createGrantBody)
 	});
 };
+const getQueryGrantsUrl = (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()}/grants/query?${stringifiedParams}` : `${getProxyPath()}/grants/query`;
+};
+/**
+* Returns the collaboration grants of a project, paginated with a cursor.
+Only unrevoked grants this API manages are listed (user or team bound to
+viewer, editor, or admin), including expired grants so a client can
+DELETE before re-granting. Project-secret setup (`sk_proj`) and
+owning-team (`relation=team`) rows are not returned. Grants are not in
+`resource_scope_index`; project scope is required on the query (same as
+get). Requires `project.read`. `expand: ["principal"]` additionally
+requires `user.read` and `team.read` (documented on the expand enum;
+those scopes cannot be ANDed onto this security block because they are
+body-conditional).
+
+* @summary Query grants
+*/
+const queryGrants = async (queryGrantsBody, params, options) => {
+	return customFetch(getQueryGrantsUrl(params), {
+		...options,
+		method: "POST",
+		headers: {
+			"Content-Type": "application/json",
+			...options?.headers
+		},
+		body: JSON.stringify(queryGrantsBody)
+	});
+};
 const getGetGrantUrl = (id, params) => {
 	const normalizedParams = new URLSearchParams();
 	Object.entries(params || {}).forEach(([key, value]) => {
@@ -13884,7 +13955,7 @@ const TEMPLATE_NAMES = {
 };
 //#endregion
 //#region src/orchestrator/templates/layout-chrome.css?inline
-var layout_chrome_default = ":host {\n  color: var(--zl-foreground);\n  font-family: var(--zl-font-family-sans);\n  background: none;\n  display: block;\n}\n\n:host([variant=\"page\"]) {\n  background: var(--zl-background);\n  min-height: 100%;\n}\n\nimg[data-zl-asset-broken] {\n  display: none;\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-trustmark {\n  gap: var(--zl-spacing-2-5);\n  flex-wrap: wrap;\n}\n\n.zl-trustmark__mark {\n  align-items: center;\n  gap: var(--zl-spacing-2);\n  font-family: var(--zl-font-family-sans);\n  font-size: var(--zl-text-sm-size);\n  line-height: var(--zl-text-sm-leading);\n  color: var(--zl-foreground);\n  text-decoration: none;\n  display: inline-flex;\n}\n\n.zl-trustmark__mark:hover {\n  text-underline-offset: 4px;\n  text-decoration: underline;\n}\n\n.zl-trustmark__mark:focus-visible {\n  outline: var(--zl-focus-width) solid var(--zl-ring);\n  outline-offset: var(--zl-focus-offset);\n  border-radius: var(--zl-radius-sm);\n}\n\n.zl-trustmark__logotype {\n  flex-shrink: 0;\n  width: 65px;\n  height: 16px;\n  line-height: 0;\n  display: block;\n}\n\n.zl-trustmark__logotype-svg {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n\n.zl-card-logo {\n  width: auto;\n  max-width: min(12rem, 60%);\n  max-height: var(--zl-card-logo-max-height, 2.5rem);\n  object-fit: contain;\n}\n\n.zl-card-title {\n  font-family: var(--zl-font-family-heading);\n  font-size: var(--zl-text-xl-size);\n  font-weight: var(--zl-font-weight-medium);\n  color: var(--zl-card-foreground);\n  text-align: left;\n  margin: 0;\n  line-height: 1;\n}\n\n.zl-card-subtitle {\n  font-family: var(--zl-font-family-sans);\n  font-size: var(--zl-text-sm-size);\n  line-height: var(--zl-text-sm-leading);\n  font-weight: var(--zl-font-weight-normal);\n  color: var(--zl-muted-foreground);\n  margin: 0;\n}\n\n.zl-field-group {\n  gap: var(--zl-spacing-7);\n  flex-direction: column;\n  display: flex;\n}\n\n.zl-field-group:not(:has(*)) {\n  display: none;\n}\n\n.zl-card-actions {\n  gap: var(--zl-spacing-3);\n  flex-direction: column;\n  display: flex;\n}\n\n[data-suppress-header] .zl-card-title, [data-suppress-header] .zl-card-subtitle {\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  position: absolute;\n  overflow: hidden;\n}\n\n.zl-card-nav {\n  font-family: var(--zl-font-family-sans);\n  font-size: var(--zl-text-sm-size);\n  line-height: var(--zl-text-sm-leading);\n  font-weight: var(--zl-font-weight-normal);\n  color: var(--zl-muted-foreground);\n  text-align: center;\n  margin: 0;\n}\n\n.zl-card-nav__link {\n  font: inherit;\n  line-height: inherit;\n  color: var(--zl-link);\n  text-underline-offset: 4px;\n  cursor: pointer;\n  background: none;\n  border: none;\n  margin: 0;\n  padding: 0;\n  text-decoration: underline;\n  display: inline;\n}\n\n.zl-card-nav__link:hover {\n  color: var(--zl-foreground);\n}\n\n.zl-card-nav__link:focus-visible {\n  outline: var(--zl-focus-width) solid var(--zl-ring);\n  outline-offset: var(--zl-focus-offset);\n}\n\n.zl-card-forgot {\n  text-align: right;\n  margin: 0;\n}\n\n.zl-card-forgot__link {\n  font-family: var(--zl-font-family-sans);\n  font-size: var(--zl-text-sm-size);\n  line-height: var(--zl-text-sm-leading);\n  font-weight: var(--zl-font-weight-normal);\n  color: var(--zl-link);\n  text-underline-offset: 4px;\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-forgot__link:hover {\n  text-decoration: underline;\n}\n\n.zl-card-forgot__link:focus-visible {\n  outline: var(--zl-focus-width) solid var(--zl-ring);\n  outline-offset: var(--zl-focus-offset);\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-8);\n  width: 100%;\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-6);\n  padding: var(--zl-spacing-8) var(--zl-spacing-4);\n  flex-direction: column;\n  display: flex;\n}\n\n.zl-split__logo {\n  max-width: min(16rem, 60%);\n  max-height: var(--zl-split-logo-max-height, 16rem);\n}\n\n.zl-split__logo:has( + .zl-split__hero) {\n  max-height: var(--zl-split-logo-max-height, 8rem);\n}\n\n.zl-split__logo:has( + .zl-split__hero) + .zl-split__hero {\n  max-height: min(var(--zl-split-hero-max-height, 22.5rem),\n    max(6rem,\n      calc(100vh - 104px - var(--zl-spacing-8) - var(--zl-spacing-8) -\n          2.5rem - var(--zl-spacing-6) - var(--zl-spacing-6) -\n          var(--zl-split-logo-max-height, 8rem))));\n}\n\n.zl-split__hero {\n  width: 100%;\n  max-height: var(--zl-split-hero-max-height, min(22.5rem, 60vh));\n  border-radius: var(--zl-radius-lg);\n  object-fit: cover;\n}\n\n.zl-split__placeholder {\n  aspect-ratio: 4 / 5;\n  border-radius: var(--zl-radius-lg);\n  background: radial-gradient(120% 120% at 18% 12%,\n      var(--zl-gradient-lavender-start) 0%,\n      transparent 60%),\n    radial-gradient(130% 130% at 85% 92%,\n      var(--zl-gradient-rose-start) 0%,\n      transparent 60%),\n    var(--zl-card);\n  width: min(18rem, 85%);\n}\n\n.zl-split__form {\n  justify-content: center;\n  align-items: center;\n  gap: var(--zl-spacing-6);\n  flex-direction: column;\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-lg);\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\nzl-page-shell:has(.zl-split) [slot=\"footer\"].zl-attribution {\n  grid-template-columns: var(--zl-split-columns, minmax(0, 1fr) minmax(0, 1fr));\n  gap: var(--zl-spacing-8);\n  width: 100%;\n  display: grid;\n}\n\nzl-page-shell:has(.zl-split) [slot=\"footer\"].zl-attribution > * {\n  grid-column: 2;\n  justify-self: center;\n}\n\nzl-page-shell:has(.zl-split--right) [slot=\"footer\"].zl-attribution > * {\n  grid-column: 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__compact {\n    display: block;\n  }\n\n  zl-page-shell:has(.zl-split) [slot=\"footer\"].zl-attribution {\n    grid-template-columns: minmax(0, 1fr);\n  }\n\n  zl-page-shell:has(.zl-split) .zl-attribution > *, zl-page-shell:has(.zl-split--right) [slot=\"footer\"].zl-attribution > * {\n    grid-column: 1;\n  }\n}\n\n.zl-hero {\n  text-align: left;\n  width: 100%;\n  max-width: 34rem;\n  color: var(--zl-foreground);\n  font-family: var(--zl-font-family-sans);\n  flex-direction: column;\n  display: flex;\n}\n\n.zl-hero__nav {\n  margin-bottom: var(--zl-spacing-8);\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-2);\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-md);\n  background: linear-gradient(135deg,\n    var(--zl-gradient-lavender-start),\n    var(--zl-gradient-rose-start));\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-foreground);\n  margin: 0;\n  font-size: 1.125rem;\n  font-weight: 700;\n}\n\n.zl-hero__nav-links {\n  gap: var(--zl-spacing-6);\n  color: var(--zl-muted-foreground);\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-4);\n  letter-spacing: .08em;\n  text-transform: uppercase;\n  color: var(--zl-muted-foreground);\n  font-size: .8125rem;\n  font-weight: 600;\n}\n\n.zl-hero__headline {\n  margin: 0 0 var(--zl-spacing-4);\n  font-family: var(--zl-font-family-heading);\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-8);\n  max-width: 30rem;\n  color: var(--zl-muted-foreground);\n  font-size: 1.0625rem;\n  line-height: 1.6;\n}\n\n.zl-hero__bullets {\n  gap: var(--zl-spacing-2);\n  margin: 0 0 var(--zl-spacing-8);\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-2);\n  font-size: 1rem;\n  display: flex;\n}\n\n.zl-hero__bullets li:before {\n  content: \"✓\";\n  color: var(--zl-success);\n  font-weight: 700;\n}\n\n.zl-hero__footnote {\n  padding-top: var(--zl-spacing-6);\n  border-top: 1px solid var(--zl-border);\n  color: var(--zl-muted-foreground);\n  margin: 0;\n  font-size: .8125rem;\n}\n\n.zl-hero__footnote strong {\n  color: var(--zl-muted-foreground);\n  font-weight: 600;\n}\n\n.zl-minimal {\n  gap: var(--zl-spacing-6);\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";
+var layout_chrome_default = ":host {\n  color: var(--zl-foreground);\n  font-family: var(--zl-font-family-sans);\n  background: none;\n  display: block;\n}\n\n:host([variant=\"page\"]) {\n  background: var(--zl-background);\n  min-height: 100%;\n}\n\nimg[data-zl-asset-broken] {\n  display: none;\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-trustmark {\n  gap: var(--zl-spacing-2-5);\n  flex-wrap: wrap;\n}\n\n.zl-trustmark__mark {\n  align-items: center;\n  gap: var(--zl-spacing-2);\n  font-family: var(--zl-font-family-sans);\n  font-size: var(--zl-text-sm-size);\n  line-height: var(--zl-text-sm-leading);\n  color: var(--zl-foreground);\n  text-decoration: none;\n  display: inline-flex;\n}\n\n.zl-trustmark__mark:hover {\n  text-underline-offset: 4px;\n  text-decoration: underline;\n}\n\n.zl-trustmark__mark:focus-visible {\n  outline: var(--zl-focus-width) solid var(--zl-ring);\n  outline-offset: var(--zl-focus-offset);\n  border-radius: var(--zl-radius-sm);\n}\n\n.zl-trustmark__logotype {\n  flex-shrink: 0;\n  width: 65px;\n  height: 16px;\n  line-height: 0;\n  display: block;\n}\n\n.zl-trustmark__logotype-svg {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n\n.zl-card-logo {\n  width: auto;\n  max-width: min(12rem, 60%);\n  max-height: var(--zl-card-logo-max-height, 2.5rem);\n  object-fit: contain;\n}\n\n.zl-card-title {\n  font-family: var(--zl-font-family-heading);\n  font-size: var(--zl-text-xl-size);\n  font-weight: var(--zl-font-weight-medium);\n  color: var(--zl-card-foreground);\n  text-align: left;\n  margin: 0;\n  line-height: 1;\n}\n\n.zl-card-subtitle {\n  font-family: var(--zl-font-family-sans);\n  font-size: var(--zl-text-sm-size);\n  line-height: var(--zl-text-sm-leading);\n  font-weight: var(--zl-font-weight-normal);\n  color: var(--zl-muted-foreground);\n  margin: 0;\n}\n\n.zl-field-group {\n  gap: var(--zl-spacing-7);\n  flex-direction: column;\n  display: flex;\n}\n\n.zl-field-group:not(:has(*)) {\n  display: none;\n}\n\n.zl-card-actions {\n  gap: var(--zl-spacing-3);\n  flex-direction: column;\n  display: flex;\n}\n\n[data-suppress-header] .zl-card-title, [data-suppress-header] .zl-card-subtitle {\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  position: absolute;\n  overflow: hidden;\n}\n\n.zl-card-nav {\n  font-family: var(--zl-font-family-sans);\n  font-size: var(--zl-text-sm-size);\n  line-height: var(--zl-text-sm-leading);\n  font-weight: var(--zl-font-weight-normal);\n  color: var(--zl-muted-foreground);\n  text-align: center;\n  margin: 0;\n}\n\n.zl-card-nav__link {\n  font: inherit;\n  line-height: inherit;\n  color: var(--zl-link);\n  text-underline-offset: 4px;\n  cursor: pointer;\n  background: none;\n  border: none;\n  margin: 0;\n  padding: 0;\n  text-decoration: underline;\n  display: inline;\n}\n\n.zl-card-nav__link:hover {\n  color: var(--zl-foreground);\n}\n\n.zl-card-nav__link:focus-visible {\n  outline: var(--zl-focus-width) solid var(--zl-ring);\n  outline-offset: var(--zl-focus-offset);\n}\n\n.zl-card-forgot {\n  text-align: right;\n  margin: 0;\n}\n\n.zl-card-forgot__link {\n  font-family: var(--zl-font-family-sans);\n  font-size: var(--zl-text-sm-size);\n  line-height: var(--zl-text-sm-leading);\n  font-weight: var(--zl-font-weight-normal);\n  color: var(--zl-link);\n  text-underline-offset: 4px;\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-forgot__link:hover {\n  text-decoration: underline;\n}\n\n.zl-card-forgot__link:focus-visible {\n  outline: var(--zl-focus-width) solid var(--zl-ring);\n  outline-offset: var(--zl-focus-offset);\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-8);\n  width: 100%;\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-6);\n  padding: var(--zl-spacing-8) var(--zl-spacing-4);\n  flex-direction: column;\n  display: flex;\n}\n\n.zl-split__logo {\n  max-width: min(16rem, 60%);\n  max-height: var(--zl-split-logo-max-height, 16rem);\n}\n\n.zl-split__logo:has( + .zl-split__hero) {\n  max-height: var(--zl-split-logo-max-height, 8rem);\n}\n\n.zl-split__logo:has( + .zl-split__hero) + .zl-split__hero {\n  max-height: min(var(--zl-split-hero-max-height, 22.5rem),\n    max(6rem,\n      calc(100vh - 104px - var(--zl-spacing-8) - var(--zl-spacing-8) -\n          2.5rem - var(--zl-spacing-6) - var(--zl-spacing-6) -\n          var(--zl-split-logo-max-height, 8rem))));\n}\n\n.zl-split__hero {\n  width: 100%;\n  max-height: var(--zl-split-hero-max-height, min(22.5rem, 60vh));\n  border-radius: var(--zl-radius-lg);\n  object-fit: cover;\n}\n\n.zl-split__placeholder {\n  aspect-ratio: 4 / 5;\n  border-radius: var(--zl-radius-lg);\n  background: radial-gradient(120% 120% at 18% 12%,\n      var(--zl-gradient-lavender-start) 0%,\n      transparent 60%),\n    radial-gradient(130% 130% at 85% 92%,\n      var(--zl-gradient-rose-start) 0%,\n      transparent 60%),\n    var(--zl-card);\n  width: min(18rem, 85%);\n}\n\n.zl-split__form {\n  justify-content: center;\n  align-items: center;\n  gap: var(--zl-spacing-6);\n  flex-direction: column;\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-lg);\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\nzl-page-shell:has(.zl-split) [slot=\"footer\"].zl-attribution {\n  grid-template-columns: var(--zl-split-columns, minmax(0, 1fr) minmax(0, 1fr));\n  gap: var(--zl-spacing-8);\n  width: 100%;\n  display: grid;\n}\n\nzl-page-shell:has(.zl-split) [slot=\"footer\"].zl-attribution > * {\n  grid-column: 2;\n  justify-self: center;\n}\n\nzl-page-shell:has(.zl-split--right) [slot=\"footer\"].zl-attribution > * {\n  grid-column: 1;\n}\n\nzl-page-shell:has(.zl-split) [slot=\"footer\"].zl-attribution ::slotted(*) {\n  grid-column: 2;\n  justify-self: center;\n}\n\nzl-page-shell:has(.zl-split--right) [slot=\"footer\"].zl-attribution ::slotted(*) {\n  grid-column: 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__compact {\n    display: block;\n  }\n\n  zl-page-shell:has(.zl-split) [slot=\"footer\"].zl-attribution {\n    grid-template-columns: minmax(0, 1fr);\n  }\n\n  zl-page-shell:has(.zl-split) .zl-attribution > *, zl-page-shell:has(.zl-split--right) [slot=\"footer\"].zl-attribution > * {\n    grid-column: 1;\n  }\n}\n\n.zl-hero {\n  text-align: left;\n  width: 100%;\n  max-width: 34rem;\n  color: var(--zl-foreground);\n  font-family: var(--zl-font-family-sans);\n  flex-direction: column;\n  display: flex;\n}\n\n.zl-hero__nav {\n  margin-bottom: var(--zl-spacing-8);\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-2);\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-md);\n  background: linear-gradient(135deg,\n    var(--zl-gradient-lavender-start),\n    var(--zl-gradient-rose-start));\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-foreground);\n  margin: 0;\n  font-size: 1.125rem;\n  font-weight: 700;\n}\n\n.zl-hero__nav-links {\n  gap: var(--zl-spacing-6);\n  color: var(--zl-muted-foreground);\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-4);\n  letter-spacing: .08em;\n  text-transform: uppercase;\n  color: var(--zl-muted-foreground);\n  font-size: .8125rem;\n  font-weight: 600;\n}\n\n.zl-hero__headline {\n  margin: 0 0 var(--zl-spacing-4);\n  font-family: var(--zl-font-family-heading);\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-8);\n  max-width: 30rem;\n  color: var(--zl-muted-foreground);\n  font-size: 1.0625rem;\n  line-height: 1.6;\n}\n\n.zl-hero__bullets {\n  gap: var(--zl-spacing-2);\n  margin: 0 0 var(--zl-spacing-8);\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-2);\n  font-size: 1rem;\n  display: flex;\n}\n\n.zl-hero__bullets li:before {\n  content: \"✓\";\n  color: var(--zl-success);\n  font-weight: 700;\n}\n\n.zl-hero__footnote {\n  padding-top: var(--zl-spacing-6);\n  border-top: 1px solid var(--zl-border);\n  color: var(--zl-muted-foreground);\n  margin: 0;\n  font-size: .8125rem;\n}\n\n.zl-hero__footnote strong {\n  color: var(--zl-muted-foreground);\n  font-weight: 600;\n}\n\n.zl-minimal {\n  gap: var(--zl-spacing-6);\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
 /** Narrow a rendered named element to the `formValue` field-atom contract. */
@@ -13993,6 +14064,13 @@ let ZitadelLogin = class ZitadelLogin extends ZitadelSurface {
 	set loading(value) {
 		this.#_loading_accessor_storage = value;
 	}
+	#_completing_accessor_storage = false;
+	get completing() {
+		return this.#_completing_accessor_storage;
+	}
+	set completing(value) {
+		this.#_completing_accessor_storage = value;
+	}
 	#_startupError_accessor_storage = null;
 	get startupError() {
 		return this.#_startupError_accessor_storage;
@@ -14137,7 +14215,7 @@ let ZitadelLogin = class ZitadelLogin extends ZitadelSurface {
           </zl-card>
         </zl-page-shell>
       </form>`;
-		if (!this.response || !this.engine) return b`<slot name="loader"></slot>`;
+		if (!this.response || !this.engine || this.completing) return b`<slot name="loader"></slot>`;
 		const rendered = this.injectAttribution(this.renderStep(this.response.step, this.engine));
 		return b`<form
       class="zl-mount"
@@ -14181,7 +14259,7 @@ let ZitadelLogin = class ZitadelLogin extends ZitadelSurface {
 		const custom = attribution?.custom_link;
 		if (!show && !custom) return "";
 		const mark = custom ? `<a class="zl-trustmark__mark" part="attribution-mark" href="${escapeHtml(String(custom.href))}">${escapeHtml(String(custom.label))}</a>` : `<a class="zl-trustmark__mark" part="attribution-mark" href="https://zitadel.com" aria-label="Secured with Zitadel">${zitadelTrustmarkInnerHtml()}</a>`;
-		return `<div${placement === "footer" ? ` slot="footer"` : ""} part="attribution" class="zl-attribution zl-trustmark">${mark}</div>`;
+		return `<div${placement === "footer" ? ` slot="footer"` : ""} part="attribution" class="zl-attribution zl-trustmark">${mark}<slot name="attribution-trailing"></slot></div>`;
 	}
 	/** Declarative config read from this element's attributes. */
 	get projectAttrs() {
@@ -14229,6 +14307,7 @@ let ZitadelLogin = class ZitadelLogin extends ZitadelSurface {
 	}
 	applyResponse(wire) {
 		this.stepErrorDismissed = false;
+		this.completing = navigatesOnComplete(wire, this.postSignInUrl);
 		this.response = wire;
 		const { branding, issues } = validateBranding(wire.branding, { renderingOrigin: this.ownerDocument.location.origin });
 		this.branding = branding;
@@ -14700,6 +14779,7 @@ __decorate([n$1({ attribute: false })], ZitadelLogin.prototype, "locales", null)
 __decorate([r$1()], ZitadelLogin.prototype, "response", null);
 __decorate([r$1()], ZitadelLogin.prototype, "branding", null);
 __decorate([r$1()], ZitadelLogin.prototype, "loading", null);
+__decorate([r$1()], ZitadelLogin.prototype, "completing", null);
 __decorate([r$1()], ZitadelLogin.prototype, "startupError", null);
 __decorate([r$1()], ZitadelLogin.prototype, "formValues", null);
 ZitadelLogin = __decorate([t$4("zitadel-login")], ZitadelLogin);
@@ -14713,6 +14793,19 @@ ZitadelLogin = __decorate([t$4("zitadel-login")], ZitadelLogin);
 function isAllowedSelectValue(field, value) {
 	return field.validation?.enum?.includes(value) ?? false;
 }
+/**
+* Whether a terminal step ends in a navigation rather than a screen: a
+* `redirect` with a URI, or a `show` whose handoff the widget exchanges before
+* sending the browser to `post-sign-in-url`. A `show` without a
+* `post-sign-in-url` is the host handling the handoff itself, and that screen
+* is the flow's own last word — it still renders.
+*/
+function navigatesOnComplete(wire, postSignInUrl) {
+	const behavior = wire.step.complete;
+	if (behavior === "redirect") return Boolean(wire.redirect_uri);
+	if (behavior === "show") return Boolean(wire.handoff_token && postSignInUrl);
+	return false;
+}
 function collectInitialValues(step) {
 	const values = {};
 	if (!step.fields) return values;
@@ -14901,26 +14994,26 @@ let ZitadelLogout = class ZitadelLogout extends i$2 {
 	set theme(value) {
 		this.#_theme_accessor_storage = value;
 	}
-	#_displayName_accessor_storage = "";
-	get displayName() {
-		return this.#_displayName_accessor_storage;
+	#_userDisplay_accessor_storage = "";
+	get userDisplay() {
+		return this.#_userDisplay_accessor_storage;
 	}
-	set displayName(value) {
-		this.#_displayName_accessor_storage = value;
+	set userDisplay(value) {
+		this.#_userDisplay_accessor_storage = value;
 	}
-	#_displayEmail_accessor_storage = "";
-	get displayEmail() {
-		return this.#_displayEmail_accessor_storage;
+	#_userIdentifier_accessor_storage = "";
+	get userIdentifier() {
+		return this.#_userIdentifier_accessor_storage;
 	}
-	set displayEmail(value) {
-		this.#_displayEmail_accessor_storage = value;
+	set userIdentifier(value) {
+		this.#_userIdentifier_accessor_storage = value;
 	}
-	#_displayUserId_accessor_storage = "";
-	get displayUserId() {
-		return this.#_displayUserId_accessor_storage;
+	#_userId_accessor_storage = "";
+	get userId() {
+		return this.#_userId_accessor_storage;
 	}
-	set displayUserId(value) {
-		this.#_displayUserId_accessor_storage = value;
+	set userId(value) {
+		this.#_userId_accessor_storage = value;
 	}
 	#_open_accessor_storage = false;
 	get open() {
@@ -15008,20 +15101,21 @@ let ZitadelLogout = class ZitadelLogout extends i$2 {
 	async loadIdentity(api) {
 		try {
 			const session = await getSession$1(api);
-			this.displayName = session.name ?? "";
-			this.displayEmail = session.email ?? "";
-			this.displayUserId = session.user_id ?? "";
+			this.userDisplay = session.user?.display ?? "";
+			this.userIdentifier = session.user?.identifier ?? "";
+			this.userId = session.user_id ?? "";
 		} catch {} finally {
 			this.projectTemplate();
 		}
 	}
 	get initial() {
-		const source = this.displayName || this.displayEmail || this.displayUserId;
+		const source = this.userDisplay || this.userIdentifier || this.userId;
 		return source ? source.charAt(0).toUpperCase() : "?";
 	}
 	/**
 	* Clones the consumer-supplied `<template>` into the light DOM, fills the
-	* `{{name}}`, `{{email}}`, and `{{initial}}` tokens via a TreeWalker, and
+	* `{{display}}`, `{{identifier}}`, and `{{initial}}` tokens (plus the
+	* legacy `{{name}}`/`{{email}}` aliases) via a TreeWalker, and
 	* wires every element with `data-action="logout"` to trigger sign-out.
 	* Light-DOM mounting is deliberate so the consumer's existing CSS applies.
 	*
@@ -15032,7 +15126,7 @@ let ZitadelLogout = class ZitadelLogout extends i$2 {
 	projectTemplate() {
 		if (!this.templateMode || !this.pendingTemplate) return;
 		const clone = this.pendingTemplate.content.cloneNode(true);
-		fillTemplateTokens(clone, this.displayName, this.displayEmail, this.initial);
+		fillTemplateTokens(clone, this.userDisplay, this.userIdentifier, this.initial);
 		const container = document.createElement("span");
 		container.appendChild(clone);
 		this.projectedContainer?.remove();
@@ -15081,8 +15175,8 @@ let ZitadelLogout = class ZitadelLogout extends i$2 {
 		this.open = false;
 		this.loading = false;
 		emit(this, "zitadel-signout", {
-			name: this.displayName,
-			email: this.displayEmail
+			display: this.userDisplay,
+			identifier: this.userIdentifier
 		});
 		if (this.postSignOutUrl && typeof window !== "undefined") window.location.href = this.postSignOutUrl;
 	}
@@ -15110,9 +15204,9 @@ let ZitadelLogout = class ZitadelLogout extends i$2 {
                 <div class="preview-avatar" aria-hidden="true">${this.initial}</div>
                 <div class="preview-info">
                   <div class="preview-name">
-                    ${this.displayName || this.displayEmail || this.displayUserId}
+                    ${this.userDisplay || this.userIdentifier || this.userId}
                   </div>
-                  ${this.displayName && this.displayEmail ? b`<div class="preview-email">${this.displayEmail}</div>` : A}
+                  ${this.userDisplay && this.userIdentifier ? b`<div class="preview-email">${this.userIdentifier}</div>` : A}
                 </div>
               </div>
 
@@ -15165,23 +15259,32 @@ __decorate([n$1({
 	attribute: "post-sign-out-url"
 })], ZitadelLogout.prototype, "postSignOutUrl", null);
 __decorate([n$1({ type: String })], ZitadelLogout.prototype, "theme", null);
-__decorate([r$1()], ZitadelLogout.prototype, "displayName", null);
-__decorate([r$1()], ZitadelLogout.prototype, "displayEmail", null);
-__decorate([r$1()], ZitadelLogout.prototype, "displayUserId", null);
+__decorate([r$1()], ZitadelLogout.prototype, "userDisplay", null);
+__decorate([r$1()], ZitadelLogout.prototype, "userIdentifier", null);
+__decorate([r$1()], ZitadelLogout.prototype, "userId", null);
 __decorate([r$1()], ZitadelLogout.prototype, "open", null);
 __decorate([r$1()], ZitadelLogout.prototype, "loading", null);
 __decorate([r$1()], ZitadelLogout.prototype, "errorMessage", null);
 ZitadelLogout = __decorate([t$4("zitadel-logout")], ZitadelLogout);
 /**
-* Substitutes `{{name}}`, `{{email}}`, and `{{initial}}` placeholders inside
-* a fragment's text nodes. Walking text nodes (rather than running a regex
-* over `outerHTML`) keeps attributes and structural markup untouched.
-*/
-function fillTemplateTokens(fragment, name, email, initial) {
+* Substitutes `{{display}}`, `{{identifier}}`, and `{{initial}}` placeholders
+* inside a fragment's text nodes; `{{name}}` and `{{email}}` fill as legacy
+* aliases of display and identifier so pre-ref templates keep rendering.
+* Walking text nodes (rather than running a regex over `outerHTML`) keeps
+* attributes and structural markup untouched.
+*/
+function fillTemplateTokens(fragment, display, identifier, initial) {
+	const values = {
+		display,
+		identifier,
+		name: display,
+		email: identifier,
+		initial
+	};
 	const walker = document.createTreeWalker(fragment, NodeFilter.SHOW_TEXT);
 	let node = walker.nextNode();
 	while (node) {
-		if (node.textContent) node.textContent = node.textContent.replace(/\{\{name\}\}/g, name).replace(/\{\{email\}\}/g, email).replace(/\{\{initial\}\}/g, initial);
+		if (node.textContent) node.textContent = node.textContent.replace(/\{\{(display|identifier|name|email|initial)\}\}/g, (_, token) => values[token] ?? "");
 		node = walker.nextNode();
 	}
 }
@@ -15281,26 +15384,26 @@ let ZitadelSession = class ZitadelSession extends ZitadelSurface {
 	set logoutLabel(value) {
 		this.#_logoutLabel_accessor_storage = value;
 	}
-	#_displayName_accessor_storage = "";
-	get displayName() {
-		return this.#_displayName_accessor_storage;
+	#_userDisplay_accessor_storage = "";
+	get userDisplay() {
+		return this.#_userDisplay_accessor_storage;
 	}
-	set displayName(value) {
-		this.#_displayName_accessor_storage = value;
+	set userDisplay(value) {
+		this.#_userDisplay_accessor_storage = value;
 	}
-	#_displayEmail_accessor_storage = "";
-	get displayEmail() {
-		return this.#_displayEmail_accessor_storage;
+	#_userIdentifier_accessor_storage = "";
+	get userIdentifier() {
+		return this.#_userIdentifier_accessor_storage;
 	}
-	set displayEmail(value) {
-		this.#_displayEmail_accessor_storage = value;
+	set userIdentifier(value) {
+		this.#_userIdentifier_accessor_storage = value;
 	}
-	#_displayUserId_accessor_storage = "";
-	get displayUserId() {
-		return this.#_displayUserId_accessor_storage;
+	#_userId_accessor_storage = "";
+	get userId() {
+		return this.#_userId_accessor_storage;
 	}
-	set displayUserId(value) {
-		this.#_displayUserId_accessor_storage = value;
+	set userId(value) {
+		this.#_userId_accessor_storage = value;
 	}
 	#_loading_accessor_storage = false;
 	get loading() {
@@ -15323,7 +15426,7 @@ let ZitadelSession = class ZitadelSession extends ZitadelSurface {
 	}
 	/** Single identity line: human-readable name, then email, then user_id. */
 	get identityLabel() {
-		return this.displayName || this.displayEmail || this.displayUserId;
+		return this.userDisplay || this.userIdentifier || this.userId;
 	}
 	willUpdate() {
 		this.applySurfaceTheme(void 0);
@@ -15358,9 +15461,9 @@ let ZitadelSession = class ZitadelSession extends ZitadelSurface {
 	async fetchIdentity(api) {
 		try {
 			const session = await getSession$1(api);
-			this.displayName = session.name ?? "";
-			this.displayEmail = session.email ?? "";
-			this.displayUserId = session.user_id ?? "";
+			this.userDisplay = session.user?.display ?? "";
+			this.userIdentifier = session.user?.identifier ?? "";
+			this.userId = session.user_id ?? "";
 		} catch {}
 	}
 	/**
@@ -15382,8 +15485,8 @@ let ZitadelSession = class ZitadelSession extends ZitadelSurface {
 		}
 		this.loading = false;
 		emit(this, "zitadel-signout", {
-			name: this.displayName,
-			email: this.displayEmail
+			display: this.userDisplay,
+			identifier: this.userIdentifier
 		});
 		if (this.postSignOutUrl && typeof window !== "undefined") window.location.assign(this.postSignOutUrl);
 	}
@@ -15437,9 +15540,9 @@ __decorate([n$1({
 	type: String,
 	attribute: "logout-label"
 })], ZitadelSession.prototype, "logoutLabel", null);
-__decorate([r$1()], ZitadelSession.prototype, "displayName", null);
-__decorate([r$1()], ZitadelSession.prototype, "displayEmail", null);
-__decorate([r$1()], ZitadelSession.prototype, "displayUserId", null);
+__decorate([r$1()], ZitadelSession.prototype, "userDisplay", null);
+__decorate([r$1()], ZitadelSession.prototype, "userIdentifier", null);
+__decorate([r$1()], ZitadelSession.prototype, "userId", null);
 __decorate([r$1()], ZitadelSession.prototype, "loading", null);
 __decorate([r$1()], ZitadelSession.prototype, "errorMessage", null);
 ZitadelSession = __decorate([t$4("zitadel-session")], ZitadelSession);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zitadel/components",
-  "version": "1.0.0-alpha.20",
+  "version": "1.0.0-alpha.22",
   "description": "Lit-based atomic web components and the <zitadel-login> orchestrator for the Zitadel auth UI.",
   "homepage": "https://github.com/zitadel/nextgen/tree/main/packages/components#readme",
   "bugs": {
@@ -60,7 +60,7 @@
     "liquidjs": "^10.27.2",
     "lit": "^3.3.2",
     "lucide": "^1.16.0",
-    "@zitadel/config": "1.0.0-alpha.20"
+    "@zitadel/config": "1.0.0-alpha.22"
   },
   "devDependencies": {
     "@tsdown/css": "^0.21.10",
@@ -75,7 +75,7 @@
     "tsdown": "^0.21.10",
     "tslib": "^2.8.1",
     "@zitadel/api-mock": "0.0.0",
-    "@zitadel/api": "1.0.0-alpha.20",
+    "@zitadel/api": "1.0.0-alpha.22",
     "@zitadel/design-tokens": "0.1.0-alpha.1"
   },
   "scripts": {