@zitadel/components 0.1.0-alpha.4 → 0.1.0-alpha.8

package/dist/standalone.mjs

@@ -944,7 +944,7 @@ const cssVars = {
 		"page": "var(--zl-container-page)"
 	}
 };
-const tokensCss = "/* AUTOGENERATED by packages/design-tokens/scripts/build.ts — do not edit by hand.\n   Source: src/generated/figma.tokens.json + src/overrides.ts.\n   Re-run: pnpm nx run @zitadel/design-tokens:generate */\n\n:root,\n[data-theme=\"dark\"] {\n  --zl-color-surface-default-black: #0f0f11;\n  --zl-color-surface-default-white: #f4f4f6;\n  --zl-color-surface-default-primary-gray: #252528;\n  --zl-color-surface-default-secondary-gray: #37373a;\n  --zl-color-text-primary-white: #f4f4f6;\n  --zl-color-text-secondary-gray: #bfbfcf;\n  --zl-color-text-button-default: #0f0f11;\n  --zl-color-text-button-invert: #f4f4f6;\n  --zl-color-text-disabled: #686883;\n  --zl-color-text-error: #ea4f70;\n  --zl-color-text-success: #33a779;\n  --zl-color-text-subtitle-pink: #f48aa0;\n  --zl-color-text-subtitle-purple: #bba5e4;\n  --zl-color-text-subtitle-gray: #bfbfcf;\n  --zl-color-text-subtitle-orange: #f25543;\n  --zl-color-icon-default-black: #0f0f11;\n  --zl-color-icon-default-white: #f4f4f6;\n  --zl-color-icon-default-gray: #bfbfcf;\n  --zl-color-icon-default-pink: #f48aa0;\n  --zl-color-icon-default-purple: #bba5e4;\n  --zl-color-icon-default-orange: #f25543;\n  --zl-color-icon-disabled: #686883;\n  --zl-color-icon-error: #ea4f70;\n  --zl-color-icon-success: #33a779;\n  --zl-color-border-default-black: #252528;\n  --zl-color-border-default-white: #f4f4f6;\n  --zl-color-border-default-gray-100: #37373a;\n  --zl-color-border-default-gray-200: #484a57;\n  --zl-color-border-default-gray-300: #686883;\n  --zl-color-border-default-gray-400: #82829c;\n  --zl-color-border-error: #ea4f70;\n  --zl-color-border-success: #33a779;\n  --zl-color-gray-50: #0f0f11;\n  --zl-color-gray-75: #252528;\n  --zl-color-gray-100: #37373a;\n  --zl-color-gray-200: #484a57;\n  --zl-color-gray-300: #686883;\n  --zl-color-gray-400: #82829c;\n  --zl-color-gray-500: #9e9eb2;\n  --zl-color-gray-600: #cfcfde;\n  --zl-color-gray-700: #bfbfcf;\n  --zl-color-gray-800: #e1e1e7;\n  --zl-color-gray-900: #f4f4f6;\n  --zl-spacing-01: 0.25rem;\n  --zl-spacing-02: 0.5rem;\n  --zl-spacing-03: 1rem;\n  --zl-spacing-04: 1.5rem;\n  --zl-spacing-05: 2rem;\n  --zl-spacing-06: 1.5rem;\n  --zl-spacing-07: 2.5rem;\n  --zl-spacing-08: 3rem;\n  --zl-spacing-09: 3.5rem;\n  --zl-spacing-10: 4rem;\n  --zl-spacing-11: 5rem;\n  --zl-spacing-12: 5.5rem;\n  --zl-spacing-13: 6rem;\n  --zl-spacing-14: 6.5rem;\n  --zl-spacing-15: 7rem;\n  --zl-spacing-16: 7.5rem;\n  --zl-radius-xs: 0.25rem;\n  --zl-radius-s: 0.5rem;\n  --zl-radius-m: 0.75rem;\n  --zl-radius-l: 1rem;\n  --zl-radius-xl: 1.5rem;\n  --zl-font-family-sans: \"Arimo\", \"APK Futural\", system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif;\n  --zl-font-family-heading: \"APK Futural\", \"Arimo\", system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif;\n  --zl-font-family-mono: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n  --zl-duration-instant: 0ms;\n  --zl-duration-fast: 120ms;\n  --zl-duration-base: 200ms;\n  --zl-duration-slow: 320ms;\n  --zl-easing-standard: cubic-bezier(0.2, 0, 0, 1);\n  --zl-easing-decelerate: cubic-bezier(0, 0, 0, 1);\n  --zl-easing-accelerate: cubic-bezier(0.3, 0, 1, 1);\n  --zl-focus-width: 2px;\n  --zl-focus-offset: 2px;\n  --zl-focus-color: #f4f4f6;\n  --zl-breakpoint-xs: 26.5625rem;\n  --zl-breakpoint-sm: 40rem;\n  --zl-breakpoint-md: 48rem;\n  --zl-breakpoint-lg: 64rem;\n  --zl-breakpoint-xl: 80rem;\n  --zl-breakpoint-2xl: 96rem;\n  --zl-breakpoint-3xl: 120rem;\n  --zl-breakpoint-4xl: 160rem;\n  --zl-container-auth-card: 24rem;\n  --zl-container-page: 80rem;\n}\n\n[data-theme=\"light\"] {\n  /* Reserved. Light mode lands when the Figma design system publishes\n     a light variable mode; the next sync will populate this block. */\n}\n";
+const tokensCss = "/* AUTOGENERATED by packages/design-tokens/scripts/build.ts — do not edit by hand.\n   Source: src/generated/figma.tokens.json + src/overrides.ts.\n   Re-run: moon run design-tokens:generate */\n\n:root,\n[data-theme=\"dark\"] {\n  --zl-color-surface-default-black: #0f0f11;\n  --zl-color-surface-default-white: #f4f4f6;\n  --zl-color-surface-default-primary-gray: #252528;\n  --zl-color-surface-default-secondary-gray: #37373a;\n  --zl-color-text-primary-white: #f4f4f6;\n  --zl-color-text-secondary-gray: #bfbfcf;\n  --zl-color-text-button-default: #0f0f11;\n  --zl-color-text-button-invert: #f4f4f6;\n  --zl-color-text-disabled: #686883;\n  --zl-color-text-error: #ea4f70;\n  --zl-color-text-success: #33a779;\n  --zl-color-text-subtitle-pink: #f48aa0;\n  --zl-color-text-subtitle-purple: #bba5e4;\n  --zl-color-text-subtitle-gray: #bfbfcf;\n  --zl-color-text-subtitle-orange: #f25543;\n  --zl-color-icon-default-black: #0f0f11;\n  --zl-color-icon-default-white: #f4f4f6;\n  --zl-color-icon-default-gray: #bfbfcf;\n  --zl-color-icon-default-pink: #f48aa0;\n  --zl-color-icon-default-purple: #bba5e4;\n  --zl-color-icon-default-orange: #f25543;\n  --zl-color-icon-disabled: #686883;\n  --zl-color-icon-error: #ea4f70;\n  --zl-color-icon-success: #33a779;\n  --zl-color-border-default-black: #252528;\n  --zl-color-border-default-white: #f4f4f6;\n  --zl-color-border-default-gray-100: #37373a;\n  --zl-color-border-default-gray-200: #484a57;\n  --zl-color-border-default-gray-300: #686883;\n  --zl-color-border-default-gray-400: #82829c;\n  --zl-color-border-error: #ea4f70;\n  --zl-color-border-success: #33a779;\n  --zl-color-gray-50: #0f0f11;\n  --zl-color-gray-75: #252528;\n  --zl-color-gray-100: #37373a;\n  --zl-color-gray-200: #484a57;\n  --zl-color-gray-300: #686883;\n  --zl-color-gray-400: #82829c;\n  --zl-color-gray-500: #9e9eb2;\n  --zl-color-gray-600: #cfcfde;\n  --zl-color-gray-700: #bfbfcf;\n  --zl-color-gray-800: #e1e1e7;\n  --zl-color-gray-900: #f4f4f6;\n  --zl-spacing-01: 0.25rem;\n  --zl-spacing-02: 0.5rem;\n  --zl-spacing-03: 1rem;\n  --zl-spacing-04: 1.5rem;\n  --zl-spacing-05: 2rem;\n  --zl-spacing-06: 1.5rem;\n  --zl-spacing-07: 2.5rem;\n  --zl-spacing-08: 3rem;\n  --zl-spacing-09: 3.5rem;\n  --zl-spacing-10: 4rem;\n  --zl-spacing-11: 5rem;\n  --zl-spacing-12: 5.5rem;\n  --zl-spacing-13: 6rem;\n  --zl-spacing-14: 6.5rem;\n  --zl-spacing-15: 7rem;\n  --zl-spacing-16: 7.5rem;\n  --zl-radius-xs: 0.25rem;\n  --zl-radius-s: 0.5rem;\n  --zl-radius-m: 0.75rem;\n  --zl-radius-l: 1rem;\n  --zl-radius-xl: 1.5rem;\n  --zl-font-family-sans: \"Arimo\", \"APK Futural\", system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif;\n  --zl-font-family-heading: \"APK Futural\", \"Arimo\", system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif;\n  --zl-font-family-mono: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n  --zl-duration-instant: 0ms;\n  --zl-duration-fast: 120ms;\n  --zl-duration-base: 200ms;\n  --zl-duration-slow: 320ms;\n  --zl-easing-standard: cubic-bezier(0.2, 0, 0, 1);\n  --zl-easing-decelerate: cubic-bezier(0, 0, 0, 1);\n  --zl-easing-accelerate: cubic-bezier(0.3, 0, 1, 1);\n  --zl-focus-width: 2px;\n  --zl-focus-offset: 2px;\n  --zl-focus-color: #f4f4f6;\n  --zl-breakpoint-xs: 26.5625rem;\n  --zl-breakpoint-sm: 40rem;\n  --zl-breakpoint-md: 48rem;\n  --zl-breakpoint-lg: 64rem;\n  --zl-breakpoint-xl: 80rem;\n  --zl-breakpoint-2xl: 96rem;\n  --zl-breakpoint-3xl: 120rem;\n  --zl-breakpoint-4xl: 160rem;\n  --zl-container-auth-card: 24rem;\n  --zl-container-page: 80rem;\n}\n\n[data-theme=\"light\"] {\n  /* Reserved. Light mode lands when the Figma design system publishes\n     a light variable mode; the next sync will populate this block. */\n}\n";
 //#endregion
 //#region src/styles/tokens.ts
 function wrap(node) {
@@ -4225,30 +4225,35 @@ function sanitiseUrl(value, field, issues) {
 //#endregion
 //#region src/orchestrator/font-loader.ts
 /**
-* Inject `branding.font_url` as `<link rel="stylesheet">` inside the
-* `<zitadel-login>` Shadow DOM. Per `docs/design/branding/templates.md`:
+* Inject `branding.font_url` as `<link rel="stylesheet">` into the host
+* document's `<head>`. Per `docs/design/branding/templates.md`:
 *
 *   "The `font_url` stylesheet is injected by the orchestrator; the template
 *    does not emit the `<link>` tag itself."
 *
+* The link must live at document level, not inside the shadow root:
+* browsers ignore `@font-face` rules declared in shadow-tree stylesheets,
+* so a shadow-scoped link would never register the font faces and every
+* branded font silently falls back to the system stack. `font-family`
+* references inside the shadow tree resolve against document-level faces.
+*
 * Idempotent: calling with the same URL is a no-op; calling with a new URL
 * replaces the previous link. Calling with `null`/`undefined` removes any
 * previously injected link.
 */
 const LINK_ID = "zl-font-link";
 function applyFontUrl(shadowRoot, fontUrl) {
-	const existing = shadowRoot.getElementById?.(LINK_ID);
+	const ownerDocument = shadowRoot.ownerDocument ?? document;
+	const existing = ownerDocument.head.querySelector(`link#${LINK_ID}`);
 	if (!fontUrl) {
 		existing?.remove();
 		return;
 	}
-	if (existing && existing.href === fontUrl) return;
-	existing?.remove();
-	const link = (shadowRoot.ownerDocument ?? document).createElement("link");
+	const link = existing ?? ownerDocument.createElement("link");
 	link.id = LINK_ID;
 	link.rel = "stylesheet";
-	link.href = fontUrl;
-	shadowRoot.prepend(link);
+	if (link.href !== fontUrl) link.href = fontUrl;
+	if (!existing) ownerDocument.head.appendChild(link);
 }
 //#endregion
 //#region src/internal/escape-html.ts
@@ -8720,17 +8725,14 @@ function patchMandatoryGates(html, step, locale) {
 }
 function collectMissingAtoms(fragment, step, locale) {
 	const additions = [];
-	if (step.fields) for (const [name, field] of Object.entries(step.fields)) {
+	if (step.fields) for (const field of step.fields) {
 		if (!field.required) continue;
-		if (hasFieldFor(fragment, name)) continue;
-		additions.push(buildField(name, field.text_key, field.type, locale, field.required));
+		if (hasFieldFor(fragment, field.name)) continue;
+		additions.push(buildField(field.name, field.text_key, field.type, locale, field.required));
 	}
 	if (step.actions && !hasPrimaryButton(fragment)) {
-		const primary = Object.entries(step.actions).find(([, action]) => action.primary);
-		if (primary) {
-			const [name, action] = primary;
-			additions.push(buildSubmit(name, action.text_key, locale));
-		}
+		const primary = step.actions.find((action) => action.primary);
+		if (primary) additions.push(buildSubmit(primary.name, primary.text_key, locale));
 	}
 	return additions;
 }
@@ -8773,7 +8775,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      <p slot=\"header\" class=\"zl-card-subtitle\">{{ step.texts.description_key | t: identity.display_name }}</p>\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\"{% 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 entry in fields %}\n      {% assign field_placeholder = entry[1].text_key | fieldPlaceholder %}\n      {% assign field_help = entry[1].text_key | fieldHelp %}\n      {% assign field_err = entry[0] | fieldError: errors %}\n      {% assign autocomplete_val = '' %}\n      {% if entry[0] == 'email' %}\n        {% assign autocomplete_val = 'email' %}\n      {% elsif entry[1].type == 'password' and step.name contains 'register' %}\n        {% assign autocomplete_val = 'new-password' %}\n      {% elsif entry[1].type == 'password' %}\n        {% assign autocomplete_val = 'current-password' %}\n      {% endif %}\n      <zl-field\n        name=\"{{ entry[0] }}\"\n        data-testid=\"zitadel-field-{{ entry[0] }}\"\n        label=\"{{ entry[1].text_key | t }}\"\n        type=\"{{ entry[1].type }}\"\n        value=\"{{ entry[1].value }}\"\n        {% if autocomplete_val != '' %}autocomplete=\"{{ autocomplete_val }}\"{% endif %}\n        {% if entry[1].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    {% endfor %}\n\n    {% if fields.email and fields.password and step.name == 'identifier' %}\n      <p class=\"zl-card-forgot\">\n        <a href=\"#\" class=\"zl-card-forgot__link\" data-action=\"recover\">{{ 'action.forgot_password' | t }}</a>\n      </p>\n    {% endif %}\n\n    {% for entry in actions %}\n      {% if entry[1].primary %}\n        <zl-button\n          hierarchy=\"primary\"\n          size=\"medium\"\n          type=\"submit\"\n          block\n          action=\"{{ entry[0] }}\"\n          data-testid=\"zitadel-action-{{ entry[0] }}\"\n          label=\"{{ entry[1].text_key | t }}\"\n          {% if loading %}loading{% endif %}\n        ></zl-button>\n      {% endif %}\n    {% endfor %}\n\n    {% for entry in actions %}\n      {% unless entry[1].primary or entry[0] == 'passkey' or entry[0] == 'register' or entry[0] == 'sign_in' %}\n        <zl-button\n          hierarchy=\"secondary\"\n          size=\"medium\"\n          type=\"button\"\n          block\n          action=\"{{ entry[0] }}\"\n          data-testid=\"zitadel-action-{{ entry[0] }}\"\n          label=\"{{ entry[1].text_key | t }}\"\n        ></zl-button>\n      {% endunless %}\n    {% endfor %}\n\n    {% if actions.passkey %}\n      <zl-button\n        hierarchy=\"secondary\"\n        size=\"medium\"\n        block\n        action=\"passkey\"\n        data-testid=\"zitadel-action-passkey\"\n        label=\"{{ actions.passkey.text_key | t }}\"\n      ></zl-button>\n    {% endif %}\n\n\n    {% if actions.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    {% if actions.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        {% if challenge.method == \"passkey_register\" %}{% assign ceremony = \"register\" %}{% endif %}\n        <zl-passkey\n          ceremony=\"{{ ceremony }}\"\n          method=\"{{ challenge.method }}\"\n          challenge-id=\"{{ challenge.challenge_id }}\"\n          options='{{ challenge.options | json }}'\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\"{% 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      {% 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    {% 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      <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    {% 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        {% if challenge.method == \"passkey_register\" %}{% assign ceremony = \"register\" %}{% endif %}\n        <zl-passkey\n          ceremony=\"{{ ceremony }}\"\n          method=\"{{ challenge.method }}\"\n          challenge-id=\"{{ challenge.challenge_id }}\"\n          options='{{ challenge.options | json }}'\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
 /**
@@ -8918,8 +8920,9 @@ const en = {
 	"identifier.description": "Enter your email to continue",
 	"identifier.field.email": "Work email",
 	"identifier.field.email.placeholder": "you@company.com",
-	"identifier.action.submit": "Continue",
-	"identifier.action.continue": "Continue",
+	"identifier.field.password": "Password",
+	"identifier.action.submit": "Sign in",
+	"identifier.action.continue": "Sign in",
 	"identifier.action.passkey": "Sign in with a passkey",
 	"identifier.action.register.lead": "Don't have an account? ",
 	"identifier.action.register.link": "Sign up",
@@ -8968,7 +8971,7 @@ const en = {
 	"password.action.register.lead": "Don't have an account? ",
 	"password.action.register.link": "Sign up",
 	"register.title": "Create your account",
-	"register.description": "Enter your email to get started",
+	"register.description": "",
 	"register.field.email": "Work email",
 	"register.field.email.placeholder": "you@company.com",
 	"register.field.password": "Password",
@@ -8976,8 +8979,10 @@ const en = {
 	"register.field.givenName": "Given name",
 	"register.field.familyName": "Family name",
 	"register.field.dateOfBirth": "Date of birth",
+	"register.field.dateOfBirth.placeholder": "YYYY-MM-DD",
+	"register.field.dateOfBirth.help": "Use YYYY-MM-DD.",
 	"register.action.password": "Continue with password",
-	"register.action.passkey": "Register with a passkey",
+	"register.action.passkey": "Continue with a passkey",
 	"register.action.submit": "Sign up",
 	"register.action.sign_in.lead": "Already have an account? ",
 	"register.action.sign_in.link": "Sign in",
@@ -9016,8 +9021,9 @@ const de = {
 	"identifier.description": "Gib deine E-Mail-Adresse ein, um fortzufahren",
 	"identifier.field.email": "E-Mail",
 	"identifier.field.email.placeholder": "du@unternehmen.com",
-	"identifier.action.submit": "Weiter",
-	"identifier.action.continue": "Weiter",
+	"identifier.field.password": "Passwort",
+	"identifier.action.submit": "Anmelden",
+	"identifier.action.continue": "Anmelden",
 	"identifier.action.passkey": "Mit Passkey anmelden",
 	"identifier.action.register.lead": "Noch kein Konto? ",
 	"identifier.action.register.link": "Registrieren",
@@ -9066,13 +9072,18 @@ const de = {
 	"password.action.register.lead": "Noch kein Konto? ",
 	"password.action.register.link": "Registrieren",
 	"register.title": "Konto erstellen",
-	"register.description": "Gib deine E-Mail-Adresse ein, um loszulegen",
+	"register.description": "",
 	"register.field.email": "E-Mail",
 	"register.field.email.placeholder": "du@unternehmen.com",
 	"register.field.password": "Passwort",
 	"register.field.password.help": "Mindestens 8 Zeichen, einschließlich eines Sonderzeichens und einer Zahl.",
+	"register.field.givenName": "Vorname",
+	"register.field.familyName": "Nachname",
+	"register.field.dateOfBirth": "Geburtsdatum",
+	"register.field.dateOfBirth.placeholder": "JJJJ-MM-TT",
+	"register.field.dateOfBirth.help": "Verwende JJJJ-MM-TT.",
 	"register.action.password": "Mit Passwort fortfahren",
-	"register.action.passkey": "Mit Passkey registrieren",
+	"register.action.passkey": "Weiter mit Passkey",
 	"register.action.submit": "Registrieren",
 	"register.action.sign_in.lead": "Bereits ein Konto? ",
 	"register.action.sign_in.link": "Anmelden",
@@ -9113,8 +9124,9 @@ const builtinLocales = {
 		"identifier.description": "Inserisci la tua e-mail per continuare",
 		"identifier.field.email": "E-mail aziendale",
 		"identifier.field.email.placeholder": "tu@azienda.com",
-		"identifier.action.submit": "Continua",
-		"identifier.action.continue": "Continua",
+		"identifier.field.password": "Password",
+		"identifier.action.submit": "Accedi",
+		"identifier.action.continue": "Accedi",
 		"identifier.action.passkey": "Accedi con passkey",
 		"identifier.action.register.lead": "Non hai un account? ",
 		"identifier.action.register.link": "Registrati",
@@ -9163,13 +9175,18 @@ const builtinLocales = {
 		"password.action.register.lead": "Non hai un account? ",
 		"password.action.register.link": "Registrati",
 		"register.title": "Crea il tuo account",
-		"register.description": "Inserisci la tua e-mail per iniziare",
+		"register.description": "",
 		"register.field.email": "E-mail aziendale",
 		"register.field.email.placeholder": "tu@azienda.com",
 		"register.field.password": "Password",
 		"register.field.password.help": "Almeno 8 caratteri, incluso un simbolo e un numero.",
+		"register.field.givenName": "Nome",
+		"register.field.familyName": "Cognome",
+		"register.field.dateOfBirth": "Data di nascita",
+		"register.field.dateOfBirth.placeholder": "AAAA-MM-GG",
+		"register.field.dateOfBirth.help": "Usa AAAA-MM-GG.",
 		"register.action.password": "Continua con password",
-		"register.action.passkey": "Registrati con passkey",
+		"register.action.passkey": "Continua con passkey",
 		"register.action.submit": "Registrati",
 		"register.action.sign_in.lead": "Hai già un account? ",
 		"register.action.sign_in.link": "Accedi",
@@ -11436,14 +11453,16 @@ let ZitadelLogin = class ZitadelLogin extends i$2 {
 	renderStep(step, engine) {
 		const tenantSource = typeof this.branding?.liquid_template === "string" && this.branding.liquid_template.length > 0 ? this.branding.liquid_template : null;
 		const errors = step.error ? step.error.startsWith("error.") ? [{ text_key: step.error }] : [{ message: step.error }] : [];
+		const fields = step.fields ?? [];
+		const actions = step.actions ?? [];
 		const context = {
 			step: {
 				name: step.name,
 				complete: step.complete,
 				texts: step.texts ?? {}
 			},
-			fields: step.fields ?? {},
-			actions: step.actions ?? {},
+			fields,
+			actions,
 			gates: step.gates ?? {},
 			sso_providers: step.sso_providers ?? [],
 			challenge: step.challenge ?? null,
@@ -11630,11 +11649,11 @@ let ZitadelLogin = class ZitadelLogin extends i$2 {
 		this.loading = true;
 		try {
 			const formValues = this.captureValuesFromFields();
-			const stepFieldKeys = Object.keys(this.response.step.fields ?? {});
+			const stepFields = this.response.step.fields ?? [];
 			const fields = {};
-			for (const key of stepFieldKeys) {
-				const value = formValues[key];
-				if (value !== void 0) fields[key] = value;
+			for (const f of stepFields) {
+				const value = formValues[f.name];
+				if (value !== void 0) fields[f.name] = value;
 			}
 			const body = {
 				session_token,
@@ -11689,7 +11708,7 @@ ZitadelLogin = __decorate([t$4("zitadel-login")], ZitadelLogin);
 function collectInitialValues(step) {
 	const values = {};
 	if (!step.fields) return values;
-	for (const [name, field] of Object.entries(step.fields)) values[name] = typeof field.value === "string" ? field.value : "";
+	for (const field of step.fields) values[field.name] = typeof field.value === "string" ? field.value : "";
 	return values;
 }
 //#endregion

package/dist/tokens/index.mjs

@@ -1,2 +1,2 @@
-import { n as tokens, t as cssVars } from "../tokens-TXmurodq.mjs";
+import { n as tokens, t as cssVars } from "../tokens-BQ_augxi.mjs";
 export { cssVars, tokens };

package/dist/{tokens-TXmurodq.mjs → tokens-BQ_augxi.mjs}

@@ -237,8 +237,8 @@ const cssVars = {
 		"page": "var(--zl-container-page)"
 	}
 };
-const tokensCss = "/* AUTOGENERATED by packages/design-tokens/scripts/build.ts — do not edit by hand.\n   Source: src/generated/figma.tokens.json + src/overrides.ts.\n   Re-run: pnpm nx run @zitadel/design-tokens:generate */\n\n:root,\n[data-theme=\"dark\"] {\n  --zl-color-surface-default-black: #0f0f11;\n  --zl-color-surface-default-white: #f4f4f6;\n  --zl-color-surface-default-primary-gray: #252528;\n  --zl-color-surface-default-secondary-gray: #37373a;\n  --zl-color-text-primary-white: #f4f4f6;\n  --zl-color-text-secondary-gray: #bfbfcf;\n  --zl-color-text-button-default: #0f0f11;\n  --zl-color-text-button-invert: #f4f4f6;\n  --zl-color-text-disabled: #686883;\n  --zl-color-text-error: #ea4f70;\n  --zl-color-text-success: #33a779;\n  --zl-color-text-subtitle-pink: #f48aa0;\n  --zl-color-text-subtitle-purple: #bba5e4;\n  --zl-color-text-subtitle-gray: #bfbfcf;\n  --zl-color-text-subtitle-orange: #f25543;\n  --zl-color-icon-default-black: #0f0f11;\n  --zl-color-icon-default-white: #f4f4f6;\n  --zl-color-icon-default-gray: #bfbfcf;\n  --zl-color-icon-default-pink: #f48aa0;\n  --zl-color-icon-default-purple: #bba5e4;\n  --zl-color-icon-default-orange: #f25543;\n  --zl-color-icon-disabled: #686883;\n  --zl-color-icon-error: #ea4f70;\n  --zl-color-icon-success: #33a779;\n  --zl-color-border-default-black: #252528;\n  --zl-color-border-default-white: #f4f4f6;\n  --zl-color-border-default-gray-100: #37373a;\n  --zl-color-border-default-gray-200: #484a57;\n  --zl-color-border-default-gray-300: #686883;\n  --zl-color-border-default-gray-400: #82829c;\n  --zl-color-border-error: #ea4f70;\n  --zl-color-border-success: #33a779;\n  --zl-color-gray-50: #0f0f11;\n  --zl-color-gray-75: #252528;\n  --zl-color-gray-100: #37373a;\n  --zl-color-gray-200: #484a57;\n  --zl-color-gray-300: #686883;\n  --zl-color-gray-400: #82829c;\n  --zl-color-gray-500: #9e9eb2;\n  --zl-color-gray-600: #cfcfde;\n  --zl-color-gray-700: #bfbfcf;\n  --zl-color-gray-800: #e1e1e7;\n  --zl-color-gray-900: #f4f4f6;\n  --zl-spacing-01: 0.25rem;\n  --zl-spacing-02: 0.5rem;\n  --zl-spacing-03: 1rem;\n  --zl-spacing-04: 1.5rem;\n  --zl-spacing-05: 2rem;\n  --zl-spacing-06: 1.5rem;\n  --zl-spacing-07: 2.5rem;\n  --zl-spacing-08: 3rem;\n  --zl-spacing-09: 3.5rem;\n  --zl-spacing-10: 4rem;\n  --zl-spacing-11: 5rem;\n  --zl-spacing-12: 5.5rem;\n  --zl-spacing-13: 6rem;\n  --zl-spacing-14: 6.5rem;\n  --zl-spacing-15: 7rem;\n  --zl-spacing-16: 7.5rem;\n  --zl-radius-xs: 0.25rem;\n  --zl-radius-s: 0.5rem;\n  --zl-radius-m: 0.75rem;\n  --zl-radius-l: 1rem;\n  --zl-radius-xl: 1.5rem;\n  --zl-font-family-sans: \"Arimo\", \"APK Futural\", system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif;\n  --zl-font-family-heading: \"APK Futural\", \"Arimo\", system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif;\n  --zl-font-family-mono: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n  --zl-duration-instant: 0ms;\n  --zl-duration-fast: 120ms;\n  --zl-duration-base: 200ms;\n  --zl-duration-slow: 320ms;\n  --zl-easing-standard: cubic-bezier(0.2, 0, 0, 1);\n  --zl-easing-decelerate: cubic-bezier(0, 0, 0, 1);\n  --zl-easing-accelerate: cubic-bezier(0.3, 0, 1, 1);\n  --zl-focus-width: 2px;\n  --zl-focus-offset: 2px;\n  --zl-focus-color: #f4f4f6;\n  --zl-breakpoint-xs: 26.5625rem;\n  --zl-breakpoint-sm: 40rem;\n  --zl-breakpoint-md: 48rem;\n  --zl-breakpoint-lg: 64rem;\n  --zl-breakpoint-xl: 80rem;\n  --zl-breakpoint-2xl: 96rem;\n  --zl-breakpoint-3xl: 120rem;\n  --zl-breakpoint-4xl: 160rem;\n  --zl-container-auth-card: 24rem;\n  --zl-container-page: 80rem;\n}\n\n[data-theme=\"light\"] {\n  /* Reserved. Light mode lands when the Figma design system publishes\n     a light variable mode; the next sync will populate this block. */\n}\n";
+const tokensCss = "/* AUTOGENERATED by packages/design-tokens/scripts/build.ts — do not edit by hand.\n   Source: src/generated/figma.tokens.json + src/overrides.ts.\n   Re-run: moon run design-tokens:generate */\n\n:root,\n[data-theme=\"dark\"] {\n  --zl-color-surface-default-black: #0f0f11;\n  --zl-color-surface-default-white: #f4f4f6;\n  --zl-color-surface-default-primary-gray: #252528;\n  --zl-color-surface-default-secondary-gray: #37373a;\n  --zl-color-text-primary-white: #f4f4f6;\n  --zl-color-text-secondary-gray: #bfbfcf;\n  --zl-color-text-button-default: #0f0f11;\n  --zl-color-text-button-invert: #f4f4f6;\n  --zl-color-text-disabled: #686883;\n  --zl-color-text-error: #ea4f70;\n  --zl-color-text-success: #33a779;\n  --zl-color-text-subtitle-pink: #f48aa0;\n  --zl-color-text-subtitle-purple: #bba5e4;\n  --zl-color-text-subtitle-gray: #bfbfcf;\n  --zl-color-text-subtitle-orange: #f25543;\n  --zl-color-icon-default-black: #0f0f11;\n  --zl-color-icon-default-white: #f4f4f6;\n  --zl-color-icon-default-gray: #bfbfcf;\n  --zl-color-icon-default-pink: #f48aa0;\n  --zl-color-icon-default-purple: #bba5e4;\n  --zl-color-icon-default-orange: #f25543;\n  --zl-color-icon-disabled: #686883;\n  --zl-color-icon-error: #ea4f70;\n  --zl-color-icon-success: #33a779;\n  --zl-color-border-default-black: #252528;\n  --zl-color-border-default-white: #f4f4f6;\n  --zl-color-border-default-gray-100: #37373a;\n  --zl-color-border-default-gray-200: #484a57;\n  --zl-color-border-default-gray-300: #686883;\n  --zl-color-border-default-gray-400: #82829c;\n  --zl-color-border-error: #ea4f70;\n  --zl-color-border-success: #33a779;\n  --zl-color-gray-50: #0f0f11;\n  --zl-color-gray-75: #252528;\n  --zl-color-gray-100: #37373a;\n  --zl-color-gray-200: #484a57;\n  --zl-color-gray-300: #686883;\n  --zl-color-gray-400: #82829c;\n  --zl-color-gray-500: #9e9eb2;\n  --zl-color-gray-600: #cfcfde;\n  --zl-color-gray-700: #bfbfcf;\n  --zl-color-gray-800: #e1e1e7;\n  --zl-color-gray-900: #f4f4f6;\n  --zl-spacing-01: 0.25rem;\n  --zl-spacing-02: 0.5rem;\n  --zl-spacing-03: 1rem;\n  --zl-spacing-04: 1.5rem;\n  --zl-spacing-05: 2rem;\n  --zl-spacing-06: 1.5rem;\n  --zl-spacing-07: 2.5rem;\n  --zl-spacing-08: 3rem;\n  --zl-spacing-09: 3.5rem;\n  --zl-spacing-10: 4rem;\n  --zl-spacing-11: 5rem;\n  --zl-spacing-12: 5.5rem;\n  --zl-spacing-13: 6rem;\n  --zl-spacing-14: 6.5rem;\n  --zl-spacing-15: 7rem;\n  --zl-spacing-16: 7.5rem;\n  --zl-radius-xs: 0.25rem;\n  --zl-radius-s: 0.5rem;\n  --zl-radius-m: 0.75rem;\n  --zl-radius-l: 1rem;\n  --zl-radius-xl: 1.5rem;\n  --zl-font-family-sans: \"Arimo\", \"APK Futural\", system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif;\n  --zl-font-family-heading: \"APK Futural\", \"Arimo\", system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif;\n  --zl-font-family-mono: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n  --zl-duration-instant: 0ms;\n  --zl-duration-fast: 120ms;\n  --zl-duration-base: 200ms;\n  --zl-duration-slow: 320ms;\n  --zl-easing-standard: cubic-bezier(0.2, 0, 0, 1);\n  --zl-easing-decelerate: cubic-bezier(0, 0, 0, 1);\n  --zl-easing-accelerate: cubic-bezier(0.3, 0, 1, 1);\n  --zl-focus-width: 2px;\n  --zl-focus-offset: 2px;\n  --zl-focus-color: #f4f4f6;\n  --zl-breakpoint-xs: 26.5625rem;\n  --zl-breakpoint-sm: 40rem;\n  --zl-breakpoint-md: 48rem;\n  --zl-breakpoint-lg: 64rem;\n  --zl-breakpoint-xl: 80rem;\n  --zl-breakpoint-2xl: 96rem;\n  --zl-breakpoint-3xl: 120rem;\n  --zl-breakpoint-4xl: 160rem;\n  --zl-container-auth-card: 24rem;\n  --zl-container-page: 80rem;\n}\n\n[data-theme=\"light\"] {\n  /* Reserved. Light mode lands when the Figma design system publishes\n     a light variable mode; the next sync will populate this block. */\n}\n";
 //#endregion
 export { tokens as n, tokensCss as r, cssVars as t };
 
-//# sourceMappingURL=tokens-TXmurodq.mjs.map
+//# sourceMappingURL=tokens-BQ_augxi.mjs.map

package/dist/{tokens-TXmurodq.mjs.map → tokens-BQ_augxi.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"tokens-TXmurodq.mjs","names":[],"sources":["../../design-tokens/dist/tokens.mjs"],"sourcesContent":["//#region src/generated/tokens.ts\nconst tokens = {\n\t\"color\": {\n\t\t\"surface\": {\n\t\t\t\"defaultBlack\": \"#0f0f11\",\n\t\t\t\"defaultWhite\": \"#f4f4f6\",\n\t\t\t\"defaultPrimaryGray\": \"#252528\",\n\t\t\t\"defaultSecondaryGray\": \"#37373a\"\n\t\t},\n\t\t\"text\": {\n\t\t\t\"primaryWhite\": \"#f4f4f6\",\n\t\t\t\"secondaryGray\": \"#bfbfcf\",\n\t\t\t\"buttonDefault\": \"#0f0f11\",\n\t\t\t\"buttonInvert\": \"#f4f4f6\",\n\t\t\t\"disabled\": \"#686883\",\n\t\t\t\"error\": \"#ea4f70\",\n\t\t\t\"success\": \"#33a779\",\n\t\t\t\"subtitlePink\": \"#f48aa0\",\n\t\t\t\"subtitlePurple\": \"#bba5e4\",\n\t\t\t\"subtitleGray\": \"#bfbfcf\",\n\t\t\t\"subtitleOrange\": \"#f25543\"\n\t\t},\n\t\t\"icon\": {\n\t\t\t\"defaultBlack\": \"#0f0f11\",\n\t\t\t\"defaultWhite\": \"#f4f4f6\",\n\t\t\t\"defaultGray\": \"#bfbfcf\",\n\t\t\t\"defaultPink\": \"#f48aa0\",\n\t\t\t\"defaultPurple\": \"#bba5e4\",\n\t\t\t\"defaultOrange\": \"#f25543\",\n\t\t\t\"disabled\": \"#686883\",\n\t\t\t\"error\": \"#ea4f70\",\n\t\t\t\"success\": \"#33a779\"\n\t\t},\n\t\t\"border\": {\n\t\t\t\"defaultBlack\": \"#252528\",\n\t\t\t\"defaultWhite\": \"#f4f4f6\",\n\t\t\t\"defaultGray100\": \"#37373a\",\n\t\t\t\"defaultGray200\": \"#484a57\",\n\t\t\t\"defaultGray300\": \"#686883\",\n\t\t\t\"defaultGray400\": \"#82829c\",\n\t\t\t\"error\": \"#ea4f70\",\n\t\t\t\"success\": \"#33a779\"\n\t\t},\n\t\t\"gray\": {\n\t\t\t\"50\": \"#0f0f11\",\n\t\t\t\"75\": \"#252528\",\n\t\t\t\"100\": \"#37373a\",\n\t\t\t\"200\": \"#484a57\",\n\t\t\t\"300\": \"#686883\",\n\t\t\t\"400\": \"#82829c\",\n\t\t\t\"500\": \"#9e9eb2\",\n\t\t\t\"600\": \"#cfcfde\",\n\t\t\t\"700\": \"#bfbfcf\",\n\t\t\t\"800\": \"#e1e1e7\",\n\t\t\t\"900\": \"#f4f4f6\"\n\t\t}\n\t},\n\t\"spacing\": {\n\t\t\"10\": \"4rem\",\n\t\t\"11\": \"5rem\",\n\t\t\"12\": \"5.5rem\",\n\t\t\"13\": \"6rem\",\n\t\t\"14\": \"6.5rem\",\n\t\t\"15\": \"7rem\",\n\t\t\"16\": \"7.5rem\",\n\t\t\"01\": \"0.25rem\",\n\t\t\"02\": \"0.5rem\",\n\t\t\"03\": \"1rem\",\n\t\t\"04\": \"1.5rem\",\n\t\t\"05\": \"2rem\",\n\t\t\"06\": \"1.5rem\",\n\t\t\"07\": \"2.5rem\",\n\t\t\"08\": \"3rem\",\n\t\t\"09\": \"3.5rem\"\n\t},\n\t\"radius\": {\n\t\t\"xs\": \"0.25rem\",\n\t\t\"s\": \"0.5rem\",\n\t\t\"m\": \"0.75rem\",\n\t\t\"l\": \"1rem\",\n\t\t\"xl\": \"1.5rem\"\n\t},\n\t\"font\": { \"family\": {\n\t\t\"sans\": \"\\\"Arimo\\\", \\\"APK Futural\\\", system-ui, -apple-system, \\\"Segoe UI\\\", Helvetica, Arial, sans-serif\",\n\t\t\"heading\": \"\\\"APK Futural\\\", \\\"Arimo\\\", system-ui, -apple-system, \\\"Segoe UI\\\", Helvetica, Arial, sans-serif\",\n\t\t\"mono\": \"ui-monospace, SFMono-Regular, \\\"SF Mono\\\", Menlo, Monaco, Consolas, \\\"Liberation Mono\\\", \\\"Courier New\\\", monospace\"\n\t} },\n\t\"motion\": {\n\t\t\"duration\": {\n\t\t\t\"instant\": \"0ms\",\n\t\t\t\"fast\": \"120ms\",\n\t\t\t\"base\": \"200ms\",\n\t\t\t\"slow\": \"320ms\"\n\t\t},\n\t\t\"easing\": {\n\t\t\t\"standard\": \"cubic-bezier(0.2, 0, 0, 1)\",\n\t\t\t\"decelerate\": \"cubic-bezier(0, 0, 0, 1)\",\n\t\t\t\"accelerate\": \"cubic-bezier(0.3, 0, 1, 1)\"\n\t\t}\n\t},\n\t\"focus\": {\n\t\t\"width\": \"2px\",\n\t\t\"offset\": \"2px\",\n\t\t\"color\": \"#f4f4f6\"\n\t},\n\t\"breakpoint\": {\n\t\t\"xs\": \"26.5625rem\",\n\t\t\"sm\": \"40rem\",\n\t\t\"md\": \"48rem\",\n\t\t\"lg\": \"64rem\",\n\t\t\"xl\": \"80rem\",\n\t\t\"2xl\": \"96rem\",\n\t\t\"3xl\": \"120rem\",\n\t\t\"4xl\": \"160rem\"\n\t},\n\t\"container\": {\n\t\t\"authCard\": \"24rem\",\n\t\t\"page\": \"80rem\"\n\t}\n};\nconst cssVars = {\n\t\"color\": {\n\t\t\"surface\": {\n\t\t\t\"defaultBlack\": \"var(--zl-color-surface-default-black)\",\n\t\t\t\"defaultWhite\": \"var(--zl-color-surface-default-white)\",\n\t\t\t\"defaultPrimaryGray\": \"var(--zl-color-surface-default-primary-gray)\",\n\t\t\t\"defaultSecondaryGray\": \"var(--zl-color-surface-default-secondary-gray)\"\n\t\t},\n\t\t\"text\": {\n\t\t\t\"primaryWhite\": \"var(--zl-color-text-primary-white)\",\n\t\t\t\"secondaryGray\": \"var(--zl-color-text-secondary-gray)\",\n\t\t\t\"buttonDefault\": \"var(--zl-color-text-button-default)\",\n\t\t\t\"buttonInvert\": \"var(--zl-color-text-button-invert)\",\n\t\t\t\"disabled\": \"var(--zl-color-text-disabled)\",\n\t\t\t\"error\": \"var(--zl-color-text-error)\",\n\t\t\t\"success\": \"var(--zl-color-text-success)\",\n\t\t\t\"subtitlePink\": \"var(--zl-color-text-subtitle-pink)\",\n\t\t\t\"subtitlePurple\": \"var(--zl-color-text-subtitle-purple)\",\n\t\t\t\"subtitleGray\": \"var(--zl-color-text-subtitle-gray)\",\n\t\t\t\"subtitleOrange\": \"var(--zl-color-text-subtitle-orange)\"\n\t\t},\n\t\t\"icon\": {\n\t\t\t\"defaultBlack\": \"var(--zl-color-icon-default-black)\",\n\t\t\t\"defaultWhite\": \"var(--zl-color-icon-default-white)\",\n\t\t\t\"defaultGray\": \"var(--zl-color-icon-default-gray)\",\n\t\t\t\"defaultPink\": \"var(--zl-color-icon-default-pink)\",\n\t\t\t\"defaultPurple\": \"var(--zl-color-icon-default-purple)\",\n\t\t\t\"defaultOrange\": \"var(--zl-color-icon-default-orange)\",\n\t\t\t\"disabled\": \"var(--zl-color-icon-disabled)\",\n\t\t\t\"error\": \"var(--zl-color-icon-error)\",\n\t\t\t\"success\": \"var(--zl-color-icon-success)\"\n\t\t},\n\t\t\"border\": {\n\t\t\t\"defaultBlack\": \"var(--zl-color-border-default-black)\",\n\t\t\t\"defaultWhite\": \"var(--zl-color-border-default-white)\",\n\t\t\t\"defaultGray100\": \"var(--zl-color-border-default-gray-100)\",\n\t\t\t\"defaultGray200\": \"var(--zl-color-border-default-gray-200)\",\n\t\t\t\"defaultGray300\": \"var(--zl-color-border-default-gray-300)\",\n\t\t\t\"defaultGray400\": \"var(--zl-color-border-default-gray-400)\",\n\t\t\t\"error\": \"var(--zl-color-border-error)\",\n\t\t\t\"success\": \"var(--zl-color-border-success)\"\n\t\t},\n\t\t\"gray\": {\n\t\t\t\"50\": \"var(--zl-color-gray-50)\",\n\t\t\t\"75\": \"var(--zl-color-gray-75)\",\n\t\t\t\"100\": \"var(--zl-color-gray-100)\",\n\t\t\t\"200\": \"var(--zl-color-gray-200)\",\n\t\t\t\"300\": \"var(--zl-color-gray-300)\",\n\t\t\t\"400\": \"var(--zl-color-gray-400)\",\n\t\t\t\"500\": \"var(--zl-color-gray-500)\",\n\t\t\t\"600\": \"var(--zl-color-gray-600)\",\n\t\t\t\"700\": \"var(--zl-color-gray-700)\",\n\t\t\t\"800\": \"var(--zl-color-gray-800)\",\n\t\t\t\"900\": \"var(--zl-color-gray-900)\"\n\t\t}\n\t},\n\t\"spacing\": {\n\t\t\"10\": \"var(--zl-spacing-10)\",\n\t\t\"11\": \"var(--zl-spacing-11)\",\n\t\t\"12\": \"var(--zl-spacing-12)\",\n\t\t\"13\": \"var(--zl-spacing-13)\",\n\t\t\"14\": \"var(--zl-spacing-14)\",\n\t\t\"15\": \"var(--zl-spacing-15)\",\n\t\t\"16\": \"var(--zl-spacing-16)\",\n\t\t\"01\": \"var(--zl-spacing-01)\",\n\t\t\"02\": \"var(--zl-spacing-02)\",\n\t\t\"03\": \"var(--zl-spacing-03)\",\n\t\t\"04\": \"var(--zl-spacing-04)\",\n\t\t\"05\": \"var(--zl-spacing-05)\",\n\t\t\"06\": \"var(--zl-spacing-06)\",\n\t\t\"07\": \"var(--zl-spacing-07)\",\n\t\t\"08\": \"var(--zl-spacing-08)\",\n\t\t\"09\": \"var(--zl-spacing-09)\"\n\t},\n\t\"radius\": {\n\t\t\"xs\": \"var(--zl-radius-xs)\",\n\t\t\"s\": \"var(--zl-radius-s)\",\n\t\t\"m\": \"var(--zl-radius-m)\",\n\t\t\"l\": \"var(--zl-radius-l)\",\n\t\t\"xl\": \"var(--zl-radius-xl)\"\n\t},\n\t\"font\": { \"family\": {\n\t\t\"sans\": \"var(--zl-font-family-sans)\",\n\t\t\"heading\": \"var(--zl-font-family-heading)\",\n\t\t\"mono\": \"var(--zl-font-family-mono)\"\n\t} },\n\t\"motion\": {\n\t\t\"duration\": {\n\t\t\t\"instant\": \"var(--zl-duration-instant)\",\n\t\t\t\"fast\": \"var(--zl-duration-fast)\",\n\t\t\t\"base\": \"var(--zl-duration-base)\",\n\t\t\t\"slow\": \"var(--zl-duration-slow)\"\n\t\t},\n\t\t\"easing\": {\n\t\t\t\"standard\": \"var(--zl-easing-standard)\",\n\t\t\t\"decelerate\": \"var(--zl-easing-decelerate)\",\n\t\t\t\"accelerate\": \"var(--zl-easing-accelerate)\"\n\t\t}\n\t},\n\t\"focus\": {\n\t\t\"width\": \"var(--zl-focus-width)\",\n\t\t\"offset\": \"var(--zl-focus-offset)\",\n\t\t\"color\": \"var(--zl-focus-color)\"\n\t},\n\t\"breakpoint\": {\n\t\t\"xs\": \"var(--zl-breakpoint-xs)\",\n\t\t\"sm\": \"var(--zl-breakpoint-sm)\",\n\t\t\"md\": \"var(--zl-breakpoint-md)\",\n\t\t\"lg\": \"var(--zl-breakpoint-lg)\",\n\t\t\"xl\": \"var(--zl-breakpoint-xl)\",\n\t\t\"2xl\": \"var(--zl-breakpoint-2xl)\",\n\t\t\"3xl\": \"var(--zl-breakpoint-3xl)\",\n\t\t\"4xl\": \"var(--zl-breakpoint-4xl)\"\n\t},\n\t\"container\": {\n\t\t\"authCard\": \"var(--zl-container-auth-card)\",\n\t\t\"page\": \"var(--zl-container-page)\"\n\t}\n};\nconst tokensCss = \"/* AUTOGENERATED by packages/design-tokens/scripts/build.ts — do not edit by hand.\\n   Source: src/generated/figma.tokens.json + src/overrides.ts.\\n   Re-run: pnpm nx run @zitadel/design-tokens:generate */\\n\\n:root,\\n[data-theme=\\\"dark\\\"] {\\n  --zl-color-surface-default-black: #0f0f11;\\n  --zl-color-surface-default-white: #f4f4f6;\\n  --zl-color-surface-default-primary-gray: #252528;\\n  --zl-color-surface-default-secondary-gray: #37373a;\\n  --zl-color-text-primary-white: #f4f4f6;\\n  --zl-color-text-secondary-gray: #bfbfcf;\\n  --zl-color-text-button-default: #0f0f11;\\n  --zl-color-text-button-invert: #f4f4f6;\\n  --zl-color-text-disabled: #686883;\\n  --zl-color-text-error: #ea4f70;\\n  --zl-color-text-success: #33a779;\\n  --zl-color-text-subtitle-pink: #f48aa0;\\n  --zl-color-text-subtitle-purple: #bba5e4;\\n  --zl-color-text-subtitle-gray: #bfbfcf;\\n  --zl-color-text-subtitle-orange: #f25543;\\n  --zl-color-icon-default-black: #0f0f11;\\n  --zl-color-icon-default-white: #f4f4f6;\\n  --zl-color-icon-default-gray: #bfbfcf;\\n  --zl-color-icon-default-pink: #f48aa0;\\n  --zl-color-icon-default-purple: #bba5e4;\\n  --zl-color-icon-default-orange: #f25543;\\n  --zl-color-icon-disabled: #686883;\\n  --zl-color-icon-error: #ea4f70;\\n  --zl-color-icon-success: #33a779;\\n  --zl-color-border-default-black: #252528;\\n  --zl-color-border-default-white: #f4f4f6;\\n  --zl-color-border-default-gray-100: #37373a;\\n  --zl-color-border-default-gray-200: #484a57;\\n  --zl-color-border-default-gray-300: #686883;\\n  --zl-color-border-default-gray-400: #82829c;\\n  --zl-color-border-error: #ea4f70;\\n  --zl-color-border-success: #33a779;\\n  --zl-color-gray-50: #0f0f11;\\n  --zl-color-gray-75: #252528;\\n  --zl-color-gray-100: #37373a;\\n  --zl-color-gray-200: #484a57;\\n  --zl-color-gray-300: #686883;\\n  --zl-color-gray-400: #82829c;\\n  --zl-color-gray-500: #9e9eb2;\\n  --zl-color-gray-600: #cfcfde;\\n  --zl-color-gray-700: #bfbfcf;\\n  --zl-color-gray-800: #e1e1e7;\\n  --zl-color-gray-900: #f4f4f6;\\n  --zl-spacing-01: 0.25rem;\\n  --zl-spacing-02: 0.5rem;\\n  --zl-spacing-03: 1rem;\\n  --zl-spacing-04: 1.5rem;\\n  --zl-spacing-05: 2rem;\\n  --zl-spacing-06: 1.5rem;\\n  --zl-spacing-07: 2.5rem;\\n  --zl-spacing-08: 3rem;\\n  --zl-spacing-09: 3.5rem;\\n  --zl-spacing-10: 4rem;\\n  --zl-spacing-11: 5rem;\\n  --zl-spacing-12: 5.5rem;\\n  --zl-spacing-13: 6rem;\\n  --zl-spacing-14: 6.5rem;\\n  --zl-spacing-15: 7rem;\\n  --zl-spacing-16: 7.5rem;\\n  --zl-radius-xs: 0.25rem;\\n  --zl-radius-s: 0.5rem;\\n  --zl-radius-m: 0.75rem;\\n  --zl-radius-l: 1rem;\\n  --zl-radius-xl: 1.5rem;\\n  --zl-font-family-sans: \\\"Arimo\\\", \\\"APK Futural\\\", system-ui, -apple-system, \\\"Segoe UI\\\", Helvetica, Arial, sans-serif;\\n  --zl-font-family-heading: \\\"APK Futural\\\", \\\"Arimo\\\", system-ui, -apple-system, \\\"Segoe UI\\\", Helvetica, Arial, sans-serif;\\n  --zl-font-family-mono: ui-monospace, SFMono-Regular, \\\"SF Mono\\\", Menlo, Monaco, Consolas, \\\"Liberation Mono\\\", \\\"Courier New\\\", monospace;\\n  --zl-duration-instant: 0ms;\\n  --zl-duration-fast: 120ms;\\n  --zl-duration-base: 200ms;\\n  --zl-duration-slow: 320ms;\\n  --zl-easing-standard: cubic-bezier(0.2, 0, 0, 1);\\n  --zl-easing-decelerate: cubic-bezier(0, 0, 0, 1);\\n  --zl-easing-accelerate: cubic-bezier(0.3, 0, 1, 1);\\n  --zl-focus-width: 2px;\\n  --zl-focus-offset: 2px;\\n  --zl-focus-color: #f4f4f6;\\n  --zl-breakpoint-xs: 26.5625rem;\\n  --zl-breakpoint-sm: 40rem;\\n  --zl-breakpoint-md: 48rem;\\n  --zl-breakpoint-lg: 64rem;\\n  --zl-breakpoint-xl: 80rem;\\n  --zl-breakpoint-2xl: 96rem;\\n  --zl-breakpoint-3xl: 120rem;\\n  --zl-breakpoint-4xl: 160rem;\\n  --zl-container-auth-card: 24rem;\\n  --zl-container-page: 80rem;\\n}\\n\\n[data-theme=\\\"light\\\"] {\\n  /* Reserved. Light mode lands when the Figma design system publishes\\n     a light variable mode; the next sync will populate this block. */\\n}\\n\";\n//#endregion\nexport { cssVars, tokens, tokensCss };\n\n//# sourceMappingURL=tokens.mjs.map"],"mappings":"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"}
+{"version":3,"file":"tokens-BQ_augxi.mjs","names":[],"sources":["../../design-tokens/dist/tokens.mjs"],"sourcesContent":["//#region src/generated/tokens.ts\nconst tokens = {\n\t\"color\": {\n\t\t\"surface\": {\n\t\t\t\"defaultBlack\": \"#0f0f11\",\n\t\t\t\"defaultWhite\": \"#f4f4f6\",\n\t\t\t\"defaultPrimaryGray\": \"#252528\",\n\t\t\t\"defaultSecondaryGray\": \"#37373a\"\n\t\t},\n\t\t\"text\": {\n\t\t\t\"primaryWhite\": \"#f4f4f6\",\n\t\t\t\"secondaryGray\": \"#bfbfcf\",\n\t\t\t\"buttonDefault\": \"#0f0f11\",\n\t\t\t\"buttonInvert\": \"#f4f4f6\",\n\t\t\t\"disabled\": \"#686883\",\n\t\t\t\"error\": \"#ea4f70\",\n\t\t\t\"success\": \"#33a779\",\n\t\t\t\"subtitlePink\": \"#f48aa0\",\n\t\t\t\"subtitlePurple\": \"#bba5e4\",\n\t\t\t\"subtitleGray\": \"#bfbfcf\",\n\t\t\t\"subtitleOrange\": \"#f25543\"\n\t\t},\n\t\t\"icon\": {\n\t\t\t\"defaultBlack\": \"#0f0f11\",\n\t\t\t\"defaultWhite\": \"#f4f4f6\",\n\t\t\t\"defaultGray\": \"#bfbfcf\",\n\t\t\t\"defaultPink\": \"#f48aa0\",\n\t\t\t\"defaultPurple\": \"#bba5e4\",\n\t\t\t\"defaultOrange\": \"#f25543\",\n\t\t\t\"disabled\": \"#686883\",\n\t\t\t\"error\": \"#ea4f70\",\n\t\t\t\"success\": \"#33a779\"\n\t\t},\n\t\t\"border\": {\n\t\t\t\"defaultBlack\": \"#252528\",\n\t\t\t\"defaultWhite\": \"#f4f4f6\",\n\t\t\t\"defaultGray100\": \"#37373a\",\n\t\t\t\"defaultGray200\": \"#484a57\",\n\t\t\t\"defaultGray300\": \"#686883\",\n\t\t\t\"defaultGray400\": \"#82829c\",\n\t\t\t\"error\": \"#ea4f70\",\n\t\t\t\"success\": \"#33a779\"\n\t\t},\n\t\t\"gray\": {\n\t\t\t\"50\": \"#0f0f11\",\n\t\t\t\"75\": \"#252528\",\n\t\t\t\"100\": \"#37373a\",\n\t\t\t\"200\": \"#484a57\",\n\t\t\t\"300\": \"#686883\",\n\t\t\t\"400\": \"#82829c\",\n\t\t\t\"500\": \"#9e9eb2\",\n\t\t\t\"600\": \"#cfcfde\",\n\t\t\t\"700\": \"#bfbfcf\",\n\t\t\t\"800\": \"#e1e1e7\",\n\t\t\t\"900\": \"#f4f4f6\"\n\t\t}\n\t},\n\t\"spacing\": {\n\t\t\"10\": \"4rem\",\n\t\t\"11\": \"5rem\",\n\t\t\"12\": \"5.5rem\",\n\t\t\"13\": \"6rem\",\n\t\t\"14\": \"6.5rem\",\n\t\t\"15\": \"7rem\",\n\t\t\"16\": \"7.5rem\",\n\t\t\"01\": \"0.25rem\",\n\t\t\"02\": \"0.5rem\",\n\t\t\"03\": \"1rem\",\n\t\t\"04\": \"1.5rem\",\n\t\t\"05\": \"2rem\",\n\t\t\"06\": \"1.5rem\",\n\t\t\"07\": \"2.5rem\",\n\t\t\"08\": \"3rem\",\n\t\t\"09\": \"3.5rem\"\n\t},\n\t\"radius\": {\n\t\t\"xs\": \"0.25rem\",\n\t\t\"s\": \"0.5rem\",\n\t\t\"m\": \"0.75rem\",\n\t\t\"l\": \"1rem\",\n\t\t\"xl\": \"1.5rem\"\n\t},\n\t\"font\": { \"family\": {\n\t\t\"sans\": \"\\\"Arimo\\\", \\\"APK Futural\\\", system-ui, -apple-system, \\\"Segoe UI\\\", Helvetica, Arial, sans-serif\",\n\t\t\"heading\": \"\\\"APK Futural\\\", \\\"Arimo\\\", system-ui, -apple-system, \\\"Segoe UI\\\", Helvetica, Arial, sans-serif\",\n\t\t\"mono\": \"ui-monospace, SFMono-Regular, \\\"SF Mono\\\", Menlo, Monaco, Consolas, \\\"Liberation Mono\\\", \\\"Courier New\\\", monospace\"\n\t} },\n\t\"motion\": {\n\t\t\"duration\": {\n\t\t\t\"instant\": \"0ms\",\n\t\t\t\"fast\": \"120ms\",\n\t\t\t\"base\": \"200ms\",\n\t\t\t\"slow\": \"320ms\"\n\t\t},\n\t\t\"easing\": {\n\t\t\t\"standard\": \"cubic-bezier(0.2, 0, 0, 1)\",\n\t\t\t\"decelerate\": \"cubic-bezier(0, 0, 0, 1)\",\n\t\t\t\"accelerate\": \"cubic-bezier(0.3, 0, 1, 1)\"\n\t\t}\n\t},\n\t\"focus\": {\n\t\t\"width\": \"2px\",\n\t\t\"offset\": \"2px\",\n\t\t\"color\": \"#f4f4f6\"\n\t},\n\t\"breakpoint\": {\n\t\t\"xs\": \"26.5625rem\",\n\t\t\"sm\": \"40rem\",\n\t\t\"md\": \"48rem\",\n\t\t\"lg\": \"64rem\",\n\t\t\"xl\": \"80rem\",\n\t\t\"2xl\": \"96rem\",\n\t\t\"3xl\": \"120rem\",\n\t\t\"4xl\": \"160rem\"\n\t},\n\t\"container\": {\n\t\t\"authCard\": \"24rem\",\n\t\t\"page\": \"80rem\"\n\t}\n};\nconst cssVars = {\n\t\"color\": {\n\t\t\"surface\": {\n\t\t\t\"defaultBlack\": \"var(--zl-color-surface-default-black)\",\n\t\t\t\"defaultWhite\": \"var(--zl-color-surface-default-white)\",\n\t\t\t\"defaultPrimaryGray\": \"var(--zl-color-surface-default-primary-gray)\",\n\t\t\t\"defaultSecondaryGray\": \"var(--zl-color-surface-default-secondary-gray)\"\n\t\t},\n\t\t\"text\": {\n\t\t\t\"primaryWhite\": \"var(--zl-color-text-primary-white)\",\n\t\t\t\"secondaryGray\": \"var(--zl-color-text-secondary-gray)\",\n\t\t\t\"buttonDefault\": \"var(--zl-color-text-button-default)\",\n\t\t\t\"buttonInvert\": \"var(--zl-color-text-button-invert)\",\n\t\t\t\"disabled\": \"var(--zl-color-text-disabled)\",\n\t\t\t\"error\": \"var(--zl-color-text-error)\",\n\t\t\t\"success\": \"var(--zl-color-text-success)\",\n\t\t\t\"subtitlePink\": \"var(--zl-color-text-subtitle-pink)\",\n\t\t\t\"subtitlePurple\": \"var(--zl-color-text-subtitle-purple)\",\n\t\t\t\"subtitleGray\": \"var(--zl-color-text-subtitle-gray)\",\n\t\t\t\"subtitleOrange\": \"var(--zl-color-text-subtitle-orange)\"\n\t\t},\n\t\t\"icon\": {\n\t\t\t\"defaultBlack\": \"var(--zl-color-icon-default-black)\",\n\t\t\t\"defaultWhite\": \"var(--zl-color-icon-default-white)\",\n\t\t\t\"defaultGray\": \"var(--zl-color-icon-default-gray)\",\n\t\t\t\"defaultPink\": \"var(--zl-color-icon-default-pink)\",\n\t\t\t\"defaultPurple\": \"var(--zl-color-icon-default-purple)\",\n\t\t\t\"defaultOrange\": \"var(--zl-color-icon-default-orange)\",\n\t\t\t\"disabled\": \"var(--zl-color-icon-disabled)\",\n\t\t\t\"error\": \"var(--zl-color-icon-error)\",\n\t\t\t\"success\": \"var(--zl-color-icon-success)\"\n\t\t},\n\t\t\"border\": {\n\t\t\t\"defaultBlack\": \"var(--zl-color-border-default-black)\",\n\t\t\t\"defaultWhite\": \"var(--zl-color-border-default-white)\",\n\t\t\t\"defaultGray100\": \"var(--zl-color-border-default-gray-100)\",\n\t\t\t\"defaultGray200\": \"var(--zl-color-border-default-gray-200)\",\n\t\t\t\"defaultGray300\": \"var(--zl-color-border-default-gray-300)\",\n\t\t\t\"defaultGray400\": \"var(--zl-color-border-default-gray-400)\",\n\t\t\t\"error\": \"var(--zl-color-border-error)\",\n\t\t\t\"success\": \"var(--zl-color-border-success)\"\n\t\t},\n\t\t\"gray\": {\n\t\t\t\"50\": \"var(--zl-color-gray-50)\",\n\t\t\t\"75\": \"var(--zl-color-gray-75)\",\n\t\t\t\"100\": \"var(--zl-color-gray-100)\",\n\t\t\t\"200\": \"var(--zl-color-gray-200)\",\n\t\t\t\"300\": \"var(--zl-color-gray-300)\",\n\t\t\t\"400\": \"var(--zl-color-gray-400)\",\n\t\t\t\"500\": \"var(--zl-color-gray-500)\",\n\t\t\t\"600\": \"var(--zl-color-gray-600)\",\n\t\t\t\"700\": \"var(--zl-color-gray-700)\",\n\t\t\t\"800\": \"var(--zl-color-gray-800)\",\n\t\t\t\"900\": \"var(--zl-color-gray-900)\"\n\t\t}\n\t},\n\t\"spacing\": {\n\t\t\"10\": \"var(--zl-spacing-10)\",\n\t\t\"11\": \"var(--zl-spacing-11)\",\n\t\t\"12\": \"var(--zl-spacing-12)\",\n\t\t\"13\": \"var(--zl-spacing-13)\",\n\t\t\"14\": \"var(--zl-spacing-14)\",\n\t\t\"15\": \"var(--zl-spacing-15)\",\n\t\t\"16\": \"var(--zl-spacing-16)\",\n\t\t\"01\": \"var(--zl-spacing-01)\",\n\t\t\"02\": \"var(--zl-spacing-02)\",\n\t\t\"03\": \"var(--zl-spacing-03)\",\n\t\t\"04\": \"var(--zl-spacing-04)\",\n\t\t\"05\": \"var(--zl-spacing-05)\",\n\t\t\"06\": \"var(--zl-spacing-06)\",\n\t\t\"07\": \"var(--zl-spacing-07)\",\n\t\t\"08\": \"var(--zl-spacing-08)\",\n\t\t\"09\": \"var(--zl-spacing-09)\"\n\t},\n\t\"radius\": {\n\t\t\"xs\": \"var(--zl-radius-xs)\",\n\t\t\"s\": \"var(--zl-radius-s)\",\n\t\t\"m\": \"var(--zl-radius-m)\",\n\t\t\"l\": \"var(--zl-radius-l)\",\n\t\t\"xl\": \"var(--zl-radius-xl)\"\n\t},\n\t\"font\": { \"family\": {\n\t\t\"sans\": \"var(--zl-font-family-sans)\",\n\t\t\"heading\": \"var(--zl-font-family-heading)\",\n\t\t\"mono\": \"var(--zl-font-family-mono)\"\n\t} },\n\t\"motion\": {\n\t\t\"duration\": {\n\t\t\t\"instant\": \"var(--zl-duration-instant)\",\n\t\t\t\"fast\": \"var(--zl-duration-fast)\",\n\t\t\t\"base\": \"var(--zl-duration-base)\",\n\t\t\t\"slow\": \"var(--zl-duration-slow)\"\n\t\t},\n\t\t\"easing\": {\n\t\t\t\"standard\": \"var(--zl-easing-standard)\",\n\t\t\t\"decelerate\": \"var(--zl-easing-decelerate)\",\n\t\t\t\"accelerate\": \"var(--zl-easing-accelerate)\"\n\t\t}\n\t},\n\t\"focus\": {\n\t\t\"width\": \"var(--zl-focus-width)\",\n\t\t\"offset\": \"var(--zl-focus-offset)\",\n\t\t\"color\": \"var(--zl-focus-color)\"\n\t},\n\t\"breakpoint\": {\n\t\t\"xs\": \"var(--zl-breakpoint-xs)\",\n\t\t\"sm\": \"var(--zl-breakpoint-sm)\",\n\t\t\"md\": \"var(--zl-breakpoint-md)\",\n\t\t\"lg\": \"var(--zl-breakpoint-lg)\",\n\t\t\"xl\": \"var(--zl-breakpoint-xl)\",\n\t\t\"2xl\": \"var(--zl-breakpoint-2xl)\",\n\t\t\"3xl\": \"var(--zl-breakpoint-3xl)\",\n\t\t\"4xl\": \"var(--zl-breakpoint-4xl)\"\n\t},\n\t\"container\": {\n\t\t\"authCard\": \"var(--zl-container-auth-card)\",\n\t\t\"page\": \"var(--zl-container-page)\"\n\t}\n};\nconst tokensCss = \"/* AUTOGENERATED by packages/design-tokens/scripts/build.ts — do not edit by hand.\\n   Source: src/generated/figma.tokens.json + src/overrides.ts.\\n   Re-run: moon run design-tokens:generate */\\n\\n:root,\\n[data-theme=\\\"dark\\\"] {\\n  --zl-color-surface-default-black: #0f0f11;\\n  --zl-color-surface-default-white: #f4f4f6;\\n  --zl-color-surface-default-primary-gray: #252528;\\n  --zl-color-surface-default-secondary-gray: #37373a;\\n  --zl-color-text-primary-white: #f4f4f6;\\n  --zl-color-text-secondary-gray: #bfbfcf;\\n  --zl-color-text-button-default: #0f0f11;\\n  --zl-color-text-button-invert: #f4f4f6;\\n  --zl-color-text-disabled: #686883;\\n  --zl-color-text-error: #ea4f70;\\n  --zl-color-text-success: #33a779;\\n  --zl-color-text-subtitle-pink: #f48aa0;\\n  --zl-color-text-subtitle-purple: #bba5e4;\\n  --zl-color-text-subtitle-gray: #bfbfcf;\\n  --zl-color-text-subtitle-orange: #f25543;\\n  --zl-color-icon-default-black: #0f0f11;\\n  --zl-color-icon-default-white: #f4f4f6;\\n  --zl-color-icon-default-gray: #bfbfcf;\\n  --zl-color-icon-default-pink: #f48aa0;\\n  --zl-color-icon-default-purple: #bba5e4;\\n  --zl-color-icon-default-orange: #f25543;\\n  --zl-color-icon-disabled: #686883;\\n  --zl-color-icon-error: #ea4f70;\\n  --zl-color-icon-success: #33a779;\\n  --zl-color-border-default-black: #252528;\\n  --zl-color-border-default-white: #f4f4f6;\\n  --zl-color-border-default-gray-100: #37373a;\\n  --zl-color-border-default-gray-200: #484a57;\\n  --zl-color-border-default-gray-300: #686883;\\n  --zl-color-border-default-gray-400: #82829c;\\n  --zl-color-border-error: #ea4f70;\\n  --zl-color-border-success: #33a779;\\n  --zl-color-gray-50: #0f0f11;\\n  --zl-color-gray-75: #252528;\\n  --zl-color-gray-100: #37373a;\\n  --zl-color-gray-200: #484a57;\\n  --zl-color-gray-300: #686883;\\n  --zl-color-gray-400: #82829c;\\n  --zl-color-gray-500: #9e9eb2;\\n  --zl-color-gray-600: #cfcfde;\\n  --zl-color-gray-700: #bfbfcf;\\n  --zl-color-gray-800: #e1e1e7;\\n  --zl-color-gray-900: #f4f4f6;\\n  --zl-spacing-01: 0.25rem;\\n  --zl-spacing-02: 0.5rem;\\n  --zl-spacing-03: 1rem;\\n  --zl-spacing-04: 1.5rem;\\n  --zl-spacing-05: 2rem;\\n  --zl-spacing-06: 1.5rem;\\n  --zl-spacing-07: 2.5rem;\\n  --zl-spacing-08: 3rem;\\n  --zl-spacing-09: 3.5rem;\\n  --zl-spacing-10: 4rem;\\n  --zl-spacing-11: 5rem;\\n  --zl-spacing-12: 5.5rem;\\n  --zl-spacing-13: 6rem;\\n  --zl-spacing-14: 6.5rem;\\n  --zl-spacing-15: 7rem;\\n  --zl-spacing-16: 7.5rem;\\n  --zl-radius-xs: 0.25rem;\\n  --zl-radius-s: 0.5rem;\\n  --zl-radius-m: 0.75rem;\\n  --zl-radius-l: 1rem;\\n  --zl-radius-xl: 1.5rem;\\n  --zl-font-family-sans: \\\"Arimo\\\", \\\"APK Futural\\\", system-ui, -apple-system, \\\"Segoe UI\\\", Helvetica, Arial, sans-serif;\\n  --zl-font-family-heading: \\\"APK Futural\\\", \\\"Arimo\\\", system-ui, -apple-system, \\\"Segoe UI\\\", Helvetica, Arial, sans-serif;\\n  --zl-font-family-mono: ui-monospace, SFMono-Regular, \\\"SF Mono\\\", Menlo, Monaco, Consolas, \\\"Liberation Mono\\\", \\\"Courier New\\\", monospace;\\n  --zl-duration-instant: 0ms;\\n  --zl-duration-fast: 120ms;\\n  --zl-duration-base: 200ms;\\n  --zl-duration-slow: 320ms;\\n  --zl-easing-standard: cubic-bezier(0.2, 0, 0, 1);\\n  --zl-easing-decelerate: cubic-bezier(0, 0, 0, 1);\\n  --zl-easing-accelerate: cubic-bezier(0.3, 0, 1, 1);\\n  --zl-focus-width: 2px;\\n  --zl-focus-offset: 2px;\\n  --zl-focus-color: #f4f4f6;\\n  --zl-breakpoint-xs: 26.5625rem;\\n  --zl-breakpoint-sm: 40rem;\\n  --zl-breakpoint-md: 48rem;\\n  --zl-breakpoint-lg: 64rem;\\n  --zl-breakpoint-xl: 80rem;\\n  --zl-breakpoint-2xl: 96rem;\\n  --zl-breakpoint-3xl: 120rem;\\n  --zl-breakpoint-4xl: 160rem;\\n  --zl-container-auth-card: 24rem;\\n  --zl-container-page: 80rem;\\n}\\n\\n[data-theme=\\\"light\\\"] {\\n  /* Reserved. Light mode lands when the Figma design system publishes\\n     a light variable mode; the next sync will populate this block. */\\n}\\n\";\n//#endregion\nexport { cssVars, tokens, tokensCss };\n\n//# sourceMappingURL=tokens.mjs.map"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zitadel/components",
-  "version": "0.1.0-alpha.4",
+  "version": "0.1.0-alpha.8",
   "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": {
@@ -58,20 +58,6 @@
     "lit": "^3.3.2",
     "lucide": "^1.16.0"
   },
-  "nx": {
-    "targets": {
-      "build": {
-        "outputs": [
-          "{projectRoot}/dist"
-        ]
-      },
-      "typecheck": {
-        "dependsOn": [
-          "build"
-        ]
-      }
-    }
-  },
   "devDependencies": {
     "@tsdown/css": "^0.21.10",
     "@vitest/browser": "^4.1.7",
@@ -85,7 +71,7 @@
     "tsdown": "^0.21.10",
     "tslib": "^2.8.1",
     "@zitadel/api-mock": "0.0.0",
-    "@zitadel/api": "0.1.0-alpha.4",
+    "@zitadel/api": "0.1.0-alpha.8",
     "@zitadel/design-tokens": "0.1.0-alpha.0",
     "@zitadel/shared-component-styles": "0.0.0"
   },

package/dist/atoms/index.d.ts

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

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

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

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

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

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

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

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"zl-button.d.ts","sourceRoot":"","sources":["../../src/atoms/zl-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAQhD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGnD,OAAO,cAAc,CAAC;AAEtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,MAAM,CAAC,cAAc,UAAQ;IAE7B,OAAgB,iBAAiB,EAAE,cAAc,CAG/C;IAEF,OAAgB,MAAM,4BAGpB;IAE2B,QAAQ,CAAC,SAAS,EAAE,SAAS,GAAG,WAAW,GAAG,MAAM,CAAa;IAEjE,QAAQ,CAAC,IAAI,EAAE,QAAQ,GAAG,OAAO,CAAY;IAE9D,QAAQ,CAAC,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;IAExD,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAa;IAE/B,QAAQ,CAAC,OAAO,UAAS;IAEV,QAAQ,CAAC,QAAQ,UAAS;IAE1B,QAAQ,CAAC,KAAK,UAAS;IAEvD,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAa;IAEnB,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAa;IAExF;;;;;OAKG;IACoC,QAAQ,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAQ;IAElF,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAmB;IAE7C,cAGC;IAEQ,iBAAiB,IAAI,IAAI,CAGjC;IAEQ,oBAAoB,IAAI,IAAI,CAGpC;IAEQ,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI,CAE3C;IAEQ,MAAM,oCAsCd;IAED,OAAO,CAAC,WAAW,CAEjB;IAEF,OAAO,CAAC,eAAe,CAGrB;IAEF,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,QAAQ;IAqBhB,OAAO,CAAC,YAAY;IAepB,OAAO,CAAC,aAAa;CAGtB;AAED,eAAO,MAAM,gBAAgB,EAAE,YAOrB,CAAC;AAEX,OAAO,CAAC,MAAM,CAAC,CAAC;IACd,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}