@zitadel/components 0.1.0-alpha.11 → 0.1.0-alpha.13

package/dist/standalone.mjs

@@ -1097,7 +1097,7 @@ const o$1 = e$3(t$2);
 var icon_host_default = ":host {\n  color: inherit;\n  display: contents;\n}\n";
 //#endregion
 //#region ../shared-component-styles/src/icon.css?inline
-var icon_default = ".zr-icon {\n  color: inherit;\n  width: var(--zl-icon-size, 1.5rem);\n  height: var(--zl-icon-size, 1.5rem);\n  justify-content: center;\n  align-items: center;\n  display: inline-flex;\n}\n\n.zr-icon--16 {\n  --zl-icon-size: 1rem;\n}\n\n.zr-icon--24 {\n  --zl-icon-size: 1.5rem;\n}\n\n.zr-icon--tone-error {\n  color: var(--zl-color-icon-error);\n}\n\n.zr-icon--tone-success {\n  color: var(--zl-color-icon-success);\n}\n\n.zr-icon--tone-disabled {\n  color: var(--zl-color-icon-disabled);\n}\n\n.zr-icon svg {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n\n.zr-icon--spin svg {\n  animation: .8s linear infinite zr-icon-spin;\n}\n\n@keyframes zr-icon-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n";
+var icon_default = ".zr-icon {\n  width: var(--zl-icon-size, 1.5rem);\n  height: var(--zl-icon-size, 1.5rem);\n  justify-content: center;\n  align-items: center;\n  display: inline-flex;\n}\n\n.zr-icon--16 {\n  --zl-icon-size: 1rem;\n}\n\n.zr-icon--24 {\n  --zl-icon-size: 1.5rem;\n}\n\n.zr-icon--tone-error {\n  color: var(--zl-color-icon-error);\n}\n\n.zr-icon--tone-success {\n  color: var(--zl-color-icon-success);\n}\n\n.zr-icon--tone-disabled {\n  color: var(--zl-color-icon-disabled);\n}\n\n.zr-icon svg {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n\n.zr-icon--spin svg {\n  animation: .8s linear infinite zr-icon-spin;\n}\n\n@keyframes zr-icon-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n";
 //#endregion
 //#region ../../node_modules/.pnpm/lucide@1.16.0/node_modules/lucide/dist/esm/icons/arrow-left.mjs
 /**
@@ -1126,6 +1126,15 @@ const ArrowRight = [["path", { d: "M5 12h14" }], ["path", { d: "m12 5 7 7-7 7" }
 */
 const Check = [["path", { d: "M20 6 9 17l-5-5" }]];
 //#endregion
+//#region ../../node_modules/.pnpm/lucide@1.16.0/node_modules/lucide/dist/esm/icons/chevron-down.mjs
+/**
+* @license lucide v1.16.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const ChevronDown = [["path", { d: "m6 9 6 6 6-6" }]];
+//#endregion
 //#region ../../node_modules/.pnpm/lucide@1.16.0/node_modules/lucide/dist/esm/icons/circle-alert.mjs
 /**
 * @license lucide v1.16.0 - ISC
@@ -1362,6 +1371,7 @@ const ICON_NODES = {
 	"arrow-left": ArrowLeft,
 	spinner: LoaderCircle,
 	check: Check,
+	"chevron-down": ChevronDown,
 	cross: X,
 	warning: TriangleAlert,
 	"alert-circle": CircleAlert,
@@ -1719,7 +1729,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  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-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";
 //#endregion
 //#region src/atoms/zl-card.ts
 let ZlCard = class ZlCard extends i$2 {
@@ -1813,11 +1823,11 @@ const zlCardManifest = {
 	}
 });
 //#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";
+//#region ../shared-component-styles/src/lit/checkbox-host.css?inline
+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/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";
+//#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";
 //#endregion
 //#region src/internal/unique-id.ts
 /**
@@ -1837,6 +1847,215 @@ function nextUid(prefix) {
 	return `${prefix}-${counter}`;
 }
 //#endregion
+//#region src/atoms/zl-checkbox.ts
+let ZlCheckbox = class ZlCheckbox extends i$2 {
+	static formAssociated = true;
+	static shadowRootOptions = {
+		...i$2.shadowRootOptions,
+		delegatesFocus: true
+	};
+	static styles = [baseHostStyles, ...surfaceStyles(checkbox_host_default, checkbox_default)];
+	/**
+	* Field name — used as the key in form submission and in `zl-change` detail.
+	* The browser owns a native `name` property on form-associated elements, so
+	* we manage it manually to avoid a conflicting auto-generated accessor (see
+	* `<zl-field>`).
+	*/
+	get name() {
+		return this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", value);
+	}
+	#_label_accessor_storage = "";
+	get label() {
+		return this.#_label_accessor_storage;
+	}
+	set label(value) {
+		this.#_label_accessor_storage = value;
+	}
+	#_value_accessor_storage = "on";
+	get value() {
+		return this.#_value_accessor_storage;
+	}
+	set value(value) {
+		this.#_value_accessor_storage = value;
+	}
+	#_checked_accessor_storage = false;
+	get checked() {
+		return this.#_checked_accessor_storage;
+	}
+	set checked(value) {
+		this.#_checked_accessor_storage = value;
+	}
+	#_disabled_accessor_storage = false;
+	get disabled() {
+		return this.#_disabled_accessor_storage;
+	}
+	set disabled(value) {
+		this.#_disabled_accessor_storage = value;
+	}
+	#_required_accessor_storage = false;
+	get required() {
+		return this.#_required_accessor_storage;
+	}
+	set required(value) {
+		this.#_required_accessor_storage = value;
+	}
+	#_ariaLabelText_accessor_storage = void 0;
+	get ariaLabelText() {
+		return this.#_ariaLabelText_accessor_storage;
+	}
+	set ariaLabelText(value) {
+		this.#_ariaLabelText_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;
+	}
+	set forcedState(value) {
+		this.#_forcedState_accessor_storage = value;
+	}
+	#_inputEl_accessor_storage = null;
+	get inputEl() {
+		return this.#_inputEl_accessor_storage;
+	}
+	set inputEl(value) {
+		this.#_inputEl_accessor_storage = value;
+	}
+	inputId = nextUid("zl-checkbox");
+	internals;
+	defaultChecked = false;
+	constructor() {
+		super();
+		this.internals = this.attachInternals();
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.defaultChecked = this.hasAttribute("checked");
+		this.syncFormState();
+	}
+	willUpdate(changed) {
+		if (changed.has("checked") || changed.has("required") || changed.has("value")) this.syncFormState();
+	}
+	formResetCallback() {
+		this.checked = this.defaultChecked;
+	}
+	formStateRestoreCallback(state) {
+		this.checked = state === this.value;
+	}
+	focus(options) {
+		this.inputEl?.focus(options);
+	}
+	render() {
+		const rootClass = e$2({
+			"zr-checkbox": true,
+			"zr-checkbox--disabled": this.disabled
+		});
+		const labelText = this.label;
+		return b`
+      <label class=${rootClass} part="root" data-state=${this.forcedState ?? A}>
+        <input
+          class="zr-checkbox__input"
+          part="input"
+          id=${this.inputId}
+          type="checkbox"
+          name=${this.name || A}
+          .checked=${l(this.checked)}
+          value=${this.value}
+          ?required=${this.required}
+          ?disabled=${this.disabled}
+          aria-label=${o(labelText ? void 0 : this.ariaLabelText)}
+          data-testid=${o(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>
+        ${labelText ? b`<span class="zr-checkbox__label" part="label">${labelText}</span>` : b`<slot></slot>`}
+      </label>
+    `;
+	}
+	handleChange = (event) => {
+		event.stopPropagation();
+		const input = event.target;
+		this.checked = input.checked;
+		this.syncFormState();
+		emit(this, "zl-change", {
+			name: this.name,
+			checked: this.checked,
+			value: this.value
+		});
+		this.dispatchEvent(new Event("change", {
+			bubbles: true,
+			composed: true
+		}));
+	};
+	syncFormState() {
+		this.internals.setFormValue?.(this.checked ? this.value : null);
+		if (this.required && !this.checked) this.internals.setValidity?.({ valueMissing: true }, "Please check this box to continue.");
+		else this.internals.setValidity?.({});
+	}
+	nativeInputTestId() {
+		if (this.name) return `zitadel-checkbox-${this.name}`;
+		if (this.testId) return `${this.testId}-input`;
+	}
+};
+__decorate([n$1()], ZlCheckbox.prototype, "label", null);
+__decorate([n$1()], ZlCheckbox.prototype, "value", null);
+__decorate([n$1({
+	type: Boolean,
+	reflect: true
+})], ZlCheckbox.prototype, "checked", null);
+__decorate([n$1({
+	type: Boolean,
+	reflect: true
+})], ZlCheckbox.prototype, "disabled", null);
+__decorate([n$1({ type: Boolean })], ZlCheckbox.prototype, "required", null);
+__decorate([n$1({ attribute: "aria-label" })], ZlCheckbox.prototype, "ariaLabelText", null);
+__decorate([n$1({ attribute: "data-testid" })], ZlCheckbox.prototype, "testId", null);
+__decorate([n$1({ attribute: "data-state" })], ZlCheckbox.prototype, "forcedState", null);
+__decorate([e$4(".zr-checkbox__input")], ZlCheckbox.prototype, "inputEl", null);
+ZlCheckbox = __decorate([t$4("zl-checkbox")], ZlCheckbox);
+const zlCheckboxManifest = {
+	tag: "zl-checkbox",
+	attrs: [
+		"name",
+		"label",
+		"value",
+		"checked",
+		"disabled",
+		"required",
+		"aria-label",
+		"data-testid"
+	],
+	parts: [
+		"root",
+		"input",
+		"box",
+		"face",
+		"check",
+		"label"
+	],
+	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";
+//#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";
+//#endregion
 //#region src/atoms/zl-field.ts
 let ZlField = class ZlField extends i$2 {
 	static formAssociated = true;
@@ -2277,7 +2496,7 @@ const zlFieldManifest = {
 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";
 //#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  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  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";
 //#endregion
 //#region src/atoms/zl-page-shell.ts
 let ZlPageShell = class ZlPageShell extends i$2 {
@@ -2660,6 +2879,402 @@ const zlPillManifest = {
 	events: []
 };
 //#endregion
+//#region ../shared-component-styles/src/lit/select-host.css?inline
+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";
+//#endregion
+//#region src/atoms/zl-select.ts
+let ZlSelect = class ZlSelect extends i$2 {
+	static formAssociated = true;
+	static shadowRootOptions = {
+		...i$2.shadowRootOptions,
+		delegatesFocus: true
+	};
+	static styles = [baseHostStyles, ...surfaceStyles(select_host_default, select_default)];
+	/**
+	* Field name — used as the key in form submission and in `zl-change` detail.
+	* Managed manually to avoid clobbering the native form-associated `name`
+	* accessor the browser owns (see `<zl-field>` / `<zl-checkbox>`).
+	*/
+	get name() {
+		return this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		this.setAttribute("name", value);
+	}
+	#_label_accessor_storage = "";
+	get label() {
+		return this.#_label_accessor_storage;
+	}
+	set label(value) {
+		this.#_label_accessor_storage = value;
+	}
+	#_value_accessor_storage = "";
+	get value() {
+		return this.#_value_accessor_storage;
+	}
+	set value(value) {
+		this.#_value_accessor_storage = value;
+	}
+	#_placeholder_accessor_storage = "Select…";
+	get placeholder() {
+		return this.#_placeholder_accessor_storage;
+	}
+	set placeholder(value) {
+		this.#_placeholder_accessor_storage = value;
+	}
+	#_options_accessor_storage = [];
+	get options() {
+		return this.#_options_accessor_storage;
+	}
+	set options(value) {
+		this.#_options_accessor_storage = value;
+	}
+	#_required_accessor_storage = false;
+	get required() {
+		return this.#_required_accessor_storage;
+	}
+	set required(value) {
+		this.#_required_accessor_storage = value;
+	}
+	#_disabled_accessor_storage = false;
+	get disabled() {
+		return this.#_disabled_accessor_storage;
+	}
+	set disabled(value) {
+		this.#_disabled_accessor_storage = value;
+	}
+	#_open_accessor_storage = false;
+	get open() {
+		return this.#_open_accessor_storage;
+	}
+	set open(value) {
+		this.#_open_accessor_storage = value;
+	}
+	#_ariaLabelText_accessor_storage = void 0;
+	get ariaLabelText() {
+		return this.#_ariaLabelText_accessor_storage;
+	}
+	set ariaLabelText(value) {
+		this.#_ariaLabelText_accessor_storage = value;
+	}
+	#_testId_accessor_storage = void 0;
+	get testId() {
+		return this.#_testId_accessor_storage;
+	}
+	set testId(value) {
+		this.#_testId_accessor_storage = value;
+	}
+	#_activeIndex_accessor_storage = -1;
+	get activeIndex() {
+		return this.#_activeIndex_accessor_storage;
+	}
+	set activeIndex(value) {
+		this.#_activeIndex_accessor_storage = value;
+	}
+	#_triggerEl_accessor_storage = null;
+	get triggerEl() {
+		return this.#_triggerEl_accessor_storage;
+	}
+	set triggerEl(value) {
+		this.#_triggerEl_accessor_storage = value;
+	}
+	baseId = nextUid("zl-select");
+	internals;
+	defaultValue = "";
+	constructor() {
+		super();
+		this.internals = this.attachInternals();
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.defaultValue = this.getAttribute("value") ?? "";
+		this.syncFormState();
+		document.addEventListener("pointerdown", this.handleDocumentPointerDown, true);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		document.removeEventListener("pointerdown", this.handleDocumentPointerDown, true);
+	}
+	willUpdate(changed) {
+		if (changed.has("value") || changed.has("required")) this.syncFormState();
+		if (changed.has("disabled") && this.disabled) this.open = false;
+	}
+	formResetCallback() {
+		this.value = this.defaultValue;
+		this.open = false;
+	}
+	formStateRestoreCallback(state) {
+		this.value = state ?? "";
+	}
+	focus(options) {
+		this.triggerEl?.focus(options);
+	}
+	render() {
+		const labelId = `${this.baseId}-label`;
+		const listboxId = `${this.baseId}-listbox`;
+		const selected = this.options.find((option) => option.value === this.value);
+		return b`
+      <div class=${e$2({
+			"zr-select": true,
+			"zr-select--open": this.open,
+			"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}
+            aria-labelledby=${this.label ? labelId : A}
+            aria-label=${o(this.label ? void 0 : this.ariaLabelText)}
+            aria-activedescendant=${this.open && this.activeIndex >= 0 ? this.optionId(this.activeIndex) : A}
+            data-testid=${o(this.triggerTestId())}
+            ?disabled=${this.disabled}
+            @click=${this.handleTriggerClick}
+            @keydown=${this.handleTriggerKeyDown}
+          >
+            <span
+              class=${e$2({
+			"zr-select__value": true,
+			"zr-select__value--placeholder": !selected
+		})}
+            >
+              ${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 : A}
+            ?hidden=${!this.open}
+          >
+            ${this.options.map((option, index) => this.renderOption(option, index))}
+          </ul>
+        </div>
+      </div>
+    `;
+	}
+	renderLabel(labelId) {
+		if (!this.label) return null;
+		return b`
+      <label class="zr-select__label" part="label" id=${labelId} @click=${this.handleLabelClick}>
+        <span>${this.label}</span>
+        ${this.required ? b`<span class="zr-select__required" aria-hidden="true">*</span>` : null}
+      </label>
+    `;
+	}
+	renderOption(option, index) {
+		const isSelected = option.value === this.value;
+		return b`
+      <li
+        class="zr-select__option"
+        part="option"
+        id=${this.optionId(index)}
+        role="option"
+        aria-selected=${isSelected ? "true" : "false"}
+        aria-disabled=${option.disabled ? "true" : A}
+        data-active=${this.open && index === this.activeIndex ? "true" : A}
+        data-value=${option.value}
+        @click=${() => this.handleOptionClick(index)}
+        @pointermove=${() => this.handleOptionPointerMove(index)}
+      >
+        <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();
+	};
+	handleTriggerClick = () => {
+		if (this.disabled) return;
+		if (this.open) this.close();
+		else this.openMenu();
+	};
+	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;
+		}
+	};
+	handleOptionClick(index) {
+		if (this.options[index]?.disabled) return;
+		this.setActive(index);
+		this.commitActive();
+	}
+	handleOptionPointerMove(index) {
+		if (!this.options[index]?.disabled && index !== this.activeIndex) this.activeIndex = index;
+	}
+	handleDocumentPointerDown = (event) => {
+		if (this.open && !event.composedPath().includes(this)) this.close();
+	};
+	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;
+			}
+		}
+	}
+	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;
+	}
+	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);
+		else this.internals.setValidity?.({});
+	}
+	triggerTestId() {
+		if (this.name) return `zitadel-select-${this.name}`;
+		if (this.testId) return `${this.testId}-trigger`;
+	}
+};
+__decorate([n$1()], ZlSelect.prototype, "label", null);
+__decorate([n$1()], ZlSelect.prototype, "value", null);
+__decorate([n$1()], ZlSelect.prototype, "placeholder", null);
+__decorate([n$1({
+	attribute: "options",
+	converter: { fromAttribute(value) {
+		if (!value) return [];
+		try {
+			const parsed = JSON.parse(value);
+			return Array.isArray(parsed) ? parsed : [];
+		} catch {
+			return [];
+		}
+	} }
+})], ZlSelect.prototype, "options", null);
+__decorate([n$1({ type: Boolean })], ZlSelect.prototype, "required", null);
+__decorate([n$1({
+	type: Boolean,
+	reflect: true
+})], ZlSelect.prototype, "disabled", null);
+__decorate([n$1({
+	type: Boolean,
+	reflect: true
+})], ZlSelect.prototype, "open", null);
+__decorate([n$1({ attribute: "aria-label" })], ZlSelect.prototype, "ariaLabelText", null);
+__decorate([n$1({ attribute: "data-testid" })], ZlSelect.prototype, "testId", null);
+__decorate([r$1()], ZlSelect.prototype, "activeIndex", null);
+__decorate([e$4(".zr-select__trigger")], ZlSelect.prototype, "triggerEl", null);
+ZlSelect = __decorate([t$4("zl-select")], ZlSelect);
+const zlSelectManifest = {
+	tag: "zl-select",
+	attrs: [
+		"name",
+		"label",
+		"value",
+		"placeholder",
+		"options",
+		"required",
+		"disabled",
+		"open",
+		"aria-label",
+		"data-testid"
+	],
+	parts: [
+		"root",
+		"label",
+		"field",
+		"trigger",
+		"listbox",
+		"option"
+	],
+	slots: [],
+	events: ["zl-change"]
+};
+//#endregion
 //#region ../api/dist/runtime/auth.mjs
 /**
 * Module-global bearer token used by the orval-generated client's
@@ -2811,6 +3426,7 @@ var __exportAll = (all, no_symbols) => {
 * OpenAPI spec version: 0.0.1
 */
 var zitadelNextGen_exports = /* @__PURE__ */ __exportAll({
+	activateFlowDefinition: () => activateFlowDefinition,
 	authorizeDevice: () => authorizeDevice,
 	authorizeGet: () => authorizeGet,
 	createAuthAttempt: () => createAuthAttempt,
@@ -2822,9 +3438,11 @@ var zitadelNextGen_exports = /* @__PURE__ */ __exportAll({
 	createSession: () => createSession,
 	createTeam: () => createTeam,
 	createUser: () => createUser,
+	deactivateFlowDefinition: () => deactivateFlowDefinition,
 	deleteFlowDefinition: () => deleteFlowDefinition,
 	endSession: () => endSession,
 	exchangeHandoff: () => exchangeHandoff,
+	getActivateFlowDefinitionUrl: () => getActivateFlowDefinitionUrl,
 	getAuthAttempt: () => getAuthAttempt,
 	getAuthorizeDeviceUrl: () => getAuthorizeDeviceUrl,
 	getAuthorizeGetUrl: () => getAuthorizeGetUrl,
@@ -2837,6 +3455,7 @@ var zitadelNextGen_exports = /* @__PURE__ */ __exportAll({
 	getCreateSessionUrl: () => getCreateSessionUrl,
 	getCreateTeamUrl: () => getCreateTeamUrl,
 	getCreateUserUrl: () => getCreateUserUrl,
+	getDeactivateFlowDefinitionUrl: () => getDeactivateFlowDefinitionUrl,
 	getDeleteFlowDefinitionUrl: () => getDeleteFlowDefinitionUrl,
 	getEndSessionUrl: () => getEndSessionUrl,
 	getExchangeHandoffUrl: () => getExchangeHandoffUrl,
@@ -3672,7 +4291,7 @@ const getCreateFlowDefinitionUrl = () => {
 Flow definitions are templates that define the sequence of steps (capabilities)
 for a particular user journey (e.g., registration, login, password reset).
 
-Flow definitions are created based on the flow meta schema, which includes the flow's purpose, audience, and the steps involved.
+Flow definitions are created based on the flow definition schema, which includes the flow's purpose, audience, and the steps involved.
 
 * @summary Create a new flow definition
 */
@@ -3734,13 +4353,15 @@ const getUpdateFlowDefinitionUrl = (id, params) => {
 	return stringifiedParams.length > 0 ? `${getProxyPath()}/flow_definitions/${id}?${stringifiedParams}` : `${getProxyPath()}/flow_definitions/${id}`;
 };
 /**
-* Update a flow definition by id
+* Update a flow definition by id. This endpoint replaces the existing flow definition.
+If `flow_definition.status` is omitted, the current status is preserved
+
 * @summary Update a flow definition by id
 */
 const updateFlowDefinition = async (id, updateFlowDefinitionBody, params, options) => {
 	return customFetch(getUpdateFlowDefinitionUrl(id, params), {
 		...options,
-		method: "PATCH",
+		method: "PUT",
 		headers: {
 			"Content-Type": "application/json",
 			...options?.headers
@@ -3757,7 +4378,10 @@ const getDeleteFlowDefinitionUrl = (id, params) => {
 	return stringifiedParams.length > 0 ? `${getProxyPath()}/flow_definitions/${id}?${stringifiedParams}` : `${getProxyPath()}/flow_definitions/${id}`;
 };
 /**
-* Delete a flow definition by id
+* Delete a flow definition by id.
+If the flow definition is currently being used by a flow, the deletion will fail.
+If the flow definition is the last active flow definition for a given purpose, the deletion will fail to prevent disruption of new flows being started for that purpose.
+
 * @summary Delete a flow definition by id
 */
 const deleteFlowDefinition = async (id, params, options) => {
@@ -3766,6 +4390,47 @@ const deleteFlowDefinition = async (id, params, options) => {
 		method: "DELETE"
 	});
 };
+const getActivateFlowDefinitionUrl = (id, params) => {
+	const normalizedParams = new URLSearchParams();
+	Object.entries(params || {}).forEach(([key, value]) => {
+		if (value !== void 0) normalizedParams.append(key, value === null ? "null" : value.toString());
+	});
+	const stringifiedParams = normalizedParams.toString();
+	return stringifiedParams.length > 0 ? `${getProxyPath()}/flow_definitions/${id}/activate?${stringifiedParams}` : `${getProxyPath()}/flow_definitions/${id}/activate`;
+};
+/**
+* Activate a flow definition by transitioning it from a `draft` state to an `active` state.
+Alternatively, the status of a flow definition can also be set via the `POST /flow_definitions` and `PUT /flow_definitions/{id}` endpoints by setting the `status` attribute in the flow definition payload.
+
+* @summary Activate a flow definition by ID.
+*/
+const activateFlowDefinition = async (id, params, options) => {
+	return customFetch(getActivateFlowDefinitionUrl(id, params), {
+		...options,
+		method: "POST"
+	});
+};
+const getDeactivateFlowDefinitionUrl = (id, params) => {
+	const normalizedParams = new URLSearchParams();
+	Object.entries(params || {}).forEach(([key, value]) => {
+		if (value !== void 0) normalizedParams.append(key, value === null ? "null" : value.toString());
+	});
+	const stringifiedParams = normalizedParams.toString();
+	return stringifiedParams.length > 0 ? `${getProxyPath()}/flow_definitions/${id}/deactivate?${stringifiedParams}` : `${getProxyPath()}/flow_definitions/${id}/deactivate`;
+};
+/**
+* Deactivates a flow definition in the `active` state by transitioning it to the `draft` state.
+Flow definitions in `draft` state cannot be used to start new flows. Existing flows that use the deactivated flow definition must gracefully handle this.
+Alternatively, the status of a flow definition can also be set via the `POST /flow_definitions` and `PUT /flow_definitions/{id}` endpoints by setting the `status` attribute in the flow definition payload.
+
+* @summary Deactivate a flow definition by ID.
+*/
+const deactivateFlowDefinition = async (id, params, options) => {
+	return customFetch(getDeactivateFlowDefinitionUrl(id, params), {
+		...options,
+		method: "POST"
+	});
+};
 const getCreateTeamUrl = (params) => {
 	const normalizedParams = new URLSearchParams();
 	Object.entries(params || {}).forEach(([key, value]) => {
@@ -8804,7 +9469,7 @@ function lookup(locale, key) {
 }
 //#endregion
 //#region src/orchestrator/templates/default.liquid
-var default_default = "<zl-page-shell data-zl-template-root>\n  {% if branding.logo_url %}\n    <img slot=\"header\" class=\"zl-card-logo\" src=\"{{ branding.logo_url }}\" alt=\"\" />\n  {% endif %}\n  <zl-card>\n    <h1 slot=\"header\" class=\"zl-card-title\">{{ step.texts.title_key | t: identity.display_name }}</h1>\n    {% if step.texts.description_key %}\n      {% assign card_subtitle = step.texts.description_key | t: identity.display_name %}\n      {% if card_subtitle != \"\" %}\n        <p slot=\"header\" class=\"zl-card-subtitle\">{{ card_subtitle }}</p>\n      {% endif %}\n    {% endif %}\n\n    {% if errors and errors.size > 0 %}\n      {% for err in errors %}\n        {% if err | formLevelError %}\n          {% assign alert_heading = err.text_key | alertHeading %}\n          {% assign alert_body = err.text_key | alertBody %}\n          <zl-alert severity=\"error\"{% if alert_heading != \"\" %} heading=\"{{ alert_heading | t }}\"{% endif %}>\n            {% if alert_body != \"\" %}{{ alert_body | t }}{% elsif err.text_key %}{{ err.text_key | t }}{% else %}{{ err.message }}{% endif %}\n          </zl-alert>\n        {% endif %}\n      {% endfor %}\n    {% endif %}\n\n    {% for f in fields %}\n      {% assign field_placeholder = f.text_key | fieldPlaceholder %}\n      {% assign field_help = f.text_key | fieldHelp %}\n      {% assign field_err = f.name | fieldError: errors %}\n      {% assign autocomplete_val = '' %}\n      {% if f.name == 'email' %}\n        {% assign autocomplete_val = 'email' %}\n      {% elsif f.type == 'password' and step.name contains 'register' %}\n        {% assign autocomplete_val = 'new-password' %}\n      {% elsif f.type == 'password' %}\n        {% assign autocomplete_val = 'current-password' %}\n      {% endif %}\n      <zl-field\n        name=\"{{ f.name }}\"\n        data-testid=\"zitadel-field-{{ f.name }}\"\n        label=\"{{ f.text_key | t }}\"\n        type=\"{{ f.type }}\"\n        value=\"{{ f.value }}\"\n        {% if autocomplete_val != '' %}autocomplete=\"{{ autocomplete_val }}\"{% endif %}\n        {% if f.required %}required{% endif %}\n        {% if field_placeholder != \"\" %}placeholder=\"{{ field_placeholder }}\"{% endif %}\n        {% if field_err != \"\" %}invalid error=\"{{ field_err }}\"{% endif %}\n      >\n        {% if field_help != \"\" %}\n          <span slot=\"help\">{{ field_help }}</span>\n        {% endif %}\n      </zl-field>\n    {% endfor %}\n\n    {% assign recover = actions | where: \"name\", \"recover\" | first %}\n    {% if recover %}\n      <p class=\"zl-card-forgot\">\n        <a href=\"#\" class=\"zl-card-forgot__link\" data-action=\"recover\">{{ recover.text_key | t }}</a>\n      </p>\n    {% endif %}\n\n    {% for a in actions %}\n      {% if a.primary %}\n        <zl-button\n          hierarchy=\"primary\"\n          size=\"medium\"\n          type=\"submit\"\n          block\n          action=\"{{ a.name }}\"\n          data-testid=\"zitadel-action-{{ a.name }}\"\n          label=\"{{ a.text_key | t }}\"\n          {% if loading %}loading{% endif %}\n        ></zl-button>\n      {% endif %}\n    {% endfor %}\n\n    {% for a in actions %}\n      {% unless a.primary or a.name == 'passkey' or a.name == 'register' or a.name == 'sign_in' or a.name == 'recover' %}\n        <zl-button\n          hierarchy=\"secondary\"\n          size=\"medium\"\n          type=\"button\"\n          block\n          action=\"{{ a.name }}\"\n          data-testid=\"zitadel-action-{{ a.name }}\"\n          label=\"{{ a.text_key | t }}\"\n        ></zl-button>\n      {% endunless %}\n    {% endfor %}\n\n    {% assign passkey = actions | where: \"name\", \"passkey\" | first %}\n    {% if passkey %}\n      <zl-button\n        hierarchy=\"secondary\"\n        size=\"medium\"\n        block\n        action=\"passkey\"\n        data-testid=\"zitadel-action-passkey\"\n        label=\"{{ passkey.text_key | t }}\"\n      ></zl-button>\n    {% endif %}\n\n\n    {% assign register = actions | where: \"name\", \"register\" | first %}\n    {% if register %}\n      <p class=\"zl-card-nav\">\n        {{ 'identifier.action.register.lead' | t }}<a href=\"#\" class=\"zl-card-nav__link\" data-action=\"register\" data-testid=\"zitadel-action-register-link\">{{ 'identifier.action.register.link' | t }}</a>\n      </p>\n    {% endif %}\n\n    {% assign sign_in = actions | where: \"name\", \"sign_in\" | first %}\n    {% if sign_in %}\n      <p class=\"zl-card-nav\">\n        {{ 'register.action.sign_in.lead' | t }}<a href=\"#\" class=\"zl-card-nav__link\" data-action=\"sign_in\" data-testid=\"zitadel-action-sign_in-link\">{{ 'register.action.sign_in.link' | t }}</a>\n      </p>\n    {% endif %}\n\n    {% if challenge %}\n      {% if challenge.method == \"passkey\" or challenge.method == \"passkey_register\" %}\n        {% assign ceremony = \"authenticate\" %}\n        {% if challenge.method == \"passkey_register\" %}{% assign ceremony = \"register\" %}{% endif %}\n        <zl-passkey\n          ceremony=\"{{ ceremony }}\"\n          method=\"{{ challenge.method }}\"\n          challenge-id=\"{{ challenge.challenge_id }}\"\n          options='{{ challenge.options | json }}'\n        ></zl-passkey>\n      {% endif %}\n    {% endif %}\n\n    {% mandatory_gates %}\n  </zl-card>\n</zl-page-shell>\n";
+var default_default = "<zl-page-shell data-zl-template-root>\n  {% if branding.logo_url %}\n    <img slot=\"header\" class=\"zl-card-logo\" src=\"{{ branding.logo_url }}\" alt=\"\" />\n  {% endif %}\n  <zl-card>\n    <h1 slot=\"header\" class=\"zl-card-title\">{{ step.texts.title_key | t: identity.display_name }}</h1>\n    {% if step.texts.description_key %}\n      {% assign card_subtitle = step.texts.description_key | t: identity.display_name %}\n      {% if card_subtitle != \"\" %}\n        <p slot=\"header\" class=\"zl-card-subtitle\">{{ card_subtitle }}</p>\n      {% endif %}\n    {% endif %}\n\n    {% if errors and errors.size > 0 %}\n      {% for err in errors %}\n        {% if err | formLevelError %}\n          {% assign alert_heading = err.text_key | alertHeading %}\n          {% assign alert_body = err.text_key | alertBody %}\n          <zl-alert severity=\"error\"{% if alert_heading != \"\" %} heading=\"{{ alert_heading | t }}\"{% endif %}>\n            {% if alert_body != \"\" %}{{ alert_body | t }}{% elsif err.text_key %}{{ err.text_key | t }}{% else %}{{ err.message }}{% endif %}\n          </zl-alert>\n        {% endif %}\n      {% endfor %}\n    {% endif %}\n\n    {% for f in fields %}\n      {% assign field_placeholder = f.text_key | fieldPlaceholder %}\n      {% assign field_help = f.text_key | fieldHelp %}\n      {% assign field_err = f.name | fieldError: errors %}\n      {% case f.type %}\n      {% when 'checkbox' %}\n        <zl-checkbox\n          name=\"{{ f.name }}\"\n          data-testid=\"zitadel-field-{{ f.name }}\"\n          label=\"{{ f.text_key | t }}\"\n          value=\"true\"\n          {% if f.value %}checked{% endif %}\n          {% if f.required %}required{% endif %}\n        ></zl-checkbox>\n      {% when 'select' %}\n        <zl-select\n          name=\"{{ f.name }}\"\n          data-testid=\"zitadel-field-{{ f.name }}\"\n          label=\"{{ f.text_key | t }}\"\n          value=\"{{ f.value }}\"\n          options='{{ f.validation.enum | selectOptions | json }}'\n          {% if f.required %}required{% endif %}\n          {% if field_placeholder != \"\" %}placeholder=\"{{ field_placeholder }}\"{% endif %}\n        ></zl-select>\n      {% else %}\n        {% assign autocomplete_val = '' %}\n        {% if f.name == 'email' %}\n          {% assign autocomplete_val = 'email' %}\n        {% elsif f.type == 'password' and step.name contains 'register' %}\n          {% assign autocomplete_val = 'new-password' %}\n        {% elsif f.type == 'password' %}\n          {% assign autocomplete_val = 'current-password' %}\n        {% endif %}\n        <zl-field\n          name=\"{{ f.name }}\"\n          data-testid=\"zitadel-field-{{ f.name }}\"\n          label=\"{{ f.text_key | t }}\"\n          type=\"{{ f.type }}\"\n          value=\"{{ f.value }}\"\n          {% if autocomplete_val != '' %}autocomplete=\"{{ autocomplete_val }}\"{% endif %}\n          {% if f.required %}required{% endif %}\n          {% if field_placeholder != \"\" %}placeholder=\"{{ field_placeholder }}\"{% endif %}\n          {% if field_err != \"\" %}invalid error=\"{{ field_err }}\"{% endif %}\n        >\n          {% if field_help != \"\" %}\n            <span slot=\"help\">{{ field_help }}</span>\n          {% endif %}\n        </zl-field>\n      {% endcase %}\n    {% endfor %}\n\n    {% assign recover = actions | where: \"name\", \"recover\" | first %}\n    {% if recover %}\n      <p class=\"zl-card-forgot\">\n        <a href=\"#\" class=\"zl-card-forgot__link\" data-action=\"recover\">{{ recover.text_key | t }}</a>\n      </p>\n    {% endif %}\n\n    {% for a in actions %}\n      {% if a.primary %}\n        <zl-button\n          hierarchy=\"primary\"\n          size=\"medium\"\n          type=\"submit\"\n          block\n          action=\"{{ a.name }}\"\n          data-testid=\"zitadel-action-{{ a.name }}\"\n          label=\"{{ a.text_key | t }}\"\n          {% if loading %}loading{% endif %}\n        ></zl-button>\n      {% endif %}\n    {% endfor %}\n\n    {% for a in actions %}\n      {% unless a.primary or a.name == 'passkey' or a.name == 'register' or a.name == 'sign_in' or a.name == 'recover' %}\n        <zl-button\n          hierarchy=\"secondary\"\n          size=\"medium\"\n          type=\"button\"\n          block\n          action=\"{{ a.name }}\"\n          data-testid=\"zitadel-action-{{ a.name }}\"\n          label=\"{{ a.text_key | t }}\"\n        ></zl-button>\n      {% endunless %}\n    {% endfor %}\n\n    {% assign passkey = actions | where: \"name\", \"passkey\" | first %}\n    {% if passkey %}\n      <zl-button\n        hierarchy=\"secondary\"\n        size=\"medium\"\n        block\n        action=\"passkey\"\n        data-testid=\"zitadel-action-passkey\"\n        label=\"{{ passkey.text_key | t }}\"\n      ></zl-button>\n    {% endif %}\n\n\n    {% assign register = actions | where: \"name\", \"register\" | first %}\n    {% if register %}\n      <p class=\"zl-card-nav\">\n        {{ 'identifier.action.register.lead' | t }}<a href=\"#\" class=\"zl-card-nav__link\" data-action=\"register\" data-testid=\"zitadel-action-register-link\">{{ 'identifier.action.register.link' | t }}</a>\n      </p>\n    {% endif %}\n\n    {% assign sign_in = actions | where: \"name\", \"sign_in\" | first %}\n    {% if sign_in %}\n      <p class=\"zl-card-nav\">\n        {{ 'register.action.sign_in.lead' | t }}<a href=\"#\" class=\"zl-card-nav__link\" data-action=\"sign_in\" data-testid=\"zitadel-action-sign_in-link\">{{ 'register.action.sign_in.link' | t }}</a>\n      </p>\n    {% endif %}\n\n    {% if challenge %}\n      {% if challenge.method == \"passkey\" or challenge.method == \"passkey_register\" %}\n        {% assign ceremony = \"authenticate\" %}\n        {% assign submit_method = challenge.method %}\n        {% if challenge.method == \"passkey_register\" or challenge.options.user %}\n          {% assign ceremony = \"register\" %}\n          {% assign submit_method = \"passkey_register\" %}\n        {% endif %}\n        <zl-passkey\n          ceremony=\"{{ ceremony }}\"\n          method=\"{{ submit_method }}\"\n          challenge-id=\"{{ challenge.challenge_id }}\"\n          options='{{ challenge.options | json }}'\n        ></zl-passkey>\n      {% endif %}\n    {% endif %}\n\n    {% mandatory_gates %}\n  </zl-card>\n</zl-page-shell>\n";
 //#endregion
 //#region src/orchestrator/liquid.ts
 /**
@@ -8851,6 +9516,22 @@ function createLiquidEngine(options) {
 		const lookupKey = `${stringify(textKey)}.help`;
 		return options.locale[lookupKey] ?? "";
 	});
+	/**
+	* Builds `<zl-select>` options from a field's closed `validation.enum`. The
+	* wire only carries the allowed values (strings), so the label defaults to the
+	* value — author the enum with display-ready text. Piped through `| json` into
+	* the element's `options` attribute.
+	*/
+	engine.registerFilter("selectOptions", (values) => {
+		if (!Array.isArray(values)) return [];
+		return values.map((value) => {
+			const v = stringify(value);
+			return {
+				value: v,
+				label: v
+			};
+		});
+	});
 	/** Maps `error.*` text keys to a field name (Figma inline-error annotations). */
 	const fieldErrorKeys = {
 		"error.email_required": "email",
@@ -8968,12 +9649,10 @@ const en = {
 	"collect-credentials.field.email": "Work email",
 	"collect-credentials.field.email.placeholder": "you@company.com",
 	"collect-credentials.field.password": "Password",
-	"collect-credentials.field.password.help": "At least 8 characters, including a symbol and number.",
 	"collect-credentials.action.submit": "Sign up",
 	"register-password.title": "Create your password",
 	"register-password.description": "Choose a secure password for your account",
 	"register-password.field.password": "Password",
-	"register-password.field.password.help": "At least 8 characters, including a symbol and number.",
 	"register-password.action.submit": "Sign up",
 	"passkey-upsell.title": "Sign in faster next time",
 	"passkey-upsell.description": "No password needed ever again.",
@@ -9004,12 +9683,12 @@ const en = {
 	"register.field.email": "Work email",
 	"register.field.email.placeholder": "you@company.com",
 	"register.field.password": "Password",
-	"register.field.password.help": "At least 8 characters, including a symbol and number.",
 	"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.field.country": "Country",
+	"register.field.country.placeholder": "Select your country",
+	"register.field.terms": "I agree to the terms of service",
 	"register.action.password": "Continue with password",
 	"register.action.passkey": "Continue with a passkey",
 	"register.action.submit": "Sign up",
@@ -9069,12 +9748,10 @@ const de = {
 	"collect-credentials.field.email": "E-Mail",
 	"collect-credentials.field.email.placeholder": "du@unternehmen.com",
 	"collect-credentials.field.password": "Passwort",
-	"collect-credentials.field.password.help": "Mindestens 8 Zeichen, einschließlich eines Sonderzeichens und einer Zahl.",
 	"collect-credentials.action.submit": "Registrieren",
 	"register-password.title": "Passwort erstellen",
 	"register-password.description": "Wähle ein sicheres Passwort für dein Konto",
 	"register-password.field.password": "Passwort",
-	"register-password.field.password.help": "Mindestens 8 Zeichen, einschließlich eines Sonderzeichens und einer Zahl.",
 	"register-password.action.submit": "Registrieren",
 	"passkey-upsell.title": "Nächstes Mal schneller anmelden",
 	"passkey-upsell.description": "Kein Passwort mehr nötig.",
@@ -9105,12 +9782,12 @@ const de = {
 	"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.field.country": "Land",
+	"register.field.country.placeholder": "Land auswählen",
+	"register.field.terms": "Ich stimme den Nutzungsbedingungen zu",
 	"register.action.password": "Mit Passwort fortfahren",
 	"register.action.passkey": "Weiter mit Passkey",
 	"register.action.submit": "Registrieren",
@@ -9172,12 +9849,10 @@ const builtinLocales = {
 		"collect-credentials.field.email": "E-mail aziendale",
 		"collect-credentials.field.email.placeholder": "tu@azienda.com",
 		"collect-credentials.field.password": "Password",
-		"collect-credentials.field.password.help": "Almeno 8 caratteri, incluso un simbolo e un numero.",
 		"collect-credentials.action.submit": "Registrati",
 		"register-password.title": "Crea la tua password",
 		"register-password.description": "Scegli una password sicura per il tuo account",
 		"register-password.field.password": "Password",
-		"register-password.field.password.help": "Almeno 8 caratteri, incluso un simbolo e un numero.",
 		"register-password.action.submit": "Registrati",
 		"passkey-upsell.title": "Accedi più velocemente la prossima volta",
 		"passkey-upsell.description": "Nessuna password necessaria.",
@@ -9208,12 +9883,12 @@ const builtinLocales = {
 		"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.field.country": "Paese",
+		"register.field.country.placeholder": "Seleziona il tuo paese",
+		"register.field.terms": "Accetto i termini di servizio",
 		"register.action.password": "Continua con password",
 		"register.action.passkey": "Continua con passkey",
 		"register.action.submit": "Registrati",
@@ -10950,11 +11625,13 @@ const manifestRegistry = [
 	zlAlertManifest,
 	zlButtonManifest,
 	zlCardManifest,
+	zlCheckboxManifest,
 	zlFieldManifest,
 	zlIconManifest,
 	zlPageShellManifest,
 	zlPasskeyManifest,
-	zlPillManifest
+	zlPillManifest,
+	zlSelectManifest
 ];
 function findManifest(tag) {
 	return manifestRegistry.find((manifest) => manifest.tag === tag);
@@ -11496,7 +12173,7 @@ let ZitadelLogin = class ZitadelLogin extends i$2 {
 			actions,
 			gates: step.gates ?? {},
 			sso_providers: step.sso_providers ?? [],
-			challenge: step.challenge ?? null,
+			challenge: this.loading ? null : step.challenge ?? null,
 			messages: [],
 			identity: this.deriveIdentity(),
 			errors,
@@ -12184,4 +12861,4 @@ function fillTemplateTokens(fragment, name, email, initial) {
 	}
 }
 //#endregion
-export { TEMPLATE_NAMES, ThemeController, ZitadelLogin, ZitadelLogout, ZlAlert, ZlButton, ZlCard, ZlField, ZlIcon, ZlPageShell, ZlPill, applyBrandingTokens, applyFontUrl, baseHostStyles, buildBrandingStylesheet, builtinLocales, createSanitiser, cssVars, de, default_default as defaultTemplate, en, findManifest, focusVisibleStyles, getCurrentStep, layout_chrome_default as layoutChromeCss, listKnownTags, manifestRegistry, patchMandatoryGates, resolveTheme, startFlow, submitStep, t, tokens, validateBranding, zlAlertManifest, zlButtonManifest, zlCardManifest, zlFieldManifest, zlIconManifest, zlPageShellManifest, zlPillManifest };
+export { TEMPLATE_NAMES, ThemeController, ZitadelLogin, ZitadelLogout, ZlAlert, ZlButton, ZlCard, ZlCheckbox, ZlField, ZlIcon, ZlPageShell, ZlPill, ZlSelect, applyBrandingTokens, applyFontUrl, baseHostStyles, buildBrandingStylesheet, builtinLocales, createSanitiser, cssVars, de, default_default as defaultTemplate, en, findManifest, focusVisibleStyles, getCurrentStep, layout_chrome_default as layoutChromeCss, listKnownTags, manifestRegistry, patchMandatoryGates, resolveTheme, startFlow, submitStep, t, tokens, validateBranding, zlAlertManifest, zlButtonManifest, zlCardManifest, zlCheckboxManifest, zlFieldManifest, zlIconManifest, zlPageShellManifest, zlPillManifest, zlSelectManifest };