@zitadel/components 0.1.0-alpha.16 → 0.1.0-alpha.17

package/README.md

@@ -177,7 +177,10 @@ Automation can use the stable host and native shadow-root hooks that the default
 template emits. Host atoms expose hooks such as `zitadel-field-email`,
 `zitadel-field-password`, and `zitadel-action-submit`; their native shadow
 controls expose hooks such as `zitadel-input-email`, `zitadel-input-password`,
-and `zitadel-action-submit-button`.
+and `zitadel-action-submit-button`. Hooks are method-named even when the flow
+engine names a credential field `x-auth-methods#<method>` — the `name`
+attribute keeps that raw form key, only the `data-testid` hooks are normalised
+(`hookName` in `src/internal/hook-name.ts`).
 
 A tenant Liquid template can already be supplied through the branding
 payload's `liquid_template` field; a dedicated declarative `template`

package/dist/atoms/index.d.mts

@@ -1,2 +1,2 @@
-import { $t as ZlCheckbox, a as ZlPill, an as zlButtonManifest, c as ZlPasskeyErrorDetail, cn as IconName, d as ZlPageShell, en as ZlCheckboxChangeDetail, f as zlPageShellManifest, h as zlFieldManifest, i as zlSelectManifest, in as ZlButton, l as ZlPasskeyResultDetail, ln as ZlIcon, m as ZlFieldType, n as ZlSelectChangeDetail, nn as ZlCard, o as zlPillManifest, on as ZlAlert, p as ZlField, r as ZlSelectOption, rn as zlCardManifest, s as ZlPasskey, sn as zlAlertManifest, t as ZlSelect, tn as zlCheckboxManifest, u as zlPasskeyManifest, un as zlIconManifest } from "../index-BwQLFs9R.mjs";
+import { $t as ZlCheckbox, a as ZlPill, an as zlButtonManifest, c as ZlPasskeyErrorDetail, cn as IconName, d as ZlPageShell, en as ZlCheckboxChangeDetail, f as zlPageShellManifest, h as zlFieldManifest, i as zlSelectManifest, in as ZlButton, l as ZlPasskeyResultDetail, ln as ZlIcon, m as ZlFieldType, n as ZlSelectChangeDetail, nn as ZlCard, o as zlPillManifest, on as ZlAlert, p as ZlField, r as ZlSelectOption, rn as zlCardManifest, s as ZlPasskey, sn as zlAlertManifest, t as ZlSelect, tn as zlCheckboxManifest, u as zlPasskeyManifest, un as zlIconManifest } from "../index-DSZnfOJH.mjs";
 export { IconName, ZlAlert, ZlButton, ZlCard, ZlCheckbox, ZlCheckboxChangeDetail, ZlField, ZlFieldType, ZlIcon, ZlPageShell, ZlPasskey, ZlPasskeyErrorDetail, ZlPasskeyResultDetail, ZlPill, ZlSelect, ZlSelectChangeDetail, ZlSelectOption, zlAlertManifest, zlButtonManifest, zlCardManifest, zlCheckboxManifest, zlFieldManifest, zlIconManifest, zlPageShellManifest, zlPasskeyManifest, zlPillManifest, zlSelectManifest };

package/dist/atoms/index.mjs

@@ -1,2 +1,2 @@
-import { _ as ZlAlert, a as ZlPasskey, b as zlIconManifest, c as zlPageShellManifest, d as ZlCheckbox, f as zlCheckboxManifest, g as zlButtonManifest, h as ZlButton, i as zlPillManifest, l as ZlField, m as zlCardManifest, n as zlSelectManifest, o as zlPasskeyManifest, p as ZlCard, r as ZlPill, s as ZlPageShell, t as ZlSelect, u as zlFieldManifest, v as zlAlertManifest, y as ZlIcon } from "../atoms-C-zXJjaz.mjs";
+import { _ as zlButtonManifest, a as ZlPasskey, b as ZlIcon, c as zlPageShellManifest, f as ZlCheckbox, g as ZlButton, h as zlCardManifest, i as zlPillManifest, l as ZlField, m as ZlCard, n as zlSelectManifest, o as zlPasskeyManifest, p as zlCheckboxManifest, r as ZlPill, s as ZlPageShell, t as ZlSelect, u as zlFieldManifest, v as ZlAlert, x as zlIconManifest, y as zlAlertManifest } from "../atoms-KC7OJWXZ.mjs";
 export { ZlAlert, ZlButton, ZlCard, ZlCheckbox, ZlField, ZlIcon, ZlPageShell, ZlPasskey, ZlPill, ZlSelect, zlAlertManifest, zlButtonManifest, zlCardManifest, zlCheckboxManifest, zlFieldManifest, zlIconManifest, zlPageShellManifest, zlPasskeyManifest, zlPillManifest, zlSelectManifest };

package/dist/{atoms-C-zXJjaz.mjs → atoms-KC7OJWXZ.mjs}

@@ -846,6 +846,36 @@ var text_field_host_default = ":host {\n  display: block;\n}\n\n::slotted([slot=
 //#region ../shared-component-styles/src/text-field.css?inline
 var text_field_default = ".zr-field {\n  align-items: stretch;\n  gap: var(--zl-spacing-02, .5rem);\n  font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n  flex-direction: column;\n  display: flex;\n}\n\n.zr-field__label-row {\n  justify-content: space-between;\n  align-items: flex-start;\n  gap: var(--zl-spacing-02, .5rem);\n  width: 100%;\n  display: flex;\n}\n\n.zr-field__label {\n  align-items: center;\n  gap: var(--zl-spacing-01, .25rem);\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  font-size: 1rem;\n  font-weight: 600;\n  line-height: 1.5rem;\n  display: inline-flex;\n}\n\n.zr-field__link {\n  color: var(--zl-color-icon-default-purple, #bba5e4);\n  flex-shrink: 0;\n  font-size: .875rem;\n  font-weight: 400;\n  line-height: 1.25rem;\n  text-decoration: none;\n}\n\n.zr-field__link:hover {\n  text-decoration: underline;\n}\n\n.zr-field__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  border-radius: 2px;\n}\n\n.zr-field__required {\n  color: var(--zl-color-text-error, #ea4f70);\n}\n\n.zr-field--disabled .zr-field__label {\n  color: var(--zl-color-text-disabled, #686883);\n}\n\n.zr-field__wrap {\n  align-items: center;\n  gap: var(--zl-spacing-02, .5rem);\n  padding-block: var(--zl-spacing-02, .5rem);\n  padding-inline: var(--zl-spacing-03, 1rem);\n  border-radius: var(--zl-radius-xs, .25rem);\n  border: 1px solid var(--zl-color-border-default-gray-300, #686883);\n  height: 2.5rem;\n  transition: border-color var(--zl-duration-fast, .12s) var(--zl-easing-standard, cubic-bezier(.2, 0, 0, 1)),\n    background-color var(--zl-duration-fast, .12s) var(--zl-easing-standard, cubic-bezier(.2, 0, 0, 1));\n  box-sizing: border-box;\n  background: none;\n  display: flex;\n  position: relative;\n  overflow: visible;\n}\n\n.zr-field__wrap--trailing {\n  padding-inline-end: 2.5rem;\n}\n\n.zr-field:not(.zr-field--disabled) .zr-field__wrap:hover:not(:focus-within) {\n  border-color: var(--zl-color-gray-500, #9e9eb2);\n  background-color: color-mix(in srgb, var(--zl-color-text-primary-white, #f4f4f6) 10%, transparent);\n}\n\n.zr-field:not(.zr-field--invalid):not(.zr-field--disabled):not(.zr-field--success) .zr-field__wrap:has(.zr-field__input:not(:placeholder-shown)):not(:focus-within) {\n  border-color: var(--zl-color-border-default-gray-400, #82829c);\n}\n\n.zr-field:not(.zr-field--invalid):not(.zr-field--disabled):not(.zr-field--success) .zr-field__wrap:focus-within {\n  border-color: var(--zl-color-border-default-white, #f4f4f6);\n  outline: none;\n}\n\n.zr-field--invalid .zr-field__wrap {\n  border-color: var(--zl-color-border-error, #ea4f70);\n}\n\n.zr-field--invalid .zr-field__wrap:focus-within {\n  border-color: var(--zl-color-border-error, #ea4f70);\n  outline: none;\n}\n\n.zr-field--success .zr-field__wrap {\n  border-color: var(--zl-color-border-success, #33a779);\n}\n\n.zr-field--success .zr-field__wrap:focus-within {\n  border-color: var(--zl-color-border-success, #33a779);\n  outline: none;\n}\n\n.zr-field--disabled .zr-field__wrap {\n  border-color: var(--zl-color-border-default-gray-200, #484a57);\n}\n\n.zr-field__input {\n  min-width: 0;\n  height: 100%;\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  background: none;\n  border: 0;\n  outline: none;\n  flex: auto;\n  padding: 0;\n  font-family: inherit;\n  font-size: .875rem;\n  font-weight: 400;\n  line-height: 1.25rem;\n}\n\n.zr-field__input[type=\"password\"] {\n  letter-spacing: .125rem;\n}\n\n.zr-field__input::placeholder {\n  color: var(--zl-color-text-secondary-gray, #bfbfcf);\n}\n\n.zr-field__input:focus, .zr-field__input:focus-visible {\n  outline: none;\n}\n\n.zr-field__input:disabled {\n  cursor: not-allowed;\n  color: var(--zl-color-text-disabled, #686883);\n}\n\n.zr-field--disabled .zr-field__wrap:hover {\n  border-color: var(--zl-color-border-default-gray-200, #484a57);\n  background-color: #0000;\n}\n\n.zr-field__trailing {\n  width: 1rem;\n  height: 1rem;\n  color: var(--zl-color-text-secondary-gray, #bfbfcf);\n  justify-content: center;\n  align-items: center;\n  display: inline-flex;\n  position: absolute;\n  top: 50%;\n  right: .9375rem;\n  transform: translateY(-50%);\n}\n\n.zr-field__trailing-action {\n  color: inherit;\n  cursor: pointer;\n  background: none;\n  border: 0;\n  justify-content: center;\n  align-items: center;\n  margin: 0;\n  padding: 0;\n  line-height: 0;\n  display: inline-flex;\n}\n\n.zr-field__trailing-action:focus-visible {\n  outline: var(--zl-focus-width, 2px) solid var(--zl-focus-color, #f4f4f6);\n  outline-offset: var(--zl-focus-offset, 2px);\n  border-radius: 2px;\n}\n\n.zr-field__trailing-action:disabled {\n  cursor: not-allowed;\n}\n\n.zr-field--invalid .zr-field__trailing {\n  color: var(--zl-color-text-error, #ea4f70);\n}\n\n.zr-field--success .zr-field__trailing {\n  color: var(--zl-color-text-success, #33a779);\n}\n\n.zr-field__help {\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  font-size: .75rem;\n  line-height: 1rem;\n}\n\n.zr-field__success {\n  color: var(--zl-color-text-success, #33a779);\n  font-size: .75rem;\n  line-height: 1rem;\n}\n\n.zr-field__error {\n  color: var(--zl-color-text-error, #ea4f70);\n  font-size: .75rem;\n  line-height: 1rem;\n}\n";
 //#endregion
+//#region src/internal/hook-name.ts
+/**
+* Reserved auth-method credential prefix of flow field names. Mirrors
+* `AUTH_METHOD_PREFIX` in `@zitadel/config` (`src/validate.ts`), which
+* owns the wire dialect; components has no dependency on that package,
+* so the literal is repeated here.
+*/
+const AUTH_METHOD_PREFIX = "x-auth-methods#";
+/**
+* Normalises a flow field name into its automation-hook token.
+*
+* Auth-method credential fields arrive from the flow engine as
+* `x-auth-methods#<method>` (e.g. `x-auth-methods#password`), but the
+* documented `data-testid` hooks are method-named
+* (`zitadel-field-password`, `zitadel-input-password` — see
+* packages/components/README.md and apps/cli/SKILLS.md). This helper
+* feeds both hook construction sites: the bundled template's `testid`
+* Liquid filter and `<zl-field>`'s native-input testid.
+*
+* Only the reserved credential prefix is stripped — user-schema
+* property names are tenant-authored arbitrary strings, so a `#`
+* anywhere else is part of the name and stays in the hook. The
+* after-prefix token is used verbatim (no case or spacing changes),
+* and the field's `name` attribute always keeps the raw wire/form key.
+*/
+function hookName(field) {
+	if (field.startsWith(AUTH_METHOD_PREFIX) && field.length > 15) return field.slice(15);
+	return field;
+}
+//#endregion
 //#region src/atoms/zl-field.ts
 let ZlField = class ZlField extends LitElement {
 	static formAssociated = true;
@@ -1185,7 +1215,7 @@ let ZlField = class ZlField extends LitElement {
 		}
 	};
 	nativeInputTestId() {
-		if (this.name) return `zitadel-input-${this.name}`;
+		if (this.name) return `zitadel-input-${hookName(this.name)}`;
 		if (this.testId) return `${this.testId}-input`;
 	}
 	dispatchNativeInput(source) {
@@ -2161,6 +2191,6 @@ const zlSelectManifest = {
 	events: ["zl-change"]
 };
 //#endregion
-export { baseHostStyles as C, focusVisibleStyles as S, emit as T, ZlAlert as _, ZlPasskey as a, zlIconManifest as b, zlPageShellManifest as c, ZlCheckbox as d, zlCheckboxManifest as f, zlButtonManifest as g, ZlButton as h, zlPillManifest as i, ZlField as l, zlCardManifest as m, zlSelectManifest as n, zlPasskeyManifest as o, ZlCard as p, ZlPill as r, ZlPageShell as s, ZlSelect as t, zlFieldManifest as u, zlAlertManifest as v, t as w, __decorate as x, ZlIcon as y };
+export { focusVisibleStyles as C, emit as E, __decorate as S, t as T, zlButtonManifest as _, ZlPasskey as a, ZlIcon as b, zlPageShellManifest as c, hookName as d, ZlCheckbox as f, ZlButton as g, zlCardManifest as h, zlPillManifest as i, ZlField as l, ZlCard as m, zlSelectManifest as n, zlPasskeyManifest as o, zlCheckboxManifest as p, ZlPill as r, ZlPageShell as s, ZlSelect as t, zlFieldManifest as u, ZlAlert as v, baseHostStyles as w, zlIconManifest as x, zlAlertManifest as y };
 
-//# sourceMappingURL=atoms-C-zXJjaz.mjs.map
+//# sourceMappingURL=atoms-KC7OJWXZ.mjs.map

package/dist/atoms-KC7OJWXZ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"atoms-KC7OJWXZ.mjs","names":["raw","iconHost","iconSurface","alertHost","alertSurface","buttonHost","buttonSurface","cardHost","cardSurface","checkboxHost","checkboxSurface","fieldHost","fieldSurface","pageShellHost","pageShellSurface","pillHost","pillSurface","selectHost","selectSurface"],"sources":["../../shared-component-styles/src/lit/alert-host.css?inline","../../shared-component-styles/src/alert.css?inline","../src/internal/emit.ts","../src/styles/tokens.ts","../src/styles/base.ts","../src/styles/focus-ring.ts","../src/styles/surface.ts","../../shared-component-styles/src/lit/icon-host.css?inline","../../shared-component-styles/src/icon.css?inline","../src/atoms/zl-icon.ts","../src/atoms/zl-alert.ts","../../shared-component-styles/src/lit/button-host.css?inline","../../shared-component-styles/src/button.css?inline","../src/atoms/zl-button.ts","../../shared-component-styles/src/lit/card-host.css?inline","../../shared-component-styles/src/card.css?inline","../src/atoms/zl-card.ts","../../shared-component-styles/src/lit/checkbox-host.css?inline","../../shared-component-styles/src/checkbox.css?inline","../src/internal/unique-id.ts","../src/atoms/zl-checkbox.ts","../../shared-component-styles/src/lit/text-field-host.css?inline","../../shared-component-styles/src/text-field.css?inline","../src/internal/hook-name.ts","../src/atoms/zl-field.ts","../../shared-component-styles/src/lit/page-shell-host.css?inline","../../shared-component-styles/src/page-shell.css?inline","../src/atoms/zl-page-shell.ts","../src/internal/base64url.ts","../src/atoms/zl-passkey.ts","../../shared-component-styles/src/lit/pill-host.css?inline","../../shared-component-styles/src/pill.css?inline","../src/atoms/zl-pill.ts","../../shared-component-styles/src/lit/select-host.css?inline","../../shared-component-styles/src/select.css?inline","../src/atoms/zl-select.ts"],"sourcesContent":["/* Lit-only: <zl-alert> host + slot reset. */\n:host {\n  display: block;\n}\n","/* Shared surface for `<zl-alert>` / `<Alert>`. Lit-only rules: lit/alert-host.css */\n/* Figma master: 8UjCXw8yemgljmbkWGrSfE / Alert/Error `6593:2640` */\n.zr-alert {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--zl-spacing-03, 1rem);\n  padding: var(--zl-spacing-03, 1rem);\n  border-radius: var(--zl-radius-m, 0.75rem);\n  background: var(--zl-color-surface-default-primary-gray, #252528);\n  color: var(--zl-color-text-button-invert, #f4f4f6);\n  font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n  font-size: 0.875rem;\n  font-weight: 400;\n  line-height: 1.25rem;\n  box-shadow: 0 1px 2px rgb(16 24 40 / 0.05);\n}\n.zr-alert__icon {\n  flex-shrink: 0;\n  color: var(--zl-color-text-error, #ea4f70);\n}\n.zr-alert--warning .zr-alert__icon {\n  color: var(--zl-color-text-subtitle-orange, #f25543);\n}\n.zr-alert--success .zr-alert__icon {\n  color: var(--zl-color-text-success, #33a779);\n}\n.zr-alert--info .zr-alert__icon {\n  color: var(--zl-color-text-subtitle-gray, #bfbfcf);\n}\n.zr-alert__body {\n  flex: 1 1 auto;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: var(--zl-spacing-01, 0.25rem);\n}\n.zr-alert__title {\n  font-weight: 600;\n  color: var(--zl-color-text-button-invert, #f4f4f6);\n}\n.zr-alert__message {\n  margin: 0;\n  color: var(--zl-color-border-default-white, #f4f4f6);\n}\n.zr-alert:not(:has(.zr-alert__title)) .zr-alert__message {\n  color: var(--zl-color-text-button-invert, #f4f4f6);\n}\n.zr-alert__close {\n  all: unset;\n  flex-shrink: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2.25rem;\n  height: 2.25rem;\n  padding: var(--zl-spacing-02, 0.5rem);\n  border-radius: var(--zl-radius-s, 0.5rem);\n  color: var(--zl-color-text-secondary-gray, #bfbfcf);\n  cursor: pointer;\n  transition: background-color var(--zl-duration-fast, 120ms) var(--zl-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n}\n.zr-alert__close .zr-icon {\n  --zl-icon-size: 1.25rem;\n  width: 1.25rem;\n  height: 1.25rem;\n}\n.zr-alert__close:hover {\n  background: var(--zl-color-gray-200, #484a57);\n}\n.zr-alert__close: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","/**\n * Dispatch a custom event with the project-wide defaults (`bubbles` +\n * `composed`) so it crosses the shadow boundary and reaches delegated\n * listeners — whether it's an atom's `zl-*` event or the orchestrator's\n * public `zitadel-*` event.\n *\n * Centralising the dispatch shape keeps every event contract identical and\n * removes the repeated `new CustomEvent(..., { bubbles: true, composed: true,\n * detail })` boilerplate.\n */\nexport function emit<T = undefined>(host: HTMLElement, type: string, detail?: T): boolean {\n  return host.dispatchEvent(\n    new CustomEvent<T>(type, { bubbles: true, composed: true, detail: detail as T }),\n  );\n}\n","import { cssVars as raw } from \"@zitadel/design-tokens\";\nimport { unsafeCSS, type CSSResult } from \"lit\";\n\n/**\n * Lit-friendly token bridge.\n *\n * `@zitadel/design-tokens` exports two parallel trees:\n *   - `tokens.color.text.primaryWhite === \"#f4f4f6\"` (resolved values)\n *   - `cssVars.color.text.primaryWhite === \"var(--zl-color-text-primary-white)\"`\n *\n * Atom CSS authored with Lit's `css` tagged template needs `CSSResult`\n * fragments, not raw strings. This module wraps the cssVars tree in\n * `unsafeCSS` once so every atom can write:\n *\n *     css`background: ${t.color.surface.defaultBlack};`\n *\n * The cssVars tree itself never changes shape outside of a design-tokens\n * rebuild, so the `unsafeCSS` calls are constant and safe.\n */\ntype CssNode = CSSResult | { readonly [k: string]: CssNode };\ntype CssTree = {\n  [K in keyof typeof raw]: WrapTree<(typeof raw)[K]>;\n};\ntype WrapTree<T> = T extends string\n  ? CSSResult\n  : T extends Record<string, unknown>\n    ? { [K in keyof T]: WrapTree<T[K]> }\n    : never;\n\nfunction wrap(node: unknown): CssNode {\n  if (typeof node === \"string\") return unsafeCSS(node);\n  const out: Record<string, CssNode> = {};\n  for (const [key, value] of Object.entries(node as Record<string, unknown>)) {\n    out[key] = wrap(value);\n  }\n  return out;\n}\n\nexport const t = wrap(raw) as unknown as CssTree;\n","import { css } from \"lit\";\n\nimport { t } from \"./tokens.js\";\n\n/**\n * Shared shadow-root base styles. Each atom prepends this fragment to its own\n * `static styles` so font/colour inheritance, box-sizing, and resets stay\n * consistent without forcing a global stylesheet on the host page.\n */\nexport const baseHostStyles = css`\n  :host {\n    box-sizing: border-box;\n    font-family: ${t.font.family.sans};\n    color: ${t.color.text.primaryWhite};\n    line-height: 1.5;\n    -webkit-font-smoothing: antialiased;\n  }\n  *,\n  *::before,\n  *::after {\n    box-sizing: inherit;\n  }\n`;\n","import { css } from \"lit\";\n\nimport { t } from \"./tokens.js\";\n\n/**\n * Visible focus indicator shared across interactive atoms. Mirrors the\n * Figma button \"Focused\" state — a 2px white outline offset by 2px from\n * the element edge. Atoms apply via `&:focus-visible { ${focusVisibleStyles} }`.\n */\nexport const focusVisibleStyles = css`\n  outline: ${t.focus.width} solid ${t.focus.color};\n  outline-offset: ${t.focus.offset};\n`;\n","import { unsafeCSS, type CSSResult } from \"lit\";\n\n/**\n * Wrap shared surface CSS (from `@zitadel/shared-component-styles`)\n * for Lit `static styles`. Import `.css?inline` in atoms; `@tsdown/css` inlines\n * the strings when `components` is built.\n */\nexport function surfaceStyles(...cssChunks: string[]): CSSResult[] {\n  return cssChunks.map((chunk) => unsafeCSS(chunk));\n}\n","/* Lit-only: <zl-icon> defers box metrics to inner .zr-icon. */\n:host {\n  display: contents;\n  color: inherit;\n}\n","/* Shared surface for `<zl-icon>` / `<Icon>`. Lit-only rules: lit/icon-host.css */\n.zr-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--zl-icon-size, 1.5rem);\n  height: var(--zl-icon-size, 1.5rem);\n}\n.zr-icon--16 {\n  --zl-icon-size: 1rem;\n}\n.zr-icon--24 {\n  --zl-icon-size: 1.5rem;\n}\n.zr-icon--tone-error {\n  color: var(--zl-color-icon-error);\n}\n.zr-icon--tone-success {\n  color: var(--zl-color-icon-success);\n}\n.zr-icon--tone-disabled {\n  color: var(--zl-color-icon-disabled);\n}\n.zr-icon svg {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n.zr-icon--spin svg {\n  animation: zr-icon-spin 800ms linear infinite;\n}\n@keyframes zr-icon-spin {\n  to { transform: rotate(360deg); }\n}\n","import { LitElement, html, nothing } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { unsafeSVG } from \"lit/directives/unsafe-svg.js\";\n\nimport iconHost from \"@zitadel/shared-component-styles/lit/icon-host.css?inline\";\nimport iconSurface from \"@zitadel/shared-component-styles/icon.css?inline\";\nimport {\n  ArrowLeft,\n  ArrowRight,\n  Check,\n  ChevronDown,\n  CircleAlert,\n  Eye,\n  EyeOff,\n  type IconNode,\n  Info,\n  KeyRound,\n  LoaderCircle,\n  Plus,\n  TriangleAlert,\n  User,\n  X,\n} from \"lucide\";\n\nimport type { AtomManifest } from \"../manifest.js\";\nimport { surfaceStyles } from \"../styles/index.js\";\n\n/**\n * Atom: `<zl-icon>` — renders a curated glyph from the Lucide icon library.\n *\n * The Figma design system (file `8UjCXw8yemgljmbkWGrSfE`, Icons set\n * `4103:10466`, sizes `16 | 24`) is explicitly built on Lucide. Rather than redrawing every glyph as an\n * inline `<path>` (which inevitably drifts), we curate the auth surface's\n * subset by importing each canonical Lucide node and exposing a stable\n * kebab-case `name` API. To add a glyph: import it from `lucide`, add an\n * entry to {@link ICON_NODES}, and extend the {@link IconName} union.\n *\n * Colour: by default the icon inherits `currentColor`. Set `tone` to one\n * of the semantic states to pick up `--zl-color-icon-{error|success|disabled}`\n * directly. The \"palette\" colour tokens (`--zl-color-icon-default-*`) are\n * not exposed as `tone` values; consumers wanting those set `color:` on\n * the host.\n *\n * Accessibility: glyphs with an entry in {@link DEFAULT_LABELS} expose an\n * `aria-label` so they're meaningful when used standalone. When the icon\n * is purely decorative (e.g. sitting next to a visible button label),\n * pass `decorative` to force `aria-hidden=\"true\"` and `role=\"presentation\"`,\n * which prevents the icon's name from leaking into the parent's\n * accessible name (e.g. avoids \"Loading Loading\" on a loading button).\n */\n@customElement(\"zl-icon\")\nexport class ZlIcon extends LitElement {\n  /* No baseHostStyles — would force white on :host; icons inherit context color. */\n  static override styles = surfaceStyles(iconHost, iconSurface);\n\n  @property() accessor name: IconName = \"plus\";\n\n  @property({ reflect: true }) accessor size: IconSize = \"24\";\n\n  @property({ reflect: true }) accessor tone: IconTone = \"default\";\n\n  @property({ type: Boolean, reflect: true }) accessor spin = false;\n\n  @property({ type: Boolean, reflect: true }) accessor decorative = false;\n\n  @property() accessor label: string | undefined = undefined;\n\n  override render() {\n    const ariaLabel = this.label ?? DEFAULT_LABELS[this.name];\n    const hidden = this.decorative || !ariaLabel;\n    const classes = classMap({\n      \"zr-icon\": true,\n      [`zr-icon--${this.size}`]: true,\n      [`zr-icon--tone-${this.tone}`]: this.tone !== \"default\",\n      \"zr-icon--spin\": this.spin,\n    });\n    return html`\n      <span class=${classes}>\n        <svg\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          role=${hidden ? \"presentation\" : \"img\"}\n          aria-hidden=${hidden ? \"true\" : \"false\"}\n          aria-label=${hidden ? nothing : ariaLabel}\n        >${unsafeSVG(ICON_MARKUP[this.name])}</svg>\n      </span>\n    `;\n  }\n}\n\n/** Public, kebab-case glyph IDs. Add a new one by extending both this union and {@link ICON_NODES}. */\nexport type IconName =\n  | \"plus\"\n  | \"arrow-right\"\n  | \"arrow-left\"\n  | \"spinner\"\n  | \"check\"\n  | \"chevron-down\"\n  | \"cross\"\n  | \"warning\"\n  | \"alert-circle\"\n  | \"info\"\n  | \"passkey\"\n  | \"user\"\n  | \"eye\"\n  | \"eye-off\";\n\n/** Auth-surface glyph list — keep playgrounds and parity tests in sync. */\nexport const SHIPPED_ICON_NAMES = [\n  \"plus\",\n  \"arrow-right\",\n  \"arrow-left\",\n  \"spinner\",\n  \"check\",\n  \"chevron-down\",\n  \"cross\",\n  \"warning\",\n  \"alert-circle\",\n  \"info\",\n  \"passkey\",\n  \"user\",\n  \"eye\",\n  \"eye-off\",\n] as const satisfies readonly IconName[];\n\nexport type IconSize = \"16\" | \"24\";\n\nexport type IconTone = \"default\" | \"error\" | \"success\" | \"disabled\";\n\n/** Curated mapping from our public name to a Lucide canonical icon. */\nconst ICON_NODES: Record<IconName, IconNode> = {\n  plus: Plus,\n  \"arrow-right\": ArrowRight,\n  \"arrow-left\": ArrowLeft,\n  spinner: LoaderCircle,\n  check: Check,\n  \"chevron-down\": ChevronDown,\n  cross: X,\n  warning: TriangleAlert,\n  \"alert-circle\": CircleAlert,\n  info: Info,\n  passkey: KeyRound,\n  user: User,\n  eye: Eye,\n  \"eye-off\": EyeOff,\n};\n\nconst DEFAULT_LABELS: Partial<Record<IconName, string>> = {\n  spinner: \"Loading\",\n  warning: \"Warning\",\n  \"alert-circle\": \"Alert\",\n  info: \"Information\",\n  passkey: \"Passkey\",\n  user: \"User\",\n  eye: \"Show\",\n  \"eye-off\": \"Hide\",\n};\n\n// Pre-serialise the inner SVG markup once at module load so `render()` is\n// cheap. Lucide's `IconNode` payloads are static module data, so caching\n// the stringified output is safe and equivalent to inlining the source.\nconst ICON_MARKUP: Record<IconName, string> = Object.fromEntries(\n  (Object.entries(ICON_NODES) as Array<[IconName, IconNode]>).map(([name, node]) => [\n    name,\n    nodeToSvgMarkup(node),\n  ]),\n) as Record<IconName, string>;\n\nfunction nodeToSvgMarkup(node: IconNode): string {\n  return node\n    .map(([tag, attrs]) => {\n      const attrStr = Object.entries(attrs)\n        .filter(([, value]) => value !== undefined)\n        .map(([key, value]) => `${key}=\"${String(value)}\"`)\n        .join(\" \");\n      return `<${tag} ${attrStr}/>`;\n    })\n    .join(\"\");\n}\n\nexport const zlIconManifest: AtomManifest = {\n  tag: \"zl-icon\",\n  attrs: [\"name\", \"size\", \"tone\", \"spin\", \"decorative\", \"label\"],\n  parts: [],\n  slots: [],\n  events: [],\n} as const;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"zl-icon\": ZlIcon;\n  }\n}\n","import { LitElement, html } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\n\nimport alertHost from \"@zitadel/shared-component-styles/lit/alert-host.css?inline\";\nimport alertSurface from \"@zitadel/shared-component-styles/alert.css?inline\";\n\nimport { emit } from \"../internal/emit.js\";\nimport type { AtomManifest } from \"../manifest.js\";\nimport { baseHostStyles, surfaceStyles } from \"../styles/index.js\";\n\nimport \"./zl-icon.js\";\nimport type { IconName } from \"./zl-icon.js\";\n\n/**\n * Atom: `<zl-alert>` — inline status message replacing the legacy\n * `<zl-error>`.\n *\n * Spec lineage (file `8UjCXw8yemgljmbkWGrSfE`):\n *   - design-system master: node `6593:2640` (Alert/Error). Screen instance\n *     `6596:132779` matches the same chrome. Severity is conveyed by icon\n *     shape and colour, not by tinting the background.\n *\n * Per-state Figma values:\n *\n *   Layout\n *     surface     bg surface.default-primary-gray (#252528), no border\n *     padding     16px (spacing-03)\n *     gap         16px between icon and content\n *     radius      12px (radius.m)\n *     shadow      0 1px 2px rgba(16,24,40,0.05) (shadow-xs)\n *\n *   Icon (16px)\n *     error       alert-circle, color text.error (#ea4f70)\n *     warning     alert-circle, color text.subtitle-orange (#f25543)\n *     success     check, color text.success (#33a779)\n *     info        info, color text.subtitle-gray (#bfbfcf)\n *\n *   Text\n *     heading     Arimo SemiBold 14/20, color text.button-invert (#f4f4f6)\n *     body        Arimo Regular 14/20, color text.button-invert\n *     gap (heading→body)  4px (spacing-01)\n *\n *   Close button (when dismissible)\n *     36 × 36 hit target, padding 8px, radius 8px (radius.s)\n *     icon `cross` at 20px, color text.secondary-gray\n *     placed at the end of the flex row (icon · content · close)\n *\n * Templates render one per step when the flow returns errors; the\n * orchestrator surfaces flow-level errors through `errors` in the Liquid\n * context.\n */\n@customElement(\"zl-alert\")\nexport class ZlAlert extends LitElement {\n  static override styles = [\n    baseHostStyles,\n    ...surfaceStyles(alertHost, alertSurface),\n  ];\n\n  @property({ reflect: true }) accessor severity: \"error\" | \"success\" | \"warning\" | \"info\" = \"error\";\n\n  @property() accessor heading: string | undefined = undefined;\n\n  @property({ type: Boolean, reflect: true }) accessor dismissible = false;\n\n  override render() {\n    const iconName = ICON_FOR_SEVERITY[this.severity];\n    return html`\n      <div\n        class=\"zr-alert zr-alert--${this.severity}\"\n        part=\"alert\"\n        role=${this.severity === \"error\" ? \"alert\" : \"status\"}\n        aria-live=${this.severity === \"error\" ? \"assertive\" : \"polite\"}\n      >\n        <zl-icon class=\"zr-alert__icon\" part=\"icon\" name=${iconName} size=\"16\" decorative></zl-icon>\n        <div class=\"zr-alert__body\" part=\"body\">\n          ${this.heading ? html`<span class=\"zr-alert__title\" part=\"title\">${this.heading}</span>` : null}\n          <div class=\"zr-alert__message\" part=\"message\">\n            <slot></slot>\n          </div>\n        </div>\n        ${this.dismissible\n          ? html`<button\n              type=\"button\"\n              class=\"zr-alert__close\"\n              part=\"close\"\n              aria-label=\"Dismiss\"\n              @click=${this.handleDismiss}\n            >\n              <zl-icon name=\"cross\" size=\"16\" label=\"Dismiss\" decorative></zl-icon>\n            </button>`\n          : null}\n      </div>\n    `;\n  }\n\n  private handleDismiss = (): void => {\n    emit(this, \"zl-dismiss\");\n    this.remove();\n  };\n}\n\nconst ICON_FOR_SEVERITY: Record<NonNullable<ZlAlert[\"severity\"]>, IconName> = {\n  error: \"alert-circle\",\n  warning: \"alert-circle\",\n  success: \"check\",\n  info: \"info\",\n};\n\nexport const zlAlertManifest: AtomManifest = {\n  tag: \"zl-alert\",\n  attrs: [\"severity\", \"heading\", \"dismissible\"],\n  parts: [\"alert\", \"icon\", \"body\", \"title\", \"message\", \"close\"],\n  slots: [\"\"],\n  events: [\"zl-dismiss\"],\n} as const;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"zl-alert\": ZlAlert;\n  }\n}\n","/* Lit-only: <zl-button> host and slots (surface rules live in ../button.css). */\n:host {\n  display: inline-flex;\n}\n:host([block]) {\n  display: flex;\n  width: 100%;\n}\n/* Slotted <zl-icon> is a light-DOM child of the host, not of .zr-btn — match the\n   inner button foreground so icons inherit the same color as the label. */\n:host([hierarchy=\"primary\"]) {\n  color: var(--zl-color-text-button-default, #0f0f11);\n}\n:host([hierarchy=\"secondary\"]),\n:host([hierarchy=\"text\"]) {\n  color: var(--zl-color-text-button-invert, #f4f4f6);\n}\n:host([disabled]) {\n  color: var(--zl-color-text-disabled, #686883);\n}\n::slotted([slot=\"leading\"]),\n::slotted([slot=\"trailing\"]) {\n  display: inline-flex;\n  align-items: center;\n}\n.zr-btn .spinner {\n  display: inline-flex;\n}\n","/* Shared surface for `<zl-button>` / `<Button>`. Lit-only rules: lit/button-host.css */\n:where(.zr-btn) {\n  all: unset;\n  box-sizing: border-box;\n  cursor: pointer;\n  font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n  font-weight: 600;\n  display: inline-flex;\n  width: max-content;\n  align-items: center;\n  justify-content: center;\n  gap: var(--zl-spacing-02, 0.5rem);\n  padding-inline: var(--zl-spacing-03, 1rem);\n  padding-block: 0.625rem;\n  border-radius: var(--zl-radius-s, 0.5rem);\n  border: 1px solid transparent;\n  text-align: center;\n  white-space: nowrap;\n  transition:\n    background-color var(--zl-duration-fast, 120ms) var(--zl-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n    color var(--zl-duration-fast, 120ms) var(--zl-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n    border-color var(--zl-duration-fast, 120ms) var(--zl-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n    background-image var(--zl-duration-fast, 120ms) var(--zl-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n}\n.zr-btn:focus-visible,\n.zr-btn[data-state=\"focused\"] {\n  outline: var(--zl-focus-width, 2px) solid var(--zl-focus-color, #f4f4f6);\n  outline-offset: var(--zl-focus-offset, 2px);\n}\n.zr-btn--block {\n  display: flex;\n  width: 100%;\n}\n.zr-btn--medium {\n  height: 3rem;\n  font-size: 1rem;\n  line-height: 1.5rem;\n}\n.zr-btn--small {\n  height: 2.5rem;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n\n.zr-btn--primary {\n  background: var(--zl-color-surface-default-white, #f4f4f6);\n  color: var(--zl-color-text-button-default, #0f0f11);\n}\n.zr-btn--primary:hover:not(:disabled),\n.zr-btn--primary:active:not(:disabled),\n.zr-btn--primary:focus-visible:not(:disabled),\n.zr-btn--primary[data-state=\"hovered\"]:not(:disabled),\n.zr-btn--primary[data-state=\"pressed\"]:not(:disabled),\n.zr-btn--primary[data-state=\"focused\"]:not(:disabled) {\n  background: var(--zl-color-gray-600, #cfcfde);\n  border-color: var(--zl-color-border-default-black, #252528);\n}\n.zr-btn--primary:disabled {\n  color: var(--zl-color-text-disabled, #686883);\n  cursor: not-allowed;\n}\n\n.zr-btn--secondary {\n  background: var(--zl-color-border-default-black, #252528);\n  color: var(--zl-color-text-button-invert, #f4f4f6);\n}\n.zr-btn--secondary:hover:not(:disabled),\n.zr-btn--secondary:active:not(:disabled),\n.zr-btn--secondary[data-state=\"hovered\"]:not(:disabled),\n.zr-btn--secondary[data-state=\"pressed\"]:not(:disabled) {\n  background: var(--zl-color-gray-200, #484a57);\n}\n.zr-btn--secondary:disabled {\n  color: var(--zl-color-text-disabled, #686883);\n  cursor: not-allowed;\n}\n\n.zr-btn--text {\n  background: transparent;\n  color: var(--zl-color-text-button-invert, #f4f4f6);\n}\n.zr-btn--text:hover:not(:disabled),\n.zr-btn--text:active:not(:disabled),\n.zr-btn--text[data-state=\"hovered\"]:not(:disabled),\n.zr-btn--text[data-state=\"pressed\"]:not(:disabled) {\n  background: var(--zl-color-gray-200, #484a57);\n}\n.zr-btn--text:focus-visible:not(:disabled),\n.zr-btn--text[data-state=\"focused\"]:not(:disabled) {\n  background: var(--zl-color-border-default-black, #252528);\n}\n.zr-btn--text:disabled {\n  color: var(--zl-color-text-disabled, #686883);\n  cursor: not-allowed;\n}\n","import { LitElement, html, nothing } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\n\nimport buttonHost from \"@zitadel/shared-component-styles/lit/button-host.css?inline\";\nimport buttonSurface from \"@zitadel/shared-component-styles/button.css?inline\";\n\nimport { emit } from \"../internal/emit.js\";\nimport type { AtomManifest } from \"../manifest.js\";\nimport { baseHostStyles, surfaceStyles } from \"../styles/index.js\";\n\nimport \"./zl-icon.js\";\n\n/**\n * Atom: `<zl-button>` — the entire Figma button matrix in a single atom.\n *\n * Spec lineage (file `8UjCXw8yemgljmbkWGrSfE`, \"Zitadel - Design System - External\"):\n *   - master variant set: node `6598:292`\n *   - icon-leading instance reference: node `6598:143281` (passkey upsell)\n *\n * Variant axes (matches Figma directly):\n *   - hierarchy: primary | secondary | text\n *   - size:      medium (48 × auto) | small (40 × auto)\n *   - state:     enabled / hovered / focused / pressed / disabled\n *                (derived from interaction, not props)\n *   - slots:     `leading` icon, `trailing` icon, default for the label.\n *                When `loading` is set the trailing slot is replaced with a\n *                spinning ring (Figma shows the spinner trailing).\n *\n * Per-state Figma values (resolved from `figma.tokens.json` primitives):\n *\n *   Primary\n *     enabled        bg=#f4f4f6 (surface.default-white)     fg=#0f0f11   border=transparent\n *     hover/pressed  bg=#cfcfde (gray.600)                  fg=#0f0f11   border=1px #252528\n *     focus-visible  bg=#cfcfde + native outline ring\n *     disabled       bg=#f4f4f6                             fg=#686883 (text.disabled)\n *\n *   Secondary\n *     enabled        bg=#252528 (border.default-black)      fg=#f4f4f6 (text.button-invert)\n *     hover/pressed  bg=#484a57 (gray.200)                  fg=#f4f4f6\n *     focus-visible  bg=#252528 + native outline ring       fg=#f4f4f6\n *     disabled       bg=#252528                             fg=#686883\n *\n *   Text\n *     enabled        bg=transparent                         fg=#f4f4f6\n *     hover/pressed  bg=#484a57                             fg=#f4f4f6\n *     focus-visible  bg=#252528 + native outline ring       fg=#f4f4f6\n *     disabled       bg=transparent                         fg=#686883\n *\n *   Common\n *     padding        10px (block) / 16px (inline)            radius=8px\n *     gap            8px between icon/label/icon\n *     font           Arimo SemiBold (600)\n *                    medium: 16/24    small: 14/20\n *     icon          24px medium, 16px small\n *     focus ring    2px solid #f4f4f6, 2px offset\n *     transition    background-color / color / border-color, fast standard\n *\n * Form-associated so it can participate in the orchestrator's `<form>`\n * exactly like a native `<button>`. Setting `type=\"submit\"` triggers\n * `form.requestSubmit()` on click; setting `type=\"reset\"` calls\n * `form.reset()`. Otherwise the click event bubbles for SPA listeners.\n *\n * The atom always renders a real `<button>` inside the shadow root —\n * `delegatesFocus` ensures Tab lands on it and `<zl-field>`'s\n * Enter-to-submit pipe still fires the host form.\n */\n@customElement(\"zl-button\")\nexport class ZlButton extends LitElement {\n  static formAssociated = true;\n\n  static override shadowRootOptions: ShadowRootInit = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  static override styles = [\n    baseHostStyles,\n    ...surfaceStyles(buttonHost, buttonSurface),\n  ];\n\n  @property({ reflect: true }) accessor hierarchy: \"primary\" | \"secondary\" | \"text\" = \"primary\";\n\n  @property({ reflect: true }) accessor size: \"medium\" | \"small\" = \"medium\";\n\n  @property() accessor type: \"button\" | \"submit\" | \"reset\" = \"button\";\n\n  @property() accessor action: string | undefined = undefined;\n\n  @property({ type: Boolean }) accessor loading = false;\n\n  @property({ type: Boolean, reflect: true }) accessor disabled = false;\n\n  @property({ type: Boolean, reflect: true }) accessor block = false;\n\n  @property() accessor label: string | undefined = undefined;\n\n  @property({ attribute: \"data-testid\" }) accessor testId: string | undefined = undefined;\n\n  /**\n   * Forces a visual interaction state on the inner button, projected to its\n   * `data-state` attribute. Used by the design playground to capture\n   * hover/pressed/focus states; reactive so toggling the host attribute\n   * re-renders.\n   */\n  @property({ attribute: \"data-state\" }) accessor forcedState: string | null = null;\n\n  private readonly internals: ElementInternals;\n\n  constructor() {\n    super();\n    this.internals = this.attachInternals();\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"click\", this.handleHostClick);\n  }\n\n  override disconnectedCallback(): void {\n    this.removeEventListener(\"click\", this.handleHostClick);\n    super.disconnectedCallback();\n  }\n\n  override focus(options?: FocusOptions): void {\n    this.shadowRoot?.querySelector<HTMLButtonElement>(\"button\")?.focus(options);\n  }\n\n  override render() {\n    const hierarchy = this.stringOption(\"hierarchy\", this.hierarchy, \"primary\");\n    const size = this.stringOption(\"size\", this.size, \"medium\");\n    const type = this.buttonType();\n    const loading = this.booleanOption(\"loading\", this.loading);\n    const disabled = this.booleanOption(\"disabled\", this.disabled);\n    const block = this.booleanOption(\"block\", this.block);\n    const label = this.stringOption(\"label\", this.label);\n    const blocked = disabled || loading;\n    // If `label` is provided, render the text directly and treat the default\n    // slot as a fallback (avoids the whitespace-only slot bug where indentation\n    // between `<zl-icon slot=\"leading\">` tags marks the default slot as\n    // \"assigned\" with text nodes, suppressing slot fallback content).\n    const body = label !== undefined ? html`<span>${label}</span>` : html`<slot></slot>`;\n    return html`\n      <button\n        class=${classMap({\n          root: true,\n          \"zr-btn\": true,\n          [`zr-btn--${hierarchy}`]: true,\n          [`zr-btn--${size}`]: true,\n          \"zr-btn--block\": block,\n        })}\n        part=\"root\"\n        type=${type}\n        ?disabled=${blocked}\n        aria-busy=${loading ? \"true\" : \"false\"}\n        data-testid=${this.nativeButtonTestId() ?? nothing}\n        data-state=${this.forcedState ?? nothing}\n        @click=${this.handleClick}\n      >\n        <slot name=\"leading\"></slot>\n        ${body}\n        ${loading\n          ? html`<span class=\"spinner\" part=\"spinner\"><zl-icon name=\"spinner\" size=${size === \"small\" ? \"16\" : \"24\"} spin decorative></zl-icon></span>`\n          : html`<slot name=\"trailing\"></slot>`}\n      </button>\n    `;\n  }\n\n  private handleClick = (event: MouseEvent): void => {\n    this.activate(event);\n  };\n\n  private handleHostClick = (event: MouseEvent): void => {\n    if (event.composedPath()[0] !== this) return;\n    this.activate(event);\n  };\n\n  private nativeButtonTestId(): string | undefined {\n    const testId = this.stringOption(\"data-testid\", this.testId);\n    if (testId) {\n      return `${testId}-button`;\n    }\n    const action = this.buttonAction();\n    return action ? `zitadel-action-${action}` : undefined;\n  }\n\n  private buttonType(): \"button\" | \"submit\" | \"reset\" {\n    const type = this.stringOption(\"type\", this.type, \"button\");\n    return type === \"submit\" || type === \"reset\" ? type : \"button\";\n  }\n\n  private buttonAction(): string | undefined {\n    return this.stringOption(\"action\", this.action);\n  }\n\n  private activate(event: MouseEvent): void {\n    const type = this.buttonType();\n    const action = this.buttonAction();\n    if (this.booleanOption(\"disabled\", this.disabled) || this.booleanOption(\"loading\", this.loading)) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n      return;\n    }\n    const form = this.internals.form;\n    if (type === \"submit\" && form) {\n      // Mirror native <button type=\"submit\"> behaviour through the\n      // shadow boundary so the host <form>'s validation runs.\n      event.preventDefault();\n      form.requestSubmit();\n    } else if (type === \"reset\" && form) {\n      event.preventDefault();\n      form.reset();\n    }\n    emit<{ action: string | null }>(this, \"zl-submit\", { action: action ?? null });\n  }\n\n  private stringOption(\n    attribute: string,\n    value: string | null | undefined,\n    fallback?: string,\n  ): string | undefined {\n    if (typeof value === \"string\" && value.length > 0) {\n      return value;\n    }\n    const attr = this.getAttribute(attribute);\n    if (attr !== null && attr.length > 0) {\n      return attr;\n    }\n    return fallback;\n  }\n\n  private booleanOption(attribute: string, value: boolean): boolean {\n    return value === true || this.hasAttribute(attribute);\n  }\n}\n\nexport const zlButtonManifest: AtomManifest = {\n  tag: \"zl-button\",\n  consumes: { action: { kind: \"submit\", required: false } },\n  attrs: [\"hierarchy\", \"size\", \"type\", \"action\", \"loading\", \"disabled\", \"block\", \"label\", \"data-testid\"],\n  parts: [\"root\", \"spinner\"],\n  slots: [\"\", \"leading\", \"trailing\"],\n  events: [\"zl-submit\"],\n} as const;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"zl-button\": ZlButton;\n  }\n}\n","/* Lit-only: <zl-card> width constraint and slotted margin reset. */\n:host {\n  display: block;\n  width: 100%;\n  max-width: var(--zl-container-auth-card, 24rem);\n  margin-inline: auto;\n}\n.zr-card ::slotted([slot=\"header\"]),\n.zr-card ::slotted([slot=\"footer\"]) {\n  margin: 0;\n}\n","/* Shared surface for `<zl-card>` / `<Card>`. Lit-only rules: lit/card-host.css */\n.zr-card {\n  width: 100%;\n  max-width: var(--zl-container-auth-card, 24rem);\n  margin-inline: auto;\n  background: transparent;\n  border: 1px solid var(--zl-color-surface-default-primary-gray, #252528);\n  border-radius: var(--zl-radius-l, 1rem);\n  padding: var(--zl-spacing-05, 2rem);\n  display: flex;\n  flex-direction: column;\n  gap: var(--zl-spacing-05, 2rem);\n  font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n  /* Match the Lit atom's `baseHostStyles` :host line-height so flowing body\n     text (slotted in Lit, a child in React) renders at the same height in both\n     renderers regardless of the host page's default. */\n  line-height: 1.5;\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  box-sizing: border-box;\n}\n.zr-card--compact {\n  gap: var(--zl-spacing-04, 1.5rem);\n}\n.zr-card__header,\n.zr-card__footer {\n  display: flex;\n  flex-direction: column;\n  gap: var(--zl-spacing-02, 0.5rem);\n}\n/* Lit keeps slots mounted; hide empty regions so flex gap matches React Card. */\n.zr-card__region--empty {\n  display: none;\n}\n.zr-card__body {\n  display: flex;\n  flex-direction: column;\n  gap: var(--zl-spacing-03, 1rem);\n}\n","import { LitElement, html } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\n\nimport cardHost from \"@zitadel/shared-component-styles/lit/card-host.css?inline\";\nimport cardSurface from \"@zitadel/shared-component-styles/card.css?inline\";\n\nimport type { AtomManifest } from \"../manifest.js\";\nimport { baseHostStyles, surfaceStyles } from \"../styles/index.js\";\n\n/**\n * Atom: `<zl-card>` — the auth-card surface used by every flow screen.\n *\n * Spec lineage (file `xkvBjkOJ8ENuHdTGZHXezK`):\n *   - sign-in: node `6593:141985` (combined sign-in card, 32px gap)\n *   - sign-up: node `6593:141743` / frame `6593:141741` (title only, 32px gap)\n *   - passkey-upsell: node `6594:632` (288h, heading+subtitle, 24px gap)\n *   - signed-in: node `6596:132846` (272h, heading+subtitle, 24px gap)\n *\n * Per-state Figma values (constant across all four screens unless noted):\n *\n *   width       384px fixed (container.auth-card token; xs collapses\n *               to full-width via the surrounding page-shell)\n *   background  transparent — the page (surface.default-black) shows\n *               through; the card is *not* an elevated surface, only\n *               outlined\n *   border      1px solid surface.default-primary-gray (#252528)\n *   radius      16px (radius.l)\n *   padding     32px all sides (spacing-05)\n *   gap         32px between header / body / footer slots (sign-in,\n *               sign-up). Passkey-upsell + signed-in tighten to 24px\n *               (spacing-04) via `compact` because their heading group\n *               carries a subtitle.\n *\n *   Internal slot gaps:\n *     header    8px (spacing-02) — heading → subtitle stack\n *     body      16px (spacing-03) — fields/buttons stack (matches\n *               Figma \"Field+CTAs\" gap)\n *     footer    8px (spacing-02) — auxiliary links\n */\n@customElement(\"zl-card\")\nexport class ZlCard extends LitElement {\n  static override styles = [baseHostStyles, ...surfaceStyles(cardHost, cardSurface)];\n\n  @property({ type: Boolean, reflect: true }) accessor compact = false;\n\n  override render() {\n    const hasHeader = this.lightDomSlotFilled(\"header\");\n    const hasFooter = this.lightDomSlotFilled(\"footer\");\n    const cardClass = this.compact ? \"zr-card zr-card--compact\" : \"zr-card\";\n    const headerClass = hasHeader ? \"zr-card__header\" : \"zr-card__header zr-card__region--empty\";\n    const footerClass = hasFooter ? \"zr-card__footer\" : \"zr-card__footer zr-card__region--empty\";\n    return html`\n      <section class=${cardClass} part=\"card\">\n        <header class=${headerClass} part=\"header\">\n          <slot name=\"header\" @slotchange=${this.onSlotChange}></slot>\n        </header>\n        <div class=\"zr-card__body\" part=\"body\">\n          <slot></slot>\n        </div>\n        <footer class=${footerClass} part=\"footer\">\n          <slot name=\"footer\" @slotchange=${this.onSlotChange}></slot>\n        </footer>\n      </section>\n    `;\n  }\n\n  /**\n   * `lightDomSlotFilled` is a render-time snapshot, so re-run render whenever a\n   * named slot's assignment changes (e.g. a header added after first paint).\n   * The initial render still reads children synchronously, avoiding the\n   * empty-then-filled flash a slotchange-only approach would introduce.\n   */\n  private onSlotChange = (): void => {\n    this.requestUpdate();\n  };\n\n  /** Slotted nodes are always light-DOM children of the host in our templates. */\n  private lightDomSlotFilled(slot: string): boolean {\n    for (const child of this.children) {\n      if (child.getAttribute(\"slot\") === slot) return true;\n    }\n    return false;\n  }\n}\n\nexport const zlCardManifest: AtomManifest = {\n  tag: \"zl-card\",\n  attrs: [\"compact\"],\n  parts: [\"card\", \"header\", \"body\", \"footer\"],\n  slots: [\"\", \"header\", \"footer\"],\n  events: [],\n} as const;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"zl-card\": ZlCard;\n  }\n}\n","/* Lit-only: <zl-checkbox> host box model. Surface rules live in checkbox.css. */\n:host {\n  display: inline-flex;\n}\n:host([disabled]) {\n  cursor: not-allowed;\n}\n","/* Shared surface for `<zl-checkbox>` / `<Checkbox>`. Lit-only rules: lit/checkbox-host.css */\n/* Figma masters: 8UjCXw8yemgljmbkWGrSfE / Checkbox 4387:460 · Checkbox / With Label 6634:1868 */\n/*\n * Figma models the two checked states as a `style` variant (Outline = unchecked,\n * Filled = checked) and the three interaction states (Hovered / Focused / Pressed)\n * as a 32px circular halo behind the 16px box. Here checked is the real\n * `:checked` input and the interaction states are real pseudo-classes\n * (`:hover`, `:focus-visible`, `:active`); the `[data-state]` hooks are\n * preview-only so the playground/stories can paint the full Figma matrix\n * statically (they are not product API). Disabled is the `--disabled` modifier.\n */\n.zr-checkbox {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--zl-spacing-02, 0.5rem);\n  font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n  /*\n   * Mirror the Lit atom's `baseHostStyles` inherited text properties. The Lit\n   * `:host` sets these and every shadow descendant inherits them; the flat React\n   * DOM has no host, so descendants that don't set their own would fall back to\n   * UA defaults (`line-height: normal`) and drift.\n   */\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  line-height: 1.5;\n  cursor: pointer;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n/*\n * React mirror of the Lit atom's `baseHostStyles` box model: every shadow\n * descendant of a `<zl-*>` atom inherits `box-sizing: border-box`, but the flat\n * React DOM has no host to anchor that, so each `.zr-checkbox__*` element would\n * default to `content-box` and drift. Pin it for the whole subtree once.\n */\n.zr-checkbox,\n.zr-checkbox *,\n.zr-checkbox *::before,\n.zr-checkbox *::after {\n  box-sizing: border-box;\n}\n\n.zr-checkbox--disabled {\n  cursor: not-allowed;\n}\n\n/* Native control: visually hidden but focusable and form-associated. */\n.zr-checkbox__input {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.zr-checkbox__box {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 1rem;\n  height: 1rem;\n}\n/* 32px circular hover/focus/pressed halo, painted behind the box face. */\n.zr-checkbox__box::before {\n  content: \"\";\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  width: 2rem;\n  height: 2rem;\n  transform: translate(-50%, -50%);\n  border-radius: 50%;\n  background: var(--zl-color-surface-default-primary-gray, #252528);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity var(--zl-duration-fast, 120ms)\n    var(--zl-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n}\n\n.zr-checkbox__face {\n  position: relative;\n  z-index: 1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1rem;\n  height: 1rem;\n  border: 1px solid var(--zl-color-icon-default-white, #f4f4f6);\n  border-radius: 2px;\n  background: transparent;\n  transition:\n    border-color var(--zl-duration-fast, 120ms) var(--zl-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n    background-color var(--zl-duration-fast, 120ms) var(--zl-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n}\n\n.zr-checkbox__check {\n  display: inline-flex;\n  color: var(--zl-color-surface-default-black, #0f0f11);\n  opacity: 0;\n}\n\n.zr-checkbox__label {\n  font-size: 0.875rem;\n  font-weight: 400;\n  line-height: 1.25rem;\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n}\n\n/* Checked (Figma \"Filled\"): solid box + visible check. */\n.zr-checkbox__input:checked + .zr-checkbox__box .zr-checkbox__face {\n  border-color: var(--zl-color-icon-default-white, #f4f4f6);\n  background: var(--zl-color-icon-default-white, #f4f4f6);\n}\n.zr-checkbox__input:checked + .zr-checkbox__box .zr-checkbox__check {\n  opacity: 1;\n}\n\n/* Halo on hover / focus / pressed. */\n.zr-checkbox:not(.zr-checkbox--disabled):hover .zr-checkbox__box::before,\n.zr-checkbox:not(.zr-checkbox--disabled):active .zr-checkbox__box::before,\n.zr-checkbox__input:focus-visible + .zr-checkbox__box::before,\n.zr-checkbox[data-state=\"hovered\"] .zr-checkbox__box::before,\n.zr-checkbox[data-state=\"focused\"] .zr-checkbox__box::before,\n.zr-checkbox[data-state=\"pressed\"] .zr-checkbox__box::before {\n  opacity: 1;\n}\n\n/* Hover — unchecked edge / checked fill move to the gray icon token. */\n.zr-checkbox:not(.zr-checkbox--disabled):hover .zr-checkbox__input:not(:checked) + .zr-checkbox__box .zr-checkbox__face,\n.zr-checkbox[data-state=\"hovered\"] .zr-checkbox__input:not(:checked) + .zr-checkbox__box .zr-checkbox__face {\n  border-color: var(--zl-color-icon-default-gray, #bfbfcf);\n}\n.zr-checkbox:not(.zr-checkbox--disabled):hover .zr-checkbox__input:checked + .zr-checkbox__box .zr-checkbox__face,\n.zr-checkbox[data-state=\"hovered\"] .zr-checkbox__input:checked + .zr-checkbox__box .zr-checkbox__face {\n  border-color: var(--zl-color-icon-default-gray, #bfbfcf);\n  background: var(--zl-color-icon-default-gray, #bfbfcf);\n}\n\n/* Focus + pressed — unchecked edge / checked fill move to the white surface token. */\n.zr-checkbox__input:focus-visible:not(:checked) + .zr-checkbox__box .zr-checkbox__face,\n.zr-checkbox:not(.zr-checkbox--disabled):active .zr-checkbox__input:not(:checked) + .zr-checkbox__box .zr-checkbox__face,\n.zr-checkbox[data-state=\"focused\"] .zr-checkbox__input:not(:checked) + .zr-checkbox__box .zr-checkbox__face,\n.zr-checkbox[data-state=\"pressed\"] .zr-checkbox__input:not(:checked) + .zr-checkbox__box .zr-checkbox__face {\n  border-color: var(--zl-color-surface-default-white, #f4f4f6);\n}\n.zr-checkbox__input:focus-visible:checked + .zr-checkbox__box .zr-checkbox__face,\n.zr-checkbox:not(.zr-checkbox--disabled):active .zr-checkbox__input:checked + .zr-checkbox__box .zr-checkbox__face,\n.zr-checkbox[data-state=\"focused\"] .zr-checkbox__input:checked + .zr-checkbox__box .zr-checkbox__face,\n.zr-checkbox[data-state=\"pressed\"] .zr-checkbox__input:checked + .zr-checkbox__box .zr-checkbox__face {\n  border-color: var(--zl-color-surface-default-white, #f4f4f6);\n  background: var(--zl-color-surface-default-white, #f4f4f6);\n}\n.zr-checkbox__input:focus-visible + .zr-checkbox__box .zr-checkbox__face {\n  outline: none;\n}\n\n/* Disabled — muted edge (unchecked) / fill (checked), no halo, muted label. */\n.zr-checkbox--disabled .zr-checkbox__input:not(:checked) + .zr-checkbox__box .zr-checkbox__face {\n  border-color: var(--zl-color-text-disabled, #686883);\n}\n.zr-checkbox--disabled .zr-checkbox__input:checked + .zr-checkbox__box .zr-checkbox__face {\n  border-color: var(--zl-color-text-disabled, #686883);\n  background: var(--zl-color-text-disabled, #686883);\n}\n.zr-checkbox--disabled .zr-checkbox__label {\n  color: var(--zl-color-text-disabled, #686883);\n}\n","/**\n * Monotonic counter for DOM IDs that need to be unique within a document but\n * stable across renders. Used by atoms that wire `<label for>` ↔ `<input id>`\n * inside their Shadow DOM.\n *\n * A counter beats `Math.random()` and `crypto.randomUUID()` here:\n *\n * - Tests get deterministic IDs.\n * - There's zero collision risk within a page.\n * - It's an order of magnitude faster on each component instantiation.\n */\nlet counter = 0;\n\nexport function nextUid(prefix: string): string {\n  counter += 1;\n  return `${prefix}-${counter}`;\n}\n","import { LitElement, html, nothing, type PropertyValues } from \"lit\";\nimport { customElement, property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\n\nimport checkboxHost from \"@zitadel/shared-component-styles/lit/checkbox-host.css?inline\";\nimport checkboxSurface from \"@zitadel/shared-component-styles/checkbox.css?inline\";\n\nimport { emit } from \"../internal/emit.js\";\nimport { nextUid } from \"../internal/unique-id.js\";\nimport type { AtomManifest } from \"../manifest.js\";\nimport { baseHostStyles, surfaceStyles } from \"../styles/index.js\";\n\nimport \"./zl-icon.js\";\n\n/** Detail shape emitted by the `zl-change` event. */\nexport type ZlCheckboxChangeDetail = { name: string; checked: boolean; value: string };\n\n/**\n * Atom: `<zl-checkbox>` — labelled checkbox bound to a boolean choice.\n *\n * Spec lineage (file `8UjCXw8yemgljmbkWGrSfE`, \"Zitadel - Design System - External\"):\n *   - bare master variant set:        node `4387:460` (Checkbox)\n *   - labelled master variant set:    node `6634:1868` (Checkbox / With Label)\n *\n * Figma models the checked state as the `style` variant (Outline = unchecked,\n * Filled = checked) and Hovered / Focused / Pressed as a 32px circular halo\n * behind the 16px box. Those map to real CSS pseudo-classes; only the optional\n * `data-state` preview hook forces a state for the design matrix.\n *\n *   Box       16px, 2px radius, 8px gap to label, Inter 14/20 label.\n *   Unchecked 1px border icon.default-white (#f4f4f6).\n *   Checked   filled icon.default-white with a dark check glyph.\n *   Hover     halo surface.default-primary-gray; edge/fill icon.default-gray.\n *   Focus/Pressed  halo + edge/fill surface.default-white.\n *   Disabled  edge/fill text.disabled (#686883), muted label, no halo.\n *\n * Form participation: `<zl-checkbox>` is a form-associated custom element, so\n * it submits its `value` only when checked, exactly like a native checkbox.\n */\n@customElement(\"zl-checkbox\")\nexport class ZlCheckbox extends LitElement {\n  static formAssociated = true;\n\n  static override shadowRootOptions: ShadowRootInit = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  static override styles = [\n    baseHostStyles,\n    ...surfaceStyles(checkboxHost, checkboxSurface),\n  ];\n\n  /**\n   * Field name — used as the key in form submission and in `zl-change` detail.\n   * The browser owns a native `name` property on form-associated elements, so\n   * we manage it manually to avoid a conflicting auto-generated accessor (see\n   * `<zl-field>`).\n   */\n  get name(): string {\n    return this.getAttribute(\"name\") ?? \"\";\n  }\n\n  set name(value: string) {\n    this.setAttribute(\"name\", value);\n  }\n\n  @property() accessor label = \"\";\n  @property() accessor value = \"on\";\n  @property({ type: Boolean, reflect: true }) accessor checked = false;\n  @property({ type: Boolean, reflect: true }) accessor disabled = false;\n  @property({ type: Boolean }) accessor required = false;\n  @property({ attribute: \"aria-label\" }) accessor ariaLabelText: string | undefined = undefined;\n  @property({ attribute: \"data-testid\" }) accessor testId: string | undefined = undefined;\n\n  /**\n   * Forces a visual interaction state on the box, projected to the root's\n   * `data-state` attribute. Preview-only — used by the design matrix to\n   * capture hover/focus/pressed without real pointer interaction.\n   */\n  @property({ attribute: \"data-state\" }) accessor forcedState: string | null = null;\n\n  @query(\".zr-checkbox__input\") private accessor inputEl: HTMLInputElement | null = null;\n\n  private readonly inputId = nextUid(\"zl-checkbox\");\n  private readonly internals: ElementInternals;\n  private defaultChecked = false;\n\n  constructor() {\n    super();\n    this.internals = this.attachInternals();\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.defaultChecked = this.hasAttribute(\"checked\");\n    this.syncFormState();\n  }\n\n  override willUpdate(changed: PropertyValues<this>): void {\n    if (changed.has(\"checked\") || changed.has(\"required\") || changed.has(\"value\")) {\n      this.syncFormState();\n    }\n  }\n\n  formResetCallback(): void {\n    this.checked = this.defaultChecked;\n  }\n\n  formStateRestoreCallback(state: string | null): void {\n    this.checked = state === this.value;\n  }\n\n  override focus(options?: FocusOptions): void {\n    this.inputEl?.focus(options);\n  }\n\n  override render() {\n    const rootClass = classMap({\n      \"zr-checkbox\": true,\n      \"zr-checkbox--disabled\": this.disabled,\n    });\n    const labelText = this.label;\n    return html`\n      <label class=${rootClass} part=\"root\" data-state=${this.forcedState ?? nothing}>\n        <input\n          class=\"zr-checkbox__input\"\n          part=\"input\"\n          id=${this.inputId}\n          type=\"checkbox\"\n          name=${this.name || nothing}\n          .checked=${live(this.checked)}\n          value=${this.value}\n          ?required=${this.required}\n          ?disabled=${this.disabled}\n          aria-label=${ifDefined(labelText ? undefined : this.ariaLabelText)}\n          data-testid=${ifDefined(this.nativeInputTestId())}\n          @change=${this.handleChange}\n        />\n        <span class=\"zr-checkbox__box\" part=\"box\">\n          <span class=\"zr-checkbox__face\" part=\"face\">\n            <zl-icon class=\"zr-checkbox__check\" part=\"check\" name=\"check\" size=\"16\" decorative></zl-icon>\n          </span>\n        </span>\n        ${labelText\n          ? html`<span class=\"zr-checkbox__label\" part=\"label\">${labelText}</span>`\n          : html`<slot></slot>`}\n      </label>\n    `;\n  }\n\n  private handleChange = (event: Event): void => {\n    event.stopPropagation();\n    const input = event.target as HTMLInputElement;\n    this.checked = input.checked;\n    this.syncFormState();\n    emit<ZlCheckboxChangeDetail>(this, \"zl-change\", {\n      name: this.name,\n      checked: this.checked,\n      value: this.value,\n    });\n    this.dispatchEvent(new Event(\"change\", { bubbles: true, composed: true }));\n  };\n\n  private syncFormState(): void {\n    this.internals.setFormValue?.(this.checked ? this.value : null);\n    if (this.required && !this.checked) {\n      this.internals.setValidity?.({ valueMissing: true }, \"Please check this box to continue.\");\n    } else {\n      this.internals.setValidity?.({});\n    }\n  }\n\n  private nativeInputTestId(): string | undefined {\n    if (this.name) {\n      return `zitadel-checkbox-${this.name}`;\n    }\n    if (this.testId) {\n      return `${this.testId}-input`;\n    }\n    return undefined;\n  }\n}\n\nexport const zlCheckboxManifest: AtomManifest = {\n  tag: \"zl-checkbox\",\n  attrs: [\n    \"name\",\n    \"label\",\n    \"value\",\n    \"checked\",\n    \"disabled\",\n    \"required\",\n    \"aria-label\",\n    \"data-testid\",\n  ],\n  parts: [\"root\", \"input\", \"box\", \"face\", \"check\", \"label\"],\n  slots: [\"\"],\n  events: [\"zl-change\"],\n} as const;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"zl-checkbox\": ZlCheckbox;\n  }\n}\n","/* Lit-only: <zl-field> slots, hidden helpers, dev-matrix preview states. */\n:host {\n  display: block;\n}\n::slotted([slot=\"prefix\"]),\n::slotted([slot=\"suffix\"]) {\n  color: var(--zl-color-text-secondary-gray, #bfbfcf);\n  display: inline-flex;\n}\n.zr-field__help[hidden],\n.zr-field__error[hidden] {\n  display: none;\n}\n\n/* Atom playground only — `data-state` on `<zl-field>` documents Figma columns; not product API. */\n:host([data-state=\"hovered\"]:not([disabled])) .zr-field:not(.zr-field--invalid):not(.zr-field--success)\n  .zr-field__wrap:not(:focus-within) {\n  border-color: var(--zl-color-gray-500, #9e9eb2);\n  background-color: color-mix(in srgb, var(--zl-color-text-primary-white, #f4f4f6) 10%, transparent);\n}\n:host([data-state=\"focused\"]:not([disabled])) .zr-field:not(.zr-field--invalid):not(.zr-field--success)\n  .zr-field__wrap {\n  border-color: var(--zl-color-border-default-white, #f4f4f6);\n}\n:host([data-state=\"focused\"]:not([disabled])) .zr-field--invalid .zr-field__wrap {\n  border-color: var(--zl-color-border-error, #ea4f70);\n}\n:host([data-state=\"focused\"]:not([disabled])) .zr-field--success .zr-field__wrap {\n  border-color: var(--zl-color-border-success, #33a779);\n}\n","/* Shared surface for `<zl-field>` / `<TextField>`. Lit-only rules: lit/text-field-host.css */\n/* Figma master: 8UjCXw8yemgljmbkWGrSfE / Text Field 4390:1404 */\n.zr-field {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: var(--zl-spacing-02, 0.5rem);\n  font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n}\n.zr-field__label-row {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: var(--zl-spacing-02, 0.5rem);\n  width: 100%;\n}\n.zr-field__label {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--zl-spacing-01, 0.25rem);\n  font-size: 1rem;\n  font-weight: 600;\n  line-height: 1.5rem;\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n}\n.zr-field__link {\n  flex-shrink: 0;\n  font-size: 0.875rem;\n  font-weight: 400;\n  line-height: 1.25rem;\n  color: var(--zl-color-icon-default-purple, #bba5e4);\n  text-decoration: none;\n}\n.zr-field__link:hover {\n  text-decoration: underline;\n}\n.zr-field__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  border-radius: 2px;\n}\n.zr-field__required {\n  color: var(--zl-color-text-error, #ea4f70);\n}\n.zr-field--disabled .zr-field__label {\n  color: var(--zl-color-text-disabled, #686883);\n}\n.zr-field__wrap {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: var(--zl-spacing-02, 0.5rem);\n  padding-block: var(--zl-spacing-02, 0.5rem);\n  padding-inline: var(--zl-spacing-03, 1rem);\n  height: 2.5rem;\n  border-radius: var(--zl-radius-xs, 0.25rem);\n  border: 1px solid var(--zl-color-border-default-gray-300, #686883);\n  background: transparent;\n  overflow: visible;\n  transition:\n    border-color var(--zl-duration-fast, 120ms) var(--zl-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n    background-color var(--zl-duration-fast, 120ms) var(--zl-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n  box-sizing: border-box;\n}\n.zr-field__wrap--trailing {\n  padding-inline-end: 2.5rem;\n}\n.zr-field:not(.zr-field--disabled) .zr-field__wrap:hover:not(:focus-within) {\n  border-color: var(--zl-color-gray-500, #9e9eb2);\n  background-color: color-mix(in srgb, var(--zl-color-text-primary-white, #f4f4f6) 10%, transparent);\n}\n.zr-field:not(.zr-field--invalid):not(.zr-field--disabled):not(.zr-field--success)\n  .zr-field__wrap:has(.zr-field__input:not(:placeholder-shown)):not(:focus-within) {\n  border-color: var(--zl-color-border-default-gray-400, #82829c);\n}\n/* Figma State=Focused (`4390:2180`): single 1px border on the field — no outer focus ring. */\n.zr-field:not(.zr-field--invalid):not(.zr-field--disabled):not(.zr-field--success) .zr-field__wrap:focus-within {\n  border-color: var(--zl-color-border-default-white, #f4f4f6);\n  outline: none;\n}\n.zr-field--invalid .zr-field__wrap {\n  border-color: var(--zl-color-border-error, #ea4f70);\n}\n.zr-field--invalid .zr-field__wrap:focus-within {\n  border-color: var(--zl-color-border-error, #ea4f70);\n  outline: none;\n}\n.zr-field--success .zr-field__wrap {\n  border-color: var(--zl-color-border-success, #33a779);\n}\n.zr-field--success .zr-field__wrap:focus-within {\n  border-color: var(--zl-color-border-success, #33a779);\n  outline: none;\n}\n.zr-field--disabled .zr-field__wrap {\n  border-color: var(--zl-color-border-default-gray-200, #484a57);\n}\n.zr-field__input {\n  flex: 1 1 auto;\n  min-width: 0;\n  height: 100%;\n  padding: 0;\n  border: 0;\n  outline: none;\n  background: transparent;\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  font-family: inherit;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  font-weight: 400;\n}\n.zr-field__input[type=\"password\"] {\n  letter-spacing: 0.125rem;\n}\n.zr-field__input::placeholder {\n  color: var(--zl-color-text-secondary-gray, #bfbfcf);\n}\n.zr-field__input:focus,\n.zr-field__input:focus-visible {\n  outline: none;\n}\n.zr-field__input:disabled {\n  cursor: not-allowed;\n  color: var(--zl-color-text-disabled, #686883);\n}\n.zr-field--disabled .zr-field__wrap:hover {\n  border-color: var(--zl-color-border-default-gray-200, #484a57);\n  background-color: transparent;\n}\n.zr-field__trailing {\n  position: absolute;\n  right: 0.9375rem;\n  top: 50%;\n  transform: translateY(-50%);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1rem;\n  height: 1rem;\n  color: var(--zl-color-text-secondary-gray, #bfbfcf);\n}\n.zr-field__trailing-action {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  margin: 0;\n  border: 0;\n  background: transparent;\n  color: inherit;\n  cursor: pointer;\n  line-height: 0;\n}\n.zr-field__trailing-action:focus-visible {\n  outline: var(--zl-focus-width, 2px) solid var(--zl-focus-color, #f4f4f6);\n  outline-offset: var(--zl-focus-offset, 2px);\n  border-radius: 2px;\n}\n.zr-field__trailing-action:disabled {\n  cursor: not-allowed;\n}\n.zr-field--invalid .zr-field__trailing {\n  color: var(--zl-color-text-error, #ea4f70);\n}\n.zr-field--success .zr-field__trailing {\n  color: var(--zl-color-text-success, #33a779);\n}\n.zr-field__help {\n  font-size: 0.75rem;\n  line-height: 1rem;\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n}\n.zr-field__success {\n  font-size: 0.75rem;\n  line-height: 1rem;\n  color: var(--zl-color-text-success, #33a779);\n}\n.zr-field__error {\n  font-size: 0.75rem;\n  line-height: 1rem;\n  color: var(--zl-color-text-error, #ea4f70);\n}\n","/**\n * Reserved auth-method credential prefix of flow field names. Mirrors\n * `AUTH_METHOD_PREFIX` in `@zitadel/config` (`src/validate.ts`), which\n * owns the wire dialect; components has no dependency on that package,\n * so the literal is repeated here.\n */\nconst AUTH_METHOD_PREFIX = \"x-auth-methods#\";\n\n/**\n * Normalises a flow field name into its automation-hook token.\n *\n * Auth-method credential fields arrive from the flow engine as\n * `x-auth-methods#<method>` (e.g. `x-auth-methods#password`), but the\n * documented `data-testid` hooks are method-named\n * (`zitadel-field-password`, `zitadel-input-password` — see\n * packages/components/README.md and apps/cli/SKILLS.md). This helper\n * feeds both hook construction sites: the bundled template's `testid`\n * Liquid filter and `<zl-field>`'s native-input testid.\n *\n * Only the reserved credential prefix is stripped — user-schema\n * property names are tenant-authored arbitrary strings, so a `#`\n * anywhere else is part of the name and stays in the hook. The\n * after-prefix token is used verbatim (no case or spacing changes),\n * and the field's `name` attribute always keeps the raw wire/form key.\n */\nexport function hookName(field: string): string {\n  if (field.startsWith(AUTH_METHOD_PREFIX) && field.length > AUTH_METHOD_PREFIX.length) {\n    return field.slice(AUTH_METHOD_PREFIX.length);\n  }\n  return field;\n}\n","import type { CreateFlow201StepFieldsItemType } from \"@zitadel/api/generated/model\";\nimport { LitElement, html, nothing, type PropertyValues } from \"lit\";\nimport { customElement, property, query, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\n\nimport fieldHost from \"@zitadel/shared-component-styles/lit/text-field-host.css?inline\";\nimport fieldSurface from \"@zitadel/shared-component-styles/text-field.css?inline\";\n\nimport { emit } from \"../internal/emit.js\";\nimport { hookName } from \"../internal/hook-name.js\";\nimport { nextUid } from \"../internal/unique-id.js\";\nimport type { AtomManifest } from \"../manifest.js\";\nimport { baseHostStyles, surfaceStyles } from \"../styles/index.js\";\n\nimport \"./zl-icon.js\";\nimport type { IconName } from \"./zl-icon.js\";\n\n/**\n * Alias of the orval-generated wire enum for field types so the atom's\n * accepted `type` values track the API contract exactly.\n */\nexport type ZlFieldType = CreateFlow201StepFieldsItemType;\n\n/** Detail shape emitted by the `zl-input` event (input + clear). */\nexport type ZlFieldInputDetail = { name: string; value: string };\n\n/**\n * Atom: `<zl-field>` — labelled input bound to a step `field`. Visual\n * spec lineage:\n *   - design-system master variant set: node `4390:1404` (file\n *     `8UjCXw8yemgljmbkWGrSfE`) — Enabled / Hovered / Focused / Filled /\n *     Disabled / Error / Success / Password forgot\n *\n * Per-state Figma values (master `4390:1404`):\n *\n *   Layout\n *     root         flex-column, gap=8px (spacing-02)\n *     label row    optional \"Forgot password?\" link (#bba5e4, 14/20)\n *     input-wrap   40px, padding 8/16, trailing icon at right 15px\n *     trailing     cross (clear) | alert-circle (error) | check (success)\n *\n * Form participation: `<zl-field>` is a form-associated custom element.\n */\n@customElement(\"zl-field\")\nexport class ZlField extends LitElement {\n  static formAssociated = true;\n\n  static override shadowRootOptions: ShadowRootInit = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  static override styles = [\n    baseHostStyles,\n    ...surfaceStyles(fieldHost, fieldSurface),\n  ];\n\n  /**\n   * Field name — used as the key in form submission and in `zl-input` event\n   * detail. For form-associated custom elements the browser owns a native\n   * `name` property; using `@property()` would create a conflicting accessor\n   * that loses sync with the DOM attribute. We therefore manage it manually.\n   */\n  get name(): string {\n    return this.getAttribute(\"name\") ?? \"\";\n  }\n\n  set name(value: string) {\n    this.setAttribute(\"name\", value);\n  }\n  @property() accessor label = \"\";\n  @property() accessor type: ZlFieldType = \"text\";\n  @property() accessor value = \"\";\n  @property() accessor placeholder = \"\";\n  @property() accessor autocomplete: string | undefined = undefined;\n  @property() accessor pattern: string | undefined = undefined;\n  @property() accessor error = \"\";\n  @property() accessor success = \"\";\n  @property({ attribute: \"data-testid\" }) accessor testId: string | undefined = undefined;\n  @property({ attribute: \"forgot-password-href\" }) accessor forgotPasswordHref: string | undefined =\n    undefined;\n  @property({ attribute: \"forgot-password-label\" }) accessor forgotPasswordLabel =\n    \"Forgot password?\";\n  @property({ type: Boolean, attribute: \"trailing-icon\" }) accessor trailingIcon = true;\n  @property({ type: Boolean }) accessor required = false;\n  @property({ type: Boolean, reflect: true }) accessor disabled = false;\n  @property({ type: Boolean, reflect: true }) accessor invalid = false;\n\n  @state() private accessor hasHelp = false;\n  @state() private accessor hasSuffixSlot = false;\n\n  @query(\".zr-field__input\") private accessor inputEl: HTMLInputElement | null = null;\n\n  private readonly inputId = nextUid(\"zl-field\");\n  private readonly internals: ElementInternals;\n\n  constructor() {\n    super();\n    this.internals = this.attachInternals();\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.syncFormState();\n  }\n\n  override willUpdate(changed: PropertyValues<this>): void {\n    if (changed.has(\"value\") || changed.has(\"required\") || changed.has(\"error\")) {\n      this.syncFormState();\n    }\n  }\n\n  formResetCallback(): void {\n    this.value = \"\";\n  }\n\n  formStateRestoreCallback(state: string | null): void {\n    this.value = state ?? \"\";\n  }\n\n  override focus(options?: FocusOptions): void {\n    this.inputEl?.focus(options);\n  }\n\n  override render() {\n    const labelId = `${this.inputId}-label`;\n    const errorId = `${this.inputId}-error`;\n    const successId = `${this.inputId}-success`;\n    const helpId = `${this.inputId}-help`;\n    const showError = Boolean(this.error);\n    const showSuccess = Boolean(this.success) && !showError && !this.invalid;\n    const describedBy = [\n      showError ? errorId : null,\n      showSuccess ? successId : null,\n      this.hasHelp ? helpId : null,\n    ]\n      .filter(Boolean)\n      .join(\" \");\n    const rootClass = classMap({\n      \"zr-field\": true,\n      \"zr-field--invalid\": this.invalid || showError,\n      \"zr-field--success\": showSuccess,\n      \"zr-field--disabled\": this.disabled,\n    });\n    const showDefaultTrailing =\n      this.trailingIcon && !this.hasSuffixSlot && !this.disabled;\n    const trailing = showDefaultTrailing ? this.renderTrailingIcon() : null;\n    const wrapClass = classMap({\n      \"zr-field__wrap\": true,\n      \"zr-field__wrap--trailing\": showDefaultTrailing,\n    });\n\n    return html`\n      <div class=${rootClass} part=\"root\">\n        ${this.renderLabelRow(labelId)}\n        <div class=${wrapClass} part=\"input-wrap\">\n          <slot name=\"prefix\"></slot>\n          <input\n            class=\"zr-field__input\"\n            part=\"input\"\n            id=${this.inputId}\n            data-testid=${ifDefined(this.nativeInputTestId())}\n            name=${this.name}\n            type=${this.type}\n            .value=${live(this.value)}\n            placeholder=${this.placeholder}\n            autocomplete=${ifDefined(this.autocomplete)}\n            pattern=${ifDefined(this.pattern)}\n            ?required=${this.required}\n            ?disabled=${this.disabled}\n            aria-invalid=${this.invalid || showError ? \"true\" : \"false\"}\n            aria-describedby=${describedBy || nothing}\n            @input=${this.handleInput}\n            @change=${this.handleChange}\n            @keydown=${this.handleKeyDown}\n          />\n          <slot name=\"suffix\" @slotchange=${this.handleSuffixSlotChange}></slot>\n          ${trailing}\n        </div>\n        <div class=\"zr-field__help\" part=\"help\" id=${helpId} ?hidden=${!this.hasHelp}>\n          <slot name=\"help\" @slotchange=${this.handleHelpSlotChange}></slot>\n        </div>\n        <div\n          class=\"zr-field__success\"\n          part=\"success\"\n          id=${successId}\n          role=\"status\"\n          ?hidden=${!showSuccess}\n        >\n          ${this.success}\n        </div>\n        <div class=\"zr-field__error\" part=\"error\" id=${errorId} role=\"alert\" ?hidden=${!showError}>\n          ${this.error}\n        </div>\n      </div>\n    `;\n  }\n\n  private renderLabelRow(labelId: string) {\n    if (!this.label) {\n      return null;\n    }\n    if (this.forgotPasswordHref) {\n      return html`\n        <div class=\"zr-field__label-row\" part=\"label-row\">\n          <label class=\"zr-field__label\" part=\"label\" id=${labelId} for=${this.inputId}>\n            <span>${this.label}</span>\n            ${this.required\n              ? html`<span class=\"zr-field__required\" aria-hidden=\"true\">*</span>`\n              : null}\n          </label>\n          <a class=\"zr-field__link\" part=\"forgot-link\" href=${this.forgotPasswordHref}\n            >${this.forgotPasswordLabel}</a\n          >\n        </div>\n      `;\n    }\n    return html`\n      <label class=\"zr-field__label\" part=\"label\" id=${labelId} for=${this.inputId}>\n        <span>${this.label}</span>\n        ${this.required\n          ? html`<span class=\"zr-field__required\" aria-hidden=\"true\">*</span>`\n          : null}\n      </label>\n    `;\n  }\n\n  private renderTrailingIcon() {\n    let iconName: IconName = \"cross\";\n    let tone: \"default\" | \"error\" | \"success\" = \"default\";\n    let clearable = true;\n\n    if (this.invalid || this.error) {\n      iconName = \"alert-circle\";\n      tone = \"error\";\n      clearable = false;\n    } else if (this.success) {\n      iconName = \"check\";\n      tone = \"success\";\n      clearable = false;\n    }\n\n    const icon = html`<zl-icon name=${iconName} size=\"16\" tone=${tone} decorative></zl-icon>`;\n\n    if (!clearable) {\n      return html`<span class=\"zr-field__trailing\" part=\"trailing-icon\">${icon}</span>`;\n    }\n\n    return html`\n      <span class=\"zr-field__trailing\" part=\"trailing-icon\">\n        <button\n          type=\"button\"\n          class=\"zr-field__trailing-action\"\n          part=\"trailing-action\"\n          aria-label=\"Clear\"\n          ?disabled=${this.disabled}\n          @click=${this.handleClear}\n        >\n          ${icon}\n        </button>\n      </span>\n    `;\n  }\n\n  private syncFormState(): void {\n    this.internals.setFormValue?.(this.value);\n    if (this.required && !this.value) {\n      this.internals.setValidity?.({ valueMissing: true }, \"Please fill out this field.\");\n    } else if (this.error) {\n      this.internals.setValidity?.({ customError: true }, this.error);\n    } else {\n      this.internals.setValidity?.({});\n    }\n  }\n\n  private handleHelpSlotChange = (event: Event): void => {\n    const slot = event.target as HTMLSlotElement;\n    this.hasHelp = slot.assignedNodes({ flatten: true }).length > 0;\n  };\n\n  private handleSuffixSlotChange = (event: Event): void => {\n    const slot = event.target as HTMLSlotElement;\n    this.hasSuffixSlot = slot.assignedNodes({ flatten: true }).length > 0;\n  };\n\n  private handleClear = (): void => {\n    this.value = \"\";\n    emit<ZlFieldInputDetail>(this, \"zl-input\", { name: this.name, value: this.value });\n    this.syncFormState();\n    this.dispatchNativeInput();\n    this.inputEl?.focus();\n  };\n\n  private handleInput = (event: Event): void => {\n    event.stopPropagation();\n    const input = event.target as HTMLInputElement;\n    this.value = input.value;\n    this.syncFormState();\n    emit<ZlFieldInputDetail>(this, \"zl-input\", { name: this.name, value: this.value });\n    this.dispatchNativeInput(event);\n  };\n\n  private handleChange = (event: Event): void => {\n    event.stopPropagation();\n    const input = event.target as HTMLInputElement;\n    this.value = input.value;\n    this.syncFormState();\n    this.dispatchNativeChange();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent): void => {\n    if (\n      event.key === \"Enter\" &&\n      !event.isComposing &&\n      !event.shiftKey &&\n      !event.altKey &&\n      !event.metaKey &&\n      !event.ctrlKey\n    ) {\n      const form = this.internals.form;\n      if (form) {\n        event.preventDefault();\n        form.requestSubmit();\n      }\n    }\n  };\n\n  private nativeInputTestId(): string | undefined {\n    if (this.name) {\n      // Field host hooks use zitadel-field-*; native hooks can be name-first\n      // without colliding with the host, unlike action buttons. The hook\n      // token is normalised (x-auth-methods#password → password) while\n      // `name` stays the raw form key.\n      return `zitadel-input-${hookName(this.name)}`;\n    }\n    if (this.testId) {\n      return `${this.testId}-input`;\n    }\n    return undefined;\n  }\n\n  private dispatchNativeInput(source?: Event): void {\n    if (typeof InputEvent === \"function\") {\n      const input = source instanceof InputEvent ? source : undefined;\n      this.dispatchEvent(\n        new InputEvent(\"input\", {\n          bubbles: true,\n          composed: true,\n          data: input?.data ?? null,\n          inputType: input?.inputType ?? \"\",\n          isComposing: input?.isComposing ?? false,\n        }),\n      );\n      return;\n    }\n    this.dispatchEvent(new Event(\"input\", { bubbles: true, composed: true }));\n  }\n\n  private dispatchNativeChange(): void {\n    this.dispatchEvent(new Event(\"change\", { bubbles: true, composed: true }));\n  }\n}\n\nexport const zlFieldManifest: AtomManifest = {\n  tag: \"zl-field\",\n  consumes: { field: { required: true } },\n  attrs: [\n    \"name\",\n    \"label\",\n    \"type\",\n    \"value\",\n    \"placeholder\",\n    \"autocomplete\",\n    \"pattern\",\n    \"data-testid\",\n    \"required\",\n    \"disabled\",\n    \"invalid\",\n    \"error\",\n    \"success\",\n    \"forgot-password-href\",\n    \"forgot-password-label\",\n    \"trailing-icon\",\n  ],\n  parts: [\n    \"root\",\n    \"label\",\n    \"label-row\",\n    \"forgot-link\",\n    \"input-wrap\",\n    \"input\",\n    \"trailing-icon\",\n    \"trailing-action\",\n    \"help\",\n    \"success\",\n    \"error\",\n  ],\n  slots: [\"prefix\", \"suffix\", \"help\"],\n  events: [\"zl-input\"],\n} as const;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"zl-field\": ZlField;\n  }\n}\n","/* Lit-only: <zl-page-shell> host background; layout lives on .zr-page-shell. */\n:host {\n  display: block;\n  min-height: 100vh;\n  background: var(--zl-color-surface-default-black, #0f0f11);\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n}\n/* Playground / embed preview — parent sets height (e.g. `.page-shell-frame`). */\n:host([data-embedded]) {\n  min-height: 100%;\n  height: 100%;\n}\n:host([data-embedded]) .zr-page-shell {\n  min-height: 100%;\n}\n.zr-page-shell ::slotted([slot=\"header\"]),\n.zr-page-shell ::slotted([slot=\"footer\"]) {\n  margin: 0;\n}\n","/* Shared surface for `<zl-page-shell>` / `<PageShell>`. Lit-only rules: lit/page-shell-host.css */\n.zr-page-shell {\n  min-height: 100vh;\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  /* Match the Lit atom's `baseHostStyles` :host line-height so slotted/child\n     content renders at the same height in both renderers. */\n  line-height: 1.5;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: var(--zl-spacing-04, 1.5rem);\n  padding-block: var(--zl-spacing-05, 2rem);\n  padding-inline: var(--zl-spacing-03, 1rem);\n  box-sizing: border-box;\n}\n@media (min-width: 48rem) {\n  .zr-page-shell {\n    padding-block: 3.25rem;\n    padding-inline: var(--zl-spacing-03, 1rem);\n  }\n}\n.zr-page-shell__header,\n.zr-page-shell__main,\n.zr-page-shell__footer {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n}\n.zr-page-shell__main {\n  flex: 0 0 auto;\n}\n.zr-page-shell__footer {\n  min-height: 1.5rem;\n}\n/* Lit keeps slots mounted; hide empty regions so flex gap matches React PageShell. */\n.zr-page-shell__region--empty {\n  display: none;\n}\n.zr-page-shell[data-embedded] {\n  min-height: 100%;\n  height: 100%;\n}\n","import { LitElement, html } from \"lit\";\nimport { customElement } from \"lit/decorators.js\";\n\nimport pageShellHost from \"@zitadel/shared-component-styles/lit/page-shell-host.css?inline\";\nimport pageShellSurface from \"@zitadel/shared-component-styles/page-shell.css?inline\";\n\nimport type { AtomManifest } from \"../manifest.js\";\nimport { baseHostStyles, surfaceStyles } from \"../styles/index.js\";\n\n/**\n * Atom: `<zl-page-shell>` — the full-bleed auth-page chrome the\n * orchestrator injects around every flow template. Responsible for the\n * dark background, vertical centring, responsive padding, and footer\n * attribution slot.\n *\n * Spec lineage (file `xkvBjkOJ8ENuHdTGZHXezK`):\n *   - 2xl frames (1536 × 960), e.g. sign-up `6593:141741`, passkey\n *     `6594:630`, signed-in `6596:132844`. The outer wrapper uses\n *     `py-[52px]` (vertical padding) with `p-[16px]` (spacing-03) on\n *     the inner Form container, giving 52px / 16px at 2xl.\n *\n * Per-state Figma values:\n *\n *   background  surface.default-black (#0f0f11)\n *   color       text.primary-white (#f4f4f6) inherited\n *   min-height  100vh — anchors footer to the viewport bottom even on\n *               short cards\n *   padding @md+   padding-block 52px, padding-inline 16px (matches\n *               Figma 2xl wrapper). 52px isn't a token; use raw value.\n *   padding @xs (< 48rem)\n *               padding-block 32px (spacing-05), padding-inline 16px\n *               (spacing-03) — tighter so the card breathes on\n *               narrow phones.\n *   gap         24px (spacing-04) between header / main / footer slots\n *   footer      min-height 1.5rem to reserve room for the attribution\n *               pill even when the slot is empty (prevents jitter).\n */\n@customElement(\"zl-page-shell\")\nexport class ZlPageShell extends LitElement {\n  static override styles = [\n    baseHostStyles,\n    ...surfaceStyles(pageShellHost, pageShellSurface),\n  ];\n\n  override render() {\n    const hasHeader = this.lightDomSlotFilled(\"header\");\n    const hasFooter = this.lightDomSlotFilled(\"footer\");\n    const headerClass = hasHeader\n      ? \"zr-page-shell__header\"\n      : \"zr-page-shell__header zr-page-shell__region--empty\";\n    const footerClass = hasFooter\n      ? \"zr-page-shell__footer\"\n      : \"zr-page-shell__footer zr-page-shell__region--empty\";\n    return html`\n      <div class=\"zr-page-shell\" part=\"shell\">\n        <header class=${headerClass} part=\"header\">\n          <slot name=\"header\" @slotchange=${this.onSlotChange}></slot>\n        </header>\n        <main class=\"zr-page-shell__main\" part=\"main\">\n          <slot></slot>\n        </main>\n        <footer class=${footerClass} part=\"footer\">\n          <slot name=\"footer\" @slotchange=${this.onSlotChange}></slot>\n        </footer>\n      </div>\n    `;\n  }\n\n  /**\n   * Re-render when a named slot's assignment changes so a footer/header added\n   * after first paint updates the empty-region class. The initial render reads\n   * children synchronously (no empty-then-filled flash).\n   */\n  private onSlotChange = (): void => {\n    this.requestUpdate();\n  };\n\n  private lightDomSlotFilled(slot: string): boolean {\n    for (const child of this.children) {\n      if (child.getAttribute(\"slot\") === slot) return true;\n    }\n    return false;\n  }\n}\n\nexport const zlPageShellManifest: AtomManifest = {\n  tag: \"zl-page-shell\",\n  attrs: [],\n  parts: [\"shell\", \"header\", \"main\", \"footer\"],\n  slots: [\"\", \"header\", \"footer\"],\n  events: [],\n} as const;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"zl-page-shell\": ZlPageShell;\n  }\n}\n","/**\n * Base64URL encoding/decoding for WebAuthn binary fields.\n *\n * WebAuthn's `ArrayBuffer` values (`rawId`, `clientDataJSON`,\n * `authenticatorData`, `signature`, `attestationObject`, `userHandle`)\n * must be base64url-encoded before sending as JSON. The WebAuthn JSON\n * serialization spec (https://www.w3.org/TR/webauthn-3/) requires\n * Base64URL (RFC 4648 §5) — no padding, URL-safe alphabet.\n */\n\n/**\n * Encode an `ArrayBuffer` to a Base64URL string (no padding).\n */\nexport function bufferToBase64Url(buffer: ArrayBuffer): string {\n  const bytes = new Uint8Array(buffer);\n  let binary = \"\";\n  for (const byte of bytes) {\n    binary += String.fromCharCode(byte);\n  }\n  return btoa(binary).replace(/\\+/g, \"-\").replace(/\\//g, \"_\").replace(/=/g, \"\");\n}\n\n/**\n * Decode a Base64URL string to an `ArrayBuffer`.\n */\nexport function base64UrlToBuffer(base64url: string): ArrayBuffer {\n  const base64 = base64url.replace(/-/g, \"+\").replace(/_/g, \"/\");\n  const padded = base64.padEnd(base64.length + ((4 - (base64.length % 4)) % 4), \"=\");\n  const binary = atob(padded);\n  const bytes = new Uint8Array(binary.length);\n  for (let i = 0; i < binary.length; i++) {\n    bytes[i] = binary.charCodeAt(i);\n  }\n  return bytes.buffer;\n}\n","import { html, LitElement, nothing } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\n\nimport { bufferToBase64Url, base64UrlToBuffer } from \"../internal/base64url.js\";\nimport type { AtomManifest } from \"../manifest.js\";\n\nimport \"./zl-alert.js\";\nimport \"./zl-button.js\";\n\n/**\n * Detail shape emitted by the `zl-passkey-result` event.\n *\n * Mirrors the `passkey-proof.yaml` schema (serialized PublicKeyCredential)\n * plus the `challenge_id` the orchestrator needs for the submit body.\n */\nexport type ZlPasskeyResultDetail = {\n  challenge_id: string;\n  method: string;\n  proof: {\n    id: string;\n    rawId: string;\n    type: \"public-key\";\n    response: {\n      clientDataJSON: string;\n      attestationObject?: string;\n      authenticatorData?: string;\n      signature?: string;\n      userHandle?: string;\n    };\n    authenticatorAttachment?: \"platform\" | \"cross-platform\";\n  };\n};\n\n/**\n * Detail shape emitted by the `zl-passkey-error` event.\n *\n * `aborted` covers both programmatic aborts and the browser's\n * `NotAllowedError` (user dismissed the prompt — or the ceremony timed\n * out, which browsers report identically). `timed_out` refines that:\n * true when the rejection arrived at/after the server's `options.timeout`,\n * so callers can show timeout copy instead of \"cancelled\".\n */\nexport type ZlPasskeyErrorDetail = {\n  challenge_id: string;\n  error: string;\n  aborted: boolean;\n  timed_out: boolean;\n};\n\n/**\n * Detail shape emitted by the `zl-passkey-started` event, fired when the\n * WebAuthn ceremony actually begins (after the support/options guards).\n */\nexport type ZlPasskeyStartedDetail = {\n  challenge_id: string;\n  method: string;\n};\n\n/**\n * Slack subtracted from `options.timeout` when classifying a\n * `NotAllowedError` as a timeout: browsers clamp and fire the deadline\n * slightly early, so an exact comparison would label real timeouts as\n * user cancellations.\n */\nconst TIMEOUT_GRACE_MS = 1000;\n\n/**\n * Atom: `<zl-passkey>` — WebAuthn ceremony handler.\n *\n * It is mounted by the Liquid template when\n * `step.challenge.type === \"passkey\"`. On mount, it reads the challenge\n * options from attributes, triggers the appropriate `navigator.credentials`\n * ceremony, and emits the result.\n *\n * While the ceremony is in flight it renders a small pending UI (status\n * line + cancel button) into its light DOM — light DOM so the markup the\n * orchestrator renders through `unsafeHTML` stays byte-identical and the\n * step subtree is never rebuilt mid-ceremony (a rebuild would reconnect\n * this atom and restart the ceremony). Set `silent` to suppress the\n * pending UI entirely.\n *\n * The orchestrator listens for `zl-passkey-result` to auto-submit the\n * proof via `challenge_response` on the flow submit body.\n *\n * Two modes:\n * - `ceremony=\"authenticate\"` → `navigator.credentials.get()` (login)\n * - `ceremony=\"register\"` → `navigator.credentials.create()` (registration)\n *\n * The options are passed as a JSON string via the `options` attribute (or\n * as a JS object via the `.options` property). These are the\n * `PublicKeyCredentialRequestOptions` or `PublicKeyCredentialCreationOptions`\n * straight from the server's challenge response.\n *\n * Spec: ADR 011 — Passkey Action Contract\n */\n@customElement(\"zl-passkey\")\nexport class ZlPasskey extends LitElement {\n  /**\n   * Which WebAuthn ceremony to perform.\n   * - `authenticate` → `navigator.credentials.get()` (default, login)\n   * - `register` → `navigator.credentials.create()` (passkey enrollment)\n   */\n  @property() accessor ceremony: \"authenticate\" | \"register\" = \"authenticate\";\n\n  /**\n   * Server-side challenge identifier. Echoed back in the result event\n   * so the orchestrator can include it in `challenge_response.challenge_id`.\n   */\n  @property({ attribute: \"challenge-id\" }) accessor challengeId = \"\";\n\n  /**\n   * WebAuthn options from the server. Accepts either:\n   * - A JSON string (via HTML attribute)\n   * - A JS object (via property binding)\n   *\n   * For `ceremony=\"authenticate\"`: `PublicKeyCredentialRequestOptions`\n   * For `ceremony=\"register\"`: `PublicKeyCredentialCreationOptions`\n   */\n  @property({\n    attribute: \"options\",\n    converter: {\n      fromAttribute(value: string | null) {\n        if (!value) return null;\n        try {\n          return JSON.parse(value) as Record<string, unknown>;\n        } catch {\n          return null;\n        }\n      },\n      toAttribute(value: Record<string, unknown> | null) {\n        return value ? JSON.stringify(value) : null;\n      },\n    },\n  })\n  accessor options: Record<string, unknown> | null = null;\n\n  /**\n   * Challenge method echoed back in the result event so the orchestrator\n   * can include it in `challenge_response.method`. Defaults to `\"passkey\"`.\n   */\n  @property({ type: String }) accessor method = \"passkey\";\n\n  /**\n   * When true, the ceremony is not started automatically on mount.\n   * The consumer must call `startCeremony()` manually.\n   */\n  @property({ type: Boolean }) accessor manual = false;\n\n  /** Status line shown while the ceremony is in flight. Template-owned copy. */\n  @property({ attribute: \"pending-label\" }) accessor pendingLabel = \"Waiting for your passkey…\";\n\n  /** Label of the cancel button shown while the ceremony is in flight. */\n  @property({ attribute: \"cancel-label\" }) accessor cancelLabel = \"Cancel\";\n\n  /** Suppresses the built-in pending UI (headless / custom-template use). */\n  @property({ type: Boolean }) accessor silent = false;\n\n  /** True from ceremony start until it resolves, rejects, or is aborted. */\n  @state() accessor pending = false;\n\n  private abortController: AbortController | null = null;\n\n  /** `Date.now()` at ceremony start, for timeout classification on reject. */\n  private startedAt = 0;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (!this.manual && this.options) {\n      void this.startCeremony();\n    }\n  }\n\n  override disconnectedCallback(): void {\n    this.abort();\n    super.disconnectedCallback();\n  }\n\n  /**\n   * Abort any in-flight WebAuthn ceremony. Called automatically when the\n   * component disconnects (step change, page navigation) and by the\n   * pending UI's cancel button. Clears `pending` immediately — the\n   * ceremony's own `finally` no longer owns it (its controller is gone).\n   */\n  abort(): void {\n    this.abortController?.abort();\n    this.abortController = null;\n    this.pending = false;\n  }\n\n  /**\n   * Trigger the WebAuthn ceremony. Resolves when the ceremony completes\n   * or rejects on error/abort.\n   */\n  async startCeremony(): Promise<void> {\n    if (!this.options) {\n      this.emitError(\"No WebAuthn options provided.\", false);\n      return;\n    }\n\n    if (!window.PublicKeyCredential) {\n      this.emitError(\"WebAuthn is not supported in this browser.\", false);\n      return;\n    }\n\n    this.abort();\n    const controller = new AbortController();\n    this.abortController = controller;\n    this.pending = true;\n    this.startedAt = Date.now();\n    this.emitStarted();\n\n    try {\n      const credential =\n        this.ceremony === \"register\"\n          ? await this.createCredential()\n          : await this.getCredential();\n\n      if (!credential) {\n        this.emitError(\"No credential returned by the browser.\", false);\n        return;\n      }\n\n      const proof = this.serializeCredential(credential);\n      this.emitResult(proof);\n    } catch (error) {\n      const aborted =\n        error instanceof DOMException &&\n        (error.name === \"AbortError\" || error.name === \"NotAllowedError\");\n      // Browsers report a ceremony timeout as `NotAllowedError`, identical\n      // to a user dismissal. Only elapsed time tells them apart; a\n      // programmatic `AbortError` is never a timeout.\n      const timeoutMs = typeof this.options?.timeout === \"number\" ? this.options.timeout : null;\n      const timedOut =\n        error instanceof DOMException &&\n        error.name === \"NotAllowedError\" &&\n        timeoutMs !== null &&\n        Date.now() - this.startedAt >= timeoutMs - TIMEOUT_GRACE_MS;\n\n      this.emitError(\n        error instanceof Error ? error.message : \"WebAuthn ceremony failed.\",\n        aborted,\n        timedOut,\n      );\n    } finally {\n      // A restarted ceremony (manual `startCeremony()` while one is in\n      // flight) aborts the old run; its late `finally` must not clear the\n      // new run's pending state.\n      if (this.abortController === controller) {\n        this.pending = false;\n      }\n    }\n  }\n\n  private handleCancelSubmit = (event: Event): void => {\n    // The cancel button's `zl-submit` must not reach the orchestrator's\n    // shadow-root listener — it would be treated as a step submission.\n    event.stopPropagation();\n    this.abort();\n  };\n\n  override render() {\n    if (!this.pending || this.silent) {\n      return nothing;\n    }\n    return html`\n      <div class=\"zl-passkey-pending\" data-testid=\"zitadel-passkey-pending\">\n        <zl-alert severity=\"info\">${this.pendingLabel}</zl-alert>\n        <zl-button\n          hierarchy=\"secondary\"\n          type=\"button\"\n          block\n          data-testid=\"zitadel-passkey-cancel\"\n          label=${this.cancelLabel}\n          @zl-submit=${this.handleCancelSubmit}\n        ></zl-button>\n      </div>\n    `;\n  }\n\n  /**\n   * `navigator.credentials.get()` — authentication ceremony.\n   */\n  private async getCredential(): Promise<PublicKeyCredential | null> {\n    const opts = this.options;\n    if (!opts) throw new Error(\"getCredential called without options\");\n\n    const publicKeyOptions: PublicKeyCredentialRequestOptions = {\n      challenge: base64UrlToBuffer(opts.challenge as string),\n      rpId: opts.rpId as string | undefined,\n      timeout: opts.timeout as number | undefined,\n      userVerification: opts.userVerification as UserVerificationRequirement | undefined,\n      allowCredentials: this.decodeCredentialDescriptors(\n        opts.allowCredentials as Array<Record<string, unknown>> | undefined,\n      ),\n    };\n\n    const result = await navigator.credentials.get({\n      publicKey: publicKeyOptions,\n      signal: this.abortController?.signal,\n    });\n\n    return result as PublicKeyCredential | null;\n  }\n\n  /**\n   * `navigator.credentials.create()` — registration ceremony.\n   */\n  private async createCredential(): Promise<PublicKeyCredential | null> {\n    const opts = this.options;\n    if (!opts) throw new Error(\"createCredential called without options\");\n\n    const rp = opts.rp as { id?: string; name: string };\n    const user = opts.user as Record<string, unknown>;\n    const pubKeyCredParams = opts.pubKeyCredParams as Array<{\n      type: string;\n      alg: number;\n    }>;\n\n    const publicKeyOptions: PublicKeyCredentialCreationOptions = {\n      challenge: base64UrlToBuffer(opts.challenge as string),\n      rp: { name: rp.name, ...(rp.id ? { id: rp.id } : {}) },\n      user: {\n        id: base64UrlToBuffer(user.id as string),\n        name: user.name as string,\n        displayName: user.displayName as string,\n      },\n      pubKeyCredParams: pubKeyCredParams.map((p) => ({\n        type: p.type as PublicKeyCredentialType,\n        alg: p.alg,\n      })),\n      timeout: opts.timeout as number | undefined,\n      attestation: (opts.attestation as AttestationConveyancePreference) ?? \"none\",\n      authenticatorSelection: opts.authenticatorSelection as\n        | AuthenticatorSelectionCriteria\n        | undefined,\n      excludeCredentials: this.decodeCredentialDescriptors(\n        opts.excludeCredentials as Array<Record<string, unknown>> | undefined,\n      ),\n    };\n\n    const result = await navigator.credentials.create({\n      publicKey: publicKeyOptions,\n      signal: this.abortController?.signal,\n    });\n\n    return result as PublicKeyCredential | null;\n  }\n\n  /**\n   * Decode a list of credential descriptors from the server's base64url\n   * format to the browser's ArrayBuffer format.\n   */\n  private decodeCredentialDescriptors(\n    descriptors: Array<Record<string, unknown>> | undefined,\n  ): PublicKeyCredentialDescriptor[] {\n    if (!descriptors) return [];\n    return descriptors.map((d) => ({\n      type: d.type as PublicKeyCredentialType,\n      id: base64UrlToBuffer(d.id as string),\n      transports: d.transports as AuthenticatorTransport[] | undefined,\n    }));\n  }\n\n  /**\n   * Serialize a `PublicKeyCredential` to the JSON shape defined in\n   * `passkey-proof.yaml`. All `ArrayBuffer` fields are base64url-encoded.\n   */\n  private serializeCredential(\n    credential: PublicKeyCredential,\n  ): ZlPasskeyResultDetail[\"proof\"] {\n    const response = credential.response;\n\n    const serialized: ZlPasskeyResultDetail[\"proof\"] = {\n      id: credential.id,\n      rawId: bufferToBase64Url(credential.rawId),\n      type: \"public-key\",\n      response: {\n        clientDataJSON: bufferToBase64Url(response.clientDataJSON),\n      },\n    };\n\n    // Attestation response (registration)\n    if (\"attestationObject\" in response) {\n      const attestation = response as AuthenticatorAttestationResponse;\n      serialized.response.attestationObject = bufferToBase64Url(\n        attestation.attestationObject,\n      );\n    }\n\n    // Assertion response (authentication)\n    if (\"authenticatorData\" in response) {\n      const assertion = response as AuthenticatorAssertionResponse;\n      serialized.response.authenticatorData = bufferToBase64Url(\n        assertion.authenticatorData,\n      );\n      serialized.response.signature = bufferToBase64Url(assertion.signature);\n      if (assertion.userHandle) {\n        serialized.response.userHandle = bufferToBase64Url(assertion.userHandle);\n      }\n    }\n\n    if (credential.authenticatorAttachment) {\n      serialized.authenticatorAttachment = credential.authenticatorAttachment as\n        | \"platform\"\n        | \"cross-platform\";\n    }\n\n    return serialized;\n  }\n\n  private emitResult(proof: ZlPasskeyResultDetail[\"proof\"]): void {\n    const detail: ZlPasskeyResultDetail = {\n      challenge_id: this.challengeId,\n      method: this.method,\n      proof,\n    };\n    this.dispatchEvent(\n      new CustomEvent(\"zl-passkey-result\", {\n        bubbles: true,\n        composed: true,\n        detail,\n      }),\n    );\n  }\n\n  private emitError(message: string, aborted: boolean, timedOut = false): void {\n    const detail: ZlPasskeyErrorDetail = {\n      challenge_id: this.challengeId,\n      error: message,\n      aborted,\n      timed_out: timedOut,\n    };\n    this.dispatchEvent(\n      new CustomEvent(\"zl-passkey-error\", {\n        bubbles: true,\n        composed: true,\n        detail,\n      }),\n    );\n  }\n\n  private emitStarted(): void {\n    const detail: ZlPasskeyStartedDetail = {\n      challenge_id: this.challengeId,\n      method: this.method,\n    };\n    this.dispatchEvent(\n      new CustomEvent(\"zl-passkey-started\", {\n        bubbles: true,\n        composed: true,\n        detail,\n      }),\n    );\n  }\n\n  /**\n   * Light DOM on purpose: the pending UI must land inside the\n   * orchestrator's shadow root (where the step's adopted styles apply)\n   * without altering the `unsafeHTML` step markup — runtime children don't\n   * participate in its string comparison, so the ceremony never restarts.\n   */\n  override createRenderRoot(): this {\n    return this;\n  }\n}\n\nexport const zlPasskeyManifest: AtomManifest = {\n  tag: \"zl-passkey\",\n  consumes: {},\n  attrs: [\n    \"ceremony\",\n    \"method\",\n    \"challenge-id\",\n    \"options\",\n    \"manual\",\n    \"pending-label\",\n    \"cancel-label\",\n    \"silent\",\n  ],\n  parts: [],\n  slots: [],\n  events: [\"zl-passkey-result\", \"zl-passkey-error\", \"zl-passkey-started\"],\n} as const;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"zl-passkey\": ZlPasskey;\n  }\n}\n","/* Lit-only: <zl-pill> host display. Tone variants use .zr-pill--* on the surface node. */\n:host {\n  display: inline-flex;\n}\n\n/* Attribution logotype is slotted light DOM (orchestrator + playground). */\n::slotted(.zr-pill__logotype) {\n  display: block;\n  flex-shrink: 0;\n  width: 65px;\n  height: 16px;\n  margin-top: 2px;\n  line-height: 0;\n}\n\n::slotted(.zr-pill__logotype-svg) {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n","/* Shared surface for `<zl-pill>` / `<Pill>`. Lit-only rules: lit/pill-host.css */\n.zr-pill {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: flex-start;\n  justify-content: center;\n  gap: var(--zl-spacing-02, 0.5rem);\n  height: 2.5rem;\n  padding-inline: var(--zl-spacing-03, 1rem);\n  padding-block: calc((2.5rem - 1.25rem - 2px) / 2);\n  border-radius: 100px;\n  font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n  font-size: 0.875rem;\n  font-weight: 400;\n  line-height: 1.25rem;\n  letter-spacing: 0;\n  text-transform: none;\n  background:\n    linear-gradient(182deg, rgb(72 74 87 / 0.6) 28.65%, rgb(15 15 17 / 0.6) 81.82%),\n    var(--zl-color-surface-default-primary-gray, #252528);\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  border: 1px solid var(--zl-color-border-default-gray-200, #484a57);\n  text-decoration: none;\n  white-space: nowrap;\n}\n.zr-pill__logotype {\n  display: block;\n  flex-shrink: 0;\n  width: 65px;\n  height: 16px;\n  margin-top: 2px;\n  line-height: 0;\n}\n.zr-pill__logotype-svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n.zr-pill--pink {\n  color: var(--zl-color-text-subtitle-pink);\n  border-color: var(--zl-color-text-subtitle-pink);\n  background: color-mix(in srgb, var(--zl-color-text-subtitle-pink) 10%, var(--zl-color-surface-default-primary-gray));\n}\n.zr-pill--purple {\n  color: var(--zl-color-text-subtitle-purple);\n  border-color: var(--zl-color-text-subtitle-purple);\n  background: color-mix(in srgb, var(--zl-color-text-subtitle-purple) 10%, var(--zl-color-surface-default-primary-gray));\n}\n.zr-pill--orange {\n  color: var(--zl-color-text-subtitle-orange);\n  border-color: var(--zl-color-text-subtitle-orange);\n  background: color-mix(in srgb, var(--zl-color-text-subtitle-orange) 10%, var(--zl-color-surface-default-primary-gray));\n}\n.zr-pill--success {\n  color: var(--zl-color-text-success);\n  border-color: var(--zl-color-text-success);\n  background: color-mix(in srgb, var(--zl-color-text-success) 10%, var(--zl-color-surface-default-primary-gray));\n}\na.zr-pill: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","import { LitElement, html, nothing } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\n\nimport pillHost from \"@zitadel/shared-component-styles/lit/pill-host.css?inline\";\nimport pillSurface from \"@zitadel/shared-component-styles/pill.css?inline\";\n\nimport type { AtomManifest } from \"../manifest.js\";\nimport { baseHostStyles, surfaceStyles } from \"../styles/index.js\";\n\n/**\n * Atom: `<zl-pill>` — small inline chip used for status and attribution.\n *\n * Spec lineage (file `xkvBjkOJ8ENuHdTGZHXezK`):\n *   - canonical instance: node `6593:141767` (\"Social media\" frame =\n *     \"Secured with Zitadel\" attribution pill on every sign-in screen).\n *\n * Two roles in scope:\n *   - **Attribution pill** (\"Secured with Zitadel\") rendered by the\n *     orchestrator footer when `branding.attribution` is enabled. This is\n *     the only canonical pill in the Figma screens; its spec is the\n *     source of truth for every dimension.\n *   - **Status pill** (decorative `tone` variants — pink / purple /\n *     orange / success) reuses the same geometry and typography, only\n *     swapping the tint colour. The tones don't have screen instances in\n *     Figma yet; when they ship, re-verify each tone against its master.\n *\n * Per-state Figma values (from node `6593:141767`):\n *\n *   surface     bg layered linear-gradient(182deg,\n *                 rgba(72,74,87,0.6) 28.65%,\n *                 rgba(15,15,17,0.6) 81.82%)\n *                 over surface.default-primary-gray (#252528)\n   *   border      1px solid #484a57 (our token: border.default-gray-200 —\n   *                 Figma calls this \"default-gray-100\"; our gray primitive\n   *                 ladder is offset by one slot, so map to gray-200)\n *   radius      100px (full pill)\n *   size        186×40px frame (`get_metadata` on `6593:141767`)\n *   padding     16px inline (spacing-03) / 10px block (spacing metadata:\n *                 text y=10, line 20px, frame height 40px)\n *   gap         8px (spacing-02)\n *   font        Arimo Regular 14/20, letter-spacing 0, color\n *               text.primary-white (#f4f4f6), text-transform none\n *   focus-vis   2px solid focus.color, offset 2px\n *\n *   content     \"Secured with\" + 65×16 logotype SVG (`attribution-markup.ts`);\n *               logotype `margin-top: 2px` (Figma text y=10, logotype y=12)\n */\n@customElement(\"zl-pill\")\nexport class ZlPill extends LitElement {\n  static override styles = [baseHostStyles, ...surfaceStyles(pillHost, pillSurface)];\n\n  @property() accessor tone: \"neutral\" | \"pink\" | \"purple\" | \"orange\" | \"success\" = \"neutral\";\n\n  @property() accessor href: string | undefined = undefined;\n\n  @property({ attribute: \"aria-label\" })\n  override accessor ariaLabel: string | null = null;\n\n  override render() {\n    const classes = classMap({\n      \"zr-pill\": true,\n      [`zr-pill--${this.tone}`]: this.tone !== \"neutral\",\n    });\n    if (this.href) {\n      return html`<a\n        class=${classes}\n        part=\"pill\"\n        href=${this.href}\n        rel=\"noopener\"\n        aria-label=${this.ariaLabel ?? nothing}\n      ><slot></slot></a>`;\n    }\n    return html`<span class=${classes} part=\"pill\"><slot></slot></span>`;\n  }\n}\n\nexport const zlPillManifest: AtomManifest = {\n  tag: \"zl-pill\",\n  attrs: [\"tone\", \"href\", \"aria-label\"],\n  parts: [\"pill\"],\n  slots: [\"\"],\n  events: [],\n} as const;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"zl-pill\": ZlPill;\n  }\n}\n","/* Lit-only: <zl-select> host box model. Surface rules live in select.css. */\n:host {\n  display: block;\n}\n:host([disabled]) {\n  cursor: not-allowed;\n}\n","/* Shared surface for `<zl-select>` / `<Select>`. Lit-only rules: lit/select-host.css */\n/* Figma masters: 8UjCXw8yemgljmbkWGrSfE / Dropdown 4397:4816 · Items 4397:4098 */\n/*\n * A select-only combobox: a button trigger (`.zr-select__trigger`) that opens a\n * `role=\"listbox\"` popup (`.zr-select__listbox`). The trigger mirrors the text\n * field box (border, radius, 40px, hover/focus border tokens); the popup options\n * use the Figma \"Items\" states — hover/keyboard-active paint the 10% white wash,\n * the chosen row gets the `surface/default-primary-gray` fill plus a check glyph.\n */\n.zr-select {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: var(--zl-spacing-02, 0.5rem);\n  /*\n   * Mirror the Lit atom's `baseHostStyles` inherited text properties. The Lit\n   * `:host` sets these and every shadow descendant inherits them; the flat React\n   * DOM has no host, so descendants that don't set their own (e.g. the listbox\n   * `<ul>`) would fall back to UA defaults (`line-height: normal`) and drift.\n   */\n  font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  line-height: 1.5;\n}\n\n/*\n * React mirror of the Lit atom's `baseHostStyles` box model: every shadow\n * descendant of a `<zl-*>` atom inherits `box-sizing: border-box`, but the flat\n * React DOM has no host to anchor that, so each `.zr-select__*` element would\n * default to `content-box` and drift (e.g. a 40px row painting at 56px once the\n * 8px block padding is added on top). Pin it for the whole subtree once.\n */\n.zr-select,\n.zr-select *,\n.zr-select *::before,\n.zr-select *::after {\n  box-sizing: border-box;\n}\n\n.zr-select__label {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--zl-spacing-01, 0.25rem);\n  font-size: 1rem;\n  font-weight: 600;\n  line-height: 1.5rem;\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n}\n.zr-select__required {\n  color: var(--zl-color-text-error, #ea4f70);\n}\n.zr-select--disabled .zr-select__label {\n  color: var(--zl-color-text-disabled, #686883);\n}\n\n/* Positioning context for the absolutely-placed popup. */\n.zr-select__field {\n  position: relative;\n}\n\n.zr-select__trigger {\n  display: flex;\n  align-items: center;\n  gap: var(--zl-spacing-02, 0.5rem);\n  width: 100%;\n  height: 2.5rem;\n  padding-block: var(--zl-spacing-02, 0.5rem);\n  padding-inline: var(--zl-spacing-03, 1rem);\n  margin: 0;\n  border-radius: var(--zl-radius-xs, 0.25rem);\n  border: 1px solid var(--zl-color-border-default-gray-300, #686883);\n  background: transparent;\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  font-family: inherit;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  font-weight: 400;\n  text-align: start;\n  cursor: pointer;\n  transition:\n    border-color var(--zl-duration-fast, 120ms) var(--zl-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n    background-color var(--zl-duration-fast, 120ms) var(--zl-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n}\n.zr-select__value {\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n}\n.zr-select__value--placeholder {\n  color: var(--zl-color-text-secondary-gray, #bfbfcf);\n}\n.zr-select__icon {\n  flex-shrink: 0;\n  display: inline-flex;\n  color: var(--zl-color-text-secondary-gray, #bfbfcf);\n  transition: transform var(--zl-duration-fast, 120ms)\n    var(--zl-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n}\n.zr-select--open .zr-select__icon {\n  transform: rotate(180deg);\n}\n\n/* Hover — match the text field box. */\n.zr-select:not(.zr-select--disabled):not(.zr-select--open) .zr-select__trigger:hover {\n  border-color: var(--zl-color-gray-500, #9e9eb2);\n  background-color: color-mix(in srgb, var(--zl-color-text-primary-white, #f4f4f6) 10%, transparent);\n}\n/* Focus / open — single white border, no outer ring (Figma Focused). */\n.zr-select:not(.zr-select--disabled) .zr-select__trigger:focus-visible,\n.zr-select--open .zr-select__trigger {\n  border-color: var(--zl-color-border-default-white, #f4f4f6);\n  outline: none;\n}\n.zr-select--disabled .zr-select__trigger {\n  border-color: var(--zl-color-border-default-gray-200, #484a57);\n  color: var(--zl-color-text-disabled, #686883);\n  cursor: not-allowed;\n}\n.zr-select--disabled .zr-select__value--placeholder {\n  color: var(--zl-color-text-disabled, #686883);\n}\n\n.zr-select__listbox {\n  position: absolute;\n  top: calc(100% + var(--zl-spacing-02, 0.5rem));\n  left: 0;\n  right: 0;\n  z-index: 20;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  max-height: 15rem;\n  overflow-y: auto;\n  border-radius: var(--zl-radius-xs, 0.25rem);\n  border: 1px solid var(--zl-color-border-default-gray-200, #484a57);\n  background: var(--zl-color-surface-default-black, #0f0f11);\n}\n.zr-select__listbox[hidden] {\n  display: none;\n}\n\n.zr-select__option {\n  display: flex;\n  align-items: center;\n  gap: var(--zl-spacing-02, 0.5rem);\n  height: 2.5rem;\n  padding-block: var(--zl-spacing-02, 0.5rem);\n  padding-inline: var(--zl-spacing-03, 1rem);\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  cursor: pointer;\n}\n.zr-select__option-label {\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.zr-select__option-check {\n  flex-shrink: 0;\n  display: inline-flex;\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  opacity: 0;\n}\n\n/* Hover / keyboard-active — 10% white wash (Figma \"Hovered\"). */\n.zr-select__option:not([aria-disabled=\"true\"]):hover,\n.zr-select__option[data-active=\"true\"]:not([aria-disabled=\"true\"]) {\n  background-color: color-mix(in srgb, var(--zl-color-text-primary-white, #f4f4f6) 10%, transparent);\n}\n/* Selected — solid fill + visible check (Figma \"Selected\"). */\n.zr-select__option[aria-selected=\"true\"] {\n  background-color: var(--zl-color-surface-default-primary-gray, #252528);\n}\n.zr-select__option[aria-selected=\"true\"] .zr-select__option-check {\n  opacity: 1;\n}\n.zr-select__option[aria-disabled=\"true\"] {\n  color: var(--zl-color-text-disabled, #686883);\n  cursor: not-allowed;\n}\n","import { LitElement, html, nothing, type PropertyValues } from \"lit\";\nimport { customElement, property, query, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\n\nimport selectHost from \"@zitadel/shared-component-styles/lit/select-host.css?inline\";\nimport selectSurface from \"@zitadel/shared-component-styles/select.css?inline\";\n\nimport { emit } from \"../internal/emit.js\";\nimport { nextUid } from \"../internal/unique-id.js\";\nimport type { AtomManifest } from \"../manifest.js\";\nimport { baseHostStyles, surfaceStyles } from \"../styles/index.js\";\n\nimport \"./zl-icon.js\";\n\n/** A single choice in a `<zl-select>` listbox. */\nexport interface ZlSelectOption {\n  value: string;\n  label: string;\n  disabled?: boolean;\n}\n\n/** Detail shape emitted by the `zl-change` event. */\nexport type ZlSelectChangeDetail = { name: string; value: string };\n\n/**\n * Atom: `<zl-select>` — a select-only combobox bound to a single choice.\n *\n * Spec lineage (file `8UjCXw8yemgljmbkWGrSfE`, \"Zitadel - Design System - External\"):\n *   - trigger + open/selected matrix:  node `4397:4816` (Dropdown)\n *   - option (Items) state matrix:      node `4397:4098` (Input text)\n *\n * The trigger mirrors `<zl-field>`'s box; the popup is a `role=\"listbox\"` whose\n * options paint the Figma hover / keyboard-active wash and the chosen row's\n * solid fill + check glyph. Follows the WAI-ARIA select-only combobox pattern:\n * focus stays on the trigger and `aria-activedescendant` tracks the active\n * option, so arrow keys move a virtual cursor without moving DOM focus.\n *\n * Form participation: `<zl-select>` is a form-associated custom element; its\n * `value` is the selected option's value (empty string = nothing chosen).\n */\n@customElement(\"zl-select\")\nexport class ZlSelect extends LitElement {\n  static formAssociated = true;\n\n  static override shadowRootOptions: ShadowRootInit = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  static override styles = [\n    baseHostStyles,\n    ...surfaceStyles(selectHost, selectSurface),\n  ];\n\n  /**\n   * Field name — used as the key in form submission and in `zl-change` detail.\n   * Managed manually to avoid clobbering the native form-associated `name`\n   * accessor the browser owns (see `<zl-field>` / `<zl-checkbox>`).\n   */\n  get name(): string {\n    return this.getAttribute(\"name\") ?? \"\";\n  }\n\n  set name(value: string) {\n    this.setAttribute(\"name\", value);\n  }\n\n  @property() accessor label = \"\";\n  @property() accessor value = \"\";\n  @property() accessor placeholder = \"Select…\";\n  /**\n   * Listbox options. Accepts either a JS array (property binding, used by React\n   * and Storybook) or a JSON string (the `options` attribute, used by the\n   * orchestrator's Liquid template, which can only emit markup). Mirrors the\n   * `<zl-passkey>` options contract.\n   */\n  @property({\n    attribute: \"options\",\n    converter: {\n      fromAttribute(value: string | null): ZlSelectOption[] {\n        if (!value) return [];\n        try {\n          const parsed: unknown = JSON.parse(value);\n          return Array.isArray(parsed) ? (parsed as ZlSelectOption[]) : [];\n        } catch {\n          return [];\n        }\n      },\n    },\n  })\n  accessor options: ZlSelectOption[] = [];\n  @property({ type: Boolean }) accessor required = false;\n  @property({ type: Boolean, reflect: true }) accessor disabled = false;\n  @property({ type: Boolean, reflect: true }) accessor open = false;\n  @property({ attribute: \"aria-label\" }) accessor ariaLabelText: string | undefined = undefined;\n  @property({ attribute: \"data-testid\" }) accessor testId: string | undefined = undefined;\n\n  @state() private accessor activeIndex = -1;\n\n  @query(\".zr-select__trigger\") private accessor triggerEl: HTMLButtonElement | null = null;\n\n  private readonly baseId = nextUid(\"zl-select\");\n  private readonly internals: ElementInternals;\n  private defaultValue = \"\";\n\n  constructor() {\n    super();\n    this.internals = this.attachInternals();\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    // Reset default mirrors native form controls: the initial `value` attribute,\n    // not a property assigned later (see `<zl-checkbox>` reading `checked`).\n    this.defaultValue = this.getAttribute(\"value\") ?? \"\";\n    this.syncFormState();\n    document.addEventListener(\"pointerdown\", this.handleDocumentPointerDown, true);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener(\"pointerdown\", this.handleDocumentPointerDown, true);\n  }\n\n  override willUpdate(changed: PropertyValues<this>): void {\n    if (changed.has(\"value\") || changed.has(\"required\")) {\n      this.syncFormState();\n    }\n    if (changed.has(\"disabled\") && this.disabled) {\n      this.open = false;\n    }\n  }\n\n  formResetCallback(): void {\n    this.value = this.defaultValue;\n    this.open = false;\n  }\n\n  formStateRestoreCallback(state: string | null): void {\n    this.value = state ?? \"\";\n  }\n\n  override focus(options?: FocusOptions): void {\n    this.triggerEl?.focus(options);\n  }\n\n  override render() {\n    const labelId = `${this.baseId}-label`;\n    const listboxId = `${this.baseId}-listbox`;\n    const selected = this.options.find((option) => option.value === this.value);\n    const rootClass = classMap({\n      \"zr-select\": true,\n      \"zr-select--open\": this.open,\n      \"zr-select--disabled\": this.disabled,\n    });\n\n    return html`\n      <div class=${rootClass} part=\"root\">\n        ${this.renderLabel(labelId)}\n        <div class=\"zr-select__field\" part=\"field\">\n          <button\n            type=\"button\"\n            class=\"zr-select__trigger\"\n            part=\"trigger\"\n            id=${`${this.baseId}-trigger`}\n            role=\"combobox\"\n            aria-haspopup=\"listbox\"\n            aria-expanded=${this.open ? \"true\" : \"false\"}\n            aria-controls=${listboxId}\n            aria-labelledby=${this.label ? labelId : nothing}\n            aria-label=${ifDefined(this.label ? undefined : this.ariaLabelText)}\n            aria-activedescendant=${this.open && this.activeIndex >= 0\n              ? this.optionId(this.activeIndex)\n              : nothing}\n            data-testid=${ifDefined(this.triggerTestId())}\n            ?disabled=${this.disabled}\n            @click=${this.handleTriggerClick}\n            @keydown=${this.handleTriggerKeyDown}\n          >\n            <span\n              class=${classMap({\n                \"zr-select__value\": true,\n                \"zr-select__value--placeholder\": !selected,\n              })}\n            >\n              ${selected ? selected.label : this.placeholder}\n            </span>\n            <zl-icon class=\"zr-select__icon\" name=\"chevron-down\" size=\"16\" decorative></zl-icon>\n          </button>\n          <ul\n            class=\"zr-select__listbox\"\n            part=\"listbox\"\n            id=${listboxId}\n            role=\"listbox\"\n            tabindex=\"-1\"\n            aria-labelledby=${this.label ? labelId : nothing}\n            ?hidden=${!this.open}\n          >\n            ${this.options.map((option, index) => this.renderOption(option, index))}\n          </ul>\n        </div>\n      </div>\n    `;\n  }\n\n  private renderLabel(labelId: string) {\n    if (!this.label) {\n      return null;\n    }\n    return html`\n      <label class=\"zr-select__label\" part=\"label\" id=${labelId} @click=${this.handleLabelClick}>\n        <span>${this.label}</span>\n        ${this.required\n          ? html`<span class=\"zr-select__required\" aria-hidden=\"true\">*</span>`\n          : null}\n      </label>\n    `;\n  }\n\n  private renderOption(option: ZlSelectOption, index: number) {\n    const isSelected = option.value === this.value;\n    return html`\n      <li\n        class=\"zr-select__option\"\n        part=\"option\"\n        id=${this.optionId(index)}\n        role=\"option\"\n        aria-selected=${isSelected ? \"true\" : \"false\"}\n        aria-disabled=${option.disabled ? \"true\" : nothing}\n        data-active=${this.open && index === this.activeIndex ? \"true\" : nothing}\n        data-value=${option.value}\n        @click=${() => this.handleOptionClick(index)}\n        @pointermove=${() => this.handleOptionPointerMove(index)}\n      >\n        <span class=\"zr-select__option-label\">${option.label}</span>\n        <zl-icon class=\"zr-select__option-check\" name=\"check\" size=\"16\" decorative></zl-icon>\n      </li>\n    `;\n  }\n\n  private optionId(index: number): string {\n    return `${this.baseId}-option-${index}`;\n  }\n\n  private handleLabelClick = (): void => {\n    if (!this.disabled) {\n      this.triggerEl?.focus();\n    }\n  };\n\n  private handleTriggerClick = (): void => {\n    if (this.disabled) {\n      return;\n    }\n    if (this.open) {\n      this.close();\n    } else {\n      this.openMenu();\n    }\n  };\n\n  private handleTriggerKeyDown = (event: KeyboardEvent): void => {\n    if (this.disabled) {\n      return;\n    }\n    switch (event.key) {\n      case \"ArrowDown\":\n      case \"ArrowUp\":\n        event.preventDefault();\n        if (!this.open) {\n          this.openMenu();\n        } else {\n          this.moveActive(event.key === \"ArrowDown\" ? 1 : -1);\n        }\n        break;\n      case \"Home\":\n        if (this.open) {\n          event.preventDefault();\n          this.setActive(this.firstEnabledIndex());\n        }\n        break;\n      case \"End\":\n        if (this.open) {\n          event.preventDefault();\n          this.setActive(this.lastEnabledIndex());\n        }\n        break;\n      case \"Enter\":\n      case \" \":\n        event.preventDefault();\n        if (this.open) {\n          this.commitActive();\n        } else {\n          this.openMenu();\n        }\n        break;\n      case \"Escape\":\n        if (this.open) {\n          event.preventDefault();\n          this.close();\n        }\n        break;\n      case \"Tab\":\n        if (this.open) {\n          this.close();\n        }\n        break;\n      default:\n        break;\n    }\n  };\n\n  private handleOptionClick(index: number): void {\n    if (this.options[index]?.disabled) {\n      return;\n    }\n    this.setActive(index);\n    this.commitActive();\n  }\n\n  private handleOptionPointerMove(index: number): void {\n    if (!this.options[index]?.disabled && index !== this.activeIndex) {\n      this.activeIndex = index;\n    }\n  }\n\n  private handleDocumentPointerDown = (event: Event): void => {\n    if (this.open && !event.composedPath().includes(this)) {\n      this.close();\n    }\n  };\n\n  private openMenu(): void {\n    if (this.options.length === 0) {\n      return;\n    }\n    this.open = true;\n    const selectedIndex = this.options.findIndex((option) => option.value === this.value);\n    this.activeIndex = selectedIndex >= 0 ? selectedIndex : this.firstEnabledIndex();\n  }\n\n  private close(): void {\n    if (!this.open) {\n      return;\n    }\n    this.open = false;\n    this.activeIndex = -1;\n    this.triggerEl?.focus();\n  }\n\n  private commitActive(): void {\n    const option = this.options[this.activeIndex];\n    if (!option || option.disabled) {\n      return;\n    }\n    const changed = option.value !== this.value;\n    this.value = option.value;\n    this.open = false;\n    this.activeIndex = -1;\n    this.triggerEl?.focus();\n    this.syncFormState();\n    if (changed) {\n      emit<ZlSelectChangeDetail>(this, \"zl-change\", { name: this.name, value: this.value });\n      this.dispatchEvent(new Event(\"change\", { bubbles: true, composed: true }));\n    }\n  }\n\n  private moveActive(delta: number): void {\n    const count = this.options.length;\n    if (count === 0) {\n      return;\n    }\n    let next = this.activeIndex;\n    for (let step = 0; step < count; step += 1) {\n      next = (next + delta + count) % count;\n      if (!this.options[next]?.disabled) {\n        this.setActive(next);\n        return;\n      }\n    }\n  }\n\n  private setActive(index: number): void {\n    if (index >= 0 && index < this.options.length) {\n      this.activeIndex = index;\n    }\n  }\n\n  private firstEnabledIndex(): number {\n    return this.options.findIndex((option) => !option.disabled);\n  }\n\n  private lastEnabledIndex(): number {\n    for (let index = this.options.length - 1; index >= 0; index -= 1) {\n      if (!this.options[index]?.disabled) {\n        return index;\n      }\n    }\n    return -1;\n  }\n\n  private syncFormState(): void {\n    this.internals.setFormValue?.(this.value || null);\n    if (this.required && !this.value) {\n      this.internals.setValidity?.(\n        { valueMissing: true },\n        \"Please select an item in the list.\",\n        this.triggerEl ?? undefined,\n      );\n    } else {\n      this.internals.setValidity?.({});\n    }\n  }\n\n  private triggerTestId(): string | undefined {\n    if (this.name) {\n      return `zitadel-select-${this.name}`;\n    }\n    if (this.testId) {\n      return `${this.testId}-trigger`;\n    }\n    return undefined;\n  }\n}\n\nexport const zlSelectManifest: AtomManifest = {\n  tag: \"zl-select\",\n  attrs: [\n    \"name\",\n    \"label\",\n    \"value\",\n    \"placeholder\",\n    \"options\",\n    \"required\",\n    \"disabled\",\n    \"open\",\n    \"aria-label\",\n    \"data-testid\",\n  ],\n  parts: [\"root\", \"label\", \"field\", \"trigger\", \"listbox\", \"option\"],\n  slots: [],\n  events: [\"zl-change\"],\n} as const;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"zl-select\": ZlSelect;\n  }\n}\n"],"mappings":"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"}

package/dist/default-CfF7GoLv.mjs

@@ -0,0 +1,6 @@
+//#region src/orchestrator/templates/default.liquid
+var default_default = "<zl-page-shell data-zl-template-root>\n  {% if branding.logo_url %}\n    <img slot=\"header\" class=\"zl-card-logo\" src=\"{{ branding.logo_url }}\" alt=\"\" />\n  {% endif %}\n  <zl-card>\n    <h1 slot=\"header\" class=\"zl-card-title\">{{ step.texts.title_key | t: identity.display_name }}</h1>\n    {% if step.texts.description_key %}\n      {% assign card_subtitle = step.texts.description_key | t: identity.display_name %}\n      {% if card_subtitle != \"\" %}\n        <p slot=\"header\" class=\"zl-card-subtitle\">{{ card_subtitle }}</p>\n      {% endif %}\n    {% endif %}\n\n    {% if errors and errors.size > 0 %}\n      {% for err in errors %}\n        {% if err | formLevelError %}\n          {% assign alert_heading = err.text_key | alertHeading %}\n          {% assign alert_body = err.text_key | alertBody %}\n          <zl-alert severity=\"error\" dismissible data-zl-step-error{% if alert_heading != \"\" %} heading=\"{{ alert_heading | t }}\"{% endif %}>\n            {% if alert_body != \"\" %}{{ alert_body | t }}{% elsif err.text_key %}{{ err.text_key | t }}{% else %}{{ err.message }}{% endif %}\n          </zl-alert>\n        {% endif %}\n      {% endfor %}\n    {% endif %}\n\n    {% for f in fields %}\n      {% assign field_placeholder = f.text_key | fieldPlaceholder %}\n      {% assign field_help = f.text_key | fieldHelp %}\n      {% assign field_err = f.name | fieldError: errors %}\n      {% case f.type %}\n      {% when 'checkbox' %}\n        <zl-checkbox\n          name=\"{{ f.name }}\"\n          data-testid=\"zitadel-field-{{ f.name | testid }}\"\n          label=\"{{ f.text_key | t }}\"\n          value=\"true\"\n          {% if f.value %}checked{% endif %}\n          {% if f.required %}required{% endif %}\n        ></zl-checkbox>\n      {% when 'select' %}\n        <zl-select\n          name=\"{{ f.name }}\"\n          data-testid=\"zitadel-field-{{ f.name | testid }}\"\n          label=\"{{ f.text_key | t }}\"\n          value=\"{{ f.value }}\"\n          options='{{ f.validation.enum | selectOptions | json }}'\n          {% if f.required %}required{% endif %}\n          {% if field_placeholder != \"\" %}placeholder=\"{{ field_placeholder }}\"{% endif %}\n        ></zl-select>\n      {% else %}\n        {% assign autocomplete_val = '' %}\n        {% if f.name == 'email' %}\n          {% assign autocomplete_val = 'email' %}\n        {% elsif f.type == 'password' and step.name contains 'register' %}\n          {% assign autocomplete_val = 'new-password' %}\n        {% elsif f.type == 'password' %}\n          {% assign autocomplete_val = 'current-password' %}\n        {% endif %}\n        <zl-field\n          name=\"{{ f.name }}\"\n          data-testid=\"zitadel-field-{{ f.name | testid }}\"\n          label=\"{{ f.text_key | t }}\"\n          type=\"{{ f.type }}\"\n          value=\"{{ f.value }}\"\n          {% if autocomplete_val != '' %}autocomplete=\"{{ autocomplete_val }}\"{% endif %}\n          {% if f.required %}required{% endif %}\n          {% if field_placeholder != \"\" %}placeholder=\"{{ field_placeholder }}\"{% endif %}\n          {% if field_err != \"\" %}invalid error=\"{{ field_err }}\"{% endif %}\n        >\n          {% if field_help != \"\" %}\n            <span slot=\"help\">{{ field_help }}</span>\n          {% endif %}\n        </zl-field>\n      {% endcase %}\n    {% endfor %}\n\n    {% assign recover = actions | where: \"name\", \"recover\" | first %}\n    {% if recover %}\n      <p class=\"zl-card-forgot\">\n        <a href=\"#\" class=\"zl-card-forgot__link\" data-action=\"recover\">{{ recover.text_key | t }}</a>\n      </p>\n    {% endif %}\n\n    {% for a in actions %}\n      {% if a.primary %}\n        <zl-button\n          hierarchy=\"primary\"\n          size=\"medium\"\n          type=\"submit\"\n          block\n          action=\"{{ a.name }}\"\n          data-testid=\"zitadel-action-{{ a.name }}\"\n          label=\"{{ a.text_key | t }}\"\n          {% if loading %}loading{% endif %}\n        ></zl-button>\n      {% endif %}\n    {% endfor %}\n\n    {% for a in actions %}\n      {% unless a.primary or a.name == 'passkey' or a.name == 'register' or a.name == 'sign_in' or a.name == 'recover' %}\n        <zl-button\n          hierarchy=\"secondary\"\n          size=\"medium\"\n          type=\"button\"\n          block\n          action=\"{{ a.name }}\"\n          data-testid=\"zitadel-action-{{ a.name }}\"\n          label=\"{{ a.text_key | t }}\"\n        ></zl-button>\n      {% endunless %}\n    {% endfor %}\n\n    {% assign passkey = actions | where: \"name\", \"passkey\" | first %}\n    {% if passkey %}\n      {% unless passkey.primary %}\n        <zl-button\n          hierarchy=\"secondary\"\n          size=\"medium\"\n          block\n          action=\"passkey\"\n          data-testid=\"zitadel-action-passkey\"\n          label=\"{{ passkey.text_key | t }}\"\n        ></zl-button>\n      {% endunless %}\n    {% endif %}\n\n\n    {% assign register = actions | where: \"name\", \"register\" | first %}\n    {% if register %}\n      <p class=\"zl-card-nav\">\n        {{ 'identifier.action.register.lead' | t }}<a href=\"#\" class=\"zl-card-nav__link\" data-action=\"register\" data-testid=\"zitadel-action-register-link\">{{ 'identifier.action.register.link' | t }}</a>\n      </p>\n    {% endif %}\n\n    {% assign sign_in = actions | where: \"name\", \"sign_in\" | first %}\n    {% if sign_in %}\n      <p class=\"zl-card-nav\">\n        {{ 'register.action.sign_in.lead' | t }}<a href=\"#\" class=\"zl-card-nav__link\" data-action=\"sign_in\" data-testid=\"zitadel-action-sign_in-link\">{{ 'register.action.sign_in.link' | t }}</a>\n      </p>\n    {% endif %}\n\n    {% if challenge %}\n      {% if challenge.method == \"passkey\" or challenge.method == \"passkey_register\" %}\n        {% assign ceremony = \"authenticate\" %}\n        {% assign submit_method = challenge.method %}\n        {% if challenge.method == \"passkey_register\" or challenge.options.user %}\n          {% assign ceremony = \"register\" %}\n          {% assign submit_method = \"passkey_register\" %}\n        {% endif %}\n        <zl-passkey\n          ceremony=\"{{ ceremony }}\"\n          method=\"{{ submit_method }}\"\n          challenge-id=\"{{ challenge.challenge_id }}\"\n          options='{{ challenge.options | json }}'\n          pending-label=\"{{ 'passkey.pending.status' | t }}\"\n          cancel-label=\"{{ 'action.cancel' | t }}\"\n        ></zl-passkey>\n      {% endif %}\n    {% endif %}\n\n    {% mandatory_gates %}\n  </zl-card>\n</zl-page-shell>\n";
+//#endregion
+export { default_default as t };
+
+//# sourceMappingURL=default-CfF7GoLv.mjs.map

package/dist/default-CfF7GoLv.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"default-CfF7GoLv.mjs","names":[],"sources":["../src/orchestrator/templates/default.liquid"],"sourcesContent":["export default \"<zl-page-shell data-zl-template-root>\\n  {% if branding.logo_url %}\\n    <img slot=\\\"header\\\" class=\\\"zl-card-logo\\\" src=\\\"{{ branding.logo_url }}\\\" alt=\\\"\\\" />\\n  {% endif %}\\n  <zl-card>\\n    <h1 slot=\\\"header\\\" class=\\\"zl-card-title\\\">{{ step.texts.title_key | t: identity.display_name }}</h1>\\n    {% if step.texts.description_key %}\\n      {% assign card_subtitle = step.texts.description_key | t: identity.display_name %}\\n      {% if card_subtitle != \\\"\\\" %}\\n        <p slot=\\\"header\\\" class=\\\"zl-card-subtitle\\\">{{ card_subtitle }}</p>\\n      {% endif %}\\n    {% endif %}\\n\\n    {% if errors and errors.size > 0 %}\\n      {% for err in errors %}\\n        {% if err | formLevelError %}\\n          {% assign alert_heading = err.text_key | alertHeading %}\\n          {% assign alert_body = err.text_key | alertBody %}\\n          <zl-alert severity=\\\"error\\\" dismissible data-zl-step-error{% if alert_heading != \\\"\\\" %} heading=\\\"{{ alert_heading | t }}\\\"{% endif %}>\\n            {% if alert_body != \\\"\\\" %}{{ alert_body | t }}{% elsif err.text_key %}{{ err.text_key | t }}{% else %}{{ err.message }}{% endif %}\\n          </zl-alert>\\n        {% endif %}\\n      {% endfor %}\\n    {% endif %}\\n\\n    {% for f in fields %}\\n      {% assign field_placeholder = f.text_key | fieldPlaceholder %}\\n      {% assign field_help = f.text_key | fieldHelp %}\\n      {% assign field_err = f.name | fieldError: errors %}\\n      {% case f.type %}\\n      {% when 'checkbox' %}\\n        <zl-checkbox\\n          name=\\\"{{ f.name }}\\\"\\n          data-testid=\\\"zitadel-field-{{ f.name | testid }}\\\"\\n          label=\\\"{{ f.text_key | t }}\\\"\\n          value=\\\"true\\\"\\n          {% if f.value %}checked{% endif %}\\n          {% if f.required %}required{% endif %}\\n        ></zl-checkbox>\\n      {% when 'select' %}\\n        <zl-select\\n          name=\\\"{{ f.name }}\\\"\\n          data-testid=\\\"zitadel-field-{{ f.name | testid }}\\\"\\n          label=\\\"{{ f.text_key | t }}\\\"\\n          value=\\\"{{ f.value }}\\\"\\n          options='{{ f.validation.enum | selectOptions | json }}'\\n          {% if f.required %}required{% endif %}\\n          {% if field_placeholder != \\\"\\\" %}placeholder=\\\"{{ field_placeholder }}\\\"{% endif %}\\n        ></zl-select>\\n      {% else %}\\n        {% assign autocomplete_val = '' %}\\n        {% if f.name == 'email' %}\\n          {% assign autocomplete_val = 'email' %}\\n        {% elsif f.type == 'password' and step.name contains 'register' %}\\n          {% assign autocomplete_val = 'new-password' %}\\n        {% elsif f.type == 'password' %}\\n          {% assign autocomplete_val = 'current-password' %}\\n        {% endif %}\\n        <zl-field\\n          name=\\\"{{ f.name }}\\\"\\n          data-testid=\\\"zitadel-field-{{ f.name | testid }}\\\"\\n          label=\\\"{{ f.text_key | t }}\\\"\\n          type=\\\"{{ f.type }}\\\"\\n          value=\\\"{{ f.value }}\\\"\\n          {% if autocomplete_val != '' %}autocomplete=\\\"{{ autocomplete_val }}\\\"{% endif %}\\n          {% if f.required %}required{% endif %}\\n          {% if field_placeholder != \\\"\\\" %}placeholder=\\\"{{ field_placeholder }}\\\"{% endif %}\\n          {% if field_err != \\\"\\\" %}invalid error=\\\"{{ field_err }}\\\"{% endif %}\\n        >\\n          {% if field_help != \\\"\\\" %}\\n            <span slot=\\\"help\\\">{{ field_help }}</span>\\n          {% endif %}\\n        </zl-field>\\n      {% endcase %}\\n    {% endfor %}\\n\\n    {% assign recover = actions | where: \\\"name\\\", \\\"recover\\\" | first %}\\n    {% if recover %}\\n      <p class=\\\"zl-card-forgot\\\">\\n        <a href=\\\"#\\\" class=\\\"zl-card-forgot__link\\\" data-action=\\\"recover\\\">{{ recover.text_key | t }}</a>\\n      </p>\\n    {% endif %}\\n\\n    {% for a in actions %}\\n      {% if a.primary %}\\n        <zl-button\\n          hierarchy=\\\"primary\\\"\\n          size=\\\"medium\\\"\\n          type=\\\"submit\\\"\\n          block\\n          action=\\\"{{ a.name }}\\\"\\n          data-testid=\\\"zitadel-action-{{ a.name }}\\\"\\n          label=\\\"{{ a.text_key | t }}\\\"\\n          {% if loading %}loading{% endif %}\\n        ></zl-button>\\n      {% endif %}\\n    {% endfor %}\\n\\n    {% for a in actions %}\\n      {% unless a.primary or a.name == 'passkey' or a.name == 'register' or a.name == 'sign_in' or a.name == 'recover' %}\\n        <zl-button\\n          hierarchy=\\\"secondary\\\"\\n          size=\\\"medium\\\"\\n          type=\\\"button\\\"\\n          block\\n          action=\\\"{{ a.name }}\\\"\\n          data-testid=\\\"zitadel-action-{{ a.name }}\\\"\\n          label=\\\"{{ a.text_key | t }}\\\"\\n        ></zl-button>\\n      {% endunless %}\\n    {% endfor %}\\n\\n    {% assign passkey = actions | where: \\\"name\\\", \\\"passkey\\\" | first %}\\n    {% if passkey %}\\n      {% unless passkey.primary %}\\n        <zl-button\\n          hierarchy=\\\"secondary\\\"\\n          size=\\\"medium\\\"\\n          block\\n          action=\\\"passkey\\\"\\n          data-testid=\\\"zitadel-action-passkey\\\"\\n          label=\\\"{{ passkey.text_key | t }}\\\"\\n        ></zl-button>\\n      {% endunless %}\\n    {% endif %}\\n\\n\\n    {% assign register = actions | where: \\\"name\\\", \\\"register\\\" | first %}\\n    {% if register %}\\n      <p class=\\\"zl-card-nav\\\">\\n        {{ 'identifier.action.register.lead' | t }}<a href=\\\"#\\\" class=\\\"zl-card-nav__link\\\" data-action=\\\"register\\\" data-testid=\\\"zitadel-action-register-link\\\">{{ 'identifier.action.register.link' | t }}</a>\\n      </p>\\n    {% endif %}\\n\\n    {% assign sign_in = actions | where: \\\"name\\\", \\\"sign_in\\\" | first %}\\n    {% if sign_in %}\\n      <p class=\\\"zl-card-nav\\\">\\n        {{ 'register.action.sign_in.lead' | t }}<a href=\\\"#\\\" class=\\\"zl-card-nav__link\\\" data-action=\\\"sign_in\\\" data-testid=\\\"zitadel-action-sign_in-link\\\">{{ 'register.action.sign_in.link' | t }}</a>\\n      </p>\\n    {% endif %}\\n\\n    {% if challenge %}\\n      {% if challenge.method == \\\"passkey\\\" or challenge.method == \\\"passkey_register\\\" %}\\n        {% assign ceremony = \\\"authenticate\\\" %}\\n        {% assign submit_method = challenge.method %}\\n        {% if challenge.method == \\\"passkey_register\\\" or challenge.options.user %}\\n          {% assign ceremony = \\\"register\\\" %}\\n          {% assign submit_method = \\\"passkey_register\\\" %}\\n        {% endif %}\\n        <zl-passkey\\n          ceremony=\\\"{{ ceremony }}\\\"\\n          method=\\\"{{ submit_method }}\\\"\\n          challenge-id=\\\"{{ challenge.challenge_id }}\\\"\\n          options='{{ challenge.options | json }}'\\n          pending-label=\\\"{{ 'passkey.pending.status' | t }}\\\"\\n          cancel-label=\\\"{{ 'action.cancel' | t }}\\\"\\n        ></zl-passkey>\\n      {% endif %}\\n    {% endif %}\\n\\n    {% mandatory_gates %}\\n  </zl-card>\\n</zl-page-shell>\\n\";"],"mappings":";AAAA,IAAA,kBAAe"}

package/dist/{index-BwQLFs9R.d.mts → index-DSZnfOJH.d.mts}

@@ -326,7 +326,7 @@ declare global {
   }
 } //# sourceMappingURL=zl-checkbox.d.ts.map
 //#endregion
-//#region ../api/dist/index-oloR8wb4.d.mts
+//#region ../api/dist/index-C4jNq61U.d.mts
 //#endregion
 //#region src/generated/model/activateFlowDefinitionParams.d.ts
 /**
@@ -1261,9 +1261,11 @@ type CreateFlow201Step = {
   (e.g. `error.email_required`; the `format` rule is spelled
   `error.<field>_invalid`), multiple violations joined with `"; "`.
   Field names appear verbatim, so clients localise unknown keys via
-  the generic `error.field_<rule>` catalog entries. Other failures
-  carry a verbatim diagnostic token instead (e.g. `user_not_found`,
-  `auth_attempt.password_invalid`).
+  the generic `error.field_<rule>` catalog entries. Other engine
+  failures carry `error.*` catalog keys as well (e.g.
+  `error.invalid_credentials`, `error.passkey_invalid`); a
+  non-`error.` payload is an outcome token (e.g. `user_not_found`)
+  that clients keep verbatim.
    */
   error?: string | null;
   /** Present only on terminal steps. Tells the frontend what to do:
@@ -4296,9 +4298,11 @@ type GetFlowStep200Step = {
   (e.g. `error.email_required`; the `format` rule is spelled
   `error.<field>_invalid`), multiple violations joined with `"; "`.
   Field names appear verbatim, so clients localise unknown keys via
-  the generic `error.field_<rule>` catalog entries. Other failures
-  carry a verbatim diagnostic token instead (e.g. `user_not_found`,
-  `auth_attempt.password_invalid`).
+  the generic `error.field_<rule>` catalog entries. Other engine
+  failures carry `error.*` catalog keys as well (e.g.
+  `error.invalid_credentials`, `error.passkey_invalid`); a
+  non-`error.` payload is an outcome token (e.g. `user_not_found`)
+  that clients keep verbatim.
    */
   error?: string | null;
   /** Present only on terminal steps. Tells the frontend what to do:
@@ -6832,9 +6836,11 @@ type SubmitFlowStep200Step = {
   (e.g. `error.email_required`; the `format` rule is spelled
   `error.<field>_invalid`), multiple violations joined with `"; "`.
   Field names appear verbatim, so clients localise unknown keys via
-  the generic `error.field_<rule>` catalog entries. Other failures
-  carry a verbatim diagnostic token instead (e.g. `user_not_found`,
-  `auth_attempt.password_invalid`).
+  the generic `error.field_<rule>` catalog entries. Other engine
+  failures carry `error.*` catalog keys as well (e.g.
+  `error.invalid_credentials`, `error.passkey_invalid`); a
+  non-`error.` payload is an outcome token (e.g. `user_not_found`)
+  that clients keep verbatim.
    */
   error?: string | null;
   /** Present only on terminal steps. Tells the frontend what to do:
@@ -8361,7 +8367,7 @@ declare class ZlPasskey extends LitElement {
    */
   startCeremony(): Promise<void>;
   private handleCancelSubmit;
-  render(): typeof nothing | _$lit.TemplateResult<1>;
+  render(): _$lit.TemplateResult<1> | typeof nothing;
   /**
    * `navigator.credentials.get()` — authentication ceremony.
    */
@@ -8545,4 +8551,4 @@ declare global {
 } //# sourceMappingURL=zl-select.d.ts.map
 //#endregion
 export { ExchangeHandoff200 as $, ZlCheckbox as $t, CreateFlow201StepGates as A, ListFlowDefinitionsParams as At, CreateSchemaBody as B, QueryProjectsBody as Bt, CreateFlow201 as C, GetUserByIDParams as Ct, CreateFlow201StepActionsItem as D, IssueChallenge201 as Dt, CreateFlow201Step as E, IntrospectBody as Et, CreateFlowDefinitionBody as F, ListUsers200Item as Ft, CreateTeamBody as G, SubmitFlowEventBody as Gt, CreateSession201 as H, RevokeTokenBody as Ht, CreateHandoff200 as I, ListUsersParams as It, CreateUserBody as J, UpdateFlowDefinition200 as Jt, CreateTeamParams as K, SubmitFlowStep200 as Kt, CreateProject201 as L, PatchProject200 as Lt, CreateFlowBody as M, ListSchemasParams as Mt, CreateFlowBodyPurpose as N, ListSessions200 as Nt, CreateFlow201StepChallenge as O, IssueChallengeBody as Ot, CreateFlowDefinition201 as P, ListSessionsParams as Pt, EndSessionParams as Q, VerifyChallengeProofBody as Qt, CreateProjectBody as R, PatchProjectBody as Rt, CreateAuthAttemptBody as S, GetUserByID200 as St, CreateFlow201BrandingLayout as T, Introspect200 as Tt, CreateSessionBody as U, SetUserPasswordBody as Ut, CreateSchemaParams as V, RevokeSessionParams as Vt, CreateTeam201 as W, SetUserPasswordParams as Wt, DeactivateFlowDefinitionParams as X, UpdateFlowDefinitionParams as Xt, CreateUserParams as Y, UpdateFlowDefinitionBody as Yt, DeleteFlowDefinitionParams as Z, VerifyChallengeProof200 as Zt, AuthorizeDevice200 as _, GetSessionParams as _t, ZlPill as a, zlButtonManifest as an, GetFlowStep200 as at, AuthorizeGetParams as b, GetToken200 as bt, ZlPasskeyErrorDetail as c, IconName as cn, GetLiveDefault as ct, ZlPageShell as d, GetOpenIDConfiguration200 as dt, ZlCheckboxChangeDetail as en, ExchangeHandoffBody as et, zlPageShellManifest as f, GetProject200 as ft, ActivateFlowDefinitionParams as g, GetSession200 as gt, zlFieldManifest as h, GetSchemaByIdParams as ht, zlSelectManifest as i, ZlButton as in, GetFlowDefinitionParams as it, CreateFlow201StepSsoProvidersItem as j, ListSchemas200Item as jt, CreateFlow201StepFieldsItem as k, ListFlowDefinitions200 as kt, ZlPasskeyResultDetail as l, ZlIcon as ln, GetMySession200 as lt, ZlFieldType as m, GetSchemaById200 as mt, ZlSelectChangeDetail as n, ZlCard as nn, GetAuthAttempt200 as nt, zlPillManifest as o, ZlAlert as on, GetHealthDefault as ot, ZlField as p, GetReadyDefault as pt, CreateUser201 as q, SubmitFlowStepBody as qt, ZlSelectOption as r, zlCardManifest as rn, GetFlowDefinition200 as rt, ZlPasskey as s, zlAlertManifest as sn, GetKeys200 as st, ZlSelect as t, zlCheckboxManifest as tn, ExchangeHandoffParams as tt, zlPasskeyManifest as u, zlIconManifest as un, GetMyUser200 as ut, AuthorizeDeviceParams as v, GetTeam200 as vt, CreateFlow201Branding as w, GetUserInfo200 as wt, CreateAuthAttempt201 as x, GetTokenBody as xt, AuthorizeGetDefault as y, GetTeamParams as yt, CreateSchema201 as z, QueryProjects200 as zt };
-//# sourceMappingURL=index-BwQLFs9R.d.mts.map
+//# sourceMappingURL=index-DSZnfOJH.d.mts.map