@zitadel/components 1.0.0-alpha.21 → 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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zitadel/components",
-  "version": "1.0.0-alpha.21",
+  "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.21"
+    "@zitadel/config": "1.0.0-alpha.22"
   },
   "devDependencies": {
     "@tsdown/css": "^0.21.10",
@@ -74,9 +74,9 @@
     "lightningcss": "^1.30.1",
     "tsdown": "^0.21.10",
     "tslib": "^2.8.1",
-    "@zitadel/design-tokens": "0.1.0-alpha.1",
     "@zitadel/api-mock": "0.0.0",
-    "@zitadel/api": "1.0.0-alpha.21"
+    "@zitadel/api": "1.0.0-alpha.22",
+    "@zitadel/design-tokens": "0.1.0-alpha.1"
   },
   "scripts": {
     "build": "tsdown",