@zitadel/components 0.1.0-alpha.15 → 0.1.0-alpha.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/README.md +5 -1
  2. package/dist/atoms/index.d.mts +1 -1
  3. package/dist/atoms/index.mjs +1 -1
  4. package/dist/{atoms-BSwVl736.mjs → atoms-KC7OJWXZ.mjs} +138 -12
  5. package/dist/atoms-KC7OJWXZ.mjs.map +1 -0
  6. package/dist/default-CfF7GoLv.mjs +6 -0
  7. package/dist/default-CfF7GoLv.mjs.map +1 -0
  8. package/dist/{index-EC-BnGsx.d.mts → index-BniwXaIC.d.mts} +3 -1
  9. package/dist/{index-EC-BnGsx.d.mts.map → index-BniwXaIC.d.mts.map} +1 -1
  10. package/dist/{index-Bypr00UG.d.mts → index-DSZnfOJH.d.mts} +368 -17
  11. package/dist/index-DSZnfOJH.d.mts.map +1 -0
  12. package/dist/{index-BP3l3mje.d.mts → index-DjYJwejg.d.mts} +51 -4
  13. package/dist/index-DjYJwejg.d.mts.map +1 -0
  14. package/dist/index.d.mts +4 -4
  15. package/dist/index.mjs +4 -4
  16. package/dist/manifests.mjs +1 -1
  17. package/dist/orchestrator/index.d.mts +2 -2
  18. package/dist/orchestrator/index.mjs +2 -2
  19. package/dist/{orchestrator-Ty4uM5n_.mjs → orchestrator-BWqJw4Yl.mjs} +348 -25
  20. package/dist/orchestrator-BWqJw4Yl.mjs.map +1 -0
  21. package/dist/standalone.mjs +485 -34
  22. package/dist/tokens/index.d.mts +1 -1
  23. package/dist/tokens/index.mjs +1 -1
  24. package/dist/{tokens-C0j4iCrs.mjs → tokens-CbH2s1jV.mjs} +6 -4
  25. package/dist/tokens-CbH2s1jV.mjs.map +1 -0
  26. package/package.json +3 -2
  27. package/dist/atoms-BSwVl736.mjs.map +0 -1
  28. package/dist/default-BmX2ZEbg.mjs +0 -6
  29. package/dist/default-BmX2ZEbg.mjs.map +0 -1
  30. package/dist/index-BP3l3mje.d.mts.map +0 -1
  31. package/dist/index-Bypr00UG.d.mts.map +0 -1
  32. package/dist/orchestrator-Ty4uM5n_.mjs.map +0 -1
  33. package/dist/tokens-C0j4iCrs.mjs.map +0 -1
package/README.md CHANGED
@@ -177,7 +177,10 @@ Automation can use the stable host and native shadow-root hooks that the default
177
177
  template emits. Host atoms expose hooks such as `zitadel-field-email`,
178
178
  `zitadel-field-password`, and `zitadel-action-submit`; their native shadow
179
179
  controls expose hooks such as `zitadel-input-email`, `zitadel-input-password`,
180
- and `zitadel-action-submit-button`.
180
+ and `zitadel-action-submit-button`. Hooks are method-named even when the flow
181
+ engine names a credential field `x-auth-methods#<method>` — the `name`
182
+ attribute keeps that raw form key, only the `data-testid` hooks are normalised
183
+ (`hookName` in `src/internal/hook-name.ts`).
181
184
 
182
185
  A tenant Liquid template can already be supplied through the branding
183
186
  payload's `liquid_template` field; a dedicated declarative `template`
@@ -191,6 +194,7 @@ renders the bundled `default.liquid`. Tracked as a follow-up.
191
194
  | Property | Type | Notes |
192
195
  | --- | --- | --- |
193
196
  | `purpose` | `'login' \| 'register' \| 'reset_password' \| string` | Which flow purpose to drive |
197
+ | `flowName` / `flow-name` | `string` | Run the flow definition with this `name` instead of the project default |
194
198
  | `project` | `ZitadelProject` | SDK handle from `configureZitadel()`. Object property (not an attribute). When unset, the element falls back to the global handle from `getZitadelConfig()` |
195
199
  | `lang` | `string` | BCP 47 tag (e.g. `"de"`, `"en-US"`). Resolves to a built-in dictionary; falls back to `<html lang>` / `navigator.language` |
196
200
  | `locales` | `Record<string, Locale>` | Custom locale dictionaries keyed by language code; spread over the built-in dictionary so partial overrides work |
package/dist/atoms/index.d.mts CHANGED
@@ -1,2 +1,2 @@
1
- import { $t as zlCardManifest, Qt as ZlCard, Xt as ZlCheckboxChangeDetail, Yt as ZlCheckbox, Zt as zlCheckboxManifest, a as ZlPill, an as ZlIcon, c as ZlPasskeyErrorDetail, d as ZlPageShell, en as ZlButton, f as zlPageShellManifest, h as zlFieldManifest, i as zlSelectManifest, in as IconName, l as ZlPasskeyResultDetail, m as ZlFieldType, n as ZlSelectChangeDetail, nn as ZlAlert, o as zlPillManifest, on as zlIconManifest, p as ZlField, r as ZlSelectOption, rn as zlAlertManifest, s as ZlPasskey, t as ZlSelect, tn as zlButtonManifest, u as zlPasskeyManifest } from "../index-Bypr00UG.mjs";
1
+ import { $t as ZlCheckbox, a as ZlPill, an as zlButtonManifest, c as ZlPasskeyErrorDetail, cn as IconName, d as ZlPageShell, en as ZlCheckboxChangeDetail, f as zlPageShellManifest, h as zlFieldManifest, i as zlSelectManifest, in as ZlButton, l as ZlPasskeyResultDetail, ln as ZlIcon, m as ZlFieldType, n as ZlSelectChangeDetail, nn as ZlCard, o as zlPillManifest, on as ZlAlert, p as ZlField, r as ZlSelectOption, rn as zlCardManifest, s as ZlPasskey, sn as zlAlertManifest, t as ZlSelect, tn as zlCheckboxManifest, u as zlPasskeyManifest, un as zlIconManifest } from "../index-DSZnfOJH.mjs";
2
2
  export { IconName, ZlAlert, ZlButton, ZlCard, ZlCheckbox, ZlCheckboxChangeDetail, ZlField, ZlFieldType, ZlIcon, ZlPageShell, ZlPasskey, ZlPasskeyErrorDetail, ZlPasskeyResultDetail, ZlPill, ZlSelect, ZlSelectChangeDetail, ZlSelectOption, zlAlertManifest, zlButtonManifest, zlCardManifest, zlCheckboxManifest, zlFieldManifest, zlIconManifest, zlPageShellManifest, zlPasskeyManifest, zlPillManifest, zlSelectManifest };
package/dist/atoms/index.mjs CHANGED
@@ -1,2 +1,2 @@
1
- import { _ as ZlAlert, a as ZlPasskey, b as zlIconManifest, c as zlPageShellManifest, d as ZlCheckbox, f as zlCheckboxManifest, g as zlButtonManifest, h as ZlButton, i as zlPillManifest, l as ZlField, m as zlCardManifest, n as zlSelectManifest, o as zlPasskeyManifest, p as ZlCard, r as ZlPill, s as ZlPageShell, t as ZlSelect, u as zlFieldManifest, v as zlAlertManifest, y as ZlIcon } from "../atoms-BSwVl736.mjs";
1
+ import { _ as zlButtonManifest, a as ZlPasskey, b as ZlIcon, c as zlPageShellManifest, f as ZlCheckbox, g as ZlButton, h as zlCardManifest, i as zlPillManifest, l as ZlField, m as ZlCard, n as zlSelectManifest, o as zlPasskeyManifest, p as zlCheckboxManifest, r as ZlPill, s as ZlPageShell, t as ZlSelect, u as zlFieldManifest, v as ZlAlert, x as zlIconManifest, y as zlAlertManifest } from "../atoms-KC7OJWXZ.mjs";
2
2
  export { ZlAlert, ZlButton, ZlCard, ZlCheckbox, ZlField, ZlIcon, ZlPageShell, ZlPasskey, ZlPill, ZlSelect, zlAlertManifest, zlButtonManifest, zlCardManifest, zlCheckboxManifest, zlFieldManifest, zlIconManifest, zlPageShellManifest, zlPasskeyManifest, zlPillManifest, zlSelectManifest };
package/dist/{atoms-BSwVl736.mjs → atoms-KC7OJWXZ.mjs} RENAMED
@@ -1,4 +1,4 @@
1
- import { t as cssVars } from "./tokens-C0j4iCrs.mjs";
1
+ import { t as cssVars } from "./tokens-CbH2s1jV.mjs";
2
2
  import { LitElement, css, html, nothing, unsafeCSS } from "lit";
3
3
  import { customElement, property, query, state } from "lit/decorators.js";
4
4
  import { classMap } from "lit/directives/class-map.js";
@@ -846,6 +846,36 @@ var text_field_host_default = ":host {\n display: block;\n}\n\n::slotted([slot=
846
846
  //#region ../shared-component-styles/src/text-field.css?inline
847
847
  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";
848
848
  //#endregion
849
+ //#region src/internal/hook-name.ts
850
+ /**
851
+ * Reserved auth-method credential prefix of flow field names. Mirrors
852
+ * `AUTH_METHOD_PREFIX` in `@zitadel/config` (`src/validate.ts`), which
853
+ * owns the wire dialect; components has no dependency on that package,
854
+ * so the literal is repeated here.
855
+ */
856
+ const AUTH_METHOD_PREFIX = "x-auth-methods#";
857
+ /**
858
+ * Normalises a flow field name into its automation-hook token.
859
+ *
860
+ * Auth-method credential fields arrive from the flow engine as
861
+ * `x-auth-methods#<method>` (e.g. `x-auth-methods#password`), but the
862
+ * documented `data-testid` hooks are method-named
863
+ * (`zitadel-field-password`, `zitadel-input-password` — see
864
+ * packages/components/README.md and apps/cli/SKILLS.md). This helper
865
+ * feeds both hook construction sites: the bundled template's `testid`
866
+ * Liquid filter and `<zl-field>`'s native-input testid.
867
+ *
868
+ * Only the reserved credential prefix is stripped — user-schema
869
+ * property names are tenant-authored arbitrary strings, so a `#`
870
+ * anywhere else is part of the name and stays in the hook. The
871
+ * after-prefix token is used verbatim (no case or spacing changes),
872
+ * and the field's `name` attribute always keeps the raw wire/form key.
873
+ */
874
+ function hookName(field) {
875
+ if (field.startsWith(AUTH_METHOD_PREFIX) && field.length > 15) return field.slice(15);
876
+ return field;
877
+ }
878
+ //#endregion
849
879
  //#region src/atoms/zl-field.ts
850
880
  let ZlField = class ZlField extends LitElement {
851
881
  static formAssociated = true;
@@ -1185,7 +1215,7 @@ let ZlField = class ZlField extends LitElement {
1185
1215
  }
1186
1216
  };
1187
1217
  nativeInputTestId() {
1188
- if (this.name) return `zitadel-input-${this.name}`;
1218
+ if (this.name) return `zitadel-input-${hookName(this.name)}`;
1189
1219
  if (this.testId) return `${this.testId}-input`;
1190
1220
  }
1191
1221
  dispatchNativeInput(source) {
@@ -1373,6 +1403,13 @@ function base64UrlToBuffer(base64url) {
1373
1403
  }
1374
1404
  //#endregion
1375
1405
  //#region src/atoms/zl-passkey.ts
1406
+ /**
1407
+ * Slack subtracted from `options.timeout` when classifying a
1408
+ * `NotAllowedError` as a timeout: browsers clamp and fire the deadline
1409
+ * slightly early, so an exact comparison would label real timeouts as
1410
+ * user cancellations.
1411
+ */
1412
+ const TIMEOUT_GRACE_MS = 1e3;
1376
1413
  let ZlPasskey = class ZlPasskey extends LitElement {
1377
1414
  #_ceremony_accessor_storage = "authenticate";
1378
1415
  get ceremony() {
@@ -1409,7 +1446,37 @@ let ZlPasskey = class ZlPasskey extends LitElement {
1409
1446
  set manual(value) {
1410
1447
  this.#_manual_accessor_storage = value;
1411
1448
  }
1449
+ #_pendingLabel_accessor_storage = "Waiting for your passkey…";
1450
+ get pendingLabel() {
1451
+ return this.#_pendingLabel_accessor_storage;
1452
+ }
1453
+ set pendingLabel(value) {
1454
+ this.#_pendingLabel_accessor_storage = value;
1455
+ }
1456
+ #_cancelLabel_accessor_storage = "Cancel";
1457
+ get cancelLabel() {
1458
+ return this.#_cancelLabel_accessor_storage;
1459
+ }
1460
+ set cancelLabel(value) {
1461
+ this.#_cancelLabel_accessor_storage = value;
1462
+ }
1463
+ #_silent_accessor_storage = false;
1464
+ get silent() {
1465
+ return this.#_silent_accessor_storage;
1466
+ }
1467
+ set silent(value) {
1468
+ this.#_silent_accessor_storage = value;
1469
+ }
1470
+ #_pending_accessor_storage = false;
1471
+ get pending() {
1472
+ return this.#_pending_accessor_storage;
1473
+ }
1474
+ set pending(value) {
1475
+ this.#_pending_accessor_storage = value;
1476
+ }
1412
1477
  abortController = null;
1478
+ /** `Date.now()` at ceremony start, for timeout classification on reject. */
1479
+ startedAt = 0;
1413
1480
  connectedCallback() {
1414
1481
  super.connectedCallback();
1415
1482
  if (!this.manual && this.options) this.startCeremony();
@@ -1420,11 +1487,14 @@ let ZlPasskey = class ZlPasskey extends LitElement {
1420
1487
  }
1421
1488
  /**
1422
1489
  * Abort any in-flight WebAuthn ceremony. Called automatically when the
1423
- * component disconnects (step change, page navigation).
1490
+ * component disconnects (step change, page navigation) and by the
1491
+ * pending UI's cancel button. Clears `pending` immediately — the
1492
+ * ceremony's own `finally` no longer owns it (its controller is gone).
1424
1493
  */
1425
1494
  abort() {
1426
1495
  this.abortController?.abort();
1427
1496
  this.abortController = null;
1497
+ this.pending = false;
1428
1498
  }
1429
1499
  /**
1430
1500
  * Trigger the WebAuthn ceremony. Resolves when the ceremony completes
@@ -1440,7 +1510,11 @@ let ZlPasskey = class ZlPasskey extends LitElement {
1440
1510
  return;
1441
1511
  }
1442
1512
  this.abort();
1443
- this.abortController = new AbortController();
1513
+ const controller = new AbortController();
1514
+ this.abortController = controller;
1515
+ this.pending = true;
1516
+ this.startedAt = Date.now();
1517
+ this.emitStarted();
1444
1518
  try {
1445
1519
  const credential = this.ceremony === "register" ? await this.createCredential() : await this.getCredential();
1446
1520
  if (!credential) {
@@ -1451,9 +1525,33 @@ let ZlPasskey = class ZlPasskey extends LitElement {
1451
1525
  this.emitResult(proof);
1452
1526
  } catch (error) {
1453
1527
  const aborted = error instanceof DOMException && (error.name === "AbortError" || error.name === "NotAllowedError");
1454
- this.emitError(error instanceof Error ? error.message : "WebAuthn ceremony failed.", aborted);
1528
+ const timeoutMs = typeof this.options?.timeout === "number" ? this.options.timeout : null;
1529
+ const timedOut = error instanceof DOMException && error.name === "NotAllowedError" && timeoutMs !== null && Date.now() - this.startedAt >= timeoutMs - TIMEOUT_GRACE_MS;
1530
+ this.emitError(error instanceof Error ? error.message : "WebAuthn ceremony failed.", aborted, timedOut);
1531
+ } finally {
1532
+ if (this.abortController === controller) this.pending = false;
1455
1533
  }
1456
1534
  }
1535
+ handleCancelSubmit = (event) => {
1536
+ event.stopPropagation();
1537
+ this.abort();
1538
+ };
1539
+ render() {
1540
+ if (!this.pending || this.silent) return nothing;
1541
+ return html`
1542
+ <div class="zl-passkey-pending" data-testid="zitadel-passkey-pending">
1543
+ <zl-alert severity="info">${this.pendingLabel}</zl-alert>
1544
+ <zl-button
1545
+ hierarchy="secondary"
1546
+ type="button"
1547
+ block
1548
+ data-testid="zitadel-passkey-cancel"
1549
+ label=${this.cancelLabel}
1550
+ @zl-submit=${this.handleCancelSubmit}
1551
+ ></zl-button>
1552
+ </div>
1553
+ `;
1554
+ }
1457
1555
  /**
1458
1556
  * `navigator.credentials.get()` — authentication ceremony.
1459
1557
  */
@@ -1555,11 +1653,12 @@ let ZlPasskey = class ZlPasskey extends LitElement {
1555
1653
  detail
1556
1654
  }));
1557
1655
  }
1558
- emitError(message, aborted) {
1656
+ emitError(message, aborted, timedOut = false) {
1559
1657
  const detail = {
1560
1658
  challenge_id: this.challengeId,
1561
1659
  error: message,
1562
- aborted
1660
+ aborted,
1661
+ timed_out: timedOut
1563
1662
  };
1564
1663
  this.dispatchEvent(new CustomEvent("zl-passkey-error", {
1565
1664
  bubbles: true,
@@ -1567,7 +1666,23 @@ let ZlPasskey = class ZlPasskey extends LitElement {
1567
1666
  detail
1568
1667
  }));
1569
1668
  }
1570
- /** Invisible component — no shadow DOM rendering needed. */
1669
+ emitStarted() {
1670
+ const detail = {
1671
+ challenge_id: this.challengeId,
1672
+ method: this.method
1673
+ };
1674
+ this.dispatchEvent(new CustomEvent("zl-passkey-started", {
1675
+ bubbles: true,
1676
+ composed: true,
1677
+ detail
1678
+ }));
1679
+ }
1680
+ /**
1681
+ * Light DOM on purpose: the pending UI must land inside the
1682
+ * orchestrator's shadow root (where the step's adopted styles apply)
1683
+ * without altering the `unsafeHTML` step markup — runtime children don't
1684
+ * participate in its string comparison, so the ceremony never restarts.
1685
+ */
1571
1686
  createRenderRoot() {
1572
1687
  return this;
1573
1688
  }
@@ -1592,6 +1707,10 @@ __decorate([property({
1592
1707
  })], ZlPasskey.prototype, "options", null);
1593
1708
  __decorate([property({ type: String })], ZlPasskey.prototype, "method", null);
1594
1709
  __decorate([property({ type: Boolean })], ZlPasskey.prototype, "manual", null);
1710
+ __decorate([property({ attribute: "pending-label" })], ZlPasskey.prototype, "pendingLabel", null);
1711
+ __decorate([property({ attribute: "cancel-label" })], ZlPasskey.prototype, "cancelLabel", null);
1712
+ __decorate([property({ type: Boolean })], ZlPasskey.prototype, "silent", null);
1713
+ __decorate([state()], ZlPasskey.prototype, "pending", null);
1595
1714
  ZlPasskey = __decorate([customElement("zl-passkey")], ZlPasskey);
1596
1715
  const zlPasskeyManifest = {
1597
1716
  tag: "zl-passkey",
@@ -1601,11 +1720,18 @@ const zlPasskeyManifest = {
1601
1720
  "method",
1602
1721
  "challenge-id",
1603
1722
  "options",
1604
- "manual"
1723
+ "manual",
1724
+ "pending-label",
1725
+ "cancel-label",
1726
+ "silent"
1605
1727
  ],
1606
1728
  parts: [],
1607
1729
  slots: [],
1608
- events: ["zl-passkey-result", "zl-passkey-error"]
1730
+ events: [
1731
+ "zl-passkey-result",
1732
+ "zl-passkey-error",
1733
+ "zl-passkey-started"
1734
+ ]
1609
1735
  };
1610
1736
  //#endregion
1611
1737
  //#region ../shared-component-styles/src/lit/pill-host.css?inline
@@ -2065,6 +2191,6 @@ const zlSelectManifest = {
2065
2191
  events: ["zl-change"]
2066
2192
  };
2067
2193
  //#endregion
2068
- export { baseHostStyles as C, focusVisibleStyles as S, emit as T, ZlAlert as _, ZlPasskey as a, zlIconManifest as b, zlPageShellManifest as c, ZlCheckbox as d, zlCheckboxManifest as f, zlButtonManifest as g, ZlButton as h, zlPillManifest as i, ZlField as l, zlCardManifest as m, zlSelectManifest as n, zlPasskeyManifest as o, ZlCard as p, ZlPill as r, ZlPageShell as s, ZlSelect as t, zlFieldManifest as u, zlAlertManifest as v, t as w, __decorate as x, ZlIcon as y };
2194
+ export { focusVisibleStyles as C, emit as E, __decorate as S, t as T, zlButtonManifest as _, ZlPasskey as a, ZlIcon as b, zlPageShellManifest as c, hookName as d, ZlCheckbox as f, ZlButton as g, zlCardManifest as h, zlPillManifest as i, ZlField as l, ZlCard as m, zlSelectManifest as n, zlPasskeyManifest as o, zlCheckboxManifest as p, ZlPill as r, ZlPageShell as s, ZlSelect as t, zlFieldManifest as u, ZlAlert as v, baseHostStyles as w, zlIconManifest as x, zlAlertManifest as y };
2069
2195
 
2070
- //# sourceMappingURL=atoms-BSwVl736.mjs.map
2196
+ //# sourceMappingURL=atoms-KC7OJWXZ.mjs.map