@zitadel/components 0.0.0

package/dist/atoms-CmOTltTH.mjs

@@ -0,0 +1,1311 @@
+import { t as cssVars } from "./tokens-TXmurodq.mjs";
+import { LitElement, css, html, nothing, unsafeCSS } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { unsafeSVG } from "lit/directives/unsafe-svg.js";
+import { ArrowLeft, ArrowRight, Check, CircleAlert, Eye, EyeOff, Info, KeyRound, LoaderCircle, Plus, TriangleAlert, User, X } from "lucide";
+//#region ../shared-component-styles/src/lit/alert-host.css?inline
+var alert_host_default = ":host {\n  display: block;\n}\n";
+//#endregion
+//#region ../shared-component-styles/src/alert.css?inline
+var alert_default = ".zr-alert {\n  align-items: flex-start;\n  gap: var(--zl-spacing-03, 1rem);\n  padding: var(--zl-spacing-03, 1rem);\n  border-radius: var(--zl-radius-m, .75rem);\n  background: var(--zl-color-surface-default-primary-gray, #252528);\n  color: var(--zl-color-text-button-invert, #f4f4f6);\n  font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n  font-size: .875rem;\n  font-weight: 400;\n  line-height: 1.25rem;\n  display: flex;\n  box-shadow: 0 1px 2px #1018280d;\n}\n\n.zr-alert__icon {\n  color: var(--zl-color-text-error, #ea4f70);\n  flex-shrink: 0;\n}\n\n.zr-alert--warning .zr-alert__icon {\n  color: var(--zl-color-text-subtitle-orange, #f25543);\n}\n\n.zr-alert--success .zr-alert__icon {\n  color: var(--zl-color-text-success, #33a779);\n}\n\n.zr-alert--info .zr-alert__icon {\n  color: var(--zl-color-text-subtitle-gray, #bfbfcf);\n}\n\n.zr-alert__body {\n  gap: var(--zl-spacing-01, .25rem);\n  flex-direction: column;\n  flex: auto;\n  min-width: 0;\n  display: flex;\n}\n\n.zr-alert__title {\n  color: var(--zl-color-text-button-invert, #f4f4f6);\n  font-weight: 600;\n}\n\n.zr-alert__message {\n  color: var(--zl-color-border-default-white, #f4f4f6);\n  margin: 0;\n}\n\n.zr-alert:not(:has(.zr-alert__title)) .zr-alert__message {\n  color: var(--zl-color-text-button-invert, #f4f4f6);\n}\n\n.zr-alert__close {\n  all: unset;\n  width: 2.25rem;\n  height: 2.25rem;\n  padding: var(--zl-spacing-02, .5rem);\n  border-radius: var(--zl-radius-s, .5rem);\n  color: var(--zl-color-text-secondary-gray, #bfbfcf);\n  cursor: pointer;\n  transition: background-color var(--zl-duration-fast, .12s) var(--zl-easing-standard, cubic-bezier(.2, 0, 0, 1));\n  flex-shrink: 0;\n  justify-content: center;\n  align-items: center;\n  display: inline-flex;\n}\n\n.zr-alert__close .zr-icon {\n  --zl-icon-size: 1.25rem;\n  width: 1.25rem;\n  height: 1.25rem;\n}\n\n.zr-alert__close:hover {\n  background: var(--zl-color-gray-200, #484a57);\n}\n\n.zr-alert__close:focus-visible {\n  outline: var(--zl-focus-width, 2px) solid var(--zl-focus-color, #f4f4f6);\n  outline-offset: var(--zl-focus-offset, 2px);\n}\n";
+//#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.color.text.primaryWhite};
+    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. Mirrors the
+* Figma button "Focused" state — a 2px white outline offset by 2px from
+* the element edge. Atoms apply via `&:focus-visible { ${focusVisibleStyles} }`.
+*/
+const focusVisibleStyles = css`
+  outline: ${t.focus.width} solid ${t.focus.color};
+  outline-offset: ${t.focus.offset};
+`;
+//#endregion
+//#region src/styles/surface.ts
+/**
+* Wrap shared surface CSS (from `@zitadel/shared-component-styles`)
+* for Lit `static styles`. Import `.css?inline` in atoms; `@tsdown/css` inlines
+* the strings when `components` is built.
+*/
+function surfaceStyles(...cssChunks) {
+	return cssChunks.map((chunk) => unsafeCSS(chunk));
+}
+//#endregion
+//#region ../shared-component-styles/src/lit/icon-host.css?inline
+var icon_host_default = ":host {\n  color: inherit;\n  display: contents;\n}\n";
+//#endregion
+//#region ../shared-component-styles/src/icon.css?inline
+var icon_default = ".zr-icon {\n  color: inherit;\n  width: var(--zl-icon-size, 1.5rem);\n  height: var(--zl-icon-size, 1.5rem);\n  justify-content: center;\n  align-items: center;\n  display: inline-flex;\n}\n\n.zr-icon--16 {\n  --zl-icon-size: 1rem;\n}\n\n.zr-icon--24 {\n  --zl-icon-size: 1.5rem;\n}\n\n.zr-icon--tone-error {\n  color: var(--zl-color-icon-error);\n}\n\n.zr-icon--tone-success {\n  color: var(--zl-color-icon-success);\n}\n\n.zr-icon--tone-disabled {\n  color: var(--zl-color-icon-disabled);\n}\n\n.zr-icon svg {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n\n.zr-icon--spin svg {\n  animation: .8s linear infinite zr-icon-spin;\n}\n\n@keyframes zr-icon-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n";
+//#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(icon_host_default, 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=${[
+			"zr-icon",
+			`zr-icon--${this.size}`,
+			this.tone !== "default" ? `zr-icon--tone-${this.tone}` : "",
+			this.spin ? "zr-icon--spin" : ""
+		].filter(Boolean).join(" ")}>
+        <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,
+	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(alert_host_default, 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 = () => {
+		this.dispatchEvent(new CustomEvent("zl-dismiss", {
+			bubbles: true,
+			composed: true
+		}));
+		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 ../shared-component-styles/src/lit/button-host.css?inline
+var button_host_default = ":host {\n  display: inline-flex;\n}\n\n:host([block]) {\n  width: 100%;\n  display: flex;\n}\n\n:host([hierarchy=\"primary\"]) {\n  color: var(--zl-color-text-button-default, #0f0f11);\n}\n\n:host([hierarchy=\"secondary\"]), :host([hierarchy=\"text\"]) {\n  color: var(--zl-color-text-button-invert, #f4f4f6);\n}\n\n:host([disabled]) {\n  color: var(--zl-color-text-disabled, #686883);\n}\n\n::slotted([slot=\"leading\"]), ::slotted([slot=\"trailing\"]) {\n  align-items: center;\n  display: inline-flex;\n}\n\n.zr-btn .spinner {\n  display: inline-flex;\n}\n";
+//#endregion
+//#region ../shared-component-styles/src/button.css?inline
+var button_default = ":where(.zr-btn) {\n  all: unset;\n  box-sizing: border-box;\n  cursor: pointer;\n  font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n  justify-content: center;\n  align-items: center;\n  gap: var(--zl-spacing-02, .5rem);\n  width: max-content;\n  padding-inline: var(--zl-spacing-03, 1rem);\n  border-radius: var(--zl-radius-s, .5rem);\n  text-align: center;\n  white-space: nowrap;\n  transition: background-color var(--zl-duration-fast, .12s) var(--zl-easing-standard, cubic-bezier(.2, 0, 0, 1)),\n    color var(--zl-duration-fast, .12s) var(--zl-easing-standard, cubic-bezier(.2, 0, 0, 1)),\n    border-color var(--zl-duration-fast, .12s) var(--zl-easing-standard, cubic-bezier(.2, 0, 0, 1)),\n    background-image var(--zl-duration-fast, .12s) var(--zl-easing-standard, cubic-bezier(.2, 0, 0, 1));\n  border: 1px solid #0000;\n  padding-block: .625rem;\n  font-weight: 600;\n  display: inline-flex;\n}\n\n.zr-btn:focus-visible, .zr-btn[data-state=\"focused\"] {\n  outline: var(--zl-focus-width, 2px) solid var(--zl-focus-color, #f4f4f6);\n  outline-offset: var(--zl-focus-offset, 2px);\n}\n\n.zr-btn--block {\n  width: 100%;\n  display: flex;\n}\n\n.zr-btn--medium {\n  height: 3rem;\n  font-size: 1rem;\n  line-height: 1.5rem;\n}\n\n.zr-btn--small {\n  height: 2.5rem;\n  font-size: .875rem;\n  line-height: 1.25rem;\n}\n\n.zr-btn--primary {\n  background: var(--zl-color-surface-default-white, #f4f4f6);\n  color: var(--zl-color-text-button-default, #0f0f11);\n}\n\n.zr-btn--primary:hover:not(:disabled), .zr-btn--primary:active:not(:disabled), .zr-btn--primary:focus-visible:not(:disabled), .zr-btn--primary[data-state=\"hovered\"]:not(:disabled), .zr-btn--primary[data-state=\"pressed\"]:not(:disabled), .zr-btn--primary[data-state=\"focused\"]:not(:disabled) {\n  background: var(--zl-color-gray-600, #cfcfde);\n  border-color: var(--zl-color-border-default-black, #252528);\n}\n\n.zr-btn--primary:disabled {\n  color: var(--zl-color-text-disabled, #686883);\n  cursor: not-allowed;\n}\n\n.zr-btn--secondary {\n  background: var(--zl-color-border-default-black, #252528);\n  color: var(--zl-color-text-button-invert, #f4f4f6);\n}\n\n.zr-btn--secondary:hover:not(:disabled), .zr-btn--secondary:active:not(:disabled), .zr-btn--secondary[data-state=\"hovered\"]:not(:disabled), .zr-btn--secondary[data-state=\"pressed\"]:not(:disabled) {\n  background: var(--zl-color-gray-200, #484a57);\n}\n\n.zr-btn--secondary:disabled {\n  color: var(--zl-color-text-disabled, #686883);\n  cursor: not-allowed;\n}\n\n.zr-btn--text {\n  color: var(--zl-color-text-button-invert, #f4f4f6);\n  background: none;\n}\n\n.zr-btn--text:hover:not(:disabled), .zr-btn--text:active:not(:disabled), .zr-btn--text[data-state=\"hovered\"]:not(:disabled), .zr-btn--text[data-state=\"pressed\"]:not(:disabled) {\n  background: var(--zl-color-gray-200, #484a57);\n}\n\n.zr-btn--text:focus-visible:not(:disabled), .zr-btn--text[data-state=\"focused\"]:not(:disabled) {\n  background: var(--zl-color-border-default-black, #252528);\n}\n\n.zr-btn--text:disabled {\n  color: var(--zl-color-text-disabled, #686883);\n  cursor: not-allowed;\n}\n";
+//#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(button_host_default, 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;
+	}
+	internals;
+	constructor() {
+		super();
+		this.internals = this.attachInternals();
+	}
+	focus(options) {
+		this.shadowRoot?.querySelector("button")?.focus(options);
+	}
+	surfaceClasses() {
+		return [
+			"root",
+			"zr-btn",
+			`zr-btn--${this.hierarchy}`,
+			`zr-btn--${this.size}`,
+			this.block ? "zr-btn--block" : ""
+		].filter(Boolean).join(" ");
+	}
+	render() {
+		const blocked = this.disabled || this.loading;
+		const forcedState = this.getAttribute("data-state");
+		const body = this.label !== void 0 ? html`<span>${this.label}</span>` : html`<slot></slot>`;
+		return html`
+      <button
+        class=${this.surfaceClasses()}
+        part="root"
+        type=${this.type}
+        ?disabled=${blocked}
+        aria-busy=${this.loading ? "true" : "false"}
+        data-state=${forcedState ?? nothing}
+        @click=${this.handleClick}
+      >
+        <slot name="leading"></slot>
+        ${body}
+        ${this.loading ? html`<span class="spinner" part="spinner"><zl-icon name="spinner" size=${this.size === "small" ? "16" : "24"} spin decorative></zl-icon></span>` : html`<slot name="trailing"></slot>`}
+      </button>
+    `;
+	}
+	handleClick = (event) => {
+		if (this.disabled || this.loading) {
+			event.preventDefault();
+			event.stopImmediatePropagation();
+			return;
+		}
+		const form = this.internals.form;
+		if (this.type === "submit" && form) {
+			event.preventDefault();
+			form.requestSubmit();
+		} else if (this.type === "reset" && form) {
+			event.preventDefault();
+			form.reset();
+		}
+		this.dispatchEvent(new CustomEvent("zl-submit", {
+			bubbles: true,
+			composed: true,
+			detail: { action: this.action ?? null }
+		}));
+	};
+};
+__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);
+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"
+	],
+	parts: ["root", "spinner"],
+	slots: [
+		"",
+		"leading",
+		"trailing"
+	],
+	events: ["zl-submit"]
+};
+//#endregion
+//#region ../shared-component-styles/src/lit/card-host.css?inline
+var card_host_default = ":host {\n  width: 100%;\n  max-width: var(--zl-container-auth-card, 24rem);\n  margin-inline: auto;\n  display: block;\n}\n\n.zr-card ::slotted([slot=\"header\"]), .zr-card ::slotted([slot=\"footer\"]) {\n  margin: 0;\n}\n";
+//#endregion
+//#region ../shared-component-styles/src/card.css?inline
+var card_default = ".zr-card {\n  width: 100%;\n  max-width: var(--zl-container-auth-card, 24rem);\n  border: 1px solid var(--zl-color-surface-default-primary-gray, #252528);\n  border-radius: var(--zl-radius-l, 1rem);\n  padding: var(--zl-spacing-05, 2rem);\n  gap: var(--zl-spacing-05, 2rem);\n  font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  box-sizing: border-box;\n  background: none;\n  flex-direction: column;\n  margin-inline: auto;\n  display: flex;\n}\n\n.zr-card--compact {\n  gap: var(--zl-spacing-04, 1.5rem);\n}\n\n.zr-card__header, .zr-card__footer {\n  gap: var(--zl-spacing-02, .5rem);\n  flex-direction: column;\n  display: flex;\n}\n\n.zr-card__region--empty {\n  display: none;\n}\n\n.zr-card__body {\n  gap: var(--zl-spacing-03, 1rem);\n  flex-direction: column;\n  display: flex;\n}\n";
+//#endregion
+//#region src/atoms/zl-card.ts
+let ZlCard = class ZlCard extends LitElement {
+	static styles = [baseHostStyles, ...surfaceStyles(card_host_default, 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");
+		return html`
+      <section class=${this.compact ? "zr-card zr-card--compact" : "zr-card"} part="card">
+        <header class=${hasHeader ? "zr-card__header" : "zr-card__header zr-card__region--empty"} part="header">
+          <slot name="header"></slot>
+        </header>
+        <div class="zr-card__body" part="body">
+          <slot></slot>
+        </div>
+        <footer class=${hasFooter ? "zr-card__footer" : "zr-card__footer zr-card__region--empty"} part="footer">
+          <slot name="footer"></slot>
+        </footer>
+      </section>
+    `;
+	}
+	/** 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 ../shared-component-styles/src/lit/text-field-host.css?inline
+var text_field_host_default = ":host {\n  display: block;\n}\n\n::slotted([slot=\"prefix\"]), ::slotted([slot=\"suffix\"]) {\n  color: var(--zl-color-text-secondary-gray, #bfbfcf);\n  display: inline-flex;\n}\n\n.zr-field__help[hidden], .zr-field__error[hidden] {\n  display: none;\n}\n\n:host([data-state=\"hovered\"]:not([disabled])) .zr-field:not(.zr-field--invalid):not(.zr-field--success) .zr-field__wrap:not(:focus-within) {\n  border-color: var(--zl-color-gray-500, #9e9eb2);\n  background-color: color-mix(in srgb, var(--zl-color-text-primary-white, #f4f4f6) 10%, transparent);\n}\n\n:host([data-state=\"focused\"]:not([disabled])) .zr-field:not(.zr-field--invalid):not(.zr-field--success) .zr-field__wrap {\n  border-color: var(--zl-color-border-default-white, #f4f4f6);\n}\n\n:host([data-state=\"focused\"]:not([disabled])) .zr-field--invalid .zr-field__wrap {\n  border-color: var(--zl-color-border-error, #ea4f70);\n}\n\n:host([data-state=\"focused\"]:not([disabled])) .zr-field--success .zr-field__wrap {\n  border-color: var(--zl-color-border-success, #33a779);\n}\n";
+//#endregion
+//#region ../shared-component-styles/src/text-field.css?inline
+var text_field_default = ".zr-field {\n  align-items: stretch;\n  gap: var(--zl-spacing-02, .5rem);\n  font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n  flex-direction: column;\n  display: flex;\n}\n\n.zr-field__label-row {\n  justify-content: space-between;\n  align-items: flex-start;\n  gap: var(--zl-spacing-02, .5rem);\n  width: 100%;\n  display: flex;\n}\n\n.zr-field__label {\n  align-items: center;\n  gap: var(--zl-spacing-01, .25rem);\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  font-size: 1rem;\n  font-weight: 600;\n  line-height: 1.5rem;\n  display: inline-flex;\n}\n\n.zr-field__link {\n  color: var(--zl-color-icon-default-purple, #bba5e4);\n  flex-shrink: 0;\n  font-size: .875rem;\n  font-weight: 400;\n  line-height: 1.25rem;\n  text-decoration: none;\n}\n\n.zr-field__link:hover {\n  text-decoration: underline;\n}\n\n.zr-field__link:focus-visible {\n  outline: var(--zl-focus-width, 2px) solid var(--zl-focus-color, #f4f4f6);\n  outline-offset: var(--zl-focus-offset, 2px);\n  border-radius: 2px;\n}\n\n.zr-field__required {\n  color: var(--zl-color-text-error, #ea4f70);\n}\n\n.zr-field--disabled .zr-field__label {\n  color: var(--zl-color-text-disabled, #686883);\n}\n\n.zr-field__wrap {\n  align-items: center;\n  gap: var(--zl-spacing-02, .5rem);\n  padding-block: var(--zl-spacing-02, .5rem);\n  padding-inline: var(--zl-spacing-03, 1rem);\n  border-radius: var(--zl-radius-xs, .25rem);\n  border: 1px solid var(--zl-color-border-default-gray-300, #686883);\n  height: 2.5rem;\n  transition: border-color var(--zl-duration-fast, .12s) var(--zl-easing-standard, cubic-bezier(.2, 0, 0, 1)),\n    background-color var(--zl-duration-fast, .12s) var(--zl-easing-standard, cubic-bezier(.2, 0, 0, 1));\n  box-sizing: border-box;\n  background: none;\n  display: flex;\n  position: relative;\n  overflow: visible;\n}\n\n.zr-field__wrap--trailing {\n  padding-inline-end: 2.5rem;\n}\n\n.zr-field:not(.zr-field--disabled) .zr-field__wrap:hover:not(:focus-within) {\n  border-color: var(--zl-color-gray-500, #9e9eb2);\n  background-color: color-mix(in srgb, var(--zl-color-text-primary-white, #f4f4f6) 10%, transparent);\n}\n\n.zr-field:not(.zr-field--invalid):not(.zr-field--disabled):not(.zr-field--success) .zr-field__wrap:has(.zr-field__input:not(:placeholder-shown)):not(:focus-within) {\n  border-color: var(--zl-color-border-default-gray-400, #82829c);\n}\n\n.zr-field:not(.zr-field--invalid):not(.zr-field--disabled):not(.zr-field--success) .zr-field__wrap:focus-within {\n  border-color: var(--zl-color-border-default-white, #f4f4f6);\n  outline: none;\n}\n\n.zr-field--invalid .zr-field__wrap {\n  border-color: var(--zl-color-border-error, #ea4f70);\n}\n\n.zr-field--invalid .zr-field__wrap:focus-within {\n  border-color: var(--zl-color-border-error, #ea4f70);\n  outline: none;\n}\n\n.zr-field--success .zr-field__wrap {\n  border-color: var(--zl-color-border-success, #33a779);\n}\n\n.zr-field--success .zr-field__wrap:focus-within {\n  border-color: var(--zl-color-border-success, #33a779);\n  outline: none;\n}\n\n.zr-field--disabled .zr-field__wrap {\n  border-color: var(--zl-color-border-default-gray-200, #484a57);\n}\n\n.zr-field__input {\n  min-width: 0;\n  height: 100%;\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  background: none;\n  border: 0;\n  outline: none;\n  flex: auto;\n  padding: 0;\n  font-family: inherit;\n  font-size: .875rem;\n  font-weight: 400;\n  line-height: 1.25rem;\n}\n\n.zr-field__input[type=\"password\"] {\n  letter-spacing: .125rem;\n}\n\n.zr-field__input::placeholder {\n  color: var(--zl-color-text-secondary-gray, #bfbfcf);\n}\n\n.zr-field__input:focus, .zr-field__input:focus-visible {\n  outline: none;\n}\n\n.zr-field__input:disabled {\n  cursor: not-allowed;\n  color: var(--zl-color-text-disabled, #686883);\n}\n\n.zr-field--disabled .zr-field__wrap:hover {\n  border-color: var(--zl-color-border-default-gray-200, #484a57);\n  background-color: #0000;\n}\n\n.zr-field__trailing {\n  width: 1rem;\n  height: 1rem;\n  color: var(--zl-color-text-secondary-gray, #bfbfcf);\n  justify-content: center;\n  align-items: center;\n  display: inline-flex;\n  position: absolute;\n  top: 50%;\n  right: .9375rem;\n  transform: translateY(-50%);\n}\n\n.zr-field__trailing-action {\n  color: inherit;\n  cursor: pointer;\n  background: none;\n  border: 0;\n  justify-content: center;\n  align-items: center;\n  margin: 0;\n  padding: 0;\n  line-height: 0;\n  display: inline-flex;\n}\n\n.zr-field__trailing-action:focus-visible {\n  outline: var(--zl-focus-width, 2px) solid var(--zl-focus-color, #f4f4f6);\n  outline-offset: var(--zl-focus-offset, 2px);\n  border-radius: 2px;\n}\n\n.zr-field__trailing-action:disabled {\n  cursor: not-allowed;\n}\n\n.zr-field--invalid .zr-field__trailing {\n  color: var(--zl-color-text-error, #ea4f70);\n}\n\n.zr-field--success .zr-field__trailing {\n  color: var(--zl-color-text-success, #33a779);\n}\n\n.zr-field__help {\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  font-size: .75rem;\n  line-height: 1rem;\n}\n\n.zr-field__success {\n  color: var(--zl-color-text-success, #33a779);\n  font-size: .75rem;\n  line-height: 1rem;\n}\n\n.zr-field__error {\n  color: var(--zl-color-text-error, #ea4f70);\n  font-size: .75rem;\n  line-height: 1rem;\n}\n";
+//#endregion
+//#region src/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-field.ts
+let ZlField = class ZlField extends LitElement {
+	static formAssociated = true;
+	static shadowRootOptions = {
+		...LitElement.shadowRootOptions,
+		delegatesFocus: true
+	};
+	static styles = [baseHostStyles, ...surfaceStyles(text_field_host_default, text_field_default)];
+	#_name_accessor_storage = "";
+	get name() {
+		return this.#_name_accessor_storage;
+	}
+	set name(value) {
+		this.#_name_accessor_storage = 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;
+	}
+	#_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;
+	}
+	#_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;
+	}
+	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.shadowRoot?.querySelector("input")?.focus(options);
+	}
+	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 = [
+			"zr-field",
+			this.invalid || showError ? "zr-field--invalid" : "",
+			showSuccess ? "zr-field--success" : "",
+			this.disabled ? "zr-field--disabled" : ""
+		].filter(Boolean).join(" ");
+		const showDefaultTrailing = this.trailingIcon && !this.hasSuffixSlot && !this.disabled;
+		const trailing = showDefaultTrailing ? this.renderTrailingIcon() : null;
+		const wrapClass = ["zr-field__wrap", showDefaultTrailing ? "zr-field__wrap--trailing" : ""].filter(Boolean).join(" ");
+		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}
+            name=${this.name}
+            type=${this.type}
+            .value=${this.value}
+            placeholder=${this.placeholder}
+            autocomplete=${this.autocomplete ?? ""}
+            pattern=${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}
+            >${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 = "";
+		this.dispatchEvent(new CustomEvent("zl-input", {
+			bubbles: true,
+			composed: true,
+			detail: {
+				name: this.name,
+				value: this.value
+			}
+		}));
+		this.syncFormState();
+		this.shadowRoot?.querySelector(".zr-field__input")?.focus();
+	};
+	handleInput = (event) => {
+		const input = event.target;
+		this.value = input.value;
+		this.dispatchEvent(new CustomEvent("zl-input", {
+			bubbles: true,
+			composed: true,
+			detail: {
+				name: this.name,
+				value: this.value
+			}
+		}));
+	};
+	handleChange = (event) => {
+		const input = event.target;
+		this.value = input.value;
+		this.dispatchEvent(new Event("change", {
+			bubbles: true,
+			composed: true
+		}));
+	};
+	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();
+			}
+		}
+	};
+};
+__decorate([property()], ZlField.prototype, "name", null);
+__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: "forgot-password-href" })], ZlField.prototype, "forgotPasswordHref", null);
+__decorate([property({ attribute: "forgot-password-label" })], ZlField.prototype, "forgotPasswordLabel", 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);
+ZlField = __decorate([customElement("zl-field")], ZlField);
+const zlFieldManifest = {
+	tag: "zl-field",
+	consumes: { field: { required: true } },
+	attrs: [
+		"name",
+		"label",
+		"type",
+		"value",
+		"placeholder",
+		"autocomplete",
+		"pattern",
+		"required",
+		"disabled",
+		"invalid",
+		"error",
+		"success",
+		"forgot-password-href",
+		"forgot-password-label",
+		"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"]
+};
+//#endregion
+//#region ../shared-component-styles/src/lit/page-shell-host.css?inline
+var page_shell_host_default = ":host {\n  background: var(--zl-color-surface-default-black, #0f0f11);\n  min-height: 100vh;\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  display: block;\n}\n\n:host([data-embedded]) {\n  height: 100%;\n  min-height: 100%;\n}\n\n:host([data-embedded]) .zr-page-shell {\n  min-height: 100%;\n}\n\n.zr-page-shell ::slotted([slot=\"header\"]), .zr-page-shell ::slotted([slot=\"footer\"]) {\n  margin: 0;\n}\n";
+//#endregion
+//#region ../shared-component-styles/src/page-shell.css?inline
+var page_shell_default = ".zr-page-shell {\n  background: var(--zl-color-surface-default-black, #0f0f11);\n  min-height: 100vh;\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n  justify-content: center;\n  align-items: center;\n  gap: var(--zl-spacing-04, 1.5rem);\n  padding-block: var(--zl-spacing-05, 2rem);\n  padding-inline: var(--zl-spacing-03, 1rem);\n  box-sizing: border-box;\n  flex-direction: column;\n  display: flex;\n}\n\n@media (width >= 48rem) {\n  .zr-page-shell {\n    padding-block: 3.25rem;\n    padding-inline: var(--zl-spacing-03, 1rem);\n  }\n}\n\n.zr-page-shell__header, .zr-page-shell__main, .zr-page-shell__footer {\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  display: flex;\n}\n\n.zr-page-shell__main {\n  flex: none;\n}\n\n.zr-page-shell__footer {\n  min-height: 1.5rem;\n}\n\n.zr-page-shell__region--empty {\n  display: none;\n}\n\n.zr-page-shell[data-embedded] {\n  height: 100%;\n  min-height: 100%;\n}\n";
+//#endregion
+//#region src/atoms/zl-page-shell.ts
+let ZlPageShell = class ZlPageShell extends LitElement {
+	static styles = [baseHostStyles, ...surfaceStyles(page_shell_host_default, page_shell_default)];
+	render() {
+		const hasHeader = this.lightDomSlotFilled("header");
+		const hasFooter = this.lightDomSlotFilled("footer");
+		return html`
+      <div class="zr-page-shell" part="shell">
+        <header class=${hasHeader ? "zr-page-shell__header" : "zr-page-shell__header zr-page-shell__region--empty"} part="header">
+          <slot name="header"></slot>
+        </header>
+        <main class="zr-page-shell__main" part="main">
+          <slot></slot>
+        </main>
+        <footer class=${hasFooter ? "zr-page-shell__footer" : "zr-page-shell__footer zr-page-shell__region--empty"} part="footer">
+          <slot name="footer"></slot>
+        </footer>
+      </div>
+    `;
+	}
+	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
+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;
+	}
+	#_manual_accessor_storage = false;
+	get manual() {
+		return this.#_manual_accessor_storage;
+	}
+	set manual(value) {
+		this.#_manual_accessor_storage = value;
+	}
+	abortController = null;
+	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).
+	*/
+	abort() {
+		this.abortController?.abort();
+		this.abortController = null;
+	}
+	/**
+	* 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();
+		this.abortController = new AbortController();
+		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");
+			this.emitError(error instanceof Error ? error.message : "WebAuthn ceremony failed.", aborted);
+		}
+	}
+	/**
+	* `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: "passkey",
+			proof
+		};
+		this.dispatchEvent(new CustomEvent("zl-passkey-result", {
+			bubbles: true,
+			composed: true,
+			detail
+		}));
+	}
+	emitError(message, aborted) {
+		const detail = {
+			challenge_id: this.challengeId,
+			error: message,
+			aborted
+		};
+		this.dispatchEvent(new CustomEvent("zl-passkey-error", {
+			bubbles: true,
+			composed: true,
+			detail
+		}));
+	}
+	/** Invisible component — no shadow DOM rendering needed. */
+	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: Boolean })], ZlPasskey.prototype, "manual", null);
+ZlPasskey = __decorate([customElement("zl-passkey")], ZlPasskey);
+const zlPasskeyManifest = {
+	tag: "zl-passkey",
+	consumes: {},
+	attrs: [
+		"ceremony",
+		"challenge-id",
+		"options",
+		"manual"
+	],
+	parts: [],
+	slots: [],
+	events: ["zl-passkey-result", "zl-passkey-error"]
+};
+//#endregion
+//#region ../shared-component-styles/src/lit/pill-host.css?inline
+var pill_host_default = ":host {\n  display: inline-flex;\n}\n\n::slotted(.zr-pill__logotype) {\n  flex-shrink: 0;\n  width: 65px;\n  height: 16px;\n  margin-top: 2px;\n  line-height: 0;\n  display: block;\n}\n\n::slotted(.zr-pill__logotype-svg) {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n";
+//#endregion
+//#region ../shared-component-styles/src/pill.css?inline
+var pill_default = ".zr-pill {\n  box-sizing: border-box;\n  justify-content: center;\n  align-items: flex-start;\n  gap: var(--zl-spacing-02, .5rem);\n  height: 2.5rem;\n  padding-inline: var(--zl-spacing-03, 1rem);\n  font-family: var(--zl-font-family-sans, system-ui, sans-serif);\n  letter-spacing: 0;\n  text-transform: none;\n  background: linear-gradient(182deg, #484a5799 28.65%, #0f0f1199 81.82%),\n    var(--zl-color-surface-default-primary-gray, #252528);\n  color: var(--zl-color-text-primary-white, #f4f4f6);\n  border: 1px solid var(--zl-color-border-default-gray-200, #484a57);\n  white-space: nowrap;\n  border-radius: 100px;\n  padding-block: calc(.625rem - 1px);\n  font-size: .875rem;\n  font-weight: 400;\n  line-height: 1.25rem;\n  text-decoration: none;\n  display: inline-flex;\n}\n\n.zr-pill__logotype {\n  flex-shrink: 0;\n  width: 65px;\n  height: 16px;\n  margin-top: 2px;\n  line-height: 0;\n  display: block;\n}\n\n.zr-pill__logotype-svg {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n\n.zr-pill--pink {\n  color: var(--zl-color-text-subtitle-pink);\n  border-color: var(--zl-color-text-subtitle-pink);\n  background: color-mix(in srgb, var(--zl-color-text-subtitle-pink) 10%, var(--zl-color-surface-default-primary-gray));\n}\n\n.zr-pill--purple {\n  color: var(--zl-color-text-subtitle-purple);\n  border-color: var(--zl-color-text-subtitle-purple);\n  background: color-mix(in srgb, var(--zl-color-text-subtitle-purple) 10%, var(--zl-color-surface-default-primary-gray));\n}\n\n.zr-pill--orange {\n  color: var(--zl-color-text-subtitle-orange);\n  border-color: var(--zl-color-text-subtitle-orange);\n  background: color-mix(in srgb, var(--zl-color-text-subtitle-orange) 10%, var(--zl-color-surface-default-primary-gray));\n}\n\n.zr-pill--success {\n  color: var(--zl-color-text-success);\n  border-color: var(--zl-color-text-success);\n  background: color-mix(in srgb, var(--zl-color-text-success) 10%, var(--zl-color-surface-default-primary-gray));\n}\n\na.zr-pill:focus-visible {\n  outline: var(--zl-focus-width, 2px) solid var(--zl-focus-color, #f4f4f6);\n  outline-offset: var(--zl-focus-offset, 2px);\n}\n";
+//#endregion
+//#region src/atoms/zl-pill.ts
+let ZlPill = class ZlPill extends LitElement {
+	static styles = [baseHostStyles, ...surfaceStyles(pill_host_default, 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;
+	}
+	surfaceClasses() {
+		return ["zr-pill", this.tone !== "neutral" ? `zr-pill--${this.tone}` : ""].filter(Boolean).join(" ");
+	}
+	render() {
+		const classes = this.surfaceClasses();
+		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
+export { __decorate as _, ZlPageShell as a, t as b, zlFieldManifest as c, ZlButton as d, zlButtonManifest as f, zlIconManifest as g, ZlIcon as h, zlPasskeyManifest as i, ZlCard as l, zlAlertManifest as m, zlPillManifest as n, zlPageShellManifest as o, ZlAlert as p, ZlPasskey as r, ZlField as s, ZlPill as t, zlCardManifest as u, focusVisibleStyles as v, baseHostStyles as y };
+
+//# sourceMappingURL=atoms-CmOTltTH.mjs.map