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

package/dist/standalone.mjs

@@ -2058,6 +2058,36 @@ var text_field_host_default = ":host {\n  display: block;\n}\n\n::slotted([slot=
 //#region ../shared-component-styles/src/text-field.css?inline
 var text_field_default = ".zr-field {\n  align-items: stretch;\n  gap: var(--zl-spacing-02, .5rem);\n  font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n  flex-direction: column;\n  display: flex;\n}\n\n.zr-field__label-row {\n  justify-content: space-between;\n  align-items: flex-start;\n  gap: var(--zl-spacing-02, .5rem);\n  width: 100%;\n  display: flex;\n}\n\n.zr-field__label {\n  align-items: center;\n  gap: var(--zl-spacing-01, .25rem);\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  font-size: 1rem;\n  font-weight: 600;\n  line-height: 1.5rem;\n  display: inline-flex;\n}\n\n.zr-field__link {\n  color: var(--zl-color-icon-default-purple, #bba5e4);\n  flex-shrink: 0;\n  font-size: .875rem;\n  font-weight: 400;\n  line-height: 1.25rem;\n  text-decoration: none;\n}\n\n.zr-field__link:hover {\n  text-decoration: underline;\n}\n\n.zr-field__link:focus-visible {\n  outline: var(--zl-focus-width, 2px) solid var(--zl-focus-color, #f4f4f6);\n  outline-offset: var(--zl-focus-offset, 2px);\n  border-radius: 2px;\n}\n\n.zr-field__required {\n  color: var(--zl-color-text-error, #ea4f70);\n}\n\n.zr-field--disabled .zr-field__label {\n  color: var(--zl-color-text-disabled, #686883);\n}\n\n.zr-field__wrap {\n  align-items: center;\n  gap: var(--zl-spacing-02, .5rem);\n  padding-block: var(--zl-spacing-02, .5rem);\n  padding-inline: var(--zl-spacing-03, 1rem);\n  border-radius: var(--zl-radius-xs, .25rem);\n  border: 1px solid var(--zl-color-border-default-gray-300, #686883);\n  height: 2.5rem;\n  transition: border-color var(--zl-duration-fast, .12s) var(--zl-easing-standard, cubic-bezier(.2, 0, 0, 1)),\n    background-color var(--zl-duration-fast, .12s) var(--zl-easing-standard, cubic-bezier(.2, 0, 0, 1));\n  box-sizing: border-box;\n  background: none;\n  display: flex;\n  position: relative;\n  overflow: visible;\n}\n\n.zr-field__wrap--trailing {\n  padding-inline-end: 2.5rem;\n}\n\n.zr-field:not(.zr-field--disabled) .zr-field__wrap:hover:not(:focus-within) {\n  border-color: var(--zl-color-gray-500, #9e9eb2);\n  background-color: color-mix(in srgb, var(--zl-color-text-primary-white, #f4f4f6) 10%, transparent);\n}\n\n.zr-field:not(.zr-field--invalid):not(.zr-field--disabled):not(.zr-field--success) .zr-field__wrap:has(.zr-field__input:not(:placeholder-shown)):not(:focus-within) {\n  border-color: var(--zl-color-border-default-gray-400, #82829c);\n}\n\n.zr-field:not(.zr-field--invalid):not(.zr-field--disabled):not(.zr-field--success) .zr-field__wrap:focus-within {\n  border-color: var(--zl-color-border-default-white, #f4f4f6);\n  outline: none;\n}\n\n.zr-field--invalid .zr-field__wrap {\n  border-color: var(--zl-color-border-error, #ea4f70);\n}\n\n.zr-field--invalid .zr-field__wrap:focus-within {\n  border-color: var(--zl-color-border-error, #ea4f70);\n  outline: none;\n}\n\n.zr-field--success .zr-field__wrap {\n  border-color: var(--zl-color-border-success, #33a779);\n}\n\n.zr-field--success .zr-field__wrap:focus-within {\n  border-color: var(--zl-color-border-success, #33a779);\n  outline: none;\n}\n\n.zr-field--disabled .zr-field__wrap {\n  border-color: var(--zl-color-border-default-gray-200, #484a57);\n}\n\n.zr-field__input {\n  min-width: 0;\n  height: 100%;\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  background: none;\n  border: 0;\n  outline: none;\n  flex: auto;\n  padding: 0;\n  font-family: inherit;\n  font-size: .875rem;\n  font-weight: 400;\n  line-height: 1.25rem;\n}\n\n.zr-field__input[type=\"password\"] {\n  letter-spacing: .125rem;\n}\n\n.zr-field__input::placeholder {\n  color: var(--zl-color-text-secondary-gray, #bfbfcf);\n}\n\n.zr-field__input:focus, .zr-field__input:focus-visible {\n  outline: none;\n}\n\n.zr-field__input:disabled {\n  cursor: not-allowed;\n  color: var(--zl-color-text-disabled, #686883);\n}\n\n.zr-field--disabled .zr-field__wrap:hover {\n  border-color: var(--zl-color-border-default-gray-200, #484a57);\n  background-color: #0000;\n}\n\n.zr-field__trailing {\n  width: 1rem;\n  height: 1rem;\n  color: var(--zl-color-text-secondary-gray, #bfbfcf);\n  justify-content: center;\n  align-items: center;\n  display: inline-flex;\n  position: absolute;\n  top: 50%;\n  right: .9375rem;\n  transform: translateY(-50%);\n}\n\n.zr-field__trailing-action {\n  color: inherit;\n  cursor: pointer;\n  background: none;\n  border: 0;\n  justify-content: center;\n  align-items: center;\n  margin: 0;\n  padding: 0;\n  line-height: 0;\n  display: inline-flex;\n}\n\n.zr-field__trailing-action:focus-visible {\n  outline: var(--zl-focus-width, 2px) solid var(--zl-focus-color, #f4f4f6);\n  outline-offset: var(--zl-focus-offset, 2px);\n  border-radius: 2px;\n}\n\n.zr-field__trailing-action:disabled {\n  cursor: not-allowed;\n}\n\n.zr-field--invalid .zr-field__trailing {\n  color: var(--zl-color-text-error, #ea4f70);\n}\n\n.zr-field--success .zr-field__trailing {\n  color: var(--zl-color-text-success, #33a779);\n}\n\n.zr-field__help {\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  font-size: .75rem;\n  line-height: 1rem;\n}\n\n.zr-field__success {\n  color: var(--zl-color-text-success, #33a779);\n  font-size: .75rem;\n  line-height: 1rem;\n}\n\n.zr-field__error {\n  color: var(--zl-color-text-error, #ea4f70);\n  font-size: .75rem;\n  line-height: 1rem;\n}\n";
 //#endregion
+//#region src/internal/hook-name.ts
+/**
+* Reserved auth-method credential prefix of flow field names. Mirrors
+* `AUTH_METHOD_PREFIX` in `@zitadel/config` (`src/validate.ts`), which
+* owns the wire dialect; components has no dependency on that package,
+* so the literal is repeated here.
+*/
+const AUTH_METHOD_PREFIX = "x-auth-methods#";
+/**
+* Normalises a flow field name into its automation-hook token.
+*
+* Auth-method credential fields arrive from the flow engine as
+* `x-auth-methods#<method>` (e.g. `x-auth-methods#password`), but the
+* documented `data-testid` hooks are method-named
+* (`zitadel-field-password`, `zitadel-input-password` — see
+* packages/components/README.md and apps/cli/SKILLS.md). This helper
+* feeds both hook construction sites: the bundled template's `testid`
+* Liquid filter and `<zl-field>`'s native-input testid.
+*
+* Only the reserved credential prefix is stripped — user-schema
+* property names are tenant-authored arbitrary strings, so a `#`
+* anywhere else is part of the name and stays in the hook. The
+* after-prefix token is used verbatim (no case or spacing changes),
+* and the field's `name` attribute always keeps the raw wire/form key.
+*/
+function hookName(field) {
+	if (field.startsWith(AUTH_METHOD_PREFIX) && field.length > 15) return field.slice(15);
+	return field;
+}
+//#endregion
 //#region src/atoms/zl-field.ts
 let ZlField = class ZlField extends i$2 {
 	static formAssociated = true;
@@ -2397,7 +2427,7 @@ let ZlField = class ZlField extends i$2 {
 		}
 	};
 	nativeInputTestId() {
-		if (this.name) return `zitadel-input-${this.name}`;
+		if (this.name) return `zitadel-input-${hookName(this.name)}`;
 		if (this.testId) return `${this.testId}-input`;
 	}
 	dispatchNativeInput(source) {
@@ -9675,7 +9705,7 @@ function lookup(locale, key) {
 }
 //#endregion
 //#region src/orchestrator/templates/default.liquid
-var default_default = "<zl-page-shell data-zl-template-root>\n  {% if branding.logo_url %}\n    <img slot=\"header\" class=\"zl-card-logo\" src=\"{{ branding.logo_url }}\" alt=\"\" />\n  {% endif %}\n  <zl-card>\n    <h1 slot=\"header\" class=\"zl-card-title\">{{ step.texts.title_key | t: identity.display_name }}</h1>\n    {% if step.texts.description_key %}\n      {% assign card_subtitle = step.texts.description_key | t: identity.display_name %}\n      {% if card_subtitle != \"\" %}\n        <p slot=\"header\" class=\"zl-card-subtitle\">{{ card_subtitle }}</p>\n      {% endif %}\n    {% endif %}\n\n    {% if errors and errors.size > 0 %}\n      {% for err in errors %}\n        {% if err | formLevelError %}\n          {% assign alert_heading = err.text_key | alertHeading %}\n          {% assign alert_body = err.text_key | alertBody %}\n          <zl-alert severity=\"error\" dismissible data-zl-step-error{% if alert_heading != \"\" %} heading=\"{{ alert_heading | t }}\"{% endif %}>\n            {% if alert_body != \"\" %}{{ alert_body | t }}{% elsif err.text_key %}{{ err.text_key | t }}{% else %}{{ err.message }}{% endif %}\n          </zl-alert>\n        {% endif %}\n      {% endfor %}\n    {% endif %}\n\n    {% for f in fields %}\n      {% assign field_placeholder = f.text_key | fieldPlaceholder %}\n      {% assign field_help = f.text_key | fieldHelp %}\n      {% assign field_err = f.name | fieldError: errors %}\n      {% case f.type %}\n      {% when 'checkbox' %}\n        <zl-checkbox\n          name=\"{{ f.name }}\"\n          data-testid=\"zitadel-field-{{ f.name }}\"\n          label=\"{{ f.text_key | t }}\"\n          value=\"true\"\n          {% if f.value %}checked{% endif %}\n          {% if f.required %}required{% endif %}\n        ></zl-checkbox>\n      {% when 'select' %}\n        <zl-select\n          name=\"{{ f.name }}\"\n          data-testid=\"zitadel-field-{{ f.name }}\"\n          label=\"{{ f.text_key | t }}\"\n          value=\"{{ f.value }}\"\n          options='{{ f.validation.enum | selectOptions | json }}'\n          {% if f.required %}required{% endif %}\n          {% if field_placeholder != \"\" %}placeholder=\"{{ field_placeholder }}\"{% endif %}\n        ></zl-select>\n      {% else %}\n        {% assign autocomplete_val = '' %}\n        {% if f.name == 'email' %}\n          {% assign autocomplete_val = 'email' %}\n        {% elsif f.type == 'password' and step.name contains 'register' %}\n          {% assign autocomplete_val = 'new-password' %}\n        {% elsif f.type == 'password' %}\n          {% assign autocomplete_val = 'current-password' %}\n        {% endif %}\n        <zl-field\n          name=\"{{ f.name }}\"\n          data-testid=\"zitadel-field-{{ f.name }}\"\n          label=\"{{ f.text_key | t }}\"\n          type=\"{{ f.type }}\"\n          value=\"{{ f.value }}\"\n          {% if autocomplete_val != '' %}autocomplete=\"{{ autocomplete_val }}\"{% endif %}\n          {% if f.required %}required{% endif %}\n          {% if field_placeholder != \"\" %}placeholder=\"{{ field_placeholder }}\"{% endif %}\n          {% if field_err != \"\" %}invalid error=\"{{ field_err }}\"{% endif %}\n        >\n          {% if field_help != \"\" %}\n            <span slot=\"help\">{{ field_help }}</span>\n          {% endif %}\n        </zl-field>\n      {% endcase %}\n    {% endfor %}\n\n    {% assign recover = actions | where: \"name\", \"recover\" | first %}\n    {% if recover %}\n      <p class=\"zl-card-forgot\">\n        <a href=\"#\" class=\"zl-card-forgot__link\" data-action=\"recover\">{{ recover.text_key | t }}</a>\n      </p>\n    {% endif %}\n\n    {% for a in actions %}\n      {% if a.primary %}\n        <zl-button\n          hierarchy=\"primary\"\n          size=\"medium\"\n          type=\"submit\"\n          block\n          action=\"{{ a.name }}\"\n          data-testid=\"zitadel-action-{{ a.name }}\"\n          label=\"{{ a.text_key | t }}\"\n          {% if loading %}loading{% endif %}\n        ></zl-button>\n      {% endif %}\n    {% endfor %}\n\n    {% for a in actions %}\n      {% unless a.primary or a.name == 'passkey' or a.name == 'register' or a.name == 'sign_in' or a.name == 'recover' %}\n        <zl-button\n          hierarchy=\"secondary\"\n          size=\"medium\"\n          type=\"button\"\n          block\n          action=\"{{ a.name }}\"\n          data-testid=\"zitadel-action-{{ a.name }}\"\n          label=\"{{ a.text_key | t }}\"\n        ></zl-button>\n      {% endunless %}\n    {% endfor %}\n\n    {% assign passkey = actions | where: \"name\", \"passkey\" | first %}\n    {% if passkey %}\n      {% unless passkey.primary %}\n        <zl-button\n          hierarchy=\"secondary\"\n          size=\"medium\"\n          block\n          action=\"passkey\"\n          data-testid=\"zitadel-action-passkey\"\n          label=\"{{ passkey.text_key | t }}\"\n        ></zl-button>\n      {% endunless %}\n    {% endif %}\n\n\n    {% assign register = actions | where: \"name\", \"register\" | first %}\n    {% if register %}\n      <p class=\"zl-card-nav\">\n        {{ 'identifier.action.register.lead' | t }}<a href=\"#\" class=\"zl-card-nav__link\" data-action=\"register\" data-testid=\"zitadel-action-register-link\">{{ 'identifier.action.register.link' | t }}</a>\n      </p>\n    {% endif %}\n\n    {% assign sign_in = actions | where: \"name\", \"sign_in\" | first %}\n    {% if sign_in %}\n      <p class=\"zl-card-nav\">\n        {{ 'register.action.sign_in.lead' | t }}<a href=\"#\" class=\"zl-card-nav__link\" data-action=\"sign_in\" data-testid=\"zitadel-action-sign_in-link\">{{ 'register.action.sign_in.link' | t }}</a>\n      </p>\n    {% endif %}\n\n    {% if challenge %}\n      {% if challenge.method == \"passkey\" or challenge.method == \"passkey_register\" %}\n        {% assign ceremony = \"authenticate\" %}\n        {% assign submit_method = challenge.method %}\n        {% if challenge.method == \"passkey_register\" or challenge.options.user %}\n          {% assign ceremony = \"register\" %}\n          {% assign submit_method = \"passkey_register\" %}\n        {% endif %}\n        <zl-passkey\n          ceremony=\"{{ ceremony }}\"\n          method=\"{{ submit_method }}\"\n          challenge-id=\"{{ challenge.challenge_id }}\"\n          options='{{ challenge.options | json }}'\n          pending-label=\"{{ 'passkey.pending.status' | t }}\"\n          cancel-label=\"{{ 'action.cancel' | t }}\"\n        ></zl-passkey>\n      {% endif %}\n    {% endif %}\n\n    {% mandatory_gates %}\n  </zl-card>\n</zl-page-shell>\n";
+var default_default = "<zl-page-shell data-zl-template-root>\n  {% if branding.logo_url %}\n    <img slot=\"header\" class=\"zl-card-logo\" src=\"{{ branding.logo_url }}\" alt=\"\" />\n  {% endif %}\n  <zl-card>\n    <h1 slot=\"header\" class=\"zl-card-title\">{{ step.texts.title_key | t: identity.display_name }}</h1>\n    {% if step.texts.description_key %}\n      {% assign card_subtitle = step.texts.description_key | t: identity.display_name %}\n      {% if card_subtitle != \"\" %}\n        <p slot=\"header\" class=\"zl-card-subtitle\">{{ card_subtitle }}</p>\n      {% endif %}\n    {% endif %}\n\n    {% if errors and errors.size > 0 %}\n      {% for err in errors %}\n        {% if err | formLevelError %}\n          {% assign alert_heading = err.text_key | alertHeading %}\n          {% assign alert_body = err.text_key | alertBody %}\n          <zl-alert severity=\"error\" dismissible data-zl-step-error{% if alert_heading != \"\" %} heading=\"{{ alert_heading | t }}\"{% endif %}>\n            {% if alert_body != \"\" %}{{ alert_body | t }}{% elsif err.text_key %}{{ err.text_key | t }}{% else %}{{ err.message }}{% endif %}\n          </zl-alert>\n        {% endif %}\n      {% endfor %}\n    {% endif %}\n\n    {% for f in fields %}\n      {% assign field_placeholder = f.text_key | fieldPlaceholder %}\n      {% assign field_help = f.text_key | fieldHelp %}\n      {% assign field_err = f.name | fieldError: errors %}\n      {% case f.type %}\n      {% when 'checkbox' %}\n        <zl-checkbox\n          name=\"{{ f.name }}\"\n          data-testid=\"zitadel-field-{{ f.name | testid }}\"\n          label=\"{{ f.text_key | t }}\"\n          value=\"true\"\n          {% if f.value %}checked{% endif %}\n          {% if f.required %}required{% endif %}\n        ></zl-checkbox>\n      {% when 'select' %}\n        <zl-select\n          name=\"{{ f.name }}\"\n          data-testid=\"zitadel-field-{{ f.name | testid }}\"\n          label=\"{{ f.text_key | t }}\"\n          value=\"{{ f.value }}\"\n          options='{{ f.validation.enum | selectOptions | json }}'\n          {% if f.required %}required{% endif %}\n          {% if field_placeholder != \"\" %}placeholder=\"{{ field_placeholder }}\"{% endif %}\n        ></zl-select>\n      {% else %}\n        {% assign autocomplete_val = '' %}\n        {% if f.name == 'email' %}\n          {% assign autocomplete_val = 'email' %}\n        {% elsif f.type == 'password' and step.name contains 'register' %}\n          {% assign autocomplete_val = 'new-password' %}\n        {% elsif f.type == 'password' %}\n          {% assign autocomplete_val = 'current-password' %}\n        {% endif %}\n        <zl-field\n          name=\"{{ f.name }}\"\n          data-testid=\"zitadel-field-{{ f.name | testid }}\"\n          label=\"{{ f.text_key | t }}\"\n          type=\"{{ f.type }}\"\n          value=\"{{ f.value }}\"\n          {% if autocomplete_val != '' %}autocomplete=\"{{ autocomplete_val }}\"{% endif %}\n          {% if f.required %}required{% endif %}\n          {% if field_placeholder != \"\" %}placeholder=\"{{ field_placeholder }}\"{% endif %}\n          {% if field_err != \"\" %}invalid error=\"{{ field_err }}\"{% endif %}\n        >\n          {% if field_help != \"\" %}\n            <span slot=\"help\">{{ field_help }}</span>\n          {% endif %}\n        </zl-field>\n      {% endcase %}\n    {% endfor %}\n\n    {% assign recover = actions | where: \"name\", \"recover\" | first %}\n    {% if recover %}\n      <p class=\"zl-card-forgot\">\n        <a href=\"#\" class=\"zl-card-forgot__link\" data-action=\"recover\">{{ recover.text_key | t }}</a>\n      </p>\n    {% endif %}\n\n    {% for a in actions %}\n      {% if a.primary %}\n        <zl-button\n          hierarchy=\"primary\"\n          size=\"medium\"\n          type=\"submit\"\n          block\n          action=\"{{ a.name }}\"\n          data-testid=\"zitadel-action-{{ a.name }}\"\n          label=\"{{ a.text_key | t }}\"\n          {% if loading %}loading{% endif %}\n        ></zl-button>\n      {% endif %}\n    {% endfor %}\n\n    {% for a in actions %}\n      {% unless a.primary or a.name == 'passkey' or a.name == 'register' or a.name == 'sign_in' or a.name == 'recover' %}\n        <zl-button\n          hierarchy=\"secondary\"\n          size=\"medium\"\n          type=\"button\"\n          block\n          action=\"{{ a.name }}\"\n          data-testid=\"zitadel-action-{{ a.name }}\"\n          label=\"{{ a.text_key | t }}\"\n        ></zl-button>\n      {% endunless %}\n    {% endfor %}\n\n    {% assign passkey = actions | where: \"name\", \"passkey\" | first %}\n    {% if passkey %}\n      {% unless passkey.primary %}\n        <zl-button\n          hierarchy=\"secondary\"\n          size=\"medium\"\n          block\n          action=\"passkey\"\n          data-testid=\"zitadel-action-passkey\"\n          label=\"{{ passkey.text_key | t }}\"\n        ></zl-button>\n      {% endunless %}\n    {% endif %}\n\n\n    {% assign register = actions | where: \"name\", \"register\" | first %}\n    {% if register %}\n      <p class=\"zl-card-nav\">\n        {{ 'identifier.action.register.lead' | t }}<a href=\"#\" class=\"zl-card-nav__link\" data-action=\"register\" data-testid=\"zitadel-action-register-link\">{{ 'identifier.action.register.link' | t }}</a>\n      </p>\n    {% endif %}\n\n    {% assign sign_in = actions | where: \"name\", \"sign_in\" | first %}\n    {% if sign_in %}\n      <p class=\"zl-card-nav\">\n        {{ 'register.action.sign_in.lead' | t }}<a href=\"#\" class=\"zl-card-nav__link\" data-action=\"sign_in\" data-testid=\"zitadel-action-sign_in-link\">{{ 'register.action.sign_in.link' | t }}</a>\n      </p>\n    {% endif %}\n\n    {% if challenge %}\n      {% if challenge.method == \"passkey\" or challenge.method == \"passkey_register\" %}\n        {% assign ceremony = \"authenticate\" %}\n        {% assign submit_method = challenge.method %}\n        {% if challenge.method == \"passkey_register\" or challenge.options.user %}\n          {% assign ceremony = \"register\" %}\n          {% assign submit_method = \"passkey_register\" %}\n        {% endif %}\n        <zl-passkey\n          ceremony=\"{{ ceremony }}\"\n          method=\"{{ submit_method }}\"\n          challenge-id=\"{{ challenge.challenge_id }}\"\n          options='{{ challenge.options | json }}'\n          pending-label=\"{{ 'passkey.pending.status' | t }}\"\n          cancel-label=\"{{ 'action.cancel' | t }}\"\n        ></zl-passkey>\n      {% endif %}\n    {% endif %}\n\n    {% mandatory_gates %}\n  </zl-card>\n</zl-page-shell>\n";
 //#endregion
 //#region src/orchestrator/liquid.ts
 /**
@@ -9725,7 +9755,7 @@ function createLiquidEngine(options) {
 	engine.registerFilter("raw", (value) => stringify(value));
 	engine.registerFilter("t", function tFilter(key, ...args) {
 		const lookupKey = stringify(key);
-		return interpolate(options.locale[lookupKey] ?? injectedKeyFallback(options.locale, lookupKey) ?? lookupKey, args.map(stringify));
+		return interpolate(options.locale[lookupKey] ?? injectedKeyFallback(options.locale, lookupKey) ?? fieldLabelFallback(lookupKey) ?? lookupKey, args.map(stringify));
 	});
 	/** Resolves `{text_key}.placeholder` — empty when undefined (not the raw key). */
 	engine.registerFilter("fieldPlaceholder", (textKey) => {
@@ -9773,6 +9803,13 @@ function createLiquidEngine(options) {
 		}
 		return "";
 	});
+	/**
+	* Automation-hook token for a field name: strips the
+	* `x-auth-methods#` credential prefix so testids stay method-named
+	* (`zitadel-field-password`), while the `name` attribute keeps the
+	* raw wire key. See hookName for the contract.
+	*/
+	engine.registerFilter("testid", (fieldName) => hookName(stringify(fieldName)));
 	/** True when the error should render as `<zl-alert>`, not on a field. */
 	engine.registerFilter("formLevelError", (err) => {
 		const key = err?.text_key ?? "";
@@ -9801,6 +9838,22 @@ function injectedKeyFallback(locale, key) {
 	for (const { suffix, fallback } of INJECTED_KEY_FALLBACKS) if (key.endsWith(suffix)) return locale[fallback];
 }
 /**
+* Fallback for field-label keys (`<step>.field.<name>` — see
+* `FlowField.TextKey` in `internal/domain/flow_field_resolver.go`). Both
+* halves are tenant-chosen (step names and schema property names), so no
+* catalog can enumerate the keys; a miss renders a humanised property name
+* ("dateOfBirth" → "Date of birth") instead of leaking the raw key into the
+* form. Sub-keys like `.placeholder`/`.help` are excluded — they resolve
+* through their own filters, which stay empty on a miss.
+*/
+function fieldLabelFallback(key) {
+	const index = key.lastIndexOf(".field.");
+	if (index === -1) return void 0;
+	const field = key.slice(index + 7);
+	if (field === "" || field.includes(".")) return void 0;
+	return capitaliseFirst(humaniseFieldName(field));
+}
+/**
 * Rule-suffix fallbacks for the server's field-validation keys
 * (`error.<field>_<rule>` — see `FlowFieldValidationError.TextKey` in
 * `internal/domain/flow_field_resolver.go`). Field names come from the
@@ -9839,10 +9892,12 @@ const FLOW_ERROR_RULE_FALLBACKS = [
 ];
 const FLOW_ERROR_CATCH_ALL_KEY = "error.field_invalid";
 /**
-* Localises a `step.error` payload of field-validation text keys.
+* Localises a `step.error` payload of `error.*` catalog keys —
+* field-validation violations and general engine failures (e.g.
+* `error.invalid_credentials`, `error.passkey_invalid`) alike.
 * Returns `null` unless EVERY `"; "`-joined segment is an `error.*` key
-* — the caller keeps other payloads (outcome names, `auth_attempt.*`
-* diagnostics) verbatim.
+* — the caller keeps other payloads (outcome tokens such as
+* `user_not_found`) verbatim.
 *
 * Keys the locale knows pass through as `text_key` entries: the template
 * localises them via `| t`, and `fieldErrorKeys` routes the known ones
@@ -10037,6 +10092,8 @@ const en = {
 	"error.passkey_setup_failed": "Passkey registration did not complete. Please try again.",
 	"error.passkey_unsupported": "This device does not support passkeys",
 	"error.passkey_failed": "Something went wrong. Please try again.",
+	"error.passkey_invalid": "This passkey could not be verified. Please try again.",
+	"error.passkey_registration_invalid": "The new passkey could not be verified. Please try registering it again.",
 	"error.email_required": "Please enter an email address",
 	"error.email_invalid": "Please enter a valid email",
 	"error.password_required": "Please enter a password",
@@ -10151,6 +10208,8 @@ const de = {
 	"error.passkey_setup_failed": "Passkey-Registrierung wurde nicht abgeschlossen. Bitte versuche es erneut.",
 	"error.passkey_unsupported": "Dieses Gerät unterstützt keine Passkeys",
 	"error.passkey_failed": "Etwas ist schiefgelaufen. Bitte versuche es erneut.",
+	"error.passkey_invalid": "Dieser Passkey konnte nicht bestätigt werden. Bitte versuche es erneut.",
+	"error.passkey_registration_invalid": "Der neue Passkey konnte nicht bestätigt werden. Bitte registriere ihn erneut.",
 	"error.email_required": "Bitte gib eine E-Mail-Adresse ein",
 	"error.email_invalid": "Bitte gib eine gültige E-Mail-Adresse ein",
 	"error.password_required": "Bitte gib ein Passwort ein",
@@ -10267,6 +10326,8 @@ const builtinLocales = {
 		"error.passkey_setup_failed": "La registrazione della passkey non è stata completata. Riprova.",
 		"error.passkey_unsupported": "Questo dispositivo non supporta le passkey",
 		"error.passkey_failed": "Qualcosa è andato storto. Riprova.",
+		"error.passkey_invalid": "Non è stato possibile verificare questa passkey. Riprova.",
+		"error.passkey_registration_invalid": "Non è stato possibile verificare la nuova passkey. Riprova a registrarla.",
 		"error.email_required": "Inserisci un indirizzo e-mail",
 		"error.email_invalid": "Inserisci un indirizzo e-mail valido",
 		"error.password_required": "Inserisci una password",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zitadel/components",
-  "version": "0.1.0-alpha.16",
+  "version": "0.1.0-alpha.17",
   "description": "Lit-based atomic web components and the <zitadel-login> orchestrator for the Zitadel auth UI.",
   "homepage": "https://github.com/zitadel/nextgen/tree/main/packages/components#readme",
   "bugs": {
@@ -69,11 +69,11 @@
     "lightningcss": "^1.30.1",
     "tsdown": "^0.21.10",
     "tslib": "^2.8.1",
-    "@zitadel/config": "0.1.0-alpha.16",
-    "@zitadel/api": "0.1.0-alpha.16",
     "@zitadel/api-mock": "0.0.0",
-    "@zitadel/shared-component-styles": "0.0.0",
-    "@zitadel/design-tokens": "0.1.0-alpha.0"
+    "@zitadel/config": "0.1.0-alpha.17",
+    "@zitadel/api": "0.1.0-alpha.17",
+    "@zitadel/design-tokens": "0.1.0-alpha.0",
+    "@zitadel/shared-component-styles": "0.0.0"
   },
   "scripts": {
     "build": "tsdown",

package/dist/atoms-C-zXJjaz.mjs.map

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