@stencil/core 5.0.0-beta.2 → 5.0.0-beta.20

package/dist/compiler/browser.js

@@ -1501,7 +1501,7 @@ const scopeSelector = (selector, scopeSelectorText, hostSelector, slotSelector)
 		else return shallowPart.trim();
 	}).join(", ");
 };
-const isScopableAtRule = (selector) => selector.startsWith("@media") || selector.startsWith("@supports") || selector.startsWith("@page") || selector.startsWith("@document") || selector.startsWith("@layer");
+const isScopableAtRule = (selector) => selector.startsWith("@media") || selector.startsWith("@supports") || selector.startsWith("@page") || selector.startsWith("@document") || selector.startsWith("@layer") || selector.startsWith("@container");
 const scopeSelectors = (cssText, scopeSelectorText, hostSelector, slotSelector, commentOriginalSelector) => {
 	return processRules(cssText, (rule) => {
 		let selector = rule.selector;
@@ -1693,6 +1693,18 @@ const createJsVarName = (fileName) => {
 	}
 	return fileName;
 };
+/**
+* Create a function that lowercases the first string parameter before passing it to the provided function
+* @param fn the function to pass the lowercased path to
+* @returns the result of the provided function
+*/
+const lowerPathParam = (fn) => (p) => fn(p.toLowerCase());
+/**
+* Determine if a stringified file path is a TypeScript declaration file based on the extension at the end of the path.
+* @param p the path to evaluate
+* @returns `true` if the path ends in `.d.ts` (case-sensitive), `false` otherwise.
+*/
+const isDtsFile = lowerPathParam((p) => p.endsWith(".d.ts") || p.endsWith(".d.mts") || p.endsWith(".d.cts"));
 function getTextDocs(docs) {
 	if (docs == null) return "";
 	return [escapeWithPattern(docs.text.replace(LINE_BREAK_REGEX, " "), /\*\//, "*\\/", true), ...docs.tags.filter((tag) => tag.name !== "internal").map((tag) => {
@@ -1832,7 +1844,7 @@ const validateComponentTag = (tag) => {
 };
 //#endregion
 //#region src/version.ts
-const version = "5.0.0-beta.2";
+const version = "5.0.0-beta.20";
 //#endregion
 //#region src/compiler/events.ts
 const buildEvents = () => {
@@ -1895,6 +1907,7 @@ const resolve = (id, _opts, cb) => {
 };
 //#endregion
 //#region src/compiler/sys/resolve/resolve-utils.ts
+const isLocalModule = (p) => p.startsWith(".") || p.startsWith("/");
 const isNodeModulePath = (p) => normalizePath(p).split("/").includes("node_modules");
 const getModuleId = (orgImport) => {
 	if (orgImport.startsWith("~")) orgImport = orgImport.substring(1);
@@ -2345,15 +2358,6 @@ const createSystem = (c) => {
 		}
 		return results;
 	};
-	/**
-	* `self` is the global namespace object used within a web worker.
-	* `window` is the browser's global namespace object (I reorganized this to check the reference on that second)
-	* `global` is Node's global namespace object. https://nodejs.org/api/globals.html#globals_global
-	*
-	* loading in this order should allow workers, which are most common, then browser,
-	* then Node to grab the reference to fetch correctly.
-	*/
-	const fetch = typeof self !== "undefined" ? self?.fetch : typeof window !== "undefined" ? window?.fetch : typeof global !== "undefined" ? global?.fetch : void 0;
 	const writeFile = async (p, data) => writeFileSync(p, data);
 	const tmpDirSync = () => "/.tmp";
 	const tick = Promise.resolve();
@@ -2364,6 +2368,7 @@ const createSystem = (c) => {
 		if (typeof hashLength === "number") hashHex = hashHex.slice(0, hashLength);
 		return hashHex;
 	};
+	const generateFileHash = async (filePath, hashLength) => generateContentHash(readFileSync(filePath), hashLength);
 	const copy = async (copyTasks, srcDir) => {
 		const results = {
 			diagnostics: [],
@@ -2373,9 +2378,6 @@ const createSystem = (c) => {
 		logger.info("todo, copy task", copyTasks.length, srcDir);
 		return results;
 	};
-	const getEnvironmentVar = (key) => {
-		return process$1?.env[key];
-	};
 	const getLocalModulePath = (opts) => join$1(opts.rootDir, "node_modules", opts.moduleId, opts.path);
 	const getRemoteModuleUrl = (opts) => {
 		const npmBaseUrl = "https://cdn.jsdelivr.net/npm/";
@@ -2391,13 +2393,14 @@ const createSystem = (c) => {
 		access,
 		accessSync,
 		addDestroy,
+		checkVersion: async () => noop,
 		copyFile,
 		createDir,
 		createDirSync,
 		homeDir,
 		isTTY,
-		getEnvironmentVar,
 		destroy,
+		dynamicImport: (p) => import(p),
 		encodeToBase64,
 		exit: async (exitCode) => logger.warn(`exit ${exitCode}`),
 		getCurrentDirectory,
@@ -2408,6 +2411,7 @@ const createSystem = (c) => {
 		isSymbolicLink,
 		nextTick,
 		normalizePath: normalize,
+		onProcessInterrupt: noop,
 		platformPath: path,
 		readDir,
 		readDirSync,
@@ -2417,7 +2421,6 @@ const createSystem = (c) => {
 		realpathSync,
 		removeDestroy,
 		rename,
-		fetch,
 		resolvePath,
 		removeDir,
 		removeDirSync,
@@ -2432,6 +2435,7 @@ const createSystem = (c) => {
 		writeFile,
 		writeFileSync,
 		generateContentHash,
+		generateFileHash,
 		createWorkerController: null,
 		details: {
 			cpuModel: "",
@@ -2633,7 +2637,8 @@ const getTranspileCssConfig = (compileOpts, importData, results) => {
 		minify: false,
 		autoprefixer: false,
 		module: compileOpts.module,
-		styleImportData: compileOpts.styleImportData
+		styleImportData: compileOpts.styleImportData,
+		docs: compileOpts.docs === true
 	};
 };
 const getTranspileConfigOpt = (value, validValues, defaultValue) => {
@@ -3789,10 +3794,11 @@ const validateConfig = (userConfig = {}, bootstrapConfig) => {
 	const devMode = isBoolean$1(config.devMode) ? config.devMode : false;
 	config._isTesting = !!(process.env.VITEST || process.env.PLAYWRIGHT_TEST || process.env.TEST_WORKER_INDEX || process.env.TEST_PARALLEL_INDEX || false);
 	const sys = config.sys ?? bootstrapConfig.sys ?? createNodeSys({ logger });
+	const hasExplicitGlobalStyleWithInput = (config.outputTargets || []).some((o) => isOutputTargetGlobalStyle(o) && isString$1(o.input));
 	if ((!isString$1(config.globalStyle) || !isString$1(config.globalScript)) && typeof sys.accessSync === "function") {
 		const preRootDir = typeof config.rootDir !== "string" ? "/" : config.rootDir;
 		const srcDir = typeof config.srcDir === "string" ? isAbsolute(config.srcDir) ? config.srcDir : join(preRootDir, config.srcDir) : join(preRootDir, "src");
-		if (!isString$1(config.globalStyle)) for (const ext of STYLE_EXT) {
+		if (!isString$1(config.globalStyle) && !hasExplicitGlobalStyleWithInput) for (const ext of STYLE_EXT) {
 			const candidate = join(srcDir, `global.${ext}`);
 			if (sys.accessSync(candidate)) {
 				config.globalStyle = candidate;
@@ -3812,7 +3818,8 @@ const validateConfig = (userConfig = {}, bootstrapConfig) => {
 		...config,
 		devMode,
 		compat: config.compat || {},
-		generateExportMaps: isBoolean$1(config.generateExportMaps) ? config.generateExportMaps : false,
+		generateExportMaps: config.generateExportMaps === true,
+		enableCssOnlyComponents: config.enableCssOnlyComponents ?? true,
 		hydratedFlag: validateHydrated(config),
 		logLevel,
 		logger,
@@ -3870,29 +3877,137 @@ const validateConfig = (userConfig = {}, bootstrapConfig) => {
 	};
 };
 //#endregion
+//#region src/compiler/docs/css-doc-comments.ts
+/**
+* A JSDoc-style comment is `/** ... *\/` or `/*! ... *\/` - postcss's `Comment.text` already
+* strips the `/*`/`*\/` delimiters, so this checks the leading `*` or `!` that remains.
+* @param commentText a postcss `Comment` node's `.text`
+* @returns `true` if the comment is JSDoc-style
+*/
+const isJsDocComment = (commentText) => commentText.startsWith("*") || commentText.startsWith("!");
+/**
+* Strip the leading `*`/`!` marker and per-line `*` prefixes, returning trimmed lines.
+* @param commentText a postcss `Comment` node's `.text`
+* @returns the comment's lines, delimiters and leading `*`s stripped
+*/
+const normalizeJsDocLines = (commentText) => {
+	return commentText.replace(/^[*!]/, "").split(/\r?\n/).map((line) => line.trim().replace(/^\*/, "").trim()).filter((line, i, arr) => !(line === "" && (i === 0 || i === arr.length - 1)));
+};
+/**
+* @param commentText a postcss `Comment` node's `.text`
+* @returns the comment's lines joined into a single trimmed line of text
+*/
+const normalizeJsDocText = (commentText) => normalizeJsDocLines(commentText).filter(Boolean).join(" ").trim();
+/**
+* @param value a CSS descriptor value, possibly quoted (e.g. a `syntax` descriptor's `"<length>"`)
+* @returns the value with any surrounding quotes removed
+*/
+const stripQuotes = (value) => value.replace(/^['"]|['"]$/g, "");
+/**
+* Extract the `syntax`/`initial-value` descriptors from a native `@property` at-rule's body.
+* @param node a postcss `AtRule` node whose `name` is `property`
+* @returns the extracted descriptors, if present
+*/
+const parsePropertyAtRuleDescriptors = (node) => {
+	let syntax;
+	let initialValue;
+	node.each((child) => {
+		if (child.type !== "decl") return;
+		if (child.prop === "syntax") syntax = stripQuotes(child.value);
+		else if (child.prop === "initial-value") initialValue = child.value;
+	});
+	return {
+		syntax,
+		initialValue
+	};
+};
+//#endregion
 //#region src/compiler/docs/style-docs.ts
 /**
 * Parse CSS docstrings that Stencil supports, as documented here:
 * https://stenciljs.com/docs/docs-json#css-variables
 *
-* Docstrings found in the supplied style text will be added to the
-* `styleDocs` param
+* Docstrings found in the supplied style text will be added to the `styleDocs` param, via three
+* mechanisms, in order of precedence (an earlier mechanism always wins over a later one for the
+* same custom property name):
+* 1. An explicit `@prop`/`@cssprop`/`@cssproperty` annotation in a block comment, anywhere in the file.
+* 2. A doc-commented `--foo: value;` declaration inside the component's "root" rule - `:host`
+*    for `shadow`/`scoped` encapsulation, or the component's own tag selector for `none`.
+* 3. A native `@property --foo { ... }` at-rule, with the `syntax`/`initial-value` descriptors
+*    surfaced as `syntax`/`default`. Not scoped - `@property` is a global registration.
 *
 * @param styleDocs the array to hold formatted CSS docstrings
 * @param styleText the CSS text we're working with
 * @param mode a mode associated with the parsed style, if applicable (e.g. this is not applicable for global styles)
+* @param tag the component's tag name, used to scope auto-detection for `none` encapsulation
+* @param encapsulation the component's encapsulation, used to pick the "root" scope for auto-detection
 */
-function parseStyleDocs(styleDocs, styleText, mode) {
+function parseStyleDocs(styleDocs, styleText, mode, tag, encapsulation) {
 	if (typeof styleText !== "string") return;
-	let match = styleText.match(CSS_DOC_START);
+	let remainingText = styleText;
+	let match = remainingText.match(CSS_DOC_START);
 	while (match !== null) {
-		styleText = styleText.substring(match.index + match[0].length);
-		const endIndex = styleText.indexOf(CSS_DOC_END);
+		remainingText = remainingText.substring(match.index + match[0].length);
+		const endIndex = remainingText.indexOf(CSS_DOC_END);
 		if (endIndex === -1) break;
-		parseCssComment(styleDocs, styleText.substring(0, endIndex), mode);
-		styleText = styleText.substring(endIndex + CSS_DOC_END.length);
-		match = styleText.match(CSS_DOC_START);
+		parseCssComment(styleDocs, remainingText.substring(0, endIndex), mode);
+		remainingText = remainingText.substring(endIndex + CSS_DOC_END.length);
+		match = remainingText.match(CSS_DOC_START);
+	}
+	if (styleText.includes("--")) parseScopedAndNativeStyleDocs(styleDocs, styleText, mode, tag, encapsulation);
+}
+/**
+* Auto-detect doc-commented custom-property declarations within the component's "root" rule,
+* and native `@property` at-rule registrations, merging them into `styleDocs`. Mirrors the
+* equivalent detection for CSS-only components in `css-components/parse-css-component.ts`.
+*
+* @param styleDocs the array to hold formatted CSS docstrings - also consulted so an explicit
+* `@prop`/`@cssprop` annotation always wins over an auto-detected entry for the same name
+* @param styleText the CSS text we're working with
+* @param mode a mode associated with the parsed style, if applicable
+* @param tag the component's tag name
+* @param encapsulation the component's encapsulation
+*/
+function parseScopedAndNativeStyleDocs(styleDocs, styleText, mode, tag, encapsulation) {
+	let root;
+	try {
+		root = postcss().process(styleText, { from: void 0 }).root;
+	} catch {
+		return;
 	}
+	const hasName = (name) => styleDocs.some((styleDoc) => styleDoc.name === name);
+	const rootSelector = encapsulation === "shadow" || encapsulation === "scoped" ? ":host" : tag;
+	if (rootSelector) root.walkRules((rule) => {
+		if (!rule.selectors.some((selector) => selector.trim() === rootSelector)) return;
+		const children = rule.nodes;
+		for (let i = 0; i < children.length; i++) {
+			const child = children[i];
+			if (child.type !== "decl" || !child.prop.startsWith("--") || hasName(child.prop)) continue;
+			const prev = children[i - 1];
+			if (!prev || prev.type !== "comment" || !isJsDocComment(prev.text)) continue;
+			styleDocs.push({
+				name: child.prop,
+				docs: normalizeJsDocText(prev.text),
+				annotation: "prop",
+				mode
+			});
+		}
+	});
+	root.walkAtRules("property", (node) => {
+		const propName = node.params.trim();
+		if (!propName.startsWith("--") || hasName(propName)) return;
+		const { syntax, initialValue } = parsePropertyAtRuleDescriptors(node);
+		const prev = node.prev();
+		const docs = prev && prev.type === "comment" && isJsDocComment(prev.text) ? normalizeJsDocText(prev.text) : "";
+		styleDocs.push({
+			name: propName,
+			docs,
+			annotation: "prop",
+			mode,
+			...syntax && { syntax },
+			...initialValue && { default: initialValue }
+		});
+	});
 }
 /**
 * Parse a CSS comment string and insert it into the provided array of
@@ -3909,7 +4024,7 @@ function parseCssComment(styleDocs, comment, mode) {
 		return line;
 	}).join(" ").replace(/\t/g, " ").trim();
 	while (comment.includes("  ")) comment = comment.replace("  ", " ");
-	comment.split(CSS_PROP_ANNOTATION).forEach((d) => {
+	comment.split(CSS_PROP_ANNOTATION_RE).forEach((d) => {
 		const cssDocument = d.trim();
 		if (!cssDocument.startsWith(`--`)) return;
 		const splt = cssDocument.split(`:`);
@@ -3932,9 +4047,11 @@ const CSS_DOC_START = /\/\*(\*|!)/;
 */
 const CSS_DOC_END = "*/";
 /**
-* The `@prop` annotation we support within CSS docstrings
+* The `@prop` annotation we support within CSS docstrings. `@cssprop`/`@cssproperty` are also
+* recognized as synonyms (the more common names in other web-component-analyzer/docgen
+* ecosystems).
 */
-const CSS_PROP_ANNOTATION = "@prop";
+const CSS_PROP_ANNOTATION_RE = /@(?:cssproperty|cssprop|prop)\b/;
 //#endregion
 //#region src/compiler/sys/browser-stubs/browserslist.ts
 const browserslist = (_query) => [];
@@ -4046,6 +4163,39 @@ const DEFAULT_BROWSER_TARGETS = [
 //#endregion
 //#region src/compiler/style/css-parser/parse-css.ts
 /**
+* Splits a selector list on top-level commas in a single pass: a comma only
+* splits when it's outside a quoted string and at paren depth 0, so commas in
+* `:is(:a,:has(:b))` or `[title="a,b"]` aren't treated as separators.
+* Backslash escapes (inside or outside a string) are skipped so they can't shift state,
+* so e.g. `[title="a\,b"]` is treated as a single selector.
+* @param selectors The selector list to split
+* @returns An array of selectors, with whitespace trimmed from each selector
+*/
+const splitSelectorList = (selectors) => {
+	const parts = [];
+	let depth = 0;
+	let quote = null;
+	let start = 0;
+	for (let i = 0; i < selectors.length; i++) {
+		const ch = selectors[i];
+		if (quote) {
+			if (ch === "\\") i++;
+			else if (ch === quote) quote = null;
+			continue;
+		}
+		if (ch === "\"" || ch === "'") quote = ch;
+		else if (ch === "\\") i++;
+		else if (ch === "(") depth++;
+		else if (ch === ")") depth = Math.max(0, depth - 1);
+		else if (ch === "," && depth === 0) {
+			parts.push(selectors.slice(start, i));
+			start = i + 1;
+		}
+	}
+	parts.push(selectors.slice(start));
+	return parts.map((s) => s.trim());
+};
+/**
 * Parses CSS string input into an AST representation.
 * Used for minification, finding & resolving URLs and during SSR / prerendering, removing unused selectors.
 *
@@ -4170,11 +4320,8 @@ const parseCss = (css, filePath) => {
 	const selector = () => {
 		const m = match(/^([^{]+)/);
 		if (!m) return null;
-		return trim(m[0]).replace(/\/\*([^*]|[\r\n]|(\*+([^*/]|[\r\n])))*\*\/+/g, "").replace(/"(?:\\"|[^"])*"|'(?:\\'|[^'])*'/g, function(str) {
-			return str.replace(/,/g, "‌");
-		}).split(/\s*(?![^(]*\)),\s*/).map(function(s) {
-			return s.replace(/\u200C/g, ",");
-		});
+		const cleaned = trim(m[0]).replace(/\/\*([^*]|[\r\n]|(\*+([^*/]|[\r\n])))*\*\/+/g, "");
+		return splitSelectorList(cleaned);
 	};
 	const declaration = () => {
 		const pos = position();
@@ -4772,12 +4919,10 @@ const optimizeCss = async (inputOpts) => {
 const CREATE_EVENT = "__stencil_createEvent";
 const DEFINE_CUSTOM_ELEMENT = "__stencil_defineCustomElement";
 const GET_ELEMENT = "__stencil_getElement";
-const HOST = "__stencil_Host";
 const HTML_ELEMENT = "HTMLElement";
 const PROXY_CUSTOM_ELEMENT = "__stencil_proxyCustomElement";
 const REGISTER_INSTANCE = "__stencil_registerInstance";
 const REGISTER_HOST = "__stencil_registerHost";
-const H = "__stencil_h";
 const TRANSFORM_TAG = "__stencil_transformTag";
 const GET_REGISTRY = "__stencil_getRegistry";
 const INJECT_SIDE_EFFECT_STYLE = "__stencil_injectSideEffectStyle";
@@ -4785,9 +4930,7 @@ const RUNTIME_APIS = {
 	createEvent: `createEvent as ${CREATE_EVENT}`,
 	defineCustomElement: `defineCustomElement as ${DEFINE_CUSTOM_ELEMENT}`,
 	getElement: `getElement as ${GET_ELEMENT}`,
-	h: `h as ${H}`,
 	legacyH: `h`,
-	Host: `Host as ${HOST}`,
 	HTMLElement: HTML_ELEMENT,
 	proxyCustomElement: `proxyCustomElement as ${PROXY_CUSTOM_ELEMENT}`,
 	registerHost: `registerHost as ${REGISTER_HOST}`,
@@ -9186,9 +9329,9 @@ const serializeSymbol = (checker, symbol) => {
 	};
 };
 /**
-* Maps a TypeScript 4.3+ JSDocTagInfo to a flattened Stencil CompilerJsDocTagInfo.
+* Maps a TypeScript 4.3+ JSDocTagInfo to a flattened Stencil JsonDocsTag.
 * @param tags A readonly array of JSDocTagInfo objects.
-* @returns An array of CompilerJsDocTagInfo objects.
+* @returns An array of JsonDocsTag objects.
 */
 const mapJSDocTagInfo = (tags) => {
 	return tags.map((tag) => ({
@@ -9599,7 +9742,7 @@ const transformCssToEsmModule = (input) => {
 		defaultVarName: createCssVarName(input.file, input.mode),
 		styleDocs: []
 	};
-	if (input.docs) parseStyleDocs(results.styleDocs, input.input, input.mode);
+	if (input.docs) parseStyleDocs(results.styleDocs, input.input, input.mode, input.tag, input.encapsulation);
 	try {
 		const varNames = /* @__PURE__ */ new Set([results.defaultVarName]);
 		if (isString$1(input.tag) && input.encapsulation === "scoped") {
@@ -9696,7 +9839,7 @@ const getCssToEsmImports = (varNames, cssText, filePath, modeName) => {
 			isNodeModule: false
 		};
 		if (!isLocalCssImport(cssImportData.srcImportText)) continue;
-		else if (cssImportData.url === "stencil-globals" || cssImportData.url === "stencil-hydrate") continue;
+		else if (cssImportData.url === "stencil-component-globals" || cssImportData.url === "stencil-hydrate" || cssImportData.url === "stencil-css-components") continue;
 		else if (isCssNodeModule(cssImportData.url)) {
 			cssImportData.filePath = cssImportData.url.substring(1);
 			cssImportData.isNodeModule = true;
@@ -9911,6 +10054,7 @@ var BuildContext = class {
 	completedTasks = [];
 	compilerCtx;
 	components = [];
+	cssOnlyComponents = [];
 	componentGraph = /* @__PURE__ */ new Map();
 	config;
 	data = {};
@@ -9952,6 +10096,7 @@ var BuildContext = class {
 	styleBuildCount = 0;
 	stylesPromise = null;
 	stylesUpdated = [];
+	globalStylesUpdated = [];
 	timeSpan = null;
 	timestamp;
 	transpileBuildCount = 0;
@@ -10132,12 +10277,18 @@ var CompilerContext = class {
 	*/
 	prevStylesMap = /* @__PURE__ */ new Map();
 	globalStyleCache = /* @__PURE__ */ new Map();
+	cssOnlyComponentsCache = /* @__PURE__ */ new Map();
+	stencilCss;
+	globalStyleVirtualImports = /* @__PURE__ */ new Map();
 	styleModeNames = /* @__PURE__ */ new Set();
 	worker = null;
 	reset() {
 		this.cache.clear();
 		this.cssModuleImports.clear();
 		this.globalStyleCache.clear();
+		this.cssOnlyComponentsCache.clear();
+		this.stencilCss = void 0;
+		this.globalStyleVirtualImports.clear();
 		this.collections.length = 0;
 		this.compilerOptions = null;
 		this.hasSuccessfulBuild = false;
@@ -10742,31 +10893,6 @@ const createIdentifierFromStyleIdentifier = (styleIdentifier, externalStyleIds)
 	return ts$1.factory.createBinaryExpression(createIdentifierFromStyleIdentifier(styleIdentifier, [id]), ts$1.SyntaxKind.PlusToken, createIdentifierFromStyleIdentifier(styleIdentifier, externalStyleIds.slice(1)));
 };
 //#endregion
-//#region src/compiler/transformers/host-data-transform.ts
-const transformHostData = (classElements, moduleFile) => {
-	if (classElements.some((e) => ts$1.isMethodDeclaration(e) && e.name.escapedText === "hostData")) {
-		const renderIndex = classElements.findIndex((e) => ts$1.isMethodDeclaration(e) && e.name.escapedText === "render");
-		if (renderIndex >= 0) {
-			const renderMethod = classElements[renderIndex];
-			classElements[renderIndex] = ts$1.factory.updateMethodDeclaration(renderMethod, retrieveModifierLike(renderMethod), renderMethod.asteriskToken, ts$1.factory.createIdentifier(INTERNAL_RENDER), renderMethod.questionToken, renderMethod.typeParameters, renderMethod.parameters, renderMethod.type, renderMethod.body);
-		}
-		classElements.push(syntheticRender(moduleFile, renderIndex >= 0));
-	}
-};
-const syntheticRender = (moduleFile, hasRender) => {
-	addCoreRuntimeApi(moduleFile, RUNTIME_APIS.Host);
-	addCoreRuntimeApi(moduleFile, RUNTIME_APIS.h);
-	const hArguments = [ts$1.factory.createIdentifier(HOST), ts$1.factory.createCallExpression(ts$1.factory.createPropertyAccessExpression(ts$1.factory.createThis(), "hostData"), void 0, void 0)];
-	if (hasRender) hArguments.push(ts$1.factory.createCallExpression(ts$1.factory.createPropertyAccessExpression(ts$1.factory.createThis(), INTERNAL_RENDER), void 0, void 0));
-	/**
-	* render() {
-	*   return h(arguments);
-	* }
-	*/
-	return ts$1.factory.createMethodDeclaration(void 0, void 0, "render", void 0, void 0, [], void 0, ts$1.factory.createBlock([ts$1.factory.createReturnStatement(ts$1.factory.createCallExpression(ts$1.factory.createIdentifier(H), void 0, hArguments))]));
-};
-const INTERNAL_RENDER = "__stencil_render";
-//#endregion
 //#region src/compiler/transformers/reactive-handler-meta-transform.ts
 /**
 * Add a getter to a class for a static representation of the watchers
@@ -10848,7 +10974,6 @@ const updateLazyComponentMembers = (transformOpts, styleStatements, classNode, m
 	addReactivePropHandlers(classMembers, cmp, "watchers");
 	addReactivePropHandlers(classMembers, cmp, "serializers");
 	addReactivePropHandlers(classMembers, cmp, "deserializers");
-	transformHostData(classMembers, moduleFile);
 	if (transformOpts.style === "static") addStaticStylePropertyToClass(styleStatements, cmp, buildCtx);
 	return classMembers;
 };
@@ -11296,7 +11421,6 @@ const updateNativeHostComponentMembers = (transformOpts, classNode, moduleFile,
 	addReactivePropHandlers(classMembers, cmp, "deserializers");
 	if (cmp.isPlain) addNativeComponentMeta(classMembers, cmp);
 	if (transformOpts.style === "static") addNativeStaticStyle(classMembers, cmp, buildCtx);
-	transformHostData(classMembers, moduleFile);
 	return classMembers;
 };
 //#endregion
@@ -11499,110 +11623,6 @@ const isDecoratorNamed = (propName) => {
 	};
 };
 //#endregion
-//#region src/compiler/transformers/decorators-to-static/attach-internals.ts
-/**
-* Convert the attach internals decorator to static, saving the name of the
-* decorated property so an `ElementInternals` object can be bound to it later
-* on.
-*
-* The `@AttachInternals` decorator is used to indicate a field on a class
-* where the return value of the `HTMLElement.attachInternals` method should be
-* bound. This then allows component authors to use that interface to make their
-* Stencil components rich participants in whatever `HTMLFormElement` instances
-* they find themselves inside of in the future.
-*
-* The decorator also accepts an optional `states` option to define initial
-* custom states that will be set on the `ElementInternals.states` CustomStateSet.
-* Each state property can have a JSDoc comment that will be extracted for documentation.
-*
-* **Note**: this function will mutate the `newMembers` parameter in order to
-* add new members to the class.
-*
-* @param diagnostics for reporting errors and warnings
-* @param decoratedMembers the decorated members found on the class
-* @param newMembers an out param for new class members
-* @param typeChecker a TypeScript typechecker, needed for resolving the prop
-* declaration name
-* @param decoratorName the name of the decorator to look for
-*/
-const attachInternalsDecoratorsToStatic = (diagnostics, decoratedMembers, newMembers, typeChecker, decoratorName) => {
-	const attachInternalsMembers = decoratedMembers.filter(ts$1.isPropertyDeclaration).filter((prop) => {
-		return !!retrieveTsDecorators(prop)?.find(isDecoratorNamed(decoratorName));
-	});
-	if (attachInternalsMembers.length === 0) return;
-	if (attachInternalsMembers.length > 1) {
-		const error = buildError(diagnostics);
-		error.messageText = `Stencil does not support adding more than one AttachInternals() decorator to a component`;
-		return;
-	}
-	const [decoratedProp] = attachInternalsMembers;
-	const { staticName: name } = tsPropDeclName(decoratedProp, typeChecker);
-	const decorator = retrieveTsDecorators(decoratedProp)?.find(isDecoratorNamed(decoratorName));
-	const customStates = parseCustomStatesFromDecorator(decorator, typeChecker);
-	const formAssociated = parseFormAssociatedFromDecorator(decorator);
-	newMembers.push(createStaticGetter("attachInternalsMemberName", convertValueToLiteral(name)));
-	if (customStates.length > 0) newMembers.push(createStaticGetter("attachInternalsCustomStates", convertValueToLiteral(customStates)));
-	if (formAssociated) newMembers.push(createStaticGetter("formAssociated", convertValueToLiteral(true)));
-};
-/**
-* Parse the formAssociated option from the decorator.
-* Returns true (form-associated) unless explicitly set to false.
-*
-* @param decorator the decorator node to parse
-* @returns whether the component should be form-associated
-*/
-function parseFormAssociatedFromDecorator(decorator) {
-	if (!decorator || !ts$1.isCallExpression(decorator.expression)) return true;
-	const [firstArg] = decorator.expression.arguments;
-	if (!firstArg || !ts$1.isObjectLiteralExpression(firstArg)) return true;
-	const formAssociatedProp = firstArg.properties.find((prop) => ts$1.isPropertyAssignment(prop) && ts$1.isIdentifier(prop.name) && prop.name.text === "formAssociated");
-	if (!formAssociatedProp) return true;
-	if (formAssociatedProp.initializer.kind === ts$1.SyntaxKind.FalseKeyword) return false;
-	return true;
-}
-/**
-* Parse custom states from the decorator AST, including JSDoc comments.
-*
-* Supports JSDoc comments on state properties:
-* ```ts
-* @AttachInternals({
-*   states: {
-*     hovered: false,
-*     /&#42;&#42; Whether is currently active &#42;/
-*     active: true
-*   }
-* })
-* ```
-*
-* @param decorator the decorator node to parse
-* @param typeChecker a TypeScript typechecker for resolving symbols
-* @returns array of custom state metadata with docs
-*/
-function parseCustomStatesFromDecorator(decorator, typeChecker) {
-	if (!decorator || !ts$1.isCallExpression(decorator.expression)) return [];
-	const [firstArg] = decorator.expression.arguments;
-	if (!firstArg || !ts$1.isObjectLiteralExpression(firstArg)) return [];
-	const statesProp = firstArg.properties.find((prop) => ts$1.isPropertyAssignment(prop) && ts$1.isIdentifier(prop.name) && prop.name.text === "states");
-	if (!statesProp || !ts$1.isObjectLiteralExpression(statesProp.initializer)) return [];
-	const customStates = [];
-	for (const prop of statesProp.initializer.properties) {
-		if (!ts$1.isPropertyAssignment(prop)) continue;
-		const stateName = ts$1.isIdentifier(prop.name) ? prop.name.text : ts$1.isStringLiteral(prop.name) ? prop.name.text : null;
-		if (!stateName) continue;
-		let initialValue = false;
-		if (prop.initializer.kind === ts$1.SyntaxKind.TrueKeyword) initialValue = true;
-		else if (prop.initializer.kind === ts$1.SyntaxKind.FalseKeyword) initialValue = false;
-		const symbol = typeChecker.getSymbolAtLocation(prop.name);
-		const docs = symbol ? ts$1.displayPartsToString(symbol.getDocumentationComment(typeChecker)) : "";
-		customStates.push({
-			name: stateName,
-			initialValue,
-			docs
-		});
-	}
-	return customStates;
-}
-//#endregion
 //#region src/compiler/transformers/decorators-to-static/style-to-static.ts
 const styleToStatic = (newMembers, componentOptions) => {
 	const defaultModeStyles = [];
@@ -11667,6 +11687,12 @@ const normalizeStyleUrl = (style) => {
 //#region src/compiler/transformers/decorators-to-static/component-decorator.ts
 let hasShownDeprecatedApiError = false;
 /**
+* Reset the deprecated API error flag. Call this at the start of each build.
+*/
+const resetDeprecatedApiWarning = () => {
+	hasShownDeprecatedApiError = false;
+};
+/**
 * Perform code generation to create new class members for a Stencil component
 * which will drive the runtime functionality specified by various options
 * passed to the `@Component` decorator.
@@ -11867,6 +11893,110 @@ const findTagNode = (propName, node) => {
 	return out;
 };
 //#endregion
+//#region src/compiler/transformers/decorators-to-static/attach-internals.ts
+/**
+* Convert the attach internals decorator to static, saving the name of the
+* decorated property so an `ElementInternals` object can be bound to it later
+* on.
+*
+* The `@AttachInternals` decorator is used to indicate a field on a class
+* where the return value of the `HTMLElement.attachInternals` method should be
+* bound. This then allows component authors to use that interface to make their
+* Stencil components rich participants in whatever `HTMLFormElement` instances
+* they find themselves inside of in the future.
+*
+* The decorator also accepts an optional `states` option to define initial
+* custom states that will be set on the `ElementInternals.states` CustomStateSet.
+* Each state property can have a JSDoc comment that will be extracted for documentation.
+*
+* **Note**: this function will mutate the `newMembers` parameter in order to
+* add new members to the class.
+*
+* @param diagnostics for reporting errors and warnings
+* @param decoratedMembers the decorated members found on the class
+* @param newMembers an out param for new class members
+* @param typeChecker a TypeScript typechecker, needed for resolving the prop
+* declaration name
+* @param decoratorName the name of the decorator to look for
+*/
+const attachInternalsDecoratorsToStatic = (diagnostics, decoratedMembers, newMembers, typeChecker, decoratorName) => {
+	const attachInternalsMembers = decoratedMembers.filter(ts$1.isPropertyDeclaration).filter((prop) => {
+		return !!retrieveTsDecorators(prop)?.find(isDecoratorNamed(decoratorName));
+	});
+	if (attachInternalsMembers.length === 0) return;
+	if (attachInternalsMembers.length > 1) {
+		const error = buildError(diagnostics);
+		error.messageText = `Stencil does not support adding more than one AttachInternals() decorator to a component`;
+		return;
+	}
+	const [decoratedProp] = attachInternalsMembers;
+	const { staticName: name } = tsPropDeclName(decoratedProp, typeChecker);
+	const decorator = retrieveTsDecorators(decoratedProp)?.find(isDecoratorNamed(decoratorName));
+	const customStates = parseCustomStatesFromDecorator(decorator, typeChecker);
+	const formAssociated = parseFormAssociatedFromDecorator(decorator);
+	newMembers.push(createStaticGetter("attachInternalsMemberName", convertValueToLiteral(name)));
+	if (customStates.length > 0) newMembers.push(createStaticGetter("attachInternalsCustomStates", convertValueToLiteral(customStates)));
+	if (formAssociated) newMembers.push(createStaticGetter("formAssociated", convertValueToLiteral(true)));
+};
+/**
+* Parse the formAssociated option from the decorator.
+* Returns true (form-associated) unless explicitly set to false.
+*
+* @param decorator the decorator node to parse
+* @returns whether the component should be form-associated
+*/
+function parseFormAssociatedFromDecorator(decorator) {
+	if (!decorator || !ts$1.isCallExpression(decorator.expression)) return true;
+	const [firstArg] = decorator.expression.arguments;
+	if (!firstArg || !ts$1.isObjectLiteralExpression(firstArg)) return true;
+	const formAssociatedProp = firstArg.properties.find((prop) => ts$1.isPropertyAssignment(prop) && ts$1.isIdentifier(prop.name) && prop.name.text === "formAssociated");
+	if (!formAssociatedProp) return true;
+	if (formAssociatedProp.initializer.kind === ts$1.SyntaxKind.FalseKeyword) return false;
+	return true;
+}
+/**
+* Parse custom states from the decorator AST, including JSDoc comments.
+*
+* Supports JSDoc comments on state properties:
+* ```ts
+* @AttachInternals({
+*   states: {
+*     hovered: false,
+*     /&#42;&#42; Whether is currently active &#42;/
+*     active: true
+*   }
+* })
+* ```
+*
+* @param decorator the decorator node to parse
+* @param typeChecker a TypeScript typechecker for resolving symbols
+* @returns array of custom state metadata with docs
+*/
+function parseCustomStatesFromDecorator(decorator, typeChecker) {
+	if (!decorator || !ts$1.isCallExpression(decorator.expression)) return [];
+	const [firstArg] = decorator.expression.arguments;
+	if (!firstArg || !ts$1.isObjectLiteralExpression(firstArg)) return [];
+	const statesProp = firstArg.properties.find((prop) => ts$1.isPropertyAssignment(prop) && ts$1.isIdentifier(prop.name) && prop.name.text === "states");
+	if (!statesProp || !ts$1.isObjectLiteralExpression(statesProp.initializer)) return [];
+	const customStates = [];
+	for (const prop of statesProp.initializer.properties) {
+		if (!ts$1.isPropertyAssignment(prop)) continue;
+		const stateName = ts$1.isIdentifier(prop.name) ? prop.name.text : ts$1.isStringLiteral(prop.name) ? prop.name.text : null;
+		if (!stateName) continue;
+		let initialValue = false;
+		if (prop.initializer.kind === ts$1.SyntaxKind.TrueKeyword) initialValue = true;
+		else if (prop.initializer.kind === ts$1.SyntaxKind.FalseKeyword) initialValue = false;
+		const symbol = typeChecker.getSymbolAtLocation(prop.name);
+		const docs = symbol ? ts$1.displayPartsToString(symbol.getDocumentationComment(typeChecker)) : "";
+		customStates.push({
+			name: stateName,
+			initialValue,
+			docs
+		});
+	}
+	return customStates;
+}
+//#endregion
 //#region src/compiler/transformers/decorators-to-static/decorators-constants.ts
 /**
 * All the decorators supported by Stencil
@@ -13194,14 +13324,16 @@ const parseWatchDecorator = (typeChecker, method, decoratorName) => {
 * @param diagnostics for surfacing errors and warnings
 * @param typeChecker a TypeScript typechecker instance
 * @param program a {@link ts.Program} object
+* @param includeClassExpressions also convert `ts.ClassExpression` nodes (e.g. a mixin factory's
+* `(Base) => class extends Base {}`), not just named `ts.ClassDeclaration`s
 * @returns a TypeScript transformer factory which can be passed to
 * TypeScript to transform source code during the compilation process
 */
-const convertDecoratorsToStatic = (config, diagnostics, typeChecker, program) => {
+const convertDecoratorsToStatic = (config, diagnostics, typeChecker, program, includeClassExpressions = false) => {
 	return (transformCtx) => {
 		let sourceFile;
 		const visit = (node) => {
-			if (ts$1.isClassDeclaration(node)) return visitClassDeclaration(config, diagnostics, typeChecker, program, node, sourceFile);
+			if (ts$1.isClassDeclaration(node) || includeClassExpressions && ts$1.isClassExpression(node)) return visitClassDeclaration(config, diagnostics, typeChecker, program, node, sourceFile);
 			return ts$1.visitEachChild(node, visit, transformCtx);
 		};
 		return (tsSourceFile) => {
@@ -13211,10 +13343,10 @@ const convertDecoratorsToStatic = (config, diagnostics, typeChecker, program) =>
 	};
 };
 /**
-* Visit {@link ts.ClassDeclaration} nodes as part of the tree-traversal
+* Visit {@link ts.ClassDeclaration}/{@link ts.ClassExpression} nodes as part of the tree-traversal
 * required for {@link convertDecoratorsToStatic} to work.
 *
-* If a given class declaration node is not decorated with `@Component` this
+* If a given class node is not decorated with `@Component` this
 * function will simply return it as-is. If it _is_ decorated, then it will
 *
 * 1. Convert the arguments to the `@Component` decorator to static values.
@@ -13223,7 +13355,7 @@ const convertDecoratorsToStatic = (config, diagnostics, typeChecker, program) =>
 * to static values.
 * 3. Validate that the various options selected by the component author are
 * valid, both individually and in combination.
-* 4. Return an updated class declaration node which is ready to be used in
+* 4. Return an updated class node which is ready to be used in
 * the rest of the Stencil compilation pipeline (e.g. in output target
 * generation).
 *
@@ -13242,7 +13374,7 @@ const visitClassDeclaration = (config, diagnostics, typeChecker, program, classN
 	const decoratedMembers = classMembers.filter((member) => (retrieveTsDecorators(member)?.length ?? 0) > 0);
 	if (!decoratedMembers.length && !componentDecorator) return classNode;
 	const filteredMethodsAndFields = removeStencilMethodDecorators(Array.from(classMembers), diagnostics, importAliasMap);
-	if (componentDecorator) componentDecoratorToStatic(config, typeChecker, diagnostics, classNode, filteredMethodsAndFields, componentDecorator);
+	if (componentDecorator && ts$1.isClassDeclaration(classNode)) componentDecoratorToStatic(config, typeChecker, diagnostics, classNode, filteredMethodsAndFields, componentDecorator);
 	if (decoratedMembers.length > 0) {
 		const serializers = serializeDecoratorsToStatic(typeChecker, decoratedMembers, filteredMethodsAndFields, importAliasMap.get("PropSerialize"), "PropSerialize", importAliasMap.get("Prop"));
 		const deserializers = serializeDecoratorsToStatic(typeChecker, decoratedMembers, filteredMethodsAndFields, importAliasMap.get("AttrDeserialize"), "AttrDeserialize", importAliasMap.get("Prop"));
@@ -13258,7 +13390,8 @@ const visitClassDeclaration = (config, diagnostics, typeChecker, program, classN
 	validateMethods(diagnostics, classMembers);
 	const currentDecorators = retrieveTsDecorators(classNode);
 	const updatedClassFields = updateConstructor(classNode, filteredMethodsAndFields, []);
-	return ts$1.factory.updateClassDeclaration(classNode, [...filterDecorators(currentDecorators, CLASS_DECORATORS_TO_REMOVE.map((decorator) => importAliasMap.get(decorator))) ?? [], ...retrieveTsModifiers(classNode) ?? []], classNode.name, classNode.typeParameters, classNode.heritageClauses, updatedClassFields);
+	const updatedModifiers = [...filterDecorators(currentDecorators, CLASS_DECORATORS_TO_REMOVE.map((decorator) => importAliasMap.get(decorator))) ?? [], ...retrieveTsModifiers(classNode) ?? []];
+	return ts$1.isClassDeclaration(classNode) ? ts$1.factory.updateClassDeclaration(classNode, updatedModifiers, classNode.name, classNode.typeParameters, classNode.heritageClauses, updatedClassFields) : ts$1.factory.updateClassExpression(classNode, updatedModifiers, classNode.name, classNode.typeParameters, classNode.heritageClauses, updatedClassFields);
 };
 /**
 * Take a list of `ClassElement` AST nodes and remove any decorators from
@@ -13869,11 +14002,11 @@ const parseStaticWatchers = (staticMembers) => {
 //#endregion
 //#region src/compiler/transformers/static-to-meta/class-extension/shared.ts
 /**
-* Warns when an `extends`/`Mixin(...)` target resolved to *something* but no class declaration
-* could be found inside it - e.g. a mixin factory whose class isn't a named declaration
-* (`(Base) => class extends Base {}` rather than `(Base) => { class Foo extends Base {} return
-* Foo; }`). Without this, the target is silently dropped: any `@Prop`/`@State` etc. it declares
-* just never appears on the extending component, with no diagnostic explaining why.
+* Warns when an `extends`/`Mixin(...)` target resolved to *something* but no class literal
+* could be found inside it - e.g. a mixin factory that returns an existing class by reference
+* (`(Base) => SomeExistingClass`) rather than a class literal. Without this, the target is
+* silently dropped: any `@Prop`/`@State` etc. it declares just never appears on the extending
+* component, with no diagnostic explaining why.
 * @param buildCtx used to surface the warning - omit to warn silently (e.g. from tests)
 * @param targetName the identifier the target was reached through
 * @param anchor the node to attach the warning to
@@ -13881,27 +14014,32 @@ const parseStaticWatchers = (staticMembers) => {
 function warnMixinFactoryClassNotFound(buildCtx, targetName, anchor) {
 	if (!buildCtx) return;
 	const err = buildWarn(buildCtx.diagnostics);
-	err.messageText = `Found "${targetName}", but couldn't find a class declaration inside it. If it's meant to be a mixin factory, make sure it declares and returns a named class, e.g. \`(Base) => { class ${targetName}Class extends Base {} return ${targetName}Class; }\` - a factory that returns a class expression directly (\`(Base) => class extends Base {}\`) isn't recognized, and any \`@Prop\`/\`@State\`/etc. it declares won't be applied.`;
+	err.messageText = `Found "${targetName}", but couldn't find a class inside it. If it's meant to be a mixin factory, make sure it returns a class literal directly, e.g. \`(Base) => class extends Base {}\` or \`(Base) => { class ${targetName}Class extends Base {} return ${targetName}Class; }\` - returning an existing class by reference (\`(Base) => SomeExistingClass\`) isn't recognized, and any \`@Prop\`/\`@State\`/etc. it declares won't be applied.`;
 	if (!buildCtx.config._isTesting) augmentDiagnosticWithNode(err, anchor);
 }
 /**
-* Walks the AST looking for a class declaration, optionally by name - descends
-* into a mixin factory's wrapping function (arrow function or `function`
-* declaration) body too, since a mixin factory's class is always nested one
-* level inside it (e.g. `const Foo = (Base) => class extends Base {}`).
+* Walks the AST looking for a class declaration or class expression, optionally by name -
+* descends into a mixin factory's wrapping function (arrow function or `function` declaration)
+* body too, since a mixin factory's class is always nested one level inside it. Recognizes all of:
+* `const Foo = (Base) => class extends Base {}` (concise arrow body), `const Foo = (Base) => {
+* return class extends Base {}; }` (block body, `return` of a class expression), and `const Foo =
+* (Base) => { class FooClass extends Base {} return FooClass; }` (block body, named declaration).
 * @param node the node to search from
-* @param name if given, only matches a class declaration with this name
-* @returns the found class declaration, or `undefined`
+* @param name if given, only matches a class with this name
+* @returns the found class, or `undefined`
 */
 function findClassWalk(node, name) {
 	if (!node) return void 0;
-	if (ts$1.isClassDeclaration(node)) {
+	if (ts$1.isClassDeclaration(node) || ts$1.isClassExpression(node)) {
 		if (!name || node.name?.text === name) return node;
 	} else if (ts$1.isVariableDeclaration(node) && (!name || name === node.name?.text) && node.initializer && ts$1.isArrowFunction(node.initializer)) {
+		const body = node.initializer.body;
+		if (ts$1.isClassExpression(body)) return body;
 		let found;
-		ts$1.forEachChild(node.initializer.body, (child) => {
+		ts$1.forEachChild(body, (child) => {
 			if (found) return;
 			if (ts$1.isClassDeclaration(child)) found = child;
+			else if (ts$1.isReturnStatement(child) && child.expression && ts$1.isClassExpression(child.expression)) found = child.expression;
 		});
 		return found;
 	}
@@ -13914,6 +14052,22 @@ function findClassWalk(node, name) {
 	return found;
 }
 /**
+* The declared name of a mixin-factory statement (`function Foo() {}`, or `const Foo = ...`) -
+* survives the decorator-to-static-getter transform even when the factory's inner class doesn't
+* have a name of its own, so it can anchor a post-transform re-lookup via `findClassWalk`.
+* @param node the factory statement (or its variable declaration) to read a name from
+* @returns the declared name, or `undefined` if it can't be determined
+*/
+function factoryDeclaredName(node) {
+	if (!node) return void 0;
+	if (ts$1.isFunctionDeclaration(node)) return node.name?.text;
+	if (ts$1.isVariableDeclaration(node)) return ts$1.isIdentifier(node.name) ? node.name.text : void 0;
+	if (ts$1.isVariableStatement(node)) {
+		const decl = node.declarationList.declarations[0];
+		return decl && ts$1.isIdentifier(decl.name) ? decl.name.text : void 0;
+	}
+}
+/**
 * Matches a top-level class/function/variable declaration by name - the three
 * shapes a mixin or base-class export can take (a plain class, a mixin
 * factory function declaration, or a mixin factory assigned to a `const`).
@@ -13931,25 +14085,161 @@ function matchesNamedDeclaration(name) {
 	};
 }
 /**
-* Finds a re-export of `className` in `sourceFile` - `export { X } from './y'` or
-* `export { X as Y } from './y'` - as used by barrel entry points (e.g. `@stencil/core`'s own
-* public `index.d.mts`, which re-exports its runtime API from `./declarations/stencil-public-runtime`
-* rather than declaring it directly).
+* Finds a re-export of `className` in `sourceFile`: `export { X } from './y'`, or the
+* bundler-split shape `import { X as name } from './y'; export { name };` (no `from` clause).
 * @param sourceFile the (barrel) source file to scan
 * @param className the exported name to look for
-* @returns the module specifier and the name to look for in that module (the local name, before
-* any `as` aliasing), or `undefined` if no matching re-export is found
+* @returns the module specifier and name to look for there (before any `as` aliasing), or
+* `undefined` if not found
 */
 function findReExport(sourceFile, className) {
 	for (const stmt of sourceFile.statements) {
-		if (!ts$1.isExportDeclaration(stmt) || !stmt.moduleSpecifier || !ts$1.isStringLiteral(stmt.moduleSpecifier) || !stmt.exportClause || !ts$1.isNamedExports(stmt.exportClause)) continue;
-		for (const element of stmt.exportClause.elements) if (element.name.text === className) return {
+		if (!ts$1.isExportDeclaration(stmt) || !stmt.exportClause || !ts$1.isNamedExports(stmt.exportClause)) continue;
+		const element = stmt.exportClause.elements.find((el) => el.name.text === className);
+		if (!element) continue;
+		if (stmt.moduleSpecifier && ts$1.isStringLiteral(stmt.moduleSpecifier)) return {
 			moduleSpecifier: stmt.moduleSpecifier.text,
 			localName: element.propertyName?.text ?? element.name.text
 		};
+		const importOrigin = findImportOrigin(sourceFile, element.propertyName?.text ?? element.name.text);
+		if (importOrigin) return importOrigin;
+	}
+}
+/**
+* Finds `name`'s import in `sourceFile` and returns its module and origin name (before any `as`
+* aliasing; `'default'` for a default import).
+* @param sourceFile the source file to scan for a matching import
+* @param name the local (post-aliasing) name an import bound
+* @returns the import's module specifier and origin name, or `undefined` if `name` isn't imported
+*/
+function findImportOrigin(sourceFile, name) {
+	for (const stmt of sourceFile.statements) {
+		if (!ts$1.isImportDeclaration(stmt) || !stmt.importClause || !ts$1.isStringLiteral(stmt.moduleSpecifier)) continue;
+		const moduleSpecifier = stmt.moduleSpecifier.text;
+		if (stmt.importClause.name?.text === name) return {
+			moduleSpecifier,
+			localName: "default"
+		};
+		const bindings = stmt.importClause.namedBindings;
+		if (!bindings || !ts$1.isNamedImports(bindings)) continue;
+		const element = bindings.elements.find((el) => el.name.text === name);
+		if (element) return {
+			moduleSpecifier,
+			localName: element.propertyName?.text ?? element.name.text
+		};
 	}
 }
 /**
+* Finds `name` as a top-level declaration in `sf` (see `matchesNamedDeclaration`), following a
+* same-file export alias if `name` is only ever the public side of a local rename
+* (`export { RealName as name }`, no `from` clause).
+* @param sf the source file to search
+* @param name the declaration name to look for, which may only exist as an export alias
+* @returns the matched statement, or `undefined`
+*/
+function findStatementByName(sf, name) {
+	const direct = sf.statements.find(matchesNamedDeclaration(name));
+	if (direct) return direct;
+	for (const stmt of sf.statements) {
+		if (!ts$1.isExportDeclaration(stmt) || stmt.moduleSpecifier || !stmt.exportClause || !ts$1.isNamedExports(stmt.exportClause)) continue;
+		const aliasedName = stmt.exportClause.elements.find((el) => el.name.text === name)?.propertyName?.text;
+		if (aliasedName && aliasedName !== name) return sf.statements.find(matchesNamedDeclaration(aliasedName));
+	}
+}
+/**
+* Picks the runtime target out of a `package.json` `exports` condition entry - prefers `import`
+* over `require`/`node`/`default`, recursing into nested condition objects.
+* @param entry an `exports` map value: a path string, or nested conditions
+* @returns the resolved relative path, or `undefined` if no usable condition was found
+*/
+function pickJsCondition(entry) {
+	if (typeof entry === "string") return entry;
+	if (typeof entry !== "object" || entry === null) return;
+	const conditions = entry;
+	for (const key of [
+		"import",
+		"require",
+		"node",
+		"default"
+	]) if (key in conditions) {
+		const picked = pickJsCondition(conditions[key]);
+		if (picked) return picked;
+	}
+}
+/**
+* Reads and parses `filePath` as JS, with parent nodes set - unlike `tsGetSourceFile`, which
+* never triggers binding, so `.parent` stays unset and `node.getSourceFile()` returns `undefined`.
+* @param config the current Stencil validated config
+* @param filePath the absolute path of the JS file to read and parse
+* @returns the parsed source file, or `undefined` if it couldn't be read
+*/
+function readJsSourceFile(config, filePath) {
+	try {
+		const text = config.sys.readFileSync(filePath);
+		if (typeof text !== "string") return;
+		return ts$1.createSourceFile(filePath, text, ts$1.ScriptTarget.ESNext, true, ts$1.ScriptKind.JS);
+	} catch {
+		return;
+	}
+}
+/**
+* Resolves the runtime JS entry for a bare (non-relative) module specifier by reading its
+* package's own `package.json` `exports` map, instead of `tsResolveModuleName` - which always
+* resolves to the package's `types` entry, an ambient signature with no body a mixin factory's
+* class can never be found inside.
+* @param config the current Stencil validated config
+* @param compilerCtx the current compiler context
+* @param moduleSpecifier the bare package specifier to resolve
+* @param containingFile the file the specifier was imported from
+* @returns the resolved JS source file, or `undefined` if it couldn't be resolved this way
+*/
+function resolveModuleJsEntry(config, compilerCtx, moduleSpecifier, containingFile) {
+	if (isLocalModule(moduleSpecifier)) return;
+	const pkgJsonPath = tsResolveModuleNamePackageJsonPath(config, compilerCtx, moduleSpecifier, containingFile);
+	if (!pkgJsonPath) return;
+	let pkgJson;
+	try {
+		pkgJson = JSON.parse(config.sys.readFileSync(pkgJsonPath));
+	} catch {
+		return;
+	}
+	const pkgName = pkgJson.name;
+	if (!pkgName || !moduleSpecifier.startsWith(pkgName) || !pkgJson.exports) return;
+	const subpath = moduleSpecifier === pkgName ? "." : `.${moduleSpecifier.slice(pkgName.length)}`;
+	const exportsMap = pkgJson.exports;
+	const conditionEntry = typeof exportsMap === "string" ? subpath === "." ? exportsMap : void 0 : exportsMap[subpath] ?? (subpath === "." ? exportsMap : void 0);
+	const target = conditionEntry && pickJsCondition(conditionEntry);
+	if (!target) return;
+	return readJsSourceFile(config, normalizePath(join$1(dirname(pkgJsonPath), target)));
+}
+/**
+* Finds `className`'s class inside a resolved JS entry (see `resolveModuleJsEntry`), following
+* re-export hops the same way `resolveAndProcessExtendedClass` walks a `.d.ts`/`.ts` source.
+* @param config the current Stencil validated config
+* @param compilerCtx the current compiler context
+* @param source the JS source file to search
+* @param className the class (or mixin factory) name to look for
+* @param hopsRemaining re-export hops still allowed before giving up
+* @returns the found class and the source file it's declared in, or `undefined`
+*/
+function findClassInJsModule(config, compilerCtx, source, className, hopsRemaining = 3) {
+	const matchedStatement = findStatementByName(source, className);
+	if (matchedStatement) {
+		const classNode = ts$1.isClassDeclaration(matchedStatement) ? matchedStatement : findClassWalk(matchedStatement);
+		return classNode && {
+			classNode,
+			sourceFile: source
+		};
+	}
+	if (hopsRemaining <= 0) return;
+	const reExport = findReExport(source, className);
+	if (!reExport) return;
+	const resolvedFileName = tsResolveModuleName(config, compilerCtx, reExport.moduleSpecifier, source.fileName)?.resolvedModule?.resolvedFileName;
+	const nextSource = resolvedFileName && readJsSourceFile(config, resolvedFileName);
+	if (!nextSource) return;
+	return findClassInJsModule(config, compilerCtx, nextSource, reExport.localName, hopsRemaining - 1);
+}
+/**
 * Filters `dedupeMembers` down to entries not already present in `staticMembers`
 * (by name, or `methodName` for change handlers) - used so an extending
 * class's own members win over inherited ones.
@@ -14035,7 +14325,7 @@ function convertDiskSourceFileDecorators(sourceFile, config, target = ts$1.Scrip
 	const program = ts$1.createProgram([sourceFile.fileName], compilerOptions, host);
 	const typeChecker = program.getTypeChecker();
 	const ownSourceFile = program.getSourceFile(sourceFile.fileName) ?? sourceFile;
-	const result = ts$1.transform(ownSourceFile, [convertDecoratorsToStatic(config, [], typeChecker, program)]);
+	const result = ts$1.transform(ownSourceFile, [convertDecoratorsToStatic(config, [], typeChecker, program, true)]);
 	const printed = ts$1.createPrinter({ removeComments: false }).printFile(result.transformed[0]);
 	return ts$1.createSourceFile(sourceFile.fileName, printed, target, true);
 }
@@ -14055,9 +14345,11 @@ function convertDiskSourceFileDecorators(sourceFile, config, target = ts$1.Scrip
 * @param ogModule the original module file of the class declaration
 * @param targetScriptTarget the script target to convert decorators with, if needed
 * @param barrelHopsRemaining re-export hops still allowed before giving up
+* @param originalModuleSpecifier the specifier this lookup started from, before any barrel hops
+* @param originalContainingFile the file `originalModuleSpecifier` was imported from
 * @returns the found class declaration, or `undefined`
 */
-function resolveAndProcessExtendedClass(compilerCtx, buildCtx, classDeclaration, currentSource, moduleSpecifier, className, dependentClasses, typeChecker, ogModule, targetScriptTarget = ts$1.ScriptTarget.ESNext, barrelHopsRemaining = 1) {
+function resolveAndProcessExtendedClass(compilerCtx, buildCtx, classDeclaration, currentSource, moduleSpecifier, className, dependentClasses, typeChecker, ogModule, targetScriptTarget = ts$1.ScriptTarget.ESNext, barrelHopsRemaining = 1, originalModuleSpecifier = moduleSpecifier, originalContainingFile = currentSource.fileName) {
 	let keepLooking = true;
 	const foundFile = tsResolveModuleName(buildCtx.config, compilerCtx, moduleSpecifier, currentSource.fileName);
 	if (!foundFile?.resolvedModule || !className) return;
@@ -14073,10 +14365,10 @@ function resolveAndProcessExtendedClass(compilerCtx, buildCtx, classDeclaration,
 		}
 		foundSource = convertDiskSourceFileDecorators(foundSource, buildCtx.config, targetScriptTarget);
 	}
-	const matchedStatement = foundSource.statements.find(matchesNamedDeclaration(className));
+	const matchedStatement = findStatementByName(foundSource, className);
 	if (!matchedStatement) {
 		const reExport = barrelHopsRemaining > 0 ? findReExport(foundSource, className) : void 0;
-		if (reExport) return resolveAndProcessExtendedClass(compilerCtx, buildCtx, classDeclaration, foundSource, reExport.moduleSpecifier, reExport.localName, dependentClasses, typeChecker, ogModule, targetScriptTarget, barrelHopsRemaining - 1);
+		if (reExport) return resolveAndProcessExtendedClass(compilerCtx, buildCtx, classDeclaration, foundSource, reExport.moduleSpecifier, reExport.localName, dependentClasses, typeChecker, ogModule, targetScriptTarget, barrelHopsRemaining - 1, originalModuleSpecifier, originalContainingFile);
 		const err = buildWarn(buildCtx.diagnostics);
 		err.messageText = `Unable to find "${className}" in the imported module "${moduleSpecifier}".
                   Please import class / mixin-factory declarations directly and not via barrel files.`;
@@ -14084,16 +14376,25 @@ function resolveAndProcessExtendedClass(compilerCtx, buildCtx, classDeclaration,
 		return;
 	}
 	let foundClassDeclaration = matchedStatement ? ts$1.isClassDeclaration(matchedStatement) ? matchedStatement : void 0 : void 0;
+	let foundClassSource = foundSource;
 	if (!foundClassDeclaration && matchedStatement) {
 		foundClassDeclaration = findClassWalk(matchedStatement);
 		keepLooking = false;
+		if (!foundClassDeclaration && isDtsFile(foundSource.fileName) && !isLocalModule(originalModuleSpecifier)) {
+			const jsSource = resolveModuleJsEntry(buildCtx.config, compilerCtx, originalModuleSpecifier, originalContainingFile);
+			const foundInJs = jsSource && findClassInJsModule(buildCtx.config, compilerCtx, jsSource, className);
+			if (foundInJs) {
+				foundClassDeclaration = foundInJs.classNode;
+				foundClassSource = foundInJs.sourceFile;
+			}
+		}
 		if (!foundClassDeclaration) warnMixinFactoryClassNotFound(buildCtx, className, classDeclaration);
 	}
 	if (foundClassDeclaration && !dependentClasses.some((dc) => dc.classNode === foundClassDeclaration)) {
 		dependentClasses.push({
 			classNode: foundClassDeclaration,
-			sourceFile: foundSource,
-			fileName: foundFile.resolvedModule.resolvedFileName
+			sourceFile: foundClassSource,
+			fileName: foundClassSource.fileName
 		});
 		if (keepLooking) buildExtendsTree(compilerCtx, foundClassDeclaration, dependentClasses, typeChecker, buildCtx, ogModule);
 	}
@@ -14122,6 +14423,7 @@ function buildExtendsTree(compilerCtx, classDeclaration, dependentClasses, typeC
 	const targetScriptTarget = (ogModule?.staticSourceFile)?.languageVersion ?? ts$1.ScriptTarget.ESNext;
 	let classIdentifiers = [];
 	let foundClassDeclaration;
+	let foundClassName;
 	let keepLooking = true;
 	extendsClause.types.forEach((type) => {
 		if (ts$1.isExpressionWithTypeArguments(type) && ts$1.isCallExpression(type.expression) && type.expression.expression.getText() === "Mixin") classIdentifiers = type.expression.arguments.filter(ts$1.isIdentifier);
@@ -14138,9 +14440,11 @@ function buildExtendsTree(compilerCtx, classDeclaration, dependentClasses, typeC
 				declarations = [...source.statements];
 			}
 			foundClassDeclaration = declarations?.find(ts$1.isClassDeclaration);
+			foundClassName = foundClassDeclaration?.name?.getText();
 			if (!foundClassDeclaration) {
 				const node = declarations?.[0];
 				foundClassDeclaration = findClassWalk(node);
+				foundClassName = foundClassDeclaration?.name?.getText() ?? factoryDeclaredName(node);
 				if (!node) throw "revert to sad path";
 				keepLooking = false;
 				if (!foundClassDeclaration) warnMixinFactoryClassNotFound(buildCtx, extendee.getText(), classDeclaration);
@@ -14149,7 +14453,7 @@ function buildExtendsTree(compilerCtx, classDeclaration, dependentClasses, typeC
 				const foundModule = compilerCtx.moduleMap.get(foundClassDeclaration.getSourceFile().fileName);
 				if (foundModule) {
 					const moduleSourceFile = foundModule.staticSourceFile;
-					const sourceClass = findClassWalk(moduleSourceFile, foundClassDeclaration.name?.getText());
+					const sourceClass = findClassWalk(moduleSourceFile, foundClassName);
 					if (sourceClass) {
 						dependentClasses.push({
 							classNode: sourceClass,
@@ -14170,20 +14474,24 @@ function buildExtendsTree(compilerCtx, classDeclaration, dependentClasses, typeC
 				if (!buildCtx.config._isTesting) augmentDiagnosticWithNode(err, classDeclaration);
 				return;
 			}
-			if (matchedStatement && ts$1.isClassDeclaration(matchedStatement)) foundClassDeclaration = matchedStatement;
-			else if (matchedStatement) {
+			if (matchedStatement && ts$1.isClassDeclaration(matchedStatement)) {
+				foundClassDeclaration = matchedStatement;
+				foundClassName = foundClassDeclaration.name?.getText();
+			} else if (matchedStatement) {
 				foundClassDeclaration = findClassWalk(matchedStatement);
+				foundClassName = foundClassDeclaration?.name?.getText() ?? extendee.getText();
 				keepLooking = false;
 				if (!foundClassDeclaration) warnMixinFactoryClassNotFound(buildCtx, extendee.getText(), classDeclaration);
 			} else {
 				foundClassDeclaration = findClassWalk(currentSource, extendee.getText());
+				foundClassName = foundClassDeclaration?.name?.getText() ?? extendee.getText();
 				keepLooking = false;
 			}
 			if (foundClassDeclaration && !dependentClasses.some((dc) => dc.classNode === foundClassDeclaration)) {
 				const foundModule = compilerCtx.moduleMap.get(currentSource.fileName);
 				if (foundModule?.staticSourceFile) {
 					const transformedSource = foundModule.staticSourceFile;
-					const transformedClass = findClassWalk(transformedSource, foundClassDeclaration.name?.getText());
+					const transformedClass = findClassWalk(transformedSource, foundClassName);
 					if (transformedClass) {
 						dependentClasses.push({
 							classNode: transformedClass,
@@ -14468,7 +14776,7 @@ function convertInMemorySourceDecorators(sourceFile, config) {
 		const program = ts$1.createProgram([sourceFile.fileName], compilerOptions, compilerHost);
 		const typeChecker = program.getTypeChecker();
 		const ownSourceFile = program.getSourceFile(sourceFile.fileName) ?? sourceFile;
-		const result = ts$1.transform(ownSourceFile, [convertDecoratorsToStatic(config, [], typeChecker, program)]);
+		const result = ts$1.transform(ownSourceFile, [convertDecoratorsToStatic(config, [], typeChecker, program, true)]);
 		const printed = ts$1.createPrinter({ removeComments: false }).printFile(result.transformed[0]);
 		const scriptKind = sourceFile.fileName.endsWith(".tsx") || sourceFile.fileName.endsWith(".ts") ? ts$1.ScriptKind.TSX : ts$1.ScriptKind.JS;
 		return ts$1.createSourceFile(sourceFile.fileName, printed, sourceFile.languageVersion, true, scriptKind);
@@ -14493,19 +14801,6 @@ function getExtendsClassNames(node) {
 	if (ts$1.isCallExpression(expr) && expr.expression.getText() === "Mixin") return expr.arguments.filter(ts$1.isIdentifier).map((id) => id.text);
 	return [];
 }
-function findImportSpecifier(sf, localName) {
-	for (const stmt of sf.statements) {
-		if (!ts$1.isImportDeclaration(stmt) || !ts$1.isStringLiteral(stmt.moduleSpecifier)) continue;
-		const clause = stmt.importClause;
-		if (!clause) continue;
-		if (clause.name?.text === localName) return stmt.moduleSpecifier.text;
-		const bindings = clause.namedBindings;
-		if (bindings && ts$1.isNamedImports(bindings)) {
-			for (const el of bindings.elements) if (el.name.text === localName) return stmt.moduleSpecifier.text;
-		}
-	}
-	return null;
-}
 /**
 * A single-file mini-program (see `convertInMemorySourceDecorators`) can
 * never load an imported module's own `SourceFile`, so a type that's
@@ -14529,7 +14824,7 @@ function reclassifyGlobalTypeReferences(members, declaringSf, declaringPath, res
 		if (!references) return;
 		Object.entries(references).forEach(([typeName, reference]) => {
 			if (reference.location !== "global") return;
-			const specifier = findImportSpecifier(declaringSf, typeName);
+			const specifier = findImportOrigin(declaringSf, typeName)?.moduleSpecifier;
 			if (!specifier) return;
 			const resolved = resolveImport(specifier, declaringPath);
 			reference.location = "import";
@@ -14552,7 +14847,7 @@ function reclassifyGlobalTypeReferences(members, declaringSf, declaringPath, res
 * differ from `sf`/`path` if resolved through a re-export), or `undefined`
 */
 function findDeclarationOrReExport(sf, path, name, resolveImport) {
-	const direct = sf.statements.find(matchesNamedDeclaration(name));
+	const direct = findStatementByName(sf, name);
 	if (direct) return {
 		statement: direct,
 		sourceFile: sf,
@@ -14565,7 +14860,7 @@ function findDeclarationOrReExport(sf, path, name, resolveImport) {
 	const { code, path: resolvedPath } = resolved;
 	const isTs = resolvedPath.endsWith(".tsx") || resolvedPath.endsWith(".ts");
 	const reExportSf = ts$1.createSourceFile(resolvedPath, code, ts$1.ScriptTarget.ESNext, true, isTs ? ts$1.ScriptKind.TSX : ts$1.ScriptKind.JS);
-	const statement = reExportSf.statements.find(matchesNamedDeclaration(reExport.localName));
+	const statement = findStatementByName(reExportSf, reExport.localName);
 	if (!statement) return void 0;
 	return {
 		statement,
@@ -14602,7 +14897,7 @@ function resolveAncestors(classNode, sf, path, resolveImport, visited, ancestors
 		let foundSf = sf;
 		let foundPath = path;
 		let keepLooking = true;
-		const sameFileStatement = sf.statements.find(matchesNamedDeclaration(parentName));
+		const sameFileStatement = findStatementByName(sf, parentName);
 		if (sameFileStatement) {
 			if (ts$1.isClassDeclaration(sameFileStatement)) foundClass = sameFileStatement;
 			else {
@@ -14611,7 +14906,7 @@ function resolveAncestors(classNode, sf, path, resolveImport, visited, ancestors
 				if (!foundClass) warnMixinFactoryClassNotFound(buildCtx, parentName, rootClassDeclaration);
 			}
 		} else {
-			const specifier = findImportSpecifier(sf, parentName);
+			const specifier = findImportOrigin(sf, parentName)?.moduleSpecifier;
 			if (!specifier) continue;
 			const resolved = resolveImport(specifier, path);
 			if (!resolved) continue;
@@ -14643,7 +14938,8 @@ function resolveAncestors(classNode, sf, path, resolveImport, visited, ancestors
 		ancestors.push({
 			classNode: foundClass,
 			sourceFile: foundSf,
-			path: foundPath
+			path: foundPath,
+			factoryName: parentName
 		});
 		if (keepLooking) resolveAncestors(foundClass, foundSf, foundPath, resolveImport, visited, ancestors, rootClassDeclaration, buildCtx);
 	}
@@ -14660,8 +14956,8 @@ function resolveAncestors(classNode, sf, path, resolveImport, visited, ancestors
 * @returns the ancestor's metadata
 */
 function extractAncestorMeta(ancestor, cmpSourceFile, resolveImport, config) {
-	const { classNode, sourceFile: parentSf, path: resolvedPath } = ancestor;
-	const className = classNode.name?.text;
+	const { classNode, sourceFile: parentSf, path: resolvedPath, factoryName } = ancestor;
+	const className = classNode.name?.text ?? factoryName;
 	const parentStaticMembers = classNode.members.filter(isStaticGetter);
 	let resolvedClassNode = classNode;
 	let resolvedStaticMembers = parentStaticMembers;
@@ -14753,7 +15049,6 @@ function mergeExtendedClassMetaWithResolveImport(cmpNode, staticMembers, sourceF
 //#region src/compiler/transformers/static-to-meta/class-methods.ts
 const parseClassMethods = (classMethods, cmpMeta) => {
 	if (!classMethods?.length) return;
-	const hasHostData = classMethods.includes("hostData");
 	cmpMeta.hasAttributeChangedCallbackFn = classMethods.includes("attributeChangedCallback");
 	cmpMeta.hasConnectedCallbackFn = classMethods.includes("connectedCallback");
 	cmpMeta.hasDisconnectedCallbackFn = classMethods.includes("disconnectedCallback");
@@ -14765,8 +15060,7 @@ const parseClassMethods = (classMethods, cmpMeta) => {
 	cmpMeta.hasComponentShouldUpdateFn = classMethods.includes("componentShouldUpdate");
 	cmpMeta.hasComponentDidUpdateFn = classMethods.includes("componentDidUpdate");
 	cmpMeta.hasLifecycle = cmpMeta.hasComponentWillLoadFn || cmpMeta.hasComponentDidLoadFn || cmpMeta.hasComponentWillUpdateFn || cmpMeta.hasComponentDidUpdateFn;
-	cmpMeta.hasRenderFn = classMethods.includes("render") || hasHostData;
-	cmpMeta.hasVdomRender = cmpMeta.hasVdomRender || hasHostData;
+	cmpMeta.hasRenderFn = classMethods.includes("render");
 };
 //#endregion
 //#region src/compiler/transformers/static-to-meta/element-ref.ts
@@ -15665,6 +15959,7 @@ const transpileModule = (config, input, transformOpts) => {
 		...config,
 		logger: createNodeLogger()
 	};
+	resetDeprecatedApiWarning();
 	const compilerCtx = new CompilerContext();
 	const buildCtx = new BuildContext(config, compilerCtx);
 	const tsCompilerOptions = { ...config.tsCompilerOptions };
@@ -15842,6 +16137,7 @@ const transpileCss = async (transformInput, results) => {
 	results.map = cssResults.map;
 	results.imports = cssResults.imports.map((p) => ({ path: p.importPath }));
 	results.diagnostics.push(...cssResults.diagnostics);
+	if (transformInput.docs) results.styleDocs = cssResults.styleDocs;
 };
 const transpileCssSync = (transformInput, results) => {
 	const cssResults = transformCssToEsmSync(transformInput);
@@ -15849,6 +16145,7 @@ const transpileCssSync = (transformInput, results) => {
 	results.map = cssResults.map;
 	results.imports = cssResults.imports.map((p) => ({ path: p.importPath }));
 	results.diagnostics.push(...cssResults.diagnostics);
+	if (transformInput.docs) results.styleDocs = cssResults.styleDocs;
 };
 const transpileJson = (results) => {
 	results.code = dataToEsm(JSON.parse(results.code), {
@@ -16279,7 +16576,7 @@ const FORM_ASSOCIATED_ATTRIBUTES = [
 * @param cmp the metadata for the component that a type definition string is generated for
 * @param typeImportData locally/imported/globally used type names, which may be used to prevent naming collisions
 * @param areTypesInternal `true` if types being generated are for a project's internal purposes, `false` otherwise
-* @param signalBacking `true` if the component is using signal backing for its props; includes the signals map on the element interface
+* @param signalBacking `true` if the component is using signal backing for its props; includes the signals map on the element interface and unions JSX prop types with `ReadonlySignal<T>`
 * @returns the generated types string alongside additional metadata
 */
 const generateComponentTypes = (cmp, typeImportData, areTypesInternal, signalBacking = false) => {
@@ -16296,8 +16593,12 @@ const generateComponentTypes = (cmp, typeImportData, areTypesInternal, signalBac
 	const isDep = cmp.isCollectionDependency;
 	const propNames = new Set(propAttributes.map((p) => p.name));
 	const formAssociatedAttrs = cmp.formAssociated ? FORM_ASSOCIATED_ATTRIBUTES.filter((attr) => !propNames.has(attr.name)) : [];
+	const jsxPropAttributes = signalBacking ? propAttributes.map((attr) => ({
+		...attr,
+		type: `${attr.type} | ReadonlySignal<${attr.type}>`
+	})) : propAttributes;
 	const jsxAttributes = attributesToMultiLineString([
-		...propAttributes,
+		...jsxPropAttributes,
 		...eventAttributes,
 		...formAssociatedAttrs
 	], true, areTypesInternal);