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

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

@@ -1,4 +1,4 @@
-import { t as cssVars } from "./tokens-CbH2s1jV.mjs";
+import { t as cssVars } from "./tokens-BV-PPbQd.mjs";
 import { LitElement, css, html, nothing, unsafeCSS } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
@@ -10,7 +10,7 @@ import { live } from "lit/directives/live.js";
 var alert_host_default = ":host {\n  display: block;\n}\n";
 //#endregion
 //#region ../shared-component-styles/src/alert.css?inline
-var alert_default = ".zr-alert {\n  align-items: flex-start;\n  gap: var(--zl-spacing-03, 1rem);\n  padding: var(--zl-spacing-03, 1rem);\n  border-radius: var(--zl-radius-m, .75rem);\n  background: var(--zl-color-surface-default-primary-gray, #252528);\n  color: var(--zl-color-text-button-invert, #f4f4f6);\n  font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n  font-size: .875rem;\n  font-weight: 400;\n  line-height: 1.25rem;\n  display: flex;\n  box-shadow: 0 1px 2px #1018280d;\n}\n\n.zr-alert__icon {\n  color: var(--zl-color-text-error, #ea4f70);\n  flex-shrink: 0;\n}\n\n.zr-alert--warning .zr-alert__icon {\n  color: var(--zl-color-text-subtitle-orange, #f25543);\n}\n\n.zr-alert--success .zr-alert__icon {\n  color: var(--zl-color-text-success, #33a779);\n}\n\n.zr-alert--info .zr-alert__icon {\n  color: var(--zl-color-text-subtitle-gray, #bfbfcf);\n}\n\n.zr-alert__body {\n  gap: var(--zl-spacing-01, .25rem);\n  flex-direction: column;\n  flex: auto;\n  min-width: 0;\n  display: flex;\n}\n\n.zr-alert__title {\n  color: var(--zl-color-text-button-invert, #f4f4f6);\n  font-weight: 600;\n}\n\n.zr-alert__message {\n  color: var(--zl-color-border-default-white, #f4f4f6);\n  margin: 0;\n}\n\n.zr-alert:not(:has(.zr-alert__title)) .zr-alert__message {\n  color: var(--zl-color-text-button-invert, #f4f4f6);\n}\n\n.zr-alert__close {\n  all: unset;\n  width: 2.25rem;\n  height: 2.25rem;\n  padding: var(--zl-spacing-02, .5rem);\n  border-radius: var(--zl-radius-s, .5rem);\n  color: var(--zl-color-text-secondary-gray, #bfbfcf);\n  cursor: pointer;\n  transition: background-color var(--zl-duration-fast, .12s) var(--zl-easing-standard, cubic-bezier(.2, 0, 0, 1));\n  flex-shrink: 0;\n  justify-content: center;\n  align-items: center;\n  display: inline-flex;\n}\n\n.zr-alert__close .zr-icon {\n  --zl-icon-size: 1.25rem;\n  width: 1.25rem;\n  height: 1.25rem;\n}\n\n.zr-alert__close:hover {\n  background: var(--zl-color-gray-200, #484a57);\n}\n\n.zr-alert__close:focus-visible {\n  outline: var(--zl-focus-width, 2px) solid var(--zl-focus-color, #f4f4f6);\n  outline-offset: var(--zl-focus-offset, 2px);\n}\n";
+var alert_default = ".zr-alert {\n  align-items: flex-start;\n  gap: var(--zl-spacing-03, 1rem);\n  padding: var(--zl-spacing-03, 1rem);\n  border-radius: var(--zl-radius-m, .75rem);\n  background: var(--zl-color-surface-default-primary-gray, #252528);\n  color: var(--zl-color-text-button-invert, #f4f4f6);\n  font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n  font-size: .875rem;\n  font-weight: 400;\n  line-height: 1.25rem;\n  display: flex;\n  box-shadow: 0 1px 2px #1018280d;\n}\n\n.zr-alert__icon {\n  color: var(--zl-color-text-error, #ea4f70);\n  flex-shrink: 0;\n}\n\n.zr-alert--warning .zr-alert__icon {\n  color: var(--zl-color-text-subtitle-orange, #f25543);\n}\n\n.zr-alert--success .zr-alert__icon {\n  color: var(--zl-color-text-success, #33a779);\n}\n\n.zr-alert--info .zr-alert__icon {\n  color: var(--zl-color-text-subtitle-gray, #bfbfcf);\n}\n\n.zr-alert__body {\n  gap: var(--zl-spacing-01, .25rem);\n  flex-direction: column;\n  flex: auto;\n  min-width: 0;\n  display: flex;\n}\n\n.zr-alert__title {\n  color: var(--zl-color-text-button-invert, #f4f4f6);\n  font-weight: 600;\n}\n\n.zr-alert__message {\n  color: var(--zl-color-border-default-white, #f4f4f6);\n  margin: 0;\n}\n\n.zr-alert:not(:has(.zr-alert__title)) .zr-alert__message {\n  color: var(--zl-color-text-button-invert, #f4f4f6);\n}\n\n.zr-alert__close {\n  all: unset;\n  width: 2.25rem;\n  height: 2.25rem;\n  padding: var(--zl-spacing-02, .5rem);\n  border-radius: var(--zl-radius-s, .5rem);\n  color: var(--zl-color-text-secondary-gray, #bfbfcf);\n  cursor: pointer;\n  transition: background-color var(--zl-duration-fast, .12s) var(--zl-easing-standard, cubic-bezier(.2, 0, 0, 1));\n  flex-shrink: 0;\n  justify-content: center;\n  align-items: center;\n  display: inline-flex;\n}\n\n.zr-alert__close .zr-icon {\n  --zl-icon-size: 1.25rem;\n  width: 1.25rem;\n  height: 1.25rem;\n}\n\n.zr-alert__close:hover {\n  background: var(--zl-color-surface-hover-subtle, #484a57);\n}\n\n.zr-alert__close:focus-visible {\n  outline: var(--zl-focus-width, 2px) solid var(--zl-focus-color, #f4f4f6);\n  outline-offset: var(--zl-focus-offset, 2px);\n}\n";
 //#endregion
 //#region src/internal/emit.ts
 /**
@@ -320,7 +320,7 @@ const zlAlertManifest = {
 var button_host_default = ":host {\n  display: inline-flex;\n}\n\n:host([block]) {\n  width: 100%;\n  display: flex;\n}\n\n:host([hierarchy=\"primary\"]) {\n  color: var(--zl-color-text-button-default, #0f0f11);\n}\n\n:host([hierarchy=\"secondary\"]), :host([hierarchy=\"text\"]) {\n  color: var(--zl-color-text-button-invert, #f4f4f6);\n}\n\n:host([disabled]) {\n  color: var(--zl-color-text-disabled, #686883);\n}\n\n::slotted([slot=\"leading\"]), ::slotted([slot=\"trailing\"]) {\n  align-items: center;\n  display: inline-flex;\n}\n\n.zr-btn .spinner {\n  display: inline-flex;\n}\n";
 //#endregion
 //#region ../shared-component-styles/src/button.css?inline
-var button_default = ":where(.zr-btn) {\n  all: unset;\n  box-sizing: border-box;\n  cursor: pointer;\n  font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n  justify-content: center;\n  align-items: center;\n  gap: var(--zl-spacing-02, .5rem);\n  width: max-content;\n  padding-inline: var(--zl-spacing-03, 1rem);\n  border-radius: var(--zl-radius-s, .5rem);\n  text-align: center;\n  white-space: nowrap;\n  transition: background-color var(--zl-duration-fast, .12s) var(--zl-easing-standard, cubic-bezier(.2, 0, 0, 1)),\n    color var(--zl-duration-fast, .12s) var(--zl-easing-standard, cubic-bezier(.2, 0, 0, 1)),\n    border-color var(--zl-duration-fast, .12s) var(--zl-easing-standard, cubic-bezier(.2, 0, 0, 1)),\n    background-image var(--zl-duration-fast, .12s) var(--zl-easing-standard, cubic-bezier(.2, 0, 0, 1));\n  border: 1px solid #0000;\n  padding-block: .625rem;\n  font-weight: 600;\n  display: inline-flex;\n}\n\n.zr-btn:focus-visible, .zr-btn[data-state=\"focused\"] {\n  outline: var(--zl-focus-width, 2px) solid var(--zl-focus-color, #f4f4f6);\n  outline-offset: var(--zl-focus-offset, 2px);\n}\n\n.zr-btn--block {\n  width: 100%;\n  display: flex;\n}\n\n.zr-btn--medium {\n  height: 3rem;\n  font-size: 1rem;\n  line-height: 1.5rem;\n}\n\n.zr-btn--small {\n  height: 2.5rem;\n  font-size: .875rem;\n  line-height: 1.25rem;\n}\n\n.zr-btn--primary {\n  background: var(--zl-color-surface-default-white, #f4f4f6);\n  color: var(--zl-color-text-button-default, #0f0f11);\n}\n\n.zr-btn--primary:hover:not(:disabled), .zr-btn--primary:active:not(:disabled), .zr-btn--primary:focus-visible:not(:disabled), .zr-btn--primary[data-state=\"hovered\"]:not(:disabled), .zr-btn--primary[data-state=\"pressed\"]:not(:disabled), .zr-btn--primary[data-state=\"focused\"]:not(:disabled) {\n  background: var(--zl-color-gray-600, #cfcfde);\n  border-color: var(--zl-color-border-default-black, #252528);\n}\n\n.zr-btn--primary:disabled {\n  color: var(--zl-color-text-disabled, #686883);\n  cursor: not-allowed;\n}\n\n.zr-btn--secondary {\n  background: var(--zl-color-border-default-black, #252528);\n  color: var(--zl-color-text-button-invert, #f4f4f6);\n}\n\n.zr-btn--secondary:hover:not(:disabled), .zr-btn--secondary:active:not(:disabled), .zr-btn--secondary[data-state=\"hovered\"]:not(:disabled), .zr-btn--secondary[data-state=\"pressed\"]:not(:disabled) {\n  background: var(--zl-color-gray-200, #484a57);\n}\n\n.zr-btn--secondary:disabled {\n  color: var(--zl-color-text-disabled, #686883);\n  cursor: not-allowed;\n}\n\n.zr-btn--text {\n  color: var(--zl-color-text-button-invert, #f4f4f6);\n  background: none;\n}\n\n.zr-btn--text:hover:not(:disabled), .zr-btn--text:active:not(:disabled), .zr-btn--text[data-state=\"hovered\"]:not(:disabled), .zr-btn--text[data-state=\"pressed\"]:not(:disabled) {\n  background: var(--zl-color-gray-200, #484a57);\n}\n\n.zr-btn--text:focus-visible:not(:disabled), .zr-btn--text[data-state=\"focused\"]:not(:disabled) {\n  background: var(--zl-color-border-default-black, #252528);\n}\n\n.zr-btn--text:disabled {\n  color: var(--zl-color-text-disabled, #686883);\n  cursor: not-allowed;\n}\n";
+var button_default = ":where(.zr-btn) {\n  all: unset;\n  box-sizing: border-box;\n  cursor: pointer;\n  font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n  justify-content: center;\n  align-items: center;\n  gap: var(--zl-spacing-02, .5rem);\n  width: max-content;\n  padding-inline: var(--zl-spacing-03, 1rem);\n  border-radius: var(--zl-radius-s, .5rem);\n  text-align: center;\n  white-space: nowrap;\n  transition: background-color var(--zl-duration-fast, .12s) var(--zl-easing-standard, cubic-bezier(.2, 0, 0, 1)),\n    color var(--zl-duration-fast, .12s) var(--zl-easing-standard, cubic-bezier(.2, 0, 0, 1)),\n    border-color var(--zl-duration-fast, .12s) var(--zl-easing-standard, cubic-bezier(.2, 0, 0, 1)),\n    background-image var(--zl-duration-fast, .12s) var(--zl-easing-standard, cubic-bezier(.2, 0, 0, 1));\n  border: 1px solid #0000;\n  padding-block: .625rem;\n  font-weight: 600;\n  display: inline-flex;\n}\n\n.zr-btn:focus-visible, .zr-btn[data-state=\"focused\"] {\n  outline: var(--zl-focus-width, 2px) solid var(--zl-focus-color, #f4f4f6);\n  outline-offset: var(--zl-focus-offset, 2px);\n}\n\n.zr-btn--block {\n  width: 100%;\n  display: flex;\n}\n\n.zr-btn--medium {\n  height: 3rem;\n  font-size: 1rem;\n  line-height: 1.5rem;\n}\n\n.zr-btn--small {\n  height: 2.5rem;\n  font-size: .875rem;\n  line-height: 1.25rem;\n}\n\n.zr-btn--primary {\n  background: var(--zl-color-surface-default-white, #f4f4f6);\n  color: var(--zl-color-text-button-default, #0f0f11);\n}\n\n.zr-btn--primary:hover:not(:disabled), .zr-btn--primary:active:not(:disabled), .zr-btn--primary:focus-visible:not(:disabled), .zr-btn--primary[data-state=\"hovered\"]:not(:disabled), .zr-btn--primary[data-state=\"pressed\"]:not(:disabled), .zr-btn--primary[data-state=\"focused\"]:not(:disabled) {\n  background: var(--zl-color-surface-hover-strong, #cfcfde);\n  border-color: var(--zl-color-border-default-black, #252528);\n}\n\n.zr-btn--primary:disabled {\n  color: var(--zl-color-text-disabled, #686883);\n  cursor: not-allowed;\n}\n\n.zr-btn--secondary {\n  background: var(--zl-color-border-default-black, #252528);\n  color: var(--zl-color-text-button-invert, #f4f4f6);\n}\n\n.zr-btn--secondary:hover:not(:disabled), .zr-btn--secondary:active:not(:disabled), .zr-btn--secondary[data-state=\"hovered\"]:not(:disabled), .zr-btn--secondary[data-state=\"pressed\"]:not(:disabled) {\n  background: var(--zl-color-surface-hover-subtle, #484a57);\n}\n\n.zr-btn--secondary:disabled {\n  color: var(--zl-color-text-disabled, #686883);\n  cursor: not-allowed;\n}\n\n.zr-btn--text {\n  color: var(--zl-color-text-button-invert, #f4f4f6);\n  background: none;\n}\n\n.zr-btn--text:hover:not(:disabled), .zr-btn--text:active:not(:disabled), .zr-btn--text[data-state=\"hovered\"]:not(:disabled), .zr-btn--text[data-state=\"pressed\"]:not(:disabled) {\n  background: var(--zl-color-surface-hover-subtle, #484a57);\n}\n\n.zr-btn--text:focus-visible:not(:disabled), .zr-btn--text[data-state=\"focused\"]:not(:disabled) {\n  background: var(--zl-color-border-default-black, #252528);\n}\n\n.zr-btn--text:disabled {\n  color: var(--zl-color-text-disabled, #686883);\n  cursor: not-allowed;\n}\n";
 //#endregion
 //#region src/atoms/zl-button.ts
 let ZlButton = class ZlButton extends LitElement {
@@ -481,7 +481,9 @@ let ZlButton = class ZlButton extends LitElement {
 		if (type === "submit" && form) {
 			event.preventDefault();
 			form.requestSubmit();
-		} else if (type === "reset" && form) {
+			return;
+		}
+		if (type === "reset" && form) {
 			event.preventDefault();
 			form.reset();
 		}
@@ -544,7 +546,7 @@ const zlButtonManifest = {
 var card_host_default = ":host {\n  width: 100%;\n  max-width: var(--zl-container-auth-card, 24rem);\n  margin-inline: auto;\n  display: block;\n}\n\n.zr-card ::slotted([slot=\"header\"]), .zr-card ::slotted([slot=\"footer\"]) {\n  margin: 0;\n}\n";
 //#endregion
 //#region ../shared-component-styles/src/card.css?inline
-var card_default = ".zr-card {\n  width: 100%;\n  max-width: var(--zl-container-auth-card, 24rem);\n  border: 1px solid var(--zl-color-surface-default-primary-gray, #252528);\n  border-radius: var(--zl-radius-l, 1rem);\n  padding: var(--zl-spacing-05, 2rem);\n  gap: var(--zl-spacing-05, 2rem);\n  font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  box-sizing: border-box;\n  background: none;\n  flex-direction: column;\n  margin-inline: auto;\n  line-height: 1.5;\n  display: flex;\n}\n\n.zr-card--compact {\n  gap: var(--zl-spacing-04, 1.5rem);\n}\n\n.zr-card__header, .zr-card__footer {\n  gap: var(--zl-spacing-02, .5rem);\n  flex-direction: column;\n  display: flex;\n}\n\n.zr-card__region--empty {\n  display: none;\n}\n\n.zr-card__body {\n  gap: var(--zl-spacing-03, 1rem);\n  flex-direction: column;\n  display: flex;\n}\n";
+var card_default = ".zr-card {\n  width: 100%;\n  max-width: var(--zl-container-auth-card, 24rem);\n  border: 1px solid var(--zl-color-border-default-black, #252528);\n  border-radius: var(--zl-radius-l, 1rem);\n  padding: var(--zl-spacing-05, 2rem);\n  gap: var(--zl-spacing-05, 2rem);\n  font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  box-sizing: border-box;\n  background: none;\n  flex-direction: column;\n  margin-inline: auto;\n  line-height: 1.5;\n  display: flex;\n}\n\n.zr-card--compact {\n  gap: var(--zl-spacing-04, 1.5rem);\n}\n\n.zr-card__header, .zr-card__footer {\n  gap: var(--zl-spacing-02, .5rem);\n  flex-direction: column;\n  display: flex;\n}\n\n.zr-card__region--empty {\n  display: none;\n}\n\n.zr-card__body {\n  gap: var(--zl-spacing-03, 1rem);\n  flex-direction: column;\n  display: flex;\n}\n";
 //#endregion
 //#region src/atoms/zl-card.ts
 let ZlCard = class ZlCard extends LitElement {
@@ -617,7 +619,7 @@ const zlCardManifest = {
 var checkbox_host_default = ":host {\n  display: inline-flex;\n}\n\n:host([disabled]) {\n  cursor: not-allowed;\n}\n";
 //#endregion
 //#region ../shared-component-styles/src/checkbox.css?inline
-var checkbox_default = ".zr-checkbox {\n  align-items: center;\n  gap: var(--zl-spacing-02, .5rem);\n  font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  cursor: pointer;\n  -webkit-user-select: none;\n  user-select: none;\n  line-height: 1.5;\n  display: inline-flex;\n}\n\n.zr-checkbox, .zr-checkbox *, .zr-checkbox :before, .zr-checkbox :after {\n  box-sizing: border-box;\n}\n\n.zr-checkbox--disabled {\n  cursor: not-allowed;\n}\n\n.zr-checkbox__input {\n  opacity: 0;\n  pointer-events: none;\n  border: 0;\n  width: 1px;\n  height: 1px;\n  margin: 0;\n  padding: 0;\n  position: absolute;\n}\n\n.zr-checkbox__box {\n  flex-shrink: 0;\n  justify-content: center;\n  align-items: center;\n  width: 1rem;\n  height: 1rem;\n  display: inline-flex;\n  position: relative;\n}\n\n.zr-checkbox__box:before {\n  content: \"\";\n  background: var(--zl-color-surface-default-primary-gray, #252528);\n  opacity: 0;\n  pointer-events: none;\n  width: 2rem;\n  height: 2rem;\n  transition: opacity var(--zl-duration-fast, .12s)\n    var(--zl-easing-standard, cubic-bezier(.2, 0, 0, 1));\n  border-radius: 50%;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n\n.zr-checkbox__face {\n  z-index: 1;\n  border: 1px solid var(--zl-color-icon-default-white, #f4f4f6);\n  width: 1rem;\n  height: 1rem;\n  transition: border-color var(--zl-duration-fast, .12s) var(--zl-easing-standard, cubic-bezier(.2, 0, 0, 1)),\n    background-color var(--zl-duration-fast, .12s) var(--zl-easing-standard, cubic-bezier(.2, 0, 0, 1));\n  background: none;\n  border-radius: 2px;\n  justify-content: center;\n  align-items: center;\n  display: inline-flex;\n  position: relative;\n}\n\n.zr-checkbox__check {\n  color: var(--zl-color-surface-default-black, #0f0f11);\n  opacity: 0;\n  display: inline-flex;\n}\n\n.zr-checkbox__label {\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  font-size: .875rem;\n  font-weight: 400;\n  line-height: 1.25rem;\n}\n\n.zr-checkbox__input:checked + .zr-checkbox__box .zr-checkbox__face {\n  border-color: var(--zl-color-icon-default-white, #f4f4f6);\n  background: var(--zl-color-icon-default-white, #f4f4f6);\n}\n\n.zr-checkbox__input:checked + .zr-checkbox__box .zr-checkbox__check, .zr-checkbox:not(.zr-checkbox--disabled):hover .zr-checkbox__box:before, .zr-checkbox:not(.zr-checkbox--disabled):active .zr-checkbox__box:before, .zr-checkbox__input:focus-visible + .zr-checkbox__box:before, .zr-checkbox[data-state=\"hovered\"] .zr-checkbox__box:before, .zr-checkbox[data-state=\"focused\"] .zr-checkbox__box:before, .zr-checkbox[data-state=\"pressed\"] .zr-checkbox__box:before {\n  opacity: 1;\n}\n\n.zr-checkbox:not(.zr-checkbox--disabled):hover .zr-checkbox__input:not(:checked) + .zr-checkbox__box .zr-checkbox__face, .zr-checkbox[data-state=\"hovered\"] .zr-checkbox__input:not(:checked) + .zr-checkbox__box .zr-checkbox__face {\n  border-color: var(--zl-color-icon-default-gray, #bfbfcf);\n}\n\n.zr-checkbox:not(.zr-checkbox--disabled):hover .zr-checkbox__input:checked + .zr-checkbox__box .zr-checkbox__face, .zr-checkbox[data-state=\"hovered\"] .zr-checkbox__input:checked + .zr-checkbox__box .zr-checkbox__face {\n  border-color: var(--zl-color-icon-default-gray, #bfbfcf);\n  background: var(--zl-color-icon-default-gray, #bfbfcf);\n}\n\n.zr-checkbox__input:focus-visible:not(:checked) + .zr-checkbox__box .zr-checkbox__face, .zr-checkbox:not(.zr-checkbox--disabled):active .zr-checkbox__input:not(:checked) + .zr-checkbox__box .zr-checkbox__face, .zr-checkbox[data-state=\"focused\"] .zr-checkbox__input:not(:checked) + .zr-checkbox__box .zr-checkbox__face, .zr-checkbox[data-state=\"pressed\"] .zr-checkbox__input:not(:checked) + .zr-checkbox__box .zr-checkbox__face {\n  border-color: var(--zl-color-surface-default-white, #f4f4f6);\n}\n\n.zr-checkbox__input:focus-visible:checked + .zr-checkbox__box .zr-checkbox__face, .zr-checkbox:not(.zr-checkbox--disabled):active .zr-checkbox__input:checked + .zr-checkbox__box .zr-checkbox__face, .zr-checkbox[data-state=\"focused\"] .zr-checkbox__input:checked + .zr-checkbox__box .zr-checkbox__face, .zr-checkbox[data-state=\"pressed\"] .zr-checkbox__input:checked + .zr-checkbox__box .zr-checkbox__face {\n  border-color: var(--zl-color-surface-default-white, #f4f4f6);\n  background: var(--zl-color-surface-default-white, #f4f4f6);\n}\n\n.zr-checkbox__input:focus-visible + .zr-checkbox__box .zr-checkbox__face {\n  outline: none;\n}\n\n.zr-checkbox--disabled .zr-checkbox__input:not(:checked) + .zr-checkbox__box .zr-checkbox__face {\n  border-color: var(--zl-color-text-disabled, #686883);\n}\n\n.zr-checkbox--disabled .zr-checkbox__input:checked + .zr-checkbox__box .zr-checkbox__face {\n  border-color: var(--zl-color-text-disabled, #686883);\n  background: var(--zl-color-text-disabled, #686883);\n}\n\n.zr-checkbox--disabled .zr-checkbox__label {\n  color: var(--zl-color-text-disabled, #686883);\n}\n";
+var checkbox_default = ".zr-checkbox-field {\n  align-items: flex-start;\n  gap: var(--zl-spacing-01, .25rem);\n  flex-direction: column;\n  display: inline-flex;\n}\n\n.zr-checkbox {\n  align-items: center;\n  gap: var(--zl-spacing-02, .5rem);\n  font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  cursor: pointer;\n  -webkit-user-select: none;\n  user-select: none;\n  line-height: 1.5;\n  display: inline-flex;\n}\n\n.zr-checkbox-field, .zr-checkbox, .zr-checkbox-field *, .zr-checkbox *, .zr-checkbox :before, .zr-checkbox :after {\n  box-sizing: border-box;\n}\n\n.zr-checkbox--disabled {\n  cursor: not-allowed;\n}\n\n.zr-checkbox__input {\n  opacity: 0;\n  pointer-events: none;\n  border: 0;\n  width: 1px;\n  height: 1px;\n  margin: 0;\n  padding: 0;\n  position: absolute;\n}\n\n.zr-checkbox__box {\n  flex-shrink: 0;\n  justify-content: center;\n  align-items: center;\n  width: 1rem;\n  height: 1rem;\n  display: inline-flex;\n  position: relative;\n}\n\n.zr-checkbox__box:before {\n  content: \"\";\n  background: var(--zl-color-surface-default-primary-gray, #252528);\n  opacity: 0;\n  pointer-events: none;\n  width: 2rem;\n  height: 2rem;\n  transition: opacity var(--zl-duration-fast, .12s)\n    var(--zl-easing-standard, cubic-bezier(.2, 0, 0, 1));\n  border-radius: 50%;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n\n.zr-checkbox__face {\n  z-index: 1;\n  border: 1px solid var(--zl-color-icon-default-white, #f4f4f6);\n  width: 1rem;\n  height: 1rem;\n  transition: border-color var(--zl-duration-fast, .12s) var(--zl-easing-standard, cubic-bezier(.2, 0, 0, 1)),\n    background-color var(--zl-duration-fast, .12s) var(--zl-easing-standard, cubic-bezier(.2, 0, 0, 1));\n  background: none;\n  border-radius: 2px;\n  justify-content: center;\n  align-items: center;\n  display: inline-flex;\n  position: relative;\n}\n\n.zr-checkbox__check {\n  color: var(--zl-color-surface-default-black, #0f0f11);\n  opacity: 0;\n  display: inline-flex;\n}\n\n.zr-checkbox__label {\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  font-size: .875rem;\n  font-weight: 400;\n  line-height: 1.25rem;\n}\n\n.zr-checkbox__input:checked + .zr-checkbox__box .zr-checkbox__face {\n  border-color: var(--zl-color-icon-default-white, #f4f4f6);\n  background: var(--zl-color-icon-default-white, #f4f4f6);\n}\n\n.zr-checkbox__input:checked + .zr-checkbox__box .zr-checkbox__check, .zr-checkbox:not(.zr-checkbox--disabled):hover .zr-checkbox__box:before, .zr-checkbox:not(.zr-checkbox--disabled):active .zr-checkbox__box:before, .zr-checkbox__input:focus-visible + .zr-checkbox__box:before, .zr-checkbox[data-state=\"hovered\"] .zr-checkbox__box:before, .zr-checkbox[data-state=\"focused\"] .zr-checkbox__box:before, .zr-checkbox[data-state=\"pressed\"] .zr-checkbox__box:before {\n  opacity: 1;\n}\n\n.zr-checkbox:not(.zr-checkbox--disabled):hover .zr-checkbox__input:not(:checked) + .zr-checkbox__box .zr-checkbox__face, .zr-checkbox[data-state=\"hovered\"] .zr-checkbox__input:not(:checked) + .zr-checkbox__box .zr-checkbox__face {\n  border-color: var(--zl-color-icon-default-gray, #bfbfcf);\n}\n\n.zr-checkbox:not(.zr-checkbox--disabled):hover .zr-checkbox__input:checked + .zr-checkbox__box .zr-checkbox__face, .zr-checkbox[data-state=\"hovered\"] .zr-checkbox__input:checked + .zr-checkbox__box .zr-checkbox__face {\n  border-color: var(--zl-color-icon-default-gray, #bfbfcf);\n  background: var(--zl-color-icon-default-gray, #bfbfcf);\n}\n\n.zr-checkbox__input:focus-visible:not(:checked) + .zr-checkbox__box .zr-checkbox__face, .zr-checkbox:not(.zr-checkbox--disabled):active .zr-checkbox__input:not(:checked) + .zr-checkbox__box .zr-checkbox__face, .zr-checkbox[data-state=\"focused\"] .zr-checkbox__input:not(:checked) + .zr-checkbox__box .zr-checkbox__face, .zr-checkbox[data-state=\"pressed\"] .zr-checkbox__input:not(:checked) + .zr-checkbox__box .zr-checkbox__face {\n  border-color: var(--zl-color-surface-default-white, #f4f4f6);\n}\n\n.zr-checkbox__input:focus-visible:checked + .zr-checkbox__box .zr-checkbox__face, .zr-checkbox:not(.zr-checkbox--disabled):active .zr-checkbox__input:checked + .zr-checkbox__box .zr-checkbox__face, .zr-checkbox[data-state=\"focused\"] .zr-checkbox__input:checked + .zr-checkbox__box .zr-checkbox__face, .zr-checkbox[data-state=\"pressed\"] .zr-checkbox__input:checked + .zr-checkbox__box .zr-checkbox__face {\n  border-color: var(--zl-color-surface-default-white, #f4f4f6);\n  background: var(--zl-color-surface-default-white, #f4f4f6);\n}\n\n.zr-checkbox__input:focus-visible + .zr-checkbox__box .zr-checkbox__face {\n  outline: none;\n}\n\n.zr-checkbox--disabled .zr-checkbox__input:not(:checked) + .zr-checkbox__box .zr-checkbox__face {\n  border-color: var(--zl-color-text-disabled, #686883);\n}\n\n.zr-checkbox--disabled .zr-checkbox__input:checked + .zr-checkbox__box .zr-checkbox__face {\n  border-color: var(--zl-color-text-disabled, #686883);\n  background: var(--zl-color-text-disabled, #686883);\n}\n\n.zr-checkbox--disabled .zr-checkbox__label {\n  color: var(--zl-color-text-disabled, #686883);\n}\n\n.zr-checkbox--invalid .zr-checkbox__input:not(:checked) + .zr-checkbox__box .zr-checkbox__face {\n  border-color: var(--zl-color-text-error, #ea4f70);\n}\n\n.zr-checkbox__error {\n  color: var(--zl-color-text-error, #ea4f70);\n  font-size: .75rem;\n  line-height: 1rem;\n}\n";
 //#endregion
 //#region src/internal/unique-id.ts
 /**
@@ -692,6 +694,20 @@ let ZlCheckbox = class ZlCheckbox extends LitElement {
 	set required(value) {
 		this.#_required_accessor_storage = value;
 	}
+	#_error_accessor_storage = "";
+	get error() {
+		return this.#_error_accessor_storage;
+	}
+	set error(value) {
+		this.#_error_accessor_storage = value;
+	}
+	#_invalid_accessor_storage = false;
+	get invalid() {
+		return this.#_invalid_accessor_storage;
+	}
+	set invalid(value) {
+		this.#_invalid_accessor_storage = value;
+	}
 	#_ariaLabelText_accessor_storage = void 0;
 	get ariaLabelText() {
 		return this.#_ariaLabelText_accessor_storage;
@@ -744,35 +760,64 @@ let ZlCheckbox = class ZlCheckbox extends LitElement {
 	focus(options) {
 		this.inputEl?.focus(options);
 	}
+	/**
+	* The string this control contributes to form submission — the uniform
+	* read/write contract `<zitadel-login>` uses to capture and restore field
+	* values without knowing each atom's internal shape. Like a native checkbox
+	* this is the value token only when checked, empty otherwise; assigning it
+	* back restores the checked state.
+	*/
+	get formValue() {
+		return this.checked ? this.value : "";
+	}
+	set formValue(value) {
+		this.checked = value !== "";
+	}
 	render() {
+		const errorId = `${this.inputId}-error`;
+		const showError = Boolean(this.error);
 		const rootClass = classMap({
 			"zr-checkbox": true,
+			"zr-checkbox--invalid": this.invalid || showError,
 			"zr-checkbox--disabled": this.disabled
 		});
 		const labelText = this.label;
 		return html`
-      <label class=${rootClass} part="root" data-state=${this.forcedState ?? nothing}>
-        <input
-          class="zr-checkbox__input"
-          part="input"
-          id=${this.inputId}
-          type="checkbox"
-          name=${this.name || nothing}
-          .checked=${live(this.checked)}
-          value=${this.value}
-          ?required=${this.required}
-          ?disabled=${this.disabled}
-          aria-label=${ifDefined(labelText ? void 0 : this.ariaLabelText)}
-          data-testid=${ifDefined(this.nativeInputTestId())}
-          @change=${this.handleChange}
-        />
-        <span class="zr-checkbox__box" part="box">
-          <span class="zr-checkbox__face" part="face">
-            <zl-icon class="zr-checkbox__check" part="check" name="check" size="16" decorative></zl-icon>
+      <div class="zr-checkbox-field" part="field">
+        <label class=${rootClass} part="root" data-state=${this.forcedState ?? nothing}>
+          <input
+            class="zr-checkbox__input"
+            part="input"
+            id=${this.inputId}
+            type="checkbox"
+            name=${this.name || nothing}
+            .checked=${live(this.checked)}
+            value=${this.value}
+            ?required=${this.required}
+            ?disabled=${this.disabled}
+            aria-label=${ifDefined(labelText ? void 0 : this.ariaLabelText)}
+            aria-invalid=${this.invalid || showError ? "true" : "false"}
+            aria-describedby=${showError ? errorId : nothing}
+            data-testid=${ifDefined(this.nativeInputTestId())}
+            @change=${this.handleChange}
+          />
+          <span class="zr-checkbox__box" part="box">
+            <span class="zr-checkbox__face" part="face">
+              <zl-icon class="zr-checkbox__check" part="check" name="check" size="16" decorative></zl-icon>
+            </span>
           </span>
-        </span>
-        ${labelText ? html`<span class="zr-checkbox__label" part="label">${labelText}</span>` : html`<slot></slot>`}
-      </label>
+          ${labelText ? html`<span class="zr-checkbox__label" part="label">${labelText}</span>` : html`<slot></slot>`}
+        </label>
+        <div
+          class="zr-checkbox__error"
+          part="error"
+          id=${errorId}
+          role="alert"
+          ?hidden=${!showError}
+        >
+          ${this.error}
+        </div>
+      </div>
     `;
 	}
 	handleChange = (event) => {
@@ -811,6 +856,11 @@ __decorate([property({
 	reflect: true
 })], ZlCheckbox.prototype, "disabled", null);
 __decorate([property({ type: Boolean })], ZlCheckbox.prototype, "required", null);
+__decorate([property()], ZlCheckbox.prototype, "error", null);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], ZlCheckbox.prototype, "invalid", null);
 __decorate([property({ attribute: "aria-label" })], ZlCheckbox.prototype, "ariaLabelText", null);
 __decorate([property({ attribute: "data-testid" })], ZlCheckbox.prototype, "testId", null);
 __decorate([property({ attribute: "data-state" })], ZlCheckbox.prototype, "forcedState", null);
@@ -825,26 +875,60 @@ const zlCheckboxManifest = {
 		"checked",
 		"disabled",
 		"required",
+		"error",
+		"invalid",
 		"aria-label",
 		"data-testid"
 	],
 	parts: [
+		"field",
 		"root",
 		"input",
 		"box",
 		"face",
 		"check",
-		"label"
+		"label",
+		"error"
 	],
 	slots: [""],
 	events: ["zl-change"]
 };
 //#endregion
 //#region ../shared-component-styles/src/lit/text-field-host.css?inline
-var text_field_host_default = ":host {\n  display: block;\n}\n\n::slotted([slot=\"prefix\"]), ::slotted([slot=\"suffix\"]) {\n  color: var(--zl-color-text-secondary-gray, #bfbfcf);\n  display: inline-flex;\n}\n\n.zr-field__help[hidden], .zr-field__error[hidden] {\n  display: none;\n}\n\n:host([data-state=\"hovered\"]:not([disabled])) .zr-field:not(.zr-field--invalid):not(.zr-field--success) .zr-field__wrap:not(:focus-within) {\n  border-color: var(--zl-color-gray-500, #9e9eb2);\n  background-color: color-mix(in srgb, var(--zl-color-text-primary-white, #f4f4f6) 10%, transparent);\n}\n\n:host([data-state=\"focused\"]:not([disabled])) .zr-field:not(.zr-field--invalid):not(.zr-field--success) .zr-field__wrap {\n  border-color: var(--zl-color-border-default-white, #f4f4f6);\n}\n\n:host([data-state=\"focused\"]:not([disabled])) .zr-field--invalid .zr-field__wrap {\n  border-color: var(--zl-color-border-error, #ea4f70);\n}\n\n:host([data-state=\"focused\"]:not([disabled])) .zr-field--success .zr-field__wrap {\n  border-color: var(--zl-color-border-success, #33a779);\n}\n";
+var text_field_host_default = ":host {\n  display: block;\n}\n\n::slotted([slot=\"prefix\"]), ::slotted([slot=\"suffix\"]) {\n  color: var(--zl-color-text-secondary-gray, #bfbfcf);\n  display: inline-flex;\n}\n\n.zr-field__help[hidden], .zr-field__error[hidden] {\n  display: none;\n}\n\n:host([data-state=\"hovered\"]:not([disabled])) .zr-field:not(.zr-field--invalid):not(.zr-field--success) .zr-field__wrap:not(:focus-within) {\n  border-color: var(--zl-color-border-hover, #9e9eb2);\n  background-color: color-mix(in srgb, var(--zl-color-text-primary-white, #f4f4f6) 10%, transparent);\n}\n\n:host([data-state=\"focused\"]:not([disabled])) .zr-field:not(.zr-field--invalid):not(.zr-field--success) .zr-field__wrap {\n  border-color: var(--zl-color-border-default-white, #f4f4f6);\n}\n\n:host([data-state=\"focused\"]:not([disabled])) .zr-field--invalid .zr-field__wrap {\n  border-color: var(--zl-color-border-error, #ea4f70);\n}\n\n:host([data-state=\"focused\"]:not([disabled])) .zr-field--success .zr-field__wrap {\n  border-color: var(--zl-color-border-success, #33a779);\n}\n";
 //#endregion
 //#region ../shared-component-styles/src/text-field.css?inline
-var text_field_default = ".zr-field {\n  align-items: stretch;\n  gap: var(--zl-spacing-02, .5rem);\n  font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n  flex-direction: column;\n  display: flex;\n}\n\n.zr-field__label-row {\n  justify-content: space-between;\n  align-items: flex-start;\n  gap: var(--zl-spacing-02, .5rem);\n  width: 100%;\n  display: flex;\n}\n\n.zr-field__label {\n  align-items: center;\n  gap: var(--zl-spacing-01, .25rem);\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  font-size: 1rem;\n  font-weight: 600;\n  line-height: 1.5rem;\n  display: inline-flex;\n}\n\n.zr-field__link {\n  color: var(--zl-color-icon-default-purple, #bba5e4);\n  flex-shrink: 0;\n  font-size: .875rem;\n  font-weight: 400;\n  line-height: 1.25rem;\n  text-decoration: none;\n}\n\n.zr-field__link:hover {\n  text-decoration: underline;\n}\n\n.zr-field__link:focus-visible {\n  outline: var(--zl-focus-width, 2px) solid var(--zl-focus-color, #f4f4f6);\n  outline-offset: var(--zl-focus-offset, 2px);\n  border-radius: 2px;\n}\n\n.zr-field__required {\n  color: var(--zl-color-text-error, #ea4f70);\n}\n\n.zr-field--disabled .zr-field__label {\n  color: var(--zl-color-text-disabled, #686883);\n}\n\n.zr-field__wrap {\n  align-items: center;\n  gap: var(--zl-spacing-02, .5rem);\n  padding-block: var(--zl-spacing-02, .5rem);\n  padding-inline: var(--zl-spacing-03, 1rem);\n  border-radius: var(--zl-radius-xs, .25rem);\n  border: 1px solid var(--zl-color-border-default-gray-300, #686883);\n  height: 2.5rem;\n  transition: border-color var(--zl-duration-fast, .12s) var(--zl-easing-standard, cubic-bezier(.2, 0, 0, 1)),\n    background-color var(--zl-duration-fast, .12s) var(--zl-easing-standard, cubic-bezier(.2, 0, 0, 1));\n  box-sizing: border-box;\n  background: none;\n  display: flex;\n  position: relative;\n  overflow: visible;\n}\n\n.zr-field__wrap--trailing {\n  padding-inline-end: 2.5rem;\n}\n\n.zr-field:not(.zr-field--disabled) .zr-field__wrap:hover:not(:focus-within) {\n  border-color: var(--zl-color-gray-500, #9e9eb2);\n  background-color: color-mix(in srgb, var(--zl-color-text-primary-white, #f4f4f6) 10%, transparent);\n}\n\n.zr-field:not(.zr-field--invalid):not(.zr-field--disabled):not(.zr-field--success) .zr-field__wrap:has(.zr-field__input:not(:placeholder-shown)):not(:focus-within) {\n  border-color: var(--zl-color-border-default-gray-400, #82829c);\n}\n\n.zr-field:not(.zr-field--invalid):not(.zr-field--disabled):not(.zr-field--success) .zr-field__wrap:focus-within {\n  border-color: var(--zl-color-border-default-white, #f4f4f6);\n  outline: none;\n}\n\n.zr-field--invalid .zr-field__wrap {\n  border-color: var(--zl-color-border-error, #ea4f70);\n}\n\n.zr-field--invalid .zr-field__wrap:focus-within {\n  border-color: var(--zl-color-border-error, #ea4f70);\n  outline: none;\n}\n\n.zr-field--success .zr-field__wrap {\n  border-color: var(--zl-color-border-success, #33a779);\n}\n\n.zr-field--success .zr-field__wrap:focus-within {\n  border-color: var(--zl-color-border-success, #33a779);\n  outline: none;\n}\n\n.zr-field--disabled .zr-field__wrap {\n  border-color: var(--zl-color-border-default-gray-200, #484a57);\n}\n\n.zr-field__input {\n  min-width: 0;\n  height: 100%;\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  background: none;\n  border: 0;\n  outline: none;\n  flex: auto;\n  padding: 0;\n  font-family: inherit;\n  font-size: .875rem;\n  font-weight: 400;\n  line-height: 1.25rem;\n}\n\n.zr-field__input[type=\"password\"] {\n  letter-spacing: .125rem;\n}\n\n.zr-field__input::placeholder {\n  color: var(--zl-color-text-secondary-gray, #bfbfcf);\n}\n\n.zr-field__input:focus, .zr-field__input:focus-visible {\n  outline: none;\n}\n\n.zr-field__input:disabled {\n  cursor: not-allowed;\n  color: var(--zl-color-text-disabled, #686883);\n}\n\n.zr-field--disabled .zr-field__wrap:hover {\n  border-color: var(--zl-color-border-default-gray-200, #484a57);\n  background-color: #0000;\n}\n\n.zr-field__trailing {\n  width: 1rem;\n  height: 1rem;\n  color: var(--zl-color-text-secondary-gray, #bfbfcf);\n  justify-content: center;\n  align-items: center;\n  display: inline-flex;\n  position: absolute;\n  top: 50%;\n  right: .9375rem;\n  transform: translateY(-50%);\n}\n\n.zr-field__trailing-action {\n  color: inherit;\n  cursor: pointer;\n  background: none;\n  border: 0;\n  justify-content: center;\n  align-items: center;\n  margin: 0;\n  padding: 0;\n  line-height: 0;\n  display: inline-flex;\n}\n\n.zr-field__trailing-action:focus-visible {\n  outline: var(--zl-focus-width, 2px) solid var(--zl-focus-color, #f4f4f6);\n  outline-offset: var(--zl-focus-offset, 2px);\n  border-radius: 2px;\n}\n\n.zr-field__trailing-action:disabled {\n  cursor: not-allowed;\n}\n\n.zr-field--invalid .zr-field__trailing {\n  color: var(--zl-color-text-error, #ea4f70);\n}\n\n.zr-field--success .zr-field__trailing {\n  color: var(--zl-color-text-success, #33a779);\n}\n\n.zr-field__help {\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  font-size: .75rem;\n  line-height: 1rem;\n}\n\n.zr-field__success {\n  color: var(--zl-color-text-success, #33a779);\n  font-size: .75rem;\n  line-height: 1rem;\n}\n\n.zr-field__error {\n  color: var(--zl-color-text-error, #ea4f70);\n  font-size: .75rem;\n  line-height: 1rem;\n}\n";
+var text_field_default = ".zr-field {\n  align-items: stretch;\n  gap: var(--zl-spacing-02, .5rem);\n  font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n  flex-direction: column;\n  display: flex;\n}\n\n.zr-field__label-row {\n  justify-content: space-between;\n  align-items: flex-start;\n  gap: var(--zl-spacing-02, .5rem);\n  width: 100%;\n  display: flex;\n}\n\n.zr-field__label {\n  align-items: center;\n  gap: var(--zl-spacing-01, .25rem);\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  font-size: 1rem;\n  font-weight: 600;\n  line-height: 1.5rem;\n  display: inline-flex;\n}\n\n.zr-field__link {\n  color: var(--zl-color-icon-default-purple, #bba5e4);\n  flex-shrink: 0;\n  font-size: .875rem;\n  font-weight: 400;\n  line-height: 1.25rem;\n  text-decoration: none;\n}\n\n.zr-field__link:hover {\n  text-decoration: underline;\n}\n\n.zr-field__link:focus-visible {\n  outline: var(--zl-focus-width, 2px) solid var(--zl-focus-color, #f4f4f6);\n  outline-offset: var(--zl-focus-offset, 2px);\n  border-radius: 2px;\n}\n\n.zr-field__required {\n  color: var(--zl-color-text-error, #ea4f70);\n}\n\n.zr-field--disabled .zr-field__label {\n  color: var(--zl-color-text-disabled, #686883);\n}\n\n.zr-field__wrap {\n  align-items: center;\n  gap: var(--zl-spacing-02, .5rem);\n  padding-block: var(--zl-spacing-02, .5rem);\n  padding-inline: var(--zl-spacing-03, 1rem);\n  border-radius: var(--zl-radius-xs, .25rem);\n  border: 1px solid var(--zl-color-border-default-gray-300, #686883);\n  height: 2.5rem;\n  transition: border-color var(--zl-duration-fast, .12s) var(--zl-easing-standard, cubic-bezier(.2, 0, 0, 1)),\n    background-color var(--zl-duration-fast, .12s) var(--zl-easing-standard, cubic-bezier(.2, 0, 0, 1));\n  box-sizing: border-box;\n  background: none;\n  display: flex;\n  position: relative;\n  overflow: visible;\n}\n\n.zr-field__wrap--trailing {\n  padding-inline-end: 2.5rem;\n}\n\n.zr-field:not(.zr-field--disabled) .zr-field__wrap:hover:not(:focus-within) {\n  border-color: var(--zl-color-border-hover, #9e9eb2);\n  background-color: color-mix(in srgb, var(--zl-color-text-primary-white, #f4f4f6) 10%, transparent);\n}\n\n.zr-field:not(.zr-field--invalid):not(.zr-field--disabled):not(.zr-field--success) .zr-field__wrap:has(.zr-field__input:not(:placeholder-shown)):not(:focus-within) {\n  border-color: var(--zl-color-border-default-gray-400, #82829c);\n}\n\n.zr-field:not(.zr-field--invalid):not(.zr-field--disabled):not(.zr-field--success) .zr-field__wrap:focus-within {\n  border-color: var(--zl-color-border-default-white, #f4f4f6);\n  outline: none;\n}\n\n.zr-field--invalid .zr-field__wrap {\n  border-color: var(--zl-color-border-error, #ea4f70);\n}\n\n.zr-field--invalid .zr-field__wrap:focus-within {\n  border-color: var(--zl-color-border-error, #ea4f70);\n  outline: none;\n}\n\n.zr-field--success .zr-field__wrap {\n  border-color: var(--zl-color-border-success, #33a779);\n}\n\n.zr-field--success .zr-field__wrap:focus-within {\n  border-color: var(--zl-color-border-success, #33a779);\n  outline: none;\n}\n\n.zr-field--disabled .zr-field__wrap {\n  border-color: var(--zl-color-border-default-gray-200, #484a57);\n}\n\n.zr-field__input {\n  min-width: 0;\n  height: 100%;\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  background: none;\n  border: 0;\n  outline: none;\n  flex: auto;\n  padding: 0;\n  font-family: inherit;\n  font-size: .875rem;\n  font-weight: 400;\n  line-height: 1.25rem;\n}\n\n.zr-field__input[type=\"password\"] {\n  letter-spacing: .125rem;\n}\n\n.zr-field__input::placeholder {\n  color: var(--zl-color-text-secondary-gray, #bfbfcf);\n}\n\n.zr-field__input:focus, .zr-field__input:focus-visible {\n  outline: none;\n}\n\n.zr-field__input:disabled {\n  cursor: not-allowed;\n  color: var(--zl-color-text-disabled, #686883);\n}\n\n.zr-field--disabled .zr-field__wrap:hover {\n  border-color: var(--zl-color-border-default-gray-200, #484a57);\n  background-color: #0000;\n}\n\n.zr-field__trailing {\n  width: 1rem;\n  height: 1rem;\n  color: var(--zl-color-text-secondary-gray, #bfbfcf);\n  justify-content: center;\n  align-items: center;\n  display: inline-flex;\n  position: absolute;\n  top: 50%;\n  right: .9375rem;\n  transform: translateY(-50%);\n}\n\n.zr-field__trailing-action {\n  color: inherit;\n  cursor: pointer;\n  background: none;\n  border: 0;\n  justify-content: center;\n  align-items: center;\n  margin: 0;\n  padding: 0;\n  line-height: 0;\n  display: inline-flex;\n}\n\n.zr-field__trailing-action:focus-visible {\n  outline: var(--zl-focus-width, 2px) solid var(--zl-focus-color, #f4f4f6);\n  outline-offset: var(--zl-focus-offset, 2px);\n  border-radius: 2px;\n}\n\n.zr-field__trailing-action:disabled {\n  cursor: not-allowed;\n}\n\n.zr-field--invalid .zr-field__trailing {\n  color: var(--zl-color-text-error, #ea4f70);\n}\n\n.zr-field--success .zr-field__trailing {\n  color: var(--zl-color-text-success, #33a779);\n}\n\n.zr-field__help {\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  font-size: .75rem;\n  line-height: 1rem;\n}\n\n.zr-field__success {\n  color: var(--zl-color-text-success, #33a779);\n  font-size: .75rem;\n  line-height: 1rem;\n}\n\n.zr-field__error {\n  color: var(--zl-color-text-error, #ea4f70);\n  font-size: .75rem;\n  line-height: 1rem;\n}\n";
+//#endregion
+//#region src/internal/hook-name.ts
+/**
+* Reserved auth-method credential prefix of flow field names. Mirrors
+* `AUTH_METHOD_PREFIX` in `@zitadel/config` (`src/validate.ts`), which
+* owns the wire dialect; components has no dependency on that package,
+* so the literal is repeated here.
+*/
+const AUTH_METHOD_PREFIX = "x-auth-methods#";
+/**
+* Normalises a flow field name into its automation-hook token.
+*
+* Auth-method credential fields arrive from the flow engine as
+* `x-auth-methods#<method>` (e.g. `x-auth-methods#password`), but the
+* documented `data-testid` hooks are method-named
+* (`zitadel-field-password`, `zitadel-input-password` — see
+* packages/components/README.md and apps/cli/SKILLS.md). This helper
+* feeds both hook construction sites: the bundled template's `testid`
+* Liquid filter and `<zl-field>`'s native-input testid.
+*
+* Only the reserved credential prefix is stripped — user-schema
+* property names are tenant-authored arbitrary strings, so a `#`
+* anywhere else is part of the name and stays in the hook. The
+* after-prefix token is used verbatim (no case or spacing changes),
+* and the field's `name` attribute always keeps the raw wire/form key.
+*/
+function hookName(field) {
+	if (field.startsWith(AUTH_METHOD_PREFIX) && field.length > 15) return field.slice(15);
+	return field;
+}
 //#endregion
 //#region src/atoms/zl-field.ts
 let ZlField = class ZlField extends LitElement {
@@ -1014,6 +1098,23 @@ let ZlField = class ZlField extends LitElement {
 	focus(options) {
 		this.inputEl?.focus(options);
 	}
+	/**
+	* The string this control contributes to form submission — the uniform
+	* read/write contract `<zitadel-login>` uses to capture and restore field
+	* values without knowing each atom's internal shape. The getter reads the
+	* live `<input>` so browser/password-manager autofill that writes the native
+	* control directly (bypassing the `value` property and its `input` event) is
+	* still captured.
+	*/
+	get formValue() {
+		const native = this.inputEl ?? this.shadowRoot?.querySelector("input");
+		return native ? native.value : this.value;
+	}
+	set formValue(value) {
+		this.value = value;
+		const native = this.inputEl ?? this.shadowRoot?.querySelector("input");
+		if (native && native.value !== value) native.value = value;
+	}
 	render() {
 		const labelId = `${this.inputId}-label`;
 		const errorId = `${this.inputId}-error`;
@@ -1185,7 +1286,7 @@ let ZlField = class ZlField extends LitElement {
 		}
 	};
 	nativeInputTestId() {
-		if (this.name) return `zitadel-input-${this.name}`;
+		if (this.name) return `zitadel-input-${hookName(this.name)}`;
 		if (this.testId) return `${this.testId}-input`;
 	}
 	dispatchNativeInput(source) {
@@ -1283,10 +1384,10 @@ const zlFieldManifest = {
 };
 //#endregion
 //#region ../shared-component-styles/src/lit/page-shell-host.css?inline
-var page_shell_host_default = ":host {\n  background: var(--zl-color-surface-default-black, #0f0f11);\n  min-height: 100vh;\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  display: block;\n}\n\n:host([data-embedded]) {\n  height: 100%;\n  min-height: 100%;\n}\n\n:host([data-embedded]) .zr-page-shell {\n  min-height: 100%;\n}\n\n.zr-page-shell ::slotted([slot=\"header\"]), .zr-page-shell ::slotted([slot=\"footer\"]) {\n  margin: 0;\n}\n";
+var page_shell_host_default = ":host {\n  min-height: var(--zl-page-min-height, 100vh);\n  background: var(--zl-color-surface-default-black, #0f0f11);\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  display: block;\n}\n\n:host([data-embedded]) {\n  height: 100%;\n  min-height: 100%;\n}\n\n:host([data-embedded]) .zr-page-shell {\n  min-height: 100%;\n}\n\n:host([data-widget]) {\n  background: none;\n  min-height: auto;\n}\n\n:host([data-widget]) .zr-page-shell {\n  min-height: var(--zl-page-min-height, auto);\n  background: none;\n  padding: 0;\n}\n\n.zr-page-shell ::slotted([slot=\"header\"]), .zr-page-shell ::slotted([slot=\"footer\"]) {\n  margin: 0;\n}\n";
 //#endregion
 //#region ../shared-component-styles/src/page-shell.css?inline
-var page_shell_default = ".zr-page-shell {\n  background: var(--zl-color-surface-default-black, #0f0f11);\n  min-height: 100vh;\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n  justify-content: center;\n  align-items: center;\n  gap: var(--zl-spacing-04, 1.5rem);\n  padding-block: var(--zl-spacing-05, 2rem);\n  padding-inline: var(--zl-spacing-03, 1rem);\n  box-sizing: border-box;\n  flex-direction: column;\n  line-height: 1.5;\n  display: flex;\n}\n\n@media (width >= 48rem) {\n  .zr-page-shell {\n    padding-block: 3.25rem;\n    padding-inline: var(--zl-spacing-03, 1rem);\n  }\n}\n\n.zr-page-shell__header, .zr-page-shell__main, .zr-page-shell__footer {\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  display: flex;\n}\n\n.zr-page-shell__main {\n  flex: none;\n}\n\n.zr-page-shell__footer {\n  min-height: 1.5rem;\n}\n\n.zr-page-shell__region--empty {\n  display: none;\n}\n\n.zr-page-shell[data-embedded] {\n  height: 100%;\n  min-height: 100%;\n}\n";
+var page_shell_default = ".zr-page-shell {\n  min-height: var(--zl-page-min-height, 100vh);\n  background: var(--zl-color-surface-default-black, #0f0f11);\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n  justify-content: center;\n  align-items: center;\n  gap: var(--zl-spacing-04, 1.5rem);\n  padding-block: var(--zl-spacing-05, 2rem);\n  padding-inline: var(--zl-spacing-03, 1rem);\n  box-sizing: border-box;\n  flex-direction: column;\n  line-height: 1.5;\n  display: flex;\n}\n\n@media (width >= 48rem) {\n  .zr-page-shell {\n    padding-block: 3.25rem;\n    padding-inline: var(--zl-spacing-03, 1rem);\n  }\n}\n\n.zr-page-shell__header, .zr-page-shell__main, .zr-page-shell__footer {\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  display: flex;\n}\n\n.zr-page-shell__main {\n  flex: none;\n}\n\n.zr-page-shell__footer {\n  min-height: 1.5rem;\n}\n\n.zr-page-shell__region--empty {\n  display: none;\n}\n\n.zr-page-shell[data-embedded] {\n  height: 100%;\n  min-height: 100%;\n}\n\n.zr-page-shell[data-widget] {\n  min-height: var(--zl-page-min-height, auto);\n  background: none;\n  padding: 0;\n}\n";
 //#endregion
 //#region src/atoms/zl-page-shell.ts
 let ZlPageShell = class ZlPageShell extends LitElement {
@@ -1708,7 +1809,7 @@ const zlPasskeyManifest = {
 var pill_host_default = ":host {\n  display: inline-flex;\n}\n\n::slotted(.zr-pill__logotype) {\n  flex-shrink: 0;\n  width: 65px;\n  height: 16px;\n  margin-top: 2px;\n  line-height: 0;\n  display: block;\n}\n\n::slotted(.zr-pill__logotype-svg) {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n";
 //#endregion
 //#region ../shared-component-styles/src/pill.css?inline
-var pill_default = ".zr-pill {\n  box-sizing: border-box;\n  justify-content: center;\n  align-items: flex-start;\n  gap: var(--zl-spacing-02, .5rem);\n  height: 2.5rem;\n  padding-inline: var(--zl-spacing-03, 1rem);\n  font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n  letter-spacing: 0;\n  text-transform: none;\n  background: linear-gradient(182deg, #484a5799 28.65%, #0f0f1199 81.82%),\n    var(--zl-color-surface-default-primary-gray, #252528);\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  border: 1px solid var(--zl-color-border-default-gray-200, #484a57);\n  white-space: nowrap;\n  border-radius: 100px;\n  padding-block: calc(.625rem - 1px);\n  font-size: .875rem;\n  font-weight: 400;\n  line-height: 1.25rem;\n  text-decoration: none;\n  display: inline-flex;\n}\n\n.zr-pill__logotype {\n  flex-shrink: 0;\n  width: 65px;\n  height: 16px;\n  margin-top: 2px;\n  line-height: 0;\n  display: block;\n}\n\n.zr-pill__logotype-svg {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n\n.zr-pill--pink {\n  color: var(--zl-color-text-subtitle-pink);\n  border-color: var(--zl-color-text-subtitle-pink);\n  background: color-mix(in srgb, var(--zl-color-text-subtitle-pink) 10%, var(--zl-color-surface-default-primary-gray));\n}\n\n.zr-pill--purple {\n  color: var(--zl-color-text-subtitle-purple);\n  border-color: var(--zl-color-text-subtitle-purple);\n  background: color-mix(in srgb, var(--zl-color-text-subtitle-purple) 10%, var(--zl-color-surface-default-primary-gray));\n}\n\n.zr-pill--orange {\n  color: var(--zl-color-text-subtitle-orange);\n  border-color: var(--zl-color-text-subtitle-orange);\n  background: color-mix(in srgb, var(--zl-color-text-subtitle-orange) 10%, var(--zl-color-surface-default-primary-gray));\n}\n\n.zr-pill--success {\n  color: var(--zl-color-text-success);\n  border-color: var(--zl-color-text-success);\n  background: color-mix(in srgb, var(--zl-color-text-success) 10%, var(--zl-color-surface-default-primary-gray));\n}\n\na.zr-pill:focus-visible {\n  outline: var(--zl-focus-width, 2px) solid var(--zl-focus-color, #f4f4f6);\n  outline-offset: var(--zl-focus-offset, 2px);\n}\n";
+var pill_default = ".zr-pill {\n  box-sizing: border-box;\n  justify-content: center;\n  align-items: flex-start;\n  gap: var(--zl-spacing-02, .5rem);\n  height: 2.5rem;\n  padding-inline: var(--zl-spacing-03, 1rem);\n  font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n  letter-spacing: 0;\n  text-transform: none;\n  background: linear-gradient(182deg,\n      color-mix(in srgb, var(--zl-gradient-neutral-start, #484a57) 60%, transparent) 28.65%,\n      color-mix(in srgb, var(--zl-gradient-base-end, #0f0f11) 60%, transparent) 81.82%),\n    var(--zl-color-surface-default-primary-gray, #252528);\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  border: 1px solid var(--zl-color-border-default-gray-200, #484a57);\n  white-space: nowrap;\n  border-radius: 100px;\n  padding-block: calc(.625rem - 1px);\n  font-size: .875rem;\n  font-weight: 400;\n  line-height: 1.25rem;\n  text-decoration: none;\n  display: inline-flex;\n}\n\n.zr-pill__logotype {\n  flex-shrink: 0;\n  width: 65px;\n  height: 16px;\n  margin-top: 2px;\n  line-height: 0;\n  display: block;\n}\n\n.zr-pill__logotype-svg {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n\n.zr-pill--pink {\n  color: var(--zl-color-text-subtitle-pink);\n  border-color: var(--zl-color-text-subtitle-pink);\n  background: color-mix(in srgb, var(--zl-color-text-subtitle-pink) 10%, var(--zl-color-surface-default-primary-gray));\n}\n\n.zr-pill--purple {\n  color: var(--zl-color-text-subtitle-purple);\n  border-color: var(--zl-color-text-subtitle-purple);\n  background: color-mix(in srgb, var(--zl-color-text-subtitle-purple) 10%, var(--zl-color-surface-default-primary-gray));\n}\n\n.zr-pill--orange {\n  color: var(--zl-color-text-subtitle-orange);\n  border-color: var(--zl-color-text-subtitle-orange);\n  background: color-mix(in srgb, var(--zl-color-text-subtitle-orange) 10%, var(--zl-color-surface-default-primary-gray));\n}\n\n.zr-pill--success {\n  color: var(--zl-color-text-success);\n  border-color: var(--zl-color-text-success);\n  background: color-mix(in srgb, var(--zl-color-text-success) 10%, var(--zl-color-surface-default-primary-gray));\n}\n\na.zr-pill:focus-visible {\n  outline: var(--zl-focus-width, 2px) solid var(--zl-focus-color, #f4f4f6);\n  outline-offset: var(--zl-focus-offset, 2px);\n}\n";
 //#endregion
 //#region src/atoms/zl-pill.ts
 let ZlPill = class ZlPill extends LitElement {
@@ -1769,7 +1870,7 @@ const zlPillManifest = {
 var select_host_default = ":host {\n  display: block;\n}\n\n:host([disabled]) {\n  cursor: not-allowed;\n}\n";
 //#endregion
 //#region ../shared-component-styles/src/select.css?inline
-var select_default = ".zr-select {\n  align-items: stretch;\n  gap: var(--zl-spacing-02, .5rem);\n  font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  flex-direction: column;\n  line-height: 1.5;\n  display: flex;\n}\n\n.zr-select, .zr-select *, .zr-select :before, .zr-select :after {\n  box-sizing: border-box;\n}\n\n.zr-select__label {\n  align-items: center;\n  gap: var(--zl-spacing-01, .25rem);\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  font-size: 1rem;\n  font-weight: 600;\n  line-height: 1.5rem;\n  display: inline-flex;\n}\n\n.zr-select__required {\n  color: var(--zl-color-text-error, #ea4f70);\n}\n\n.zr-select--disabled .zr-select__label {\n  color: var(--zl-color-text-disabled, #686883);\n}\n\n.zr-select__field {\n  position: relative;\n}\n\n.zr-select__trigger {\n  align-items: center;\n  gap: var(--zl-spacing-02, .5rem);\n  width: 100%;\n  height: 2.5rem;\n  padding-block: var(--zl-spacing-02, .5rem);\n  padding-inline: var(--zl-spacing-03, 1rem);\n  border-radius: var(--zl-radius-xs, .25rem);\n  border: 1px solid var(--zl-color-border-default-gray-300, #686883);\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  text-align: start;\n  cursor: pointer;\n  transition: border-color var(--zl-duration-fast, .12s) var(--zl-easing-standard, cubic-bezier(.2, 0, 0, 1)),\n    background-color var(--zl-duration-fast, .12s) var(--zl-easing-standard, cubic-bezier(.2, 0, 0, 1));\n  background: none;\n  margin: 0;\n  font-family: inherit;\n  font-size: .875rem;\n  font-weight: 400;\n  line-height: 1.25rem;\n  display: flex;\n}\n\n.zr-select__value {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  min-width: 0;\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  flex: auto;\n  overflow: hidden;\n}\n\n.zr-select__value--placeholder {\n  color: var(--zl-color-text-secondary-gray, #bfbfcf);\n}\n\n.zr-select__icon {\n  color: var(--zl-color-text-secondary-gray, #bfbfcf);\n  transition: transform var(--zl-duration-fast, .12s)\n    var(--zl-easing-standard, cubic-bezier(.2, 0, 0, 1));\n  flex-shrink: 0;\n  display: inline-flex;\n}\n\n.zr-select--open .zr-select__icon {\n  transform: rotate(180deg);\n}\n\n.zr-select:not(.zr-select--disabled):not(.zr-select--open) .zr-select__trigger:hover {\n  border-color: var(--zl-color-gray-500, #9e9eb2);\n  background-color: color-mix(in srgb, var(--zl-color-text-primary-white, #f4f4f6) 10%, transparent);\n}\n\n.zr-select:not(.zr-select--disabled) .zr-select__trigger:focus-visible, .zr-select--open .zr-select__trigger {\n  border-color: var(--zl-color-border-default-white, #f4f4f6);\n  outline: none;\n}\n\n.zr-select--disabled .zr-select__trigger {\n  border-color: var(--zl-color-border-default-gray-200, #484a57);\n  color: var(--zl-color-text-disabled, #686883);\n  cursor: not-allowed;\n}\n\n.zr-select--disabled .zr-select__value--placeholder {\n  color: var(--zl-color-text-disabled, #686883);\n}\n\n.zr-select__listbox {\n  top: calc(100% + var(--zl-spacing-02, .5rem));\n  z-index: 20;\n  border-radius: var(--zl-radius-xs, .25rem);\n  border: 1px solid var(--zl-color-border-default-gray-200, #484a57);\n  background: var(--zl-color-surface-default-black, #0f0f11);\n  max-height: 15rem;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  position: absolute;\n  left: 0;\n  right: 0;\n  overflow-y: auto;\n}\n\n.zr-select__listbox[hidden] {\n  display: none;\n}\n\n.zr-select__option {\n  align-items: center;\n  gap: var(--zl-spacing-02, .5rem);\n  height: 2.5rem;\n  padding-block: var(--zl-spacing-02, .5rem);\n  padding-inline: var(--zl-spacing-03, 1rem);\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  cursor: pointer;\n  font-size: .875rem;\n  line-height: 1.25rem;\n  display: flex;\n}\n\n.zr-select__option-label {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  flex: auto;\n  min-width: 0;\n  overflow: hidden;\n}\n\n.zr-select__option-check {\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  opacity: 0;\n  flex-shrink: 0;\n  display: inline-flex;\n}\n\n.zr-select__option:not([aria-disabled=\"true\"]):hover, .zr-select__option[data-active=\"true\"]:not([aria-disabled=\"true\"]) {\n  background-color: color-mix(in srgb, var(--zl-color-text-primary-white, #f4f4f6) 10%, transparent);\n}\n\n.zr-select__option[aria-selected=\"true\"] {\n  background-color: var(--zl-color-surface-default-primary-gray, #252528);\n}\n\n.zr-select__option[aria-selected=\"true\"] .zr-select__option-check {\n  opacity: 1;\n}\n\n.zr-select__option[aria-disabled=\"true\"] {\n  color: var(--zl-color-text-disabled, #686883);\n  cursor: not-allowed;\n}\n";
+var select_default = ".zr-select {\n  align-items: stretch;\n  gap: var(--zl-spacing-02, .5rem);\n  font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  flex-direction: column;\n  line-height: 1.5;\n  display: flex;\n}\n\n.zr-select, .zr-select *, .zr-select :before, .zr-select :after {\n  box-sizing: border-box;\n}\n\n.zr-select__label {\n  align-items: center;\n  gap: var(--zl-spacing-01, .25rem);\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  font-size: 1rem;\n  font-weight: 600;\n  line-height: 1.5rem;\n  display: inline-flex;\n}\n\n.zr-select__required {\n  color: var(--zl-color-text-error, #ea4f70);\n}\n\n.zr-select--disabled .zr-select__label {\n  color: var(--zl-color-text-disabled, #686883);\n}\n\n.zr-select__field {\n  position: relative;\n}\n\n.zr-select__native {\n  opacity: 0;\n  pointer-events: none;\n  -webkit-appearance: none;\n  appearance: none;\n  border: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  position: absolute;\n  inset: 0;\n}\n\n.zr-select__trigger {\n  align-items: center;\n  gap: var(--zl-spacing-02, .5rem);\n  width: 100%;\n  height: 2.5rem;\n  padding-block: var(--zl-spacing-02, .5rem);\n  padding-inline: var(--zl-spacing-03, 1rem);\n  border-radius: var(--zl-radius-xs, .25rem);\n  border: 1px solid var(--zl-color-border-default-gray-300, #686883);\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  text-align: start;\n  cursor: pointer;\n  transition: border-color var(--zl-duration-fast, .12s) var(--zl-easing-standard, cubic-bezier(.2, 0, 0, 1)),\n    background-color var(--zl-duration-fast, .12s) var(--zl-easing-standard, cubic-bezier(.2, 0, 0, 1));\n  background: none;\n  margin: 0;\n  font-family: inherit;\n  font-size: .875rem;\n  font-weight: 400;\n  line-height: 1.25rem;\n  display: flex;\n}\n\n.zr-select__value {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  min-width: 0;\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  flex: auto;\n  overflow: hidden;\n}\n\n.zr-select__value--placeholder {\n  color: var(--zl-color-text-secondary-gray, #bfbfcf);\n}\n\n.zr-select__icon {\n  color: var(--zl-color-text-secondary-gray, #bfbfcf);\n  transition: transform var(--zl-duration-fast, .12s)\n    var(--zl-easing-standard, cubic-bezier(.2, 0, 0, 1));\n  flex-shrink: 0;\n  display: inline-flex;\n}\n\n.zr-select--open .zr-select__icon {\n  transform: rotate(180deg);\n}\n\n.zr-select:not(.zr-select--disabled):not(.zr-select--open) .zr-select__trigger:hover {\n  border-color: var(--zl-color-border-hover, #9e9eb2);\n  background-color: color-mix(in srgb, var(--zl-color-text-primary-white, #f4f4f6) 10%, transparent);\n}\n\n.zr-select:not(.zr-select--disabled) .zr-select__field:focus-within .zr-select__trigger, .zr-select--open .zr-select__trigger {\n  border-color: var(--zl-color-border-default-white, #f4f4f6);\n  outline: none;\n}\n\n.zr-select--disabled .zr-select__trigger {\n  border-color: var(--zl-color-border-default-gray-200, #484a57);\n  color: var(--zl-color-text-disabled, #686883);\n  cursor: not-allowed;\n}\n\n.zr-select--disabled .zr-select__value--placeholder {\n  color: var(--zl-color-text-disabled, #686883);\n}\n\n.zr-select--invalid .zr-select__trigger, .zr-select--invalid .zr-select__field:focus-within .zr-select__trigger {\n  border-color: var(--zl-color-text-error, #ea4f70);\n}\n\n.zr-select__error {\n  color: var(--zl-color-text-error, #ea4f70);\n  font-size: .75rem;\n  line-height: 1rem;\n}\n\n.zr-select__listbox {\n  top: calc(100% + var(--zl-spacing-02, .5rem));\n  z-index: 20;\n  border-radius: var(--zl-radius-xs, .25rem);\n  border: 1px solid var(--zl-color-border-default-gray-200, #484a57);\n  background: var(--zl-color-surface-default-black, #0f0f11);\n  max-height: 15rem;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  position: absolute;\n  left: 0;\n  right: 0;\n  overflow-y: auto;\n}\n\n.zr-select__listbox[hidden] {\n  display: none;\n}\n\n.zr-select__option {\n  align-items: center;\n  gap: var(--zl-spacing-02, .5rem);\n  height: 2.5rem;\n  padding-block: var(--zl-spacing-02, .5rem);\n  padding-inline: var(--zl-spacing-03, 1rem);\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  cursor: pointer;\n  font-size: .875rem;\n  line-height: 1.25rem;\n  display: flex;\n}\n\n.zr-select__option-label {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  flex: auto;\n  min-width: 0;\n  overflow: hidden;\n}\n\n.zr-select__option-check {\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  opacity: 0;\n  flex-shrink: 0;\n  display: inline-flex;\n}\n\n.zr-select__option:not([data-disabled]):hover, .zr-select__option[data-active]:not([data-disabled]) {\n  background-color: color-mix(in srgb, var(--zl-color-text-primary-white, #f4f4f6) 10%, transparent);\n}\n\n.zr-select__option[data-selected] {\n  background-color: var(--zl-color-surface-default-primary-gray, #252528);\n}\n\n.zr-select__option[data-selected] .zr-select__option-check {\n  opacity: 1;\n}\n\n.zr-select__option[data-disabled] {\n  color: var(--zl-color-text-disabled, #686883);\n  cursor: not-allowed;\n}\n";
 //#endregion
 //#region src/atoms/zl-select.ts
 let ZlSelect = class ZlSelect extends LitElement {
@@ -1825,6 +1926,20 @@ let ZlSelect = class ZlSelect extends LitElement {
 	set required(value) {
 		this.#_required_accessor_storage = value;
 	}
+	#_error_accessor_storage = "";
+	get error() {
+		return this.#_error_accessor_storage;
+	}
+	set error(value) {
+		this.#_error_accessor_storage = value;
+	}
+	#_invalid_accessor_storage = false;
+	get invalid() {
+		return this.#_invalid_accessor_storage;
+	}
+	set invalid(value) {
+		this.#_invalid_accessor_storage = value;
+	}
 	#_disabled_accessor_storage = false;
 	get disabled() {
 		return this.#_disabled_accessor_storage;
@@ -1853,19 +1968,19 @@ let ZlSelect = class ZlSelect extends LitElement {
 	set testId(value) {
 		this.#_testId_accessor_storage = value;
 	}
-	#_activeIndex_accessor_storage = -1;
-	get activeIndex() {
-		return this.#_activeIndex_accessor_storage;
+	#_activeValue_accessor_storage = null;
+	get activeValue() {
+		return this.#_activeValue_accessor_storage;
 	}
-	set activeIndex(value) {
-		this.#_activeIndex_accessor_storage = value;
+	set activeValue(value) {
+		this.#_activeValue_accessor_storage = value;
 	}
-	#_triggerEl_accessor_storage = null;
-	get triggerEl() {
-		return this.#_triggerEl_accessor_storage;
+	#_nativeEl_accessor_storage = null;
+	get nativeEl() {
+		return this.#_nativeEl_accessor_storage;
 	}
-	set triggerEl(value) {
-		this.#_triggerEl_accessor_storage = value;
+	set nativeEl(value) {
+		this.#_nativeEl_accessor_storage = value;
 	}
 	baseId = nextUid("zl-select");
 	internals;
@@ -1879,10 +1994,12 @@ let ZlSelect = class ZlSelect extends LitElement {
 		this.defaultValue = this.getAttribute("value") ?? "";
 		this.syncFormState();
 		document.addEventListener("pointerdown", this.handleDocumentPointerDown, true);
+		document.addEventListener("keydown", this.handleDocumentKeydown, true);
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		document.removeEventListener("pointerdown", this.handleDocumentPointerDown, true);
+		document.removeEventListener("keydown", this.handleDocumentKeydown, true);
 	}
 	willUpdate(changed) {
 		if (changed.has("value") || changed.has("required")) this.syncFormState();
@@ -1896,36 +2013,73 @@ let ZlSelect = class ZlSelect extends LitElement {
 		this.value = state ?? "";
 	}
 	focus(options) {
-		this.triggerEl?.focus(options);
+		this.nativeEl?.focus(options);
+	}
+	/**
+	* The string this control contributes to form submission — the uniform
+	* read/write contract `<zitadel-login>` uses to capture and restore field
+	* values without knowing each atom's internal shape. For a select that is
+	* simply the chosen option's value (empty = nothing chosen).
+	*/
+	get formValue() {
+		return this.value;
+	}
+	set formValue(value) {
+		this.value = value;
+	}
+	/**
+	* Options as painted in the listbox: a leading empty row (labelled with the
+	* placeholder) so the user can return to "no selection". For a `required`
+	* field this empty row is the prompt — choosing it leaves the value empty,
+	* so `required` validation still blocks submit (native `<select>`
+	* semantics). Any empty-valued member of the caller's list is dropped first,
+	* so a schema enum that lists "" doesn't render a second, duplicate empty
+	* option. The public `options` property stays the caller's list.
+	*/
+	get listOptions() {
+		return [{
+			value: "",
+			label: this.placeholder
+		}, ...this.options.filter((o) => o.value !== "")];
 	}
 	render() {
 		const labelId = `${this.baseId}-label`;
-		const listboxId = `${this.baseId}-listbox`;
-		const selected = this.options.find((option) => option.value === this.value);
+		const errorId = `${this.baseId}-error`;
+		const showError = Boolean(this.error);
+		const selected = this.value === "" ? void 0 : this.options.find((option) => option.value === this.value);
 		return html`
       <div class=${classMap({
 			"zr-select": true,
 			"zr-select--open": this.open,
+			"zr-select--invalid": this.invalid || showError,
 			"zr-select--disabled": this.disabled
 		})} part="root">
         ${this.renderLabel(labelId)}
         <div class="zr-select__field" part="field">
-          <button
-            type="button"
-            class="zr-select__trigger"
-            part="trigger"
-            id=${`${this.baseId}-trigger`}
-            role="combobox"
-            aria-haspopup="listbox"
-            aria-expanded=${this.open ? "true" : "false"}
-            aria-controls=${listboxId}
+          <select
+            class="zr-select__native"
+            part="native"
+            id=${`${this.baseId}-native`}
+            data-testid=${ifDefined(this.nativeTestId())}
             aria-labelledby=${this.label ? labelId : nothing}
             aria-label=${ifDefined(this.label ? void 0 : this.ariaLabelText)}
-            aria-activedescendant=${this.open && this.activeIndex >= 0 ? this.optionId(this.activeIndex) : nothing}
-            data-testid=${ifDefined(this.triggerTestId())}
+            aria-invalid=${this.invalid || showError ? "true" : "false"}
+            aria-describedby=${showError ? errorId : nothing}
             ?disabled=${this.disabled}
+            ?required=${this.required}
+            @change=${this.handleNativeChange}
+          >
+            ${this.listOptions.map((option) => html`<option
+                  value=${option.value}
+                  ?disabled=${option.disabled ?? false}
+                  .selected=${live(option.value === this.value)}
+                >${option.label}</option>`)}
+          </select>
+          <div
+            class="zr-select__trigger"
+            part="trigger"
+            aria-hidden="true"
             @click=${this.handleTriggerClick}
-            @keydown=${this.handleTriggerKeyDown}
           >
             <span
               class=${classMap({
@@ -1936,19 +2090,20 @@ let ZlSelect = class ZlSelect extends LitElement {
               ${selected ? selected.label : this.placeholder}
             </span>
             <zl-icon class="zr-select__icon" name="chevron-down" size="16" decorative></zl-icon>
-          </button>
-          <ul
-            class="zr-select__listbox"
-            part="listbox"
-            id=${listboxId}
-            role="listbox"
-            tabindex="-1"
-            aria-labelledby=${this.label ? labelId : nothing}
-            ?hidden=${!this.open}
-          >
-            ${this.options.map((option, index) => this.renderOption(option, index))}
+          </div>
+          <ul class="zr-select__listbox" part="listbox" aria-hidden="true" ?hidden=${!this.open}>
+            ${this.listOptions.map((option) => this.renderOption(option))}
           </ul>
         </div>
+        <div
+          class="zr-select__error"
+          part="error"
+          id=${errorId}
+          role="alert"
+          ?hidden=${!showError}
+        >
+          ${this.error}
+        </div>
       </div>
     `;
 	}
@@ -1961,149 +2116,90 @@ let ZlSelect = class ZlSelect extends LitElement {
       </label>
     `;
 	}
-	renderOption(option, index) {
+	renderOption(option) {
 		const isSelected = option.value === this.value;
 		return html`
       <li
         class="zr-select__option"
         part="option"
-        id=${this.optionId(index)}
-        role="option"
-        aria-selected=${isSelected ? "true" : "false"}
-        aria-disabled=${option.disabled ? "true" : nothing}
-        data-active=${this.open && index === this.activeIndex ? "true" : nothing}
         data-value=${option.value}
-        @click=${() => this.handleOptionClick(index)}
-        @pointermove=${() => this.handleOptionPointerMove(index)}
+        data-selected=${isSelected ? "" : nothing}
+        data-active=${this.open && option.value === this.activeValue ? "" : nothing}
+        data-disabled=${option.disabled ? "" : nothing}
+        @click=${() => this.handleOptionClick(option)}
+        @pointermove=${() => this.handleOptionPointerMove(option)}
       >
         <span class="zr-select__option-label">${option.label}</span>
         <zl-icon class="zr-select__option-check" name="check" size="16" decorative></zl-icon>
       </li>
     `;
 	}
-	optionId(index) {
-		return `${this.baseId}-option-${index}`;
-	}
 	handleLabelClick = () => {
-		if (!this.disabled) this.triggerEl?.focus();
+		if (!this.disabled) this.nativeEl?.focus();
 	};
 	handleTriggerClick = () => {
 		if (this.disabled) return;
-		if (this.open) this.close();
-		else this.openMenu();
+		this.open = !this.open;
 	};
-	handleTriggerKeyDown = (event) => {
-		if (this.disabled) return;
-		switch (event.key) {
-			case "ArrowDown":
-			case "ArrowUp":
-				event.preventDefault();
-				if (!this.open) this.openMenu();
-				else this.moveActive(event.key === "ArrowDown" ? 1 : -1);
-				break;
-			case "Home":
-				if (this.open) {
-					event.preventDefault();
-					this.setActive(this.firstEnabledIndex());
-				}
-				break;
-			case "End":
-				if (this.open) {
-					event.preventDefault();
-					this.setActive(this.lastEnabledIndex());
-				}
-				break;
-			case "Enter":
-			case " ":
-				event.preventDefault();
-				if (this.open) this.commitActive();
-				else this.openMenu();
-				break;
-			case "Escape":
-				if (this.open) {
-					event.preventDefault();
-					this.close();
-				}
-				break;
-			case "Tab":
-				if (this.open) this.close();
-				break;
-			default: break;
-		}
+	/**
+	* The native `<select>` is the source of truth for keyboard, AT, and
+	* automation. Its `change` event covers native-popup selection as well as
+	* programmatic value-setting by automation drivers.
+	*/
+	handleNativeChange = (event) => {
+		const next = event.target.value;
+		this.open = false;
+		this.commitValue(next);
 	};
-	handleOptionClick(index) {
-		if (this.options[index]?.disabled) return;
-		this.setActive(index);
-		this.commitActive();
+	handleOptionClick(option) {
+		if (option.disabled) return;
+		this.open = false;
+		this.nativeEl?.focus();
+		this.commitValue(option.value);
 	}
-	handleOptionPointerMove(index) {
-		if (!this.options[index]?.disabled && index !== this.activeIndex) this.activeIndex = index;
+	handleOptionPointerMove(option) {
+		if (!option.disabled && option.value !== this.activeValue) this.activeValue = option.value;
 	}
 	handleDocumentPointerDown = (event) => {
-		if (this.open && !event.composedPath().includes(this)) this.close();
+		if (this.open && !event.composedPath().includes(this)) this.open = false;
 	};
-	openMenu() {
-		if (this.options.length === 0) return;
-		this.open = true;
-		const selectedIndex = this.options.findIndex((option) => option.value === this.value);
-		this.activeIndex = selectedIndex >= 0 ? selectedIndex : this.firstEnabledIndex();
-	}
-	close() {
-		if (!this.open) return;
-		this.open = false;
-		this.activeIndex = -1;
-		this.triggerEl?.focus();
-	}
-	commitActive() {
-		const option = this.options[this.activeIndex];
-		if (!option || option.disabled) return;
-		const changed = option.value !== this.value;
-		this.value = option.value;
-		this.open = false;
-		this.activeIndex = -1;
-		this.triggerEl?.focus();
-		this.syncFormState();
-		if (changed) {
-			emit(this, "zl-change", {
-				name: this.name,
-				value: this.value
-			});
-			this.dispatchEvent(new Event("change", {
-				bubbles: true,
-				composed: true
-			}));
-		}
-	}
-	moveActive(delta) {
-		const count = this.options.length;
-		if (count === 0) return;
-		let next = this.activeIndex;
-		for (let step = 0; step < count; step += 1) {
-			next = (next + delta + count) % count;
-			if (!this.options[next]?.disabled) {
-				this.setActive(next);
-				return;
-			}
+	/**
+	* Escape closes the styled popup and stops propagation so it doesn't also
+	* dismiss an enclosing dialog.
+	*/
+	handleDocumentKeydown = (event) => {
+		if (this.open && event.key === "Escape") {
+			event.stopPropagation();
+			this.open = false;
+			this.nativeEl?.focus();
 		}
-	}
-	setActive(index) {
-		if (index >= 0 && index < this.options.length) this.activeIndex = index;
-	}
-	firstEnabledIndex() {
-		return this.options.findIndex((option) => !option.disabled);
-	}
-	lastEnabledIndex() {
-		for (let index = this.options.length - 1; index >= 0; index -= 1) if (!this.options[index]?.disabled) return index;
-		return -1;
+	};
+	/**
+	* Apply a new value from any input path (native select, styled popup), keeping
+	* `value`, form state, and listeners in sync and emitting the `zl-change`
+	* contract plus a composed native `change` for host forms.
+	*/
+	commitValue(next) {
+		if (next === this.value) return;
+		this.value = next;
+		this.syncFormState();
+		emit(this, "zl-change", {
+			name: this.name,
+			value: this.value
+		});
+		this.dispatchEvent(new Event("change", {
+			bubbles: true,
+			composed: true
+		}));
 	}
 	syncFormState() {
 		this.internals.setFormValue?.(this.value || null);
-		if (this.required && !this.value) this.internals.setValidity?.({ valueMissing: true }, "Please select an item in the list.", this.triggerEl ?? void 0);
+		if (this.required && !this.value) this.internals.setValidity?.({ valueMissing: true }, "Please select an item in the list.", this.nativeEl ?? void 0);
 		else this.internals.setValidity?.({});
 	}
-	triggerTestId() {
+	nativeTestId() {
 		if (this.name) return `zitadel-select-${this.name}`;
-		if (this.testId) return `${this.testId}-trigger`;
+		if (this.testId) return `${this.testId}-native`;
 	}
 };
 __decorate([property()], ZlSelect.prototype, "label", null);
@@ -2122,6 +2218,11 @@ __decorate([property({
 	} }
 })], ZlSelect.prototype, "options", null);
 __decorate([property({ type: Boolean })], ZlSelect.prototype, "required", null);
+__decorate([property()], ZlSelect.prototype, "error", null);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], ZlSelect.prototype, "invalid", null);
 __decorate([property({
 	type: Boolean,
 	reflect: true
@@ -2132,8 +2233,8 @@ __decorate([property({
 })], ZlSelect.prototype, "open", null);
 __decorate([property({ attribute: "aria-label" })], ZlSelect.prototype, "ariaLabelText", null);
 __decorate([property({ attribute: "data-testid" })], ZlSelect.prototype, "testId", null);
-__decorate([state()], ZlSelect.prototype, "activeIndex", null);
-__decorate([query(".zr-select__trigger")], ZlSelect.prototype, "triggerEl", null);
+__decorate([state()], ZlSelect.prototype, "activeValue", null);
+__decorate([query(".zr-select__native")], ZlSelect.prototype, "nativeEl", null);
 ZlSelect = __decorate([customElement("zl-select")], ZlSelect);
 const zlSelectManifest = {
 	tag: "zl-select",
@@ -2144,6 +2245,8 @@ const zlSelectManifest = {
 		"placeholder",
 		"options",
 		"required",
+		"error",
+		"invalid",
 		"disabled",
 		"open",
 		"aria-label",
@@ -2153,14 +2256,16 @@ const zlSelectManifest = {
 		"root",
 		"label",
 		"field",
+		"native",
 		"trigger",
 		"listbox",
-		"option"
+		"option",
+		"error"
 	],
 	slots: [],
 	events: ["zl-change"]
 };
 //#endregion
-export { baseHostStyles as C, focusVisibleStyles as S, emit as T, ZlAlert as _, ZlPasskey as a, zlIconManifest as b, zlPageShellManifest as c, ZlCheckbox as d, zlCheckboxManifest as f, zlButtonManifest as g, ZlButton as h, zlPillManifest as i, ZlField as l, zlCardManifest as m, zlSelectManifest as n, zlPasskeyManifest as o, ZlCard as p, ZlPill as r, ZlPageShell as s, ZlSelect as t, zlFieldManifest as u, zlAlertManifest as v, t as w, __decorate as x, ZlIcon as y };
+export { focusVisibleStyles as C, emit as E, __decorate as S, t as T, zlButtonManifest as _, ZlPasskey as a, ZlIcon as b, zlPageShellManifest as c, hookName as d, ZlCheckbox as f, ZlButton as g, zlCardManifest as h, zlPillManifest as i, ZlField as l, ZlCard as m, zlSelectManifest as n, zlPasskeyManifest as o, zlCheckboxManifest as p, ZlPill as r, ZlPageShell as s, ZlSelect as t, zlFieldManifest as u, ZlAlert as v, baseHostStyles as w, zlIconManifest as x, zlAlertManifest as y };
 
-//# sourceMappingURL=atoms-C-zXJjaz.mjs.map
+//# sourceMappingURL=atoms-5-wYIl88.mjs.map