@zeus-js/output-wc 0.1.0-beta.3 → 0.1.0-beta.5

package/dist/capabilities.cjs.js

@@ -1,5 +1,5 @@
 /**
-* output-wc v0.1.0-beta.3
+* output-wc v0.1.0-beta.5
 * (c) 2026 baicie
 * Released under the MIT License.
 **/
@@ -9,7 +9,7 @@ Object.defineProperties(exports, {
 });
 const ZEUS_OUTPUT_WC_CAPABILITIES = {
 	packageName: "@zeus-js/output-wc",
-	version: "0.1.0-beta.3",
+	version: "0.1.0-beta.5",
 	output: {
 		webComponent: true,
 		customElements: true,

package/dist/capabilities.cjs.prod.js

@@ -1,5 +1,5 @@
 /**
-* output-wc v0.1.0-beta.3
+* output-wc v0.1.0-beta.5
 * (c) 2026 baicie
 * Released under the MIT License.
 **/
@@ -9,7 +9,7 @@ Object.defineProperties(exports, {
 });
 const ZEUS_OUTPUT_WC_CAPABILITIES = {
 	packageName: "@zeus-js/output-wc",
-	version: "0.1.0-beta.3",
+	version: "0.1.0-beta.5",
 	output: {
 		webComponent: true,
 		customElements: true,

package/dist/capabilities.js

@@ -1,6 +1,6 @@
 const ZEUS_OUTPUT_WC_CAPABILITIES = {
 	packageName: "@zeus-js/output-wc",
-	version: "0.1.0-beta.3",
+	version: "0.1.0-beta.5",
 	output: {
 		webComponent: true,
 		customElements: true,

package/dist/capabilities.prod.js

@@ -1,6 +1,6 @@
 const ZEUS_OUTPUT_WC_CAPABILITIES = {
 	packageName: "@zeus-js/output-wc",
-	version: "0.1.0-beta.3",
+	version: "0.1.0-beta.5",
 	output: {
 		webComponent: true,
 		customElements: true,

package/dist/output-wc.cjs.js

@@ -1,5 +1,5 @@
 /**
-* output-wc v0.1.0-beta.3
+* output-wc v0.1.0-beta.5
 * (c) 2026 baicie
 * Released under the MIT License.
 **/
@@ -54,7 +54,10 @@ function generateCustomElementsJson(options) {
 					events: generateEvents(component),
 					slots: generateSlots(component),
 					cssParts: component.cssParts.map((name) => ({ name })),
-					cssProperties: component.cssVars.map((name) => ({ name }))
+					cssProperties: getCssVars(component).map((variable) => ({
+						name: variable.name,
+						description: variable.description
+					}))
 				}],
 				exports: [{
 					kind: "js",
@@ -84,7 +87,8 @@ function generateAttributes(component) {
 	return result;
 }
 function generateMembers(component) {
-	return Object.entries(component.props).map(([name, prop]) => {
+	var _component$methods;
+	const fields = Object.entries(component.props).map(([name, prop]) => {
 		return {
 			kind: "field",
 			name,
@@ -93,18 +97,28 @@ function generateMembers(component) {
 			default: prop.default === void 0 ? void 0 : JSON.stringify(prop.default)
 		};
 	});
+	const methods = Object.keys((_component$methods = component.methods) !== null && _component$methods !== void 0 ? _component$methods : {}).map((name) => {
+		return {
+			kind: "method",
+			name
+		};
+	});
+	return [...fields, ...methods];
 }
 function generateEvents(component) {
-	return Object.entries(component.events).map(([name, event]) => {
+	return Object.entries(component.events).map(([key, event]) => {
+		var _event$name, _event$key;
 		return {
-			name,
+			name: (_event$name = event.name) !== null && _event$name !== void 0 ? _event$name : toKebabCase$1((_event$key = event.key) !== null && _event$key !== void 0 ? _event$key : key),
 			description: event.description,
 			type: { text: event.detail ? `CustomEvent<${formatDetailType(event.detail)}>` : "CustomEvent" }
 		};
 	});
 }
 function generateSlots(component) {
-	return Object.entries(component.slots).map(([name, slot]) => {
+	return Object.entries(component.slots).map(([key, slot]) => {
+		var _slot$name;
+		const name = (_slot$name = slot.name) !== null && _slot$name !== void 0 ? _slot$name : key;
 		return {
 			name: name === "default" ? "" : name,
 			description: slot.description
@@ -114,6 +128,7 @@ function generateSlots(component) {
 function getAttributeName(propName, prop) {
 	if (prop.attr === false) return false;
 	if (typeof prop.attr === "string") return prop.attr;
+	if (!isAttributeBackedType$1(prop.type)) return false;
 	return propName.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
 }
 function formatPropType(prop) {
@@ -125,15 +140,25 @@ function formatPropType(prop) {
 		case "boolean": return "boolean";
 		case "array": return "unknown[]";
 		case "object": return "Record<string, unknown>";
+		case "function": return "Function";
 		default: return "unknown";
 	}
 }
+function isAttributeBackedType$1(type) {
+	return type === "string" || type === "number" || type === "boolean";
+}
 function formatDetailType(detail) {
 	return `{ ${Object.entries(detail).map(([name, type]) => `${name}: ${type}`).join("; ")} }`;
 }
 function normalizeModulePath(value) {
 	return value.replace(/\\/g, "/");
 }
+function getCssVars(component) {
+	return Object.values(component.cssVars);
+}
+function toKebabCase$1(value) {
+	return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+}
 //#endregion
 //#region packages/web-c/output-wc/src/imports.ts
 function toAbsoluteImportPath(root, source) {
@@ -186,7 +211,11 @@ function generateLazyEntry(options) {
 		"",
 		`export function createComponent(hostRef) {`,
 		`  let mounted;`,
-		`  const mountState = {};`,
+		`  const mountState = {`,
+		`    attributeProps: hostRef.attributeProps,`,
+		`    internals: hostRef.internals,`,
+		`    reflectingAttrs: hostRef.reflectingAttrs,`,
+		`  };`,
 		"",
 		`  return {`,
 		`    connected() {`,
@@ -208,6 +237,22 @@ function generateLazyEntry(options) {
 		`    propertyChanged(name, oldValue, newValue) {`,
 		`      mounted?.propertyChanged(name, oldValue, newValue);`,
 		`    },`,
+		"",
+		`    formAssociated(form) {`,
+		`      mounted?.formAssociated(form);`,
+		`    },`,
+		"",
+		`    formDisabled(disabled) {`,
+		`      mounted?.formDisabled(disabled);`,
+		`    },`,
+		"",
+		`    formReset() {`,
+		`      mounted?.formReset();`,
+		`    },`,
+		"",
+		`    formStateRestore(state, mode) {`,
+		`      mounted?.formStateRestore(state, mode);`,
+		`    },`,
 		`  };`,
 		`}`,
 		"",
@@ -229,15 +274,19 @@ function generateLazyManifest(options) {
 	const { components, getEntryFileName } = options;
 	return `export const components = [
 ${components.map((component) => {
-		var _component$runtimePro, _component$meta$shado, _component$meta;
+		var _component$runtimePro, _component$methods, _component$meta$shado, _component$meta, _component$meta$formA, _component$meta2;
 		const entryFile = getEntryFileName(component.tag).replace(/\\/g, "/");
 		const props = generatePropsArray((_component$runtimePro = component.runtimeProps) !== null && _component$runtimePro !== void 0 ? _component$runtimePro : component.props);
+		const methods = Object.keys((_component$methods = component.methods) !== null && _component$methods !== void 0 ? _component$methods : {});
 		const importPath = entryFile.startsWith(".") ? JSON.stringify(entryFile) : JSON.stringify(`./${entryFile}`);
+		const methodLine = methods.length ? `    methods: ${JSON.stringify(methods)},\n` : "";
 		return `  {
     tagName: ${JSON.stringify(component.tag)},
     shadow: ${(_component$meta$shado = (_component$meta = component.meta) === null || _component$meta === void 0 ? void 0 : _component$meta.shadow) !== null && _component$meta$shado !== void 0 ? _component$meta$shado : false},
+    formAssociated: ${(_component$meta$formA = (_component$meta2 = component.meta) === null || _component$meta2 === void 0 ? void 0 : _component$meta2.formAssociated) !== null && _component$meta$formA !== void 0 ? _component$meta$formA : false},
     load: () => import(${importPath}),
     props: ${props},
+${methodLine}
   }`;
 	}).join(",\n")}
 ];
@@ -248,14 +297,16 @@ function generatePropsArray(props) {
 	if (entries.length === 0) return "[]";
 	return `[\n${entries.map(([name, prop]) => {
 		const parts = [`name: ${JSON.stringify(name)}`];
-		if (!isAttributeBackedType(prop.type) || prop.attr === false) parts.push("attrName: false");
+		if (!isAttributeBackedType(prop.type) && !prop.deserialize || prop.attr === false) parts.push("attrName: false");
 		else {
 			var _prop$attr;
 			const attrName = (_prop$attr = prop.attr) !== null && _prop$attr !== void 0 ? _prop$attr : toKebabCase(name);
 			if (attrName !== toKebabCase(name)) parts.push(`attrName: ${JSON.stringify(attrName)}`);
 		}
 		parts.push(`type: ${JSON.stringify(prop.type)}`);
-		if (prop.reflect && isAttributeBackedType(prop.type)) parts.push("reflect: true");
+		if (prop.reflect && (isAttributeBackedType(prop.type) || Boolean(prop.serialize))) parts.push("reflect: true");
+		if (prop.serialize) parts.push("serialize: true");
+		if (prop.deserialize) parts.push("deserialize: true");
 		return `      { ${parts.join(", ")} }`;
 	}).join(",\n")}\n    ]`;
 }
@@ -271,22 +322,60 @@ function generateLoader() {
 	return `import { bootstrapLazy } from "@zeus-js/web-c-runtime";
 import { components } from "./components.manifest.js";
 
-let defined = false;
+const componentsByTagName = new Map(
+  components.map(component => [component.tagName, component]),
+);
 
-export function defineCustomElements() {
-  if (defined) {
+const definedTagsByRegistry = new WeakMap();
+
+function resolveRegistry(options) {
+  return options.registry ??
+    (typeof customElements === "undefined" ? undefined : customElements);
+}
+
+function getDefinedTags(registry) {
+  let definedTags = definedTagsByRegistry.get(registry);
+
+  if (!definedTags) {
+    definedTags = new Set();
+    definedTagsByRegistry.set(registry, definedTags);
+  }
+
+  return definedTags;
+}
+
+export function defineCustomElement(tagName, options = {}) {
+  const registry = resolveRegistry(options);
+
+  if (!registry) {
     return;
   }
 
-  if (typeof customElements === "undefined") {
+  const component = componentsByTagName.get(tagName);
+
+  if (!component) {
+    throw new Error(\`[zeus:web-c] Unknown custom element: <\${tagName}>.\`);
+  }
+
+  const definedTags = getDefinedTags(registry);
+
+  if (definedTags.has(tagName) || registry.get(tagName)) {
+    definedTags.add(tagName);
     return;
   }
 
-  bootstrapLazy(components);
+  bootstrapLazy([component], { registry });
 
-  defined = true;
+  definedTags.add(tagName);
 }
 
+export function defineCustomElements(options = {}) {
+  for (const component of components) {
+    defineCustomElement(component.tagName, options);
+  }
+}
+
+export const defineLazyElement = defineCustomElement;
 export const defineLazyElements = defineCustomElements;
 `;
 }
@@ -300,7 +389,9 @@ export {};
 }
 function generateLazyIndex() {
 	return `export {
+  defineCustomElement,
   defineCustomElements,
+  defineLazyElement,
   defineLazyElements,
 } from "./loader.js";
 `;
@@ -319,8 +410,8 @@ function wc(options = {}) {
 		outDir: (_options$outDir = options.outDir) !== null && _options$outDir !== void 0 ? _options$outDir : "wc",
 		stripPrefix: (_options$stripPrefix = options.stripPrefix) !== null && _options$stripPrefix !== void 0 ? _options$stripPrefix : false,
 		fileName: options.fileName,
-		manifestFile: registerMode === "lazy" ? false : (_options$manifestFile = options.manifestFile) !== null && _options$manifestFile !== void 0 ? _options$manifestFile : "zeus.components.json",
-		customElementsFile: registerMode === "lazy" ? false : (_options$customElemen = options.customElementsFile) !== null && _options$customElemen !== void 0 ? _options$customElemen : "custom-elements.json",
+		manifestFile: (_options$manifestFile = options.manifestFile) !== null && _options$manifestFile !== void 0 ? _options$manifestFile : "zeus.components.json",
+		customElementsFile: (_options$customElemen = options.customElementsFile) !== null && _options$customElemen !== void 0 ? _options$customElemen : "custom-elements.json",
 		dts: (_options$dts = options.dts) !== null && _options$dts !== void 0 ? _options$dts : true,
 		jsxDts: (_options$jsxDts = options.jsxDts) !== null && _options$jsxDts !== void 0 ? _options$jsxDts : true,
 		index: (_options$index = options.index) !== null && _options$index !== void 0 ? _options$index : true,
@@ -349,15 +440,15 @@ function wc(options = {}) {
 				const runtimeProps = (_component$runtimePro2 = component.runtimeProps) !== null && _component$runtimePro2 !== void 0 ? _component$runtimePro2 : {};
 				for (const [name, prop] of Object.entries(runtimeProps)) {
 					if (isAttributeBackedRuntimeProp(prop.type)) continue;
-					if (prop.attr !== void 0 && prop.attr !== false) ctx.error([
+					if (prop.attr !== void 0 && prop.attr !== false && !prop.deserialize) ctx.error([
 						`[zeus-output-wc] <${component.tag}> prop "${name}" cannot use attr:${JSON.stringify(prop.attr)} with register:"lazy".`,
-						"Lazy Web-C only supports attributes for string, number and boolean props.",
-						"Use attr:false and pass object/array/function values as properties instead."
+						"Non-primitive lazy attributes require a custom deserialize function.",
+						"Add deserialize or use attr:false and pass the value as a property."
 					].join("\n"));
-					if (prop.reflect) ctx.error([
+					if (prop.reflect && !prop.serialize) ctx.error([
 						`[zeus-output-wc] <${component.tag}> prop "${name}" cannot use reflect:true with register:"lazy".`,
-						"Lazy Web-C only reflects string, number and boolean props.",
-						"Use a string/number/boolean prop or remove reflect:true."
+						"Non-primitive lazy reflection requires a custom serialize function.",
+						"Add serialize or remove reflect:true."
 					].join("\n"));
 				}
 			}
@@ -404,7 +495,7 @@ function wc(options = {}) {
 			}
 			for (const component of ctx.manifest.components) if (isLazy) {
 				/**
-				* Compatibility module consumed by Vue / React wrappers.
+				* Registration bridge module consumed by Vue / React wrappers.
 				*
 				* It only registers lazy Proxy Elements.
 				* It does not import the real component implementation.
@@ -489,17 +580,18 @@ export {};
 					fileName: joinPath("types/jsx.d.ts"),
 					source: (0, _zeus_js_component_dts.generateWCJsxDts)(ctx.manifest)
 				});
-			} else if (normalized.manifestFile) files.push({
+			}
+			if (normalized.manifestFile) files.push({
 				type: "asset",
 				fileName: normalized.manifestFile,
 				source: generateZeusComponentsManifest(ctx.manifest)
 			});
-			if (!isLazy && normalized.customElementsFile) files.push({
+			if (normalized.customElementsFile) files.push({
 				type: "asset",
 				fileName: normalized.customElementsFile,
 				source: generateCustomElementsJson({
 					manifest: ctx.manifest,
-					getModulePath: (component) => joinPath(getFileName(component.tag))
+					getModulePath: (component) => isLazy ? joinPath(getLazyEntryFileName(normalized.entryFileName, component.tag)) : joinPath(getFileName(component.tag))
 				})
 			});
 			if (!isLazy && (dts || jsxDts)) {

package/dist/output-wc.cjs.prod.js

@@ -1,5 +1,5 @@
 /**
-* output-wc v0.1.0-beta.3
+* output-wc v0.1.0-beta.5
 * (c) 2026 baicie
 * Released under the MIT License.
 **/
@@ -54,7 +54,10 @@ function generateCustomElementsJson(options) {
 					events: generateEvents(component),
 					slots: generateSlots(component),
 					cssParts: component.cssParts.map((name) => ({ name })),
-					cssProperties: component.cssVars.map((name) => ({ name }))
+					cssProperties: getCssVars(component).map((variable) => ({
+						name: variable.name,
+						description: variable.description
+					}))
 				}],
 				exports: [{
 					kind: "js",
@@ -84,7 +87,8 @@ function generateAttributes(component) {
 	return result;
 }
 function generateMembers(component) {
-	return Object.entries(component.props).map(([name, prop]) => {
+	var _component$methods;
+	const fields = Object.entries(component.props).map(([name, prop]) => {
 		return {
 			kind: "field",
 			name,
@@ -93,18 +97,28 @@ function generateMembers(component) {
 			default: prop.default === void 0 ? void 0 : JSON.stringify(prop.default)
 		};
 	});
+	const methods = Object.keys((_component$methods = component.methods) !== null && _component$methods !== void 0 ? _component$methods : {}).map((name) => {
+		return {
+			kind: "method",
+			name
+		};
+	});
+	return [...fields, ...methods];
 }
 function generateEvents(component) {
-	return Object.entries(component.events).map(([name, event]) => {
+	return Object.entries(component.events).map(([key, event]) => {
+		var _event$name, _event$key;
 		return {
-			name,
+			name: (_event$name = event.name) !== null && _event$name !== void 0 ? _event$name : toKebabCase$1((_event$key = event.key) !== null && _event$key !== void 0 ? _event$key : key),
 			description: event.description,
 			type: { text: event.detail ? `CustomEvent<${formatDetailType(event.detail)}>` : "CustomEvent" }
 		};
 	});
 }
 function generateSlots(component) {
-	return Object.entries(component.slots).map(([name, slot]) => {
+	return Object.entries(component.slots).map(([key, slot]) => {
+		var _slot$name;
+		const name = (_slot$name = slot.name) !== null && _slot$name !== void 0 ? _slot$name : key;
 		return {
 			name: name === "default" ? "" : name,
 			description: slot.description
@@ -114,6 +128,7 @@ function generateSlots(component) {
 function getAttributeName(propName, prop) {
 	if (prop.attr === false) return false;
 	if (typeof prop.attr === "string") return prop.attr;
+	if (!isAttributeBackedType$1(prop.type)) return false;
 	return propName.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
 }
 function formatPropType(prop) {
@@ -125,15 +140,25 @@ function formatPropType(prop) {
 		case "boolean": return "boolean";
 		case "array": return "unknown[]";
 		case "object": return "Record<string, unknown>";
+		case "function": return "Function";
 		default: return "unknown";
 	}
 }
+function isAttributeBackedType$1(type) {
+	return type === "string" || type === "number" || type === "boolean";
+}
 function formatDetailType(detail) {
 	return `{ ${Object.entries(detail).map(([name, type]) => `${name}: ${type}`).join("; ")} }`;
 }
 function normalizeModulePath(value) {
 	return value.replace(/\\/g, "/");
 }
+function getCssVars(component) {
+	return Object.values(component.cssVars);
+}
+function toKebabCase$1(value) {
+	return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+}
 //#endregion
 //#region packages/web-c/output-wc/src/imports.ts
 function toAbsoluteImportPath(root, source) {
@@ -186,7 +211,11 @@ function generateLazyEntry(options) {
 		"",
 		`export function createComponent(hostRef) {`,
 		`  let mounted;`,
-		`  const mountState = {};`,
+		`  const mountState = {`,
+		`    attributeProps: hostRef.attributeProps,`,
+		`    internals: hostRef.internals,`,
+		`    reflectingAttrs: hostRef.reflectingAttrs,`,
+		`  };`,
 		"",
 		`  return {`,
 		`    connected() {`,
@@ -208,6 +237,22 @@ function generateLazyEntry(options) {
 		`    propertyChanged(name, oldValue, newValue) {`,
 		`      mounted?.propertyChanged(name, oldValue, newValue);`,
 		`    },`,
+		"",
+		`    formAssociated(form) {`,
+		`      mounted?.formAssociated(form);`,
+		`    },`,
+		"",
+		`    formDisabled(disabled) {`,
+		`      mounted?.formDisabled(disabled);`,
+		`    },`,
+		"",
+		`    formReset() {`,
+		`      mounted?.formReset();`,
+		`    },`,
+		"",
+		`    formStateRestore(state, mode) {`,
+		`      mounted?.formStateRestore(state, mode);`,
+		`    },`,
 		`  };`,
 		`}`,
 		"",
@@ -229,15 +274,19 @@ function generateLazyManifest(options) {
 	const { components, getEntryFileName } = options;
 	return `export const components = [
 ${components.map((component) => {
-		var _component$runtimePro, _component$meta$shado, _component$meta;
+		var _component$runtimePro, _component$methods, _component$meta$shado, _component$meta, _component$meta$formA, _component$meta2;
 		const entryFile = getEntryFileName(component.tag).replace(/\\/g, "/");
 		const props = generatePropsArray((_component$runtimePro = component.runtimeProps) !== null && _component$runtimePro !== void 0 ? _component$runtimePro : component.props);
+		const methods = Object.keys((_component$methods = component.methods) !== null && _component$methods !== void 0 ? _component$methods : {});
 		const importPath = entryFile.startsWith(".") ? JSON.stringify(entryFile) : JSON.stringify(`./${entryFile}`);
+		const methodLine = methods.length ? `    methods: ${JSON.stringify(methods)},\n` : "";
 		return `  {
     tagName: ${JSON.stringify(component.tag)},
     shadow: ${(_component$meta$shado = (_component$meta = component.meta) === null || _component$meta === void 0 ? void 0 : _component$meta.shadow) !== null && _component$meta$shado !== void 0 ? _component$meta$shado : false},
+    formAssociated: ${(_component$meta$formA = (_component$meta2 = component.meta) === null || _component$meta2 === void 0 ? void 0 : _component$meta2.formAssociated) !== null && _component$meta$formA !== void 0 ? _component$meta$formA : false},
     load: () => import(${importPath}),
     props: ${props},
+${methodLine}
   }`;
 	}).join(",\n")}
 ];
@@ -248,14 +297,16 @@ function generatePropsArray(props) {
 	if (entries.length === 0) return "[]";
 	return `[\n${entries.map(([name, prop]) => {
 		const parts = [`name: ${JSON.stringify(name)}`];
-		if (!isAttributeBackedType(prop.type) || prop.attr === false) parts.push("attrName: false");
+		if (!isAttributeBackedType(prop.type) && !prop.deserialize || prop.attr === false) parts.push("attrName: false");
 		else {
 			var _prop$attr;
 			const attrName = (_prop$attr = prop.attr) !== null && _prop$attr !== void 0 ? _prop$attr : toKebabCase(name);
 			if (attrName !== toKebabCase(name)) parts.push(`attrName: ${JSON.stringify(attrName)}`);
 		}
 		parts.push(`type: ${JSON.stringify(prop.type)}`);
-		if (prop.reflect && isAttributeBackedType(prop.type)) parts.push("reflect: true");
+		if (prop.reflect && (isAttributeBackedType(prop.type) || Boolean(prop.serialize))) parts.push("reflect: true");
+		if (prop.serialize) parts.push("serialize: true");
+		if (prop.deserialize) parts.push("deserialize: true");
 		return `      { ${parts.join(", ")} }`;
 	}).join(",\n")}\n    ]`;
 }
@@ -271,22 +322,60 @@ function generateLoader() {
 	return `import { bootstrapLazy } from "@zeus-js/web-c-runtime";
 import { components } from "./components.manifest.js";
 
-let defined = false;
+const componentsByTagName = new Map(
+  components.map(component => [component.tagName, component]),
+);
 
-export function defineCustomElements() {
-  if (defined) {
+const definedTagsByRegistry = new WeakMap();
+
+function resolveRegistry(options) {
+  return options.registry ??
+    (typeof customElements === "undefined" ? undefined : customElements);
+}
+
+function getDefinedTags(registry) {
+  let definedTags = definedTagsByRegistry.get(registry);
+
+  if (!definedTags) {
+    definedTags = new Set();
+    definedTagsByRegistry.set(registry, definedTags);
+  }
+
+  return definedTags;
+}
+
+export function defineCustomElement(tagName, options = {}) {
+  const registry = resolveRegistry(options);
+
+  if (!registry) {
     return;
   }
 
-  if (typeof customElements === "undefined") {
+  const component = componentsByTagName.get(tagName);
+
+  if (!component) {
+    throw new Error(\`[zeus:web-c] Unknown custom element: <\${tagName}>.\`);
+  }
+
+  const definedTags = getDefinedTags(registry);
+
+  if (definedTags.has(tagName) || registry.get(tagName)) {
+    definedTags.add(tagName);
     return;
   }
 
-  bootstrapLazy(components);
+  bootstrapLazy([component], { registry });
 
-  defined = true;
+  definedTags.add(tagName);
 }
 
+export function defineCustomElements(options = {}) {
+  for (const component of components) {
+    defineCustomElement(component.tagName, options);
+  }
+}
+
+export const defineLazyElement = defineCustomElement;
 export const defineLazyElements = defineCustomElements;
 `;
 }
@@ -300,7 +389,9 @@ export {};
 }
 function generateLazyIndex() {
 	return `export {
+  defineCustomElement,
   defineCustomElements,
+  defineLazyElement,
   defineLazyElements,
 } from "./loader.js";
 `;
@@ -319,8 +410,8 @@ function wc(options = {}) {
 		outDir: (_options$outDir = options.outDir) !== null && _options$outDir !== void 0 ? _options$outDir : "wc",
 		stripPrefix: (_options$stripPrefix = options.stripPrefix) !== null && _options$stripPrefix !== void 0 ? _options$stripPrefix : false,
 		fileName: options.fileName,
-		manifestFile: registerMode === "lazy" ? false : (_options$manifestFile = options.manifestFile) !== null && _options$manifestFile !== void 0 ? _options$manifestFile : "zeus.components.json",
-		customElementsFile: registerMode === "lazy" ? false : (_options$customElemen = options.customElementsFile) !== null && _options$customElemen !== void 0 ? _options$customElemen : "custom-elements.json",
+		manifestFile: (_options$manifestFile = options.manifestFile) !== null && _options$manifestFile !== void 0 ? _options$manifestFile : "zeus.components.json",
+		customElementsFile: (_options$customElemen = options.customElementsFile) !== null && _options$customElemen !== void 0 ? _options$customElemen : "custom-elements.json",
 		dts: (_options$dts = options.dts) !== null && _options$dts !== void 0 ? _options$dts : true,
 		jsxDts: (_options$jsxDts = options.jsxDts) !== null && _options$jsxDts !== void 0 ? _options$jsxDts : true,
 		index: (_options$index = options.index) !== null && _options$index !== void 0 ? _options$index : true,
@@ -349,15 +440,15 @@ function wc(options = {}) {
 				const runtimeProps = (_component$runtimePro2 = component.runtimeProps) !== null && _component$runtimePro2 !== void 0 ? _component$runtimePro2 : {};
 				for (const [name, prop] of Object.entries(runtimeProps)) {
 					if (isAttributeBackedRuntimeProp(prop.type)) continue;
-					if (prop.attr !== void 0 && prop.attr !== false) ctx.error([
+					if (prop.attr !== void 0 && prop.attr !== false && !prop.deserialize) ctx.error([
 						`[zeus-output-wc] <${component.tag}> prop "${name}" cannot use attr:${JSON.stringify(prop.attr)} with register:"lazy".`,
-						"Lazy Web-C only supports attributes for string, number and boolean props.",
-						"Use attr:false and pass object/array/function values as properties instead."
+						"Non-primitive lazy attributes require a custom deserialize function.",
+						"Add deserialize or use attr:false and pass the value as a property."
 					].join("\n"));
-					if (prop.reflect) ctx.error([
+					if (prop.reflect && !prop.serialize) ctx.error([
 						`[zeus-output-wc] <${component.tag}> prop "${name}" cannot use reflect:true with register:"lazy".`,
-						"Lazy Web-C only reflects string, number and boolean props.",
-						"Use a string/number/boolean prop or remove reflect:true."
+						"Non-primitive lazy reflection requires a custom serialize function.",
+						"Add serialize or remove reflect:true."
 					].join("\n"));
 				}
 			}
@@ -404,7 +495,7 @@ function wc(options = {}) {
 			}
 			for (const component of ctx.manifest.components) if (isLazy) {
 				/**
-				* Compatibility module consumed by Vue / React wrappers.
+				* Registration bridge module consumed by Vue / React wrappers.
 				*
 				* It only registers lazy Proxy Elements.
 				* It does not import the real component implementation.
@@ -489,17 +580,18 @@ export {};
 					fileName: joinPath("types/jsx.d.ts"),
 					source: (0, _zeus_js_component_dts.generateWCJsxDts)(ctx.manifest)
 				});
-			} else if (normalized.manifestFile) files.push({
+			}
+			if (normalized.manifestFile) files.push({
 				type: "asset",
 				fileName: normalized.manifestFile,
 				source: generateZeusComponentsManifest(ctx.manifest)
 			});
-			if (!isLazy && normalized.customElementsFile) files.push({
+			if (normalized.customElementsFile) files.push({
 				type: "asset",
 				fileName: normalized.customElementsFile,
 				source: generateCustomElementsJson({
 					manifest: ctx.manifest,
-					getModulePath: (component) => joinPath(getFileName(component.tag))
+					getModulePath: (component) => isLazy ? joinPath(getLazyEntryFileName(normalized.entryFileName, component.tag)) : joinPath(getFileName(component.tag))
 				})
 			});
 			if (!isLazy && (dts || jsxDts)) {

package/dist/output-wc.d.ts

@@ -65,7 +65,6 @@ export interface OutputWCOptions {
      *
      * side-effect:
      *   Immediately registers full components on import.
-     *   Compatible with legacy behavior; not recommended as default.
      */
     register?: WebCRegisterMode;
     /**

package/dist/output-wc.esm-bundler.js

@@ -1,5 +1,5 @@
 /**
-* output-wc v0.1.0-beta.3
+* output-wc v0.1.0-beta.5
 * (c) 2026 baicie
 * Released under the MIT License.
 **/
@@ -27,7 +27,10 @@ function generateCustomElementsJson(options) {
 					events: generateEvents(component),
 					slots: generateSlots(component),
 					cssParts: component.cssParts.map((name) => ({ name })),
-					cssProperties: component.cssVars.map((name) => ({ name }))
+					cssProperties: getCssVars(component).map((variable) => ({
+						name: variable.name,
+						description: variable.description
+					}))
 				}],
 				exports: [{
 					kind: "js",
@@ -57,7 +60,8 @@ function generateAttributes(component) {
 	return result;
 }
 function generateMembers(component) {
-	return Object.entries(component.props).map(([name, prop]) => {
+	var _component$methods;
+	const fields = Object.entries(component.props).map(([name, prop]) => {
 		return {
 			kind: "field",
 			name,
@@ -66,18 +70,28 @@ function generateMembers(component) {
 			default: prop.default === void 0 ? void 0 : JSON.stringify(prop.default)
 		};
 	});
+	const methods = Object.keys((_component$methods = component.methods) !== null && _component$methods !== void 0 ? _component$methods : {}).map((name) => {
+		return {
+			kind: "method",
+			name
+		};
+	});
+	return [...fields, ...methods];
 }
 function generateEvents(component) {
-	return Object.entries(component.events).map(([name, event]) => {
+	return Object.entries(component.events).map(([key, event]) => {
+		var _event$name, _event$key;
 		return {
-			name,
+			name: (_event$name = event.name) !== null && _event$name !== void 0 ? _event$name : toKebabCase$1((_event$key = event.key) !== null && _event$key !== void 0 ? _event$key : key),
 			description: event.description,
 			type: { text: event.detail ? `CustomEvent<${formatDetailType(event.detail)}>` : "CustomEvent" }
 		};
 	});
 }
 function generateSlots(component) {
-	return Object.entries(component.slots).map(([name, slot]) => {
+	return Object.entries(component.slots).map(([key, slot]) => {
+		var _slot$name;
+		const name = (_slot$name = slot.name) !== null && _slot$name !== void 0 ? _slot$name : key;
 		return {
 			name: name === "default" ? "" : name,
 			description: slot.description
@@ -87,6 +101,7 @@ function generateSlots(component) {
 function getAttributeName(propName, prop) {
 	if (prop.attr === false) return false;
 	if (typeof prop.attr === "string") return prop.attr;
+	if (!isAttributeBackedType$1(prop.type)) return false;
 	return propName.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
 }
 function formatPropType(prop) {
@@ -98,15 +113,25 @@ function formatPropType(prop) {
 		case "boolean": return "boolean";
 		case "array": return "unknown[]";
 		case "object": return "Record<string, unknown>";
+		case "function": return "Function";
 		default: return "unknown";
 	}
 }
+function isAttributeBackedType$1(type) {
+	return type === "string" || type === "number" || type === "boolean";
+}
 function formatDetailType(detail) {
 	return `{ ${Object.entries(detail).map(([name, type]) => `${name}: ${type}`).join("; ")} }`;
 }
 function normalizeModulePath(value) {
 	return value.replace(/\\/g, "/");
 }
+function getCssVars(component) {
+	return Object.values(component.cssVars);
+}
+function toKebabCase$1(value) {
+	return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+}
 //#endregion
 //#region packages/web-c/output-wc/src/imports.ts
 function toAbsoluteImportPath(root, source) {
@@ -159,7 +184,11 @@ function generateLazyEntry(options) {
 		"",
 		`export function createComponent(hostRef) {`,
 		`  let mounted;`,
-		`  const mountState = {};`,
+		`  const mountState = {`,
+		`    attributeProps: hostRef.attributeProps,`,
+		`    internals: hostRef.internals,`,
+		`    reflectingAttrs: hostRef.reflectingAttrs,`,
+		`  };`,
 		"",
 		`  return {`,
 		`    connected() {`,
@@ -181,6 +210,22 @@ function generateLazyEntry(options) {
 		`    propertyChanged(name, oldValue, newValue) {`,
 		`      mounted?.propertyChanged(name, oldValue, newValue);`,
 		`    },`,
+		"",
+		`    formAssociated(form) {`,
+		`      mounted?.formAssociated(form);`,
+		`    },`,
+		"",
+		`    formDisabled(disabled) {`,
+		`      mounted?.formDisabled(disabled);`,
+		`    },`,
+		"",
+		`    formReset() {`,
+		`      mounted?.formReset();`,
+		`    },`,
+		"",
+		`    formStateRestore(state, mode) {`,
+		`      mounted?.formStateRestore(state, mode);`,
+		`    },`,
 		`  };`,
 		`}`,
 		"",
@@ -202,15 +247,19 @@ function generateLazyManifest(options) {
 	const { components, getEntryFileName } = options;
 	return `export const components = [
 ${components.map((component) => {
-		var _component$runtimePro, _component$meta$shado, _component$meta;
+		var _component$runtimePro, _component$methods, _component$meta$shado, _component$meta, _component$meta$formA, _component$meta2;
 		const entryFile = getEntryFileName(component.tag).replace(/\\/g, "/");
 		const props = generatePropsArray((_component$runtimePro = component.runtimeProps) !== null && _component$runtimePro !== void 0 ? _component$runtimePro : component.props);
+		const methods = Object.keys((_component$methods = component.methods) !== null && _component$methods !== void 0 ? _component$methods : {});
 		const importPath = entryFile.startsWith(".") ? JSON.stringify(entryFile) : JSON.stringify(`./${entryFile}`);
+		const methodLine = methods.length ? `    methods: ${JSON.stringify(methods)},\n` : "";
 		return `  {
     tagName: ${JSON.stringify(component.tag)},
     shadow: ${(_component$meta$shado = (_component$meta = component.meta) === null || _component$meta === void 0 ? void 0 : _component$meta.shadow) !== null && _component$meta$shado !== void 0 ? _component$meta$shado : false},
+    formAssociated: ${(_component$meta$formA = (_component$meta2 = component.meta) === null || _component$meta2 === void 0 ? void 0 : _component$meta2.formAssociated) !== null && _component$meta$formA !== void 0 ? _component$meta$formA : false},
     load: () => import(${importPath}),
     props: ${props},
+${methodLine}
   }`;
 	}).join(",\n")}
 ];
@@ -221,14 +270,16 @@ function generatePropsArray(props) {
 	if (entries.length === 0) return "[]";
 	return `[\n${entries.map(([name, prop]) => {
 		const parts = [`name: ${JSON.stringify(name)}`];
-		if (!isAttributeBackedType(prop.type) || prop.attr === false) parts.push("attrName: false");
+		if (!isAttributeBackedType(prop.type) && !prop.deserialize || prop.attr === false) parts.push("attrName: false");
 		else {
 			var _prop$attr;
 			const attrName = (_prop$attr = prop.attr) !== null && _prop$attr !== void 0 ? _prop$attr : toKebabCase(name);
 			if (attrName !== toKebabCase(name)) parts.push(`attrName: ${JSON.stringify(attrName)}`);
 		}
 		parts.push(`type: ${JSON.stringify(prop.type)}`);
-		if (prop.reflect && isAttributeBackedType(prop.type)) parts.push("reflect: true");
+		if (prop.reflect && (isAttributeBackedType(prop.type) || Boolean(prop.serialize))) parts.push("reflect: true");
+		if (prop.serialize) parts.push("serialize: true");
+		if (prop.deserialize) parts.push("deserialize: true");
 		return `      { ${parts.join(", ")} }`;
 	}).join(",\n")}\n    ]`;
 }
@@ -244,22 +295,60 @@ function generateLoader() {
 	return `import { bootstrapLazy } from "@zeus-js/web-c-runtime";
 import { components } from "./components.manifest.js";
 
-let defined = false;
+const componentsByTagName = new Map(
+  components.map(component => [component.tagName, component]),
+);
 
-export function defineCustomElements() {
-  if (defined) {
+const definedTagsByRegistry = new WeakMap();
+
+function resolveRegistry(options) {
+  return options.registry ??
+    (typeof customElements === "undefined" ? undefined : customElements);
+}
+
+function getDefinedTags(registry) {
+  let definedTags = definedTagsByRegistry.get(registry);
+
+  if (!definedTags) {
+    definedTags = new Set();
+    definedTagsByRegistry.set(registry, definedTags);
+  }
+
+  return definedTags;
+}
+
+export function defineCustomElement(tagName, options = {}) {
+  const registry = resolveRegistry(options);
+
+  if (!registry) {
     return;
   }
 
-  if (typeof customElements === "undefined") {
+  const component = componentsByTagName.get(tagName);
+
+  if (!component) {
+    throw new Error(\`[zeus:web-c] Unknown custom element: <\${tagName}>.\`);
+  }
+
+  const definedTags = getDefinedTags(registry);
+
+  if (definedTags.has(tagName) || registry.get(tagName)) {
+    definedTags.add(tagName);
     return;
   }
 
-  bootstrapLazy(components);
+  bootstrapLazy([component], { registry });
 
-  defined = true;
+  definedTags.add(tagName);
 }
 
+export function defineCustomElements(options = {}) {
+  for (const component of components) {
+    defineCustomElement(component.tagName, options);
+  }
+}
+
+export const defineLazyElement = defineCustomElement;
 export const defineLazyElements = defineCustomElements;
 `;
 }
@@ -273,7 +362,9 @@ export {};
 }
 function generateLazyIndex() {
 	return `export {
+  defineCustomElement,
   defineCustomElements,
+  defineLazyElement,
   defineLazyElements,
 } from "./loader.js";
 `;
@@ -292,8 +383,8 @@ function wc(options = {}) {
 		outDir: (_options$outDir = options.outDir) !== null && _options$outDir !== void 0 ? _options$outDir : "wc",
 		stripPrefix: (_options$stripPrefix = options.stripPrefix) !== null && _options$stripPrefix !== void 0 ? _options$stripPrefix : false,
 		fileName: options.fileName,
-		manifestFile: registerMode === "lazy" ? false : (_options$manifestFile = options.manifestFile) !== null && _options$manifestFile !== void 0 ? _options$manifestFile : "zeus.components.json",
-		customElementsFile: registerMode === "lazy" ? false : (_options$customElemen = options.customElementsFile) !== null && _options$customElemen !== void 0 ? _options$customElemen : "custom-elements.json",
+		manifestFile: (_options$manifestFile = options.manifestFile) !== null && _options$manifestFile !== void 0 ? _options$manifestFile : "zeus.components.json",
+		customElementsFile: (_options$customElemen = options.customElementsFile) !== null && _options$customElemen !== void 0 ? _options$customElemen : "custom-elements.json",
 		dts: (_options$dts = options.dts) !== null && _options$dts !== void 0 ? _options$dts : true,
 		jsxDts: (_options$jsxDts = options.jsxDts) !== null && _options$jsxDts !== void 0 ? _options$jsxDts : true,
 		index: (_options$index = options.index) !== null && _options$index !== void 0 ? _options$index : true,
@@ -322,15 +413,15 @@ function wc(options = {}) {
 				const runtimeProps = (_component$runtimePro2 = component.runtimeProps) !== null && _component$runtimePro2 !== void 0 ? _component$runtimePro2 : {};
 				for (const [name, prop] of Object.entries(runtimeProps)) {
 					if (isAttributeBackedRuntimeProp(prop.type)) continue;
-					if (prop.attr !== void 0 && prop.attr !== false) ctx.error([
+					if (prop.attr !== void 0 && prop.attr !== false && !prop.deserialize) ctx.error([
 						`[zeus-output-wc] <${component.tag}> prop "${name}" cannot use attr:${JSON.stringify(prop.attr)} with register:"lazy".`,
-						"Lazy Web-C only supports attributes for string, number and boolean props.",
-						"Use attr:false and pass object/array/function values as properties instead."
+						"Non-primitive lazy attributes require a custom deserialize function.",
+						"Add deserialize or use attr:false and pass the value as a property."
 					].join("\n"));
-					if (prop.reflect) ctx.error([
+					if (prop.reflect && !prop.serialize) ctx.error([
 						`[zeus-output-wc] <${component.tag}> prop "${name}" cannot use reflect:true with register:"lazy".`,
-						"Lazy Web-C only reflects string, number and boolean props.",
-						"Use a string/number/boolean prop or remove reflect:true."
+						"Non-primitive lazy reflection requires a custom serialize function.",
+						"Add serialize or remove reflect:true."
 					].join("\n"));
 				}
 			}
@@ -377,7 +468,7 @@ function wc(options = {}) {
 			}
 			for (const component of ctx.manifest.components) if (isLazy) {
 				/**
-				* Compatibility module consumed by Vue / React wrappers.
+				* Registration bridge module consumed by Vue / React wrappers.
 				*
 				* It only registers lazy Proxy Elements.
 				* It does not import the real component implementation.
@@ -462,17 +553,18 @@ export {};
 					fileName: joinPath("types/jsx.d.ts"),
 					source: generateWCJsxDts(ctx.manifest)
 				});
-			} else if (normalized.manifestFile) files.push({
+			}
+			if (normalized.manifestFile) files.push({
 				type: "asset",
 				fileName: normalized.manifestFile,
 				source: generateZeusComponentsManifest(ctx.manifest)
 			});
-			if (!isLazy && normalized.customElementsFile) files.push({
+			if (normalized.customElementsFile) files.push({
 				type: "asset",
 				fileName: normalized.customElementsFile,
 				source: generateCustomElementsJson({
 					manifest: ctx.manifest,
-					getModulePath: (component) => joinPath(getFileName(component.tag))
+					getModulePath: (component) => isLazy ? joinPath(getLazyEntryFileName(normalized.entryFileName, component.tag)) : joinPath(getFileName(component.tag))
 				})
 			});
 			if (!isLazy && (dts || jsxDts)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeus-js/output-wc",
-  "version": "0.1.0-beta.3",
+  "version": "0.1.0-beta.5",
   "description": "Zeus Web Component output plugin",
   "type": "module",
   "main": "index.js",
@@ -52,11 +52,11 @@
     ]
   },
   "dependencies": {
-    "@zeus-js/bundler-plugin": "0.1.0-beta.3",
-    "@zeus-js/component-analyzer": "0.1.0-beta.3",
-    "@zeus-js/runtime-dom": "0.1.0-beta.3",
-    "@zeus-js/component-dts": "0.1.0-beta.3",
-    "@zeus-js/web-c-runtime": "0.1.0"
+    "@zeus-js/bundler-plugin": "0.1.0-beta.5",
+    "@zeus-js/component-analyzer": "0.1.0-beta.5",
+    "@zeus-js/runtime-dom": "0.1.0-beta.5",
+    "@zeus-js/web-c-runtime": "0.2.0",
+    "@zeus-js/component-dts": "0.1.0-beta.5"
   },
   "peerDependencies": {
     "rollup": "^4.0.0"