@zitadel/components 0.1.0-alpha.9 → 1.0.0-alpha.21

package/dist/atoms-DSxjEHca.mjs

@@ -0,0 +1,2268 @@
+import { n as cssVars } from "./tokens-T4N9VJz3.mjs";
+import { LitElement, css, html, nothing, unsafeCSS } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { unsafeSVG } from "lit/directives/unsafe-svg.js";
+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 src/atoms/zl-alert.css?inline
+var zl_alert_default = ":host {\n  display: block;\n}\n\n.zr-alert {\n  align-items: flex-start;\n  gap: var(--zl-spacing-2);\n  padding-block: var(--zl-spacing-3);\n  padding-inline: var(--zl-spacing-4);\n  background: var(--zl-muted);\n  color: var(--zl-foreground);\n  border: 1px solid var(--zl-border);\n  border-radius: var(--zl-radius-lg);\n  font-family: var(--zl-font-family-sans);\n  font-size: var(--zl-text-sm-size);\n  line-height: var(--zl-text-sm-leading);\n  display: flex;\n}\n\n.zr-alert__icon {\n  color: currentColor;\n  flex-shrink: 0;\n  padding-block-start: var(--zl-spacing-0-5);\n}\n\n.zr-alert__body {\n  gap: var(--zl-spacing-0-5);\n  flex-direction: column;\n  flex: auto;\n  min-width: 0;\n  display: flex;\n}\n\n.zr-alert__title {\n  font-family: var(--zl-font-family-heading);\n  color: var(--zl-foreground);\n}\n\n.zr-alert__message {\n  color: var(--zl-muted-foreground);\n  margin: 0;\n}\n\n.zr-alert:not(:has(.zr-alert__title)) .zr-alert__message {\n  color: var(--zl-foreground);\n}\n\n.zr-alert--error, .zr-alert--error .zr-alert__title {\n  color: var(--zl-destructive);\n}\n\n.zr-alert--success .zr-alert__icon {\n  color: var(--zl-success);\n}\n\n.zr-alert--warning .zr-alert__icon, .zr-alert--info .zr-alert__icon {\n  color: var(--zl-muted-foreground);\n}\n\n.zr-alert__close {\n  all: unset;\n  width: var(--zl-spacing-6);\n  height: var(--zl-spacing-6);\n  border-radius: var(--zl-radius-md);\n  color: var(--zl-muted-foreground);\n  cursor: pointer;\n  transition: background-color var(--zl-duration-fast) var(--zl-easing-standard);\n  flex-shrink: 0;\n  justify-content: center;\n  align-items: center;\n  display: inline-flex;\n}\n\n.zr-alert__close .zr-icon {\n  --zl-icon-size: var(--zl-spacing-4);\n  width: var(--zl-spacing-4);\n  height: var(--zl-spacing-4);\n}\n\n.zr-alert__close:hover {\n  background: var(--zl-accent);\n  color: var(--zl-accent-foreground);\n}\n\n.zr-alert__close:focus-visible {\n  outline: var(--zl-focus-width) solid var(--zl-ring);\n  outline-offset: var(--zl-focus-offset);\n}\n";
+//#endregion
+//#region src/internal/emit.ts
+/**
+* Dispatch a custom event with the project-wide defaults (`bubbles` +
+* `composed`) so it crosses the shadow boundary and reaches delegated
+* listeners — whether it's an atom's `zl-*` event or the orchestrator's
+* public `zitadel-*` event.
+*
+* Centralising the dispatch shape keeps every event contract identical and
+* removes the repeated `new CustomEvent(..., { bubbles: true, composed: true,
+* detail })` boilerplate.
+*/
+function emit(host, type, detail) {
+	return host.dispatchEvent(new CustomEvent(type, {
+		bubbles: true,
+		composed: true,
+		detail
+	}));
+}
+//#endregion
+//#region src/styles/tokens.ts
+function wrap(node) {
+	if (typeof node === "string") return unsafeCSS(node);
+	const out = {};
+	for (const [key, value] of Object.entries(node)) out[key] = wrap(value);
+	return out;
+}
+const t = wrap(cssVars);
+//#endregion
+//#region src/styles/base.ts
+/**
+* Shared shadow-root base styles. Each atom prepends this fragment to its own
+* `static styles` so font/colour inheritance, box-sizing, and resets stay
+* consistent without forcing a global stylesheet on the host page.
+*/
+const baseHostStyles = css`
+  :host {
+    box-sizing: border-box;
+    font-family: ${t.font.family.sans};
+    color: ${t.theme.foreground};
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+  }
+  *,
+  *::before,
+  *::after {
+    box-sizing: inherit;
+  }
+`;
+//#endregion
+//#region src/styles/focus-ring.ts
+/**
+* Visible focus indicator shared across interactive atoms. Applied via
+* `&:focus-visible { ${focusVisibleStyles} }`. The colour is the `ring` role —
+* the design system's one focus colour, mode-aware so the ring stays visible on
+* a light surface as well as a dark one.
+*/
+const focusVisibleStyles = css`
+  outline: ${t.focus.width} solid ${t.theme.ring};
+  outline-offset: ${t.focus.offset};
+`;
+//#endregion
+//#region src/styles/surface.ts
+/**
+* Wrap an atom's co-located `.css` file for Lit `static styles`. Import it as
+* `./zl-<atom>.css?inline`; `@tsdown/css` inlines the string when `components`
+* is built, and Vite does the same in dev and vitest.
+*/
+function surfaceStyles(...cssChunks) {
+	return cssChunks.map((chunk) => unsafeCSS(chunk));
+}
+//#endregion
+//#region src/atoms/zl-icon.css?inline
+var zl_icon_default = ":host {\n  color: inherit;\n  display: contents;\n}\n\n.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-destructive);\n}\n\n.zr-icon--tone-success {\n  color: var(--zl-success);\n}\n\n.zr-icon--tone-disabled {\n  color: var(--zl-muted-foreground);\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) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+//#endregion
+//#region src/atoms/zl-icon.ts
+let ZlIcon = class ZlIcon extends LitElement {
+	static styles = surfaceStyles(zl_icon_default);
+	#_name_accessor_storage = "plus";
+	get name() {
+		return this.#_name_accessor_storage;
+	}
+	set name(value) {
+		this.#_name_accessor_storage = value;
+	}
+	#_size_accessor_storage = "24";
+	get size() {
+		return this.#_size_accessor_storage;
+	}
+	set size(value) {
+		this.#_size_accessor_storage = value;
+	}
+	#_tone_accessor_storage = "default";
+	get tone() {
+		return this.#_tone_accessor_storage;
+	}
+	set tone(value) {
+		this.#_tone_accessor_storage = value;
+	}
+	#_spin_accessor_storage = false;
+	get spin() {
+		return this.#_spin_accessor_storage;
+	}
+	set spin(value) {
+		this.#_spin_accessor_storage = value;
+	}
+	#_decorative_accessor_storage = false;
+	get decorative() {
+		return this.#_decorative_accessor_storage;
+	}
+	set decorative(value) {
+		this.#_decorative_accessor_storage = value;
+	}
+	#_label_accessor_storage = void 0;
+	get label() {
+		return this.#_label_accessor_storage;
+	}
+	set label(value) {
+		this.#_label_accessor_storage = value;
+	}
+	render() {
+		const ariaLabel = this.label ?? DEFAULT_LABELS[this.name];
+		const hidden = this.decorative || !ariaLabel;
+		return html`
+      <span class=${classMap({
+			"zr-icon": true,
+			[`zr-icon--${this.size}`]: true,
+			[`zr-icon--tone-${this.tone}`]: this.tone !== "default",
+			"zr-icon--spin": this.spin
+		})}>
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          role=${hidden ? "presentation" : "img"}
+          aria-hidden=${hidden ? "true" : "false"}
+          aria-label=${hidden ? nothing : ariaLabel}
+        >${unsafeSVG(ICON_MARKUP[this.name])}</svg>
+      </span>
+    `;
+	}
+};
+__decorate([property()], ZlIcon.prototype, "name", null);
+__decorate([property({ reflect: true })], ZlIcon.prototype, "size", null);
+__decorate([property({ reflect: true })], ZlIcon.prototype, "tone", null);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], ZlIcon.prototype, "spin", null);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], ZlIcon.prototype, "decorative", null);
+__decorate([property()], ZlIcon.prototype, "label", null);
+ZlIcon = __decorate([customElement("zl-icon")], ZlIcon);
+/** Curated mapping from our public name to a Lucide canonical icon. */
+const ICON_NODES = {
+	plus: Plus,
+	"arrow-right": ArrowRight,
+	"arrow-left": ArrowLeft,
+	spinner: LoaderCircle,
+	check: Check,
+	"chevron-down": ChevronDown,
+	cross: X,
+	warning: TriangleAlert,
+	"alert-circle": CircleAlert,
+	info: Info,
+	passkey: KeyRound,
+	user: User,
+	eye: Eye,
+	"eye-off": EyeOff
+};
+const DEFAULT_LABELS = {
+	spinner: "Loading",
+	warning: "Warning",
+	"alert-circle": "Alert",
+	info: "Information",
+	passkey: "Passkey",
+	user: "User",
+	eye: "Show",
+	"eye-off": "Hide"
+};
+const ICON_MARKUP = Object.fromEntries(Object.entries(ICON_NODES).map(([name, node]) => [name, nodeToSvgMarkup(node)]));
+function nodeToSvgMarkup(node) {
+	return node.map(([tag, attrs]) => {
+		return `<${tag} ${Object.entries(attrs).filter(([, value]) => value !== void 0).map(([key, value]) => `${key}="${String(value)}"`).join(" ")}/>`;
+	}).join("");
+}
+const zlIconManifest = {
+	tag: "zl-icon",
+	attrs: [
+		"name",
+		"size",
+		"tone",
+		"spin",
+		"decorative",
+		"label"
+	],
+	parts: [],
+	slots: [],
+	events: []
+};
+//#endregion
+//#region src/atoms/zl-alert.ts
+let ZlAlert = class ZlAlert extends LitElement {
+	static styles = [baseHostStyles, ...surfaceStyles(zl_alert_default)];
+	#_severity_accessor_storage = "error";
+	get severity() {
+		return this.#_severity_accessor_storage;
+	}
+	set severity(value) {
+		this.#_severity_accessor_storage = value;
+	}
+	#_heading_accessor_storage = void 0;
+	get heading() {
+		return this.#_heading_accessor_storage;
+	}
+	set heading(value) {
+		this.#_heading_accessor_storage = value;
+	}
+	#_dismissible_accessor_storage = false;
+	get dismissible() {
+		return this.#_dismissible_accessor_storage;
+	}
+	set dismissible(value) {
+		this.#_dismissible_accessor_storage = value;
+	}
+	render() {
+		const iconName = ICON_FOR_SEVERITY[this.severity];
+		return html`
+      <div
+        class="zr-alert zr-alert--${this.severity}"
+        part="alert"
+        role=${this.severity === "error" ? "alert" : "status"}
+        aria-live=${this.severity === "error" ? "assertive" : "polite"}
+      >
+        <zl-icon class="zr-alert__icon" part="icon" name=${iconName} size="16" decorative></zl-icon>
+        <div class="zr-alert__body" part="body">
+          ${this.heading ? html`<span class="zr-alert__title" part="title">${this.heading}</span>` : null}
+          <div class="zr-alert__message" part="message">
+            <slot></slot>
+          </div>
+        </div>
+        ${this.dismissible ? html`<button
+              type="button"
+              class="zr-alert__close"
+              part="close"
+              aria-label="Dismiss"
+              @click=${this.handleDismiss}
+            >
+              <zl-icon name="cross" size="16" label="Dismiss" decorative></zl-icon>
+            </button>` : null}
+      </div>
+    `;
+	}
+	handleDismiss = () => {
+		emit(this, "zl-dismiss");
+		this.remove();
+	};
+};
+__decorate([property({ reflect: true })], ZlAlert.prototype, "severity", null);
+__decorate([property()], ZlAlert.prototype, "heading", null);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], ZlAlert.prototype, "dismissible", null);
+ZlAlert = __decorate([customElement("zl-alert")], ZlAlert);
+const ICON_FOR_SEVERITY = {
+	error: "alert-circle",
+	warning: "alert-circle",
+	success: "check",
+	info: "info"
+};
+const zlAlertManifest = {
+	tag: "zl-alert",
+	attrs: [
+		"severity",
+		"heading",
+		"dismissible"
+	],
+	parts: [
+		"alert",
+		"icon",
+		"body",
+		"title",
+		"message",
+		"close"
+	],
+	slots: [""],
+	events: ["zl-dismiss"]
+};
+//#endregion
+//#region src/atoms/zl-button.css?inline
+var zl_button_default = ":host {\n  display: inline-flex;\n}\n\n:host([block]) {\n  width: 100%;\n  display: flex;\n}\n\n:host([hierarchy=\"primary\"]) {\n  color: var(--zl-primary-foreground);\n}\n\n:host([hierarchy=\"secondary\"]) {\n  color: var(--zl-secondary-foreground);\n}\n\n:host([hierarchy=\"text\"]) {\n  color: var(--zl-foreground);\n}\n\n:host([disabled]) {\n  color: var(--zl-muted-foreground);\n}\n\n::slotted([slot=\"leading\"]), ::slotted([slot=\"trailing\"]) {\n  align-items: center;\n  display: inline-flex;\n}\n\n.zr-btn .spinner {\n  display: inline-flex;\n}\n\n:where(.zr-btn) {\n  all: unset;\n  box-sizing: border-box;\n  cursor: pointer;\n  justify-content: center;\n  align-items: center;\n  gap: var(--zl-spacing-1-5);\n  width: max-content;\n  padding-inline: var(--zl-spacing-4);\n  padding-block: var(--zl-spacing-2);\n  border-radius: var(--zl-radius-md);\n  font-family: var(--zl-font-family-sans);\n  font-weight: var(--zl-font-weight-medium);\n  text-align: center;\n  white-space: nowrap;\n  transition: background-color var(--zl-duration-fast) var(--zl-easing-standard),\n    color var(--zl-duration-fast) var(--zl-easing-standard),\n    border-color var(--zl-duration-fast) var(--zl-easing-standard);\n  border: 1px solid #0000;\n  display: inline-flex;\n}\n\n.zr-btn--block {\n  width: 100%;\n  display: flex;\n}\n\n.zr-btn--medium {\n  height: var(--zl-spacing-9);\n  font-size: var(--zl-text-sm-size);\n  line-height: var(--zl-text-sm-leading);\n}\n\n.zr-btn--small {\n  height: var(--zl-spacing-8);\n  padding-inline: var(--zl-spacing-3);\n  font-size: var(--zl-text-sm-size);\n  line-height: var(--zl-text-sm-leading);\n}\n\n.zr-btn:focus-visible, .zr-btn[data-state=\"focused\"] {\n  outline: var(--zl-focus-width) solid var(--zl-ring);\n  outline-offset: var(--zl-focus-offset);\n}\n\n.zr-btn--primary {\n  background: var(--zl-primary);\n  color: var(--zl-primary-foreground);\n}\n\n.zr-btn--secondary {\n  background: var(--zl-secondary);\n  color: var(--zl-secondary-foreground);\n}\n\n.zr-btn--text {\n  color: var(--zl-foreground);\n  background: none;\n}\n\n.zr-btn--primary:hover:not(:disabled), .zr-btn--primary[data-state=\"hovered\"]:not(:disabled) {\n  background: color-mix(in srgb, var(--zl-primary) 90%, var(--zl-background));\n}\n\n.zr-btn--secondary:hover:not(:disabled), .zr-btn--secondary[data-state=\"hovered\"]:not(:disabled) {\n  background: color-mix(in srgb, var(--zl-secondary) 80%, var(--zl-foreground));\n}\n\n.zr-btn--text:hover:not(:disabled), .zr-btn--text[data-state=\"hovered\"]:not(:disabled) {\n  background: var(--zl-accent);\n  color: var(--zl-accent-foreground);\n}\n\n.zr-btn--primary:active:not(:disabled), .zr-btn--primary[data-state=\"pressed\"]:not(:disabled) {\n  background: color-mix(in srgb, var(--zl-primary) 80%, var(--zl-background));\n}\n\n.zr-btn--secondary:active:not(:disabled), .zr-btn--secondary[data-state=\"pressed\"]:not(:disabled), .zr-btn--text:active:not(:disabled), .zr-btn--text[data-state=\"pressed\"]:not(:disabled) {\n  background: color-mix(in srgb, var(--zl-accent) 80%, var(--zl-foreground));\n}\n\n.zr-btn:disabled {\n  cursor: not-allowed;\n  opacity: .5;\n}\n";
+//#endregion
+//#region src/atoms/zl-button.ts
+let ZlButton = class ZlButton extends LitElement {
+	static formAssociated = true;
+	static shadowRootOptions = {
+		...LitElement.shadowRootOptions,
+		delegatesFocus: true
+	};
+	static styles = [baseHostStyles, ...surfaceStyles(zl_button_default)];
+	#_hierarchy_accessor_storage = "primary";
+	get hierarchy() {
+		return this.#_hierarchy_accessor_storage;
+	}
+	set hierarchy(value) {
+		this.#_hierarchy_accessor_storage = value;
+	}
+	#_size_accessor_storage = "medium";
+	get size() {
+		return this.#_size_accessor_storage;
+	}
+	set size(value) {
+		this.#_size_accessor_storage = value;
+	}
+	#_type_accessor_storage = "button";
+	get type() {
+		return this.#_type_accessor_storage;
+	}
+	set type(value) {
+		this.#_type_accessor_storage = value;
+	}
+	#_action_accessor_storage = void 0;
+	get action() {
+		return this.#_action_accessor_storage;
+	}
+	set action(value) {
+		this.#_action_accessor_storage = value;
+	}
+	#_loading_accessor_storage = false;
+	get loading() {
+		return this.#_loading_accessor_storage;
+	}
+	set loading(value) {
+		this.#_loading_accessor_storage = value;
+	}
+	#_disabled_accessor_storage = false;
+	get disabled() {
+		return this.#_disabled_accessor_storage;
+	}
+	set disabled(value) {
+		this.#_disabled_accessor_storage = value;
+	}
+	#_block_accessor_storage = false;
+	get block() {
+		return this.#_block_accessor_storage;
+	}
+	set block(value) {
+		this.#_block_accessor_storage = value;
+	}
+	#_label_accessor_storage = void 0;
+	get label() {
+		return this.#_label_accessor_storage;
+	}
+	set label(value) {
+		this.#_label_accessor_storage = value;
+	}
+	#_testId_accessor_storage = void 0;
+	get testId() {
+		return this.#_testId_accessor_storage;
+	}
+	set testId(value) {
+		this.#_testId_accessor_storage = value;
+	}
+	#_forcedState_accessor_storage = null;
+	get forcedState() {
+		return this.#_forcedState_accessor_storage;
+	}
+	set forcedState(value) {
+		this.#_forcedState_accessor_storage = value;
+	}
+	internals;
+	constructor() {
+		super();
+		this.internals = this.attachInternals();
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener("click", this.handleHostClick);
+	}
+	disconnectedCallback() {
+		this.removeEventListener("click", this.handleHostClick);
+		super.disconnectedCallback();
+	}
+	focus(options) {
+		this.shadowRoot?.querySelector("button")?.focus(options);
+	}
+	render() {
+		const hierarchy = this.stringOption("hierarchy", this.hierarchy, "primary");
+		const size = this.stringOption("size", this.size, "medium");
+		const type = this.buttonType();
+		const loading = this.booleanOption("loading", this.loading);
+		const disabled = this.booleanOption("disabled", this.disabled);
+		const block = this.booleanOption("block", this.block);
+		const label = this.stringOption("label", this.label);
+		const blocked = disabled || loading;
+		const body = label !== void 0 ? html`<span>${label}</span>` : html`<slot></slot>`;
+		return html`
+      <button
+        class=${classMap({
+			root: true,
+			"zr-btn": true,
+			[`zr-btn--${hierarchy}`]: true,
+			[`zr-btn--${size}`]: true,
+			"zr-btn--block": block
+		})}
+        part="root"
+        type=${type}
+        ?disabled=${blocked}
+        aria-busy=${loading ? "true" : "false"}
+        data-testid=${this.nativeButtonTestId() ?? nothing}
+        data-state=${this.forcedState ?? nothing}
+        @click=${this.handleClick}
+      >
+        <slot name="leading"></slot>
+        ${body}
+        ${loading ? html`<span class="spinner" part="spinner"><zl-icon name="spinner" size=${size === "small" ? "16" : "24"} spin decorative></zl-icon></span>` : html`<slot name="trailing"></slot>`}
+      </button>
+    `;
+	}
+	handleClick = (event) => {
+		this.activate(event);
+	};
+	handleHostClick = (event) => {
+		if (event.composedPath()[0] !== this) return;
+		this.activate(event);
+	};
+	nativeButtonTestId() {
+		const testId = this.stringOption("data-testid", this.testId);
+		if (testId) return `${testId}-button`;
+		const action = this.buttonAction();
+		return action ? `zitadel-action-${action}` : void 0;
+	}
+	buttonType() {
+		const type = this.stringOption("type", this.type, "button");
+		return type === "submit" || type === "reset" ? type : "button";
+	}
+	buttonAction() {
+		return this.stringOption("action", this.action);
+	}
+	activate(event) {
+		const type = this.buttonType();
+		const action = this.buttonAction();
+		if (this.booleanOption("disabled", this.disabled) || this.booleanOption("loading", this.loading)) {
+			event.preventDefault();
+			event.stopImmediatePropagation();
+			return;
+		}
+		const form = this.internals.form;
+		if (type === "submit" && form) {
+			event.preventDefault();
+			form.requestSubmit();
+			return;
+		}
+		if (type === "reset" && form) {
+			event.preventDefault();
+			form.reset();
+		}
+		emit(this, "zl-submit", { action: action ?? null });
+	}
+	stringOption(attribute, value, fallback) {
+		if (typeof value === "string" && value.length > 0) return value;
+		const attr = this.getAttribute(attribute);
+		if (attr !== null && attr.length > 0) return attr;
+		return fallback;
+	}
+	booleanOption(attribute, value) {
+		return value === true || this.hasAttribute(attribute);
+	}
+};
+__decorate([property({ reflect: true })], ZlButton.prototype, "hierarchy", null);
+__decorate([property({ reflect: true })], ZlButton.prototype, "size", null);
+__decorate([property()], ZlButton.prototype, "type", null);
+__decorate([property()], ZlButton.prototype, "action", null);
+__decorate([property({ type: Boolean })], ZlButton.prototype, "loading", null);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], ZlButton.prototype, "disabled", null);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], ZlButton.prototype, "block", null);
+__decorate([property()], ZlButton.prototype, "label", null);
+__decorate([property({ attribute: "data-testid" })], ZlButton.prototype, "testId", null);
+__decorate([property({ attribute: "data-state" })], ZlButton.prototype, "forcedState", null);
+ZlButton = __decorate([customElement("zl-button")], ZlButton);
+const zlButtonManifest = {
+	tag: "zl-button",
+	consumes: { action: {
+		kind: "submit",
+		required: false
+	} },
+	attrs: [
+		"hierarchy",
+		"size",
+		"type",
+		"action",
+		"loading",
+		"disabled",
+		"block",
+		"label",
+		"data-testid"
+	],
+	parts: ["root", "spinner"],
+	slots: [
+		"",
+		"leading",
+		"trailing"
+	],
+	events: ["zl-submit"]
+};
+//#endregion
+//#region src/atoms/zl-card.css?inline
+var zl_card_default = ":host {\n  width: 100%;\n  max-width: var(--zl-container-auth-card);\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\n:host([data-suppress-header]) .zr-card__header {\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  position: absolute;\n  overflow: hidden;\n}\n\n.zr-card {\n  gap: var(--zl-spacing-6);\n  padding-block: var(--zl-spacing-6);\n  background: var(--zl-card);\n  color: var(--zl-card-foreground);\n  border: 1px solid var(--zl-border);\n  border-radius: var(--zl-radius-xl);\n  box-shadow: var(--zl-shadow-sm);\n  flex-direction: column;\n  display: flex;\n}\n\n.zr-card__header, .zr-card__body, .zr-card__footer {\n  padding-inline: var(--zl-spacing-6);\n}\n\n.zr-card__header, .zr-card__footer {\n  gap: var(--zl-spacing-1-5);\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-7);\n  flex-direction: column;\n  display: flex;\n}\n\n.zr-card--compact {\n  gap: var(--zl-spacing-4);\n}\n";
+//#endregion
+//#region src/atoms/zl-card.ts
+let ZlCard = class ZlCard extends LitElement {
+	static styles = [baseHostStyles, ...surfaceStyles(zl_card_default)];
+	#_compact_accessor_storage = false;
+	get compact() {
+		return this.#_compact_accessor_storage;
+	}
+	set compact(value) {
+		this.#_compact_accessor_storage = value;
+	}
+	render() {
+		const hasHeader = this.lightDomSlotFilled("header");
+		const hasFooter = this.lightDomSlotFilled("footer");
+		const cardClass = this.compact ? "zr-card zr-card--compact" : "zr-card";
+		const headerClass = hasHeader ? "zr-card__header" : "zr-card__header zr-card__region--empty";
+		const footerClass = hasFooter ? "zr-card__footer" : "zr-card__footer zr-card__region--empty";
+		return html`
+      <section class=${cardClass} part="card">
+        <header class=${headerClass} part="header">
+          <slot name="header" @slotchange=${this.onSlotChange}></slot>
+        </header>
+        <div class="zr-card__body" part="body">
+          <slot></slot>
+        </div>
+        <footer class=${footerClass} part="footer">
+          <slot name="footer" @slotchange=${this.onSlotChange}></slot>
+        </footer>
+      </section>
+    `;
+	}
+	/**
+	* `lightDomSlotFilled` is a render-time snapshot, so re-run render whenever a
+	* named slot's assignment changes (e.g. a header added after first paint).
+	* The initial render still reads children synchronously, avoiding the
+	* empty-then-filled flash a slotchange-only approach would introduce.
+	*/
+	onSlotChange = () => {
+		this.requestUpdate();
+	};
+	/** Slotted nodes are always light-DOM children of the host in our templates. */
+	lightDomSlotFilled(slot) {
+		for (const child of this.children) if (child.getAttribute("slot") === slot) return true;
+		return false;
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], ZlCard.prototype, "compact", null);
+ZlCard = __decorate([customElement("zl-card")], ZlCard);
+const zlCardManifest = {
+	tag: "zl-card",
+	attrs: ["compact"],
+	parts: [
+		"card",
+		"header",
+		"body",
+		"footer"
+	],
+	slots: [
+		"",
+		"header",
+		"footer"
+	],
+	events: []
+};
+//#endregion
+//#region src/atoms/zl-checkbox.css?inline
+var zl_checkbox_default = ":host {\n  display: inline-flex;\n}\n\n:host([disabled]) {\n  cursor: not-allowed;\n}\n\n.zr-checkbox-field {\n  align-items: flex-start;\n  gap: var(--zl-spacing-1);\n  flex-direction: column;\n  display: inline-flex;\n}\n\n.zr-checkbox {\n  align-items: center;\n  gap: var(--zl-spacing-2);\n  font-family: var(--zl-font-family-sans);\n  cursor: pointer;\n  -webkit-user-select: none;\n  user-select: none;\n  display: inline-flex;\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  width: var(--zl-spacing-4);\n  height: var(--zl-spacing-4);\n  flex-shrink: 0;\n  justify-content: center;\n  align-items: center;\n  display: inline-flex;\n  position: relative;\n}\n\n.zr-checkbox__box:before {\n  content: \"\";\n  width: var(--zl-spacing-8);\n  height: var(--zl-spacing-8);\n  background: var(--zl-popover);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity var(--zl-duration-fast)\n    var(--zl-easing-standard);\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  width: var(--zl-spacing-4);\n  height: var(--zl-spacing-4);\n  border: 1px solid var(--zl-input);\n  border-radius: var(--zl-radius-xs);\n  transition: border-color var(--zl-duration-fast) var(--zl-easing-standard),\n    background-color var(--zl-duration-fast) var(--zl-easing-standard);\n  background: none;\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-primary-foreground);\n  opacity: 0;\n  display: inline-flex;\n}\n\n.zr-checkbox__label {\n  font-size: var(--zl-text-sm-size);\n  line-height: var(--zl-text-sm-leading);\n  font-weight: var(--zl-font-weight-normal);\n  color: var(--zl-foreground);\n}\n\n.zr-checkbox__input:checked + .zr-checkbox__box .zr-checkbox__face {\n  border-color: var(--zl-primary);\n  background: var(--zl-primary);\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-muted-foreground);\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-muted-foreground);\n  background: var(--zl-muted-foreground);\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-primary);\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-primary);\n  background: var(--zl-primary);\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-muted-foreground);\n}\n\n.zr-checkbox--disabled .zr-checkbox__input:checked + .zr-checkbox__box .zr-checkbox__face {\n  border-color: var(--zl-muted-foreground);\n  background: var(--zl-muted-foreground);\n}\n\n.zr-checkbox--disabled .zr-checkbox__label {\n  color: var(--zl-muted-foreground);\n}\n\n.zr-checkbox--invalid .zr-checkbox__input:not(:checked) + .zr-checkbox__box .zr-checkbox__face {\n  border-color: var(--zl-destructive);\n}\n\n.zr-checkbox__error {\n  font-size: var(--zl-text-sm-size);\n  line-height: var(--zl-text-sm-leading);\n  color: var(--zl-destructive);\n}\n";
+//#endregion
+//#region src/internal/unique-id.ts
+/**
+* Monotonic counter for DOM IDs that need to be unique within a document but
+* stable across renders. Used by atoms that wire `<label for>` ↔ `<input id>`
+* inside their Shadow DOM.
+*
+* A counter beats `Math.random()` and `crypto.randomUUID()` here:
+*
+* - Tests get deterministic IDs.
+* - There's zero collision risk within a page.
+* - It's an order of magnitude faster on each component instantiation.
+*/
+let counter = 0;
+function nextUid(prefix) {
+	counter += 1;
+	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(zl_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;
+	}
+	#_error_accessor_storage = "";
+	get error() {
+		return this.#_error_accessor_storage;
+	}
+	set error(value) {
+		this.#_error_accessor_storage = value;
+	}
+	#_invalid_accessor_storage = false;
+	get invalid() {
+		return this.#_invalid_accessor_storage;
+	}
+	set invalid(value) {
+		this.#_invalid_accessor_storage = value;
+	}
+	#_ariaLabelText_accessor_storage = void 0;
+	get ariaLabelText() {
+		return this.#_ariaLabelText_accessor_storage;
+	}
+	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);
+	}
+	/**
+	* The string this control contributes to form submission — the uniform
+	* read/write contract `<zitadel-login>` uses to capture and restore field
+	* values without knowing each atom's internal shape. Like a native checkbox
+	* this is the value token only when checked, empty otherwise; assigning it
+	* back restores the checked state.
+	*/
+	get formValue() {
+		return this.checked ? this.value : "";
+	}
+	set formValue(value) {
+		this.checked = value !== "";
+	}
+	render() {
+		const errorId = `${this.inputId}-error`;
+		const showError = Boolean(this.error);
+		const rootClass = classMap({
+			"zr-checkbox": true,
+			"zr-checkbox--invalid": this.invalid || showError,
+			"zr-checkbox--disabled": this.disabled
+		});
+		const labelText = this.label;
+		return html`
+      <div class="zr-checkbox-field" part="field">
+        <label class=${rootClass} part="root" data-state=${this.forcedState ?? nothing}>
+          <input
+            class="zr-checkbox__input"
+            part="input"
+            id=${this.inputId}
+            type="checkbox"
+            name=${this.name || nothing}
+            .checked=${live(this.checked)}
+            value=${this.value}
+            ?required=${this.required}
+            ?disabled=${this.disabled}
+            aria-label=${ifDefined(labelText ? void 0 : this.ariaLabelText)}
+            aria-invalid=${this.invalid || showError ? "true" : "false"}
+            aria-describedby=${showError ? errorId : nothing}
+            data-testid=${ifDefined(this.nativeInputTestId())}
+            @change=${this.handleChange}
+          />
+          <span class="zr-checkbox__box" part="box">
+            <span class="zr-checkbox__face" part="face">
+              <zl-icon class="zr-checkbox__check" part="check" name="check" size="16" decorative></zl-icon>
+            </span>
+          </span>
+          ${labelText ? html`<span class="zr-checkbox__label" part="label">${labelText}</span>` : html`<slot></slot>`}
+        </label>
+        <div
+          class="zr-checkbox__error"
+          part="error"
+          id=${errorId}
+          role="alert"
+          ?hidden=${!showError}
+        >
+          ${this.error}
+        </div>
+      </div>
+    `;
+	}
+	handleChange = (event) => {
+		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()], ZlCheckbox.prototype, "error", null);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], ZlCheckbox.prototype, "invalid", null);
+__decorate([property({ attribute: "aria-label" })], ZlCheckbox.prototype, "ariaLabelText", null);
+__decorate([property({ attribute: "data-testid" })], ZlCheckbox.prototype, "testId", null);
+__decorate([property({ attribute: "data-state" })], ZlCheckbox.prototype, "forcedState", null);
+__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",
+		"error",
+		"invalid",
+		"aria-label",
+		"data-testid"
+	],
+	parts: [
+		"field",
+		"root",
+		"input",
+		"box",
+		"face",
+		"check",
+		"label",
+		"error"
+	],
+	slots: [""],
+	events: ["zl-change"]
+};
+//#endregion
+//#region src/atoms/zl-field.css?inline
+var zl_field_default = ":host {\n  display: block;\n}\n\n::slotted([slot=\"prefix\"]), ::slotted([slot=\"suffix\"]) {\n  color: var(--zl-muted-foreground);\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-ring);\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-ring);\n  box-shadow: 0 0 0 3px var(--zl-ring-outline),\n    var(--zl-shadow-xs);\n}\n\n:host([data-state=\"focused\"]:not([disabled])) .zr-field--invalid .zr-field__wrap {\n  border-color: var(--zl-destructive);\n  box-shadow: 0 0 0 3px var(--zl-destructive-ring),\n    var(--zl-shadow-xs);\n}\n\n.zr-field {\n  align-items: stretch;\n  gap: var(--zl-spacing-3);\n  font-family: var(--zl-font-family-sans);\n  flex-direction: column;\n  display: flex;\n}\n\n.zr-field__label-row {\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--zl-spacing-2);\n  width: 100%;\n  display: flex;\n}\n\n.zr-field__label {\n  align-items: center;\n  gap: var(--zl-spacing-1);\n  font-family: var(--zl-font-family-heading);\n  font-size: var(--zl-text-sm-size);\n  line-height: var(--zl-text-sm-leading);\n  color: var(--zl-foreground);\n  display: inline-flex;\n}\n\n.zr-field__link {\n  font-size: var(--zl-text-sm-size);\n  line-height: var(--zl-text-sm-leading);\n  color: inherit;\n  text-underline-offset: 4px;\n  flex-shrink: 0;\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) solid var(--zl-ring);\n  outline-offset: var(--zl-focus-offset);\n  border-radius: var(--zl-radius-xs);\n}\n\n.zr-field__required {\n  color: var(--zl-destructive);\n}\n\n.zr-field--disabled .zr-field__label {\n  color: var(--zl-muted-foreground);\n}\n\n.zr-field__wrap {\n  align-items: center;\n  gap: var(--zl-spacing-1);\n  height: var(--zl-spacing-9);\n  padding-block: var(--zl-spacing-1);\n  padding-inline: var(--zl-spacing-2-5);\n  border: 1px solid var(--zl-input);\n  border-radius: var(--zl-radius-md);\n  background: var(--zl-input-fill);\n  box-shadow: var(--zl-shadow-xs);\n  transition: border-color var(--zl-duration-fast) var(--zl-easing-standard),\n    box-shadow var(--zl-duration-fast) var(--zl-easing-standard);\n  display: flex;\n  position: relative;\n  overflow: visible;\n}\n\n.zr-field__wrap--trailing {\n  padding-inline-end: var(--zl-spacing-8);\n}\n\n.zr-field:not(.zr-field--disabled) .zr-field__wrap:hover:not(:focus-within) {\n  border-color: var(--zl-ring);\n}\n\n.zr-field:not(.zr-field--invalid):not(.zr-field--disabled) .zr-field__wrap:focus-within {\n  border-color: var(--zl-ring);\n  box-shadow: 0 0 0 3px var(--zl-ring-outline),\n    var(--zl-shadow-xs);\n  outline: none;\n}\n\n.zr-field--invalid .zr-field__wrap {\n  border-color: var(--zl-destructive);\n}\n\n.zr-field--invalid .zr-field__wrap:focus-within {\n  box-shadow: 0 0 0 3px var(--zl-destructive-ring),\n    var(--zl-shadow-xs);\n  outline: none;\n}\n\n.zr-field--success .zr-field__wrap {\n  border-color: var(--zl-success);\n}\n\n.zr-field--disabled .zr-field__wrap {\n  background: var(--zl-muted);\n  opacity: .5;\n}\n\n.zr-field--disabled .zr-field__wrap:hover {\n  border-color: var(--zl-input);\n}\n\n.zr-field__input {\n  min-width: 0;\n  height: 100%;\n  color: var(--zl-foreground);\n  font-family: inherit;\n  font-size: var(--zl-text-sm-size);\n  line-height: var(--zl-text-sm-leading);\n  font-weight: var(--zl-font-weight-normal);\n  background: none;\n  border: 0;\n  outline: none;\n  flex: auto;\n  padding: 0;\n}\n\n.zr-field__input[type=\"password\"] {\n  letter-spacing: .125rem;\n}\n\n.zr-field__input::placeholder {\n  color: var(--zl-muted-foreground);\n  letter-spacing: normal;\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}\n\n.zr-field__trailing {\n  right: var(--zl-spacing-2-5);\n  width: var(--zl-spacing-4);\n  height: var(--zl-spacing-4);\n  color: var(--zl-muted-foreground);\n  justify-content: center;\n  align-items: center;\n  display: inline-flex;\n  position: absolute;\n  top: 50%;\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) solid var(--zl-ring);\n  outline-offset: var(--zl-focus-offset);\n  border-radius: var(--zl-radius-xs);\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-destructive);\n}\n\n.zr-field--success .zr-field__trailing {\n  color: var(--zl-success);\n}\n\n.zr-field__help {\n  font-size: var(--zl-text-sm-size);\n  line-height: var(--zl-text-sm-leading);\n  color: var(--zl-muted-foreground);\n}\n\n.zr-field__success {\n  font-size: var(--zl-text-sm-size);\n  line-height: var(--zl-text-sm-leading);\n  color: var(--zl-success);\n}\n\n.zr-field__error {\n  font-size: var(--zl-text-sm-size);\n  line-height: var(--zl-text-sm-leading);\n  color: var(--zl-destructive);\n}\n";
+//#endregion
+//#region src/internal/hook-name.ts
+/**
+* Reserved auth-method credential prefix of flow field names. Mirrors
+* `AUTH_METHOD_PREFIX` in `@zitadel/config` (`src/validate.ts`), which
+* owns the wire dialect; components has no dependency on that package,
+* so the literal is repeated here.
+*/
+const AUTH_METHOD_PREFIX = "x-auth-methods#";
+/**
+* Normalises a flow field name into its automation-hook token.
+*
+* Auth-method credential fields arrive from the flow engine as
+* `x-auth-methods#<method>` (e.g. `x-auth-methods#password`), but the
+* documented `data-testid` hooks are method-named
+* (`zitadel-field-password`, `zitadel-input-password` — see
+* packages/components/README.md and apps/cli/SKILLS.md). This helper
+* feeds both hook construction sites: the bundled template's `testid`
+* Liquid filter and `<zl-field>`'s native-input testid.
+*
+* Only the reserved credential prefix is stripped — user-schema
+* property names are tenant-authored arbitrary strings, so a `#`
+* anywhere else is part of the name and stays in the hook. The
+* after-prefix token is used verbatim (no case or spacing changes),
+* and the field's `name` attribute always keeps the raw wire/form key.
+*/
+function hookName(field) {
+	if (field.startsWith(AUTH_METHOD_PREFIX) && field.length > 15) return field.slice(15);
+	return field;
+}
+//#endregion
+//#region src/atoms/zl-field.ts
+let ZlField = class ZlField extends LitElement {
+	static formAssociated = true;
+	static shadowRootOptions = {
+		...LitElement.shadowRootOptions,
+		delegatesFocus: true
+	};
+	static styles = [baseHostStyles, ...surfaceStyles(zl_field_default)];
+	/**
+	* Field name — used as the key in form submission and in `zl-input` event
+	* detail. For form-associated custom elements the browser owns a native
+	* `name` property; using `@property()` would create a conflicting accessor
+	* that loses sync with the DOM attribute. We therefore manage it manually.
+	*/
+	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;
+	}
+	#_type_accessor_storage = "text";
+	get type() {
+		return this.#_type_accessor_storage;
+	}
+	set type(value) {
+		this.#_type_accessor_storage = value;
+	}
+	#_value_accessor_storage = "";
+	get value() {
+		return this.#_value_accessor_storage;
+	}
+	set value(value) {
+		this.#_value_accessor_storage = value;
+	}
+	#_placeholder_accessor_storage = "";
+	get placeholder() {
+		return this.#_placeholder_accessor_storage;
+	}
+	set placeholder(value) {
+		this.#_placeholder_accessor_storage = value;
+	}
+	#_autocomplete_accessor_storage = void 0;
+	get autocomplete() {
+		return this.#_autocomplete_accessor_storage;
+	}
+	set autocomplete(value) {
+		this.#_autocomplete_accessor_storage = value;
+	}
+	#_pattern_accessor_storage = void 0;
+	get pattern() {
+		return this.#_pattern_accessor_storage;
+	}
+	set pattern(value) {
+		this.#_pattern_accessor_storage = value;
+	}
+	#_error_accessor_storage = "";
+	get error() {
+		return this.#_error_accessor_storage;
+	}
+	set error(value) {
+		this.#_error_accessor_storage = value;
+	}
+	#_success_accessor_storage = "";
+	get success() {
+		return this.#_success_accessor_storage;
+	}
+	set success(value) {
+		this.#_success_accessor_storage = value;
+	}
+	#_testId_accessor_storage = void 0;
+	get testId() {
+		return this.#_testId_accessor_storage;
+	}
+	set testId(value) {
+		this.#_testId_accessor_storage = value;
+	}
+	#_forgotPasswordHref_accessor_storage = void 0;
+	get forgotPasswordHref() {
+		return this.#_forgotPasswordHref_accessor_storage;
+	}
+	set forgotPasswordHref(value) {
+		this.#_forgotPasswordHref_accessor_storage = value;
+	}
+	#_forgotPasswordLabel_accessor_storage = "Forgot password?";
+	get forgotPasswordLabel() {
+		return this.#_forgotPasswordLabel_accessor_storage;
+	}
+	set forgotPasswordLabel(value) {
+		this.#_forgotPasswordLabel_accessor_storage = value;
+	}
+	#_forgotPasswordAction_accessor_storage = void 0;
+	get forgotPasswordAction() {
+		return this.#_forgotPasswordAction_accessor_storage;
+	}
+	set forgotPasswordAction(value) {
+		this.#_forgotPasswordAction_accessor_storage = value;
+	}
+	#_trailingIcon_accessor_storage = true;
+	get trailingIcon() {
+		return this.#_trailingIcon_accessor_storage;
+	}
+	set trailingIcon(value) {
+		this.#_trailingIcon_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;
+	}
+	#_invalid_accessor_storage = false;
+	get invalid() {
+		return this.#_invalid_accessor_storage;
+	}
+	set invalid(value) {
+		this.#_invalid_accessor_storage = value;
+	}
+	#_hasHelp_accessor_storage = false;
+	get hasHelp() {
+		return this.#_hasHelp_accessor_storage;
+	}
+	set hasHelp(value) {
+		this.#_hasHelp_accessor_storage = value;
+	}
+	#_hasSuffixSlot_accessor_storage = false;
+	get hasSuffixSlot() {
+		return this.#_hasSuffixSlot_accessor_storage;
+	}
+	set hasSuffixSlot(value) {
+		this.#_hasSuffixSlot_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-field");
+	internals;
+	constructor() {
+		super();
+		this.internals = this.attachInternals();
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.syncFormState();
+	}
+	willUpdate(changed) {
+		if (changed.has("value") || changed.has("required") || changed.has("error")) this.syncFormState();
+	}
+	formResetCallback() {
+		this.value = "";
+	}
+	formStateRestoreCallback(state) {
+		this.value = state ?? "";
+	}
+	focus(options) {
+		this.inputEl?.focus(options);
+	}
+	/**
+	* The string this control contributes to form submission — the uniform
+	* read/write contract `<zitadel-login>` uses to capture and restore field
+	* values without knowing each atom's internal shape. The getter reads the
+	* live `<input>` so browser/password-manager autofill that writes the native
+	* control directly (bypassing the `value` property and its `input` event) is
+	* still captured.
+	*/
+	get formValue() {
+		const native = this.inputEl ?? this.shadowRoot?.querySelector("input");
+		return native ? native.value : this.value;
+	}
+	set formValue(value) {
+		this.value = value;
+		const native = this.inputEl ?? this.shadowRoot?.querySelector("input");
+		if (native && native.value !== value) native.value = value;
+	}
+	render() {
+		const labelId = `${this.inputId}-label`;
+		const errorId = `${this.inputId}-error`;
+		const successId = `${this.inputId}-success`;
+		const helpId = `${this.inputId}-help`;
+		const showError = Boolean(this.error);
+		const showSuccess = Boolean(this.success) && !showError && !this.invalid;
+		const describedBy = [
+			showError ? errorId : null,
+			showSuccess ? successId : null,
+			this.hasHelp ? helpId : null
+		].filter(Boolean).join(" ");
+		const rootClass = classMap({
+			"zr-field": true,
+			"zr-field--invalid": this.invalid || showError,
+			"zr-field--success": showSuccess,
+			"zr-field--disabled": this.disabled
+		});
+		const showDefaultTrailing = this.trailingIcon && !this.hasSuffixSlot && !this.disabled;
+		const trailing = showDefaultTrailing ? this.renderTrailingIcon() : null;
+		const wrapClass = classMap({
+			"zr-field__wrap": true,
+			"zr-field__wrap--trailing": showDefaultTrailing
+		});
+		return html`
+      <div class=${rootClass} part="root">
+        ${this.renderLabelRow(labelId)}
+        <div class=${wrapClass} part="input-wrap">
+          <slot name="prefix"></slot>
+          <input
+            class="zr-field__input"
+            part="input"
+            id=${this.inputId}
+            data-testid=${ifDefined(this.nativeInputTestId())}
+            name=${this.name}
+            type=${this.type}
+            .value=${live(this.value)}
+            placeholder=${this.placeholder}
+            autocomplete=${ifDefined(this.autocomplete)}
+            pattern=${ifDefined(this.pattern)}
+            ?required=${this.required}
+            ?disabled=${this.disabled}
+            aria-invalid=${this.invalid || showError ? "true" : "false"}
+            aria-describedby=${describedBy || nothing}
+            @input=${this.handleInput}
+            @change=${this.handleChange}
+            @keydown=${this.handleKeyDown}
+          />
+          <slot name="suffix" @slotchange=${this.handleSuffixSlotChange}></slot>
+          ${trailing}
+        </div>
+        <div class="zr-field__help" part="help" id=${helpId} ?hidden=${!this.hasHelp}>
+          <slot name="help" @slotchange=${this.handleHelpSlotChange}></slot>
+        </div>
+        <div
+          class="zr-field__success"
+          part="success"
+          id=${successId}
+          role="status"
+          ?hidden=${!showSuccess}
+        >
+          ${this.success}
+        </div>
+        <div class="zr-field__error" part="error" id=${errorId} role="alert" ?hidden=${!showError}>
+          ${this.error}
+        </div>
+      </div>
+    `;
+	}
+	renderLabelRow(labelId) {
+		if (!this.label) return null;
+		if (this.forgotPasswordHref) return html`
+        <div class="zr-field__label-row" part="label-row">
+          <label class="zr-field__label" part="label" id=${labelId} for=${this.inputId}>
+            <span>${this.label}</span>
+            ${this.required ? html`<span class="zr-field__required" aria-hidden="true">*</span>` : null}
+          </label>
+          <a
+            class="zr-field__link"
+            part="forgot-link"
+            href=${this.forgotPasswordHref}
+            @click=${this.onForgotPasswordClick}
+            >${this.forgotPasswordLabel}</a
+          >
+        </div>
+      `;
+		return html`
+      <label class="zr-field__label" part="label" id=${labelId} for=${this.inputId}>
+        <span>${this.label}</span>
+        ${this.required ? html`<span class="zr-field__required" aria-hidden="true">*</span>` : null}
+      </label>
+    `;
+	}
+	renderTrailingIcon() {
+		let iconName = "cross";
+		let tone = "default";
+		let clearable = true;
+		if (this.invalid || this.error) {
+			iconName = "alert-circle";
+			tone = "error";
+			clearable = false;
+		} else if (this.success) {
+			iconName = "check";
+			tone = "success";
+			clearable = false;
+		}
+		const icon = html`<zl-icon name=${iconName} size="16" tone=${tone} decorative></zl-icon>`;
+		if (!clearable) return html`<span class="zr-field__trailing" part="trailing-icon">${icon}</span>`;
+		return html`
+      <span class="zr-field__trailing" part="trailing-icon">
+        <button
+          type="button"
+          class="zr-field__trailing-action"
+          part="trailing-action"
+          aria-label="Clear"
+          ?disabled=${this.disabled}
+          @click=${this.handleClear}
+        >
+          ${icon}
+        </button>
+      </span>
+    `;
+	}
+	syncFormState() {
+		this.internals.setFormValue?.(this.value);
+		if (this.required && !this.value) this.internals.setValidity?.({ valueMissing: true }, "Please fill out this field.");
+		else if (this.error) this.internals.setValidity?.({ customError: true }, this.error);
+		else this.internals.setValidity?.({});
+	}
+	handleHelpSlotChange = (event) => {
+		const slot = event.target;
+		this.hasHelp = slot.assignedNodes({ flatten: true }).length > 0;
+	};
+	handleSuffixSlotChange = (event) => {
+		const slot = event.target;
+		this.hasSuffixSlot = slot.assignedNodes({ flatten: true }).length > 0;
+	};
+	handleClear = () => {
+		this.value = "";
+		emit(this, "zl-input", {
+			name: this.name,
+			value: this.value
+		});
+		this.syncFormState();
+		this.dispatchNativeInput();
+		this.inputEl?.focus();
+	};
+	/**
+	* With no `forgot-password-action` the link is a plain navigation and this
+	* does nothing — a tenant pointing it at their own recovery page still gets
+	* an ordinary anchor, middle-click and all.
+	*/
+	onForgotPasswordClick = (event) => {
+		if (!this.forgotPasswordAction) return;
+		event.preventDefault();
+		emit(this, "zl-submit", { action: this.forgotPasswordAction });
+	};
+	handleInput = (event) => {
+		event.stopPropagation();
+		const input = event.target;
+		this.value = input.value;
+		this.syncFormState();
+		emit(this, "zl-input", {
+			name: this.name,
+			value: this.value
+		});
+		this.dispatchNativeInput(event);
+	};
+	handleChange = (event) => {
+		event.stopPropagation();
+		const input = event.target;
+		this.value = input.value;
+		this.syncFormState();
+		this.dispatchNativeChange();
+	};
+	handleKeyDown = (event) => {
+		if (event.key === "Enter" && !event.isComposing && !event.shiftKey && !event.altKey && !event.metaKey && !event.ctrlKey) {
+			const form = this.internals.form;
+			if (form) {
+				event.preventDefault();
+				form.requestSubmit();
+			}
+		}
+	};
+	nativeInputTestId() {
+		if (this.name) return `zitadel-input-${hookName(this.name)}`;
+		if (this.testId) return `${this.testId}-input`;
+	}
+	dispatchNativeInput(source) {
+		if (typeof InputEvent === "function") {
+			const input = source instanceof InputEvent ? source : void 0;
+			this.dispatchEvent(new InputEvent("input", {
+				bubbles: true,
+				composed: true,
+				data: input?.data ?? null,
+				inputType: input?.inputType ?? "",
+				isComposing: input?.isComposing ?? false
+			}));
+			return;
+		}
+		this.dispatchEvent(new Event("input", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	dispatchNativeChange() {
+		this.dispatchEvent(new Event("change", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+};
+__decorate([property()], ZlField.prototype, "label", null);
+__decorate([property()], ZlField.prototype, "type", null);
+__decorate([property()], ZlField.prototype, "value", null);
+__decorate([property()], ZlField.prototype, "placeholder", null);
+__decorate([property()], ZlField.prototype, "autocomplete", null);
+__decorate([property()], ZlField.prototype, "pattern", null);
+__decorate([property()], ZlField.prototype, "error", null);
+__decorate([property()], ZlField.prototype, "success", null);
+__decorate([property({ attribute: "data-testid" })], ZlField.prototype, "testId", null);
+__decorate([property({ attribute: "forgot-password-href" })], ZlField.prototype, "forgotPasswordHref", null);
+__decorate([property({ attribute: "forgot-password-label" })], ZlField.prototype, "forgotPasswordLabel", null);
+__decorate([property({ attribute: "forgot-password-action" })], ZlField.prototype, "forgotPasswordAction", null);
+__decorate([property({
+	type: Boolean,
+	attribute: "trailing-icon"
+})], ZlField.prototype, "trailingIcon", null);
+__decorate([property({ type: Boolean })], ZlField.prototype, "required", null);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], ZlField.prototype, "disabled", null);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], ZlField.prototype, "invalid", null);
+__decorate([state()], ZlField.prototype, "hasHelp", null);
+__decorate([state()], ZlField.prototype, "hasSuffixSlot", null);
+__decorate([query(".zr-field__input")], ZlField.prototype, "inputEl", null);
+ZlField = __decorate([customElement("zl-field")], ZlField);
+const zlFieldManifest = {
+	tag: "zl-field",
+	consumes: { field: { required: true } },
+	attrs: [
+		"name",
+		"label",
+		"type",
+		"value",
+		"placeholder",
+		"autocomplete",
+		"pattern",
+		"data-testid",
+		"required",
+		"disabled",
+		"invalid",
+		"error",
+		"success",
+		"forgot-password-href",
+		"forgot-password-label",
+		"forgot-password-action",
+		"trailing-icon"
+	],
+	parts: [
+		"root",
+		"label",
+		"label-row",
+		"forgot-link",
+		"input-wrap",
+		"input",
+		"trailing-icon",
+		"trailing-action",
+		"help",
+		"success",
+		"error"
+	],
+	slots: [
+		"prefix",
+		"suffix",
+		"help"
+	],
+	events: ["zl-input", "zl-submit"]
+};
+//#endregion
+//#region src/atoms/zl-page-shell.css?inline
+var zl_page_shell_default = ":host {\n  min-height: var(--zl-page-min-height, 100vh);\n  background: var(--zl-background);\n  color: var(--zl-foreground);\n  display: block;\n}\n\n:host([data-embedded]) {\n  height: 100%;\n  min-height: 100%;\n}\n\n:host([data-embedded]) .zr-page-shell {\n  min-height: 100%;\n}\n\n:host([data-widget]) {\n  background: none;\n  min-height: auto;\n}\n\n:host([data-widget]) .zr-page-shell {\n  min-height: var(--zl-page-min-height, auto);\n  background: none;\n  padding: 0;\n}\n\n.zr-page-shell ::slotted([slot=\"header\"]), .zr-page-shell ::slotted([slot=\"footer\"]) {\n  margin: 0;\n}\n\n.zr-page-shell {\n  min-height: inherit;\n  background: var(--zl-background);\n  color: var(--zl-foreground);\n  justify-content: center;\n  align-items: center;\n  gap: var(--zl-spacing-6);\n  padding: var(--zl-spacing-6);\n  flex-direction: column;\n  display: flex;\n}\n\n@media (width >= 48rem) {\n  .zr-page-shell {\n    padding: var(--zl-spacing-10);\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__region--empty {\n  display: none;\n}\n";
+//#endregion
+//#region src/atoms/zl-page-shell.ts
+let ZlPageShell = class ZlPageShell extends LitElement {
+	static styles = [baseHostStyles, ...surfaceStyles(zl_page_shell_default)];
+	render() {
+		const hasHeader = this.lightDomSlotFilled("header");
+		const hasFooter = this.lightDomSlotFilled("footer");
+		const headerClass = hasHeader ? "zr-page-shell__header" : "zr-page-shell__header zr-page-shell__region--empty";
+		const footerClass = hasFooter ? "zr-page-shell__footer" : "zr-page-shell__footer zr-page-shell__region--empty";
+		return html`
+      <div class="zr-page-shell" part="shell">
+        <header class=${headerClass} part="header">
+          <slot name="header" @slotchange=${this.onSlotChange}></slot>
+        </header>
+        <main class="zr-page-shell__main" part="main">
+          <slot></slot>
+        </main>
+        <footer class=${footerClass} part="footer">
+          <slot name="footer" @slotchange=${this.onSlotChange}></slot>
+        </footer>
+      </div>
+    `;
+	}
+	/**
+	* Re-render when a named slot's assignment changes so a footer/header added
+	* after first paint updates the empty-region class. The initial render reads
+	* children synchronously (no empty-then-filled flash).
+	*/
+	onSlotChange = () => {
+		this.requestUpdate();
+	};
+	lightDomSlotFilled(slot) {
+		for (const child of this.children) if (child.getAttribute("slot") === slot) return true;
+		return false;
+	}
+};
+ZlPageShell = __decorate([customElement("zl-page-shell")], ZlPageShell);
+const zlPageShellManifest = {
+	tag: "zl-page-shell",
+	attrs: [],
+	parts: [
+		"shell",
+		"header",
+		"main",
+		"footer"
+	],
+	slots: [
+		"",
+		"header",
+		"footer"
+	],
+	events: []
+};
+//#endregion
+//#region src/internal/base64url.ts
+/**
+* Base64URL encoding/decoding for WebAuthn binary fields.
+*
+* WebAuthn's `ArrayBuffer` values (`rawId`, `clientDataJSON`,
+* `authenticatorData`, `signature`, `attestationObject`, `userHandle`)
+* must be base64url-encoded before sending as JSON. The WebAuthn JSON
+* serialization spec (https://www.w3.org/TR/webauthn-3/) requires
+* Base64URL (RFC 4648 §5) — no padding, URL-safe alphabet.
+*/
+/**
+* Encode an `ArrayBuffer` to a Base64URL string (no padding).
+*/
+function bufferToBase64Url(buffer) {
+	const bytes = new Uint8Array(buffer);
+	let binary = "";
+	for (const byte of bytes) binary += String.fromCharCode(byte);
+	return btoa(binary).replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "");
+}
+/**
+* Decode a Base64URL string to an `ArrayBuffer`.
+*/
+function base64UrlToBuffer(base64url) {
+	const base64 = base64url.replace(/-/g, "+").replace(/_/g, "/");
+	const padded = base64.padEnd(base64.length + (4 - base64.length % 4) % 4, "=");
+	const binary = atob(padded);
+	const bytes = new Uint8Array(binary.length);
+	for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+	return bytes.buffer;
+}
+//#endregion
+//#region src/atoms/zl-passkey.ts
+/**
+* Slack subtracted from `options.timeout` when classifying a
+* `NotAllowedError` as a timeout: browsers clamp and fire the deadline
+* slightly early, so an exact comparison would label real timeouts as
+* user cancellations.
+*/
+const TIMEOUT_GRACE_MS = 1e3;
+let ZlPasskey = class ZlPasskey extends LitElement {
+	#_ceremony_accessor_storage = "authenticate";
+	get ceremony() {
+		return this.#_ceremony_accessor_storage;
+	}
+	set ceremony(value) {
+		this.#_ceremony_accessor_storage = value;
+	}
+	#_challengeId_accessor_storage = "";
+	get challengeId() {
+		return this.#_challengeId_accessor_storage;
+	}
+	set challengeId(value) {
+		this.#_challengeId_accessor_storage = value;
+	}
+	#_options_accessor_storage = null;
+	get options() {
+		return this.#_options_accessor_storage;
+	}
+	set options(value) {
+		this.#_options_accessor_storage = value;
+	}
+	#_method_accessor_storage = "passkey";
+	get method() {
+		return this.#_method_accessor_storage;
+	}
+	set method(value) {
+		this.#_method_accessor_storage = value;
+	}
+	#_manual_accessor_storage = false;
+	get manual() {
+		return this.#_manual_accessor_storage;
+	}
+	set manual(value) {
+		this.#_manual_accessor_storage = value;
+	}
+	#_pendingLabel_accessor_storage = "Waiting for your passkey…";
+	get pendingLabel() {
+		return this.#_pendingLabel_accessor_storage;
+	}
+	set pendingLabel(value) {
+		this.#_pendingLabel_accessor_storage = value;
+	}
+	#_cancelLabel_accessor_storage = "Cancel";
+	get cancelLabel() {
+		return this.#_cancelLabel_accessor_storage;
+	}
+	set cancelLabel(value) {
+		this.#_cancelLabel_accessor_storage = value;
+	}
+	#_silent_accessor_storage = false;
+	get silent() {
+		return this.#_silent_accessor_storage;
+	}
+	set silent(value) {
+		this.#_silent_accessor_storage = value;
+	}
+	#_pending_accessor_storage = false;
+	get pending() {
+		return this.#_pending_accessor_storage;
+	}
+	set pending(value) {
+		this.#_pending_accessor_storage = value;
+	}
+	abortController = null;
+	/** `Date.now()` at ceremony start, for timeout classification on reject. */
+	startedAt = 0;
+	connectedCallback() {
+		super.connectedCallback();
+		if (!this.manual && this.options) this.startCeremony();
+	}
+	disconnectedCallback() {
+		this.abort();
+		super.disconnectedCallback();
+	}
+	/**
+	* Abort any in-flight WebAuthn ceremony. Called automatically when the
+	* component disconnects (step change, page navigation) and by the
+	* pending UI's cancel button. Clears `pending` immediately — the
+	* ceremony's own `finally` no longer owns it (its controller is gone).
+	*/
+	abort() {
+		this.abortController?.abort();
+		this.abortController = null;
+		this.pending = false;
+	}
+	/**
+	* Trigger the WebAuthn ceremony. Resolves when the ceremony completes
+	* or rejects on error/abort.
+	*/
+	async startCeremony() {
+		if (!this.options) {
+			this.emitError("No WebAuthn options provided.", false);
+			return;
+		}
+		if (!window.PublicKeyCredential) {
+			this.emitError("WebAuthn is not supported in this browser.", false);
+			return;
+		}
+		this.abort();
+		const controller = new AbortController();
+		this.abortController = controller;
+		this.pending = true;
+		this.startedAt = Date.now();
+		this.emitStarted();
+		try {
+			const credential = this.ceremony === "register" ? await this.createCredential() : await this.getCredential();
+			if (!credential) {
+				this.emitError("No credential returned by the browser.", false);
+				return;
+			}
+			const proof = this.serializeCredential(credential);
+			this.emitResult(proof);
+		} catch (error) {
+			const aborted = error instanceof DOMException && (error.name === "AbortError" || error.name === "NotAllowedError");
+			const timeoutMs = typeof this.options?.timeout === "number" ? this.options.timeout : null;
+			const timedOut = error instanceof DOMException && error.name === "NotAllowedError" && timeoutMs !== null && Date.now() - this.startedAt >= timeoutMs - TIMEOUT_GRACE_MS;
+			this.emitError(error instanceof Error ? error.message : "WebAuthn ceremony failed.", aborted, timedOut);
+		} finally {
+			if (this.abortController === controller) this.pending = false;
+		}
+	}
+	handleCancelSubmit = (event) => {
+		event.stopPropagation();
+		this.abort();
+	};
+	render() {
+		if (!this.pending || this.silent) return nothing;
+		return html`
+      <div class="zl-passkey-pending" data-testid="zitadel-passkey-pending">
+        <zl-alert severity="info">${this.pendingLabel}</zl-alert>
+        <zl-button
+          hierarchy="secondary"
+          type="button"
+          block
+          data-testid="zitadel-passkey-cancel"
+          label=${this.cancelLabel}
+          @zl-submit=${this.handleCancelSubmit}
+        ></zl-button>
+      </div>
+    `;
+	}
+	/**
+	* `navigator.credentials.get()` — authentication ceremony.
+	*/
+	async getCredential() {
+		const opts = this.options;
+		if (!opts) throw new Error("getCredential called without options");
+		const publicKeyOptions = {
+			challenge: base64UrlToBuffer(opts.challenge),
+			rpId: opts.rpId,
+			timeout: opts.timeout,
+			userVerification: opts.userVerification,
+			allowCredentials: this.decodeCredentialDescriptors(opts.allowCredentials)
+		};
+		return await navigator.credentials.get({
+			publicKey: publicKeyOptions,
+			signal: this.abortController?.signal
+		});
+	}
+	/**
+	* `navigator.credentials.create()` — registration ceremony.
+	*/
+	async createCredential() {
+		const opts = this.options;
+		if (!opts) throw new Error("createCredential called without options");
+		const rp = opts.rp;
+		const user = opts.user;
+		const pubKeyCredParams = opts.pubKeyCredParams;
+		const publicKeyOptions = {
+			challenge: base64UrlToBuffer(opts.challenge),
+			rp: {
+				name: rp.name,
+				...rp.id ? { id: rp.id } : {}
+			},
+			user: {
+				id: base64UrlToBuffer(user.id),
+				name: user.name,
+				displayName: user.displayName
+			},
+			pubKeyCredParams: pubKeyCredParams.map((p) => ({
+				type: p.type,
+				alg: p.alg
+			})),
+			timeout: opts.timeout,
+			attestation: opts.attestation ?? "none",
+			authenticatorSelection: opts.authenticatorSelection,
+			excludeCredentials: this.decodeCredentialDescriptors(opts.excludeCredentials)
+		};
+		return await navigator.credentials.create({
+			publicKey: publicKeyOptions,
+			signal: this.abortController?.signal
+		});
+	}
+	/**
+	* Decode a list of credential descriptors from the server's base64url
+	* format to the browser's ArrayBuffer format.
+	*/
+	decodeCredentialDescriptors(descriptors) {
+		if (!descriptors) return [];
+		return descriptors.map((d) => ({
+			type: d.type,
+			id: base64UrlToBuffer(d.id),
+			transports: d.transports
+		}));
+	}
+	/**
+	* Serialize a `PublicKeyCredential` to the JSON shape defined in
+	* `passkey-proof.yaml`. All `ArrayBuffer` fields are base64url-encoded.
+	*/
+	serializeCredential(credential) {
+		const response = credential.response;
+		const serialized = {
+			id: credential.id,
+			rawId: bufferToBase64Url(credential.rawId),
+			type: "public-key",
+			response: { clientDataJSON: bufferToBase64Url(response.clientDataJSON) }
+		};
+		if ("attestationObject" in response) {
+			const attestation = response;
+			serialized.response.attestationObject = bufferToBase64Url(attestation.attestationObject);
+		}
+		if ("authenticatorData" in response) {
+			const assertion = response;
+			serialized.response.authenticatorData = bufferToBase64Url(assertion.authenticatorData);
+			serialized.response.signature = bufferToBase64Url(assertion.signature);
+			if (assertion.userHandle) serialized.response.userHandle = bufferToBase64Url(assertion.userHandle);
+		}
+		if (credential.authenticatorAttachment) serialized.authenticatorAttachment = credential.authenticatorAttachment;
+		return serialized;
+	}
+	emitResult(proof) {
+		const detail = {
+			challenge_id: this.challengeId,
+			method: this.method,
+			proof
+		};
+		this.dispatchEvent(new CustomEvent("zl-passkey-result", {
+			bubbles: true,
+			composed: true,
+			detail
+		}));
+	}
+	emitError(message, aborted, timedOut = false) {
+		const detail = {
+			challenge_id: this.challengeId,
+			error: message,
+			aborted,
+			timed_out: timedOut
+		};
+		this.dispatchEvent(new CustomEvent("zl-passkey-error", {
+			bubbles: true,
+			composed: true,
+			detail
+		}));
+	}
+	emitStarted() {
+		const detail = {
+			challenge_id: this.challengeId,
+			method: this.method
+		};
+		this.dispatchEvent(new CustomEvent("zl-passkey-started", {
+			bubbles: true,
+			composed: true,
+			detail
+		}));
+	}
+	/**
+	* Light DOM on purpose: the pending UI must land inside the
+	* orchestrator's shadow root (where the step's adopted styles apply)
+	* without altering the `unsafeHTML` step markup — runtime children don't
+	* participate in its string comparison, so the ceremony never restarts.
+	*/
+	createRenderRoot() {
+		return this;
+	}
+};
+__decorate([property()], ZlPasskey.prototype, "ceremony", null);
+__decorate([property({ attribute: "challenge-id" })], ZlPasskey.prototype, "challengeId", null);
+__decorate([property({
+	attribute: "options",
+	converter: {
+		fromAttribute(value) {
+			if (!value) return null;
+			try {
+				return JSON.parse(value);
+			} catch {
+				return null;
+			}
+		},
+		toAttribute(value) {
+			return value ? JSON.stringify(value) : null;
+		}
+	}
+})], ZlPasskey.prototype, "options", null);
+__decorate([property({ type: String })], ZlPasskey.prototype, "method", null);
+__decorate([property({ type: Boolean })], ZlPasskey.prototype, "manual", null);
+__decorate([property({ attribute: "pending-label" })], ZlPasskey.prototype, "pendingLabel", null);
+__decorate([property({ attribute: "cancel-label" })], ZlPasskey.prototype, "cancelLabel", null);
+__decorate([property({ type: Boolean })], ZlPasskey.prototype, "silent", null);
+__decorate([state()], ZlPasskey.prototype, "pending", null);
+ZlPasskey = __decorate([customElement("zl-passkey")], ZlPasskey);
+const zlPasskeyManifest = {
+	tag: "zl-passkey",
+	consumes: {},
+	attrs: [
+		"ceremony",
+		"method",
+		"challenge-id",
+		"options",
+		"manual",
+		"pending-label",
+		"cancel-label",
+		"silent"
+	],
+	parts: [],
+	slots: [],
+	events: [
+		"zl-passkey-result",
+		"zl-passkey-error",
+		"zl-passkey-started"
+	]
+};
+//#endregion
+//#region src/atoms/zl-pill.css?inline
+var zl_pill_default = ":host {\n  display: inline-flex;\n}\n\n.zr-pill {\n  box-sizing: border-box;\n  justify-content: center;\n  align-items: center;\n  gap: var(--zl-spacing-1);\n  height: var(--zl-spacing-5);\n  padding-block: var(--zl-spacing-0-5);\n  padding-inline: var(--zl-spacing-2);\n  border-radius: var(--zl-radius-full);\n  background: var(--zl-secondary);\n  color: var(--zl-secondary-foreground);\n  font-family: var(--zl-font-family-sans);\n  font-size: var(--zl-text-xs-size);\n  line-height: var(--zl-text-xs-leading);\n  font-weight: var(--zl-font-weight-medium);\n  white-space: nowrap;\n  border: 1px solid #0000;\n  text-decoration: none;\n  display: inline-flex;\n}\n\n.zr-pill--success {\n  background: color-mix(in srgb, var(--zl-success) 15%, transparent);\n  color: var(--zl-success);\n}\n\n.zr-pill--error {\n  background: color-mix(in srgb, var(--zl-destructive) 15%, transparent);\n  color: var(--zl-destructive);\n}\n\n.zr-pill--outline {\n  border-color: var(--zl-border);\n  color: var(--zl-foreground);\n  background: none;\n}\n\na.zr-pill:hover {\n  background: color-mix(in srgb, var(--zl-secondary) 80%, transparent);\n}\n\na.zr-pill:focus-visible {\n  outline: var(--zl-focus-width) solid var(--zl-ring);\n  outline-offset: var(--zl-focus-offset);\n}\n";
+//#endregion
+//#region src/atoms/zl-pill.ts
+let ZlPill = class ZlPill extends LitElement {
+	static styles = [baseHostStyles, ...surfaceStyles(zl_pill_default)];
+	#_tone_accessor_storage = "neutral";
+	get tone() {
+		return this.#_tone_accessor_storage;
+	}
+	set tone(value) {
+		this.#_tone_accessor_storage = value;
+	}
+	#_href_accessor_storage = void 0;
+	get href() {
+		return this.#_href_accessor_storage;
+	}
+	set href(value) {
+		this.#_href_accessor_storage = value;
+	}
+	#_ariaLabel_accessor_storage = null;
+	get ariaLabel() {
+		return this.#_ariaLabel_accessor_storage;
+	}
+	set ariaLabel(value) {
+		this.#_ariaLabel_accessor_storage = value;
+	}
+	render() {
+		const classes = classMap({
+			"zr-pill": true,
+			[`zr-pill--${this.tone}`]: this.tone !== "neutral"
+		});
+		if (this.href) return html`<a
+        class=${classes}
+        part="pill"
+        href=${this.href}
+        rel="noopener"
+        aria-label=${this.ariaLabel ?? nothing}
+      ><slot></slot></a>`;
+		return html`<span class=${classes} part="pill"><slot></slot></span>`;
+	}
+};
+__decorate([property()], ZlPill.prototype, "tone", null);
+__decorate([property()], ZlPill.prototype, "href", null);
+__decorate([property({ attribute: "aria-label" })], ZlPill.prototype, "ariaLabel", null);
+ZlPill = __decorate([customElement("zl-pill")], ZlPill);
+const zlPillManifest = {
+	tag: "zl-pill",
+	attrs: [
+		"tone",
+		"href",
+		"aria-label"
+	],
+	parts: ["pill"],
+	slots: [""],
+	events: []
+};
+//#endregion
+//#region src/atoms/zl-select.css?inline
+var zl_select_default = ":host {\n  display: block;\n}\n\n:host([disabled]) {\n  cursor: not-allowed;\n}\n\n.zr-select {\n  align-items: stretch;\n  gap: var(--zl-spacing-2);\n  font-family: var(--zl-font-family-sans);\n  flex-direction: column;\n  display: flex;\n}\n\n.zr-select__label {\n  align-items: center;\n  gap: var(--zl-spacing-1);\n  font-size: var(--zl-text-sm-size);\n  font-weight: var(--zl-font-weight-medium);\n  line-height: var(--zl-text-sm-leading);\n  color: var(--zl-foreground);\n  display: inline-flex;\n}\n\n.zr-select__required {\n  color: var(--zl-destructive);\n}\n\n.zr-select--disabled .zr-select__label {\n  color: var(--zl-muted-foreground);\n}\n\n.zr-select__field {\n  position: relative;\n}\n\n.zr-select__native {\n  opacity: 0;\n  pointer-events: none;\n  -webkit-appearance: none;\n  appearance: none;\n  border: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  position: absolute;\n  inset: 0;\n}\n\n.zr-select__trigger {\n  align-items: center;\n  gap: var(--zl-spacing-2);\n  width: 100%;\n  height: var(--zl-spacing-9);\n  padding-block: var(--zl-spacing-2);\n  padding-inline: var(--zl-spacing-4);\n  border-radius: var(--zl-radius-sm);\n  border: 1px solid var(--zl-input);\n  color: var(--zl-foreground);\n  font-family: inherit;\n  font-size: var(--zl-text-sm-size);\n  line-height: var(--zl-text-sm-leading);\n  font-weight: var(--zl-font-weight-normal);\n  text-align: start;\n  cursor: pointer;\n  transition: border-color var(--zl-duration-fast) var(--zl-easing-standard),\n    background-color var(--zl-duration-fast) var(--zl-easing-standard);\n  background: none;\n  margin: 0;\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-foreground);\n  flex: auto;\n  overflow: hidden;\n}\n\n.zr-select__value--placeholder {\n  color: var(--zl-muted-foreground);\n}\n\n.zr-select__icon {\n  color: var(--zl-muted-foreground);\n  transition: transform var(--zl-duration-fast)\n    var(--zl-easing-standard);\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-ring);\n  background-color: color-mix(in srgb, var(--zl-foreground) 10%, transparent);\n}\n\n.zr-select:not(.zr-select--disabled) .zr-select__field:focus-within .zr-select__trigger, .zr-select--open .zr-select__trigger {\n  border-color: var(--zl-ring);\n  outline: none;\n}\n\n.zr-select--disabled .zr-select__trigger {\n  border-color: var(--zl-input);\n  color: var(--zl-muted-foreground);\n  cursor: not-allowed;\n}\n\n.zr-select--disabled .zr-select__value--placeholder {\n  color: var(--zl-muted-foreground);\n}\n\n.zr-select--invalid .zr-select__trigger, .zr-select--invalid .zr-select__field:focus-within .zr-select__trigger {\n  border-color: var(--zl-destructive);\n}\n\n.zr-select__error {\n  font-size: var(--zl-text-sm-size);\n  line-height: var(--zl-text-sm-leading);\n  color: var(--zl-destructive);\n}\n\n.zr-select__listbox {\n  top: calc(100% + var(--zl-spacing-2));\n  z-index: 20;\n  border-radius: var(--zl-radius-sm);\n  border: 1px solid var(--zl-input);\n  background: var(--zl-background);\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-2);\n  height: var(--zl-spacing-9);\n  padding-block: var(--zl-spacing-2);\n  padding-inline: var(--zl-spacing-4);\n  font-size: var(--zl-text-sm-size);\n  line-height: var(--zl-text-sm-leading);\n  color: var(--zl-foreground);\n  cursor: pointer;\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-foreground);\n  opacity: 0;\n  flex-shrink: 0;\n  display: inline-flex;\n}\n\n.zr-select__option:not([data-disabled]):hover, .zr-select__option[data-active]:not([data-disabled]) {\n  background-color: color-mix(in srgb, var(--zl-foreground) 10%, transparent);\n}\n\n.zr-select__option[data-selected] {\n  background-color: var(--zl-popover);\n}\n\n.zr-select__option[data-selected] .zr-select__option-check {\n  opacity: 1;\n}\n\n.zr-select__option[data-disabled] {\n  color: var(--zl-muted-foreground);\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(zl_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;
+	}
+	#_error_accessor_storage = "";
+	get error() {
+		return this.#_error_accessor_storage;
+	}
+	set error(value) {
+		this.#_error_accessor_storage = value;
+	}
+	#_invalid_accessor_storage = false;
+	get invalid() {
+		return this.#_invalid_accessor_storage;
+	}
+	set invalid(value) {
+		this.#_invalid_accessor_storage = value;
+	}
+	#_disabled_accessor_storage = false;
+	get disabled() {
+		return this.#_disabled_accessor_storage;
+	}
+	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;
+	}
+	#_activeValue_accessor_storage = null;
+	get activeValue() {
+		return this.#_activeValue_accessor_storage;
+	}
+	set activeValue(value) {
+		this.#_activeValue_accessor_storage = value;
+	}
+	#_nativeEl_accessor_storage = null;
+	get nativeEl() {
+		return this.#_nativeEl_accessor_storage;
+	}
+	set nativeEl(value) {
+		this.#_nativeEl_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);
+		document.addEventListener("keydown", this.handleDocumentKeydown, true);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		document.removeEventListener("pointerdown", this.handleDocumentPointerDown, true);
+		document.removeEventListener("keydown", this.handleDocumentKeydown, true);
+	}
+	willUpdate(changed) {
+		if (changed.has("value") || changed.has("required")) this.syncFormState();
+		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.nativeEl?.focus(options);
+	}
+	/**
+	* The string this control contributes to form submission — the uniform
+	* read/write contract `<zitadel-login>` uses to capture and restore field
+	* values without knowing each atom's internal shape. For a select that is
+	* simply the chosen option's value (empty = nothing chosen).
+	*/
+	get formValue() {
+		return this.value;
+	}
+	set formValue(value) {
+		this.value = value;
+	}
+	/**
+	* Options as painted in the listbox: a leading empty row (labelled with the
+	* placeholder) so the user can return to "no selection". For a `required`
+	* field this empty row is the prompt — choosing it leaves the value empty,
+	* so `required` validation still blocks submit (native `<select>`
+	* semantics). Any empty-valued member of the caller's list is dropped first,
+	* so a schema enum that lists "" doesn't render a second, duplicate empty
+	* option. The public `options` property stays the caller's list.
+	*/
+	get listOptions() {
+		return [{
+			value: "",
+			label: this.placeholder
+		}, ...this.options.filter((o) => o.value !== "")];
+	}
+	render() {
+		const labelId = `${this.baseId}-label`;
+		const errorId = `${this.baseId}-error`;
+		const showError = Boolean(this.error);
+		const selected = this.value === "" ? void 0 : this.options.find((option) => option.value === this.value);
+		return html`
+      <div class=${classMap({
+			"zr-select": true,
+			"zr-select--open": this.open,
+			"zr-select--invalid": this.invalid || showError,
+			"zr-select--disabled": this.disabled
+		})} part="root">
+        ${this.renderLabel(labelId)}
+        <div class="zr-select__field" part="field">
+          <select
+            class="zr-select__native"
+            part="native"
+            id=${`${this.baseId}-native`}
+            data-testid=${ifDefined(this.nativeTestId())}
+            aria-labelledby=${this.label ? labelId : nothing}
+            aria-label=${ifDefined(this.label ? void 0 : this.ariaLabelText)}
+            aria-invalid=${this.invalid || showError ? "true" : "false"}
+            aria-describedby=${showError ? errorId : nothing}
+            ?disabled=${this.disabled}
+            ?required=${this.required}
+            @change=${this.handleNativeChange}
+          >
+            ${this.listOptions.map((option) => html`<option
+                  value=${option.value}
+                  ?disabled=${option.disabled ?? false}
+                  .selected=${live(option.value === this.value)}
+                >${option.label}</option>`)}
+          </select>
+          <div
+            class="zr-select__trigger"
+            part="trigger"
+            aria-hidden="true"
+            @click=${this.handleTriggerClick}
+          >
+            <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>
+          </div>
+          <ul class="zr-select__listbox" part="listbox" aria-hidden="true" ?hidden=${!this.open}>
+            ${this.listOptions.map((option) => this.renderOption(option))}
+          </ul>
+        </div>
+        <div
+          class="zr-select__error"
+          part="error"
+          id=${errorId}
+          role="alert"
+          ?hidden=${!showError}
+        >
+          ${this.error}
+        </div>
+      </div>
+    `;
+	}
+	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) {
+		const isSelected = option.value === this.value;
+		return html`
+      <li
+        class="zr-select__option"
+        part="option"
+        data-value=${option.value}
+        data-selected=${isSelected ? "" : nothing}
+        data-active=${this.open && option.value === this.activeValue ? "" : nothing}
+        data-disabled=${option.disabled ? "" : nothing}
+        @click=${() => this.handleOptionClick(option)}
+        @pointermove=${() => this.handleOptionPointerMove(option)}
+      >
+        <span class="zr-select__option-label">${option.label}</span>
+        <zl-icon class="zr-select__option-check" name="check" size="16" decorative></zl-icon>
+      </li>
+    `;
+	}
+	handleLabelClick = () => {
+		if (!this.disabled) this.nativeEl?.focus();
+	};
+	handleTriggerClick = () => {
+		if (this.disabled) return;
+		this.open = !this.open;
+	};
+	/**
+	* The native `<select>` is the source of truth for keyboard, AT, and
+	* automation. Its `change` event covers native-popup selection as well as
+	* programmatic value-setting by automation drivers.
+	*/
+	handleNativeChange = (event) => {
+		const next = event.target.value;
+		this.open = false;
+		this.commitValue(next);
+	};
+	handleOptionClick(option) {
+		if (option.disabled) return;
+		this.open = false;
+		this.nativeEl?.focus();
+		this.commitValue(option.value);
+	}
+	handleOptionPointerMove(option) {
+		if (!option.disabled && option.value !== this.activeValue) this.activeValue = option.value;
+	}
+	handleDocumentPointerDown = (event) => {
+		if (this.open && !event.composedPath().includes(this)) this.open = false;
+	};
+	/**
+	* Escape closes the styled popup and stops propagation so it doesn't also
+	* dismiss an enclosing dialog.
+	*/
+	handleDocumentKeydown = (event) => {
+		if (this.open && event.key === "Escape") {
+			event.stopPropagation();
+			this.open = false;
+			this.nativeEl?.focus();
+		}
+	};
+	/**
+	* Apply a new value from any input path (native select, styled popup), keeping
+	* `value`, form state, and listeners in sync and emitting the `zl-change`
+	* contract plus a composed native `change` for host forms.
+	*/
+	commitValue(next) {
+		if (next === this.value) return;
+		this.value = next;
+		this.syncFormState();
+		emit(this, "zl-change", {
+			name: this.name,
+			value: this.value
+		});
+		this.dispatchEvent(new Event("change", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	syncFormState() {
+		this.internals.setFormValue?.(this.value || null);
+		if (this.required && !this.value) this.internals.setValidity?.({ valueMissing: true }, "Please select an item in the list.", this.nativeEl ?? void 0);
+		else this.internals.setValidity?.({});
+	}
+	nativeTestId() {
+		if (this.name) return `zitadel-select-${this.name}`;
+		if (this.testId) return `${this.testId}-native`;
+	}
+};
+__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()], ZlSelect.prototype, "error", null);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], ZlSelect.prototype, "invalid", 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, "activeValue", null);
+__decorate([query(".zr-select__native")], ZlSelect.prototype, "nativeEl", null);
+ZlSelect = __decorate([customElement("zl-select")], ZlSelect);
+const zlSelectManifest = {
+	tag: "zl-select",
+	attrs: [
+		"name",
+		"label",
+		"value",
+		"placeholder",
+		"options",
+		"required",
+		"error",
+		"invalid",
+		"disabled",
+		"open",
+		"aria-label",
+		"data-testid"
+	],
+	parts: [
+		"root",
+		"label",
+		"field",
+		"native",
+		"trigger",
+		"listbox",
+		"option",
+		"error"
+	],
+	slots: [],
+	events: ["zl-change"]
+};
+//#endregion
+export { focusVisibleStyles as C, emit as E, __decorate as S, t as T, zlButtonManifest as _, ZlPasskey as a, ZlIcon as b, zlPageShellManifest as c, hookName as d, ZlCheckbox as f, ZlButton as g, zlCardManifest as h, zlPillManifest as i, ZlField as l, ZlCard as m, zlSelectManifest as n, zlPasskeyManifest as o, zlCheckboxManifest as p, ZlPill as r, ZlPageShell as s, ZlSelect as t, zlFieldManifest as u, ZlAlert as v, baseHostStyles as w, zlIconManifest as x, zlAlertManifest as y };
+
+//# sourceMappingURL=atoms-DSxjEHca.mjs.map