@cognivo/components 0.8.0

package/dist/components/cg-mfa-prompt/cg-mfa-prompt.d.ts

@@ -0,0 +1,77 @@
+import { LitElement } from 'lit';
+/**
+ * @element cg-mfa-prompt
+ * Multi-factor authentication challenge UI. Shows the current factor
+ * (TOTP, SMS, email, WebAuthn), a code input where applicable, and a
+ * resend control with a token-driven cooldown timer. Emits `cg-mfa-submit`
+ * when the user submits a code.
+ *
+ * The component is form-aware via cg-otp-input — pressing Enter inside
+ * the OTP cells, or auto-submit when the code reaches the configured
+ * length, both fire `cg-mfa-submit` with the entered value.
+ *
+ * @example TOTP challenge
+ * ```html
+ * <cg-mfa-prompt
+ *   factor="totp"
+ *   length="6"
+ *   .resendCooldown=${30}
+ *   @cg-mfa-submit=${onSubmit}
+ *   @cg-mfa-resend=${onResend}
+ * ></cg-mfa-prompt>
+ * ```
+ *
+ * @example SMS with destination hint
+ * ```html
+ * <cg-mfa-prompt factor="sms" destination="+61 4** *** 219"></cg-mfa-prompt>
+ * ```
+ *
+ * @example WebAuthn (no code input — just a re-prompt button)
+ * ```html
+ * <cg-mfa-prompt factor="webauthn" @cg-mfa-trigger=${onWebAuthn}></cg-mfa-prompt>
+ * ```
+ *
+ * @slot footer - Slot for "Use a backup code" / "Try another method" links.
+ *
+ * @fires {CustomEvent<{factor: string, code: string}>} cg-mfa-submit - Code submitted (auto or explicit)
+ * @fires {CustomEvent<{factor: string}>} cg-mfa-resend - Resend requested (after cooldown)
+ * @fires {CustomEvent<{factor: string}>} cg-mfa-trigger - Trigger requested (factors that don't take a code, e.g. WebAuthn)
+ */
+export declare class CgMfaPrompt extends LitElement {
+    static styles: import('lit').CSSResult[];
+    /** Active factor. Drives the visible copy + which input renders. */
+    factor: 'totp' | 'sms' | 'email' | 'webauthn';
+    /** OTP code length. 6 by default; some providers use 4 or 8. */
+    length: number;
+    /** Where the code was sent (e.g. masked phone or email). Decorative. */
+    destination: string;
+    /** Cooldown in seconds before the resend button reactivates after a click. */
+    resendCooldown: number;
+    /** Disable the entire prompt (resending + submitting). */
+    disabled: boolean;
+    /** Override the resend label — e.g. "Send new code" vs "Resend". */
+    resendLabel: string;
+    /** Override the WebAuthn trigger label. */
+    triggerLabel: string;
+    private _code;
+    private _resendRemaining;
+    private _resendTimer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _tickResend;
+    /** Restart the resend cooldown. Call after the consumer issues a new code. */
+    startCooldown(seconds?: number): void;
+    private _onCodeChange;
+    private _onCodeComplete;
+    private _submit;
+    private _onResend;
+    private _onTrigger;
+    private _factorCopy;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-mfa-prompt': CgMfaPrompt;
+    }
+}
+//# sourceMappingURL=cg-mfa-prompt.d.ts.map

package/dist/components/cg-mfa-prompt/cg-mfa-prompt.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-mfa-prompt.d.ts","sourceRoot":"","sources":["../../../src/components/cg-mfa-prompt/cg-mfa-prompt.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,OAAO,iCAAiC,CAAC;AAEzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,4BAiFnB;IAEH,oEAAoE;IACvC,MAAM,EAAE,MAAM,GAAG,KAAK,GAAG,OAAO,GAAG,UAAU,CAAU;IAEpF,gEAAgE;IACpC,MAAM,SAAK;IAEvC,wEAAwE;IAC5D,WAAW,SAAM;IAE7B,8EAA8E;IACpB,cAAc,SAAM;IAE9E,0DAA0D;IACd,QAAQ,UAAS;IAE7D,oEAAoE;IAC3B,WAAW,SAAiB;IAErE,2CAA2C;IACD,YAAY,SAAsB;IAEnE,OAAO,CAAC,KAAK,CAAM;IACnB,OAAO,CAAC,gBAAgB,CAAK;IAEtC,OAAO,CAAC,YAAY,CAAqB;IAEhC,iBAAiB,IAAI,IAAI;IAQzB,oBAAoB,IAAI,IAAI;IAKrC,OAAO,CAAC,WAAW;IAYnB,8EAA8E;IAC9E,aAAa,CAAC,OAAO,GAAE,MAA4B,GAAG,IAAI;IAK1D,OAAO,CAAC,aAAa,CAGnB;IAEF,OAAO,CAAC,eAAe,CAIrB;IAEF,OAAO,CAAC,OAAO;IAUf,OAAO,CAAC,SAAS,CAQf;IAEF,OAAO,CAAC,UAAU,CAOhB;IAEF,OAAO,CAAC,WAAW;IA6BV,MAAM;CA0DhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}

package/dist/components/cg-mfa-prompt/cg-mfa-prompt.js

@@ -0,0 +1,245 @@
+import { css as p, LitElement as u, nothing as g, html as c } from "lit";
+import { property as r, state as h, customElement as f } from "lit/decorators.js";
+import { h as b, r as m } from "../../chunks/premium.css-9I4kHrsl.js";
+import "../cg-otp-input/cg-otp-input.js";
+var v = Object.defineProperty, y = Object.getOwnPropertyDescriptor, i = (e, s, n, a) => {
+  for (var o = a > 1 ? void 0 : a ? y(s, n) : s, d = e.length - 1, l; d >= 0; d--)
+    (l = e[d]) && (o = (a ? l(s, n, o) : l(o)) || o);
+  return a && o && v(s, n, o), o;
+};
+let t = class extends u {
+  constructor() {
+    super(...arguments), this.factor = "totp", this.length = 6, this.destination = "", this.resendCooldown = 30, this.disabled = !1, this.resendLabel = "Resend code", this.triggerLabel = "Use security key", this._code = "", this._resendRemaining = 0, this._onCodeChange = (e) => {
+      const s = e.detail;
+      this._code = s?.value ?? "";
+    }, this._onCodeComplete = (e) => {
+      const n = e.detail?.value ?? this._code;
+      this._submit(n);
+    }, this._onResend = () => {
+      this.disabled || this._resendRemaining > 0 || (this.dispatchEvent(new CustomEvent("cg-mfa-resend", {
+        detail: { factor: this.factor },
+        bubbles: !0,
+        composed: !0
+      })), this.startCooldown());
+    }, this._onTrigger = () => {
+      this.disabled || this.dispatchEvent(new CustomEvent("cg-mfa-trigger", {
+        detail: { factor: this.factor },
+        bubbles: !0,
+        composed: !0
+      }));
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.resendCooldown > 0 && (this._resendRemaining = this.resendCooldown, this._tickResend());
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._resendTimer !== void 0 && clearInterval(this._resendTimer);
+  }
+  _tickResend() {
+    this._resendTimer !== void 0 && clearInterval(this._resendTimer), this._resendTimer = window.setInterval(() => {
+      if (this._resendRemaining <= 0) {
+        this._resendTimer !== void 0 && clearInterval(this._resendTimer), this._resendTimer = void 0;
+        return;
+      }
+      this._resendRemaining -= 1;
+    }, 1e3);
+  }
+  /** Restart the resend cooldown. Call after the consumer issues a new code. */
+  startCooldown(e = this.resendCooldown) {
+    this._resendRemaining = e, this._tickResend();
+  }
+  _submit(e) {
+    this.disabled || this.factor !== "webauthn" && e.length !== this.length || this.dispatchEvent(new CustomEvent("cg-mfa-submit", {
+      detail: { factor: this.factor, code: e },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  _factorCopy() {
+    switch (this.factor) {
+      case "totp":
+        return {
+          title: "Two-factor verification",
+          subtitle: "Enter the 6-digit code from your authenticator app."
+        };
+      case "sms":
+        return {
+          title: "Verify your phone",
+          subtitle: this.destination ? `We sent a code to ${this.destination}.` : "Enter the code we just sent you."
+        };
+      case "email":
+        return {
+          title: "Verify your email",
+          subtitle: this.destination ? `We sent a code to ${this.destination}.` : "Enter the code from your inbox."
+        };
+      case "webauthn":
+        return {
+          title: "Verify with security key",
+          subtitle: "Insert your security key or use a registered passkey."
+        };
+    }
+  }
+  render() {
+    const e = this._factorCopy(), s = this.factor !== "webauthn", n = this.disabled || this._resendRemaining > 0, a = this._resendRemaining > 0 ? `Resend in ${this._resendRemaining}s` : this.resendLabel;
+    return c`
+      <div class="wrapper">
+        <div class="heading">
+          <span class="title">${e.title}</span>
+          <span class="subtitle">
+            ${this.destination && (this.factor === "sms" || this.factor === "email") ? c`${e.subtitle.split(this.destination)[0] ?? ""}<span class="destination">${this.destination}</span>${e.subtitle.split(this.destination)[1] ?? ""}` : e.subtitle}
+          </span>
+        </div>
+
+        ${s ? c`
+            <div class="input-region">
+              <cg-otp-input
+                .length=${this.length}
+                ?disabled=${this.disabled}
+                @cg-input=${this._onCodeChange}
+                @cg-complete=${this._onCodeComplete}
+              ></cg-otp-input>
+            </div>
+            <div class="resend-row">
+              <span>Didn't get it?</span>
+              <button
+                class="resend"
+                type="button"
+                ?disabled=${n}
+                @click=${this._onResend}
+              >${a}</button>
+            </div>
+          ` : c`
+            <div class="trigger">
+              <button
+                class="resend"
+                type="button"
+                ?disabled=${this.disabled}
+                @click=${this._onTrigger}
+              >${this.triggerLabel}</button>
+            </div>
+          `}
+
+        <div class="footer-slot">
+          <slot name="footer"></slot>
+        </div>
+      </div>
+      ${g}
+    `;
+  }
+};
+t.styles = [b, m, p`
+    :host { display: block; }
+
+    .wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-16);
+    }
+
+    .heading {
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-4);
+      text-align: center;
+    }
+    .title {
+      font-size: var(--cg-font-size-base);
+      font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-surface-base-text);
+    }
+    .subtitle {
+      font-size: var(--cg-font-size-sm);
+      color: var(--cg-color-surface-container-outlined);
+      line-height: var(--cg-line-height-snug);
+    }
+    .destination {
+      font-family: var(--cg-font-family-mono, ui-monospace, monospace);
+      color: var(--cg-color-surface-base-text);
+    }
+
+    .input-region {
+      display: flex;
+      justify-content: center;
+    }
+
+    .resend-row {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--cg-spacing-8);
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-container-outlined);
+    }
+
+    .resend {
+      background: transparent;
+      border: 0;
+      color: var(--cg-color-action-primary-text-default);
+      font: inherit;
+      font-weight: var(--cg-font-weight-medium);
+      cursor: pointer;
+      padding: var(--cg-spacing-4) var(--cg-spacing-6);
+      border-radius: var(--cg-border-radius-50);
+    }
+    .resend:disabled {
+      color: var(--cg-color-surface-container-outlined);
+      cursor: not-allowed;
+    }
+    .resend:hover:not(:disabled) {
+      background: var(--cg-color-action-tertiary-background-hover);
+    }
+    .resend:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 var(--cg-spacing-2) var(--cg-color-focus-ring);
+    }
+
+    .trigger {
+      display: flex;
+      justify-content: center;
+    }
+
+    .footer-slot {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: var(--cg-spacing-4);
+      font-size: var(--cg-font-size-xs);
+    }
+    .footer-slot:empty { display: none; }
+
+    :host([disabled]) .wrapper { opacity: 0.6; pointer-events: none; }
+  `];
+i([
+  r({ reflect: !0 })
+], t.prototype, "factor", 2);
+i([
+  r({ type: Number })
+], t.prototype, "length", 2);
+i([
+  r()
+], t.prototype, "destination", 2);
+i([
+  r({ type: Number, attribute: "resend-cooldown" })
+], t.prototype, "resendCooldown", 2);
+i([
+  r({ type: Boolean, reflect: !0 })
+], t.prototype, "disabled", 2);
+i([
+  r({ attribute: "resend-label" })
+], t.prototype, "resendLabel", 2);
+i([
+  r({ attribute: "trigger-label" })
+], t.prototype, "triggerLabel", 2);
+i([
+  h()
+], t.prototype, "_code", 2);
+i([
+  h()
+], t.prototype, "_resendRemaining", 2);
+t = i([
+  f("cg-mfa-prompt")
+], t);
+export {
+  t as CgMfaPrompt
+};
+//# sourceMappingURL=cg-mfa-prompt.js.map

package/dist/components/cg-mfa-prompt/cg-mfa-prompt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-mfa-prompt.js","sources":["../../../src/components/cg-mfa-prompt/cg-mfa-prompt.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\nimport '../cg-otp-input/cg-otp-input.js';\n\n/**\n * @element cg-mfa-prompt\n * Multi-factor authentication challenge UI. Shows the current factor\n * (TOTP, SMS, email, WebAuthn), a code input where applicable, and a\n * resend control with a token-driven cooldown timer. Emits `cg-mfa-submit`\n * when the user submits a code.\n *\n * The component is form-aware via cg-otp-input — pressing Enter inside\n * the OTP cells, or auto-submit when the code reaches the configured\n * length, both fire `cg-mfa-submit` with the entered value.\n *\n * @example TOTP challenge\n * ```html\n * <cg-mfa-prompt\n *   factor=\"totp\"\n *   length=\"6\"\n *   .resendCooldown=${30}\n *   @cg-mfa-submit=${onSubmit}\n *   @cg-mfa-resend=${onResend}\n * ></cg-mfa-prompt>\n * ```\n *\n * @example SMS with destination hint\n * ```html\n * <cg-mfa-prompt factor=\"sms\" destination=\"+61 4** *** 219\"></cg-mfa-prompt>\n * ```\n *\n * @example WebAuthn (no code input — just a re-prompt button)\n * ```html\n * <cg-mfa-prompt factor=\"webauthn\" @cg-mfa-trigger=${onWebAuthn}></cg-mfa-prompt>\n * ```\n *\n * @slot footer - Slot for \"Use a backup code\" / \"Try another method\" links.\n *\n * @fires {CustomEvent<{factor: string, code: string}>} cg-mfa-submit - Code submitted (auto or explicit)\n * @fires {CustomEvent<{factor: string}>} cg-mfa-resend - Resend requested (after cooldown)\n * @fires {CustomEvent<{factor: string}>} cg-mfa-trigger - Trigger requested (factors that don't take a code, e.g. WebAuthn)\n */\n@customElement('cg-mfa-prompt')\nexport class CgMfaPrompt extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host { display: block; }\n\n    .wrapper {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-16);\n    }\n\n    .heading {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-4);\n      text-align: center;\n    }\n    .title {\n      font-size: var(--cg-font-size-base);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-base-text);\n    }\n    .subtitle {\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-container-outlined);\n      line-height: var(--cg-line-height-snug);\n    }\n    .destination {\n      font-family: var(--cg-font-family-mono, ui-monospace, monospace);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    .input-region {\n      display: flex;\n      justify-content: center;\n    }\n\n    .resend-row {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: var(--cg-spacing-8);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n    }\n\n    .resend {\n      background: transparent;\n      border: 0;\n      color: var(--cg-color-action-primary-text-default);\n      font: inherit;\n      font-weight: var(--cg-font-weight-medium);\n      cursor: pointer;\n      padding: var(--cg-spacing-4) var(--cg-spacing-6);\n      border-radius: var(--cg-border-radius-50);\n    }\n    .resend:disabled {\n      color: var(--cg-color-surface-container-outlined);\n      cursor: not-allowed;\n    }\n    .resend:hover:not(:disabled) {\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n    .resend:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 var(--cg-spacing-2) var(--cg-color-focus-ring);\n    }\n\n    .trigger {\n      display: flex;\n      justify-content: center;\n    }\n\n    .footer-slot {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n      font-size: var(--cg-font-size-xs);\n    }\n    .footer-slot:empty { display: none; }\n\n    :host([disabled]) .wrapper { opacity: 0.6; pointer-events: none; }\n  `];\n\n  /** Active factor. Drives the visible copy + which input renders. */\n  @property({ reflect: true }) factor: 'totp' | 'sms' | 'email' | 'webauthn' = 'totp';\n\n  /** OTP code length. 6 by default; some providers use 4 or 8. */\n  @property({ type: Number }) length = 6;\n\n  /** Where the code was sent (e.g. masked phone or email). Decorative. */\n  @property() destination = '';\n\n  /** Cooldown in seconds before the resend button reactivates after a click. */\n  @property({ type: Number, attribute: 'resend-cooldown' }) resendCooldown = 30;\n\n  /** Disable the entire prompt (resending + submitting). */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Override the resend label — e.g. \"Send new code\" vs \"Resend\". */\n  @property({ attribute: 'resend-label' }) resendLabel = 'Resend code';\n\n  /** Override the WebAuthn trigger label. */\n  @property({ attribute: 'trigger-label' }) triggerLabel = 'Use security key';\n\n  @state() private _code = '';\n  @state() private _resendRemaining = 0;\n\n  private _resendTimer: number | undefined;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (this.resendCooldown > 0) {\n      this._resendRemaining = this.resendCooldown;\n      this._tickResend();\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    if (this._resendTimer !== undefined) clearInterval(this._resendTimer);\n  }\n\n  private _tickResend(): void {\n    if (this._resendTimer !== undefined) clearInterval(this._resendTimer);\n    this._resendTimer = window.setInterval(() => {\n      if (this._resendRemaining <= 0) {\n        if (this._resendTimer !== undefined) clearInterval(this._resendTimer);\n        this._resendTimer = undefined;\n        return;\n      }\n      this._resendRemaining -= 1;\n    }, 1000);\n  }\n\n  /** Restart the resend cooldown. Call after the consumer issues a new code. */\n  startCooldown(seconds: number = this.resendCooldown): void {\n    this._resendRemaining = seconds;\n    this._tickResend();\n  }\n\n  private _onCodeChange = (e: Event): void => {\n    const detail = (e as CustomEvent<{ value: string }>).detail;\n    this._code = detail?.value ?? '';\n  };\n\n  private _onCodeComplete = (e: Event): void => {\n    const detail = (e as CustomEvent<{ value: string }>).detail;\n    const code = detail?.value ?? this._code;\n    this._submit(code);\n  };\n\n  private _submit(code: string): void {\n    if (this.disabled) return;\n    if (this.factor !== 'webauthn' && code.length !== this.length) return;\n    this.dispatchEvent(new CustomEvent('cg-mfa-submit', {\n      detail: { factor: this.factor, code },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _onResend = (): void => {\n    if (this.disabled || this._resendRemaining > 0) return;\n    this.dispatchEvent(new CustomEvent('cg-mfa-resend', {\n      detail: { factor: this.factor },\n      bubbles: true,\n      composed: true,\n    }));\n    this.startCooldown();\n  };\n\n  private _onTrigger = (): void => {\n    if (this.disabled) return;\n    this.dispatchEvent(new CustomEvent('cg-mfa-trigger', {\n      detail: { factor: this.factor },\n      bubbles: true,\n      composed: true,\n    }));\n  };\n\n  private _factorCopy(): { title: string; subtitle: string } {\n    switch (this.factor) {\n      case 'totp':\n        return {\n          title: 'Two-factor verification',\n          subtitle: 'Enter the 6-digit code from your authenticator app.',\n        };\n      case 'sms':\n        return {\n          title: 'Verify your phone',\n          subtitle: this.destination\n            ? `We sent a code to ${this.destination}.`\n            : 'Enter the code we just sent you.',\n        };\n      case 'email':\n        return {\n          title: 'Verify your email',\n          subtitle: this.destination\n            ? `We sent a code to ${this.destination}.`\n            : 'Enter the code from your inbox.',\n        };\n      case 'webauthn':\n        return {\n          title: 'Verify with security key',\n          subtitle: 'Insert your security key or use a registered passkey.',\n        };\n    }\n  }\n\n  override render() {\n    const copy = this._factorCopy();\n    const showCodeInput = this.factor !== 'webauthn';\n    const resendDisabled = this.disabled || this._resendRemaining > 0;\n    const resendLabel =\n      this._resendRemaining > 0\n        ? `Resend in ${this._resendRemaining}s`\n        : this.resendLabel;\n\n    return html`\n      <div class=\"wrapper\">\n        <div class=\"heading\">\n          <span class=\"title\">${copy.title}</span>\n          <span class=\"subtitle\">\n            ${this.destination && (this.factor === 'sms' || this.factor === 'email')\n              ? html`${copy.subtitle.split(this.destination)[0] ?? ''}<span class=\"destination\">${this.destination}</span>${copy.subtitle.split(this.destination)[1] ?? ''}`\n              : copy.subtitle}\n          </span>\n        </div>\n\n        ${showCodeInput\n          ? html`\n            <div class=\"input-region\">\n              <cg-otp-input\n                .length=${this.length}\n                ?disabled=${this.disabled}\n                @cg-input=${this._onCodeChange}\n                @cg-complete=${this._onCodeComplete}\n              ></cg-otp-input>\n            </div>\n            <div class=\"resend-row\">\n              <span>Didn't get it?</span>\n              <button\n                class=\"resend\"\n                type=\"button\"\n                ?disabled=${resendDisabled}\n                @click=${this._onResend}\n              >${resendLabel}</button>\n            </div>\n          `\n          : html`\n            <div class=\"trigger\">\n              <button\n                class=\"resend\"\n                type=\"button\"\n                ?disabled=${this.disabled}\n                @click=${this._onTrigger}\n              >${this.triggerLabel}</button>\n            </div>\n          `}\n\n        <div class=\"footer-slot\">\n          <slot name=\"footer\"></slot>\n        </div>\n      </div>\n      ${nothing}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-mfa-prompt': CgMfaPrompt;\n  }\n}\n"],"names":["CgMfaPrompt","LitElement","detail","code","seconds","copy","showCodeInput","resendDisabled","resendLabel","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/cg-modal/cg-modal.d.ts

@@ -0,0 +1,55 @@
+import { LitElement } from 'lit';
+/**
+ * @element cg-modal
+ * Modal dialog with backdrop blur, scale animation, focus trap, and scroll lock.
+ *
+ * @example
+ * ```html
+ * <cg-modal title="Confirm" open size="sm">
+ *   <p>Are you sure?</p>
+ *   <div slot="footer"><cg-button>OK</cg-button></div>
+ * </cg-modal>
+ * ```
+ *
+ * @slot - Default slot for modal body content
+ * @slot icon - Icon displayed above the title
+ * @slot footer - Action buttons area below the body
+ *
+ * @fires {CustomEvent} cg-modal-open - When the modal opens
+ * @fires {CustomEvent} cg-modal-close - When the modal closes
+ *
+ * @cssprop --cg-color-modal-container-background - Modal background
+ * @cssprop --cg-component-modal-radius - Modal border radius
+ * @cssprop --cg-transition-easing-ease-out - Open animation easing
+ * @cssprop --cg-color-focus-ring - Close button focus ring
+ */
+export declare class CgModal extends LitElement {
+    static styles: import('lit').CSSResult[];
+    open: boolean;
+    title: string;
+    icon: string;
+    size: 'sm' | 'md' | 'lg' | 'xl';
+    rounded: 'none' | 'sm' | 'md' | 'lg' | 'full';
+    closable: boolean;
+    persistent: boolean;
+    loading: boolean;
+    error: string;
+    private _hasFooter;
+    private _closing;
+    private _previousOverflow;
+    private _focusTrap;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    private _onOpen;
+    private _onClose;
+    private _handleBackdropClick;
+    private _requestClose;
+    private _handleFooterSlotChange;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-modal': CgModal;
+    }
+}
+//# sourceMappingURL=cg-modal.d.ts.map

package/dist/components/cg-modal/cg-modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-modal.d.ts","sourceRoot":"","sources":["../../../src/components/cg-modal/cg-modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAKrD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,4BAsQnB;IAEyC,IAAI,UAAS;IACpB,KAAK,SAAM;IACpB,IAAI,SAAM;IACK,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IACrD,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAQ;IACrD,QAAQ,UAAQ;IAChB,UAAU,UAAS;IACJ,OAAO,UAAS;IAChC,KAAK,SAAM;IAE9B,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,QAAQ,CAAS;IAElC,OAAO,CAAC,iBAAiB,CAAM;IAC/B,OAAO,CAAC,UAAU,CAAmB;IAE5B,oBAAoB;IASpB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAc9C,OAAO,CAAC,OAAO;IAgBf,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,oBAAoB;IAM5B,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,uBAAuB;IAKtB,MAAM;CA8DhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}