@zitadel/components 0.1.0-alpha.3 → 0.1.0-alpha.5

package/dist/standalone.mjs

@@ -1561,6 +1561,13 @@ let ZlButton = class ZlButton extends i$2 {
 	set label(value) {
 		this.#_label_accessor_storage = value;
 	}
+	#_testId_accessor_storage = void 0;
+	get testId() {
+		return this.#_testId_accessor_storage;
+	}
+	set testId(value) {
+		this.#_testId_accessor_storage = value;
+	}
 	#_forcedState_accessor_storage = null;
 	get forcedState() {
 		return this.#_forcedState_accessor_storage;
@@ -1573,50 +1580,97 @@ let ZlButton = class ZlButton extends i$2 {
 		super();
 		this.internals = this.attachInternals();
 	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener("click", this.handleHostClick);
+	}
+	disconnectedCallback() {
+		this.removeEventListener("click", this.handleHostClick);
+		super.disconnectedCallback();
+	}
 	focus(options) {
 		this.shadowRoot?.querySelector("button")?.focus(options);
 	}
 	render() {
-		const blocked = this.disabled || this.loading;
-		const body = this.label !== void 0 ? b`<span>${this.label}</span>` : b`<slot></slot>`;
+		const hierarchy = this.stringOption("hierarchy", this.hierarchy, "primary");
+		const size = this.stringOption("size", this.size, "medium");
+		const type = this.buttonType();
+		const loading = this.booleanOption("loading", this.loading);
+		const disabled = this.booleanOption("disabled", this.disabled);
+		const block = this.booleanOption("block", this.block);
+		const label = this.stringOption("label", this.label);
+		const blocked = disabled || loading;
+		const body = label !== void 0 ? b`<span>${label}</span>` : b`<slot></slot>`;
 		return b`
       <button
         class=${e$2({
 			root: true,
 			"zr-btn": true,
-			[`zr-btn--${this.hierarchy}`]: true,
-			[`zr-btn--${this.size}`]: true,
-			"zr-btn--block": this.block
+			[`zr-btn--${hierarchy}`]: true,
+			[`zr-btn--${size}`]: true,
+			"zr-btn--block": block
 		})}
         part="root"
-        type=${this.type}
+        type=${type}
         ?disabled=${blocked}
-        aria-busy=${this.loading ? "true" : "false"}
+        aria-busy=${loading ? "true" : "false"}
+        data-testid=${this.nativeButtonTestId() ?? A}
         data-state=${this.forcedState ?? A}
         @click=${this.handleClick}
       >
         <slot name="leading"></slot>
         ${body}
-        ${this.loading ? b`<span class="spinner" part="spinner"><zl-icon name="spinner" size=${this.size === "small" ? "16" : "24"} spin decorative></zl-icon></span>` : b`<slot name="trailing"></slot>`}
+        ${loading ? b`<span class="spinner" part="spinner"><zl-icon name="spinner" size=${size === "small" ? "16" : "24"} spin decorative></zl-icon></span>` : b`<slot name="trailing"></slot>`}
       </button>
     `;
 	}
 	handleClick = (event) => {
-		if (this.disabled || this.loading) {
+		this.activate(event);
+	};
+	handleHostClick = (event) => {
+		if (event.composedPath()[0] !== this) return;
+		this.activate(event);
+	};
+	nativeButtonTestId() {
+		const testId = this.stringOption("data-testid", this.testId);
+		if (testId) return `${testId}-button`;
+		const action = this.buttonAction();
+		return action ? `zitadel-action-${action}` : void 0;
+	}
+	buttonType() {
+		const type = this.stringOption("type", this.type, "button");
+		return type === "submit" || type === "reset" ? type : "button";
+	}
+	buttonAction() {
+		return this.stringOption("action", this.action);
+	}
+	activate(event) {
+		const type = this.buttonType();
+		const action = this.buttonAction();
+		if (this.booleanOption("disabled", this.disabled) || this.booleanOption("loading", this.loading)) {
 			event.preventDefault();
 			event.stopImmediatePropagation();
 			return;
 		}
 		const form = this.internals.form;
-		if (this.type === "submit" && form) {
+		if (type === "submit" && form) {
 			event.preventDefault();
 			form.requestSubmit();
-		} else if (this.type === "reset" && form) {
+		} else if (type === "reset" && form) {
 			event.preventDefault();
 			form.reset();
 		}
-		emit(this, "zl-submit", { action: this.action ?? null });
-	};
+		emit(this, "zl-submit", { action: action ?? null });
+	}
+	stringOption(attribute, value, fallback) {
+		if (typeof value === "string" && value.length > 0) return value;
+		const attr = this.getAttribute(attribute);
+		if (attr !== null && attr.length > 0) return attr;
+		return fallback;
+	}
+	booleanOption(attribute, value) {
+		return value === true || this.hasAttribute(attribute);
+	}
 };
 __decorate([n$1({ reflect: true })], ZlButton.prototype, "hierarchy", null);
 __decorate([n$1({ reflect: true })], ZlButton.prototype, "size", null);
@@ -1632,6 +1686,7 @@ __decorate([n$1({
 	reflect: true
 })], ZlButton.prototype, "block", null);
 __decorate([n$1()], ZlButton.prototype, "label", null);
+__decorate([n$1({ attribute: "data-testid" })], ZlButton.prototype, "testId", null);
 __decorate([n$1({ attribute: "data-state" })], ZlButton.prototype, "forcedState", null);
 ZlButton = __decorate([t$4("zl-button")], ZlButton);
 const zlButtonManifest = {
@@ -1648,7 +1703,8 @@ const zlButtonManifest = {
 		"loading",
 		"disabled",
 		"block",
-		"label"
+		"label",
+		"data-testid"
 	],
 	parts: ["root", "spinner"],
 	slots: [
@@ -1857,6 +1913,13 @@ let ZlField = class ZlField extends i$2 {
 	set success(value) {
 		this.#_success_accessor_storage = value;
 	}
+	#_testId_accessor_storage = void 0;
+	get testId() {
+		return this.#_testId_accessor_storage;
+	}
+	set testId(value) {
+		this.#_testId_accessor_storage = value;
+	}
 	#_forgotPasswordHref_accessor_storage = void 0;
 	get forgotPasswordHref() {
 		return this.#_forgotPasswordHref_accessor_storage;
@@ -1975,6 +2038,7 @@ let ZlField = class ZlField extends i$2 {
             class="zr-field__input"
             part="input"
             id=${this.inputId}
+            data-testid=${o(this.nativeInputTestId())}
             name=${this.name}
             type=${this.type}
             .value=${l(this.value)}
@@ -2081,23 +2145,26 @@ let ZlField = class ZlField extends i$2 {
 			value: this.value
 		});
 		this.syncFormState();
+		this.dispatchNativeInput();
 		this.inputEl?.focus();
 	};
 	handleInput = (event) => {
+		event.stopPropagation();
 		const input = event.target;
 		this.value = input.value;
+		this.syncFormState();
 		emit(this, "zl-input", {
 			name: this.name,
 			value: this.value
 		});
+		this.dispatchNativeInput(event);
 	};
 	handleChange = (event) => {
+		event.stopPropagation();
 		const input = event.target;
 		this.value = input.value;
-		this.dispatchEvent(new Event("change", {
-			bubbles: true,
-			composed: true
-		}));
+		this.syncFormState();
+		this.dispatchNativeChange();
 	};
 	handleKeyDown = (event) => {
 		if (event.key === "Enter" && !event.isComposing && !event.shiftKey && !event.altKey && !event.metaKey && !event.ctrlKey) {
@@ -2108,6 +2175,33 @@ let ZlField = class ZlField extends i$2 {
 			}
 		}
 	};
+	nativeInputTestId() {
+		if (this.testId) return `${this.testId}-input`;
+		return this.name ? `zitadel-input-${this.name}` : void 0;
+	}
+	dispatchNativeInput(source) {
+		if (typeof InputEvent === "function") {
+			const input = source instanceof InputEvent ? source : void 0;
+			this.dispatchEvent(new InputEvent("input", {
+				bubbles: true,
+				composed: true,
+				data: input?.data ?? null,
+				inputType: input?.inputType ?? "",
+				isComposing: input?.isComposing ?? false
+			}));
+			return;
+		}
+		this.dispatchEvent(new Event("input", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	dispatchNativeChange() {
+		this.dispatchEvent(new Event("change", {
+			bubbles: true,
+			composed: true
+		}));
+	}
 };
 __decorate([n$1()], ZlField.prototype, "label", null);
 __decorate([n$1()], ZlField.prototype, "type", null);
@@ -2117,6 +2211,7 @@ __decorate([n$1()], ZlField.prototype, "autocomplete", null);
 __decorate([n$1()], ZlField.prototype, "pattern", null);
 __decorate([n$1()], ZlField.prototype, "error", null);
 __decorate([n$1()], ZlField.prototype, "success", null);
+__decorate([n$1({ attribute: "data-testid" })], ZlField.prototype, "testId", null);
 __decorate([n$1({ attribute: "forgot-password-href" })], ZlField.prototype, "forgotPasswordHref", null);
 __decorate([n$1({ attribute: "forgot-password-label" })], ZlField.prototype, "forgotPasswordLabel", null);
 __decorate([n$1({
@@ -2147,6 +2242,7 @@ const zlFieldManifest = {
 		"placeholder",
 		"autocomplete",
 		"pattern",
+		"data-testid",
 		"required",
 		"disabled",
 		"invalid",
@@ -4129,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
@@ -8677,7 +8778,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        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          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          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        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\">{{ '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\">{{ '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 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 actions.recover %}\n      <p class=\"zl-card-forgot\">\n        <a href=\"#\" class=\"zl-card-forgot__link\" data-action=\"recover\">{{ actions.recover.text_key | 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' or entry[0] == 'recover' %}\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";
 //#endregion
 //#region src/orchestrator/liquid.ts
 /**
@@ -8822,8 +8923,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",
@@ -8872,7 +8974,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",
@@ -8880,8 +8982,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",
@@ -8920,8 +9024,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",
@@ -8970,13 +9075,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",
@@ -9017,8 +9127,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",
@@ -9067,13 +9178,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",
@@ -10898,6 +11014,7 @@ const COMMON_ATTRS = [
 	"style",
 	"name",
 	"for",
+	"data-testid",
 	"data-theme",
 	"hidden"
 ];
@@ -11405,6 +11522,31 @@ let ZitadelLogin = class ZitadelLogin extends i$2 {
 			if (field.value !== next) field.value = next;
 		}
 	}
+	captureValuesFromFields() {
+		const root = this.shadowRoot;
+		if (!root) return this.formValues;
+		const fields = root.querySelectorAll("zl-field");
+		if (fields.length === 0) return this.formValues;
+		const next = { ...this.formValues };
+		let changed = false;
+		for (const field of fields) {
+			const name = field.getAttribute("name");
+			const value = this.currentFieldValue(field);
+			if (!name || value === void 0) continue;
+			if (field.value !== value) field.value = value;
+			if (next[name] !== value) {
+				next[name] = value;
+				changed = true;
+			}
+		}
+		if (changed) this.formValues = next;
+		return next;
+	}
+	currentFieldValue(field) {
+		const native = field.shadowRoot?.querySelector("input");
+		if (native && native.value !== field.value) return native.value;
+		return typeof field.value === "string" ? field.value : void 0;
+	}
 	handleAtomInput = (event) => {
 		if (!event.detail) return;
 		const { name, value } = event.detail;
@@ -11413,11 +11555,23 @@ let ZitadelLogin = class ZitadelLogin extends i$2 {
 			...this.formValues,
 			[name]: value
 		};
+		this.syncFieldElementValue(name, value);
 		emit(this, "zitadel-flow-input", {
 			name,
 			value
 		});
 	};
+	syncFieldElementValue(name, value) {
+		const root = this.shadowRoot;
+		if (!root) return;
+		const fields = root.querySelectorAll("zl-field");
+		for (const field of fields) {
+			if (field.getAttribute("name") !== name) continue;
+			if (field.value !== value) field.value = value;
+			const native = field.shadowRoot?.querySelector("input");
+			if (native && native.value !== value) native.value = value;
+		}
+	}
 	handleAtomSubmit = (event) => {
 		if (this.loading) return;
 		this.submit(event.detail?.action ?? null);
@@ -11495,10 +11649,11 @@ let ZitadelLogin = class ZitadelLogin extends i$2 {
 		const { id, session_token } = this.response;
 		this.loading = true;
 		try {
+			const formValues = this.captureValuesFromFields();
 			const stepFieldKeys = Object.keys(this.response.step.fields ?? {});
 			const fields = {};
 			for (const key of stepFieldKeys) {
-				const value = this.formValues[key];
+				const value = formValues[key];
 				if (value !== void 0) fields[key] = value;
 			}
 			const body = {