@zitadel/components 0.0.0 → 0.1.0-alpha.2

package/dist/{atoms-CmOTltTH.mjs → atoms-eOxuoGDq.mjs}

@@ -1,14 +1,36 @@
 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 { customElement, property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
 import { unsafeSVG } from "lit/directives/unsafe-svg.js";
 import { ArrowLeft, ArrowRight, Check, CircleAlert, Eye, EyeOff, Info, KeyRound, LoaderCircle, Plus, TriangleAlert, User, X } from "lucide";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { live } from "lit/directives/live.js";
 //#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/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);
@@ -123,12 +145,12 @@ let ZlIcon = class ZlIcon extends LitElement {
 		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(" ")}>
+      <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"
@@ -257,10 +279,7 @@ let ZlAlert = class ZlAlert extends LitElement {
     `;
 	}
 	handleDismiss = () => {
-		this.dispatchEvent(new CustomEvent("zl-dismiss", {
-			bubbles: true,
-			composed: true
-		}));
+		emit(this, "zl-dismiss");
 		this.remove();
 	};
 };
@@ -292,7 +311,7 @@ const zlAlertManifest = {
 		"message",
 		"close"
 	],
-	slots: [],
+	slots: [""],
 	events: ["zl-dismiss"]
 };
 //#endregion
@@ -366,6 +385,13 @@ let ZlButton = class ZlButton extends LitElement {
 	set label(value) {
 		this.#_label_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();
@@ -374,27 +400,23 @@ let ZlButton = class ZlButton extends LitElement {
 	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()}
+        class=${classMap({
+			root: true,
+			"zr-btn": true,
+			[`zr-btn--${this.hierarchy}`]: true,
+			[`zr-btn--${this.size}`]: true,
+			"zr-btn--block": this.block
+		})}
         part="root"
         type=${this.type}
         ?disabled=${blocked}
         aria-busy=${this.loading ? "true" : "false"}
-        data-state=${forcedState ?? nothing}
+        data-state=${this.forcedState ?? nothing}
         @click=${this.handleClick}
       >
         <slot name="leading"></slot>
@@ -417,11 +439,7 @@ let ZlButton = class ZlButton extends LitElement {
 			event.preventDefault();
 			form.reset();
 		}
-		this.dispatchEvent(new CustomEvent("zl-submit", {
-			bubbles: true,
-			composed: true,
-			detail: { action: this.action ?? null }
-		}));
+		emit(this, "zl-submit", { action: this.action ?? null });
 	};
 };
 __decorate([property({ reflect: true })], ZlButton.prototype, "hierarchy", null);
@@ -438,6 +456,7 @@ __decorate([property({
 	reflect: true
 })], ZlButton.prototype, "block", null);
 __decorate([property()], ZlButton.prototype, "label", null);
+__decorate([property({ attribute: "data-state" })], ZlButton.prototype, "forcedState", null);
 ZlButton = __decorate([customElement("zl-button")], ZlButton);
 const zlButtonManifest = {
 	tag: "zl-button",
@@ -483,20 +502,32 @@ let ZlCard = class ZlCard extends LitElement {
 	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=${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>
+      <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=${hasFooter ? "zr-card__footer" : "zr-card__footer zr-card__region--empty"} part="footer">
-          <slot name="footer"></slot>
+        <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;
@@ -557,12 +588,17 @@ let ZlField = class ZlField extends LitElement {
 		delegatesFocus: true
 	};
 	static styles = [baseHostStyles, ...surfaceStyles(text_field_host_default, text_field_default)];
-	#_name_accessor_storage = "";
+	/**
+	* 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.#_name_accessor_storage;
+		return this.getAttribute("name") ?? "";
 	}
 	set name(value) {
-		this.#_name_accessor_storage = value;
+		this.setAttribute("name", value);
 	}
 	#_label_accessor_storage = "";
 	get label() {
@@ -676,6 +712,13 @@ let ZlField = class ZlField extends LitElement {
 	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() {
@@ -696,7 +739,7 @@ let ZlField = class ZlField extends LitElement {
 		this.value = state ?? "";
 	}
 	focus(options) {
-		this.shadowRoot?.querySelector("input")?.focus(options);
+		this.inputEl?.focus(options);
 	}
 	render() {
 		const labelId = `${this.inputId}-label`;
@@ -710,15 +753,18 @@ let ZlField = class ZlField extends LitElement {
 			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 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 = ["zr-field__wrap", showDefaultTrailing ? "zr-field__wrap--trailing" : ""].filter(Boolean).join(" ");
+		const wrapClass = classMap({
+			"zr-field__wrap": true,
+			"zr-field__wrap--trailing": showDefaultTrailing
+		});
 		return html`
       <div class=${rootClass} part="root">
         ${this.renderLabelRow(labelId)}
@@ -730,10 +776,10 @@ let ZlField = class ZlField extends LitElement {
             id=${this.inputId}
             name=${this.name}
             type=${this.type}
-            .value=${this.value}
+            .value=${live(this.value)}
             placeholder=${this.placeholder}
-            autocomplete=${this.autocomplete ?? ""}
-            pattern=${this.pattern ?? ""}
+            autocomplete=${ifDefined(this.autocomplete)}
+            pattern=${ifDefined(this.pattern)}
             ?required=${this.required}
             ?disabled=${this.disabled}
             aria-invalid=${this.invalid || showError ? "true" : "false"}
@@ -829,28 +875,20 @@ let ZlField = class ZlField extends LitElement {
 	};
 	handleClear = () => {
 		this.value = "";
-		this.dispatchEvent(new CustomEvent("zl-input", {
-			bubbles: true,
-			composed: true,
-			detail: {
-				name: this.name,
-				value: this.value
-			}
-		}));
+		emit(this, "zl-input", {
+			name: this.name,
+			value: this.value
+		});
 		this.syncFormState();
-		this.shadowRoot?.querySelector(".zr-field__input")?.focus();
+		this.inputEl?.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
-			}
-		}));
+		emit(this, "zl-input", {
+			name: this.name,
+			value: this.value
+		});
 	};
 	handleChange = (event) => {
 		const input = event.target;
@@ -870,7 +908,6 @@ let ZlField = class ZlField extends LitElement {
 		}
 	};
 };
-__decorate([property()], ZlField.prototype, "name", null);
 __decorate([property()], ZlField.prototype, "label", null);
 __decorate([property()], ZlField.prototype, "type", null);
 __decorate([property()], ZlField.prototype, "value", null);
@@ -896,6 +933,7 @@ __decorate([property({
 })], 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",
@@ -950,20 +988,30 @@ let ZlPageShell = class ZlPageShell extends LitElement {
 	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=${hasHeader ? "zr-page-shell__header" : "zr-page-shell__header zr-page-shell__region--empty"} part="header">
-          <slot name="header"></slot>
+        <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=${hasFooter ? "zr-page-shell__footer" : "zr-page-shell__footer zr-page-shell__region--empty"} part="footer">
-          <slot name="footer"></slot>
+        <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;
@@ -1041,6 +1089,13 @@ let ZlPasskey = class ZlPasskey extends LitElement {
 	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;
@@ -1185,7 +1240,7 @@ let ZlPasskey = class ZlPasskey extends LitElement {
 	emitResult(proof) {
 		const detail = {
 			challenge_id: this.challengeId,
-			method: "passkey",
+			method: this.method,
 			proof
 		};
 		this.dispatchEvent(new CustomEvent("zl-passkey-result", {
@@ -1229,6 +1284,7 @@ __decorate([property({
 		}
 	}
 })], ZlPasskey.prototype, "options", null);
+__decorate([property({ type: String })], ZlPasskey.prototype, "method", null);
 __decorate([property({ type: Boolean })], ZlPasskey.prototype, "manual", null);
 ZlPasskey = __decorate([customElement("zl-passkey")], ZlPasskey);
 const zlPasskeyManifest = {
@@ -1236,6 +1292,7 @@ const zlPasskeyManifest = {
 	consumes: {},
 	attrs: [
 		"ceremony",
+		"method",
 		"challenge-id",
 		"options",
 		"manual"
@@ -1275,11 +1332,11 @@ let ZlPill = class ZlPill extends LitElement {
 	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();
+		const classes = classMap({
+			"zr-pill": true,
+			[`zr-pill--${this.tone}`]: this.tone !== "neutral"
+		});
 		if (this.href) return html`<a
         class=${classes}
         part="pill"
@@ -1302,10 +1359,10 @@ const zlPillManifest = {
 		"aria-label"
 	],
 	parts: ["pill"],
-	slots: [],
+	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 };
+export { __decorate as _, ZlPageShell as a, t as b, zlFieldManifest as c, ZlButton as d, zlButtonManifest as f, zlIconManifest as g, ZlIcon as h, zlPasskeyManifest as i, ZlCard as l, zlAlertManifest as m, zlPillManifest as n, zlPageShellManifest as o, ZlAlert as p, ZlPasskey as r, ZlField as s, ZlPill as t, zlCardManifest as u, focusVisibleStyles as v, emit as x, baseHostStyles as y };
 
-//# sourceMappingURL=atoms-CmOTltTH.mjs.map
+//# sourceMappingURL=atoms-eOxuoGDq.mjs.map