@stencil/core 5.0.0-alpha.31 → 5.0.0-alpha.33

package/dist/{compiler-Cddp97Pg.mjs → compiler-DjwEWyq2.mjs}

@@ -1,9 +1,9 @@
 import { n as __require } from "./rolldown-runtime-BhDjJH2R.mjs";
-import { O as HYDRATED_CSS, f as scopeCss } from "./client-D1MsT-Rp.mjs";
-import { $ as TYPES, B as GLOBAL_STYLE, C as ASSETS, D as COLLECTION_MANIFEST_FILE_NAME, E as COLLECTION_APP_DATA_FILE_NAME, F as DOCS_JSON, I as DOCS_README, O as COPY, R as EVENT_FLAGS, T as COLLECTION, W as LOADER_BUNDLE, X as STATS, Y as STANDALONE, Z as STYLE_EXT, _ as sortBy, a as fromEntries, b as toTitleCase, d as isNumber$1, et as VALID_CONFIG_OUTPUT_TARGETS, f as isObject, h as noop, i as flatOne, j as DIST_LAZY, l as isFunction, m as mergeIntoWith, n as dashToPascalCase, o as isBoolean$1, p as isString$1, tt as WATCH_FLAGS, u as isIterable, x as unique, y as toDashCase, z as GENERATED_DTS } from "./regular-expression-XqU5zmPp.mjs";
-import { S as formatComponentRuntimeMeta, T as byteSize, _ as loadRolldownDiagnostics, a as getSourceMappingUrlForEndOfFile, b as splitLineBreaks, c as err, f as augmentDiagnosticWithNode, g as isRolldownError, h as createOnWarnFn, i as getInlineSourceMappingUrlLinker, l as map, m as loadTypeScriptDiagnostics, n as validateComponentTag, p as loadTypeScriptDiagnostic, r as isRemoteUrl, s as rolldownToStencilSourceMap, t as validateComponentModes, u as ok, w as stringifyRuntimeData, x as isRootPath, y as normalizeDiagnostics } from "./validation-Dd3g77T5.mjs";
-import { $ as catchError, A as isOutputTargetDocsVscode, B as relativeImport, C as isOutputTargetDistLazy, D as isOutputTargetDocsCustomElementsManifest, E as isOutputTargetDocsCustom, F as isOutputTargetStandalone, G as normalizeFsPathQuery, H as join$2, I as isOutputTargetStats, J as resolve$2, K as normalizePath, L as isOutputTargetTypes, M as isOutputTargetLoaderBundle, N as isOutputTargetSsr, O as isOutputTargetDocsJson, P as isOutputTargetSsrWasm, Q as buildWarn, R as isOutputTargetWww, S as isOutputTargetCustom, T as isOutputTargetDocsAgentSkill, W as normalizeFsPath, X as buildError, Z as buildJsonFileError, a as hasDependency, b as isOutputTargetCollection, d as parsePackageJson, et as hasError, f as readOnlyArrayHasStringMember, g as getComponentsDtsSrcFilePath, h as filterExcludedComponents, i as getTextDocs, j as isOutputTargetGlobalStyle, k as isOutputTargetDocsReadme, l as isTsFile, m as filterActiveTargets, n as createJsVarName, o as isDtsFile, p as readPackageJson, q as relative$1, r as generatePreamble, rt as isGlob, t as addDocBlock, tt as hasWarning, u as isTsxFile, v as getComponentsFromModules, w as isOutputTargetDocs, x as isOutputTargetCopy, y as isOutputTargetAssets, z as isValidConfigOutputTarget } from "./util-BIa-iHnt.mjs";
-import { i as CustomElementsExportBehaviorOptions, o as buildEvents, r as createNodeLogger, t as createNodeSys } from "./node-BQR4L-TG.mjs";
+import { S as HYDRATED_CSS } from "./client-Bqq2Agpl.mjs";
+import { $ as VALID_CONFIG_OUTPUT_TARGETS, A as DIST_LAZY, D as COPY, E as COLLECTION_MANIFEST_FILE_NAME, F as DOCS_README, J as STANDALONE, L as EVENT_FLAGS, P as DOCS_JSON, Q as TYPES, R as GENERATED_DTS, S as ASSETS, T as COLLECTION_APP_DATA_FILE_NAME, U as LOADER_BUNDLE, X as STYLE_EXT, Y as STATS, a as isBoolean$1, b as unique, c as isFunction, d as isObject, et as WATCH_FLAGS, f as isString$1, g as sortBy, i as fromEntries, l as isIterable, m as noop, p as mergeIntoWith, r as flatOne, t as dashToPascalCase, u as isNumber$1, v as toDashCase, w as COLLECTION, y as toTitleCase, z as GLOBAL_STYLE } from "./helpers-Cpp3qc3u.mjs";
+import { E as escapeRegExpSpecialCharacters, S as formatComponentRuntimeMeta, T as byteSize, _ as loadRolldownDiagnostics, a as getSourceMappingUrlForEndOfFile, b as splitLineBreaks, c as err, f as augmentDiagnosticWithNode, g as isRolldownError, h as createOnWarnFn, i as getInlineSourceMappingUrlLinker, l as map, m as loadTypeScriptDiagnostics, n as validateComponentTag, p as loadTypeScriptDiagnostic, r as isRemoteUrl, s as rolldownToStencilSourceMap, t as validateComponentModes, u as ok, w as stringifyRuntimeData, x as isRootPath, y as normalizeDiagnostics } from "./validation-DAdGTrys.mjs";
+import { $ as catchError, A as isOutputTargetDocsVscode, B as relativeImport, C as isOutputTargetDistLazy, D as isOutputTargetDocsCustomElementsManifest, E as isOutputTargetDocsCustom, F as isOutputTargetStandalone, G as normalizeFsPathQuery, H as join$2, I as isOutputTargetStats, J as resolve$2, K as normalizePath, L as isOutputTargetTypes, M as isOutputTargetLoaderBundle, N as isOutputTargetSsr, O as isOutputTargetDocsJson, P as isOutputTargetSsrWasm, Q as buildWarn, R as isOutputTargetWww, S as isOutputTargetCustom, T as isOutputTargetDocsAgentSkill, W as normalizeFsPath, X as buildError, Z as buildJsonFileError, a as hasDependency, b as isOutputTargetCollection, d as parsePackageJson, et as hasError, f as readOnlyArrayHasStringMember, g as getComponentsDtsSrcFilePath, h as filterExcludedComponents, i as getTextDocs, j as isOutputTargetGlobalStyle, k as isOutputTargetDocsReadme, l as isTsFile, m as filterActiveTargets, n as createJsVarName, o as isDtsFile, p as readPackageJson, q as relative$1, r as generatePreamble, rt as isGlob, t as addDocBlock, tt as hasWarning, u as isTsxFile, v as getComponentsFromModules, w as isOutputTargetDocs, x as isOutputTargetCopy, y as isOutputTargetAssets, z as isValidConfigOutputTarget } from "./util-IKfWWLJo.mjs";
+import { i as CustomElementsExportBehaviorOptions, o as buildEvents, r as createNodeLogger, t as createNodeSys } from "./node-DugJ2Vs2.mjs";
 import ts, { default as ts$1 } from "typescript";
 import { readFileSync } from "node:fs";
 import { basename, dirname, isAbsolute, join, resolve } from "node:path";
@@ -28,10 +28,441 @@ import { browserslistToTargets, transform } from "lightningcss";
 import { createJiti } from "jiti";
 import * as process$1 from "process";
 import { dataToEsm } from "@rollup/pluginutils";
+//#region src/utils/shadow-css.ts
+/**
+* @license
+* Copyright Google Inc. All Rights Reserved.
+*
+* Use of this source code is governed by an MIT-style license that can be
+* found in the LICENSE file at https://angular.io/license
+*
+* This file is a port of shadowCSS from `webcomponents.js` to TypeScript.
+* https://github.com/webcomponents/webcomponentsjs/blob/4efecd7e0e/src/ShadowCSS/ShadowCSS.js
+* https://github.com/angular/angular/blob/master/packages/compiler/src/shadow_css.ts
+*/
+const safeSelector = (selector) => {
+	const placeholders = [];
+	let index = 0;
+	selector = selector.replace(/(\[\s*part~=\s*("[^"]*"|'[^']*')\s*\])/g, (_, keep) => {
+		const replaceBy = `__part-${index}__`;
+		placeholders.push(keep);
+		index++;
+		return replaceBy;
+	});
+	selector = selector.replace(/(\[[^\]]*\])/g, (_, keep) => {
+		const replaceBy = `__ph-${index}__`;
+		placeholders.push(keep);
+		index++;
+		return replaceBy;
+	});
+	return {
+		content: selector.replace(/(:nth-[-\w]+)(\([^)]+\))/g, (_, pseudo, exp) => {
+			const replaceBy = `__ph-${index}__`;
+			placeholders.push(exp);
+			index++;
+			return pseudo + replaceBy;
+		}),
+		placeholders
+	};
+};
+const restoreSafeSelector = (placeholders, content) => {
+	content = content.replace(/__part-(\d+)__/g, (_, index) => placeholders[+index]);
+	return content.replace(/__ph-(\d+)__/g, (_, index) => placeholders[+index]);
+};
+const _polyfillHost = "-shadowcsshost";
+const _polyfillSlotted = "-shadowcssslotted";
+const _polyfillHostContext = "-shadowcsscontext";
+let _cssColonHostRe;
+let _cssColonHostContextRe;
+let _cssColonSlottedRe;
+const getCssColonHostRe = () => _cssColonHostRe ??= /* @__PURE__ */ new RegExp("(-shadowcsshost)(?:\\(((?:\\([^)(]*\\)|[^)(]*)+?)\\))?([^,{]*)", "gim");
+const getCssColonHostContextRe = () => _cssColonHostContextRe ??= /* @__PURE__ */ new RegExp("(-shadowcsscontext)(?:\\(((?:\\([^)(]*\\)|[^)(]*)+?)\\))?([^,{]*)", "gim");
+const getCssColonSlottedRe = () => _cssColonSlottedRe ??= /* @__PURE__ */ new RegExp("(-shadowcssslotted)(?:\\(((?:\\([^)(]*\\)|[^)(]*)+?)\\))?([^,{]*)", "gim");
+const _polyfillHostNoCombinator = "-shadowcsshost-no-combinator";
+const _polyfillHostNoCombinatorRe = /-shadowcsshost-no-combinator([^\s]*)/;
+const _shadowDOMSelectorsRe = [/::shadow/g, /::content/g];
+const _safePartRe = /__part-(\d+)__/g;
+const _polyfillHostRe = /-shadowcsshost/gim;
+/**
+* Little helper for generating a regex that will match a specified
+* CSS selector when that selector is _not_ a part of a `@supports` rule.
+*
+* The pattern will match the provided `selector` (i.e. ':host', ':host-context', etc.)
+* when that selector is not a part of a `@supports` selector rule _or_ if the selector
+* is a part of the rule's declaration.
+*
+* For instance, if we create the regex with the selector ':host-context':
+* - '@supports selector(:host-context())' will return no matches (starts with '@supports')
+* - '@supports selector(:host-context()) { :host-context() { ... }}' will match the second ':host-context' (part of declaration)
+* - ':host-context() { ... }' will match ':host-context' (selector is not a '@supports' rule)
+* - ':host() { ... }' will return no matches (selector doesn't match selector used to create regex)
+*
+* @param selector The CSS selector we want to match for replacement
+* @returns A look-behind regex containing the selector
+*/
+const createSupportsRuleRe = (selector) => {
+	const escapedSelector = escapeRegExpSpecialCharacters(selector);
+	return new RegExp(`(^|[^@]|@(?!supports\\s+selector\\s*\\([^{]*?${escapedSelector}))(${escapedSelector}\\b)`, "g");
+};
+const _commentRe = /\/\*\s*[\s\S]*?\*\//g;
+const stripComments = (input) => {
+	return input.replace(_commentRe, "");
+};
+const _commentWithHashRe = /\/\*\s*#\s*source(Mapping)?URL=[\s\S]+?\*\//g;
+const extractCommentsWithHash = (input) => {
+	return input.match(_commentWithHashRe) || [];
+};
+const _ruleRe = /(\s*)([^;{}]+?)(\s*)((?:{%BLOCK%}?\s*;?)|(?:\s*;))/g;
+const _curlyRe = /([{}])/g;
+const _selectorPartsRe = /(^.*?[^\\])??((:+)(.*)|$)/;
+const OPEN_CURLY = "{";
+const CLOSE_CURLY = "}";
+const BLOCK_PLACEHOLDER = "%BLOCK%";
+const processRules = (input, ruleCallback) => {
+	const inputWithEscapedBlocks = escapeBlocks(input);
+	let nextBlockIndex = 0;
+	return inputWithEscapedBlocks.escapedString.replace(_ruleRe, (...m) => {
+		const selector = m[2];
+		let content = "";
+		let suffix = m[4];
+		let contentPrefix = "";
+		if (suffix && suffix.startsWith("{%BLOCK%")) {
+			content = inputWithEscapedBlocks.blocks[nextBlockIndex++];
+			suffix = suffix.substring(8);
+			contentPrefix = "{";
+		}
+		const rule = ruleCallback({
+			selector,
+			content
+		});
+		return `${m[1]}${rule.selector}${m[3]}${contentPrefix}${rule.content}${suffix}`;
+	});
+};
+const escapeBlocks = (input) => {
+	const inputParts = input.split(_curlyRe);
+	const resultParts = [];
+	const escapedBlocks = [];
+	let bracketCount = 0;
+	let currentBlockParts = [];
+	for (let partIndex = 0; partIndex < inputParts.length; partIndex++) {
+		const part = inputParts[partIndex];
+		if (part === CLOSE_CURLY) bracketCount--;
+		if (bracketCount > 0) currentBlockParts.push(part);
+		else {
+			if (currentBlockParts.length > 0) {
+				escapedBlocks.push(currentBlockParts.join(""));
+				resultParts.push(BLOCK_PLACEHOLDER);
+				currentBlockParts = [];
+			}
+			resultParts.push(part);
+		}
+		if (part === OPEN_CURLY) bracketCount++;
+	}
+	if (currentBlockParts.length > 0) {
+		escapedBlocks.push(currentBlockParts.join(""));
+		resultParts.push(BLOCK_PLACEHOLDER);
+	}
+	return {
+		escapedString: resultParts.join(""),
+		blocks: escapedBlocks
+	};
+};
+/**
+* Replaces certain strings within the CSS with placeholders
+* that will later be replaced with class selectors appropriate
+* for the level of encapsulation (shadow or scoped).
+*
+* When performing these replacements, we want to ignore selectors that are a
+* part of an `@supports` rule. Replacing these selectors will result in invalid
+* CSS that gets passed to autoprefixer/postcss once the placeholders are replaced.
+* For example, a rule like:
+*
+* ```css
+* @supports selector(:host()) {
+*   :host {
+*     color: red;
+*   }
+* }
+* ```
+*
+* Should be converted to:
+*
+* ```css
+* @supports selector(:host()) {
+*   -shadowcsshost {
+*     color: red;
+*   }
+* }
+* ```
+*
+* The order the regex replacements happen in matters since we match
+* against a whole selector word so we need to match all of `:host-context`
+* before we try to replace `:host`. Otherwise the pattern for `:host` would match
+* `:host-context` resulting in something like `:-shadowcsshost-context`.
+*
+* @param cssText A CSS string for a component
+* @returns The modified CSS string
+*/
+const insertPolyfillHostInCssText = (cssText) => {
+	const supportsBlocks = [];
+	cssText = cssText.replace(/@supports\s+selector\s*\(\s*([^)]*)\s*\)/g, (_, selectorContent) => {
+		const placeholder = `__supports_${supportsBlocks.length}__`;
+		supportsBlocks.push(selectorContent);
+		return `@supports selector(${placeholder})`;
+	});
+	const _colonSlottedRe = createSupportsRuleRe("::slotted");
+	const _colonHostRe = createSupportsRuleRe(":host");
+	const _colonHostContextRe = createSupportsRuleRe(":host-context");
+	cssText = cssText.replace(_colonHostContextRe, `$1${_polyfillHostContext}`).replace(_colonHostRe, `$1${_polyfillHost}`).replace(_colonSlottedRe, `$1${_polyfillSlotted}`);
+	supportsBlocks.forEach((originalSelector, index) => {
+		cssText = cssText.replace(`__supports_${index}__`, originalSelector);
+	});
+	return cssText;
+};
+const convertColonRule = (cssText, regExp, partReplacer) => {
+	return cssText.replace(regExp, (...m) => {
+		if (m[2]) {
+			const parts = m[2].split(",");
+			const r = [];
+			for (let i = 0; i < parts.length; i++) {
+				const p = parts[i].trim();
+				if (!p) break;
+				r.push(partReplacer(_polyfillHostNoCombinator, p, m[3]));
+			}
+			return r.join(",");
+		} else return _polyfillHostNoCombinator + m[3];
+	});
+};
+const colonHostPartReplacer = (host, part, suffix) => {
+	return host + part.replace(_polyfillHost, "") + suffix;
+};
+const convertColonHost = (cssText) => {
+	return convertColonRule(cssText, getCssColonHostRe(), colonHostPartReplacer);
+};
+const colonHostContextPartReplacer = (host, part, suffix) => {
+	if (part.indexOf(_polyfillHost) > -1) return colonHostPartReplacer(host, part, suffix);
+	else return host + part + suffix + ", " + part + " " + host + suffix;
+};
+const convertColonSlotted = (cssText, slotScopeId) => {
+	const slotClass = "." + slotScopeId + " > ";
+	const selectors = [];
+	cssText = cssText.replace(getCssColonSlottedRe(), (...m) => {
+		if (m[2]) {
+			const compound = m[2].trim();
+			const suffix = m[3];
+			const slottedSelector = slotClass + compound + suffix;
+			let prefixSelector = "";
+			for (let i = m[4] - 1; i >= 0; i--) {
+				const char = m[5][i];
+				if (char === "}" || char === ",") break;
+				prefixSelector = char + prefixSelector;
+			}
+			const orgSelector = (prefixSelector + slottedSelector).trim();
+			const addedSelector = `${prefixSelector.trimEnd()}${slottedSelector.trim()}`.trim();
+			if (orgSelector !== addedSelector) {
+				const updatedSelector = `${addedSelector}, ${orgSelector}`;
+				selectors.push({
+					orgSelector,
+					updatedSelector
+				});
+			}
+			return slottedSelector;
+		} else return _polyfillHostNoCombinator + m[3];
+	});
+	return {
+		selectors,
+		cssText
+	};
+};
+const convertColonHostContext = (cssText) => {
+	return convertColonRule(cssText, getCssColonHostContextRe(), colonHostContextPartReplacer);
+};
+const convertShadowDOMSelectors = (cssText) => {
+	return _shadowDOMSelectorsRe.reduce((result, pattern) => result.replace(pattern, " "), cssText);
+};
+const makeScopeMatcher = (scopeSelector) => {
+	scopeSelector = scopeSelector.replace(/\[/g, "\\[").replace(/\]/g, "\\]");
+	return new RegExp("^(" + scopeSelector + ")([>\\s~+[.,{:][\\s\\S]*)?$", "m");
+};
+const selectorNeedsScoping = (selector, scopeSelector) => {
+	return !makeScopeMatcher(scopeSelector).test(selector);
+};
+const injectScopingSelector = (selector, scopingSelector) => {
+	return selector.replace(_selectorPartsRe, (_, before = "", _colonGroup, colon = "", after = "") => {
+		return before + scopingSelector + colon + after;
+	});
+};
+const applySimpleSelectorScope = (selector, scopeSelector, hostSelector) => {
+	_polyfillHostRe.lastIndex = 0;
+	if (_polyfillHostRe.test(selector)) {
+		const replaceBy = `.${hostSelector}`;
+		return selector.replace(_polyfillHostNoCombinatorRe, (_, sel) => injectScopingSelector(sel, replaceBy)).replace(_polyfillHostRe, replaceBy + " ");
+	}
+	return scopeSelector + " " + selector;
+};
+const applyStrictSelectorScope = (selector, scopeSelector, hostSelector) => {
+	scopeSelector = scopeSelector.replace(/\[is=([^\]]*)\]/g, (_, ...parts) => parts[0]);
+	const className = "." + scopeSelector;
+	const _scopeSelectorPart = (p) => {
+		let scopedP = p.trim();
+		if (!scopedP) return "";
+		if (p.indexOf(_polyfillHostNoCombinator) > -1) scopedP = applySimpleSelectorScope(p, scopeSelector, hostSelector);
+		else {
+			const t = p.replace(_polyfillHostRe, "");
+			if (t.length > 0) scopedP = injectScopingSelector(t, className);
+		}
+		return scopedP;
+	};
+	const safeContent = safeSelector(selector);
+	selector = safeContent.content;
+	let scopedSelector = "";
+	let startIndex = 0;
+	let res;
+	const sep = /( |>|\+|~(?!=))(?=(?:[^()]*\([^()]*\))*[^()]*$)\s*/g;
+	let shouldScope = !(selector.indexOf(_polyfillHostNoCombinator) > -1);
+	while ((res = sep.exec(selector)) !== null) {
+		const separator = res[1];
+		const part = selector.slice(startIndex, res.index).trim();
+		shouldScope = shouldScope || part.indexOf(_polyfillHostNoCombinator) > -1;
+		const scopedPart = shouldScope ? _scopeSelectorPart(part) : part;
+		scopedSelector += `${scopedPart} ${separator} `;
+		startIndex = sep.lastIndex;
+	}
+	const part = selector.substring(startIndex);
+	shouldScope = !part.match(_safePartRe) && (shouldScope || part.indexOf(_polyfillHostNoCombinator) > -1);
+	scopedSelector += shouldScope ? _scopeSelectorPart(part) : part;
+	return restoreSafeSelector(safeContent.placeholders, scopedSelector);
+};
+const scopeSelector = (selector, scopeSelectorText, hostSelector, slotSelector) => {
+	return selector.split(",").map((shallowPart) => {
+		if (slotSelector && shallowPart.indexOf("." + slotSelector) > -1) return shallowPart.trim();
+		if (selectorNeedsScoping(shallowPart, scopeSelectorText)) return applyStrictSelectorScope(shallowPart, scopeSelectorText, hostSelector).trim();
+		else return shallowPart.trim();
+	}).join(", ");
+};
+const scopeSelectors = (cssText, scopeSelectorText, hostSelector, slotSelector, commentOriginalSelector) => {
+	return processRules(cssText, (rule) => {
+		let selector = rule.selector;
+		let content = rule.content;
+		if (rule.selector[0] !== "@") selector = scopeSelector(rule.selector, scopeSelectorText, hostSelector, slotSelector);
+		else if (rule.selector.startsWith("@media") || rule.selector.startsWith("@supports") || rule.selector.startsWith("@page") || rule.selector.startsWith("@document")) content = scopeSelectors(rule.content, scopeSelectorText, hostSelector, slotSelector, commentOriginalSelector);
+		return {
+			selector: selector.replace(/\s{2,}/g, " ").trim(),
+			content
+		};
+	});
+};
+const scopeCssText = (cssText, scopeId, hostScopeId, slotScopeId, commentOriginalSelector) => {
+	cssText = insertPolyfillHostInCssText(cssText);
+	cssText = convertColonHost(cssText);
+	cssText = convertColonHostContext(cssText);
+	const slotted = convertColonSlotted(cssText, slotScopeId);
+	cssText = slotted.cssText;
+	cssText = convertShadowDOMSelectors(cssText);
+	if (scopeId) cssText = scopeSelectors(cssText, scopeId, hostScopeId, slotScopeId, commentOriginalSelector);
+	cssText = replaceShadowCssHost(cssText, hostScopeId);
+	cssText = cssText.replace(/>\s*\*\s+([^{, ]+)/gm, " $1 ");
+	return {
+		cssText: cssText.trim(),
+		slottedSelectors: slotted.selectors.map((ref) => ({
+			orgSelector: replaceShadowCssHost(ref.orgSelector, hostScopeId),
+			updatedSelector: replaceShadowCssHost(ref.updatedSelector, hostScopeId)
+		}))
+	};
+};
+/**
+* Helper function that replaces the interim string representing a `:host` selector with
+* the host scope selector class for the element.
+*
+* @param cssText The CSS string to make the replacement in
+* @param hostScopeId The scope ID that will be used as the class representing the host element
+* @returns CSS with the selector replaced
+*/
+const replaceShadowCssHost = (cssText, hostScopeId) => {
+	return cssText.replace(/-shadowcsshost-no-combinator/g, `.${hostScopeId}`);
+};
+/**
+* Expands selectors with ::part(...) to also include [part~="..."] selectors.
+* For example:
+* ```css
+*   selectors-like-this::part(demo) { ... }
+*   .something .selectors::part(demo demo2):hover { ... }
+* ```
+* Becomes:
+* ```
+* selectors-like-this::part(demo), selectors-like-this [part~="demo"] { ... }
+* .something .selectors::part(demo demo2):hover, .something .selectors [part~="demo"][part~="demo2"]:hover { ... }
+* ```
+*
+* @param cssText The CSS text to process
+* @returns The CSS text with expanded ::part(...) selectors
+*/
+const expandPartSelectors = (cssText) => {
+	const partSelectorRe = /([^\s,{][^,{]*?)::part\(\s*([^)]+?)\s*\)((?:[:.][^,{]*)*)/g;
+	return processRules(cssText, (rule) => {
+		if (rule.selector[0] === "@") return rule;
+		rule.selector = rule.selector.split(",").map((sel) => {
+			const out = [sel.trim()];
+			let m;
+			while ((m = partSelectorRe.exec(sel)) !== null) {
+				const before = m[1].trimEnd();
+				const partNames = m[2].trim().split(/\s+/);
+				const after = m[3] || "";
+				const partAttr = partNames.flatMap((p) => {
+					if (!rule.selector.includes(`[part~="${p}"]`)) return [`[part~="${p}"]`];
+					return [];
+				}).join("");
+				const expanded = `${before} ${partAttr}${after}`;
+				if (!!partAttr && expanded !== sel.trim()) out.push(expanded);
+			}
+			return out.join(", ");
+		}).join(", ");
+		return rule;
+	});
+};
+const scopeCss = (cssText, scopeId, commentOriginalSelector) => {
+	const hostScopeId = scopeId + "-h";
+	const slotScopeId = scopeId + "-s";
+	const commentsWithHash = extractCommentsWithHash(cssText);
+	cssText = stripComments(cssText);
+	const orgSelectors = [];
+	if (commentOriginalSelector) {
+		const processCommentedSelector = (rule) => {
+			const placeholder = `/*!@___${orgSelectors.length}___*/`;
+			const comment = `/*!@${rule.selector}*/`;
+			orgSelectors.push({
+				placeholder,
+				comment
+			});
+			rule.selector = placeholder + rule.selector;
+			return rule;
+		};
+		cssText = processRules(cssText, (rule) => {
+			if (rule.selector[0] !== "@") return processCommentedSelector(rule);
+			else if (rule.selector.startsWith("@media") || rule.selector.startsWith("@supports") || rule.selector.startsWith("@page") || rule.selector.startsWith("@document")) {
+				rule.content = processRules(rule.content, processCommentedSelector);
+				return rule;
+			}
+			return rule;
+		});
+	}
+	const scoped = scopeCssText(cssText, scopeId, hostScopeId, slotScopeId, commentOriginalSelector);
+	cssText = [scoped.cssText, ...commentsWithHash].join("\n");
+	if (commentOriginalSelector) orgSelectors.forEach(({ placeholder, comment }) => {
+		cssText = cssText.replace(placeholder, comment);
+	});
+	scoped.slottedSelectors.forEach((slottedSelector) => {
+		const regex = new RegExp(escapeRegExpSpecialCharacters(slottedSelector.orgSelector) + "(?=\\s*[,{]|$)", "g");
+		cssText = cssText.replace(regex, slottedSelector.updatedSelector);
+	});
+	cssText = expandPartSelectors(cssText);
+	return cssText;
+};
+//#endregion
 //#region src/version.ts
-const version = "5.0.0-alpha.31";
-const buildId = "1787096835";
-const vermoji = "📬";
+const version = "5.0.0-alpha.33";
+const buildId = "1787328414";
+const vermoji = "🎨";
 /**
 * Get the installed version of a tool/dependency.
 * Handles packages with exports maps that point to subdirectories.
@@ -418,6 +849,8 @@ const getBuildFeatures = (cmps) => {
 		shadowDelegatesFocus: shadowDom && cmps.some((c) => c.shadowDelegatesFocus),
 		shadowModeClosed: shadowDom && cmps.some((c) => c.shadowMode === "closed"),
 		shadowSlotAssignmentManual: shadowDom && cmps.some((c) => c.slotAssignment === "manual"),
+		shadowClonable: shadowDom && cmps.some((c) => c.shadowClonable),
+		shadowSerializable: shadowDom && cmps.some((c) => c.shadowSerializable),
 		slot,
 		slotRelocation,
 		state: cmps.some((c) => c.hasState),
@@ -6461,7 +6894,7 @@ const generateEsmBrowser = async (config, compilerCtx, buildCtx, rolldownBuild,
 		if (output != null) {
 			const es2017destinations = esmOutputs.map((o) => o.esmDir).filter((esmDir) => typeof esmDir === "string");
 			buildCtx.esmBrowserComponentBundle = await generateLazyModules(config, compilerCtx, buildCtx, outputTargetType, es2017destinations, output, "es2017", true);
-			await writeEsmForwardingModule(config, compilerCtx, outputTargetType, es2017destinations);
+			await writeEsmForwardingModules(config, compilerCtx, outputTargetType, es2017destinations);
 		}
 	}
 	return {
@@ -6470,7 +6903,7 @@ const generateEsmBrowser = async (config, compilerCtx, buildCtx, rolldownBuild,
 	};
 };
 /**
-* Write a backwards-compatible forwarding module that re-exports from the new .js file.
+* Write backwards-compatible forwarding modules that re-export from the new .js files.
 * This allows existing CDN consumers with hardcoded .esm.js references to continue working.
 *
 * @param config the Stencil configuration
@@ -6478,13 +6911,13 @@ const generateEsmBrowser = async (config, compilerCtx, buildCtx, rolldownBuild,
 * @param outputTargetType the output target type for file writing
 * @param destinations the destination directories to write forwarding modules to
 */
-const writeEsmForwardingModule = async (config, compilerCtx, outputTargetType, destinations) => {
-	const namespace = config.fsNamespace;
-	const forwardingCode = `import './${namespace}.js';\nexport * from './${namespace}.js';\n`;
-	await Promise.all(destinations.map((dest) => {
-		const filePath = join$2(dest, `${namespace}.esm.js`);
+const writeEsmForwardingModules = async (config, compilerCtx, outputTargetType, destinations) => {
+	const entryNames = [config.fsNamespace, "index"];
+	await Promise.all(destinations.flatMap((dest) => entryNames.map((name) => {
+		const forwardingCode = `import './${name}.js';\nexport * from './${name}.js';\n`;
+		const filePath = join$2(dest, `${name}.esm.js`);
 		return compilerCtx.fs.writeFile(filePath, forwardingCode, { outputTargetType });
-	}));
+	})));
 };
 //#endregion
 //#region src/compiler/output-targets/dist-lazy/generate-loader.ts
@@ -13046,6 +13479,8 @@ const componentDecoratorToStatic = (config, typeChecker, diagnostics, cmpNode, n
 			if (enc.mode === "closed") newMembers.push(createStaticGetter("shadowMode", convertValueToLiteral("closed")));
 			if (enc.delegatesFocus === true) newMembers.push(createStaticGetter("delegatesFocus", convertValueToLiteral(true)));
 			if (enc.slotAssignment === "manual") newMembers.push(createStaticGetter("slotAssignment", convertValueToLiteral("manual")));
+			if (enc.clonable === true) newMembers.push(createStaticGetter("clonable", convertValueToLiteral(true)));
+			if (enc.serializable === true) newMembers.push(createStaticGetter("serializable", convertValueToLiteral(true)));
 		} else if (enc.type === "scoped") {
 			newMembers.push(createStaticGetter("encapsulation", convertValueToLiteral("scoped")));
 			if (enc.patches && enc.patches.length > 0) newMembers.push(createStaticGetter("patches", convertValueToLiteral(enc.patches)));
@@ -15706,6 +16141,30 @@ const parseStaticShadowDelegatesFocus = (encapsulation, staticMembers) => {
 	return null;
 };
 /**
+* Find and return if `clonable` is enabled for a component based on the return value of its static getter of the
+* same name.
+*
+* @param encapsulation the encapsulation mode to use for a component
+* @param staticMembers a collection of static getters to search
+* @returns `true` if encapsulation is 'shadow' and the `clonable` static getter returns true
+*/
+const parseStaticShadowClonable = (encapsulation, staticMembers) => {
+	if (encapsulation === "shadow") return !!getStaticValue(staticMembers, "clonable");
+	return null;
+};
+/**
+* Find and return if `serializable` is enabled for a component based on the return value of its static getter of
+* the same name.
+*
+* @param encapsulation the encapsulation mode to use for a component
+* @param staticMembers a collection of static getters to search
+* @returns `true` if encapsulation is 'shadow' and the `serializable` static getter returns true
+*/
+const parseStaticShadowSerializable = (encapsulation, staticMembers) => {
+	if (encapsulation === "shadow") return !!getStaticValue(staticMembers, "serializable");
+	return null;
+};
+/**
 * Find and return the `slotAssignment` mode for a component.
 *
 * @param encapsulation the encapsulation mode to use for a component
@@ -15929,6 +16388,8 @@ const parseStaticComponentMeta = (compilerCtx, typeChecker, cmpNode, moduleFile,
 		elementRef: parseStaticElementRef(staticMembers),
 		encapsulation,
 		shadowDelegatesFocus: !!parseStaticShadowDelegatesFocus(encapsulation, staticMembers),
+		shadowClonable: !!parseStaticShadowClonable(encapsulation, staticMembers),
+		shadowSerializable: !!parseStaticShadowSerializable(encapsulation, staticMembers),
 		shadowMode: parseStaticShadowMode(encapsulation, staticMembers),
 		slotAssignment: parseStaticSlotAssignment(encapsulation, staticMembers),
 		patches: parseStaticPatches(encapsulation, staticMembers),
@@ -24165,4 +24626,4 @@ const shouldTranspileModule = (ext) => [
 	"js"
 ].includes(ext);
 //#endregion
-export { version as C, vermoji as S, cmpMetaToDocsComponent as _, createPrerenderer as a, getBuildFeatures as b, createWorkerContext as c, nodeRequire as d, optimizeCss as f, generateManifest as g, Cache as h, createSystem as i, createWorkerMessageHandler as l, validateConfig as m, transpile as n, loadConfig as o, createInMemoryFs as p, transpileSync as r, createCompiler as s, ts$1 as t, optimizeJs as u, BuildContext as v, versions as w, buildId as x, getScopeId as y };
+export { buildId as _, createPrerenderer as a, versions as b, createWorkerContext as c, nodeRequire as d, optimizeCss as f, getScopeId as g, cmpMetaToDocsComponent as h, createSystem as i, createWorkerMessageHandler as l, generateManifest as m, transpile as n, loadConfig as o, validateConfig as p, transpileSync as r, createCompiler as s, ts$1 as t, optimizeJs as u, vermoji as v, scopeCss as x, version as y };

package/dist/declarations/stencil-public-compiler.d.ts

@@ -666,6 +666,8 @@ interface BuildFeatures {
   shadowDelegatesFocus: boolean;
   shadowModeClosed: boolean;
   shadowSlotAssignmentManual: boolean;
+  shadowClonable: boolean;
+  shadowSerializable: boolean;
   scoped: boolean;
   /**
    * Every component has a render function
@@ -1162,6 +1164,16 @@ interface ComponentCompilerMeta extends ComponentCompilerFeatures {
   properties: ComponentCompilerProperty[];
   serializers: ComponentCompilerChangeHandler[];
   shadowDelegatesFocus: boolean;
+  /**
+   * Whether the shadow root is preserved when the host element is deep-cloned via
+   * `Node.cloneNode(true)`. Only applicable when encapsulation is 'shadow'.
+   */
+  shadowClonable: boolean;
+  /**
+   * Whether the shadow root is marked serializable for `Element.getHTML({ serializableShadowRoots: true })`.
+   * Only applicable when encapsulation is 'shadow'.
+   */
+  shadowSerializable: boolean;
   /**
    * Shadow DOM mode. 'open' (default) or 'closed'.
    * Only applicable when encapsulation is 'shadow'.
@@ -4270,9 +4282,11 @@ interface CompilerRequestResponse {
 interface TranspileOptions {
   /**
    * A component can be defined as a custom element by using `customelement`, or the
-   * component class can be exported by using `module`. Default is `customelement`.
+   * component class can be exported by using `module`. Set to `null` to leave the
+   * class's own export as-is (used with `componentMetadata: 'compilerstatic'` for
+   * unit-testing preprocessors). Default is `customelement`.
    */
-  componentExport?: 'customelement' | 'module' | string | undefined;
+  componentExport?: 'customelement' | 'module' | string | null | undefined;
   /**
    * Sets how and if component metadata should be assigned on the compiled
    * component output. The `compilerstatic` value will set the metadata to
@@ -4307,8 +4321,11 @@ interface TranspileOptions {
   /**
    * How component styles should be associated to the component. The `static`
    * setting will assign the styles as a static getter on the component class.
+   * Set to `null` to skip the assignment entirely (and leave any `styleUrl`
+   * import unresolved) - useful for unit-testing preprocessors that don't
+   * need real stylesheets.
    */
-  style?: 'static' | string | undefined;
+  style?: 'static' | string | null | undefined;
   /**
    * How style data should be added for imports. For example, the `queryparams` value
    * adds the component's tagname and encapsulation info as querystring parameter

package/dist/declarations/stencil-public-runtime.d.ts

@@ -102,6 +102,16 @@ interface ShadowEncapsulation {
    * declarative slotting behavior.
    */
   slotAssignment?: 'manual' | 'named';
+  /**
+   * When set to `true`, the shadow root is preserved when the host element is deep-cloned via
+   * `Node.cloneNode(true)`. Without this, cloning a shadow host produces an empty shell.
+   */
+  clonable?: boolean;
+  /**
+   * When set to `true`, marks the shadow root as serializable so it is included when the host
+   * element is serialized via `Element.getHTML({ serializableShadowRoots: true })`.
+   */
+  serializable?: boolean;
 }
 /**
  * Patch types for non-shadow DOM components that use slots.