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

package/dist/{atoms-BHSt5lSe.mjs → atoms-BSwVl736.mjs}

@@ -3,7 +3,7 @@ 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";
 import { unsafeSVG } from "lit/directives/unsafe-svg.js";
-import { ArrowLeft, ArrowRight, Check, CircleAlert, Eye, EyeOff, Info, KeyRound, LoaderCircle, Plus, TriangleAlert, User, X } from "lucide";
+import { ArrowLeft, ArrowRight, Check, ChevronDown, CircleAlert, Eye, EyeOff, Info, KeyRound, LoaderCircle, Plus, TriangleAlert, User, X } from "lucide";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { live } from "lit/directives/live.js";
 //#region ../shared-component-styles/src/lit/alert-host.css?inline
@@ -86,7 +86,7 @@ function surfaceStyles(...cssChunks) {
 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 \0@oxc-project+runtime@0.127.0/helpers/decorate.js
 function __decorate(decorators, target, key, desc) {
@@ -186,6 +186,7 @@ const ICON_NODES = {
 	"arrow-left": ArrowLeft,
 	spinner: LoaderCircle,
 	check: Check,
+	"chevron-down": ChevronDown,
 	cross: X,
 	warning: TriangleAlert,
 	"alert-circle": CircleAlert,
@@ -543,7 +544,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 LitElement {
@@ -612,11 +613,11 @@ const zlCardManifest = {
 	events: []
 };
 //#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
 /**
@@ -636,6 +637,215 @@ function nextUid(prefix) {
 	return `${prefix}-${counter}`;
 }
 //#endregion
+//#region src/atoms/zl-checkbox.ts
+let ZlCheckbox = class ZlCheckbox extends LitElement {
+	static formAssociated = true;
+	static shadowRootOptions = {
+		...LitElement.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 = classMap({
+			"zr-checkbox": true,
+			"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>
+          </span>
+        </span>
+        ${labelText ? html`<span class="zr-checkbox__label" part="label">${labelText}</span>` : html`<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([property()], ZlCheckbox.prototype, "label", null);
+__decorate([property()], ZlCheckbox.prototype, "value", null);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], ZlCheckbox.prototype, "checked", null);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], ZlCheckbox.prototype, "disabled", null);
+__decorate([property({ type: Boolean })], ZlCheckbox.prototype, "required", 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);
+__decorate([query(".zr-checkbox__input")], ZlCheckbox.prototype, "inputEl", null);
+ZlCheckbox = __decorate([customElement("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 LitElement {
 	static formAssociated = true;
@@ -1076,7 +1286,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 LitElement {
@@ -1459,6 +1669,402 @@ const zlPillManifest = {
 	events: []
 };
 //#endregion
-export { __decorate as _, ZlPageShell as a, t as b, zlFieldManifest as c, ZlButton as d, zlButtonManifest as f, zlIconManifest as g, ZlIcon as h, zlPasskeyManifest as i, ZlCard as l, zlAlertManifest as m, zlPillManifest as n, zlPageShellManifest as o, ZlAlert as p, ZlPasskey as r, ZlField as s, ZlPill as t, zlCardManifest as u, focusVisibleStyles as v, emit as x, baseHostStyles as y };
+//#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 LitElement {
+	static formAssociated = true;
+	static shadowRootOptions = {
+		...LitElement.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 html`
+      <div class=${classMap({
+			"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 : 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())}
+            ?disabled=${this.disabled}
+            @click=${this.handleTriggerClick}
+            @keydown=${this.handleTriggerKeyDown}
+          >
+            <span
+              class=${classMap({
+			"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 : nothing}
+            ?hidden=${!this.open}
+          >
+            ${this.options.map((option, index) => this.renderOption(option, index))}
+          </ul>
+        </div>
+      </div>
+    `;
+	}
+	renderLabel(labelId) {
+		if (!this.label) return null;
+		return html`
+      <label class="zr-select__label" part="label" id=${labelId} @click=${this.handleLabelClick}>
+        <span>${this.label}</span>
+        ${this.required ? html`<span class="zr-select__required" aria-hidden="true">*</span>` : null}
+      </label>
+    `;
+	}
+	renderOption(option, index) {
+		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)}
+      >
+        <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([property()], ZlSelect.prototype, "label", null);
+__decorate([property()], ZlSelect.prototype, "value", null);
+__decorate([property()], ZlSelect.prototype, "placeholder", null);
+__decorate([property({
+	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([property({ type: Boolean })], ZlSelect.prototype, "required", null);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], ZlSelect.prototype, "disabled", null);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], 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);
+ZlSelect = __decorate([customElement("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
+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 };
 
-//# sourceMappingURL=atoms-BHSt5lSe.mjs.map
+//# sourceMappingURL=atoms-BSwVl736.mjs.map