@zitadel/components 0.1.0-alpha.18 → 0.1.0-alpha.19

package/README.md

@@ -6,12 +6,16 @@ Zitadel auth UI.
 The package exports:
 
 - **Atoms** — `<zl-field>`, `<zl-button>`, `<zl-alert>`, `<zl-icon>`,
-  `<zl-pill>`, `<zl-card>`, `<zl-page-shell>`. Form-associated, accessible,
+  `<zl-pill>`, `<zl-card>`, `<zl-checkbox>`, `<zl-select>`,
+  `<zl-page-shell>`, and `<zl-passkey>` (an invisible WebAuthn ceremony
+  handler — no rendered surface). Form-associated, accessible,
   branding-aware Lit elements that map 1:1 to the flow API
   field/action/error primitives and the Figma design system.
-- **Orchestrator** — `<zitadel-login>`. A single drop-in element that calls
+- **Orchestrators** — `<zitadel-login>`, a single drop-in element that calls
   the flow API, renders each step through a Liquid template, manages focus
-  and form submission, and applies branding/theme/locale.
+  and form submission, and applies branding/theme/locale; `<zitadel-logout>`
+  for sign-out; and `<zitadel-session>`, the post-sign-in "signed in" card
+  (session read + sign-out in one element).
 - **Tokens & manifests** — design tokens (`--zl-*` CSS custom properties), a
   Liquid template registry, and per-atom manifests describing allowed
   attributes/parts/events for sanitiser allowlists.
@@ -128,8 +132,9 @@ fixtures:
   `applyBranding(...)` injects a tenant branding overlay merged into every
   response (presets include `font_url` for Inter).
 - **Framework demos (TCP server)** — `moon run api-mock:start`
-  serves the same handlers on port 4000 with `defaultDevBranding` (Arimo
-  `font_url`) applied at boot. See [`apps/demo-next`](../../apps/demo-next/README.md)
+  serves the same handlers on port 8080 (set `PORT` to override) with
+  `defaultDevBranding` (Arimo `font_url`) applied at boot. See
+  [`apps/demo-next`](../../apps/demo-next/README.md)
   and [`apps/demo-nuxt`](../../apps/demo-nuxt/README.md).
 
 ### Preview surfaces
@@ -344,8 +349,10 @@ See [`src/atoms/`](src/atoms) for full TypeScript types and JSDoc.
 packages/components/
 ├── src/
 │   ├── atoms/             zl-field, zl-button, zl-alert, zl-icon, zl-pill,
-│   │                       zl-card, zl-page-shell + tests
-│   ├── orchestrator/      <zitadel-login>, <zitadel-logout>, api-client, liquid, branding
+│   │                       zl-card, zl-checkbox, zl-select, zl-page-shell,
+│   │                       zl-passkey + tests
+│   ├── orchestrator/      <zitadel-login>, <zitadel-logout>, <zitadel-session>,
+│   │                       api-client, liquid, branding
 │   │   ├── locales/       bundled English fallback
 │   │   └── templates/     default.liquid (all steps) + layout-chrome.css
 │   ├── tokens/            re-export of @zitadel/design-tokens

package/dist/atoms/index.d.mts

@@ -1,2 +1,2 @@
-import { _n as IconName, a as ZlPill, c as ZlPasskeyErrorDetail, cn as ZlCheckbox, d as ZlPageShell, dn as ZlCard, f as zlPageShellManifest, fn as zlCardManifest, gn as zlAlertManifest, h as zlFieldManifest, hn as ZlAlert, i as zlSelectManifest, l as ZlPasskeyResultDetail, ln as ZlCheckboxChangeDetail, m as ZlFieldType, mn as zlButtonManifest, n as ZlSelectChangeDetail, o as zlPillManifest, p as ZlField, pn as ZlButton, r as ZlSelectOption, s as ZlPasskey, t as ZlSelect, u as zlPasskeyManifest, un as zlCheckboxManifest, vn as ZlIcon, yn as zlIconManifest } from "../index-DIGjtG4z.mjs";
+import { a as ZlPill, an as zlCardManifest, c as ZlPasskeyErrorDetail, cn as ZlAlert, d as ZlPageShell, dn as ZlIcon, f as zlPageShellManifest, fn as zlIconManifest, h as zlFieldManifest, i as zlSelectManifest, in as ZlCard, l as ZlPasskeyResultDetail, ln as zlAlertManifest, m as ZlFieldType, n as ZlSelectChangeDetail, nn as ZlCheckboxChangeDetail, o as zlPillManifest, on as ZlButton, p as ZlField, r as ZlSelectOption, rn as zlCheckboxManifest, s as ZlPasskey, sn as zlButtonManifest, t as ZlSelect, tn as ZlCheckbox, u as zlPasskeyManifest, un as IconName } from "../index-CAi5gsHK.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 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-5-wYIl88.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-B6QmUAzo.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-5-wYIl88.mjs → atoms-B6QmUAzo.mjs}

@@ -1,4 +1,4 @@
-import { t as cssVars } from "./tokens-BV-PPbQd.mjs";
+import { t as cssVars } from "./tokens-DSnSf1mf.mjs";
 import { LitElement, css, html, nothing, unsafeCSS } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
@@ -543,7 +543,7 @@ const zlButtonManifest = {
 };
 //#endregion
 //#region ../shared-component-styles/src/lit/card-host.css?inline
-var card_host_default = ":host {\n  width: 100%;\n  max-width: var(--zl-container-auth-card, 24rem);\n  margin-inline: auto;\n  display: block;\n}\n\n.zr-card ::slotted([slot=\"header\"]), .zr-card ::slotted([slot=\"footer\"]) {\n  margin: 0;\n}\n";
+var card_host_default = ":host {\n  width: 100%;\n  max-width: var(--zl-container-auth-card, 24rem);\n  margin-inline: auto;\n  display: block;\n}\n\n.zr-card ::slotted([slot=\"header\"]), .zr-card ::slotted([slot=\"footer\"]) {\n  margin: 0;\n}\n\n:host([data-suppress-header]) .zr-card__header {\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  position: absolute;\n  overflow: hidden;\n}\n";
 //#endregion
 //#region ../shared-component-styles/src/card.css?inline
 var card_default = ".zr-card {\n  width: 100%;\n  max-width: var(--zl-container-auth-card, 24rem);\n  border: 1px solid var(--zl-color-border-default-black, #252528);\n  border-radius: var(--zl-radius-l, 1rem);\n  padding: var(--zl-spacing-05, 2rem);\n  gap: var(--zl-spacing-05, 2rem);\n  font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  box-sizing: border-box;\n  background: none;\n  flex-direction: column;\n  margin-inline: auto;\n  line-height: 1.5;\n  display: flex;\n}\n\n.zr-card--compact {\n  gap: var(--zl-spacing-04, 1.5rem);\n}\n\n.zr-card__header, .zr-card__footer {\n  gap: var(--zl-spacing-02, .5rem);\n  flex-direction: column;\n  display: flex;\n}\n\n.zr-card__region--empty {\n  display: none;\n}\n\n.zr-card__body {\n  gap: var(--zl-spacing-03, 1rem);\n  flex-direction: column;\n  display: flex;\n}\n";
@@ -898,7 +898,7 @@ const zlCheckboxManifest = {
 var text_field_host_default = ":host {\n  display: block;\n}\n\n::slotted([slot=\"prefix\"]), ::slotted([slot=\"suffix\"]) {\n  color: var(--zl-color-text-secondary-gray, #bfbfcf);\n  display: inline-flex;\n}\n\n.zr-field__help[hidden], .zr-field__error[hidden] {\n  display: none;\n}\n\n:host([data-state=\"hovered\"]:not([disabled])) .zr-field:not(.zr-field--invalid):not(.zr-field--success) .zr-field__wrap:not(:focus-within) {\n  border-color: var(--zl-color-border-hover, #9e9eb2);\n  background-color: color-mix(in srgb, var(--zl-color-text-primary-white, #f4f4f6) 10%, transparent);\n}\n\n:host([data-state=\"focused\"]:not([disabled])) .zr-field:not(.zr-field--invalid):not(.zr-field--success) .zr-field__wrap {\n  border-color: var(--zl-color-border-default-white, #f4f4f6);\n}\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\n:host([data-state=\"focused\"]:not([disabled])) .zr-field--success .zr-field__wrap {\n  border-color: var(--zl-color-border-success, #33a779);\n}\n";
 //#endregion
 //#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-border-hover, #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";
+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-text-link, 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-border-hover, #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
 /**
@@ -2268,4 +2268,4 @@ const zlSelectManifest = {
 //#endregion
 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-5-wYIl88.mjs.map
+//# sourceMappingURL=atoms-B6QmUAzo.mjs.map

package/dist/atoms-B6QmUAzo.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"atoms-B6QmUAzo.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-surface-hover-subtle, #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/* Primary reads the legacy names, which the design-tokens sheet now emits\n   as aliases of the Figma semantic pair (`--zl-color-surface-default-white:\n   var(--zl-primary)`, see design-tokens build). Stock buttons therefore take\n   the Figma `primary` values, and BOTH override paths keep working: a host\n   page overriding the legacy name beats the alias, and overriding\n   `--zl-primary` flows through it. Hover stays on the legacy hover role\n   until Figma publishes a `primary`-scoped hover value. */\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-surface-hover-strong, #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-surface-hover-subtle, #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-surface-hover-subtle, #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\"> through the shadow boundary:\n      // delegate to the host <form> so its `submit` event is the single\n      // submission signal. On a generic form this runs native constraint\n      // validation; inside <zitadel-login> the form is `novalidate`, so the\n      // orchestrator's `missingRequiredFields` gate enforces instead. Emitting\n      // `zl-submit` too would bypass the form handler, so we don't (the\n      // Enter-to-submit path in <zl-field> likewise relies on the form `submit`\n      // event alone). Non-submit and form-less buttons still emit `zl-submit`\n      // below for SPA/orchestrator listeners.\n      event.preventDefault();\n      form.requestSubmit();\n      return;\n    }\n    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\n/* suppress-header (stamped by the orchestrator / bound by zitadel-session):\n   pull the header region out of the flex flow so the card keeps no blank\n   header band, while the slotted heading stays in the accessibility tree —\n   screen-reader-only, not display:none. */\n:host([data-suppress-header]) .zr-card__header {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  border: 0;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\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  /* A border token, not the card's own surface token: the two share a value in\n     dark mode (#252528), but in light the surface resolves to the card fill\n     (#ffffff) and the edge disappears into the page. */\n  border: 1px solid var(--zl-color-border-default-black, #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/*\n * Column wrapper: the checkbox row plus an optional inline error stacked below\n * (mirrors `.zr-field`'s root → error layout). Kept out of the parity gate's\n * selector list: as a flex item of the Lit `:host { display: inline-flex }` its\n * `display` blockifies to `flex`, while the React copy (child of a plain div)\n * stays `inline-flex` — the same host-model divergence noted for `.zr-checkbox`.\n */\n.zr-checkbox-field {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--zl-spacing-01, 0.25rem);\n}\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-field,\n.zr-checkbox,\n.zr-checkbox-field *,\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/* Invalid — red box edge (unchecked) so the error is visible on the control. */\n.zr-checkbox--invalid .zr-checkbox__input:not(:checked) + .zr-checkbox__box .zr-checkbox__face {\n  border-color: var(--zl-color-text-error, #ea4f70);\n}\n\n/* Inline error message under the checkbox row (mirrors .zr-field__error). */\n.zr-checkbox__error {\n  font-size: 0.75rem;\n  line-height: 1rem;\n  color: var(--zl-color-text-error, #ea4f70);\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  /**\n   * Inline validation message shown under the control (empty = none). Set by\n   * the orchestrator's template on a field error; display-only, mirroring\n   * `<zl-field>` / `<zl-select>` so the flow router routes every field type\n   * the same way. Submission gating lives in `<zitadel-login>`.\n   */\n  @property() accessor error = \"\";\n  @property({ type: Boolean, reflect: true }) accessor invalid = 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  /**\n   * The string this control contributes to form submission — the uniform\n   * read/write contract `<zitadel-login>` uses to capture and restore field\n   * values without knowing each atom's internal shape. Like a native checkbox\n   * this is the value token only when checked, empty otherwise; assigning it\n   * back restores the checked state.\n   */\n  get formValue(): string {\n    return this.checked ? this.value : \"\";\n  }\n\n  set formValue(value: string) {\n    this.checked = value !== \"\";\n  }\n\n  override render() {\n    const errorId = `${this.inputId}-error`;\n    const showError = Boolean(this.error);\n    const rootClass = classMap({\n      \"zr-checkbox\": true,\n      \"zr-checkbox--invalid\": this.invalid || showError,\n      \"zr-checkbox--disabled\": this.disabled,\n    });\n    const labelText = this.label;\n    return html`\n      <div class=\"zr-checkbox-field\" part=\"field\">\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            aria-invalid=${this.invalid || showError ? \"true\" : \"false\"}\n            aria-describedby=${showError ? errorId : nothing}\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        <div\n          class=\"zr-checkbox__error\"\n          part=\"error\"\n          id=${errorId}\n          role=\"alert\"\n          ?hidden=${!showError}\n        >\n          ${this.error}\n        </div>\n      </div>\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    \"error\",\n    \"invalid\",\n    \"aria-label\",\n    \"data-testid\",\n  ],\n  parts: [\"field\", \"root\", \"input\", \"box\", \"face\", \"check\", \"label\", \"error\"],\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-border-hover, #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-text-link, 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-border-hover, #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  /**\n   * The string this control contributes to form submission — the uniform\n   * read/write contract `<zitadel-login>` uses to capture and restore field\n   * values without knowing each atom's internal shape. The getter reads the\n   * live `<input>` so browser/password-manager autofill that writes the native\n   * control directly (bypassing the `value` property and its `input` event) is\n   * still captured.\n   */\n  get formValue(): string {\n    const native = this.inputEl ?? this.shadowRoot?.querySelector<HTMLInputElement>(\"input\");\n    return native ? native.value : this.value;\n  }\n\n  set formValue(value: string) {\n    this.value = value;\n    const native = this.inputEl ?? this.shadowRoot?.querySelector<HTMLInputElement>(\"input\");\n    if (native && native.value !== value) {\n      native.value = value;\n    }\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  /* Page-oriented by default; embedding hosts size the whole widget to\n     content by setting `--zl-page-min-height: auto` on the element (the\n     property inherits across shadow boundaries). */\n  min-height: var(--zl-page-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/* Widget mode — stamped by the <zitadel-login> orchestrator when its\n   `variant` is `widget` (the default): content-sized, paints nothing, and\n   pads nothing — the page padding is page chrome, and the embedding app\n   owns spacing around the card. Distinct from [data-embedded], which means\n   \"parent sets the height\". Mirror of `.zr-page-shell[data-widget]` in\n   page-shell.css (the React renderer stamps the div, Lit stamps the host). */\n:host([data-widget]) {\n  min-height: auto;\n  background: transparent;\n}\n:host([data-widget]) .zr-page-shell {\n  min-height: var(--zl-page-min-height, auto);\n  background: transparent;\n  padding: 0;\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  /* Page-oriented by default; `--zl-page-min-height: auto` (set by an\n     embedding host) sizes the shell to content. Shared with the React\n     renderer, where the property cascades the same way. */\n  min-height: var(--zl-page-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/* Widget mode (React renderer parity with :host([data-widget])): shed ALL\n   page chrome — sizing, paint, and the responsive padding — so the host box\n   hugs the card and the embedding app owns spacing. The attribute selector\n   outranks the 48rem padding bump above on specificity, so `padding: 0`\n   holds at every width. The region gap stays: it separates real content\n   (card → attribution pill), and empty regions are display:none anyway. */\n.zr-page-shell[data-widget] {\n  min-height: var(--zl-page-min-height, auto);\n  background: transparent;\n  padding: 0;\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 * All of the above is page chrome. In widget mode (`data-widget`, stamped\n * by the orchestrators whenever their `variant` is not `page`) the shell\n * sheds it entirely — background, viewport min-height, AND the responsive\n * padding — leaving a transparent, content-sized pass-through: the\n * embedding app owns spacing around the card. Only the region gap\n * survives, because it separates real content (card → attribution pill).\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  /* The neutral sheen comes from the design system's gradient pair, which is\n     mode-aware — hardcoding its dark values here painted a dark slab on a\n     light page. `color-mix` carries the 60% stop opacity a hex token can't. */\n  background:\n    linear-gradient(\n      182deg,\n      color-mix(in srgb, var(--zl-gradient-neutral-start, #484a57) 60%, transparent) 28.65%,\n      color-mix(in srgb, var(--zl-gradient-base-end, #0f0f11) 60%, transparent) 81.82%\n    ),\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 native control + popup. */\n.zr-select__field {\n  position: relative;\n}\n\n/*\n * Native control: visually hidden but focusable, form-associated, and the\n * accessibility + automation surface (Playwright `selectOption`, the\n * chrome-devtools a11y snapshot, screen readers, password managers). Overlaid\n * on the field so keyboard focus paints the trigger via `:focus-within`;\n * `pointer-events: none` lets mouse clicks fall through to the styled trigger\n * and custom popup. Never use `display:none`/`visibility:hidden` here — those\n * would drop it from the tab order and the accessibility tree.\n */\n.zr-select__native {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  opacity: 0;\n  pointer-events: none;\n  -webkit-appearance: none;\n  appearance: none;\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-border-hover, #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). Focus\n * lives on the visually-hidden native control, so paint the trigger via the\n * field's :focus-within rather than the trigger's own :focus. */\n.zr-select:not(.zr-select--disabled) .zr-select__field:focus-within .zr-select__trigger,\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/* Invalid — red edge, matching the text field's error box. Holds on focus too. */\n.zr-select--invalid .zr-select__trigger,\n.zr-select--invalid .zr-select__field:focus-within .zr-select__trigger {\n  border-color: var(--zl-color-text-error, #ea4f70);\n}\n\n/* Inline error message under the field (mirrors .zr-field__error). */\n.zr-select__error {\n  font-size: 0.75rem;\n  line-height: 1rem;\n  color: var(--zl-color-text-error, #ea4f70);\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 / pointer-active — 10% white wash (Figma \"Hovered\"). The styled popup\n * is a pointer-only visual layer (`aria-hidden`), so its option state lives on\n * `data-*` hooks, not ARIA (the native <select> owns the real a11y state). */\n.zr-select__option:not([data-disabled]):hover,\n.zr-select__option[data-active]:not([data-disabled]) {\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[data-selected] {\n  background-color: var(--zl-color-surface-default-primary-gray, #252528);\n}\n.zr-select__option[data-selected] .zr-select__option-check {\n  opacity: 1;\n}\n.zr-select__option[data-disabled] {\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\";\nimport { live } from \"lit/directives/live.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 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 * Agent-first contract (see `packages/components/AGENTS.md` → \"Input atoms expose\n * a real native control\"): the operable, accessible, form-associated, and\n * automatable control is a real native `<select>`. Screen readers, keyboard\n * users, password managers, native form submission/validation, and automation\n * drivers (Playwright `selectOption`, the chrome-devtools accessibility\n * snapshot, the Codex in-app browser) all interact with that native element via\n * the stable `data-testid=\"zitadel-select-${name}\"`.\n *\n * The Figma-styled trigger + popup (`.zr-select__trigger` / `.zr-select__listbox`)\n * are a pointer-only **visual** layer: they are `aria-hidden` and never in the\n * tab order, so they don't duplicate the native control in the accessibility\n * tree. A mouse user sees the styled popup; everyone else (keyboard, AT, agents)\n * uses the native `<select>` and its native popup. Both paths converge on\n * `value`, emit `zl-change`, and mirror `internals.setFormValue()`.\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  /**\n   * Inline validation message shown under the control (empty = none). Set by\n   * the orchestrator's template when the flow re-renders with a field error;\n   * display-only — submission gating lives in `<zitadel-login>`, mirroring\n   * `<zl-field>`'s `error` contract so the router treats every field type the\n   * same way.\n   */\n  @property() accessor error = \"\";\n  @property({ type: Boolean, reflect: true }) accessor invalid = 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 activeValue: string | null = null;\n\n  @query(\".zr-select__native\") private accessor nativeEl: HTMLSelectElement | 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    document.addEventListener(\"keydown\", this.handleDocumentKeydown, true);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener(\"pointerdown\", this.handleDocumentPointerDown, true);\n    document.removeEventListener(\"keydown\", this.handleDocumentKeydown, 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.nativeEl?.focus(options);\n  }\n\n  /**\n   * The string this control contributes to form submission — the uniform\n   * read/write contract `<zitadel-login>` uses to capture and restore field\n   * values without knowing each atom's internal shape. For a select that is\n   * simply the chosen option's value (empty = nothing chosen).\n   */\n  get formValue(): string {\n    return this.value;\n  }\n\n  set formValue(value: string) {\n    this.value = value;\n  }\n\n  /**\n   * Options as painted in the listbox: a leading empty row (labelled with the\n   * placeholder) so the user can return to \"no selection\". For a `required`\n   * field this empty row is the prompt — choosing it leaves the value empty,\n   * so `required` validation still blocks submit (native `<select>`\n   * semantics). Any empty-valued member of the caller's list is dropped first,\n   * so a schema enum that lists \"\" doesn't render a second, duplicate empty\n   * option. The public `options` property stays the caller's list.\n   */\n  private get listOptions(): ZlSelectOption[] {\n    return [{ value: \"\", label: this.placeholder }, ...this.options.filter((o) => o.value !== \"\")];\n  }\n\n  override render() {\n    const labelId = `${this.baseId}-label`;\n    const errorId = `${this.baseId}-error`;\n    const showError = Boolean(this.error);\n    const selected =\n      this.value === \"\" ? undefined : 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--invalid\": this.invalid || showError,\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          <select\n            class=\"zr-select__native\"\n            part=\"native\"\n            id=${`${this.baseId}-native`}\n            data-testid=${ifDefined(this.nativeTestId())}\n            aria-labelledby=${this.label ? labelId : nothing}\n            aria-label=${ifDefined(this.label ? undefined : this.ariaLabelText)}\n            aria-invalid=${this.invalid || showError ? \"true\" : \"false\"}\n            aria-describedby=${showError ? errorId : nothing}\n            ?disabled=${this.disabled}\n            ?required=${this.required}\n            @change=${this.handleNativeChange}\n          >\n            ${this.listOptions.map(\n              (option) =>\n                html`<option\n                  value=${option.value}\n                  ?disabled=${option.disabled ?? false}\n                  .selected=${live(option.value === this.value)}\n                >${option.label}</option>`,\n            )}\n          </select>\n          <div\n            class=\"zr-select__trigger\"\n            part=\"trigger\"\n            aria-hidden=\"true\"\n            @click=${this.handleTriggerClick}\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          </div>\n          <ul class=\"zr-select__listbox\" part=\"listbox\" aria-hidden=\"true\" ?hidden=${!this.open}>\n            ${this.listOptions.map((option) => this.renderOption(option))}\n          </ul>\n        </div>\n        <div\n          class=\"zr-select__error\"\n          part=\"error\"\n          id=${errorId}\n          role=\"alert\"\n          ?hidden=${!showError}\n        >\n          ${this.error}\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) {\n    const isSelected = option.value === this.value;\n    return html`\n      <li\n        class=\"zr-select__option\"\n        part=\"option\"\n        data-value=${option.value}\n        data-selected=${isSelected ? \"\" : nothing}\n        data-active=${this.open && option.value === this.activeValue ? \"\" : nothing}\n        data-disabled=${option.disabled ? \"\" : nothing}\n        @click=${() => this.handleOptionClick(option)}\n        @pointermove=${() => this.handleOptionPointerMove(option)}\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 handleLabelClick = (): void => {\n    if (!this.disabled) {\n      this.nativeEl?.focus();\n    }\n  };\n\n  private handleTriggerClick = (): void => {\n    if (this.disabled) {\n      return;\n    }\n    this.open = !this.open;\n  };\n\n  /**\n   * The native `<select>` is the source of truth for keyboard, AT, and\n   * automation. Its `change` event covers native-popup selection as well as\n   * programmatic value-setting by automation drivers.\n   */\n  private handleNativeChange = (event: Event): void => {\n    const next = (event.target as HTMLSelectElement).value;\n    this.open = false;\n    this.commitValue(next);\n  };\n\n  private handleOptionClick(option: ZlSelectOption): void {\n    if (option.disabled) {\n      return;\n    }\n    this.open = false;\n    this.nativeEl?.focus();\n    this.commitValue(option.value);\n  }\n\n  private handleOptionPointerMove(option: ZlSelectOption): void {\n    if (!option.disabled && option.value !== this.activeValue) {\n      this.activeValue = option.value;\n    }\n  }\n\n  private handleDocumentPointerDown = (event: Event): void => {\n    if (this.open && !event.composedPath().includes(this)) {\n      this.open = false;\n    }\n  };\n\n  /**\n   * Escape closes the styled popup and stops propagation so it doesn't also\n   * dismiss an enclosing dialog.\n   */\n  private handleDocumentKeydown = (event: KeyboardEvent): void => {\n    if (this.open && event.key === \"Escape\") {\n      event.stopPropagation();\n      this.open = false;\n      this.nativeEl?.focus();\n    }\n  };\n\n  /**\n   * Apply a new value from any input path (native select, styled popup), keeping\n   * `value`, form state, and listeners in sync and emitting the `zl-change`\n   * contract plus a composed native `change` for host forms.\n   */\n  private commitValue(next: string): void {\n    if (next === this.value) {\n      return;\n    }\n    this.value = next;\n    this.syncFormState();\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  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.nativeEl ?? undefined,\n      );\n    } else {\n      this.internals.setValidity?.({});\n    }\n  }\n\n  private nativeTestId(): string | undefined {\n    if (this.name) {\n      return `zitadel-select-${this.name}`;\n    }\n    if (this.testId) {\n      return `${this.testId}-native`;\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    \"error\",\n    \"invalid\",\n    \"disabled\",\n    \"open\",\n    \"aria-label\",\n    \"data-testid\",\n  ],\n  parts: [\"root\", \"label\", \"field\", \"native\", \"trigger\", \"listbox\", \"option\", \"error\"],\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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"}