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

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 (36) hide show
  1. package/README.md +85 -19
  2. package/dist/atoms/index.d.mts +1 -1
  3. package/dist/atoms/index.mjs +1 -1
  4. package/dist/{atoms-KC7OJWXZ.mjs → atoms-5-wYIl88.mjs} +263 -188
  5. package/dist/atoms-5-wYIl88.mjs.map +1 -0
  6. package/dist/default-Bnjy2dJB.mjs +6 -0
  7. package/dist/default-Bnjy2dJB.mjs.map +1 -0
  8. package/dist/{index-BniwXaIC.d.mts → index-BRGZPZ2y.d.mts} +111 -1
  9. package/dist/index-BRGZPZ2y.d.mts.map +1 -0
  10. package/dist/{index-DjYJwejg.d.mts → index-CsJiPZtJ.d.mts} +437 -209
  11. package/dist/index-CsJiPZtJ.d.mts.map +1 -0
  12. package/dist/{index-DSZnfOJH.d.mts → index-DIGjtG4z.d.mts} +1626 -1017
  13. package/dist/index-DIGjtG4z.d.mts.map +1 -0
  14. package/dist/index.d.mts +5 -5
  15. package/dist/index.mjs +5 -5
  16. package/dist/jsx.d.ts +63 -0
  17. package/dist/manifests.mjs +1 -1
  18. package/dist/orchestrator/index.d.mts +3 -3
  19. package/dist/orchestrator/index.mjs +3 -3
  20. package/dist/{orchestrator-BWqJw4Yl.mjs → orchestrator-CctLkpmB.mjs} +1195 -764
  21. package/dist/orchestrator-CctLkpmB.mjs.map +1 -0
  22. package/dist/standalone.mjs +2484 -1284
  23. package/dist/tokens/index.d.mts +1 -1
  24. package/dist/tokens/index.mjs +1 -1
  25. package/dist/tokens-BV-PPbQd.mjs +356 -0
  26. package/dist/tokens-BV-PPbQd.mjs.map +1 -0
  27. package/package.json +14 -10
  28. package/dist/atoms-KC7OJWXZ.mjs.map +0 -1
  29. package/dist/default-CfF7GoLv.mjs +0 -6
  30. package/dist/default-CfF7GoLv.mjs.map +0 -1
  31. package/dist/index-BniwXaIC.d.mts.map +0 -1
  32. package/dist/index-DSZnfOJH.d.mts.map +0 -1
  33. package/dist/index-DjYJwejg.d.mts.map +0 -1
  34. package/dist/orchestrator-BWqJw4Yl.mjs.map +0 -1
  35. package/dist/tokens-CbH2s1jV.mjs +0 -246
  36. package/dist/tokens-CbH2s1jV.mjs.map +0 -1
package/README.md CHANGED
@@ -56,7 +56,9 @@ language. `<zitadel-login>` reads the global project handle from
56
56
  el.lang = 'en'; // optional; defaults to <html lang> / navigator.language
57
57
  </script>
58
58
 
59
- <zitadel-login id="login" purpose="login"></zitadel-login>
59
+ <!-- variant="page" = a dedicated login route that owns the viewport.
60
+ Omit it to embed a content-sized widget inside your own layout. -->
61
+ <zitadel-login id="login" variant="page" purpose="login"></zitadel-login>
60
62
  ```
61
63
 
62
64
  What `<zitadel-login>` handles for you:
@@ -65,9 +67,13 @@ What `<zitadel-login>` handles for you:
65
67
  `redirect` / `show` honoured automatically.
66
68
  - Native `<form>` semantics: Enter submits, password managers see the inputs,
67
69
  `<button type="submit">` works, browser autofill works.
68
- - Focus moved to the first field on every step change.
70
+ - Focus moved to the first field on every step change (and on load in
71
+ `variant="page"`; an embedded widget deliberately leaves initial focus alone
72
+ so it can't scroll-jump the page it sits on).
69
73
  - Branding tokens mapped to CSS variables on the shadow root.
70
- - Light/dark theme via `prefers-color-scheme`, hot-swappable.
74
+ - Light and dark theme, hot-swappable: the `theme` property, else the tenant's
75
+ `branding.theme.mode`, else the variant default (`page` dark, `widget`
76
+ follows `prefers-color-scheme`).
71
77
  - Mandatory gates (terms, captcha) enforced before submit.
72
78
  - Output sanitised with DOMPurify against a per-atom allowlist before injection.
73
79
  - Stateless server: the `_zflow` HttpOnly cookie is the source of truth
@@ -131,8 +137,8 @@ fixtures:
131
137
  | Surface | Moon command | What it gives you |
132
138
  | --- | --- | --- |
133
139
  | **Storybook** | `moon run storybook:dev` ([:6006](http://localhost:6006)) | The workbench for both the Lit atoms and the paired React components, plus the `<zitadel-login>` orchestrator (MSW via `msw-storybook-addon`, flow/branding as controls). |
134
- | **demo-next** | `moon run api-mock:start` + `ZITADEL_URL=http://localhost:4000 moon run demo-next:dev` | Next.js SDK, middleware, cookies, built `dist/` ([:3002/login](http://localhost:3002/login)). See [`apps/demo-next`](../../apps/demo-next/README.md). |
135
- | **demo-nuxt** | mock on `:4000`, then `ZITADEL_URL=http://localhost:4000 moon run demo-nuxt:dev` | Nuxt SDK, middleware, cookies, built `dist/` ([:3001/login](http://localhost:3001/login)). See [`apps/demo-nuxt`](../../apps/demo-nuxt/README.md). |
140
+ | **demo-next** | `moon run api-mock:start` + `moon run demo-next:dev` | Next.js SDK, middleware, cookies, built `dist/` ([:3002/login](http://localhost:3002/login)). See [`apps/demo-next`](../../apps/demo-next/README.md). |
141
+ | **demo-nuxt** | mock on `:8080`, then `moon run demo-nuxt:dev` | Nuxt SDK, middleware, cookies, built `dist/` ([:3001/login](http://localhost:3001/login)). See [`apps/demo-nuxt`](../../apps/demo-nuxt/README.md). |
136
142
 
137
143
  Storybook consumes the built `@zitadel/components` / `@zitadel/ui-react`
138
144
  artifacts, so rebuild after source changes (`moon run components:build`) or
@@ -157,21 +163,78 @@ form-associated inputs.
157
163
  | Tier | Surface | Use when |
158
164
  | --- | --- | --- |
159
165
  | SDK config | `configureZitadel({ projectId, proxyPath })` from `@zitadel/api/config` | every consumer — sets the project + proxy path the element reads |
160
- | Tokens | branding payload returned from the server | tenant colour / logo / font |
161
- | CSS hooks | `zitadel-login::part(form)`, `zl-field::part(input)` | targeted overrides from the host page |
166
+ | Tokens (server) | branding payload returned from the server | tenant colour / logo / font, managed centrally |
167
+ | Tokens (host page) | `zitadel-login { --zl-color-…: … }` in your own stylesheet | matching the widget to the app you embedded it in |
168
+ | Layout / placement | host CSS on `zitadel-login { ... }`, `variant`, `--zl-page-min-height` | sizing and positioning inside your layout |
169
+ | CSS hooks | `zitadel-login::part(form)`, `zitadel-login::part(field-input)` | targeted overrides of atom internals |
162
170
  | Locale | `el.lang = 'de'` / `el.locales = { ... }` | i18n / custom copy |
163
171
  | MSW mocks | `setupWorker` / `setupServer` from `msw` | offline / staging / fixtures |
164
- | Custom template | (planned) | tenant-supplied Liquid layouts |
172
+ | Custom template | `zitadel branding eject` → edit Liquid → `zitadel apply`, or `branding.liquid_template` on the payload | tenant-supplied layouts |
165
173
  | Atoms-only | hand-built form | non-standard flow shells |
166
174
 
167
175
  For styling, start with the generated `--zl-*` variables from
168
176
  `@zitadel/design-tokens`, then use host CSS on `zitadel-login { ... }` for page
169
177
  placement and `::part(...)` hooks for targeted internals such as the form or
170
178
  field input. The design-token package README is the canonical token catalogue;
171
- the branding design notes explain the broader override ladder. The current
172
- orchestrator is page-oriented: the host element can be constrained, but the
173
- inner `.zl-mount` still claims `100vh`, so embedding it as a small inline card is
174
- limited until the component follow-up relaxes that layout.
179
+ the branding design notes explain the broader override ladder.
180
+
181
+ **Your stylesheet is the strongest styling authority.** A plain rule in the
182
+ embedding app wins:
183
+
184
+ ```css
185
+ zitadel-login {
186
+ --zl-color-text-primary-white: #101828;
187
+ --zl-color-surface-default-primary-gray: #ffffff;
188
+ --zl-radius-m: 0.25rem;
189
+ }
190
+ ```
191
+
192
+ Those values reach the atoms' own shadow roots — custom properties inherit
193
+ across shadow boundaries — and they outrank both the design-system defaults
194
+ and the tenant's server-side branding, because the CSS cascade gives normal
195
+ declarations from the outer tree precedence over the `:host` rules the
196
+ orchestrator adopts internally. That ordering is deliberate: an app embedding
197
+ its own login should be able to match its design system without a server
198
+ round-trip. Leave the tokens alone and centrally-managed tenant branding
199
+ applies as before. `customization.browser.spec.ts` pins this.
200
+
201
+ **Sizing is a two-mode contract.** The default is `variant="widget"`:
202
+ content-sized, transparent through every layer, no fonts injected into your
203
+ document, no focus grab on load — drop it into a section, sidebar, or modal
204
+ and your app keeps owning the page. Dedicated login routes opt into the
205
+ full-page chrome:
206
+
207
+ ```html
208
+ <zitadel-login variant="page"></zitadel-login>
209
+ <!-- claims the viewport, paints the surface background from tokens,
210
+ loads the brand font, focuses the first field -->
211
+ ```
212
+
213
+ Width-responsive chrome (the split designs' two-column collapse, the compact
214
+ brand header) keys off the **widget's own width** via container queries, so a
215
+ narrow embed on a desktop viewport lays out like a phone. Fine-grained height
216
+ control in either mode: `--zl-page-min-height` (inherits across the shadow
217
+ boundaries, releasing the orchestrator mount and the `zl-page-shell` atom in
218
+ one setting). `embedding.browser.spec.ts` pins this whole contract.
219
+
220
+ **Colour mode** ships light and dark. A `page` renders dark (the design
221
+ system's primary surface); a `widget` follows the visitor's
222
+ `prefers-color-scheme` so it doesn't force a dark card onto a light page.
223
+ Pin it when your app's surface is fixed:
224
+
225
+ ```html
226
+ <zitadel-login theme="light"></zitadel-login>
227
+ ```
228
+
229
+ Resolution runs strongest-first: this `theme` property → the tenant's
230
+ `branding.theme.mode` → the variant default. The resolved mode lands on
231
+ `data-theme` on the element, and every `--zl-*` token repaints with it.
232
+
233
+ Atom internals forward through the orchestrator as `<atom>-<part>` names —
234
+ `zitadel-login::part(field-input)`, `zitadel-login::part(button-root)` — for
235
+ every part an atom's manifest declares; bare names (`zl-field::part(input)`)
236
+ apply when composing atoms directly without the orchestrator
237
+ (`exportparts.browser.spec.ts` pins the forwarding).
175
238
 
176
239
  Automation can use the stable host and native shadow-root hooks that the default
177
240
  template emits. Host atoms expose hooks such as `zitadel-field-email`,
@@ -193,6 +256,8 @@ renders the bundled `default.liquid`. Tracked as a follow-up.
193
256
 
194
257
  | Property | Type | Notes |
195
258
  | --- | --- | --- |
259
+ | `variant` | `'widget' \| 'page'` | Sizing/chrome mode. `widget` (default): content-sized, transparent, no font injection, no initial focus grab. `page`: full-page chrome for dedicated login routes |
260
+ | `theme` | `'light' \| 'dark' \| 'auto'` | Colour mode. Unset defers to `branding.theme.mode`, then to the variant default (`dark` for `page`, `auto` for `widget`). Resolved value lands on `data-theme` |
196
261
  | `purpose` | `'login' \| 'register' \| 'reset_password' \| string` | Which flow purpose to drive |
197
262
  | `flowName` / `flow-name` | `string` | Run the flow definition with this `name` instead of the project default |
198
263
  | `project` | `ZitadelProject` | SDK handle from `configureZitadel()`. Object property (not an attribute). When unset, the element falls back to the global handle from `getZitadelConfig()` |
@@ -202,9 +267,11 @@ renders the bundled `default.liquid`. Tracked as a follow-up.
202
267
  | `resumeFlowId` / `resume-flow-id` | `string` | Resume an existing flow handle instead of starting fresh |
203
268
 
204
269
  Events: `zitadel-flow-input`, `zitadel-flow-step`, `zitadel-flow-complete`,
205
- `zitadel-flow-error`. The orchestrator exposes `::part(form)` for tenant-side
206
- CSS hooks. Adopts design tokens and `branding.font_url` into its shadow root
207
- on each update.
270
+ `zitadel-flow-error`. `zitadel-flow-step` fires for every applied step
271
+ including the first, so a host app can drive its own chrome (progress,
272
+ headings, analytics) from mount onwards rather than from the first submit.
273
+ The orchestrator exposes `::part(form)` for tenant-side CSS hooks. Adopts
274
+ design tokens and `branding.font_url` into its shadow root on each update.
208
275
 
209
276
  ### `<zitadel-logout>`
210
277
 
@@ -218,7 +285,6 @@ the SDK handle, and clears the session. Uses the same token adoption as
218
285
  | --- | --- | --- |
219
286
  | `project` | `ZitadelProject` | SDK handle from `configureZitadel()`. Object property; falls back to the global handle from `getZitadelConfig()` |
220
287
  | `postSignOutUrl` / `post-sign-out-url` | `string` | Navigate here after sign-out |
221
- | `clientId` / `client-id` | `string` | Optional OIDC client id forwarded to `getEndSessionUrl()` |
222
288
 
223
289
  Supports a light-DOM `<template>` slot for a fully custom menu; default UI is
224
290
  the avatar trigger + dropdown.
@@ -311,9 +377,9 @@ moon run storybook:dev
311
377
  # → http://localhost:6006
312
378
 
313
379
  # Framework demos (TCP mock + SDK) — see apps/demo-*/README.md
314
- # moon run api-mock:start # → http://localhost:4000
315
- # ZITADEL_URL=http://localhost:4000 moon run demo-next:dev # → :3002
316
- # ZITADEL_URL=http://localhost:4000 moon run demo-nuxt:dev # → :3001
380
+ # moon run api-mock:start # → http://localhost:8080
381
+ # moon run demo-next:dev # → :3002 (ZITADEL_URL defaults to :8080)
382
+ # moon run demo-nuxt:dev # → :3001 (ZITADEL_URL defaults to :8080)
317
383
 
318
384
  # --- Package checks ---
319
385
 
package/dist/atoms/index.d.mts CHANGED
@@ -1,2 +1,2 @@
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";
1
+ import { _n as IconName, a as ZlPill, c as ZlPasskeyErrorDetail, cn as ZlCheckbox, d as ZlPageShell, dn as ZlCard, f as zlPageShellManifest, fn as zlCardManifest, gn as zlAlertManifest, h as zlFieldManifest, hn as ZlAlert, i as zlSelectManifest, l as ZlPasskeyResultDetail, ln as ZlCheckboxChangeDetail, m as ZlFieldType, mn as zlButtonManifest, n as ZlSelectChangeDetail, o as zlPillManifest, p as ZlField, pn as ZlButton, r as ZlSelectOption, s as ZlPasskey, t as ZlSelect, u as zlPasskeyManifest, un as zlCheckboxManifest, vn as ZlIcon, yn as zlIconManifest } from "../index-DIGjtG4z.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 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";
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-5-wYIl88.mjs";
2
2
  export { ZlAlert, ZlButton, ZlCard, ZlCheckbox, ZlField, ZlIcon, ZlPageShell, ZlPasskey, ZlPill, ZlSelect, zlAlertManifest, zlButtonManifest, zlCardManifest, zlCheckboxManifest, zlFieldManifest, zlIconManifest, zlPageShellManifest, zlPasskeyManifest, zlPillManifest, zlSelectManifest };