@zitadel/components 0.0.0

package/dist/orchestrator/mandatory-gates.d.ts

@@ -0,0 +1,26 @@
+/**
+ * `{% mandatory_gates %}` runtime patcher.
+ *
+ * Per `docs/design/branding/validator.md` §Runtime safety net:
+ *
+ *   "After the template finishes rendering, the tag inspects the produced DOM
+ *    and appends:
+ *      - Any required `fields[*]` without a matching `<zl-field>`.
+ *      - Any required `gates[*]` without a matching consumer.
+ *      - A primary `<zl-button type="submit">` if none was reached."
+ *
+ * Implementation: the LiquidJS `{% mandatory_gates %}` tag emits a unique
+ * marker comment. After Liquid renders, this patcher parses the produced
+ * HTML into a `<template>`, builds any missing atoms as real DOM elements,
+ * replaces the marker with them, and serialises back to a string.
+ *
+ * Building elements via the DOM (`document.createElement` + `setAttribute`)
+ * delegates HTML attribute escaping to the browser's serialiser — no manual
+ * string-escaping in this module.
+ */
+import type { CreateFlow201Step } from "@zitadel/api/generated/model";
+import type { Locale } from "./locales/en.js";
+export declare const MANDATORY_GATES_MARKER = "ZL_MANDATORY_GATES";
+export declare const mandatoryGatesMarkerComment = "<!--ZL_MANDATORY_GATES-->";
+export declare function patchMandatoryGates(html: string, step: CreateFlow201Step, locale: Locale): string;
+//# sourceMappingURL=mandatory-gates.d.ts.map

package/dist/orchestrator/mandatory-gates.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mandatory-gates.d.ts","sourceRoot":"","sources":["../../src/orchestrator/mandatory-gates.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAEtE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAE9C,eAAO,MAAM,sBAAsB,uBAAuB,CAAC;AAE3D,eAAO,MAAM,2BAA2B,8BAAqC,CAAC;AAE9E,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,iBAAiB,EACvB,MAAM,EAAE,MAAM,GACb,MAAM,CAoBR"}

package/dist/orchestrator/sanitiser.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Returns a sanitiser bound to the current manifest registry. Callers should
+ * cache the result; rebuilding is cheap but allocates a fresh DOMPurify config.
+ */
+export declare function createSanitiser(): (html: string) => string;
+//# sourceMappingURL=sanitiser.d.ts.map

package/dist/orchestrator/sanitiser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sanitiser.d.ts","sourceRoot":"","sources":["../../src/orchestrator/sanitiser.ts"],"names":[],"mappings":"AAyGA;;;GAGG;AACH,wBAAgB,eAAe,IAAI,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAsB1D"}

package/dist/orchestrator/template-context.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Liquid template context contract.
+ *
+ * The orchestrator feeds tenant Liquid templates a stable, renderer-friendly
+ * projection of the wire `CreateFlow201` shape. Capability dictionaries
+ * (`fields`, `actions`, `gates`, `sso_providers`) are typed straight from
+ * the orval-generated wire so templates iterate over the same schema the
+ * server promises.
+ *
+ * The orchestrator owns three projections that don't exist on the wire:
+ *
+ * 1. `errors` — lifted from `step.error: string | null` so templates iterate
+ *    uniformly even though the wire only carries one error string.
+ * 2. `messages` — populated by orchestrator decoration hooks (info banners,
+ *    sticky notices); not on the wire.
+ * 3. `identity` — resolved client-side for greet-by-name; not on the wire.
+ */
+import type { CreateFlow201Step, CreateFlow201StepActions, CreateFlow201StepChallenge, CreateFlow201StepFields, CreateFlow201StepGates, CreateFlow201StepSsoProvidersItem } from "@zitadel/api/generated/model";
+import type { Branding } from "./branding.js";
+export type FlowMessage = {
+    level: "info" | "warning";
+    text_key: string;
+};
+export type FlowError = {
+    code?: string;
+    text_key?: string;
+    message?: string;
+};
+export type FlowIdentity = {
+    display_name?: string;
+    email_address?: string;
+    avatar_url?: string;
+};
+/**
+ * Liquid render context. The orchestrator builds this from the wire
+ * `CreateFlow201` payload before invoking the engine.
+ *
+ * Capability dictionaries point at the orval wire shapes directly. The only
+ * client-only pieces are `messages`, `identity`, `errors`, the resolved
+ * `branding` (v2 superset), and `loading`.
+ */
+export type LiquidContext = {
+    step: Pick<CreateFlow201Step, "name" | "complete" | "texts">;
+    fields: CreateFlow201StepFields;
+    actions: CreateFlow201StepActions;
+    gates: CreateFlow201StepGates;
+    sso_providers: readonly CreateFlow201StepSsoProvidersItem[];
+    challenge: CreateFlow201StepChallenge | null;
+    messages: readonly FlowMessage[];
+    identity: FlowIdentity | null;
+    errors: readonly FlowError[];
+    branding: Branding | Record<string, never>;
+    loading: boolean;
+};
+//# sourceMappingURL=template-context.d.ts.map

package/dist/orchestrator/template-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"template-context.d.ts","sourceRoot":"","sources":["../../src/orchestrator/template-context.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,OAAO,KAAK,EACV,iBAAiB,EACjB,wBAAwB,EACxB,0BAA0B,EAC1B,uBAAuB,EACvB,sBAAsB,EACtB,iCAAiC,EAClC,MAAM,8BAA8B,CAAC;AAEtC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9C,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,IAAI,CAAC,iBAAiB,EAAE,MAAM,GAAG,UAAU,GAAG,OAAO,CAAC,CAAC;IAC7D,MAAM,EAAE,uBAAuB,CAAC;IAChC,OAAO,EAAE,wBAAwB,CAAC;IAClC,KAAK,EAAE,sBAAsB,CAAC;IAC9B,aAAa,EAAE,SAAS,iCAAiC,EAAE,CAAC;IAC5D,SAAS,EAAE,0BAA0B,GAAG,IAAI,CAAC;IAC7C,QAAQ,EAAE,SAAS,WAAW,EAAE,CAAC;IACjC,QAAQ,EAAE,YAAY,GAAG,IAAI,CAAC;IAC9B,MAAM,EAAE,SAAS,SAAS,EAAE,CAAC;IAC7B,QAAQ,EAAE,QAAQ,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAC3C,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC"}

package/dist/orchestrator/template-names.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Names of the bundled Liquid templates the `<zitadel-login>` orchestrator
+ * registers.
+ *
+ * This lives in its own module — separate from `liquid.ts` — so the public
+ * barrel can re-export `TEMPLATE_NAMES` without dragging LiquidJS' `Liquid`
+ * type (and its Node ambient-type requirements) into the published
+ * declaration surface. See `liquid.ts` / the orchestrator barrel.
+ */
+export declare const TEMPLATE_NAMES: {
+    readonly default: "default";
+    readonly authForm: "auth-form";
+    readonly passkeyUpsell: "passkey-upsell";
+    readonly signedIn: "signed-in";
+};
+//# sourceMappingURL=template-names.d.ts.map

package/dist/orchestrator/template-names.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"template-names.d.ts","sourceRoot":"","sources":["../../src/orchestrator/template-names.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,eAAO,MAAM,cAAc;aACzB,OAAO,EAAE,SAAS;aAClB,QAAQ,EAAE,WAAW;aACrB,aAAa,EAAE,gBAAgB;aAC/B,QAAQ,EAAE,WAAW;CACb,CAAC"}

package/dist/orchestrator/templates/auth-form.liquid.d.ts

@@ -0,0 +1,14 @@
+/**
+ * `auth-form` partial — Sign in and Sign up screens (Figma screens file).
+ *
+ * Sign up 2xl frame: `6593:141741` (card `6593:141743`, attribution `6593:141767`).
+ * Sign in 2xl frame: `6593:141983`, card `6593:141985`, stack `6593:141989`
+ * (email + password + forgot link + CTAs on one step).
+ * Sign-in errors: wrong credentials `6602:180268`, server alert `6594:125237`.
+ *
+ * Figma `Field+CTAs` stacks fields + CTAs in one column at 16px (`spacing-03`).
+ * Primary/secondary are 48px buttons; register / sign_in are body copy with a
+ * purple text link (24px row) — not `<zl-button hierarchy="text">`.
+ */
+export declare const authFormTemplate: string;
+//# sourceMappingURL=auth-form.liquid.d.ts.map

package/dist/orchestrator/templates/auth-form.liquid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auth-form.liquid.d.ts","sourceRoot":"","sources":["../../../src/orchestrator/templates/auth-form.liquid.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,gBAAgB,QAwG5B,CAAC"}

package/dist/orchestrator/templates/default.liquid.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Bundled `default.liquid` master template.
+ *
+ * Renders the four target Figma auth screens (Sign in, Sign up, Passkey
+ * upsell, Signed in) by including the appropriate partial based on
+ * `step.name`. Tenant-specific layouts (`branding.layout`) replace the
+ * outer chrome only — the per-step partials stay shared so atom output
+ * tracks the design system without each tenant re-implementing it.
+ *
+ * Spec: docs/design/branding/templates.md.
+ */
+export declare const defaultTemplate: string;
+/**
+ * Layout chrome injected as an `adoptedStyleSheet` on the orchestrator's
+ * shadow root. Provides the page background and the attribution-footer
+ * positioning that lives *outside* any template — the rest of the visual
+ * surface is owned by the `<zl-page-shell>` / `<zl-card>` atoms the
+ * templates render. Token references resolve against the
+ * `@zitadel/design-tokens` CSS variables that are present on
+ * `:host` via the branding stylesheet.
+ */
+export declare const layoutChromeCss = "\n:host {\n  display: block;\n  min-height: 100%;\n  background: var(--zl-color-surface-default-black, #0f0f11);\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n}\n.zl-mount {\n  display: flex;\n  flex-direction: column;\n  min-height: 100vh;\n  background: inherit;\n  color: inherit;\n}\n.zl-mount > zl-page-shell,\n.zl-mount > [data-zl-template-root] {\n  flex: 1 1 auto;\n}\n.zl-attribution {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: transparent;\n}\n.zl-attribution[hidden] {\n  display: none;\n}\n/* Card header typography \u2014 Figma \"Desktop/Headings/Small\" + \"Body Small\n   Regular\" pattern shared by sign-in (6593:141740), passkey upsell\n   (6594:89142 / 6594:12796), and signed-in (6596:132845). Templates\n   slot raw <h1>/<p> elements into <zl-card>, which keeps them in the\n   light DOM where the orchestrator's stylesheet can reach them \u2014 the\n   atom intentionally doesn't dictate typography. */\n.zl-card-title {\n  margin: 0;\n  font-family: var(--zl-font-family-heading, var(--zl-font-family-sans, system-ui, sans-serif));\n  font-size: 2rem;\n  font-weight: 400;\n  line-height: 2.5rem;\n  letter-spacing: -0.02em;\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  text-align: left;\n}\n.zl-card-subtitle {\n  margin: 0;\n  font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  font-weight: 400;\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n}\n/* Figma 6593:141989 / 6594:12882 \u2014 left-aligned in Field+CTAs (x=0, items-start). */\n.zl-card-nav {\n  margin: 0;\n  font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 400;\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  text-align: left;\n}\n.zl-card-nav__link {\n  display: inline;\n  margin: 0;\n  padding: 0;\n  border: none;\n  background: transparent;\n  font: inherit;\n  line-height: inherit;\n  color: var(--zl-color-icon-default-purple, #bba5e4);\n  text-decoration: none;\n  cursor: pointer;\n}\n.zl-card-nav__link:hover {\n  text-decoration: underline;\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/* Figma 6593:141989 \u2014 forgot password row (left-aligned, before CTAs). */\n.zl-card-forgot {\n  margin: 0;\n  text-align: left;\n}\n.zl-card-forgot__link {\n  display: inline;\n  margin: 0;\n  padding: 0;\n  border: none;\n  background: transparent;\n  font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 400;\n  color: var(--zl-color-icon-default-purple, #bba5e4);\n  text-decoration: none;\n  cursor: pointer;\n}\n.zl-card-forgot__link:hover {\n  text-decoration: underline;\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";
+//# sourceMappingURL=default.liquid.d.ts.map

package/dist/orchestrator/templates/default.liquid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"default.liquid.d.ts","sourceRoot":"","sources":["../../../src/orchestrator/templates/default.liquid.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,eAAe,QAQ3B,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe,2jGA2G3B,CAAC"}

package/dist/orchestrator/templates/passkey-upsell.liquid.d.ts

@@ -0,0 +1,15 @@
+/**
+ * `passkey-upsell` partial — third Figma target screen (file
+ * `xkvBjkOJ8ENuHdTGZHXezK`, node `6594:630`).
+ *
+ * Differs from `auth-form`:
+ *   - heading + subtitle live in a compact card (gap 24px instead of 32px),
+ *   - primary "Set up passkey" CTA carries a trailing 24px passkey icon
+ *     (Figma slots the icon to the right of the label, not above it),
+ *   - secondary "Skip for now" uses the dark secondary hierarchy, not the
+ *     `text` hierarchy — the Figma button has a solid #252528 background.
+ *
+ * Server-side errors land in a `<zl-alert>` the same way as the auth form.
+ */
+export declare const passkeyUpsellTemplate: string;
+//# sourceMappingURL=passkey-upsell.liquid.d.ts.map

package/dist/orchestrator/templates/passkey-upsell.liquid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"passkey-upsell.liquid.d.ts","sourceRoot":"","sources":["../../../src/orchestrator/templates/passkey-upsell.liquid.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,qBAAqB,QA8DjC,CAAC"}

package/dist/orchestrator/templates/signed-in.liquid.d.ts

@@ -0,0 +1,20 @@
+/**
+ * `signed-in` partial — fourth Figma target screen (file
+ * `xkvBjkOJ8ENuHdTGZHXezK`, node `6596:132844`).
+ *
+ * Figma layout:
+ *   - heading "You're signed in as" (left-aligned, full width)
+ *   - body line with the authenticated email address (Arimo Regular 16/24)
+ *   - "Continue" primary CTA
+ *   - "Logout" secondary CTA
+ *
+ * No avatar / identity hero glyph: the Figma frame is intentionally a
+ * pure modal layover and dropping the avatar keeps the orchestrator
+ * default in lockstep with the spec.
+ *
+ * Rendered when the flow returns a terminal step (`complete: "show"`)
+ * and no `post-sign-in-url` is configured, so the user can confirm the
+ * identity before the host SPA takes over.
+ */
+export declare const signedInTemplate: string;
+//# sourceMappingURL=signed-in.liquid.d.ts.map

package/dist/orchestrator/templates/signed-in.liquid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"signed-in.liquid.d.ts","sourceRoot":"","sources":["../../../src/orchestrator/templates/signed-in.liquid.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,gBAAgB,QA8E5B,CAAC"}

package/dist/orchestrator/theme-controller.d.ts

@@ -0,0 +1,30 @@
+/**
+ * `ThemeController` — Lit ReactiveController that resolves the active
+ * `light | dark` theme from the current `Branding` payload and keeps it in
+ * sync with the OS-level `prefers-color-scheme` when the tenant opts into
+ * `theme.mode = "auto"`.
+ *
+ * Per `docs/design/branding/tokens.md` the orchestrator owns theming entirely.
+ * Subscribing here is what makes "auto" actually reactive instead of a
+ * one-shot read at first paint.
+ */
+import type { ReactiveController, ReactiveControllerHost } from "lit";
+import type { Branding } from "./branding.js";
+export type ResolvedTheme = "light" | "dark";
+export declare class ThemeController implements ReactiveController {
+    private readonly host;
+    private branding;
+    private mediaQuery;
+    private _theme;
+    constructor(host: ReactiveControllerHost);
+    get theme(): ResolvedTheme;
+    setBranding(branding: Branding | undefined): void;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    private refresh;
+    private attach;
+    private detach;
+    private onMediaChange;
+    private update;
+}
+//# sourceMappingURL=theme-controller.d.ts.map

package/dist/orchestrator/theme-controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-controller.d.ts","sourceRoot":"","sources":["../../src/orchestrator/theme-controller.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAEtE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9C,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,MAAM,CAAC;AAI7C,qBAAa,eAAgB,YAAW,kBAAkB;IACxD,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAyB;IAE9C,OAAO,CAAC,QAAQ,CAAuB;IAEvC,OAAO,CAAC,UAAU,CAA+B;IAKjD,OAAO,CAAC,MAAM,CAAyB;IAEvC,YAAY,IAAI,EAAE,sBAAsB,EAGvC;IAED,IAAI,KAAK,IAAI,aAAa,CAEzB;IAED,WAAW,CAAC,QAAQ,EAAE,QAAQ,GAAG,SAAS,GAAG,IAAI,CAGhD;IAED,aAAa,IAAI,IAAI,CAEpB;IAED,gBAAgB,IAAI,IAAI,CAEvB;IAED,OAAO,CAAC,OAAO;IAcf,OAAO,CAAC,MAAM;IAMd,OAAO,CAAC,MAAM;IAMd,OAAO,CAAC,aAAa,CAInB;IAEF,OAAO,CAAC,MAAM;CAKf"}

package/dist/orchestrator/zitadel-login.d.ts

@@ -0,0 +1,182 @@
+import { type ZitadelProject } from "@zitadel/api/config";
+import type { CreateFlowBodyPurpose } from "@zitadel/api/generated/model";
+import { LitElement, type PropertyValues } from "lit";
+import "../atoms/index.js";
+import { type Locale } from "./locales/index.js";
+/**
+ * `<zitadel-login>` — the auth-UI orchestrator.
+ *
+ * Drives the typed `@zitadel/api` Flow API directly: `POST /flow`
+ * starts a flow, `POST /flow/{id}/submit` advances it. Renders each step
+ * through LiquidJS, sanitises the output via DOMPurify, and mounts the
+ * result inside a real `<form>` element in its Shadow DOM via Lit's
+ * `unsafeHTML` directive. Atom CustomEvents (`zl-input` / `zl-submit`)
+ * and the form's native `submit` event feed back into the
+ * submit cycle.
+ *
+ * Form participation: the orchestrator owns the `<form>` so Enter submits,
+ * browsers offer "save password" prompts, and password managers / autofill
+ * see a real form. Each `<zl-field>` is form-associated (see
+ * `docs/design/branding/form-participation.md`) so its value participates in
+ * the form even though it lives inside its own shadow root. The shadow root
+ * also delegates focus, and after each step swap focus moves to the first
+ * field so screen-reader and keyboard users land in a sensible spot.
+ *
+ * Session/state: the server is stateless between requests — a `_zflow`
+ * HttpOnly cookie carries orchestration state. We always run with
+ * `credentials: "include"` (set in `api-client.ts`). The flow handle (`id`)
+ * may rotate on pivots/pops; we re-read it from every response.
+ *
+ * Spec sources:
+ * - `docs/design/flowengine/flow-engine-guide.md`
+ * - `docs/design/branding/templates.md`
+ * - `docs/design/branding/tokens.md`
+ * - `docs/design/branding/schema.md`
+ * - `docs/design/branding/form-participation.md`
+ * - `docs/design/flowengine/template-security.md`
+ */
+export declare class ZitadelLogin extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult;
+    accessor purpose: CreateFlowBodyPurpose;
+    /**
+     * SDK project handle returned by `configureZitadel()`. When set, takes
+     * precedence over the global singleton from `getZitadelConfig()`.
+     */
+    accessor project: ZitadelProject | undefined;
+    /**
+     * URL to navigate to after a successful embedded sign-in. When set, the
+     * orchestrator exchanges the terminal `handoff_token` via the generated
+     * API client (setting the session cookie) and then performs a full
+     * navigation to this URL so host middleware can observe the cookie.
+     * For `complete: "redirect"` the orchestrator follows `redirect_uri`
+     * instead and does not run the exchange.
+     */
+    accessor postSignInUrl: string;
+    /**
+     * Existing flow handle to resume rather than start a new flow. When set,
+     * the orchestrator hits `GET /flow/{id}` instead of `POST /flow` on
+     * mount, so a page reload after a network blip can re-render the same
+     * step without losing collected state.
+     */
+    accessor resumeFlowId: string;
+    /**
+     * BCP 47 language tag (e.g. `"de"`, `"en-US"`). The widget resolves this
+     * to a built-in locale dictionary. Falls back to auto-detection from
+     * `document.documentElement.lang` or `navigator.language` when empty.
+     */
+    accessor lang: string;
+    /**
+     * Custom locale dictionaries keyed by language code. When set, these take
+     * precedence over the built-in dictionaries for matching language codes.
+     *
+     * ```ts
+     * import { en } from "@zitadel/components";
+     * const locales = {
+     *   en: { ...en, "identifier.title": "Welcome" },
+     *   de: myGermanDict,
+     * };
+     * ```
+     */
+    accessor locales: Record<string, Locale> | undefined;
+    private accessor response;
+    private accessor branding;
+    private accessor loading;
+    private accessor startupError;
+    private accessor formValues;
+    private readonly themeController;
+    private engine;
+    private readonly sanitise;
+    /**
+     * Cached compiled tenant template, keyed by source string. Re-rendering on
+     * every `formValues` change otherwise re-parses the same template.
+     */
+    private tenantTemplateCache;
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    /**
+     * Start the flow after the first render rather than in `connectedCallback`.
+     * Frameworks that wrap web components (e.g. `@lit/react` in the console)
+     * attach the element first and then assign object properties (`branding`,
+     * `locale`) via setters. `connectedCallback` runs synchronously on attach
+     * — before any setters from a wrapper's effects/refs — so reading those
+     * properties there sees stale defaults. `firstUpdated` runs after Lit's
+     * first render, by which time setters from the wrapping framework have
+     * fired.
+     */
+    protected firstUpdated(): void;
+    /**
+     * Resolves the effective locale dictionary. The built-in dictionary for the
+     * resolved language is used as the base; entries from the `locales` map (if
+     * set) are spread on top so partial overrides work without importing and
+     * spreading the full base dictionary.
+     */
+    private resolveLocale;
+    willUpdate(changed: PropertyValues<this>): void;
+    updated(changed: PropertyValues<this>): void;
+    render(): import("lit").TemplateResult<1>;
+    /**
+     * Inject the attribution badge into the rendered template's
+     * `<zl-page-shell>` footer slot. The attribution must live INSIDE the
+     * page-shell so it sits within the 100vh viewport rhythm (matching the
+     * Figma sign-in frame where the pill sits 24px below the card, both
+     * centred on the page). It can't be a sibling of the page-shell because
+     * the page-shell already occupies the full viewport height.
+     */
+    private injectAttribution;
+    /**
+     * "Secured with Zitadel" attribution chrome injected into every
+     * template's page-shell footer slot. Controlled by
+     * `branding.attribution.show_zitadel` — defaults to `true` for
+     * community / OSS deployments. Licensed tenants can suppress the badge
+     * entirely or swap it for a `custom_link` value.
+     */
+    private renderAttributionHtml;
+    private startFlow;
+    private applyResponse;
+    private maybeCompleteFlow;
+    private renderStep;
+    /**
+     * Build a `FlowIdentity` from the orchestrator's captured form values so
+     * the signed-in template can greet the user by email without the API
+     * having to round-trip identity claims. Email comes from the
+     * identifier step; display name composes from `given_name` /
+     * `family_name` when the register step ran.
+     */
+    private deriveIdentity;
+    private applyValuesToFields;
+    private handleAtomInput;
+    private handleAtomSubmit;
+    /** Secondary navigation rows (`data-action` on `.zl-card-nav__link`). */
+    private handleDelegatedAction;
+    private handleFormSubmit;
+    /**
+     * Handle a successful WebAuthn ceremony. Auto-submit with the proof
+     * as `challenge_response` so the flow advances without extra user
+     * interaction — the ceremony IS the factor verification (ADR 013).
+     */
+    private handlePasskeyResult;
+    /**
+     * Handle a WebAuthn ceremony error. Re-render the current step with
+     * an error message so the user sees feedback and can retry or skip.
+     *
+     * Guard: if the step already carries the same error key, skip the update.
+     * Mutating `this.response` triggers `unsafeHTML` to replace the DOM tree,
+     * which reconnects a fresh `<zl-passkey>` that immediately re-starts the
+     * ceremony — creating an infinite loop. The guard breaks the cycle.
+     *
+     * We also strip the `challenge` from the step so the template does not
+     * render a new `<zl-passkey>` on re-render. Without this, the first
+     * cancel would trigger a second ceremony (the guard prevents a third).
+     */
+    private handlePasskeyError;
+    private findPrimaryAction;
+    private moveFocusToFirstField;
+    private submit;
+    private handleTransportError;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "zitadel-login": ZitadelLogin;
+    }
+}
+//# sourceMappingURL=zitadel-login.d.ts.map

package/dist/orchestrator/zitadel-login.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"zitadel-login.d.ts","sourceRoot":"","sources":["../../src/orchestrator/zitadel-login.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,KAAK,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACpF,OAAO,KAAK,EAGV,qBAAqB,EAGtB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAa,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAKjE,OAAO,mBAAmB,CAAC;AAa3B,OAAO,EAAsB,KAAK,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAQrE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,iBAAiB,EAAE,cAAc,CAG/C;IAOF,OAAgB,MAAM,0BAMpB;IAE0B,QAAQ,CAAC,OAAO,EAAE,qBAAqB,CAAW;IAE9E;;;OAGG;IAC6B,QAAQ,CAAC,OAAO,EAAE,cAAc,GAAG,SAAS,CAAC;IAE7E;;;;;;;OAOG;IACwD,QAAQ,CAAC,aAAa,SAAM;IAEvF;;;;;OAKG;IACsD,QAAQ,CAAC,YAAY,SAAM;IAEpF;;;;OAIG;IACH,SAA8C,IAAI,SAAM;IAExD;;;;;;;;;;;OAWG;IAC6B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS,CAAC;IAE5E,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA8B;IAEvD,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAmC;IAE5D,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAS;IAEjC,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAuB;IAEpD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAA8B;IAElE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAA6B;IAE7D,OAAO,CAAC,MAAM,CAAuB;IAErC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAqB;IAE9C;;;OAGG;IACH,OAAO,CAAC,mBAAmB,CAAyD;IAE3E,gBAAgB,IAAI,WAAW,GAAG,gBAAgB,CA+B1D;IAED;;;;;;;;;OASG;IACH,UAAmB,YAAY,IAAI,IAAI,CAItC;IAED;;;;;OAKG;IACH,OAAO,CAAC,aAAa;IAUZ,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI,CAavD;IAEQ,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI,CAQpD;IAEQ,MAAM,oCAoBd;IAED;;;;;;;OAOG;IACH,OAAO,CAAC,iBAAiB;IASzB;;;;;;OAMG;IACH,OAAO,CAAC,qBAAqB;YAkBf,SAAS;IA+BvB,OAAO,CAAC,aAAa;YA0BP,iBAAiB;IAwC/B,OAAO,CAAC,UAAU;IAwDlB;;;;;;OAMG;IACH,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,mBAAmB;IAe3B,OAAO,CAAC,eAAe,CAYrB;IAEF,OAAO,CAAC,gBAAgB,CAGtB;IAEF,yEAAyE;IACzE,OAAO,CAAC,qBAAqB,CAO3B;IAEF,OAAO,CAAC,gBAAgB,CAatB;IAEF;;;;OAIG;IACH,OAAO,CAAC,mBAAmB,CAUzB;IAEF;;;;;;;;;;;;OAYG;IACH,OAAO,CAAC,kBAAkB,CAaxB;IAEF,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,qBAAqB;YAUf,MAAM;IA4CpB,OAAO,CAAC,oBAAoB;CAa7B;AAWD,OAAO,CAAC,MAAM,CAAC,CAAC;IACd,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}

package/dist/orchestrator/zitadel-logout.d.ts

@@ -0,0 +1,86 @@
+import { LitElement, nothing } from "lit";
+import { type ZitadelProject } from "@zitadel/api/config";
+/**
+ * `<zitadel-logout>` — orchestrator-tier element that lets the signed-in user
+ * sign out without touching the flow API.
+ *
+ * Reads the user's display name + email from the `__nextgen_display` cookie
+ * (set by the auth backend on sign-in), renders an avatar trigger with a
+ * dropdown that exposes a "Sign out" action, and calls the typed
+ * `endSession` operation in `@zitadel/api`
+ * (`GET /auth/end-session`). The server clears the session cookie via
+ * `Set-Cookie: Max-Age=0`; on success the element fires `zitadel-signout`
+ * and optionally navigates to `post-sign-out-url`.
+ *
+ * ## Template-slot mode
+ *
+ * When the consumer projects a `<template>` child the element renders the
+ * template's clone into its light DOM with `{{name}}`, `{{email}}`, and
+ * `{{initial}}` substituted. Any element with `data-action="logout"` inside
+ * the cloned template triggers the sign-out flow. This mirrors the
+ * placeholder `<nextgen-logout>`'s contract so existing markup keeps working.
+ *
+ * Default styles consume the `--zl-*` design tokens so tenant branding
+ * applies automatically — there is no hardcoded brand colour, radius, or
+ * shadow.
+ */
+export declare class ZitadelLogout extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * SDK project handle returned by `configureZitadel()`. When set, takes
+     * precedence over the global singleton from `getZitadelConfig()`.
+     */
+    accessor project: ZitadelProject | undefined;
+    /** URL to navigate to after a successful sign-out. */
+    accessor postSignOutUrl: string;
+    /**
+     * OIDC `client_id` to forward as a query parameter on the end-session
+     * request, mirroring the standard end-session contract. Optional —
+     * leaving this empty is fine when the backend can resolve the client
+     * from the session cookie alone.
+     */
+    accessor clientId: string;
+    private accessor displayName;
+    private accessor displayEmail;
+    private accessor open;
+    private accessor loading;
+    private accessor errorMessage;
+    private templateMode;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(): void;
+    /**
+     * Decodes the `__nextgen_display` cookie (base64-encoded JSON, set by the
+     * auth backend on sign-in) and populates `displayName` / `displayEmail`.
+     * A missing or malformed cookie is intentionally non-fatal — the dropdown
+     * still renders, just with empty values.
+     */
+    private readDisplayCookie;
+    private get initial();
+    /**
+     * Clones a consumer-supplied `<template>` into the light DOM, fills the
+     * `{{name}}`, `{{email}}`, and `{{initial}}` tokens via a TreeWalker, and
+     * wires every element with `data-action="logout"` to trigger sign-out.
+     * Light-DOM mounting is deliberate so the consumer's existing CSS applies.
+     */
+    private renderTemplate;
+    private readonly handleDocumentClick;
+    private readonly handleDocumentKeydown;
+    private toggleOpen;
+    private doLogout;
+    /**
+     * 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(): string;
+    private handleSignOutClick;
+    render(): typeof nothing | import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "zitadel-logout": ZitadelLogout;
+    }
+}
+//# sourceMappingURL=zitadel-logout.d.ts.map

package/dist/orchestrator/zitadel-logout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"zitadel-logout.d.ts","sourceRoot":"","sources":["../../src/orchestrator/zitadel-logout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AAErD,OAAO,EAA4B,KAAK,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAkBpF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BA2IpB;IAEF;;;OAGG;IAC6B,QAAQ,CAAC,OAAO,EAAE,cAAc,GAAG,SAAS,CAAC;IAE7E,sDAAsD;IACM,QAAQ,CAAC,cAAc,SAAM;IAEzF;;;;;OAKG;IACiD,QAAQ,CAAC,QAAQ,SAAM;IAElE,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAM;IAElC,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAM;IAEnC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAS;IAE9B,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAS;IAEjC,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAM;IAK5C,OAAO,CAAC,YAAY,CAAS;IAEpB,iBAAiB,IAAI,IAAI,CAajC;IAEQ,oBAAoB,IAAI,IAAI,CAIpC;IAEQ,OAAO,IAAI,IAAI,CAKvB;IAED;;;;;OAKG;IACH,OAAO,CAAC,iBAAiB;IAezB,OAAO,KAAK,OAAO,GAGlB;IAED;;;;;OAKG;IACH,OAAO,CAAC,cAAc;IAiBtB,OAAO,CAAC,QAAQ,CAAC,mBAAmB,CAIlC;IAEF,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAKpC;IAEF,OAAO,CAAC,UAAU;YAWJ,QAAQ;IAqCtB;;;;;OAKG;IACH,gBAAgB,IAAI,MAAM,CAQzB;IAED,OAAO,CAAC,kBAAkB;IAKjB,MAAM,qDAsEd;CACF;AA0BD,OAAO,CAAC,MAAM,CAAC,CAAC;IACd,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAC;KACjC;CACF"}