@zitadel/components 0.1.0-alpha.0 → 0.1.0-alpha.11

package/dist/tokens/index.d.mts

@@ -1,2 +1,2 @@
-import { i as tokens, n as Tokens, r as cssVars, t as CssVars } from "../index-EJengPPu.mjs";
+import { i as tokens, n as Tokens, r as cssVars, t as CssVars } from "../index-EC-BnGsx.mjs";
 export { CssVars, Tokens, cssVars, tokens };

package/dist/tokens/index.mjs

@@ -1,2 +1,2 @@
-import { n as tokens, t as cssVars } from "../tokens-TXmurodq.mjs";
+import { n as tokens, t as cssVars } from "../tokens-C0j4iCrs.mjs";
 export { cssVars, tokens };

package/dist/{tokens-TXmurodq.mjs → tokens-C0j4iCrs.mjs}

@@ -81,8 +81,8 @@ const tokens = {
 		"xl": "1.5rem"
 	},
 	"font": { "family": {
-		"sans": "\"Arimo\", \"APK Futural\", system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif",
-		"heading": "\"APK Futural\", \"Arimo\", system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif",
+		"sans": "\"Arimo\", system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif",
+		"heading": "\"Arimo\", system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif",
 		"mono": "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace"
 	} },
 	"motion": {
@@ -237,8 +237,8 @@ const cssVars = {
 		"page": "var(--zl-container-page)"
 	}
 };
-const tokensCss = "/* AUTOGENERATED by packages/design-tokens/scripts/build.ts — do not edit by hand.\n   Source: src/generated/figma.tokens.json + src/overrides.ts.\n   Re-run: pnpm nx run @zitadel/design-tokens:generate */\n\n:root,\n[data-theme=\"dark\"] {\n  --zl-color-surface-default-black: #0f0f11;\n  --zl-color-surface-default-white: #f4f4f6;\n  --zl-color-surface-default-primary-gray: #252528;\n  --zl-color-surface-default-secondary-gray: #37373a;\n  --zl-color-text-primary-white: #f4f4f6;\n  --zl-color-text-secondary-gray: #bfbfcf;\n  --zl-color-text-button-default: #0f0f11;\n  --zl-color-text-button-invert: #f4f4f6;\n  --zl-color-text-disabled: #686883;\n  --zl-color-text-error: #ea4f70;\n  --zl-color-text-success: #33a779;\n  --zl-color-text-subtitle-pink: #f48aa0;\n  --zl-color-text-subtitle-purple: #bba5e4;\n  --zl-color-text-subtitle-gray: #bfbfcf;\n  --zl-color-text-subtitle-orange: #f25543;\n  --zl-color-icon-default-black: #0f0f11;\n  --zl-color-icon-default-white: #f4f4f6;\n  --zl-color-icon-default-gray: #bfbfcf;\n  --zl-color-icon-default-pink: #f48aa0;\n  --zl-color-icon-default-purple: #bba5e4;\n  --zl-color-icon-default-orange: #f25543;\n  --zl-color-icon-disabled: #686883;\n  --zl-color-icon-error: #ea4f70;\n  --zl-color-icon-success: #33a779;\n  --zl-color-border-default-black: #252528;\n  --zl-color-border-default-white: #f4f4f6;\n  --zl-color-border-default-gray-100: #37373a;\n  --zl-color-border-default-gray-200: #484a57;\n  --zl-color-border-default-gray-300: #686883;\n  --zl-color-border-default-gray-400: #82829c;\n  --zl-color-border-error: #ea4f70;\n  --zl-color-border-success: #33a779;\n  --zl-color-gray-50: #0f0f11;\n  --zl-color-gray-75: #252528;\n  --zl-color-gray-100: #37373a;\n  --zl-color-gray-200: #484a57;\n  --zl-color-gray-300: #686883;\n  --zl-color-gray-400: #82829c;\n  --zl-color-gray-500: #9e9eb2;\n  --zl-color-gray-600: #cfcfde;\n  --zl-color-gray-700: #bfbfcf;\n  --zl-color-gray-800: #e1e1e7;\n  --zl-color-gray-900: #f4f4f6;\n  --zl-spacing-01: 0.25rem;\n  --zl-spacing-02: 0.5rem;\n  --zl-spacing-03: 1rem;\n  --zl-spacing-04: 1.5rem;\n  --zl-spacing-05: 2rem;\n  --zl-spacing-06: 1.5rem;\n  --zl-spacing-07: 2.5rem;\n  --zl-spacing-08: 3rem;\n  --zl-spacing-09: 3.5rem;\n  --zl-spacing-10: 4rem;\n  --zl-spacing-11: 5rem;\n  --zl-spacing-12: 5.5rem;\n  --zl-spacing-13: 6rem;\n  --zl-spacing-14: 6.5rem;\n  --zl-spacing-15: 7rem;\n  --zl-spacing-16: 7.5rem;\n  --zl-radius-xs: 0.25rem;\n  --zl-radius-s: 0.5rem;\n  --zl-radius-m: 0.75rem;\n  --zl-radius-l: 1rem;\n  --zl-radius-xl: 1.5rem;\n  --zl-font-family-sans: \"Arimo\", \"APK Futural\", system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif;\n  --zl-font-family-heading: \"APK Futural\", \"Arimo\", system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif;\n  --zl-font-family-mono: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n  --zl-duration-instant: 0ms;\n  --zl-duration-fast: 120ms;\n  --zl-duration-base: 200ms;\n  --zl-duration-slow: 320ms;\n  --zl-easing-standard: cubic-bezier(0.2, 0, 0, 1);\n  --zl-easing-decelerate: cubic-bezier(0, 0, 0, 1);\n  --zl-easing-accelerate: cubic-bezier(0.3, 0, 1, 1);\n  --zl-focus-width: 2px;\n  --zl-focus-offset: 2px;\n  --zl-focus-color: #f4f4f6;\n  --zl-breakpoint-xs: 26.5625rem;\n  --zl-breakpoint-sm: 40rem;\n  --zl-breakpoint-md: 48rem;\n  --zl-breakpoint-lg: 64rem;\n  --zl-breakpoint-xl: 80rem;\n  --zl-breakpoint-2xl: 96rem;\n  --zl-breakpoint-3xl: 120rem;\n  --zl-breakpoint-4xl: 160rem;\n  --zl-container-auth-card: 24rem;\n  --zl-container-page: 80rem;\n}\n\n[data-theme=\"light\"] {\n  /* Reserved. Light mode lands when the Figma design system publishes\n     a light variable mode; the next sync will populate this block. */\n}\n";
+const tokensCss = "/* AUTOGENERATED by packages/design-tokens/scripts/build.ts — do not edit by hand.\n   Source: src/generated/figma.tokens.json + src/overrides.ts.\n   Re-run: moon run design-tokens:generate */\n\n:root,\n[data-theme=\"dark\"] {\n  --zl-color-surface-default-black: #0f0f11;\n  --zl-color-surface-default-white: #f4f4f6;\n  --zl-color-surface-default-primary-gray: #252528;\n  --zl-color-surface-default-secondary-gray: #37373a;\n  --zl-color-text-primary-white: #f4f4f6;\n  --zl-color-text-secondary-gray: #bfbfcf;\n  --zl-color-text-button-default: #0f0f11;\n  --zl-color-text-button-invert: #f4f4f6;\n  --zl-color-text-disabled: #686883;\n  --zl-color-text-error: #ea4f70;\n  --zl-color-text-success: #33a779;\n  --zl-color-text-subtitle-pink: #f48aa0;\n  --zl-color-text-subtitle-purple: #bba5e4;\n  --zl-color-text-subtitle-gray: #bfbfcf;\n  --zl-color-text-subtitle-orange: #f25543;\n  --zl-color-icon-default-black: #0f0f11;\n  --zl-color-icon-default-white: #f4f4f6;\n  --zl-color-icon-default-gray: #bfbfcf;\n  --zl-color-icon-default-pink: #f48aa0;\n  --zl-color-icon-default-purple: #bba5e4;\n  --zl-color-icon-default-orange: #f25543;\n  --zl-color-icon-disabled: #686883;\n  --zl-color-icon-error: #ea4f70;\n  --zl-color-icon-success: #33a779;\n  --zl-color-border-default-black: #252528;\n  --zl-color-border-default-white: #f4f4f6;\n  --zl-color-border-default-gray-100: #37373a;\n  --zl-color-border-default-gray-200: #484a57;\n  --zl-color-border-default-gray-300: #686883;\n  --zl-color-border-default-gray-400: #82829c;\n  --zl-color-border-error: #ea4f70;\n  --zl-color-border-success: #33a779;\n  --zl-color-gray-50: #0f0f11;\n  --zl-color-gray-75: #252528;\n  --zl-color-gray-100: #37373a;\n  --zl-color-gray-200: #484a57;\n  --zl-color-gray-300: #686883;\n  --zl-color-gray-400: #82829c;\n  --zl-color-gray-500: #9e9eb2;\n  --zl-color-gray-600: #cfcfde;\n  --zl-color-gray-700: #bfbfcf;\n  --zl-color-gray-800: #e1e1e7;\n  --zl-color-gray-900: #f4f4f6;\n  --zl-spacing-01: 0.25rem;\n  --zl-spacing-02: 0.5rem;\n  --zl-spacing-03: 1rem;\n  --zl-spacing-04: 1.5rem;\n  --zl-spacing-05: 2rem;\n  --zl-spacing-06: 1.5rem;\n  --zl-spacing-07: 2.5rem;\n  --zl-spacing-08: 3rem;\n  --zl-spacing-09: 3.5rem;\n  --zl-spacing-10: 4rem;\n  --zl-spacing-11: 5rem;\n  --zl-spacing-12: 5.5rem;\n  --zl-spacing-13: 6rem;\n  --zl-spacing-14: 6.5rem;\n  --zl-spacing-15: 7rem;\n  --zl-spacing-16: 7.5rem;\n  --zl-radius-xs: 0.25rem;\n  --zl-radius-s: 0.5rem;\n  --zl-radius-m: 0.75rem;\n  --zl-radius-l: 1rem;\n  --zl-radius-xl: 1.5rem;\n  --zl-font-family-sans: \"Arimo\", system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif;\n  --zl-font-family-heading: \"Arimo\", system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif;\n  --zl-font-family-mono: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n  --zl-duration-instant: 0ms;\n  --zl-duration-fast: 120ms;\n  --zl-duration-base: 200ms;\n  --zl-duration-slow: 320ms;\n  --zl-easing-standard: cubic-bezier(0.2, 0, 0, 1);\n  --zl-easing-decelerate: cubic-bezier(0, 0, 0, 1);\n  --zl-easing-accelerate: cubic-bezier(0.3, 0, 1, 1);\n  --zl-focus-width: 2px;\n  --zl-focus-offset: 2px;\n  --zl-focus-color: #f4f4f6;\n  --zl-breakpoint-xs: 26.5625rem;\n  --zl-breakpoint-sm: 40rem;\n  --zl-breakpoint-md: 48rem;\n  --zl-breakpoint-lg: 64rem;\n  --zl-breakpoint-xl: 80rem;\n  --zl-breakpoint-2xl: 96rem;\n  --zl-breakpoint-3xl: 120rem;\n  --zl-breakpoint-4xl: 160rem;\n  --zl-container-auth-card: 24rem;\n  --zl-container-page: 80rem;\n}\n\n[data-theme=\"light\"] {\n  /* Reserved. Light mode lands when the Figma design system publishes\n     a light variable mode; the next sync will populate this block. */\n}\n";
 //#endregion
 export { tokens as n, tokensCss as r, cssVars as t };
 
-//# sourceMappingURL=tokens-TXmurodq.mjs.map
+//# sourceMappingURL=tokens-C0j4iCrs.mjs.map

package/dist/tokens-C0j4iCrs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens-C0j4iCrs.mjs","names":[],"sources":["../../design-tokens/dist/tokens.mjs"],"sourcesContent":["//#region src/generated/tokens.ts\nconst tokens = {\n\t\"color\": {\n\t\t\"surface\": {\n\t\t\t\"defaultBlack\": \"#0f0f11\",\n\t\t\t\"defaultWhite\": \"#f4f4f6\",\n\t\t\t\"defaultPrimaryGray\": \"#252528\",\n\t\t\t\"defaultSecondaryGray\": \"#37373a\"\n\t\t},\n\t\t\"text\": {\n\t\t\t\"primaryWhite\": \"#f4f4f6\",\n\t\t\t\"secondaryGray\": \"#bfbfcf\",\n\t\t\t\"buttonDefault\": \"#0f0f11\",\n\t\t\t\"buttonInvert\": \"#f4f4f6\",\n\t\t\t\"disabled\": \"#686883\",\n\t\t\t\"error\": \"#ea4f70\",\n\t\t\t\"success\": \"#33a779\",\n\t\t\t\"subtitlePink\": \"#f48aa0\",\n\t\t\t\"subtitlePurple\": \"#bba5e4\",\n\t\t\t\"subtitleGray\": \"#bfbfcf\",\n\t\t\t\"subtitleOrange\": \"#f25543\"\n\t\t},\n\t\t\"icon\": {\n\t\t\t\"defaultBlack\": \"#0f0f11\",\n\t\t\t\"defaultWhite\": \"#f4f4f6\",\n\t\t\t\"defaultGray\": \"#bfbfcf\",\n\t\t\t\"defaultPink\": \"#f48aa0\",\n\t\t\t\"defaultPurple\": \"#bba5e4\",\n\t\t\t\"defaultOrange\": \"#f25543\",\n\t\t\t\"disabled\": \"#686883\",\n\t\t\t\"error\": \"#ea4f70\",\n\t\t\t\"success\": \"#33a779\"\n\t\t},\n\t\t\"border\": {\n\t\t\t\"defaultBlack\": \"#252528\",\n\t\t\t\"defaultWhite\": \"#f4f4f6\",\n\t\t\t\"defaultGray100\": \"#37373a\",\n\t\t\t\"defaultGray200\": \"#484a57\",\n\t\t\t\"defaultGray300\": \"#686883\",\n\t\t\t\"defaultGray400\": \"#82829c\",\n\t\t\t\"error\": \"#ea4f70\",\n\t\t\t\"success\": \"#33a779\"\n\t\t},\n\t\t\"gray\": {\n\t\t\t\"50\": \"#0f0f11\",\n\t\t\t\"75\": \"#252528\",\n\t\t\t\"100\": \"#37373a\",\n\t\t\t\"200\": \"#484a57\",\n\t\t\t\"300\": \"#686883\",\n\t\t\t\"400\": \"#82829c\",\n\t\t\t\"500\": \"#9e9eb2\",\n\t\t\t\"600\": \"#cfcfde\",\n\t\t\t\"700\": \"#bfbfcf\",\n\t\t\t\"800\": \"#e1e1e7\",\n\t\t\t\"900\": \"#f4f4f6\"\n\t\t}\n\t},\n\t\"spacing\": {\n\t\t\"10\": \"4rem\",\n\t\t\"11\": \"5rem\",\n\t\t\"12\": \"5.5rem\",\n\t\t\"13\": \"6rem\",\n\t\t\"14\": \"6.5rem\",\n\t\t\"15\": \"7rem\",\n\t\t\"16\": \"7.5rem\",\n\t\t\"01\": \"0.25rem\",\n\t\t\"02\": \"0.5rem\",\n\t\t\"03\": \"1rem\",\n\t\t\"04\": \"1.5rem\",\n\t\t\"05\": \"2rem\",\n\t\t\"06\": \"1.5rem\",\n\t\t\"07\": \"2.5rem\",\n\t\t\"08\": \"3rem\",\n\t\t\"09\": \"3.5rem\"\n\t},\n\t\"radius\": {\n\t\t\"xs\": \"0.25rem\",\n\t\t\"s\": \"0.5rem\",\n\t\t\"m\": \"0.75rem\",\n\t\t\"l\": \"1rem\",\n\t\t\"xl\": \"1.5rem\"\n\t},\n\t\"font\": { \"family\": {\n\t\t\"sans\": \"\\\"Arimo\\\", system-ui, -apple-system, \\\"Segoe UI\\\", Helvetica, Arial, sans-serif\",\n\t\t\"heading\": \"\\\"Arimo\\\", system-ui, -apple-system, \\\"Segoe UI\\\", Helvetica, Arial, sans-serif\",\n\t\t\"mono\": \"ui-monospace, SFMono-Regular, \\\"SF Mono\\\", Menlo, Monaco, Consolas, \\\"Liberation Mono\\\", \\\"Courier New\\\", monospace\"\n\t} },\n\t\"motion\": {\n\t\t\"duration\": {\n\t\t\t\"instant\": \"0ms\",\n\t\t\t\"fast\": \"120ms\",\n\t\t\t\"base\": \"200ms\",\n\t\t\t\"slow\": \"320ms\"\n\t\t},\n\t\t\"easing\": {\n\t\t\t\"standard\": \"cubic-bezier(0.2, 0, 0, 1)\",\n\t\t\t\"decelerate\": \"cubic-bezier(0, 0, 0, 1)\",\n\t\t\t\"accelerate\": \"cubic-bezier(0.3, 0, 1, 1)\"\n\t\t}\n\t},\n\t\"focus\": {\n\t\t\"width\": \"2px\",\n\t\t\"offset\": \"2px\",\n\t\t\"color\": \"#f4f4f6\"\n\t},\n\t\"breakpoint\": {\n\t\t\"xs\": \"26.5625rem\",\n\t\t\"sm\": \"40rem\",\n\t\t\"md\": \"48rem\",\n\t\t\"lg\": \"64rem\",\n\t\t\"xl\": \"80rem\",\n\t\t\"2xl\": \"96rem\",\n\t\t\"3xl\": \"120rem\",\n\t\t\"4xl\": \"160rem\"\n\t},\n\t\"container\": {\n\t\t\"authCard\": \"24rem\",\n\t\t\"page\": \"80rem\"\n\t}\n};\nconst cssVars = {\n\t\"color\": {\n\t\t\"surface\": {\n\t\t\t\"defaultBlack\": \"var(--zl-color-surface-default-black)\",\n\t\t\t\"defaultWhite\": \"var(--zl-color-surface-default-white)\",\n\t\t\t\"defaultPrimaryGray\": \"var(--zl-color-surface-default-primary-gray)\",\n\t\t\t\"defaultSecondaryGray\": \"var(--zl-color-surface-default-secondary-gray)\"\n\t\t},\n\t\t\"text\": {\n\t\t\t\"primaryWhite\": \"var(--zl-color-text-primary-white)\",\n\t\t\t\"secondaryGray\": \"var(--zl-color-text-secondary-gray)\",\n\t\t\t\"buttonDefault\": \"var(--zl-color-text-button-default)\",\n\t\t\t\"buttonInvert\": \"var(--zl-color-text-button-invert)\",\n\t\t\t\"disabled\": \"var(--zl-color-text-disabled)\",\n\t\t\t\"error\": \"var(--zl-color-text-error)\",\n\t\t\t\"success\": \"var(--zl-color-text-success)\",\n\t\t\t\"subtitlePink\": \"var(--zl-color-text-subtitle-pink)\",\n\t\t\t\"subtitlePurple\": \"var(--zl-color-text-subtitle-purple)\",\n\t\t\t\"subtitleGray\": \"var(--zl-color-text-subtitle-gray)\",\n\t\t\t\"subtitleOrange\": \"var(--zl-color-text-subtitle-orange)\"\n\t\t},\n\t\t\"icon\": {\n\t\t\t\"defaultBlack\": \"var(--zl-color-icon-default-black)\",\n\t\t\t\"defaultWhite\": \"var(--zl-color-icon-default-white)\",\n\t\t\t\"defaultGray\": \"var(--zl-color-icon-default-gray)\",\n\t\t\t\"defaultPink\": \"var(--zl-color-icon-default-pink)\",\n\t\t\t\"defaultPurple\": \"var(--zl-color-icon-default-purple)\",\n\t\t\t\"defaultOrange\": \"var(--zl-color-icon-default-orange)\",\n\t\t\t\"disabled\": \"var(--zl-color-icon-disabled)\",\n\t\t\t\"error\": \"var(--zl-color-icon-error)\",\n\t\t\t\"success\": \"var(--zl-color-icon-success)\"\n\t\t},\n\t\t\"border\": {\n\t\t\t\"defaultBlack\": \"var(--zl-color-border-default-black)\",\n\t\t\t\"defaultWhite\": \"var(--zl-color-border-default-white)\",\n\t\t\t\"defaultGray100\": \"var(--zl-color-border-default-gray-100)\",\n\t\t\t\"defaultGray200\": \"var(--zl-color-border-default-gray-200)\",\n\t\t\t\"defaultGray300\": \"var(--zl-color-border-default-gray-300)\",\n\t\t\t\"defaultGray400\": \"var(--zl-color-border-default-gray-400)\",\n\t\t\t\"error\": \"var(--zl-color-border-error)\",\n\t\t\t\"success\": \"var(--zl-color-border-success)\"\n\t\t},\n\t\t\"gray\": {\n\t\t\t\"50\": \"var(--zl-color-gray-50)\",\n\t\t\t\"75\": \"var(--zl-color-gray-75)\",\n\t\t\t\"100\": \"var(--zl-color-gray-100)\",\n\t\t\t\"200\": \"var(--zl-color-gray-200)\",\n\t\t\t\"300\": \"var(--zl-color-gray-300)\",\n\t\t\t\"400\": \"var(--zl-color-gray-400)\",\n\t\t\t\"500\": \"var(--zl-color-gray-500)\",\n\t\t\t\"600\": \"var(--zl-color-gray-600)\",\n\t\t\t\"700\": \"var(--zl-color-gray-700)\",\n\t\t\t\"800\": \"var(--zl-color-gray-800)\",\n\t\t\t\"900\": \"var(--zl-color-gray-900)\"\n\t\t}\n\t},\n\t\"spacing\": {\n\t\t\"10\": \"var(--zl-spacing-10)\",\n\t\t\"11\": \"var(--zl-spacing-11)\",\n\t\t\"12\": \"var(--zl-spacing-12)\",\n\t\t\"13\": \"var(--zl-spacing-13)\",\n\t\t\"14\": \"var(--zl-spacing-14)\",\n\t\t\"15\": \"var(--zl-spacing-15)\",\n\t\t\"16\": \"var(--zl-spacing-16)\",\n\t\t\"01\": \"var(--zl-spacing-01)\",\n\t\t\"02\": \"var(--zl-spacing-02)\",\n\t\t\"03\": \"var(--zl-spacing-03)\",\n\t\t\"04\": \"var(--zl-spacing-04)\",\n\t\t\"05\": \"var(--zl-spacing-05)\",\n\t\t\"06\": \"var(--zl-spacing-06)\",\n\t\t\"07\": \"var(--zl-spacing-07)\",\n\t\t\"08\": \"var(--zl-spacing-08)\",\n\t\t\"09\": \"var(--zl-spacing-09)\"\n\t},\n\t\"radius\": {\n\t\t\"xs\": \"var(--zl-radius-xs)\",\n\t\t\"s\": \"var(--zl-radius-s)\",\n\t\t\"m\": \"var(--zl-radius-m)\",\n\t\t\"l\": \"var(--zl-radius-l)\",\n\t\t\"xl\": \"var(--zl-radius-xl)\"\n\t},\n\t\"font\": { \"family\": {\n\t\t\"sans\": \"var(--zl-font-family-sans)\",\n\t\t\"heading\": \"var(--zl-font-family-heading)\",\n\t\t\"mono\": \"var(--zl-font-family-mono)\"\n\t} },\n\t\"motion\": {\n\t\t\"duration\": {\n\t\t\t\"instant\": \"var(--zl-duration-instant)\",\n\t\t\t\"fast\": \"var(--zl-duration-fast)\",\n\t\t\t\"base\": \"var(--zl-duration-base)\",\n\t\t\t\"slow\": \"var(--zl-duration-slow)\"\n\t\t},\n\t\t\"easing\": {\n\t\t\t\"standard\": \"var(--zl-easing-standard)\",\n\t\t\t\"decelerate\": \"var(--zl-easing-decelerate)\",\n\t\t\t\"accelerate\": \"var(--zl-easing-accelerate)\"\n\t\t}\n\t},\n\t\"focus\": {\n\t\t\"width\": \"var(--zl-focus-width)\",\n\t\t\"offset\": \"var(--zl-focus-offset)\",\n\t\t\"color\": \"var(--zl-focus-color)\"\n\t},\n\t\"breakpoint\": {\n\t\t\"xs\": \"var(--zl-breakpoint-xs)\",\n\t\t\"sm\": \"var(--zl-breakpoint-sm)\",\n\t\t\"md\": \"var(--zl-breakpoint-md)\",\n\t\t\"lg\": \"var(--zl-breakpoint-lg)\",\n\t\t\"xl\": \"var(--zl-breakpoint-xl)\",\n\t\t\"2xl\": \"var(--zl-breakpoint-2xl)\",\n\t\t\"3xl\": \"var(--zl-breakpoint-3xl)\",\n\t\t\"4xl\": \"var(--zl-breakpoint-4xl)\"\n\t},\n\t\"container\": {\n\t\t\"authCard\": \"var(--zl-container-auth-card)\",\n\t\t\"page\": \"var(--zl-container-page)\"\n\t}\n};\nconst tokensCss = \"/* AUTOGENERATED by packages/design-tokens/scripts/build.ts — do not edit by hand.\\n   Source: src/generated/figma.tokens.json + src/overrides.ts.\\n   Re-run: moon run design-tokens:generate */\\n\\n:root,\\n[data-theme=\\\"dark\\\"] {\\n  --zl-color-surface-default-black: #0f0f11;\\n  --zl-color-surface-default-white: #f4f4f6;\\n  --zl-color-surface-default-primary-gray: #252528;\\n  --zl-color-surface-default-secondary-gray: #37373a;\\n  --zl-color-text-primary-white: #f4f4f6;\\n  --zl-color-text-secondary-gray: #bfbfcf;\\n  --zl-color-text-button-default: #0f0f11;\\n  --zl-color-text-button-invert: #f4f4f6;\\n  --zl-color-text-disabled: #686883;\\n  --zl-color-text-error: #ea4f70;\\n  --zl-color-text-success: #33a779;\\n  --zl-color-text-subtitle-pink: #f48aa0;\\n  --zl-color-text-subtitle-purple: #bba5e4;\\n  --zl-color-text-subtitle-gray: #bfbfcf;\\n  --zl-color-text-subtitle-orange: #f25543;\\n  --zl-color-icon-default-black: #0f0f11;\\n  --zl-color-icon-default-white: #f4f4f6;\\n  --zl-color-icon-default-gray: #bfbfcf;\\n  --zl-color-icon-default-pink: #f48aa0;\\n  --zl-color-icon-default-purple: #bba5e4;\\n  --zl-color-icon-default-orange: #f25543;\\n  --zl-color-icon-disabled: #686883;\\n  --zl-color-icon-error: #ea4f70;\\n  --zl-color-icon-success: #33a779;\\n  --zl-color-border-default-black: #252528;\\n  --zl-color-border-default-white: #f4f4f6;\\n  --zl-color-border-default-gray-100: #37373a;\\n  --zl-color-border-default-gray-200: #484a57;\\n  --zl-color-border-default-gray-300: #686883;\\n  --zl-color-border-default-gray-400: #82829c;\\n  --zl-color-border-error: #ea4f70;\\n  --zl-color-border-success: #33a779;\\n  --zl-color-gray-50: #0f0f11;\\n  --zl-color-gray-75: #252528;\\n  --zl-color-gray-100: #37373a;\\n  --zl-color-gray-200: #484a57;\\n  --zl-color-gray-300: #686883;\\n  --zl-color-gray-400: #82829c;\\n  --zl-color-gray-500: #9e9eb2;\\n  --zl-color-gray-600: #cfcfde;\\n  --zl-color-gray-700: #bfbfcf;\\n  --zl-color-gray-800: #e1e1e7;\\n  --zl-color-gray-900: #f4f4f6;\\n  --zl-spacing-01: 0.25rem;\\n  --zl-spacing-02: 0.5rem;\\n  --zl-spacing-03: 1rem;\\n  --zl-spacing-04: 1.5rem;\\n  --zl-spacing-05: 2rem;\\n  --zl-spacing-06: 1.5rem;\\n  --zl-spacing-07: 2.5rem;\\n  --zl-spacing-08: 3rem;\\n  --zl-spacing-09: 3.5rem;\\n  --zl-spacing-10: 4rem;\\n  --zl-spacing-11: 5rem;\\n  --zl-spacing-12: 5.5rem;\\n  --zl-spacing-13: 6rem;\\n  --zl-spacing-14: 6.5rem;\\n  --zl-spacing-15: 7rem;\\n  --zl-spacing-16: 7.5rem;\\n  --zl-radius-xs: 0.25rem;\\n  --zl-radius-s: 0.5rem;\\n  --zl-radius-m: 0.75rem;\\n  --zl-radius-l: 1rem;\\n  --zl-radius-xl: 1.5rem;\\n  --zl-font-family-sans: \\\"Arimo\\\", system-ui, -apple-system, \\\"Segoe UI\\\", Helvetica, Arial, sans-serif;\\n  --zl-font-family-heading: \\\"Arimo\\\", system-ui, -apple-system, \\\"Segoe UI\\\", Helvetica, Arial, sans-serif;\\n  --zl-font-family-mono: ui-monospace, SFMono-Regular, \\\"SF Mono\\\", Menlo, Monaco, Consolas, \\\"Liberation Mono\\\", \\\"Courier New\\\", monospace;\\n  --zl-duration-instant: 0ms;\\n  --zl-duration-fast: 120ms;\\n  --zl-duration-base: 200ms;\\n  --zl-duration-slow: 320ms;\\n  --zl-easing-standard: cubic-bezier(0.2, 0, 0, 1);\\n  --zl-easing-decelerate: cubic-bezier(0, 0, 0, 1);\\n  --zl-easing-accelerate: cubic-bezier(0.3, 0, 1, 1);\\n  --zl-focus-width: 2px;\\n  --zl-focus-offset: 2px;\\n  --zl-focus-color: #f4f4f6;\\n  --zl-breakpoint-xs: 26.5625rem;\\n  --zl-breakpoint-sm: 40rem;\\n  --zl-breakpoint-md: 48rem;\\n  --zl-breakpoint-lg: 64rem;\\n  --zl-breakpoint-xl: 80rem;\\n  --zl-breakpoint-2xl: 96rem;\\n  --zl-breakpoint-3xl: 120rem;\\n  --zl-breakpoint-4xl: 160rem;\\n  --zl-container-auth-card: 24rem;\\n  --zl-container-page: 80rem;\\n}\\n\\n[data-theme=\\\"light\\\"] {\\n  /* Reserved. Light mode lands when the Figma design system publishes\\n     a light variable mode; the next sync will populate this block. */\\n}\\n\";\n//#endregion\nexport { cssVars, tokens, tokensCss };\n\n//# sourceMappingURL=tokens.mjs.map"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zitadel/components",
-  "version": "0.1.0-alpha.0",
+  "version": "0.1.0-alpha.11",
   "description": "Lit-based atomic web components and the <zitadel-login> orchestrator for the Zitadel auth UI.",
   "homepage": "https://github.com/zitadel/nextgen/tree/main/packages/components#readme",
   "bugs": {
@@ -19,6 +19,8 @@
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.mts",
+  "unpkg": "./dist/standalone.mjs",
+  "jsdelivr": "./dist/standalone.mjs",
   "exports": {
     "./package.json": "./package.json",
     ".": {
@@ -26,6 +28,10 @@
       "import": "./dist/index.mjs",
       "default": "./dist/index.mjs"
     },
+    "./standalone": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/standalone.mjs"
+    },
     "./atoms": {
       "types": "./dist/atoms/index.d.mts",
       "import": "./dist/atoms/index.mjs"
@@ -52,20 +58,6 @@
     "lit": "^3.3.2",
     "lucide": "^1.16.0"
   },
-  "nx": {
-    "targets": {
-      "build": {
-        "outputs": [
-          "{projectRoot}/dist"
-        ]
-      },
-      "typecheck": {
-        "dependsOn": [
-          "build"
-        ]
-      }
-    }
-  },
   "devDependencies": {
     "@tsdown/css": "^0.21.10",
     "@vitest/browser": "^4.1.7",
@@ -79,7 +71,7 @@
     "tsdown": "^0.21.10",
     "tslib": "^2.8.1",
     "@zitadel/api-mock": "0.0.0",
-    "@zitadel/api": "0.1.0-alpha.0",
+    "@zitadel/api": "0.1.0-alpha.11",
     "@zitadel/design-tokens": "0.1.0-alpha.0",
     "@zitadel/shared-component-styles": "0.0.0"
   },

package/dist/atoms/index.d.ts

@@ -1,9 +0,0 @@
-export { ZlAlert, zlAlertManifest } from "./zl-alert.js";
-export { ZlButton, zlButtonManifest } from "./zl-button.js";
-export { ZlCard, zlCardManifest } from "./zl-card.js";
-export { ZlField, zlFieldManifest, type ZlFieldType } from "./zl-field.js";
-export { ZlIcon, zlIconManifest, type IconName } from "./zl-icon.js";
-export { ZlPageShell, zlPageShellManifest } from "./zl-page-shell.js";
-export { ZlPasskey, zlPasskeyManifest, type ZlPasskeyResultDetail, type ZlPasskeyErrorDetail } from "./zl-passkey.js";
-export { ZlPill, zlPillManifest } from "./zl-pill.js";
-//# sourceMappingURL=index.d.ts.map

package/dist/atoms/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/atoms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,KAAK,QAAQ,EAAE,MAAM,cAAc,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,KAAK,qBAAqB,EAAE,KAAK,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AACtH,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC"}

package/dist/atoms/zl-alert.d.ts

@@ -1,56 +0,0 @@
-import { LitElement } from "lit";
-import type { AtomManifest } from "../manifest.js";
-import "./zl-icon.js";
-/**
- * Atom: `<zl-alert>` — inline status message replacing the legacy
- * `<zl-error>`.
- *
- * Spec lineage (file `8UjCXw8yemgljmbkWGrSfE`):
- *   - design-system master: node `6593:2640` (Alert/Error). Screen instance
- *     `6596:132779` matches the same chrome. Severity is conveyed by icon
- *     shape and colour, not by tinting the background.
- *
- * Per-state Figma values:
- *
- *   Layout
- *     surface     bg surface.default-primary-gray (#252528), no border
- *     padding     16px (spacing-03)
- *     gap         16px between icon and content
- *     radius      12px (radius.m)
- *     shadow      0 1px 2px rgba(16,24,40,0.05) (shadow-xs)
- *
- *   Icon (16px)
- *     error       alert-circle, color text.error (#ea4f70)
- *     warning     alert-circle, color text.subtitle-orange (#f25543)
- *     success     check, color text.success (#33a779)
- *     info        info, color text.subtitle-gray (#bfbfcf)
- *
- *   Text
- *     heading     Arimo SemiBold 14/20, color text.button-invert (#f4f4f6)
- *     body        Arimo Regular 14/20, color text.button-invert
- *     gap (heading→body)  4px (spacing-01)
- *
- *   Close button (when dismissible)
- *     36 × 36 hit target, padding 8px, radius 8px (radius.s)
- *     icon `cross` at 20px, color text.secondary-gray
- *     placed at the end of the flex row (icon · content · close)
- *
- * Templates render one per step when the flow returns errors; the
- * orchestrator surfaces flow-level errors through `errors` in the Liquid
- * context.
- */
-export declare class ZlAlert extends LitElement {
-    static styles: import("lit").CSSResult[];
-    accessor severity: "error" | "success" | "warning" | "info";
-    accessor heading: string | undefined;
-    accessor dismissible: boolean;
-    render(): import("lit").TemplateResult<1>;
-    private handleDismiss;
-}
-export declare const zlAlertManifest: AtomManifest;
-declare global {
-    interface HTMLElementTagNameMap {
-        "zl-alert": ZlAlert;
-    }
-}
-//# sourceMappingURL=zl-alert.d.ts.map

package/dist/atoms/zl-alert.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"zl-alert.d.ts","sourceRoot":"","sources":["../../src/atoms/zl-alert.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGnD,OAAO,cAAc,CAAC;AAGtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,4BAGpB;IAE2B,QAAQ,CAAC,QAAQ,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAW;IAEvF,QAAQ,CAAC,OAAO,EAAE,MAAM,GAAG,SAAS,CAAa;IAEjB,QAAQ,CAAC,WAAW,UAAS;IAEhE,MAAM,oCA6Bd;IAED,OAAO,CAAC,aAAa,CAKnB;CACH;AASD,eAAO,MAAM,eAAe,EAAE,YAMpB,CAAC;AAEX,OAAO,CAAC,MAAM,CAAC,CAAC;IACd,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/atoms/zl-button.d.ts

@@ -1,83 +0,0 @@
-import { LitElement } from "lit";
-import type { AtomManifest } from "../manifest.js";
-import "./zl-icon.js";
-/**
- * Atom: `<zl-button>` — the entire Figma button matrix in a single atom.
- *
- * Spec lineage (file `8UjCXw8yemgljmbkWGrSfE`, "Zitadel - Design System - External"):
- *   - master variant set: node `6598:292`
- *   - icon-leading instance reference: node `6598:143281` (passkey upsell)
- *
- * Variant axes (matches Figma directly):
- *   - hierarchy: primary | secondary | text
- *   - size:      medium (48 × auto) | small (40 × auto)
- *   - state:     enabled / hovered / focused / pressed / disabled
- *                (derived from interaction, not props)
- *   - slots:     `leading` icon, `trailing` icon, default for the label.
- *                When `loading` is set the trailing slot is replaced with a
- *                spinning ring (Figma shows the spinner trailing).
- *
- * Per-state Figma values (resolved from `figma.tokens.json` primitives):
- *
- *   Primary
- *     enabled        bg=#f4f4f6 (surface.default-white)     fg=#0f0f11   border=transparent
- *     hover/pressed  bg=#cfcfde (gray.600)                  fg=#0f0f11   border=1px #252528
- *     focus-visible  bg=#cfcfde + native outline ring
- *     disabled       bg=#f4f4f6                             fg=#686883 (text.disabled)
- *
- *   Secondary
- *     enabled        bg=#252528 (border.default-black)      fg=#f4f4f6 (text.button-invert)
- *     hover/pressed  bg=#484a57 (gray.200)                  fg=#f4f4f6
- *     focus-visible  bg=#252528 + native outline ring       fg=#f4f4f6
- *     disabled       bg=#252528                             fg=#686883
- *
- *   Text
- *     enabled        bg=transparent                         fg=#f4f4f6
- *     hover/pressed  bg=#484a57                             fg=#f4f4f6
- *     focus-visible  bg=#252528 + native outline ring       fg=#f4f4f6
- *     disabled       bg=transparent                         fg=#686883
- *
- *   Common
- *     padding        10px (block) / 16px (inline)            radius=8px
- *     gap            8px between icon/label/icon
- *     font           Arimo SemiBold (600)
- *                    medium: 16/24    small: 14/20
- *     icon          24px medium, 16px small
- *     focus ring    2px solid #f4f4f6, 2px offset
- *     transition    background-color / color / border-color, fast standard
- *
- * Form-associated so it can participate in the orchestrator's `<form>`
- * exactly like a native `<button>`. Setting `type="submit"` triggers
- * `form.requestSubmit()` on click; setting `type="reset"` calls
- * `form.reset()`. Otherwise the click event bubbles for SPA listeners.
- *
- * The atom always renders a real `<button>` inside the shadow root —
- * `delegatesFocus` ensures Tab lands on it and `<zl-field>`'s
- * Enter-to-submit pipe still fires the host form.
- */
-export declare class ZlButton extends LitElement {
-    static formAssociated: boolean;
-    static shadowRootOptions: ShadowRootInit;
-    static styles: import("lit").CSSResult[];
-    accessor hierarchy: "primary" | "secondary" | "text";
-    accessor size: "medium" | "small";
-    accessor type: "button" | "submit" | "reset";
-    accessor action: string | undefined;
-    accessor loading: boolean;
-    accessor disabled: boolean;
-    accessor block: boolean;
-    accessor label: string | undefined;
-    private readonly internals;
-    constructor();
-    focus(options?: FocusOptions): void;
-    private surfaceClasses;
-    render(): import("lit").TemplateResult<1>;
-    private handleClick;
-}
-export declare const zlButtonManifest: AtomManifest;
-declare global {
-    interface HTMLElementTagNameMap {
-        "zl-button": ZlButton;
-    }
-}
-//# sourceMappingURL=zl-button.d.ts.map

package/dist/atoms/zl-button.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"zl-button.d.ts","sourceRoot":"","sources":["../../src/atoms/zl-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAMhD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGnD,OAAO,cAAc,CAAC;AAEtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,MAAM,CAAC,cAAc,UAAQ;IAE7B,OAAgB,iBAAiB,EAAE,cAAc,CAG/C;IAEF,OAAgB,MAAM,4BAGpB;IAE2B,QAAQ,CAAC,SAAS,EAAE,SAAS,GAAG,WAAW,GAAG,MAAM,CAAa;IAEjE,QAAQ,CAAC,IAAI,EAAE,QAAQ,GAAG,OAAO,CAAY;IAE9D,QAAQ,CAAC,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;IAExD,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAa;IAE/B,QAAQ,CAAC,OAAO,UAAS;IAEV,QAAQ,CAAC,QAAQ,UAAS;IAE1B,QAAQ,CAAC,KAAK,UAAS;IAEvD,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAa;IAE3D,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAmB;IAE7C,cAGC;IAEQ,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI,CAE3C;IAED,OAAO,CAAC,cAAc;IAYb,MAAM,oCAyBd;IAED,OAAO,CAAC,WAAW,CAuBjB;CACH;AAED,eAAO,MAAM,gBAAgB,EAAE,YAOrB,CAAC;AAEX,OAAO,CAAC,MAAM,CAAC,CAAC;IACd,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/atoms/zl-card.d.ts

@@ -1,46 +0,0 @@
-import { LitElement } from "lit";
-import type { AtomManifest } from "../manifest.js";
-/**
- * Atom: `<zl-card>` — the auth-card surface used by every flow screen.
- *
- * Spec lineage (file `xkvBjkOJ8ENuHdTGZHXezK`):
- *   - sign-in: node `6593:141985` (combined sign-in card, 32px gap)
- *   - sign-up: node `6593:141743` / frame `6593:141741` (title only, 32px gap)
- *   - passkey-upsell: node `6594:632` (288h, heading+subtitle, 24px gap)
- *   - signed-in: node `6596:132846` (272h, heading+subtitle, 24px gap)
- *
- * Per-state Figma values (constant across all four screens unless noted):
- *
- *   width       384px fixed (container.auth-card token; xs collapses
- *               to full-width via the surrounding page-shell)
- *   background  transparent — the page (surface.default-black) shows
- *               through; the card is *not* an elevated surface, only
- *               outlined
- *   border      1px solid surface.default-primary-gray (#252528)
- *   radius      16px (radius.l)
- *   padding     32px all sides (spacing-05)
- *   gap         32px between header / body / footer slots (sign-in,
- *               sign-up). Passkey-upsell + signed-in tighten to 24px
- *               (spacing-04) via `compact` because their heading group
- *               carries a subtitle.
- *
- *   Internal slot gaps:
- *     header    8px (spacing-02) — heading → subtitle stack
- *     body      16px (spacing-03) — fields/buttons stack (matches
- *               Figma "Field+CTAs" gap)
- *     footer    8px (spacing-02) — auxiliary links
- */
-export declare class ZlCard extends LitElement {
-    static styles: import("lit").CSSResult[];
-    accessor compact: boolean;
-    render(): import("lit").TemplateResult<1>;
-    /** Slotted nodes are always light-DOM children of the host in our templates. */
-    private lightDomSlotFilled;
-}
-export declare const zlCardManifest: AtomManifest;
-declare global {
-    interface HTMLElementTagNameMap {
-        "zl-card": ZlCard;
-    }
-}
-//# sourceMappingURL=zl-card.d.ts.map

package/dist/atoms/zl-card.d.ts.map

@@ -1 +0,0 @@
-{"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,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

@@ -1,80 +0,0 @@
-import type { CreateFlow201StepFieldsType } from "@zitadel/api/generated/model";
-import { LitElement, type PropertyValues } from "lit";
-import type { AtomManifest } from "../manifest.js";
-import "./zl-icon.js";
-/**
- * Alias of the orval-generated wire enum for field types so the atom's
- * accepted `type` values track the API contract exactly.
- */
-export type ZlFieldType = CreateFlow201StepFieldsType;
-/**
- * Atom: `<zl-field>` — labelled input bound to a step `field`. Visual
- * spec lineage:
- *   - design-system master variant set: node `4390:1404` (file
- *     `8UjCXw8yemgljmbkWGrSfE`) — Enabled / Hovered / Focused / Filled /
- *     Disabled / Error / Success / Password forgot
- *
- * Per-state Figma values (master `4390:1404`):
- *
- *   Layout
- *     root         flex-column, gap=8px (spacing-02)
- *     label row    optional "Forgot password?" link (#bba5e4, 14/20)
- *     input-wrap   40px, padding 8/16, trailing icon at right 15px
- *     trailing     cross (clear) | alert-circle (error) | check (success)
- *
- * Form participation: `<zl-field>` is a form-associated custom element.
- */
-export declare class ZlField extends LitElement {
-    static formAssociated: boolean;
-    static shadowRootOptions: ShadowRootInit;
-    static styles: import("lit").CSSResult[];
-    /**
-     * Field name — used as the key in form submission and in `zl-input` event
-     * detail. For form-associated custom elements the browser owns a native
-     * `name` property; using `@property()` would create a conflicting accessor
-     * that loses sync with the DOM attribute. We therefore manage it manually.
-     */
-    get name(): string;
-    set name(value: string);
-    accessor label: string;
-    accessor type: ZlFieldType;
-    accessor value: string;
-    accessor placeholder: string;
-    accessor autocomplete: string | undefined;
-    accessor pattern: string | undefined;
-    accessor error: string;
-    accessor success: string;
-    accessor forgotPasswordHref: string | undefined;
-    accessor forgotPasswordLabel: string;
-    accessor trailingIcon: boolean;
-    accessor required: boolean;
-    accessor disabled: boolean;
-    accessor invalid: boolean;
-    private accessor hasHelp;
-    private accessor hasSuffixSlot;
-    private readonly inputId;
-    private readonly internals;
-    constructor();
-    connectedCallback(): void;
-    willUpdate(changed: PropertyValues<this>): void;
-    formResetCallback(): void;
-    formStateRestoreCallback(state: string | null): void;
-    focus(options?: FocusOptions): void;
-    render(): import("lit").TemplateResult<1>;
-    private renderLabelRow;
-    private renderTrailingIcon;
-    private syncFormState;
-    private handleHelpSlotChange;
-    private handleSuffixSlotChange;
-    private handleClear;
-    private handleInput;
-    private handleChange;
-    private handleKeyDown;
-}
-export declare const zlFieldManifest: AtomManifest;
-declare global {
-    interface HTMLElementTagNameMap {
-        "zl-field": ZlField;
-    }
-}
-//# sourceMappingURL=zl-field.d.ts.map

package/dist/atoms/zl-field.d.ts.map

@@ -1 +0,0 @@
-{"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;AAOrE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGnD,OAAO,cAAc,CAAC;AAGtB;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,2BAA2B,CAAC;AAEtD;;;;;;;;;;;;;;;;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;IACe,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;IAEhD,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,oCA2Ed;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,CAWjB;IAEF,OAAO,CAAC,WAAW,CAUjB;IAEF,OAAO,CAAC,YAAY,CAIlB;IAEF,OAAO,CAAC,aAAa,CAenB;CACH;AAED,eAAO,MAAM,eAAe,EAAE,YAmCpB,CAAC;AAEX,OAAO,CAAC,MAAM,CAAC,CAAC;IACd,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/atoms/zl-icon.d.ts

@@ -1,48 +0,0 @@
-import { LitElement } from "lit";
-import type { AtomManifest } from "../manifest.js";
-/**
- * Atom: `<zl-icon>` — renders a curated glyph from the Lucide icon library.
- *
- * The Figma design system (file `8UjCXw8yemgljmbkWGrSfE`, Icons set
- * `4103:10466`, sizes `16 | 24`) is explicitly built on Lucide. Rather than redrawing every glyph as an
- * inline `<path>` (which inevitably drifts), we curate the auth surface's
- * subset by importing each canonical Lucide node and exposing a stable
- * kebab-case `name` API. To add a glyph: import it from `lucide`, add an
- * entry to {@link ICON_NODES}, and extend the {@link IconName} union.
- *
- * Colour: by default the icon inherits `currentColor`. Set `tone` to one
- * of the semantic states to pick up `--zl-color-icon-{error|success|disabled}`
- * directly. The "palette" colour tokens (`--zl-color-icon-default-*`) are
- * not exposed as `tone` values; consumers wanting those set `color:` on
- * the host.
- *
- * Accessibility: glyphs with an entry in {@link DEFAULT_LABELS} expose an
- * `aria-label` so they're meaningful when used standalone. When the icon
- * is purely decorative (e.g. sitting next to a visible button label),
- * pass `decorative` to force `aria-hidden="true"` and `role="presentation"`,
- * which prevents the icon's name from leaking into the parent's
- * accessible name (e.g. avoids "Loading Loading" on a loading button).
- */
-export declare class ZlIcon extends LitElement {
-    static styles: import("lit").CSSResult[];
-    accessor name: IconName;
-    accessor size: IconSize;
-    accessor tone: IconTone;
-    accessor spin: boolean;
-    accessor decorative: boolean;
-    accessor label: string | undefined;
-    render(): import("lit").TemplateResult<1>;
-}
-/** Public, kebab-case glyph IDs. Add a new one by extending both this union and {@link ICON_NODES}. */
-export type IconName = "plus" | "arrow-right" | "arrow-left" | "spinner" | "check" | "cross" | "warning" | "alert-circle" | "info" | "passkey" | "user" | "eye" | "eye-off";
-/** Auth-surface glyph list — keep playgrounds and parity tests in sync. */
-export declare const SHIPPED_ICON_NAMES: readonly ["plus", "arrow-right", "arrow-left", "spinner", "check", "cross", "warning", "alert-circle", "info", "passkey", "user", "eye", "eye-off"];
-export type IconSize = "16" | "24";
-export type IconTone = "default" | "error" | "success" | "disabled";
-export declare const zlIconManifest: AtomManifest;
-declare global {
-    interface HTMLElementTagNameMap {
-        "zl-icon": ZlIcon;
-    }
-}
-//# sourceMappingURL=zl-icon.d.ts.map

package/dist/atoms/zl-icon.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"zl-icon.d.ts","sourceRoot":"","sources":["../../src/atoms/zl-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAuBhD,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,oCA0Bd;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"}

package/dist/atoms/zl-page-shell.d.ts

@@ -1,42 +0,0 @@
-import { LitElement } from "lit";
-import type { AtomManifest } from "../manifest.js";
-/**
- * Atom: `<zl-page-shell>` — the full-bleed auth-page chrome the
- * orchestrator injects around every flow template. Responsible for the
- * dark background, vertical centring, responsive padding, and footer
- * attribution slot.
- *
- * Spec lineage (file `xkvBjkOJ8ENuHdTGZHXezK`):
- *   - 2xl frames (1536 × 960), e.g. sign-up `6593:141741`, passkey
- *     `6594:630`, signed-in `6596:132844`. The outer wrapper uses
- *     `py-[52px]` (vertical padding) with `p-[16px]` (spacing-03) on
- *     the inner Form container, giving 52px / 16px at 2xl.
- *
- * Per-state Figma values:
- *
- *   background  surface.default-black (#0f0f11)
- *   color       text.primary-white (#f4f4f6) inherited
- *   min-height  100vh — anchors footer to the viewport bottom even on
- *               short cards
- *   padding @md+   padding-block 52px, padding-inline 16px (matches
- *               Figma 2xl wrapper). 52px isn't a token; use raw value.
- *   padding @xs (< 48rem)
- *               padding-block 32px (spacing-05), padding-inline 16px
- *               (spacing-03) — tighter so the card breathes on
- *               narrow phones.
- *   gap         24px (spacing-04) between header / main / footer slots
- *   footer      min-height 1.5rem to reserve room for the attribution
- *               pill even when the slot is empty (prevents jitter).
- */
-export declare class ZlPageShell extends LitElement {
-    static styles: import("lit").CSSResult[];
-    render(): import("lit").TemplateResult<1>;
-    private lightDomSlotFilled;
-}
-export declare const zlPageShellManifest: AtomManifest;
-declare global {
-    interface HTMLElementTagNameMap {
-        "zl-page-shell": ZlPageShell;
-    }
-}
-//# sourceMappingURL=zl-page-shell.d.ts.map

package/dist/atoms/zl-page-shell.d.ts.map

@@ -1 +0,0 @@
-{"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,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"}