@zitadel/components 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 ZITADEL
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,346 @@
+# @zitadel/components
+
+Lit-based atomic web components and the `<zitadel-login>` orchestrator for the
+Zitadel auth UI.
+
+The package exports:
+
+- **Atoms** — `<zl-field>`, `<zl-button>`, `<zl-alert>`, `<zl-icon>`,
+  `<zl-pill>`, `<zl-card>`, `<zl-page-shell>`. Form-associated, accessible,
+  branding-aware Lit elements that map 1:1 to the flow API
+  field/action/error primitives and the Figma design system.
+- **Orchestrator** — `<zitadel-login>`. A single drop-in element that calls
+  the flow API, renders each step through a Liquid template, manages focus
+  and form submission, and applies branding/theme/locale.
+- **Tokens & manifests** — design tokens (`--zl-*` CSS custom properties), a
+  Liquid template registry, and per-atom manifests describing allowed
+  attributes/parts/events for sanitiser allowlists.
+
+It is consumed directly by tenants embedding the auth UI on their own pages
+and indirectly by the `apps/console` shell.
+
+## Status
+
+Pre-release substrate. APIs are stabilising alongside
+[`docs/design/branding/`](../../docs/design/branding/) and
+[`docs/design/flowengine/`](../../docs/design/flowengine/). Expect minor breaks
+until the first published version. See
+[`docs/design/branding/form-participation.md`](../../docs/design/branding/form-participation.md)
+for the form-association / accessibility decisions baked into every input atom.
+
+## Install
+
+```sh
+corepack pnpm add @zitadel/components
+```
+
+`lit`, `liquidjs`, and `dompurify` are peer/runtime deps and are intentionally
+externalised so npm consumers dedupe with their own copies.
+
+## Quickstart — drop on a page
+
+The 90% case: render the element, point the typed Flow API client at your
+backend, set a locale.
+
+```html
+<script type="module" src="@zitadel/components"></script>
+
+<zitadel-login id="login" purpose="login" project-id="proj_123"></zitadel-login>
+
+<script type="module">
+  import { setProxyPath } from '@zitadel/api/runtime/base-url';
+
+  setProxyPath('https://api.tenant.com');
+
+  const el = document.getElementById('login');
+  el.locale = await fetch('/i18n/en.json').then((r) => r.json());
+</script>
+```
+
+What `<zitadel-login>` handles for you:
+
+- `POST /flow` on mount, `POST /flow/{id}/submit` for every step, terminal
+  `redirect` / `show` honoured automatically.
+- Native `<form>` semantics: Enter submits, password managers see the inputs,
+  `<button type="submit">` works, browser autofill works.
+- Focus moved to the first field on every step change.
+- Branding tokens mapped to CSS variables on the shadow root.
+- Light/dark theme via `prefers-color-scheme`, hot-swappable.
+- Mandatory gates (terms, captcha) enforced before submit.
+- Output sanitised with DOMPurify against a per-atom allowlist before injection.
+- Stateless server: the `_zflow` HttpOnly cookie is the source of truth
+  between requests; every call runs with `credentials: "include"`.
+
+### React / Astro / Next
+
+Same element, lifted into JSX. Pass objects through `ref` rather than as
+attributes (web component properties are typed objects, not stringified
+attributes).
+
+```tsx
+import '@zitadel/components';
+import { setProxyPath } from '@zitadel/api/runtime/base-url';
+
+setProxyPath(import.meta.env.VITE_ZITADEL_API_BASE);
+
+export function Login({ locale }: Props) {
+  return (
+    <zitadel-login
+      purpose="login"
+      project-id="proj_123"
+      ref={(el) => {
+        if (!el) return;
+        el.locale = locale;
+      }}
+    />
+  );
+}
+```
+
+### Mocking for offline demos and tests
+
+The orchestrator calls the typed `@zitadel/api` fetch client
+directly — there is no transport abstraction to swap. Intercept at the
+network layer via the workspace-internal `@zitadel/api-mock`
+package, which walks an xstate flow machine through identifier →
+password → done (with register and SSO branches) using orval-typed step
+fixtures:
+
+- **Tests (`msw/node`)** — pass `setupMockHandlers()` from
+  `@zitadel/api-mock` into `setupServer(...)`.
+  `getCapturedRequests()` exposes captured request bodies for assertions.
+- **Dev playgrounds / browser (`msw/browser`)** — `setupMock(worker)`; see
+  [`dev/main.ts`](dev/main.ts) for a working setup. `applyBranding(...)`
+  injects a tenant branding overlay merged into every response (presets
+  include `font_url` for Inter).
+- **Framework demos (TCP server)** — `corepack pnpm nx start @zitadel/api-mock`
+  serves the same handlers on port 4000 with `defaultDevBranding` (Arimo
+  `font_url`) applied at boot. See [`apps/demo-next`](../../apps/demo-next/README.md)
+  and [`apps/demo-nuxt`](../../apps/demo-nuxt/README.md).
+
+### Two preview surfaces
+
+Two places run the components against `@zitadel/api-mock`. They
+have different jobs — keep both:
+
+| Surface | Nx command | URLs | What it gives you |
+| --- | --- | --- | --- |
+| **Lit playground** | `corepack pnpm nx dev @zitadel/components` | [login](http://localhost:5173/?route=login) · [atoms](http://localhost:5173/?route=atoms) | Component author surface: branding presets, event log, source TS from `src/`. MSW runs in the browser — no TCP mock server. |
+| **React console playground** | `corepack pnpm nx dev @zitadel/console` | [http://localhost:5174](http://localhost:5174) | `@zitadel/ui-react` atom matrices in the pre-release console shell. MSW in `import.meta.env.DEV`. Compare against Lit `:5173/?route=atoms` in a second tab. |
+| **demo-next** | `corepack pnpm nx start @zitadel/api-mock` + `ZITADEL_URL=http://localhost:4000 corepack pnpm nx dev @zitadel/demo-next` | [http://localhost:3002/login](http://localhost:3002/login) (mock on `:4000`) | Next.js SDK, middleware, cookies, built `dist/`. See [`apps/demo-next`](../../apps/demo-next/README.md). |
+| **demo-nuxt** | mock on `:4000`, then `ZITADEL_URL=http://localhost:4000 corepack pnpm nx dev @zitadel/demo-nuxt` | [http://localhost:3001/login](http://localhost:3001/login) | Nuxt SDK, middleware, cookies, built `dist/`. See [`apps/demo-nuxt`](../../apps/demo-nuxt/README.md). |
+
+The Lit dev playground iterates on `<zl-*>` source; the React console
+playground exercises `@zitadel/ui-react` in the internal shell.
+When tweaking Lit visuals or shadow-DOM behaviour, use `:5173` first —
+it round-trips faster. For React pair tweaks, use `:5174`.
+
+**Stale Lit styles on `:5173`?** Atom `.ts` changes use
+`vite-plugin-web-components-hmr` (Lit HMR). Edits to `shared-component-styles`
+CSS alone trigger a full reload. If it still looks old, run
+`corepack pnpm nx dev:clean @zitadel/components` and hard-refresh.
+Console (`:5174`) will not pick up Lit-only edits until you rebuild or
+change the paired React/CSS path.
+
+### Atoms-only (bypass the orchestrator)
+
+If you want a fully bespoke shell, use the atoms directly. You give up the
+template, transitions, and focus management; you keep the styled, accessible,
+form-associated inputs.
+
+```html
+<form id="login">
+  <zl-field name="email" label="Email" type="email" autocomplete="username" required></zl-field>
+  <zl-button hierarchy="primary" type="submit" action="submit" label="Continue" block></zl-button>
+</form>
+```
+
+## Customisation tiers
+
+| Tier | Surface | Use when |
+| --- | --- | --- |
+| API base | `setProxyPath()` from `@zitadel/api/runtime/base-url` | every consumer — points at your backend |
+| Tokens | branding payload returned from the server | tenant colour / logo / font |
+| CSS hooks | `zitadel-login::part(form)`, `zl-field::part(input)` | targeted overrides from the host page |
+| Locale | `el.locale = { ... }` | i18n / custom copy |
+| MSW mocks | `setupWorker` / `setupServer` from `msw` | offline / staging / fixtures |
+| Custom template | (planned) | tenant-supplied Liquid layouts |
+| Atoms-only | hand-built form | non-standard flow shells |
+
+The "Custom template" surface is not yet exposed on `<zitadel-login>`; the
+orchestrator currently uses the bundled `auth_form.liquid`. Tracked as a
+follow-up.
+
+## Element APIs
+
+### `<zitadel-login>`
+
+| Property | Type | Notes |
+| --- | --- | --- |
+| `purpose` | `'login' \| 'register' \| 'reset_password' \| string` | Which flow purpose to drive |
+| `projectId` / `project-id` | `string` | Project / tenant id sent with `POST /flow` |
+| `apiBase` / `api-base` | `string` | Optional declarative override for `setProxyPath()` |
+| `sessionExchangePath` / `session-exchange-path` | `string` | Handoff exchange path (default `/sessions/exchange`, prefixed with `api-base`). Any other value is resolved from `location.origin` instead — use when exchange is rewritten separately (e.g. `/api/auth/exchange`) |
+| `postSignInUrl` / `post-sign-in-url` | `string` | After `complete: "show"`, exchange the `handoff_token` at the configured exchange path and navigate here |
+| `resumeFlowId` / `resume-flow-id` | `string` | Resume an existing flow handle instead of starting fresh |
+| `locale` | `Record<string, string>` | i18n dictionary consumed by Liquid's `\| t` filter |
+
+Events: `zitadel-flow-input`, `zitadel-flow-action`, `zitadel-flow-step`,
+`zitadel-flow-complete`, `zitadel-flow-error`. The orchestrator exposes
+`::part(form)` for tenant-side CSS hooks. Adopts design tokens and
+`branding.font_url` into its shadow root on each update.
+
+### `<zitadel-logout>`
+
+Session menu / sign-out control for embedded apps. Reads the
+`__nextgen_display` cookie set during sign-in, calls `GET /auth/end-session`
+through `api-base`, and clears the session. Uses the same token adoption as
+`<zitadel-login>` (`applyBaseTokens` + optional `font_url` when hosted on a
+page without global tokens).
+
+| Property | Type | Notes |
+| --- | --- | --- |
+| `apiBase` / `api-base` | `string` | Proxied auth API prefix (e.g. `/__nextgen`) |
+| `postSignOutUrl` / `post-sign-out-url` | `string` | Navigate here after sign-out |
+| `clientId` / `client-id` | `string` | Optional OIDC client id forwarded to end-session |
+
+Supports a light-DOM `<template>` slot for a fully custom menu; default UI is
+the avatar trigger + dropdown.
+
+### `<zl-field>`
+
+Form-associated input. Participates in the parent `<form>`, supports validity
+state, restores on form reset, and forwards Enter to `form.requestSubmit()`.
+
+| Property | Type | Notes |
+| --- | --- | --- |
+| `name` | `string` | Form key |
+| `label` | `string` | Visible label (rendered above) |
+| `type` | `'text' \| 'email' \| 'password' \| ...` | Native input type |
+| `value` | `string` | Two-way bound; emits `zl-input` |
+| `placeholder`, `autocomplete`, `pattern` | `string` | Forwarded |
+| `required`, `disabled`, `invalid` | `boolean` | |
+| `error` | `string` | Custom validity message |
+
+Parts: `field`, `label`, `input`, `error`, `help`.
+
+### `<zl-button>`
+
+Single button atom covering the full Figma matrix:
+
+| Attribute | Values | Notes |
+| --- | --- | --- |
+| `hierarchy` | `primary \| secondary \| text` | Visual rank |
+| `size` | `medium \| small` | Figma surface sizes |
+| `type` | `submit \| button` | When `submit`, takes part in the host `<form>` |
+| `action` | `string` | Forwarded with the `zl-submit` CustomEvent |
+| `loading`, `disabled`, `block` | `boolean` | |
+| `label` | `string` | Convenience text; default slot is also supported |
+
+Emits `zl-submit` for both primary submits and secondary navigations — the
+orchestrator switches on `type`/`action` to decide whether to advance the flow
+or just notify.
+
+### `<zl-alert>`
+
+Inline status message for the four Figma severities (`error \| success \|
+warning \| info`). Renders the matching icon automatically; supports an
+optional `heading` and default-slot body.
+
+### `<zl-icon>` / `<zl-pill>` / `<zl-card>` / `<zl-page-shell>`
+
+Pure presentational atoms — icons render from a curated inline-SVG sprite,
+pills carry the "Secured with Zitadel" attribution chip (and any tenant
+alternative), and `<zl-card>` + `<zl-page-shell>` build the auth-screen
+chrome from design tokens.
+
+See [`src/atoms/`](src/atoms) for full TypeScript types and JSDoc.
+
+## Project layout
+
+```
+packages/components/
+├── dev/                   Vite playground (atoms + login routes)
+│   ├── index.html
+│   ├── main.ts            bootstraps @zitadel/api-mock + MSW worker
+│   ├── branding-presets.ts tenant-style branding payloads
+│   └── pages/             atom playground + <zitadel-login> demo
+├── src/
+│   ├── atoms/             zl-field, zl-button, zl-alert, zl-icon, zl-pill,
+│   │                       zl-card, zl-page-shell + tests
+│   ├── orchestrator/      <zitadel-login>, <zitadel-logout>, api-client, liquid, branding
+│   │   ├── locales/       bundled English fallback
+│   │   └── templates/     auth-form / passkey-upsell / signed-in liquid partials
+│   ├── tokens/            re-export of @zitadel/design-tokens
+│   ├── styles/            shared host styles, focus ring, t() css-var bridge
+│   ├── manifests.ts       per-atom attribute / part / event manifests
+│   └── index.ts           barrel
+├── tsdown.config.ts       library build (externalises lit/liquidjs/dompurify)
+├── vite.config.mts        dev server
+└── vitest.config.ts       jsdom (unit) + chromium (browser) projects
+```
+
+## Develop
+
+Use **Nx** for tasks in this monorepo (`corepack pnpm nx <target> <project>`).
+It matches CI caching and dependency order. Equivalent `pnpm --filter …` scripts
+still exist on some packages, but Nx is the documented path.
+
+```sh
+# install once at the repo root
+corepack pnpm install
+
+# --- Playgrounds (two terminals) ---
+
+# Lit: atoms + login, in-browser MSW
+corepack pnpm nx dev @zitadel/components
+# → http://localhost:5173/?route=login
+# → http://localhost:5173/?route=atoms
+
+# React console: ui-react atom playground (compare to Lit ?route=atoms in another tab)
+corepack pnpm nx dev @zitadel/console
+# → http://localhost:5174
+
+# Framework demos (TCP mock + SDK) — see apps/demo-*/README.md
+# corepack pnpm nx start @zitadel/api-mock   # → http://localhost:4000
+# ZITADEL_URL=http://localhost:4000 corepack pnpm nx dev @zitadel/demo-next  # → :3002
+# ZITADEL_URL=http://localhost:4000 corepack pnpm nx dev @zitadel/demo-nuxt  # → :3001
+
+# --- Package checks ---
+
+corepack pnpm nx test @zitadel/components
+corepack pnpm nx test:browser @zitadel/components
+corepack pnpm nx typecheck @zitadel/components
+corepack pnpm nx build @zitadel/components
+```
+
+The components dev server imports source TS from `src/` and hot-reloads on edits.
+Run `build` when testing the published `dist/` shape (demos and npm consumers).
+
+**Framework demos** need the TCP mock plus a rebuild after orchestrator changes —
+see [`apps/demo-next/README.md`](../../apps/demo-next/README.md) and
+[`apps/demo-nuxt/README.md`](../../apps/demo-nuxt/README.md).
+
+## Testing strategy
+
+Tests are split across two Vitest projects:
+
+- **`unit`** — `jsdom`, fast feedback for rendering, Liquid wiring, branding
+  validation, sanitiser allowlists, and DOM-level a11y attributes.
+- **`browser`** — real Chromium via Playwright, covers behaviour `jsdom` can't
+  fake: `ElementInternals` / form-associated state, native form submit
+  interception, focus delegation across shadow roots.
+
+Files ending in `.browser.spec.ts` run only in the browser project; everything
+else runs in jsdom.
+
+## Related design docs
+
+- [`docs/design/branding/`](../../docs/design/branding/) — token spec, theme,
+  template chrome, **and the form-participation ADR**.
+- [`docs/design/flowengine/`](../../docs/design/flowengine/) — flow engine,
+  step shape, template security, visualizer.
+
+## License
+
+MIT — see [LICENSE](../../LICENSE).

package/dist/atoms/index.d.mts

@@ -0,0 +1,2 @@
+import { Bt as zlAlertManifest, Ft as ZlCard, Ht as ZlIcon, It as zlCardManifest, Lt as ZlButton, Rt as zlButtonManifest, Ut as zlIconManifest, Vt as IconName, a as ZlPasskeyResultDetail, c as zlPageShellManifest, d as zlFieldManifest, i as ZlPasskeyErrorDetail, l as ZlField, n as zlPillManifest, o as zlPasskeyManifest, r as ZlPasskey, s as ZlPageShell, t as ZlPill, u as ZlFieldType, zt as ZlAlert } from "../index-DIUFZjXw.mjs";
+export { IconName, ZlAlert, ZlButton, ZlCard, ZlField, ZlFieldType, ZlIcon, ZlPageShell, ZlPasskey, ZlPasskeyErrorDetail, ZlPasskeyResultDetail, ZlPill, zlAlertManifest, zlButtonManifest, zlCardManifest, zlFieldManifest, zlIconManifest, zlPageShellManifest, zlPasskeyManifest, zlPillManifest };

package/dist/atoms/index.d.ts

@@ -0,0 +1,9 @@
+export { ZlAlert, zlAlertManifest } from "./zl-alert.js";
+export { ZlButton, zlButtonManifest } from "./zl-button.js";
+export { ZlCard, zlCardManifest } from "./zl-card.js";
+export { ZlField, zlFieldManifest, type ZlFieldType } from "./zl-field.js";
+export { ZlIcon, zlIconManifest, type IconName } from "./zl-icon.js";
+export { ZlPageShell, zlPageShellManifest } from "./zl-page-shell.js";
+export { ZlPasskey, zlPasskeyManifest, type ZlPasskeyResultDetail, type ZlPasskeyErrorDetail } from "./zl-passkey.js";
+export { ZlPill, zlPillManifest } from "./zl-pill.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/atoms/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/atoms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,KAAK,QAAQ,EAAE,MAAM,cAAc,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,KAAK,qBAAqB,EAAE,KAAK,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AACtH,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC"}

package/dist/atoms/index.mjs

@@ -0,0 +1,2 @@
+import { a as ZlPageShell, c as zlFieldManifest, d as ZlButton, f as zlButtonManifest, g as zlIconManifest, h as ZlIcon, i as zlPasskeyManifest, l as ZlCard, m as zlAlertManifest, n as zlPillManifest, o as zlPageShellManifest, p as ZlAlert, r as ZlPasskey, s as ZlField, t as ZlPill, u as zlCardManifest } from "../atoms-CmOTltTH.mjs";
+export { ZlAlert, ZlButton, ZlCard, ZlField, ZlIcon, ZlPageShell, ZlPasskey, ZlPill, zlAlertManifest, zlButtonManifest, zlCardManifest, zlFieldManifest, zlIconManifest, zlPageShellManifest, zlPasskeyManifest, zlPillManifest };

package/dist/atoms/zl-alert.d.ts

@@ -0,0 +1,56 @@
+import { LitElement } from "lit";
+import type { AtomManifest } from "../manifest.js";
+import "./zl-icon.js";
+/**
+ * Atom: `<zl-alert>` — inline status message replacing the legacy
+ * `<zl-error>`.
+ *
+ * Spec lineage (file `8UjCXw8yemgljmbkWGrSfE`):
+ *   - design-system master: node `6593:2640` (Alert/Error). Screen instance
+ *     `6596:132779` matches the same chrome. Severity is conveyed by icon
+ *     shape and colour, not by tinting the background.
+ *
+ * Per-state Figma values:
+ *
+ *   Layout
+ *     surface     bg surface.default-primary-gray (#252528), no border
+ *     padding     16px (spacing-03)
+ *     gap         16px between icon and content
+ *     radius      12px (radius.m)
+ *     shadow      0 1px 2px rgba(16,24,40,0.05) (shadow-xs)
+ *
+ *   Icon (16px)
+ *     error       alert-circle, color text.error (#ea4f70)
+ *     warning     alert-circle, color text.subtitle-orange (#f25543)
+ *     success     check, color text.success (#33a779)
+ *     info        info, color text.subtitle-gray (#bfbfcf)
+ *
+ *   Text
+ *     heading     Arimo SemiBold 14/20, color text.button-invert (#f4f4f6)
+ *     body        Arimo Regular 14/20, color text.button-invert
+ *     gap (heading→body)  4px (spacing-01)
+ *
+ *   Close button (when dismissible)
+ *     36 × 36 hit target, padding 8px, radius 8px (radius.s)
+ *     icon `cross` at 20px, color text.secondary-gray
+ *     placed at the end of the flex row (icon · content · close)
+ *
+ * Templates render one per step when the flow returns errors; the
+ * orchestrator surfaces flow-level errors through `errors` in the Liquid
+ * context.
+ */
+export declare class ZlAlert extends LitElement {
+    static styles: import("lit").CSSResult[];
+    accessor severity: "error" | "success" | "warning" | "info";
+    accessor heading: string | undefined;
+    accessor dismissible: boolean;
+    render(): import("lit").TemplateResult<1>;
+    private handleDismiss;
+}
+export declare const zlAlertManifest: AtomManifest;
+declare global {
+    interface HTMLElementTagNameMap {
+        "zl-alert": ZlAlert;
+    }
+}
+//# sourceMappingURL=zl-alert.d.ts.map

package/dist/atoms/zl-alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"zl-alert.d.ts","sourceRoot":"","sources":["../../src/atoms/zl-alert.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGnD,OAAO,cAAc,CAAC;AAGtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,4BAGpB;IAE2B,QAAQ,CAAC,QAAQ,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAW;IAEvF,QAAQ,CAAC,OAAO,EAAE,MAAM,GAAG,SAAS,CAAa;IAEjB,QAAQ,CAAC,WAAW,UAAS;IAEhE,MAAM,oCA6Bd;IAED,OAAO,CAAC,aAAa,CAKnB;CACH;AASD,eAAO,MAAM,eAAe,EAAE,YAMpB,CAAC;AAEX,OAAO,CAAC,MAAM,CAAC,CAAC;IACd,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/atoms/zl-button.d.ts

@@ -0,0 +1,83 @@
+import { LitElement } from "lit";
+import type { AtomManifest } from "../manifest.js";
+import "./zl-icon.js";
+/**
+ * Atom: `<zl-button>` — the entire Figma button matrix in a single atom.
+ *
+ * Spec lineage (file `8UjCXw8yemgljmbkWGrSfE`, "Zitadel - Design System - External"):
+ *   - master variant set: node `6598:292`
+ *   - icon-leading instance reference: node `6598:143281` (passkey upsell)
+ *
+ * Variant axes (matches Figma directly):
+ *   - hierarchy: primary | secondary | text
+ *   - size:      medium (48 × auto) | small (40 × auto)
+ *   - state:     enabled / hovered / focused / pressed / disabled
+ *                (derived from interaction, not props)
+ *   - slots:     `leading` icon, `trailing` icon, default for the label.
+ *                When `loading` is set the trailing slot is replaced with a
+ *                spinning ring (Figma shows the spinner trailing).
+ *
+ * Per-state Figma values (resolved from `figma.tokens.json` primitives):
+ *
+ *   Primary
+ *     enabled        bg=#f4f4f6 (surface.default-white)     fg=#0f0f11   border=transparent
+ *     hover/pressed  bg=#cfcfde (gray.600)                  fg=#0f0f11   border=1px #252528
+ *     focus-visible  bg=#cfcfde + native outline ring
+ *     disabled       bg=#f4f4f6                             fg=#686883 (text.disabled)
+ *
+ *   Secondary
+ *     enabled        bg=#252528 (border.default-black)      fg=#f4f4f6 (text.button-invert)
+ *     hover/pressed  bg=#484a57 (gray.200)                  fg=#f4f4f6
+ *     focus-visible  bg=#252528 + native outline ring       fg=#f4f4f6
+ *     disabled       bg=#252528                             fg=#686883
+ *
+ *   Text
+ *     enabled        bg=transparent                         fg=#f4f4f6
+ *     hover/pressed  bg=#484a57                             fg=#f4f4f6
+ *     focus-visible  bg=#252528 + native outline ring       fg=#f4f4f6
+ *     disabled       bg=transparent                         fg=#686883
+ *
+ *   Common
+ *     padding        10px (block) / 16px (inline)            radius=8px
+ *     gap            8px between icon/label/icon
+ *     font           Arimo SemiBold (600)
+ *                    medium: 16/24    small: 14/20
+ *     icon          24px medium, 16px small
+ *     focus ring    2px solid #f4f4f6, 2px offset
+ *     transition    background-color / color / border-color, fast standard
+ *
+ * Form-associated so it can participate in the orchestrator's `<form>`
+ * exactly like a native `<button>`. Setting `type="submit"` triggers
+ * `form.requestSubmit()` on click; setting `type="reset"` calls
+ * `form.reset()`. Otherwise the click event bubbles for SPA listeners.
+ *
+ * The atom always renders a real `<button>` inside the shadow root —
+ * `delegatesFocus` ensures Tab lands on it and `<zl-field>`'s
+ * Enter-to-submit pipe still fires the host form.
+ */
+export declare class ZlButton extends LitElement {
+    static formAssociated: boolean;
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    accessor hierarchy: "primary" | "secondary" | "text";
+    accessor size: "medium" | "small";
+    accessor type: "button" | "submit" | "reset";
+    accessor action: string | undefined;
+    accessor loading: boolean;
+    accessor disabled: boolean;
+    accessor block: boolean;
+    accessor label: string | undefined;
+    private readonly internals;
+    constructor();
+    focus(options?: FocusOptions): void;
+    private surfaceClasses;
+    render(): import("lit").TemplateResult<1>;
+    private handleClick;
+}
+export declare const zlButtonManifest: AtomManifest;
+declare global {
+    interface HTMLElementTagNameMap {
+        "zl-button": ZlButton;
+    }
+}
+//# sourceMappingURL=zl-button.d.ts.map

package/dist/atoms/zl-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"zl-button.d.ts","sourceRoot":"","sources":["../../src/atoms/zl-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAMhD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGnD,OAAO,cAAc,CAAC;AAEtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,MAAM,CAAC,cAAc,UAAQ;IAE7B,OAAgB,iBAAiB,EAAE,cAAc,CAG/C;IAEF,OAAgB,MAAM,4BAGpB;IAE2B,QAAQ,CAAC,SAAS,EAAE,SAAS,GAAG,WAAW,GAAG,MAAM,CAAa;IAEjE,QAAQ,CAAC,IAAI,EAAE,QAAQ,GAAG,OAAO,CAAY;IAE9D,QAAQ,CAAC,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;IAExD,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAa;IAE/B,QAAQ,CAAC,OAAO,UAAS;IAEV,QAAQ,CAAC,QAAQ,UAAS;IAE1B,QAAQ,CAAC,KAAK,UAAS;IAEvD,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAa;IAE3D,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAmB;IAE7C,cAGC;IAEQ,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI,CAE3C;IAED,OAAO,CAAC,cAAc;IAYb,MAAM,oCAyBd;IAED,OAAO,CAAC,WAAW,CAuBjB;CACH;AAED,eAAO,MAAM,gBAAgB,EAAE,YAOrB,CAAC;AAEX,OAAO,CAAC,MAAM,CAAC,CAAC;IACd,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/atoms/zl-card.d.ts

@@ -0,0 +1,46 @@
+import { LitElement } from "lit";
+import type { AtomManifest } from "../manifest.js";
+/**
+ * Atom: `<zl-card>` — the auth-card surface used by every flow screen.
+ *
+ * Spec lineage (file `xkvBjkOJ8ENuHdTGZHXezK`):
+ *   - sign-in: node `6593:141985` (combined sign-in card, 32px gap)
+ *   - sign-up: node `6593:141743` / frame `6593:141741` (title only, 32px gap)
+ *   - passkey-upsell: node `6594:632` (288h, heading+subtitle, 24px gap)
+ *   - signed-in: node `6596:132846` (272h, heading+subtitle, 24px gap)
+ *
+ * Per-state Figma values (constant across all four screens unless noted):
+ *
+ *   width       384px fixed (container.auth-card token; xs collapses
+ *               to full-width via the surrounding page-shell)
+ *   background  transparent — the page (surface.default-black) shows
+ *               through; the card is *not* an elevated surface, only
+ *               outlined
+ *   border      1px solid surface.default-primary-gray (#252528)
+ *   radius      16px (radius.l)
+ *   padding     32px all sides (spacing-05)
+ *   gap         32px between header / body / footer slots (sign-in,
+ *               sign-up). Passkey-upsell + signed-in tighten to 24px
+ *               (spacing-04) via `compact` because their heading group
+ *               carries a subtitle.
+ *
+ *   Internal slot gaps:
+ *     header    8px (spacing-02) — heading → subtitle stack
+ *     body      16px (spacing-03) — fields/buttons stack (matches
+ *               Figma "Field+CTAs" gap)
+ *     footer    8px (spacing-02) — auxiliary links
+ */
+export declare class ZlCard extends LitElement {
+    static styles: import("lit").CSSResult[];
+    accessor compact: boolean;
+    render(): import("lit").TemplateResult<1>;
+    /** Slotted nodes are always light-DOM children of the host in our templates. */
+    private lightDomSlotFilled;
+}
+export declare const zlCardManifest: AtomManifest;
+declare global {
+    interface HTMLElementTagNameMap {
+        "zl-card": ZlCard;
+    }
+}
+//# sourceMappingURL=zl-card.d.ts.map

package/dist/atoms/zl-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"zl-card.d.ts","sourceRoot":"","sources":["../../src/atoms/zl-card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,qBACa,MAAO,SAAQ,UAAU;IACpC,OAAgB,MAAM,4BAA6D;IAEvC,QAAQ,CAAC,OAAO,UAAS;IAE5D,MAAM,oCAmBd;IAED,gFAAgF;IAChF,OAAO,CAAC,kBAAkB;CAM3B;AAED,eAAO,MAAM,cAAc,EAAE,YAMnB,CAAC;AAEX,OAAO,CAAC,MAAM,CAAC,CAAC;IACd,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/dist/atoms/zl-field.d.ts

@@ -0,0 +1,73 @@
+import type { CreateFlow201StepFieldsType } from "@zitadel/api/generated/model";
+import { LitElement, type PropertyValues } from "lit";
+import type { AtomManifest } from "../manifest.js";
+import "./zl-icon.js";
+/**
+ * Alias of the orval-generated wire enum for field types so the atom's
+ * accepted `type` values track the API contract exactly.
+ */
+export type ZlFieldType = CreateFlow201StepFieldsType;
+/**
+ * Atom: `<zl-field>` — labelled input bound to a step `field`. Visual
+ * spec lineage:
+ *   - design-system master variant set: node `4390:1404` (file
+ *     `8UjCXw8yemgljmbkWGrSfE`) — Enabled / Hovered / Focused / Filled /
+ *     Disabled / Error / Success / Password forgot
+ *
+ * Per-state Figma values (master `4390:1404`):
+ *
+ *   Layout
+ *     root         flex-column, gap=8px (spacing-02)
+ *     label row    optional "Forgot password?" link (#bba5e4, 14/20)
+ *     input-wrap   40px, padding 8/16, trailing icon at right 15px
+ *     trailing     cross (clear) | alert-circle (error) | check (success)
+ *
+ * Form participation: `<zl-field>` is a form-associated custom element.
+ */
+export declare class ZlField extends LitElement {
+    static formAssociated: boolean;
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    accessor name: string;
+    accessor label: string;
+    accessor type: ZlFieldType;
+    accessor value: string;
+    accessor placeholder: string;
+    accessor autocomplete: string | undefined;
+    accessor pattern: string | undefined;
+    accessor error: string;
+    accessor success: string;
+    accessor forgotPasswordHref: string | undefined;
+    accessor forgotPasswordLabel: string;
+    accessor trailingIcon: boolean;
+    accessor required: boolean;
+    accessor disabled: boolean;
+    accessor invalid: boolean;
+    private accessor hasHelp;
+    private accessor hasSuffixSlot;
+    private readonly inputId;
+    private readonly internals;
+    constructor();
+    connectedCallback(): void;
+    willUpdate(changed: PropertyValues<this>): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string | null): void;
+    focus(options?: FocusOptions): void;
+    render(): import("lit").TemplateResult<1>;
+    private renderLabelRow;
+    private renderTrailingIcon;
+    private syncFormState;
+    private handleHelpSlotChange;
+    private handleSuffixSlotChange;
+    private handleClear;
+    private handleInput;
+    private handleChange;
+    private handleKeyDown;
+}
+export declare const zlFieldManifest: AtomManifest;
+declare global {
+    interface HTMLElementTagNameMap {
+        "zl-field": ZlField;
+    }
+}
+//# sourceMappingURL=zl-field.d.ts.map