@zitadel/components 0.1.0-alpha.4 → 0.1.0-alpha.5

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.
@@ -4225,30 +4225,35 @@ function sanitiseUrl(value, field, issues) {
4225
4225
  //#endregion
4226
4226
  //#region src/orchestrator/font-loader.ts
4227
4227
  /**
4228
- * Inject `branding.font_url` as `<link rel="stylesheet">` inside the
4229
- * `<zitadel-login>` Shadow DOM. Per `docs/design/branding/templates.md`:
4228
+ * Inject `branding.font_url` as `<link rel="stylesheet">` into the host
4229
+ * document's `<head>`. Per `docs/design/branding/templates.md`:
4230
4230
  *
4231
4231
  * "The `font_url` stylesheet is injected by the orchestrator; the template
4232
4232
  * does not emit the `<link>` tag itself."
4233
4233
  *
4234
+ * The link must live at document level, not inside the shadow root:
4235
+ * browsers ignore `@font-face` rules declared in shadow-tree stylesheets,
4236
+ * so a shadow-scoped link would never register the font faces and every
4237
+ * branded font silently falls back to the system stack. `font-family`
4238
+ * references inside the shadow tree resolve against document-level faces.
4239
+ *
4234
4240
  * Idempotent: calling with the same URL is a no-op; calling with a new URL
4235
4241
  * replaces the previous link. Calling with `null`/`undefined` removes any
4236
4242
  * previously injected link.
4237
4243
  */
4238
4244
  const LINK_ID = "zl-font-link";
4239
4245
  function applyFontUrl(shadowRoot, fontUrl) {
4240
- const existing = shadowRoot.getElementById?.(LINK_ID);
4246
+ const ownerDocument = shadowRoot.ownerDocument ?? document;
4247
+ const existing = ownerDocument.head.querySelector(`link#${LINK_ID}`);
4241
4248
  if (!fontUrl) {
4242
4249
  existing?.remove();
4243
4250
  return;
4244
4251
  }
4245
- if (existing && existing.href === fontUrl) return;
4246
- existing?.remove();
4247
- const link = (shadowRoot.ownerDocument ?? document).createElement("link");
4252
+ const link = existing ?? ownerDocument.createElement("link");
4248
4253
  link.id = LINK_ID;
4249
4254
  link.rel = "stylesheet";
4250
- link.href = fontUrl;
4251
- shadowRoot.prepend(link);
4255
+ if (link.href !== fontUrl) link.href = fontUrl;
4256
+ if (!existing) ownerDocument.head.appendChild(link);
4252
4257
  }
4253
4258
  //#endregion
4254
4259
  //#region src/internal/escape-html.ts
@@ -8773,7 +8778,7 @@ function lookup(locale, key) {
8773
8778
  }
8774
8779
  //#endregion
8775
8780
  //#region src/orchestrator/templates/default.liquid
8776
- var default_default = "<zl-page-shell data-zl-template-root>\n {% if branding.logo_url %}\n <img slot=\"header\" class=\"zl-card-logo\" src=\"{{ branding.logo_url }}\" alt=\"\" />\n {% endif %}\n <zl-card>\n <h1 slot=\"header\" class=\"zl-card-title\">{{ step.texts.title_key | t: identity.display_name }}</h1>\n {% if step.texts.description_key %}\n <p slot=\"header\" class=\"zl-card-subtitle\">{{ step.texts.description_key | t: identity.display_name }}</p>\n {% endif %}\n\n {% if errors and errors.size > 0 %}\n {% for err in errors %}\n {% if err | formLevelError %}\n {% assign alert_heading = err.text_key | alertHeading %}\n {% assign alert_body = err.text_key | alertBody %}\n <zl-alert severity=\"error\"{% if alert_heading != \"\" %} heading=\"{{ alert_heading | t }}\"{% endif %}>\n {% if alert_body != \"\" %}{{ alert_body | t }}{% elsif err.text_key %}{{ err.text_key | t }}{% else %}{{ err.message }}{% endif %}\n </zl-alert>\n {% endif %}\n {% endfor %}\n {% endif %}\n\n {% for entry in fields %}\n {% assign field_placeholder = entry[1].text_key | fieldPlaceholder %}\n {% assign field_help = entry[1].text_key | fieldHelp %}\n {% assign field_err = entry[0] | fieldError: errors %}\n {% assign autocomplete_val = '' %}\n {% if entry[0] == 'email' %}\n {% assign autocomplete_val = 'email' %}\n {% elsif entry[1].type == 'password' and step.name contains 'register' %}\n {% assign autocomplete_val = 'new-password' %}\n {% elsif entry[1].type == 'password' %}\n {% assign autocomplete_val = 'current-password' %}\n {% endif %}\n <zl-field\n name=\"{{ entry[0] }}\"\n data-testid=\"zitadel-field-{{ entry[0] }}\"\n label=\"{{ entry[1].text_key | t }}\"\n type=\"{{ entry[1].type }}\"\n value=\"{{ entry[1].value }}\"\n {% if autocomplete_val != '' %}autocomplete=\"{{ autocomplete_val }}\"{% endif %}\n {% if entry[1].required %}required{% endif %}\n {% if field_placeholder != \"\" %}placeholder=\"{{ field_placeholder }}\"{% endif %}\n {% if field_err != \"\" %}invalid error=\"{{ field_err }}\"{% endif %}\n >\n {% if field_help != \"\" %}\n <span slot=\"help\">{{ field_help }}</span>\n {% endif %}\n </zl-field>\n {% endfor %}\n\n {% if fields.email and fields.password and step.name == 'identifier' %}\n <p class=\"zl-card-forgot\">\n <a href=\"#\" class=\"zl-card-forgot__link\" data-action=\"recover\">{{ 'action.forgot_password' | t }}</a>\n </p>\n {% endif %}\n\n {% for entry in actions %}\n {% if entry[1].primary %}\n <zl-button\n hierarchy=\"primary\"\n size=\"medium\"\n type=\"submit\"\n block\n action=\"{{ entry[0] }}\"\n data-testid=\"zitadel-action-{{ entry[0] }}\"\n label=\"{{ entry[1].text_key | t }}\"\n {% if loading %}loading{% endif %}\n ></zl-button>\n {% endif %}\n {% endfor %}\n\n {% for entry in actions %}\n {% unless entry[1].primary or entry[0] == 'passkey' or entry[0] == 'register' or entry[0] == 'sign_in' %}\n <zl-button\n hierarchy=\"secondary\"\n size=\"medium\"\n type=\"button\"\n block\n action=\"{{ entry[0] }}\"\n data-testid=\"zitadel-action-{{ entry[0] }}\"\n label=\"{{ entry[1].text_key | t }}\"\n ></zl-button>\n {% endunless %}\n {% endfor %}\n\n {% if actions.passkey %}\n <zl-button\n hierarchy=\"secondary\"\n size=\"medium\"\n block\n action=\"passkey\"\n data-testid=\"zitadel-action-passkey\"\n label=\"{{ actions.passkey.text_key | t }}\"\n ></zl-button>\n {% endif %}\n\n\n {% if actions.register %}\n <p class=\"zl-card-nav\">\n {{ 'identifier.action.register.lead' | t }}<a href=\"#\" class=\"zl-card-nav__link\" data-action=\"register\" data-testid=\"zitadel-action-register-link\">{{ 'identifier.action.register.link' | t }}</a>\n </p>\n {% endif %}\n\n {% if actions.sign_in %}\n <p class=\"zl-card-nav\">\n {{ 'register.action.sign_in.lead' | t }}<a href=\"#\" class=\"zl-card-nav__link\" data-action=\"sign_in\" data-testid=\"zitadel-action-sign_in-link\">{{ 'register.action.sign_in.link' | t }}</a>\n </p>\n {% endif %}\n\n {% if challenge %}\n {% if challenge.method == \"passkey\" or challenge.method == \"passkey_register\" %}\n {% assign ceremony = \"authenticate\" %}\n {% if challenge.method == \"passkey_register\" %}{% assign ceremony = \"register\" %}{% endif %}\n <zl-passkey\n ceremony=\"{{ ceremony }}\"\n method=\"{{ challenge.method }}\"\n challenge-id=\"{{ challenge.challenge_id }}\"\n options='{{ challenge.options | json }}'\n ></zl-passkey>\n {% endif %}\n {% endif %}\n\n {% mandatory_gates %}\n </zl-card>\n</zl-page-shell>\n";
8781
+ var default_default = "<zl-page-shell data-zl-template-root>\n {% if branding.logo_url %}\n <img slot=\"header\" class=\"zl-card-logo\" src=\"{{ branding.logo_url }}\" alt=\"\" />\n {% endif %}\n <zl-card>\n <h1 slot=\"header\" class=\"zl-card-title\">{{ step.texts.title_key | t: identity.display_name }}</h1>\n {% if step.texts.description_key %}\n {% assign card_subtitle = step.texts.description_key | t: identity.display_name %}\n {% if card_subtitle != \"\" %}\n <p slot=\"header\" class=\"zl-card-subtitle\">{{ card_subtitle }}</p>\n {% endif %}\n {% endif %}\n\n {% if errors and errors.size > 0 %}\n {% for err in errors %}\n {% if err | formLevelError %}\n {% assign alert_heading = err.text_key | alertHeading %}\n {% assign alert_body = err.text_key | alertBody %}\n <zl-alert severity=\"error\"{% if alert_heading != \"\" %} heading=\"{{ alert_heading | t }}\"{% endif %}>\n {% if alert_body != \"\" %}{{ alert_body | t }}{% elsif err.text_key %}{{ err.text_key | t }}{% else %}{{ err.message }}{% endif %}\n </zl-alert>\n {% endif %}\n {% endfor %}\n {% endif %}\n\n {% for entry in fields %}\n {% assign field_placeholder = entry[1].text_key | fieldPlaceholder %}\n {% assign field_help = entry[1].text_key | fieldHelp %}\n {% assign field_err = entry[0] | fieldError: errors %}\n {% assign autocomplete_val = '' %}\n {% if entry[0] == 'email' %}\n {% assign autocomplete_val = 'email' %}\n {% elsif entry[1].type == 'password' and step.name contains 'register' %}\n {% assign autocomplete_val = 'new-password' %}\n {% elsif entry[1].type == 'password' %}\n {% assign autocomplete_val = 'current-password' %}\n {% endif %}\n <zl-field\n name=\"{{ entry[0] }}\"\n data-testid=\"zitadel-field-{{ entry[0] }}\"\n label=\"{{ entry[1].text_key | t }}\"\n type=\"{{ entry[1].type }}\"\n value=\"{{ entry[1].value }}\"\n {% if autocomplete_val != '' %}autocomplete=\"{{ autocomplete_val }}\"{% endif %}\n {% if entry[1].required %}required{% endif %}\n {% if field_placeholder != \"\" %}placeholder=\"{{ field_placeholder }}\"{% endif %}\n {% if field_err != \"\" %}invalid error=\"{{ field_err }}\"{% endif %}\n >\n {% if field_help != \"\" %}\n <span slot=\"help\">{{ field_help }}</span>\n {% endif %}\n </zl-field>\n {% endfor %}\n\n {% if actions.recover %}\n <p class=\"zl-card-forgot\">\n <a href=\"#\" class=\"zl-card-forgot__link\" data-action=\"recover\">{{ actions.recover.text_key | t }}</a>\n </p>\n {% endif %}\n\n {% for entry in actions %}\n {% if entry[1].primary %}\n <zl-button\n hierarchy=\"primary\"\n size=\"medium\"\n type=\"submit\"\n block\n action=\"{{ entry[0] }}\"\n data-testid=\"zitadel-action-{{ entry[0] }}\"\n label=\"{{ entry[1].text_key | t }}\"\n {% if loading %}loading{% endif %}\n ></zl-button>\n {% endif %}\n {% endfor %}\n\n {% for entry in actions %}\n {% unless entry[1].primary or entry[0] == 'passkey' or entry[0] == 'register' or entry[0] == 'sign_in' or entry[0] == 'recover' %}\n <zl-button\n hierarchy=\"secondary\"\n size=\"medium\"\n type=\"button\"\n block\n action=\"{{ entry[0] }}\"\n data-testid=\"zitadel-action-{{ entry[0] }}\"\n label=\"{{ entry[1].text_key | t }}\"\n ></zl-button>\n {% endunless %}\n {% endfor %}\n\n {% if actions.passkey %}\n <zl-button\n hierarchy=\"secondary\"\n size=\"medium\"\n block\n action=\"passkey\"\n data-testid=\"zitadel-action-passkey\"\n label=\"{{ actions.passkey.text_key | t }}\"\n ></zl-button>\n {% endif %}\n\n\n {% if actions.register %}\n <p class=\"zl-card-nav\">\n {{ 'identifier.action.register.lead' | t }}<a href=\"#\" class=\"zl-card-nav__link\" data-action=\"register\" data-testid=\"zitadel-action-register-link\">{{ 'identifier.action.register.link' | t }}</a>\n </p>\n {% endif %}\n\n {% if actions.sign_in %}\n <p class=\"zl-card-nav\">\n {{ 'register.action.sign_in.lead' | t }}<a href=\"#\" class=\"zl-card-nav__link\" data-action=\"sign_in\" data-testid=\"zitadel-action-sign_in-link\">{{ 'register.action.sign_in.link' | t }}</a>\n </p>\n {% endif %}\n\n {% if challenge %}\n {% if challenge.method == \"passkey\" or challenge.method == \"passkey_register\" %}\n {% assign ceremony = \"authenticate\" %}\n {% if challenge.method == \"passkey_register\" %}{% assign ceremony = \"register\" %}{% endif %}\n <zl-passkey\n ceremony=\"{{ ceremony }}\"\n method=\"{{ challenge.method }}\"\n challenge-id=\"{{ challenge.challenge_id }}\"\n options='{{ challenge.options | json }}'\n ></zl-passkey>\n {% endif %}\n {% endif %}\n\n {% mandatory_gates %}\n </zl-card>\n</zl-page-shell>\n";
8777
8782
  //#endregion
8778
8783
  //#region src/orchestrator/liquid.ts
8779
8784
  /**
@@ -8918,8 +8923,9 @@ const en = {
8918
8923
  "identifier.description": "Enter your email to continue",
8919
8924
  "identifier.field.email": "Work email",
8920
8925
  "identifier.field.email.placeholder": "you@company.com",
8921
- "identifier.action.submit": "Continue",
8922
- "identifier.action.continue": "Continue",
8926
+ "identifier.field.password": "Password",
8927
+ "identifier.action.submit": "Sign in",
8928
+ "identifier.action.continue": "Sign in",
8923
8929
  "identifier.action.passkey": "Sign in with a passkey",
8924
8930
  "identifier.action.register.lead": "Don't have an account? ",
8925
8931
  "identifier.action.register.link": "Sign up",
@@ -8968,7 +8974,7 @@ const en = {
8968
8974
  "password.action.register.lead": "Don't have an account? ",
8969
8975
  "password.action.register.link": "Sign up",
8970
8976
  "register.title": "Create your account",
8971
- "register.description": "Enter your email to get started",
8977
+ "register.description": "",
8972
8978
  "register.field.email": "Work email",
8973
8979
  "register.field.email.placeholder": "you@company.com",
8974
8980
  "register.field.password": "Password",
@@ -8976,8 +8982,10 @@ const en = {
8976
8982
  "register.field.givenName": "Given name",
8977
8983
  "register.field.familyName": "Family name",
8978
8984
  "register.field.dateOfBirth": "Date of birth",
8985
+ "register.field.dateOfBirth.placeholder": "YYYY-MM-DD",
8986
+ "register.field.dateOfBirth.help": "Use YYYY-MM-DD.",
8979
8987
  "register.action.password": "Continue with password",
8980
- "register.action.passkey": "Register with a passkey",
8988
+ "register.action.passkey": "Continue with a passkey",
8981
8989
  "register.action.submit": "Sign up",
8982
8990
  "register.action.sign_in.lead": "Already have an account? ",
8983
8991
  "register.action.sign_in.link": "Sign in",
@@ -9016,8 +9024,9 @@ const de = {
9016
9024
  "identifier.description": "Gib deine E-Mail-Adresse ein, um fortzufahren",
9017
9025
  "identifier.field.email": "E-Mail",
9018
9026
  "identifier.field.email.placeholder": "du@unternehmen.com",
9019
- "identifier.action.submit": "Weiter",
9020
- "identifier.action.continue": "Weiter",
9027
+ "identifier.field.password": "Passwort",
9028
+ "identifier.action.submit": "Anmelden",
9029
+ "identifier.action.continue": "Anmelden",
9021
9030
  "identifier.action.passkey": "Mit Passkey anmelden",
9022
9031
  "identifier.action.register.lead": "Noch kein Konto? ",
9023
9032
  "identifier.action.register.link": "Registrieren",
@@ -9066,13 +9075,18 @@ const de = {
9066
9075
  "password.action.register.lead": "Noch kein Konto? ",
9067
9076
  "password.action.register.link": "Registrieren",
9068
9077
  "register.title": "Konto erstellen",
9069
- "register.description": "Gib deine E-Mail-Adresse ein, um loszulegen",
9078
+ "register.description": "",
9070
9079
  "register.field.email": "E-Mail",
9071
9080
  "register.field.email.placeholder": "du@unternehmen.com",
9072
9081
  "register.field.password": "Passwort",
9073
9082
  "register.field.password.help": "Mindestens 8 Zeichen, einschließlich eines Sonderzeichens und einer Zahl.",
9083
+ "register.field.givenName": "Vorname",
9084
+ "register.field.familyName": "Nachname",
9085
+ "register.field.dateOfBirth": "Geburtsdatum",
9086
+ "register.field.dateOfBirth.placeholder": "JJJJ-MM-TT",
9087
+ "register.field.dateOfBirth.help": "Verwende JJJJ-MM-TT.",
9074
9088
  "register.action.password": "Mit Passwort fortfahren",
9075
- "register.action.passkey": "Mit Passkey registrieren",
9089
+ "register.action.passkey": "Weiter mit Passkey",
9076
9090
  "register.action.submit": "Registrieren",
9077
9091
  "register.action.sign_in.lead": "Bereits ein Konto? ",
9078
9092
  "register.action.sign_in.link": "Anmelden",
@@ -9113,8 +9127,9 @@ const builtinLocales = {
9113
9127
  "identifier.description": "Inserisci la tua e-mail per continuare",
9114
9128
  "identifier.field.email": "E-mail aziendale",
9115
9129
  "identifier.field.email.placeholder": "tu@azienda.com",
9116
- "identifier.action.submit": "Continua",
9117
- "identifier.action.continue": "Continua",
9130
+ "identifier.field.password": "Password",
9131
+ "identifier.action.submit": "Accedi",
9132
+ "identifier.action.continue": "Accedi",
9118
9133
  "identifier.action.passkey": "Accedi con passkey",
9119
9134
  "identifier.action.register.lead": "Non hai un account? ",
9120
9135
  "identifier.action.register.link": "Registrati",
@@ -9163,13 +9178,18 @@ const builtinLocales = {
9163
9178
  "password.action.register.lead": "Non hai un account? ",
9164
9179
  "password.action.register.link": "Registrati",
9165
9180
  "register.title": "Crea il tuo account",
9166
- "register.description": "Inserisci la tua e-mail per iniziare",
9181
+ "register.description": "",
9167
9182
  "register.field.email": "E-mail aziendale",
9168
9183
  "register.field.email.placeholder": "tu@azienda.com",
9169
9184
  "register.field.password": "Password",
9170
9185
  "register.field.password.help": "Almeno 8 caratteri, incluso un simbolo e un numero.",
9186
+ "register.field.givenName": "Nome",
9187
+ "register.field.familyName": "Cognome",
9188
+ "register.field.dateOfBirth": "Data di nascita",
9189
+ "register.field.dateOfBirth.placeholder": "AAAA-MM-GG",
9190
+ "register.field.dateOfBirth.help": "Usa AAAA-MM-GG.",
9171
9191
  "register.action.password": "Continua con password",
9172
- "register.action.passkey": "Registrati con passkey",
9192
+ "register.action.passkey": "Continua con passkey",
9173
9193
  "register.action.submit": "Registrati",
9174
9194
  "register.action.sign_in.lead": "Hai già un account? ",
9175
9195
  "register.action.sign_in.link": "Accedi",