@zitadel/components 0.1.0-alpha.4 → 0.1.0-alpha.8
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.
- package/README.md +33 -19
- package/dist/atoms/index.d.mts +1 -1
- package/dist/atoms/index.mjs +1 -1
- package/dist/{atoms-Dh5J7QwT.mjs → atoms-B25wiDqb.mjs} +2 -2
- package/dist/atoms-B25wiDqb.mjs.map +1 -0
- package/dist/default-Cpl78hQN.mjs +6 -0
- package/dist/default-Cpl78hQN.mjs.map +1 -0
- package/dist/{index-DQryonsO.d.mts → index-DVDCrfkv.d.mts} +360 -337
- package/dist/index-DVDCrfkv.d.mts.map +1 -0
- package/dist/{index-D0NA2hMc.d.mts → index-DZ82Y3_z.d.mts} +6 -6
- package/dist/{index-D0NA2hMc.d.mts.map → index-DZ82Y3_z.d.mts.map} +1 -1
- package/dist/index.d.mts +3 -3
- package/dist/index.mjs +4 -4
- package/dist/manifests.mjs +1 -1
- package/dist/orchestrator/index.d.mts +2 -2
- package/dist/orchestrator/index.mjs +2 -2
- package/dist/{orchestrator-DGp8rCN7.mjs → orchestrator-CW9zixuw.mjs} +58 -39
- package/dist/orchestrator-CW9zixuw.mjs.map +1 -0
- package/dist/standalone.mjs +56 -37
- package/dist/tokens/index.mjs +1 -1
- package/dist/{tokens-TXmurodq.mjs → tokens-BQ_augxi.mjs} +2 -2
- package/dist/{tokens-TXmurodq.mjs.map → tokens-BQ_augxi.mjs.map} +1 -1
- package/package.json +2 -16
- package/dist/atoms/index.d.ts +0 -9
- package/dist/atoms/index.d.ts.map +0 -1
- package/dist/atoms/zl-alert.d.ts +0 -56
- package/dist/atoms/zl-alert.d.ts.map +0 -1
- package/dist/atoms/zl-button.d.ts +0 -99
- package/dist/atoms/zl-button.d.ts.map +0 -1
- package/dist/atoms/zl-card.d.ts +0 -53
- package/dist/atoms/zl-card.d.ts.map +0 -1
- package/dist/atoms/zl-field.d.ts +0 -90
- package/dist/atoms/zl-field.d.ts.map +0 -1
- package/dist/atoms/zl-icon.d.ts +0 -48
- package/dist/atoms/zl-icon.d.ts.map +0 -1
- package/dist/atoms/zl-page-shell.d.ts +0 -48
- package/dist/atoms/zl-page-shell.d.ts.map +0 -1
- package/dist/atoms/zl-passkey.d.ts +0 -123
- package/dist/atoms/zl-passkey.d.ts.map +0 -1
- package/dist/atoms/zl-pill.d.ts +0 -54
- package/dist/atoms/zl-pill.d.ts.map +0 -1
- package/dist/atoms-Dh5J7QwT.mjs.map +0 -1
- package/dist/default-BG5uwuAm.mjs +0 -6
- package/dist/default-BG5uwuAm.mjs.map +0 -1
- package/dist/index-DQryonsO.d.mts.map +0 -1
- package/dist/index.d.ts +0 -16
- package/dist/index.d.ts.map +0 -1
- package/dist/internal/base64url.d.ts +0 -18
- package/dist/internal/base64url.d.ts.map +0 -1
- package/dist/internal/emit.d.ts +0 -12
- package/dist/internal/emit.d.ts.map +0 -1
- package/dist/internal/escape-html.d.ts +0 -10
- package/dist/internal/escape-html.d.ts.map +0 -1
- package/dist/internal/unique-id.d.ts +0 -2
- package/dist/internal/unique-id.d.ts.map +0 -1
- package/dist/manifest.d.ts +0 -36
- package/dist/manifest.d.ts.map +0 -1
- package/dist/manifests.d.ts +0 -6
- package/dist/manifests.d.ts.map +0 -1
- package/dist/orchestrator/api-client.d.ts +0 -33
- package/dist/orchestrator/api-client.d.ts.map +0 -1
- package/dist/orchestrator/branding-to-tokens.d.ts +0 -28
- package/dist/orchestrator/branding-to-tokens.d.ts.map +0 -1
- package/dist/orchestrator/branding-validator.d.ts +0 -7
- package/dist/orchestrator/branding-validator.d.ts.map +0 -1
- package/dist/orchestrator/branding.d.ts +0 -76
- package/dist/orchestrator/branding.d.ts.map +0 -1
- package/dist/orchestrator/font-loader.d.ts +0 -2
- package/dist/orchestrator/font-loader.d.ts.map +0 -1
- package/dist/orchestrator/index.d.ts +0 -23
- package/dist/orchestrator/index.d.ts.map +0 -1
- package/dist/orchestrator/liquid.d.ts +0 -31
- package/dist/orchestrator/liquid.d.ts.map +0 -1
- package/dist/orchestrator/locales/de.d.ts +0 -16
- package/dist/orchestrator/locales/de.d.ts.map +0 -1
- package/dist/orchestrator/locales/en.d.ts +0 -19
- package/dist/orchestrator/locales/en.d.ts.map +0 -1
- package/dist/orchestrator/locales/index.d.ts +0 -13
- package/dist/orchestrator/locales/index.d.ts.map +0 -1
- package/dist/orchestrator/locales/it.d.ts +0 -14
- package/dist/orchestrator/locales/it.d.ts.map +0 -1
- package/dist/orchestrator/mandatory-gates.d.ts +0 -26
- package/dist/orchestrator/mandatory-gates.d.ts.map +0 -1
- package/dist/orchestrator/resolve-api.d.ts +0 -37
- package/dist/orchestrator/resolve-api.d.ts.map +0 -1
- package/dist/orchestrator/sanitiser.d.ts +0 -6
- package/dist/orchestrator/sanitiser.d.ts.map +0 -1
- package/dist/orchestrator/template-context.d.ts +0 -55
- package/dist/orchestrator/template-context.d.ts.map +0 -1
- package/dist/orchestrator/template-names.d.ts +0 -16
- package/dist/orchestrator/template-names.d.ts.map +0 -1
- package/dist/orchestrator/theme-controller.d.ts +0 -30
- package/dist/orchestrator/theme-controller.d.ts.map +0 -1
- package/dist/orchestrator/zitadel-login.d.ts +0 -213
- package/dist/orchestrator/zitadel-login.d.ts.map +0 -1
- package/dist/orchestrator/zitadel-logout.d.ts +0 -114
- package/dist/orchestrator/zitadel-logout.d.ts.map +0 -1
- package/dist/orchestrator-DGp8rCN7.mjs.map +0 -1
- package/dist/styles/base.d.ts +0 -7
- package/dist/styles/base.d.ts.map +0 -1
- package/dist/styles/focus-ring.d.ts +0 -7
- package/dist/styles/focus-ring.d.ts.map +0 -1
- package/dist/styles/index.d.ts +0 -5
- package/dist/styles/index.d.ts.map +0 -1
- package/dist/styles/surface.d.ts +0 -8
- package/dist/styles/surface.d.ts.map +0 -1
- package/dist/styles/tokens.d.ts +0 -11
- package/dist/styles/tokens.d.ts.map +0 -1
- package/dist/tokens/index.d.ts +0 -9
- package/dist/tokens/index.d.ts.map +0 -1
- package/dist/tsconfig.lib.tsbuildinfo +0 -1
package/dist/atoms/zl-card.d.ts
DELETED
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
import { LitElement } from "lit";
|
|
2
|
-
import type { AtomManifest } from "../manifest.js";
|
|
3
|
-
/**
|
|
4
|
-
* Atom: `<zl-card>` — the auth-card surface used by every flow screen.
|
|
5
|
-
*
|
|
6
|
-
* Spec lineage (file `xkvBjkOJ8ENuHdTGZHXezK`):
|
|
7
|
-
* - sign-in: node `6593:141985` (combined sign-in card, 32px gap)
|
|
8
|
-
* - sign-up: node `6593:141743` / frame `6593:141741` (title only, 32px gap)
|
|
9
|
-
* - passkey-upsell: node `6594:632` (288h, heading+subtitle, 24px gap)
|
|
10
|
-
* - signed-in: node `6596:132846` (272h, heading+subtitle, 24px gap)
|
|
11
|
-
*
|
|
12
|
-
* Per-state Figma values (constant across all four screens unless noted):
|
|
13
|
-
*
|
|
14
|
-
* width 384px fixed (container.auth-card token; xs collapses
|
|
15
|
-
* to full-width via the surrounding page-shell)
|
|
16
|
-
* background transparent — the page (surface.default-black) shows
|
|
17
|
-
* through; the card is *not* an elevated surface, only
|
|
18
|
-
* outlined
|
|
19
|
-
* border 1px solid surface.default-primary-gray (#252528)
|
|
20
|
-
* radius 16px (radius.l)
|
|
21
|
-
* padding 32px all sides (spacing-05)
|
|
22
|
-
* gap 32px between header / body / footer slots (sign-in,
|
|
23
|
-
* sign-up). Passkey-upsell + signed-in tighten to 24px
|
|
24
|
-
* (spacing-04) via `compact` because their heading group
|
|
25
|
-
* carries a subtitle.
|
|
26
|
-
*
|
|
27
|
-
* Internal slot gaps:
|
|
28
|
-
* header 8px (spacing-02) — heading → subtitle stack
|
|
29
|
-
* body 16px (spacing-03) — fields/buttons stack (matches
|
|
30
|
-
* Figma "Field+CTAs" gap)
|
|
31
|
-
* footer 8px (spacing-02) — auxiliary links
|
|
32
|
-
*/
|
|
33
|
-
export declare class ZlCard extends LitElement {
|
|
34
|
-
static styles: import("lit").CSSResult[];
|
|
35
|
-
accessor compact: boolean;
|
|
36
|
-
render(): import("lit").TemplateResult<1>;
|
|
37
|
-
/**
|
|
38
|
-
* `lightDomSlotFilled` is a render-time snapshot, so re-run render whenever a
|
|
39
|
-
* named slot's assignment changes (e.g. a header added after first paint).
|
|
40
|
-
* The initial render still reads children synchronously, avoiding the
|
|
41
|
-
* empty-then-filled flash a slotchange-only approach would introduce.
|
|
42
|
-
*/
|
|
43
|
-
private onSlotChange;
|
|
44
|
-
/** Slotted nodes are always light-DOM children of the host in our templates. */
|
|
45
|
-
private lightDomSlotFilled;
|
|
46
|
-
}
|
|
47
|
-
export declare const zlCardManifest: AtomManifest;
|
|
48
|
-
declare global {
|
|
49
|
-
interface HTMLElementTagNameMap {
|
|
50
|
-
"zl-card": ZlCard;
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
//# sourceMappingURL=zl-card.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"zl-card.d.ts","sourceRoot":"","sources":["../../src/atoms/zl-card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,qBACa,MAAO,SAAQ,UAAU;IACpC,OAAgB,MAAM,4BAA6D;IAEvC,QAAQ,CAAC,OAAO,UAAS;IAE5D,MAAM,oCAmBd;IAED;;;;;OAKG;IACH,OAAO,CAAC,YAAY,CAElB;IAEF,gFAAgF;IAChF,OAAO,CAAC,kBAAkB;CAM3B;AAED,eAAO,MAAM,cAAc,EAAE,YAMnB,CAAC;AAEX,OAAO,CAAC,MAAM,CAAC,CAAC;IACd,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}
|
package/dist/atoms/zl-field.d.ts
DELETED
|
@@ -1,90 +0,0 @@
|
|
|
1
|
-
import type { CreateFlow201StepFieldsType } from "@zitadel/api/generated/model";
|
|
2
|
-
import { LitElement, type PropertyValues } from "lit";
|
|
3
|
-
import type { AtomManifest } from "../manifest.js";
|
|
4
|
-
import "./zl-icon.js";
|
|
5
|
-
/**
|
|
6
|
-
* Alias of the orval-generated wire enum for field types so the atom's
|
|
7
|
-
* accepted `type` values track the API contract exactly.
|
|
8
|
-
*/
|
|
9
|
-
export type ZlFieldType = CreateFlow201StepFieldsType;
|
|
10
|
-
/** Detail shape emitted by the `zl-input` event (input + clear). */
|
|
11
|
-
export type ZlFieldInputDetail = {
|
|
12
|
-
name: string;
|
|
13
|
-
value: string;
|
|
14
|
-
};
|
|
15
|
-
/**
|
|
16
|
-
* Atom: `<zl-field>` — labelled input bound to a step `field`. Visual
|
|
17
|
-
* spec lineage:
|
|
18
|
-
* - design-system master variant set: node `4390:1404` (file
|
|
19
|
-
* `8UjCXw8yemgljmbkWGrSfE`) — Enabled / Hovered / Focused / Filled /
|
|
20
|
-
* Disabled / Error / Success / Password forgot
|
|
21
|
-
*
|
|
22
|
-
* Per-state Figma values (master `4390:1404`):
|
|
23
|
-
*
|
|
24
|
-
* Layout
|
|
25
|
-
* root flex-column, gap=8px (spacing-02)
|
|
26
|
-
* label row optional "Forgot password?" link (#bba5e4, 14/20)
|
|
27
|
-
* input-wrap 40px, padding 8/16, trailing icon at right 15px
|
|
28
|
-
* trailing cross (clear) | alert-circle (error) | check (success)
|
|
29
|
-
*
|
|
30
|
-
* Form participation: `<zl-field>` is a form-associated custom element.
|
|
31
|
-
*/
|
|
32
|
-
export declare class ZlField extends LitElement {
|
|
33
|
-
static formAssociated: boolean;
|
|
34
|
-
static shadowRootOptions: ShadowRootInit;
|
|
35
|
-
static styles: import("lit").CSSResult[];
|
|
36
|
-
/**
|
|
37
|
-
* Field name — used as the key in form submission and in `zl-input` event
|
|
38
|
-
* detail. For form-associated custom elements the browser owns a native
|
|
39
|
-
* `name` property; using `@property()` would create a conflicting accessor
|
|
40
|
-
* that loses sync with the DOM attribute. We therefore manage it manually.
|
|
41
|
-
*/
|
|
42
|
-
get name(): string;
|
|
43
|
-
set name(value: string);
|
|
44
|
-
accessor label: string;
|
|
45
|
-
accessor type: ZlFieldType;
|
|
46
|
-
accessor value: string;
|
|
47
|
-
accessor placeholder: string;
|
|
48
|
-
accessor autocomplete: string | undefined;
|
|
49
|
-
accessor pattern: string | undefined;
|
|
50
|
-
accessor error: string;
|
|
51
|
-
accessor success: string;
|
|
52
|
-
accessor testId: string | undefined;
|
|
53
|
-
accessor forgotPasswordHref: string | undefined;
|
|
54
|
-
accessor forgotPasswordLabel: string;
|
|
55
|
-
accessor trailingIcon: boolean;
|
|
56
|
-
accessor required: boolean;
|
|
57
|
-
accessor disabled: boolean;
|
|
58
|
-
accessor invalid: boolean;
|
|
59
|
-
private accessor hasHelp;
|
|
60
|
-
private accessor hasSuffixSlot;
|
|
61
|
-
private accessor inputEl;
|
|
62
|
-
private readonly inputId;
|
|
63
|
-
private readonly internals;
|
|
64
|
-
constructor();
|
|
65
|
-
connectedCallback(): void;
|
|
66
|
-
willUpdate(changed: PropertyValues<this>): void;
|
|
67
|
-
formResetCallback(): void;
|
|
68
|
-
formStateRestoreCallback(state: string | null): void;
|
|
69
|
-
focus(options?: FocusOptions): void;
|
|
70
|
-
render(): import("lit").TemplateResult<1>;
|
|
71
|
-
private renderLabelRow;
|
|
72
|
-
private renderTrailingIcon;
|
|
73
|
-
private syncFormState;
|
|
74
|
-
private handleHelpSlotChange;
|
|
75
|
-
private handleSuffixSlotChange;
|
|
76
|
-
private handleClear;
|
|
77
|
-
private handleInput;
|
|
78
|
-
private handleChange;
|
|
79
|
-
private handleKeyDown;
|
|
80
|
-
private nativeInputTestId;
|
|
81
|
-
private dispatchNativeInput;
|
|
82
|
-
private dispatchNativeChange;
|
|
83
|
-
}
|
|
84
|
-
export declare const zlFieldManifest: AtomManifest;
|
|
85
|
-
declare global {
|
|
86
|
-
interface HTMLElementTagNameMap {
|
|
87
|
-
"zl-field": ZlField;
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
//# sourceMappingURL=zl-field.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"zl-field.d.ts","sourceRoot":"","sources":["../../src/atoms/zl-field.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,8BAA8B,CAAC;AAChF,OAAO,EAAE,UAAU,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAWrE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGnD,OAAO,cAAc,CAAC;AAGtB;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,2BAA2B,CAAC;AAEtD,oEAAoE;AACpE,MAAM,MAAM,kBAAkB,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEjE;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,MAAM,CAAC,cAAc,UAAQ;IAE7B,OAAgB,iBAAiB,EAAE,cAAc,CAG/C;IAEF,OAAgB,MAAM,4BAGpB;IAEF;;;;;OAKG;IACH,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAErB;IACW,QAAQ,CAAC,KAAK,SAAM;IACpB,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAU;IACpC,QAAQ,CAAC,KAAK,SAAM;IACpB,QAAQ,CAAC,WAAW,SAAM;IAC1B,QAAQ,CAAC,YAAY,EAAE,MAAM,GAAG,SAAS,CAAa;IACtD,QAAQ,CAAC,OAAO,EAAE,MAAM,GAAG,SAAS,CAAa;IACjD,QAAQ,CAAC,KAAK,SAAM;IACpB,QAAQ,CAAC,OAAO,SAAM;IACM,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAa;IACvC,QAAQ,CAAC,kBAAkB,EAAE,MAAM,GAAG,SAAS,CACpF;IACsC,QAAQ,CAAC,mBAAmB,SACzD;IACoC,QAAQ,CAAC,YAAY,UAAQ;IACzD,QAAQ,CAAC,QAAQ,UAAS;IACX,QAAQ,CAAC,QAAQ,UAAS;IAC1B,QAAQ,CAAC,OAAO,UAAS;IAE5D,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAS;IACjC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAS;IAErB,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAiC;IAEpF,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAuB;IAC/C,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAmB;IAE7C,cAGC;IAEQ,iBAAiB,IAAI,IAAI,CAGjC;IAEQ,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI,CAIvD;IAED,iBAAiB,IAAI,IAAI,CAExB;IAED,wBAAwB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAEnD;IAEQ,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI,CAE3C;IAEQ,MAAM,oCAwEd;IAED,OAAO,CAAC,cAAc;IA6BtB,OAAO,CAAC,kBAAkB;IAqC1B,OAAO,CAAC,aAAa;IAWrB,OAAO,CAAC,oBAAoB,CAG1B;IAEF,OAAO,CAAC,sBAAsB,CAG5B;IAEF,OAAO,CAAC,WAAW,CAMjB;IAEF,OAAO,CAAC,WAAW,CAOjB;IAEF,OAAO,CAAC,YAAY,CAMlB;IAEF,OAAO,CAAC,aAAa,CAenB;IAEF,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,mBAAmB;IAiB3B,OAAO,CAAC,oBAAoB;CAG7B;AAED,eAAO,MAAM,eAAe,EAAE,YAoCpB,CAAC;AAEX,OAAO,CAAC,MAAM,CAAC,CAAC;IACd,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
|
package/dist/atoms/zl-icon.d.ts
DELETED
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
import { LitElement } from "lit";
|
|
2
|
-
import type { AtomManifest } from "../manifest.js";
|
|
3
|
-
/**
|
|
4
|
-
* Atom: `<zl-icon>` — renders a curated glyph from the Lucide icon library.
|
|
5
|
-
*
|
|
6
|
-
* The Figma design system (file `8UjCXw8yemgljmbkWGrSfE`, Icons set
|
|
7
|
-
* `4103:10466`, sizes `16 | 24`) is explicitly built on Lucide. Rather than redrawing every glyph as an
|
|
8
|
-
* inline `<path>` (which inevitably drifts), we curate the auth surface's
|
|
9
|
-
* subset by importing each canonical Lucide node and exposing a stable
|
|
10
|
-
* kebab-case `name` API. To add a glyph: import it from `lucide`, add an
|
|
11
|
-
* entry to {@link ICON_NODES}, and extend the {@link IconName} union.
|
|
12
|
-
*
|
|
13
|
-
* Colour: by default the icon inherits `currentColor`. Set `tone` to one
|
|
14
|
-
* of the semantic states to pick up `--zl-color-icon-{error|success|disabled}`
|
|
15
|
-
* directly. The "palette" colour tokens (`--zl-color-icon-default-*`) are
|
|
16
|
-
* not exposed as `tone` values; consumers wanting those set `color:` on
|
|
17
|
-
* the host.
|
|
18
|
-
*
|
|
19
|
-
* Accessibility: glyphs with an entry in {@link DEFAULT_LABELS} expose an
|
|
20
|
-
* `aria-label` so they're meaningful when used standalone. When the icon
|
|
21
|
-
* is purely decorative (e.g. sitting next to a visible button label),
|
|
22
|
-
* pass `decorative` to force `aria-hidden="true"` and `role="presentation"`,
|
|
23
|
-
* which prevents the icon's name from leaking into the parent's
|
|
24
|
-
* accessible name (e.g. avoids "Loading Loading" on a loading button).
|
|
25
|
-
*/
|
|
26
|
-
export declare class ZlIcon extends LitElement {
|
|
27
|
-
static styles: import("lit").CSSResult[];
|
|
28
|
-
accessor name: IconName;
|
|
29
|
-
accessor size: IconSize;
|
|
30
|
-
accessor tone: IconTone;
|
|
31
|
-
accessor spin: boolean;
|
|
32
|
-
accessor decorative: boolean;
|
|
33
|
-
accessor label: string | undefined;
|
|
34
|
-
render(): import("lit").TemplateResult<1>;
|
|
35
|
-
}
|
|
36
|
-
/** Public, kebab-case glyph IDs. Add a new one by extending both this union and {@link ICON_NODES}. */
|
|
37
|
-
export type IconName = "plus" | "arrow-right" | "arrow-left" | "spinner" | "check" | "cross" | "warning" | "alert-circle" | "info" | "passkey" | "user" | "eye" | "eye-off";
|
|
38
|
-
/** Auth-surface glyph list — keep playgrounds and parity tests in sync. */
|
|
39
|
-
export declare const SHIPPED_ICON_NAMES: readonly ["plus", "arrow-right", "arrow-left", "spinner", "check", "cross", "warning", "alert-circle", "info", "passkey", "user", "eye", "eye-off"];
|
|
40
|
-
export type IconSize = "16" | "24";
|
|
41
|
-
export type IconTone = "default" | "error" | "success" | "disabled";
|
|
42
|
-
export declare const zlIconManifest: AtomManifest;
|
|
43
|
-
declare global {
|
|
44
|
-
interface HTMLElementTagNameMap {
|
|
45
|
-
"zl-icon": ZlIcon;
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
//# sourceMappingURL=zl-icon.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"zl-icon.d.ts","sourceRoot":"","sources":["../../src/atoms/zl-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAwBhD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGnD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBACa,MAAO,SAAQ,UAAU;IAEpC,OAAgB,MAAM,4BAAwC;IAElD,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAU;IAEhB,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAQ;IAE/B,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAa;IAErB,QAAQ,CAAC,IAAI,UAAS;IAEtB,QAAQ,CAAC,UAAU,UAAS;IAE5D,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAa;IAElD,MAAM,oCAwBd;CACF;AAED,uGAAuG;AACvG,MAAM,MAAM,QAAQ,GAChB,MAAM,GACN,aAAa,GACb,YAAY,GACZ,SAAS,GACT,OAAO,GACP,OAAO,GACP,SAAS,GACT,cAAc,GACd,MAAM,GACN,SAAS,GACT,MAAM,GACN,KAAK,GACL,SAAS,CAAC;AAEd,2EAA2E;AAC3E,eAAO,MAAM,kBAAkB,qJAcS,CAAC;AAEzC,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnC,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CAAC;AAoDpE,eAAO,MAAM,cAAc,EAAE,YAMnB,CAAC;AAEX,OAAO,CAAC,MAAM,CAAC,CAAC;IACd,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
import { LitElement } from "lit";
|
|
2
|
-
import type { AtomManifest } from "../manifest.js";
|
|
3
|
-
/**
|
|
4
|
-
* Atom: `<zl-page-shell>` — the full-bleed auth-page chrome the
|
|
5
|
-
* orchestrator injects around every flow template. Responsible for the
|
|
6
|
-
* dark background, vertical centring, responsive padding, and footer
|
|
7
|
-
* attribution slot.
|
|
8
|
-
*
|
|
9
|
-
* Spec lineage (file `xkvBjkOJ8ENuHdTGZHXezK`):
|
|
10
|
-
* - 2xl frames (1536 × 960), e.g. sign-up `6593:141741`, passkey
|
|
11
|
-
* `6594:630`, signed-in `6596:132844`. The outer wrapper uses
|
|
12
|
-
* `py-[52px]` (vertical padding) with `p-[16px]` (spacing-03) on
|
|
13
|
-
* the inner Form container, giving 52px / 16px at 2xl.
|
|
14
|
-
*
|
|
15
|
-
* Per-state Figma values:
|
|
16
|
-
*
|
|
17
|
-
* background surface.default-black (#0f0f11)
|
|
18
|
-
* color text.primary-white (#f4f4f6) inherited
|
|
19
|
-
* min-height 100vh — anchors footer to the viewport bottom even on
|
|
20
|
-
* short cards
|
|
21
|
-
* padding @md+ padding-block 52px, padding-inline 16px (matches
|
|
22
|
-
* Figma 2xl wrapper). 52px isn't a token; use raw value.
|
|
23
|
-
* padding @xs (< 48rem)
|
|
24
|
-
* padding-block 32px (spacing-05), padding-inline 16px
|
|
25
|
-
* (spacing-03) — tighter so the card breathes on
|
|
26
|
-
* narrow phones.
|
|
27
|
-
* gap 24px (spacing-04) between header / main / footer slots
|
|
28
|
-
* footer min-height 1.5rem to reserve room for the attribution
|
|
29
|
-
* pill even when the slot is empty (prevents jitter).
|
|
30
|
-
*/
|
|
31
|
-
export declare class ZlPageShell extends LitElement {
|
|
32
|
-
static styles: import("lit").CSSResult[];
|
|
33
|
-
render(): import("lit").TemplateResult<1>;
|
|
34
|
-
/**
|
|
35
|
-
* Re-render when a named slot's assignment changes so a footer/header added
|
|
36
|
-
* after first paint updates the empty-region class. The initial render reads
|
|
37
|
-
* children synchronously (no empty-then-filled flash).
|
|
38
|
-
*/
|
|
39
|
-
private onSlotChange;
|
|
40
|
-
private lightDomSlotFilled;
|
|
41
|
-
}
|
|
42
|
-
export declare const zlPageShellManifest: AtomManifest;
|
|
43
|
-
declare global {
|
|
44
|
-
interface HTMLElementTagNameMap {
|
|
45
|
-
"zl-page-shell": ZlPageShell;
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
//# sourceMappingURL=zl-page-shell.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"zl-page-shell.d.ts","sourceRoot":"","sources":["../../src/atoms/zl-page-shell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGnD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,4BAGpB;IAEO,MAAM,oCAsBd;IAED;;;;OAIG;IACH,OAAO,CAAC,YAAY,CAElB;IAEF,OAAO,CAAC,kBAAkB;CAM3B;AAED,eAAO,MAAM,mBAAmB,EAAE,YAMxB,CAAC;AAEX,OAAO,CAAC,MAAM,CAAC,CAAC;IACd,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}
|
|
@@ -1,123 +0,0 @@
|
|
|
1
|
-
import { LitElement } from "lit";
|
|
2
|
-
import type { AtomManifest } from "../manifest.js";
|
|
3
|
-
/**
|
|
4
|
-
* Detail shape emitted by the `zl-passkey-result` event.
|
|
5
|
-
*
|
|
6
|
-
* Mirrors the `passkey-proof.yaml` schema (serialized PublicKeyCredential)
|
|
7
|
-
* plus the `challenge_id` the orchestrator needs for the submit body.
|
|
8
|
-
*/
|
|
9
|
-
export type ZlPasskeyResultDetail = {
|
|
10
|
-
challenge_id: string;
|
|
11
|
-
method: string;
|
|
12
|
-
proof: {
|
|
13
|
-
id: string;
|
|
14
|
-
rawId: string;
|
|
15
|
-
type: "public-key";
|
|
16
|
-
response: {
|
|
17
|
-
clientDataJSON: string;
|
|
18
|
-
attestationObject?: string;
|
|
19
|
-
authenticatorData?: string;
|
|
20
|
-
signature?: string;
|
|
21
|
-
userHandle?: string;
|
|
22
|
-
};
|
|
23
|
-
authenticatorAttachment?: "platform" | "cross-platform";
|
|
24
|
-
};
|
|
25
|
-
};
|
|
26
|
-
/**
|
|
27
|
-
* Detail shape emitted by the `zl-passkey-error` event.
|
|
28
|
-
*/
|
|
29
|
-
export type ZlPasskeyErrorDetail = {
|
|
30
|
-
challenge_id: string;
|
|
31
|
-
error: string;
|
|
32
|
-
aborted: boolean;
|
|
33
|
-
};
|
|
34
|
-
/**
|
|
35
|
-
* Atom: `<zl-passkey>` — invisible WebAuthn ceremony handler.
|
|
36
|
-
*
|
|
37
|
-
* This component is intentionally invisible. It is mounted by the Liquid
|
|
38
|
-
* template when `step.challenge.type === "passkey"`. On mount, it reads
|
|
39
|
-
* the challenge options from attributes, triggers the appropriate
|
|
40
|
-
* `navigator.credentials` ceremony, and emits the result.
|
|
41
|
-
*
|
|
42
|
-
* The orchestrator listens for `zl-passkey-result` to auto-submit the
|
|
43
|
-
* proof via `challenge_response` on the flow submit body.
|
|
44
|
-
*
|
|
45
|
-
* Two modes:
|
|
46
|
-
* - `ceremony="authenticate"` → `navigator.credentials.get()` (login)
|
|
47
|
-
* - `ceremony="register"` → `navigator.credentials.create()` (registration)
|
|
48
|
-
*
|
|
49
|
-
* The options are passed as a JSON string via the `options` attribute (or
|
|
50
|
-
* as a JS object via the `.options` property). These are the
|
|
51
|
-
* `PublicKeyCredentialRequestOptions` or `PublicKeyCredentialCreationOptions`
|
|
52
|
-
* straight from the server's challenge response.
|
|
53
|
-
*
|
|
54
|
-
* Spec: ADR 011 — Passkey Action Contract
|
|
55
|
-
*/
|
|
56
|
-
export declare class ZlPasskey extends LitElement {
|
|
57
|
-
/**
|
|
58
|
-
* Which WebAuthn ceremony to perform.
|
|
59
|
-
* - `authenticate` → `navigator.credentials.get()` (default, login)
|
|
60
|
-
* - `register` → `navigator.credentials.create()` (passkey enrollment)
|
|
61
|
-
*/
|
|
62
|
-
accessor ceremony: "authenticate" | "register";
|
|
63
|
-
/**
|
|
64
|
-
* Server-side challenge identifier. Echoed back in the result event
|
|
65
|
-
* so the orchestrator can include it in `challenge_response.challenge_id`.
|
|
66
|
-
*/
|
|
67
|
-
accessor challengeId: string;
|
|
68
|
-
/**
|
|
69
|
-
* WebAuthn options from the server. Accepts either:
|
|
70
|
-
* - A JSON string (via HTML attribute)
|
|
71
|
-
* - A JS object (via property binding)
|
|
72
|
-
*
|
|
73
|
-
* For `ceremony="authenticate"`: `PublicKeyCredentialRequestOptions`
|
|
74
|
-
* For `ceremony="register"`: `PublicKeyCredentialCreationOptions`
|
|
75
|
-
*/
|
|
76
|
-
accessor options: Record<string, unknown> | null;
|
|
77
|
-
/**
|
|
78
|
-
* Challenge method echoed back in the result event so the orchestrator
|
|
79
|
-
* can include it in `challenge_response.method`. Defaults to `"passkey"`.
|
|
80
|
-
*/
|
|
81
|
-
accessor method: string;
|
|
82
|
-
/**
|
|
83
|
-
* When true, the ceremony is not started automatically on mount.
|
|
84
|
-
* The consumer must call `startCeremony()` manually.
|
|
85
|
-
*/
|
|
86
|
-
accessor manual: boolean;
|
|
87
|
-
private abortController;
|
|
88
|
-
connectedCallback(): void;
|
|
89
|
-
disconnectedCallback(): void;
|
|
90
|
-
/**
|
|
91
|
-
* Abort any in-flight WebAuthn ceremony. Called automatically when the
|
|
92
|
-
* component disconnects (step change, page navigation).
|
|
93
|
-
*/
|
|
94
|
-
abort(): void;
|
|
95
|
-
/**
|
|
96
|
-
* Trigger the WebAuthn ceremony. Resolves when the ceremony completes
|
|
97
|
-
* or rejects on error/abort.
|
|
98
|
-
*/
|
|
99
|
-
startCeremony(): Promise<void>;
|
|
100
|
-
private getCredential;
|
|
101
|
-
private createCredential;
|
|
102
|
-
/**
|
|
103
|
-
* Decode a list of credential descriptors from the server's base64url
|
|
104
|
-
* format to the browser's ArrayBuffer format.
|
|
105
|
-
*/
|
|
106
|
-
private decodeCredentialDescriptors;
|
|
107
|
-
/**
|
|
108
|
-
* Serialize a `PublicKeyCredential` to the JSON shape defined in
|
|
109
|
-
* `passkey-proof.yaml`. All `ArrayBuffer` fields are base64url-encoded.
|
|
110
|
-
*/
|
|
111
|
-
private serializeCredential;
|
|
112
|
-
private emitResult;
|
|
113
|
-
private emitError;
|
|
114
|
-
/** Invisible component — no shadow DOM rendering needed. */
|
|
115
|
-
createRenderRoot(): this;
|
|
116
|
-
}
|
|
117
|
-
export declare const zlPasskeyManifest: AtomManifest;
|
|
118
|
-
declare global {
|
|
119
|
-
interface HTMLElementTagNameMap {
|
|
120
|
-
"zl-passkey": ZlPasskey;
|
|
121
|
-
}
|
|
122
|
-
}
|
|
123
|
-
//# sourceMappingURL=zl-passkey.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"zl-passkey.d.ts","sourceRoot":"","sources":["../../src/atoms/zl-passkey.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEnD;;;;;GAKG;AACH,MAAM,MAAM,qBAAqB,GAAG;IAClC,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE;QACL,EAAE,EAAE,MAAM,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,YAAY,CAAC;QACnB,QAAQ,EAAE;YACR,cAAc,EAAE,MAAM,CAAC;YACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;YAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;YAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;YACnB,UAAU,CAAC,EAAE,MAAM,CAAC;SACrB,CAAC;QACF,uBAAuB,CAAC,EAAE,UAAU,GAAG,gBAAgB,CAAC;KACzD,CAAC;CACH,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC;;;;OAIG;IACS,QAAQ,CAAC,QAAQ,EAAE,cAAc,GAAG,UAAU,CAAkB;IAE5E;;;OAGG;IACsC,QAAQ,CAAC,WAAW,SAAM;IAEnE;;;;;;;OAOG;IAiBH,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAQ;IAExD;;;OAGG;IACyB,QAAQ,CAAC,MAAM,SAAa;IAExD;;;OAGG;IAC0B,QAAQ,CAAC,MAAM,UAAS;IAErD,OAAO,CAAC,eAAe,CAAgC;IAE9C,iBAAiB,IAAI,IAAI,CAKjC;IAEQ,oBAAoB,IAAI,IAAI,CAGpC;IAED;;;OAGG;IACH,KAAK,IAAI,IAAI,CAGZ;IAED;;;OAGG;IACG,aAAa,IAAI,OAAO,CAAC,IAAI,CAAC,CAqCnC;YAKa,aAAa;YAyBb,gBAAgB;IAyC9B;;;OAGG;IACH,OAAO,CAAC,2BAA2B;IAWnC;;;OAGG;IACH,OAAO,CAAC,mBAAmB;IA2C3B,OAAO,CAAC,UAAU;IAelB,OAAO,CAAC,SAAS;IAejB,4DAA4D;IACnD,gBAAgB,IAAI,IAAI,CAEhC;CACF;AAED,eAAO,MAAM,iBAAiB,EAAE,YAOtB,CAAC;AAEX,OAAO,CAAC,MAAM,CAAC,CAAC;IACd,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}
|
package/dist/atoms/zl-pill.d.ts
DELETED
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
import { LitElement } from "lit";
|
|
2
|
-
import type { AtomManifest } from "../manifest.js";
|
|
3
|
-
/**
|
|
4
|
-
* Atom: `<zl-pill>` — small inline chip used for status and attribution.
|
|
5
|
-
*
|
|
6
|
-
* Spec lineage (file `xkvBjkOJ8ENuHdTGZHXezK`):
|
|
7
|
-
* - canonical instance: node `6593:141767` ("Social media" frame =
|
|
8
|
-
* "Secured with Zitadel" attribution pill on every sign-in screen).
|
|
9
|
-
*
|
|
10
|
-
* Two roles in scope:
|
|
11
|
-
* - **Attribution pill** ("Secured with Zitadel") rendered by the
|
|
12
|
-
* orchestrator footer when `branding.attribution` is enabled. This is
|
|
13
|
-
* the only canonical pill in the Figma screens; its spec is the
|
|
14
|
-
* source of truth for every dimension.
|
|
15
|
-
* - **Status pill** (decorative `tone` variants — pink / purple /
|
|
16
|
-
* orange / success) reuses the same geometry and typography, only
|
|
17
|
-
* swapping the tint colour. The tones don't have screen instances in
|
|
18
|
-
* Figma yet; when they ship, re-verify each tone against its master.
|
|
19
|
-
*
|
|
20
|
-
* Per-state Figma values (from node `6593:141767`):
|
|
21
|
-
*
|
|
22
|
-
* surface bg layered linear-gradient(182deg,
|
|
23
|
-
* rgba(72,74,87,0.6) 28.65%,
|
|
24
|
-
* rgba(15,15,17,0.6) 81.82%)
|
|
25
|
-
* over surface.default-primary-gray (#252528)
|
|
26
|
-
* border 1px solid #484a57 (our token: border.default-gray-200 —
|
|
27
|
-
* Figma calls this "default-gray-100"; our gray primitive
|
|
28
|
-
* ladder is offset by one slot, so map to gray-200)
|
|
29
|
-
* radius 100px (full pill)
|
|
30
|
-
* size 186×40px frame (`get_metadata` on `6593:141767`)
|
|
31
|
-
* padding 16px inline (spacing-03) / 10px block (spacing metadata:
|
|
32
|
-
* text y=10, line 20px, frame height 40px)
|
|
33
|
-
* gap 8px (spacing-02)
|
|
34
|
-
* font Arimo Regular 14/20, letter-spacing 0, color
|
|
35
|
-
* text.primary-white (#f4f4f6), text-transform none
|
|
36
|
-
* focus-vis 2px solid focus.color, offset 2px
|
|
37
|
-
*
|
|
38
|
-
* content "Secured with" + 65×16 logotype SVG (`attribution-markup.ts`);
|
|
39
|
-
* logotype `margin-top: 2px` (Figma text y=10, logotype y=12)
|
|
40
|
-
*/
|
|
41
|
-
export declare class ZlPill extends LitElement {
|
|
42
|
-
static styles: import("lit").CSSResult[];
|
|
43
|
-
accessor tone: "neutral" | "pink" | "purple" | "orange" | "success";
|
|
44
|
-
accessor href: string | undefined;
|
|
45
|
-
accessor ariaLabel: string | null;
|
|
46
|
-
render(): import("lit").TemplateResult<1>;
|
|
47
|
-
}
|
|
48
|
-
export declare const zlPillManifest: AtomManifest;
|
|
49
|
-
declare global {
|
|
50
|
-
interface HTMLElementTagNameMap {
|
|
51
|
-
"zl-pill": ZlPill;
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
//# sourceMappingURL=zl-pill.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"zl-pill.d.ts","sourceRoot":"","sources":["../../src/atoms/zl-pill.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAOhD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,qBACa,MAAO,SAAQ,UAAU;IACpC,OAAgB,MAAM,4BAA6D;IAEvE,QAAQ,CAAC,IAAI,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAa;IAEhF,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAa;IAE1D,SACkB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEzC,MAAM,oCAed;CACF;AAED,eAAO,MAAM,cAAc,EAAE,YAMnB,CAAC;AAEX,OAAO,CAAC,MAAM,CAAC,CAAC;IACd,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}
|