@zitadel/components 0.0.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"zl-field.d.ts","sourceRoot":"","sources":["../../src/atoms/zl-field.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,8BAA8B,CAAC;AAChF,OAAO,EAAE,UAAU,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAOrE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGnD,OAAO,cAAc,CAAC;AAGtB;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,2BAA2B,CAAC;AAEtD;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,MAAM,CAAC,cAAc,UAAQ;IAE7B,OAAgB,iBAAiB,EAAE,cAAc,CAG/C;IAEF,OAAgB,MAAM,4BAGpB;IAEU,QAAQ,CAAC,IAAI,SAAM;IACnB,QAAQ,CAAC,KAAK,SAAM;IACpB,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAU;IACpC,QAAQ,CAAC,KAAK,SAAM;IACpB,QAAQ,CAAC,WAAW,SAAM;IAC1B,QAAQ,CAAC,YAAY,EAAE,MAAM,GAAG,SAAS,CAAa;IACtD,QAAQ,CAAC,OAAO,EAAE,MAAM,GAAG,SAAS,CAAa;IACjD,QAAQ,CAAC,KAAK,SAAM;IACpB,QAAQ,CAAC,OAAO,SAAM;IACe,QAAQ,CAAC,kBAAkB,EAAE,MAAM,GAAG,SAAS,CACpF;IACsC,QAAQ,CAAC,mBAAmB,SACzD;IACoC,QAAQ,CAAC,YAAY,UAAQ;IACzD,QAAQ,CAAC,QAAQ,UAAS;IACX,QAAQ,CAAC,QAAQ,UAAS;IAC1B,QAAQ,CAAC,OAAO,UAAS;IAE5D,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAS;IACjC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAS;IAEhD,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAuB;IAC/C,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAmB;IAE7C,cAGC;IAEQ,iBAAiB,IAAI,IAAI,CAGjC;IAEQ,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI,CAIvD;IAED,iBAAiB,IAAI,IAAI,CAExB;IAED,wBAAwB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAEnD;IAEQ,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI,CAE3C;IAEQ,MAAM,oCA2Ed;IAED,OAAO,CAAC,cAAc;IA6BtB,OAAO,CAAC,kBAAkB;IAqC1B,OAAO,CAAC,aAAa;IAWrB,OAAO,CAAC,oBAAoB,CAG1B;IAEF,OAAO,CAAC,sBAAsB,CAG5B;IAEF,OAAO,CAAC,WAAW,CAWjB;IAEF,OAAO,CAAC,WAAW,CAUjB;IAEF,OAAO,CAAC,YAAY,CAIlB;IAEF,OAAO,CAAC,aAAa,CAenB;CACH;AAED,eAAO,MAAM,eAAe,EAAE,YAmCpB,CAAC;AAEX,OAAO,CAAC,MAAM,CAAC,CAAC;IACd,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

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

@@ -0,0 +1,48 @@
+import { LitElement } from "lit";
+import type { AtomManifest } from "../manifest.js";
+/**
+ * Atom: `<zl-icon>` — renders a curated glyph from the Lucide icon library.
+ *
+ * The Figma design system (file `8UjCXw8yemgljmbkWGrSfE`, Icons set
+ * `4103:10466`, sizes `16 | 24`) is explicitly built on Lucide. Rather than redrawing every glyph as an
+ * inline `<path>` (which inevitably drifts), we curate the auth surface's
+ * subset by importing each canonical Lucide node and exposing a stable
+ * kebab-case `name` API. To add a glyph: import it from `lucide`, add an
+ * entry to {@link ICON_NODES}, and extend the {@link IconName} union.
+ *
+ * Colour: by default the icon inherits `currentColor`. Set `tone` to one
+ * of the semantic states to pick up `--zl-color-icon-{error|success|disabled}`
+ * directly. The "palette" colour tokens (`--zl-color-icon-default-*`) are
+ * not exposed as `tone` values; consumers wanting those set `color:` on
+ * the host.
+ *
+ * Accessibility: glyphs with an entry in {@link DEFAULT_LABELS} expose an
+ * `aria-label` so they're meaningful when used standalone. When the icon
+ * is purely decorative (e.g. sitting next to a visible button label),
+ * pass `decorative` to force `aria-hidden="true"` and `role="presentation"`,
+ * which prevents the icon's name from leaking into the parent's
+ * accessible name (e.g. avoids "Loading Loading" on a loading button).
+ */
+export declare class ZlIcon extends LitElement {
+    static styles: import("lit").CSSResult[];
+    accessor name: IconName;
+    accessor size: IconSize;
+    accessor tone: IconTone;
+    accessor spin: boolean;
+    accessor decorative: boolean;
+    accessor label: string | undefined;
+    render(): import("lit").TemplateResult<1>;
+}
+/** Public, kebab-case glyph IDs. Add a new one by extending both this union and {@link ICON_NODES}. */
+export type IconName = "plus" | "arrow-right" | "arrow-left" | "spinner" | "check" | "cross" | "warning" | "alert-circle" | "info" | "passkey" | "user" | "eye" | "eye-off";
+/** Auth-surface glyph list — keep playgrounds and parity tests in sync. */
+export declare const SHIPPED_ICON_NAMES: readonly ["plus", "arrow-right", "arrow-left", "spinner", "check", "cross", "warning", "alert-circle", "info", "passkey", "user", "eye", "eye-off"];
+export type IconSize = "16" | "24";
+export type IconTone = "default" | "error" | "success" | "disabled";
+export declare const zlIconManifest: AtomManifest;
+declare global {
+    interface HTMLElementTagNameMap {
+        "zl-icon": ZlIcon;
+    }
+}
+//# sourceMappingURL=zl-icon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"zl-icon.d.ts","sourceRoot":"","sources":["../../src/atoms/zl-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAuBhD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGnD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBACa,MAAO,SAAQ,UAAU;IAEpC,OAAgB,MAAM,4BAAwC;IAElD,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAU;IAEhB,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAQ;IAE/B,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAa;IAErB,QAAQ,CAAC,IAAI,UAAS;IAEtB,QAAQ,CAAC,UAAU,UAAS;IAE5D,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAa;IAElD,MAAM,oCA0Bd;CACF;AAED,uGAAuG;AACvG,MAAM,MAAM,QAAQ,GAChB,MAAM,GACN,aAAa,GACb,YAAY,GACZ,SAAS,GACT,OAAO,GACP,OAAO,GACP,SAAS,GACT,cAAc,GACd,MAAM,GACN,SAAS,GACT,MAAM,GACN,KAAK,GACL,SAAS,CAAC;AAEd,2EAA2E;AAC3E,eAAO,MAAM,kBAAkB,qJAcS,CAAC;AAEzC,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnC,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CAAC;AAoDpE,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-page-shell.d.ts

@@ -0,0 +1,42 @@
+import { LitElement } from "lit";
+import type { AtomManifest } from "../manifest.js";
+/**
+ * Atom: `<zl-page-shell>` — the full-bleed auth-page chrome the
+ * orchestrator injects around every flow template. Responsible for the
+ * dark background, vertical centring, responsive padding, and footer
+ * attribution slot.
+ *
+ * Spec lineage (file `xkvBjkOJ8ENuHdTGZHXezK`):
+ *   - 2xl frames (1536 × 960), e.g. sign-up `6593:141741`, passkey
+ *     `6594:630`, signed-in `6596:132844`. The outer wrapper uses
+ *     `py-[52px]` (vertical padding) with `p-[16px]` (spacing-03) on
+ *     the inner Form container, giving 52px / 16px at 2xl.
+ *
+ * Per-state Figma values:
+ *
+ *   background  surface.default-black (#0f0f11)
+ *   color       text.primary-white (#f4f4f6) inherited
+ *   min-height  100vh — anchors footer to the viewport bottom even on
+ *               short cards
+ *   padding @md+   padding-block 52px, padding-inline 16px (matches
+ *               Figma 2xl wrapper). 52px isn't a token; use raw value.
+ *   padding @xs (< 48rem)
+ *               padding-block 32px (spacing-05), padding-inline 16px
+ *               (spacing-03) — tighter so the card breathes on
+ *               narrow phones.
+ *   gap         24px (spacing-04) between header / main / footer slots
+ *   footer      min-height 1.5rem to reserve room for the attribution
+ *               pill even when the slot is empty (prevents jitter).
+ */
+export declare class ZlPageShell extends LitElement {
+    static styles: import("lit").CSSResult[];
+    render(): import("lit").TemplateResult<1>;
+    private lightDomSlotFilled;
+}
+export declare const zlPageShellManifest: AtomManifest;
+declare global {
+    interface HTMLElementTagNameMap {
+        "zl-page-shell": ZlPageShell;
+    }
+}
+//# sourceMappingURL=zl-page-shell.d.ts.map

package/dist/atoms/zl-page-shell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"zl-page-shell.d.ts","sourceRoot":"","sources":["../../src/atoms/zl-page-shell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGnD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,4BAGpB;IAEO,MAAM,oCAsBd;IAED,OAAO,CAAC,kBAAkB;CAM3B;AAED,eAAO,MAAM,mBAAmB,EAAE,YAMxB,CAAC;AAEX,OAAO,CAAC,MAAM,CAAC,CAAC;IACd,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}

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

@@ -0,0 +1,118 @@
+import { LitElement } from "lit";
+import type { AtomManifest } from "../manifest.js";
+/**
+ * Detail shape emitted by the `zl-passkey-result` event.
+ *
+ * Mirrors the `passkey-proof.yaml` schema (serialized PublicKeyCredential)
+ * plus the `challenge_id` the orchestrator needs for the submit body.
+ */
+export type ZlPasskeyResultDetail = {
+    challenge_id: string;
+    method: "passkey";
+    proof: {
+        id: string;
+        rawId: string;
+        type: "public-key";
+        response: {
+            clientDataJSON: string;
+            attestationObject?: string;
+            authenticatorData?: string;
+            signature?: string;
+            userHandle?: string;
+        };
+        authenticatorAttachment?: "platform" | "cross-platform";
+    };
+};
+/**
+ * Detail shape emitted by the `zl-passkey-error` event.
+ */
+export type ZlPasskeyErrorDetail = {
+    challenge_id: string;
+    error: string;
+    aborted: boolean;
+};
+/**
+ * Atom: `<zl-passkey>` — invisible WebAuthn ceremony handler.
+ *
+ * This component is intentionally invisible. It is mounted by the Liquid
+ * template when `step.challenge.type === "passkey"`. On mount, it reads
+ * the challenge options from attributes, triggers the appropriate
+ * `navigator.credentials` ceremony, and emits the result.
+ *
+ * The orchestrator listens for `zl-passkey-result` to auto-submit the
+ * proof via `challenge_response` on the flow submit body.
+ *
+ * Two modes:
+ * - `ceremony="authenticate"` → `navigator.credentials.get()` (login)
+ * - `ceremony="register"` → `navigator.credentials.create()` (registration)
+ *
+ * The options are passed as a JSON string via the `options` attribute (or
+ * as a JS object via the `.options` property). These are the
+ * `PublicKeyCredentialRequestOptions` or `PublicKeyCredentialCreationOptions`
+ * straight from the server's challenge response.
+ *
+ * Spec: ADR 011 — Passkey Action Contract
+ */
+export declare class ZlPasskey extends LitElement {
+    /**
+     * Which WebAuthn ceremony to perform.
+     * - `authenticate` → `navigator.credentials.get()` (default, login)
+     * - `register` → `navigator.credentials.create()` (passkey enrollment)
+     */
+    accessor ceremony: "authenticate" | "register";
+    /**
+     * Server-side challenge identifier. Echoed back in the result event
+     * so the orchestrator can include it in `challenge_response.challenge_id`.
+     */
+    accessor challengeId: string;
+    /**
+     * WebAuthn options from the server. Accepts either:
+     * - A JSON string (via HTML attribute)
+     * - A JS object (via property binding)
+     *
+     * For `ceremony="authenticate"`: `PublicKeyCredentialRequestOptions`
+     * For `ceremony="register"`: `PublicKeyCredentialCreationOptions`
+     */
+    accessor options: Record<string, unknown> | null;
+    /**
+     * When true, the ceremony is not started automatically on mount.
+     * The consumer must call `startCeremony()` manually.
+     */
+    accessor manual: boolean;
+    private abortController;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Abort any in-flight WebAuthn ceremony. Called automatically when the
+     * component disconnects (step change, page navigation).
+     */
+    abort(): void;
+    /**
+     * Trigger the WebAuthn ceremony. Resolves when the ceremony completes
+     * or rejects on error/abort.
+     */
+    startCeremony(): Promise<void>;
+    private getCredential;
+    private createCredential;
+    /**
+     * Decode a list of credential descriptors from the server's base64url
+     * format to the browser's ArrayBuffer format.
+     */
+    private decodeCredentialDescriptors;
+    /**
+     * Serialize a `PublicKeyCredential` to the JSON shape defined in
+     * `passkey-proof.yaml`. All `ArrayBuffer` fields are base64url-encoded.
+     */
+    private serializeCredential;
+    private emitResult;
+    private emitError;
+    /** Invisible component — no shadow DOM rendering needed. */
+    createRenderRoot(): this;
+}
+export declare const zlPasskeyManifest: AtomManifest;
+declare global {
+    interface HTMLElementTagNameMap {
+        "zl-passkey": ZlPasskey;
+    }
+}
+//# sourceMappingURL=zl-passkey.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"zl-passkey.d.ts","sourceRoot":"","sources":["../../src/atoms/zl-passkey.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEnD;;;;;GAKG;AACH,MAAM,MAAM,qBAAqB,GAAG;IAClC,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,SAAS,CAAC;IAClB,KAAK,EAAE;QACL,EAAE,EAAE,MAAM,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,YAAY,CAAC;QACnB,QAAQ,EAAE;YACR,cAAc,EAAE,MAAM,CAAC;YACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;YAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;YAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;YACnB,UAAU,CAAC,EAAE,MAAM,CAAC;SACrB,CAAC;QACF,uBAAuB,CAAC,EAAE,UAAU,GAAG,gBAAgB,CAAC;KACzD,CAAC;CACH,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC;;;;OAIG;IACS,QAAQ,CAAC,QAAQ,EAAE,cAAc,GAAG,UAAU,CAAkB;IAE5E;;;OAGG;IACsC,QAAQ,CAAC,WAAW,SAAM;IAEnE;;;;;;;OAOG;IAiBH,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAQ;IAExD;;;OAGG;IAC0B,QAAQ,CAAC,MAAM,UAAS;IAErD,OAAO,CAAC,eAAe,CAAgC;IAE9C,iBAAiB,IAAI,IAAI,CAKjC;IAEQ,oBAAoB,IAAI,IAAI,CAGpC;IAED;;;OAGG;IACH,KAAK,IAAI,IAAI,CAGZ;IAED;;;OAGG;IACG,aAAa,IAAI,OAAO,CAAC,IAAI,CAAC,CAqCnC;YAKa,aAAa;YAyBb,gBAAgB;IAyC9B;;;OAGG;IACH,OAAO,CAAC,2BAA2B;IAWnC;;;OAGG;IACH,OAAO,CAAC,mBAAmB;IA2C3B,OAAO,CAAC,UAAU;IAelB,OAAO,CAAC,SAAS;IAejB,4DAA4D;IACnD,gBAAgB,IAAI,IAAI,CAEhC;CACF;AAED,eAAO,MAAM,iBAAiB,EAAE,YAOtB,CAAC;AAEX,OAAO,CAAC,MAAM,CAAC,CAAC;IACd,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

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

@@ -0,0 +1,55 @@
+import { LitElement } from "lit";
+import type { AtomManifest } from "../manifest.js";
+/**
+ * Atom: `<zl-pill>` — small inline chip used for status and attribution.
+ *
+ * Spec lineage (file `xkvBjkOJ8ENuHdTGZHXezK`):
+ *   - canonical instance: node `6593:141767` ("Social media" frame =
+ *     "Secured with Zitadel" attribution pill on every sign-in screen).
+ *
+ * Two roles in scope:
+ *   - **Attribution pill** ("Secured with Zitadel") rendered by the
+ *     orchestrator footer when `branding.attribution` is enabled. This is
+ *     the only canonical pill in the Figma screens; its spec is the
+ *     source of truth for every dimension.
+ *   - **Status pill** (decorative `tone` variants — pink / purple /
+ *     orange / success) reuses the same geometry and typography, only
+ *     swapping the tint colour. The tones don't have screen instances in
+ *     Figma yet; when they ship, re-verify each tone against its master.
+ *
+ * Per-state Figma values (from node `6593:141767`):
+ *
+ *   surface     bg layered linear-gradient(182deg,
+ *                 rgba(72,74,87,0.6) 28.65%,
+ *                 rgba(15,15,17,0.6) 81.82%)
+ *                 over surface.default-primary-gray (#252528)
+   *   border      1px solid #484a57 (our token: border.default-gray-200 —
+   *                 Figma calls this "default-gray-100"; our gray primitive
+   *                 ladder is offset by one slot, so map to gray-200)
+ *   radius      100px (full pill)
+ *   size        186×40px frame (`get_metadata` on `6593:141767`)
+ *   padding     16px inline (spacing-03) / 10px block (spacing metadata:
+ *                 text y=10, line 20px, frame height 40px)
+ *   gap         8px (spacing-02)
+ *   font        Arimo Regular 14/20, letter-spacing 0, color
+ *               text.primary-white (#f4f4f6), text-transform none
+ *   focus-vis   2px solid focus.color, offset 2px
+ *
+ *   content     "Secured with" + 65×16 logotype SVG (`attribution-markup.ts`);
+ *               logotype `margin-top: 2px` (Figma text y=10, logotype y=12)
+ */
+export declare class ZlPill extends LitElement {
+    static styles: import("lit").CSSResult[];
+    accessor tone: "neutral" | "pink" | "purple" | "orange" | "success";
+    accessor href: string | undefined;
+    accessor ariaLabel: string | null;
+    private surfaceClasses;
+    render(): import("lit").TemplateResult<1>;
+}
+export declare const zlPillManifest: AtomManifest;
+declare global {
+    interface HTMLElementTagNameMap {
+        "zl-pill": ZlPill;
+    }
+}
+//# sourceMappingURL=zl-pill.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"zl-pill.d.ts","sourceRoot":"","sources":["../../src/atoms/zl-pill.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAMhD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,qBACa,MAAO,SAAQ,UAAU;IACpC,OAAgB,MAAM,4BAA6D;IAEvE,QAAQ,CAAC,IAAI,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAa;IAEhF,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAa;IAE1D,SACkB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAQ;IAElD,OAAO,CAAC,cAAc;IAIb,MAAM,oCAYd;CACF;AAED,eAAO,MAAM,cAAc,EAAE,YAMnB,CAAC;AAEX,OAAO,CAAC,MAAM,CAAC,CAAC;IACd,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}