@stencil/core 5.0.0-beta.0 → 5.0.0-beta.10

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

@@ -1650,6 +1650,12 @@ interface TransformCssToEsmOutput {
     varName: string;
     importPath: string;
   }[];
+  /**
+   * Whether `output` itself has an observable side effect (a plain, untagged CSS file's
+   * generated module self-injects CSSStyleSheets; a Stencil component's tagged `styleUrl`
+   * output doesn't)
+   */
+  moduleSideEffects?: boolean;
 }
 interface PackageJsonData {
   name?: string;
@@ -1791,7 +1797,8 @@ interface StencilConfig {
    * Will generate {@link https://nodejs.org/api/packages.html#packages_exports export map} entry points
    * for each component in the build when `true`.
    *
-   * @default false
+   * Defaults to `true` for "no-config" projects (no `stencil.config.ts`/`.js` file), and `false`
+   * whenever a config file is present - set this explicitly to opt an existing project in or out.
    */
   generateExportMaps?: boolean;
   /**
@@ -1845,10 +1852,19 @@ interface StencilConfig {
    */
   rolldownConfig?: RolldownConfig;
   /**
-   * Sets if the JS browser files are minified or not. Stencil uses `terser` under the hood.
+   * Sets if the JS browser files are minified or not.
    * Defaults to `false` in dev mode and `true` in production mode.
    */
   minifyJs?: boolean;
+  /**
+   * Which minifier to use for JS output when `minifyJs` is enabled.
+   *
+   * - `oxc`: built into rolldown. Much faster than terser. Output may be slightly larger.
+   * - `terser`: slower, but currently produces the smallest output.
+   *
+   * Defaults to `oxc`.
+   */
+  jsMinifier?: 'terser' | 'oxc';
   /**
    * Sets if the CSS is minified or not.
    * Defaults to `false` in dev mode and `true` in production mode.
@@ -2194,7 +2210,7 @@ type RequireFields<T, K extends keyof T> = T & { [P in K]-?: T[P]; };
 /**
  * Fields in {@link Config} to make required for {@link ValidatedConfig}
  */
-type StrictConfigFields = keyof Pick<Config, 'cacheDir' | 'devServer' | 'compat' | 'fsNamespace' | 'hydratedFlag' | 'logLevel' | 'logger' | 'minifyCss' | 'minifyJs' | 'namespace' | 'outputTargets' | 'packageJsonFilePath' | 'rolldownConfig' | 'rootDir' | 'srcDir' | 'srcIndexHtml' | 'sys' | 'transformAliasedImportPaths'>;
+type StrictConfigFields = keyof Pick<Config, 'cacheDir' | 'devServer' | 'compat' | 'fsNamespace' | 'hydratedFlag' | 'jsMinifier' | 'logLevel' | 'logger' | 'minifyCss' | 'minifyJs' | 'namespace' | 'outputTargets' | 'packageJsonFilePath' | 'rolldownConfig' | 'rootDir' | 'srcDir' | 'srcIndexHtml' | 'sys' | 'transformAliasedImportPaths'>;
 /**
  * A version of {@link Config} that makes certain fields required. This type represents a valid configuration entity.
  * When a configuration is received by the user, it is a bag of unverified data. In order to make stricter guarantees
@@ -4457,7 +4473,7 @@ type BuildOverrideKeys = 'hotModuleReplacement' | 'signalBacking' | 'vdomSignals
  * and types stay in sync with the authoritative definition.
  */
 type BuildOverrides = Pick<BuildConditionals, BuildOverrideKeys>;
-type CompileTarget = 'latest' | 'esnext' | 'es2020' | 'es2019' | 'es2018' | 'es2017' | 'es2015' | string | undefined;
+type CompileTarget = 'latest' | 'esnext' | 'es2022' | 'es2020' | 'es2019' | 'es2018' | 'es2017' | string | undefined;
 interface TranspileResults {
   code: string;
   data?: any[];

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

@@ -463,7 +463,7 @@ declare function getAssetPath(path: string): string;
  * @param vnode - The virtual DOM tree to render
  * @param container - The container element to render the virtual DOM tree to
  */
-declare function render(vnode: VNode, container: Element): void;
+declare function render(vnode: VNode, container: globalThis.Element): void;
 /**
  * Used to manually set the base path where assets can be found. For lazy-loaded
  * builds the asset path is automatically set and assets copied to the correct
@@ -567,6 +567,22 @@ declare function setTagTransformer(transformer: TagTransformer): void;
  * @returns the transformed tag e.g. `new-my-tag`
  */
 declare function transformTag(tag: string): string;
+/**
+ * Registers a root - a shadowRoot, or `document` - to receive every plain CSS import
+ * (e.g. a dependency's own `import './foo.css'`) applied as a side effect.
+ * Call once per component instance that needs it, e.g. in `connectedCallback`.
+ * Pair with {@link unregisterSideEffectStyleTarget} in `disconnectedCallback`.
+ *
+ * @param root the root to register
+ */
+declare function registerSideEffectStyleTarget(root: DocumentOrShadowRoot): void;
+/**
+ * Removes a root registered via {@link registerSideEffectStyleTarget} - call in
+ * `disconnectedCallback`.
+ *
+ * @param root the root to unregister
+ */
+declare function unregisterSideEffectStyleTarget(root: DocumentOrShadowRoot): void;
 type MixinFactory = (base: MixedInCtor) => MixedInCtor;
 /**
  * A constructor type that can be used as the base for mixin factories.
@@ -1169,7 +1185,7 @@ declare namespace JSXBase {
     type?: string;
     value?: string | string[] | number;
     popoverTargetAction?: string;
-    popoverTargetElement?: Element | null;
+    popoverTargetElement?: globalThis.Element | null;
     popoverTarget?: string;
     command?: string;
     commandFor?: string;
@@ -1341,7 +1357,7 @@ declare namespace JSXBase {
     webkitEntries?: any;
     width?: number | string;
     popoverTargetAction?: string;
-    popoverTargetElement?: Element | null;
+    popoverTargetElement?: globalThis.Element | null;
     popoverTarget?: string;
   }
   interface KeygenHTMLAttributes<T> extends HTMLAttributes<T> {
@@ -2047,7 +2063,7 @@ declare namespace JSXBase {
     [key: `aria${string}`]: string | boolean | undefined;
   }
 }
-interface JSXAttributes<T = Element> {
+interface JSXAttributes<T = globalThis.Element> {
   key?: string | number;
   ref?: (elm?: T) => void;
   children?: any;
@@ -2064,4 +2080,4 @@ interface CustomElementsDefineOptions {
   ce?: (eventName: string, opts?: any) => CustomEvent;
 }
 //#endregion
-export { AttachInternals, AttachInternalsDecorator, AttachInternalsOptions, AttrDeserialize, AttrDeserializeDecorator, Build, ChildNode, Component, ComponentDecorator, ComponentDidLoad, ComponentDidUpdate, ComponentInterface, ComponentOptions, ComponentShouldUpdateChanges, ComponentWillLoad, ComponentWillUpdate, CustomElementsDefineOptions, Element, ElementDecorator, EncapsulationOptions, Env, ErrorHandler, Event, EventDecorator, EventEmitter, EventOptions, Fragment, FunctionalComponent, FunctionalUtilities, HTMLStencilElement, Host, HostAttributes, LocalJSX as JSX, JSXAttributes, JSXBase, Listen, ListenDecorator, ListenOptions, ListenTargetOptions, Method, MethodDecorator, MethodOptions, MixedInCtor, Mixin, ModeStyles, NoneEncapsulation, Prop, PropDecorator, PropOptions, PropSerialize, PropSerializeDecorator, QueueApi, RafCallback, ReactiveController, ReactiveControllerHost, ReactiveControllerHostInterface, ResolutionHandler, ResolveVarFunction, ScopedEncapsulation, ShadowEncapsulation, ShadowRootOptions, SignalRef, SlotPatch, State, StateDecorator, TagTransformer, UserBuildConditionals, VNode, VNodeData, Watch, WatchDecorator, forceUpdate, getAssetPath, getElement, getMode, getRenderingRef, getShadowRoot, h, jsx, jsxs, readTask, render, resolveVar, setAssetPath, setErrorHandler, setMode, setNonce, setPlatformHelpers, setTagTransformer, transformTag, writeTask };
+export { AttachInternals, AttachInternalsDecorator, AttachInternalsOptions, AttrDeserialize, AttrDeserializeDecorator, Build, ChildNode, Component, ComponentDecorator, ComponentDidLoad, ComponentDidUpdate, ComponentInterface, ComponentOptions, ComponentShouldUpdateChanges, ComponentWillLoad, ComponentWillUpdate, CustomElementsDefineOptions, Element, ElementDecorator, EncapsulationOptions, Env, ErrorHandler, Event, EventDecorator, EventEmitter, EventOptions, Fragment, FunctionalComponent, FunctionalUtilities, HTMLStencilElement, Host, HostAttributes, LocalJSX as JSX, JSXAttributes, JSXBase, Listen, ListenDecorator, ListenOptions, ListenTargetOptions, Method, MethodDecorator, MethodOptions, MixedInCtor, Mixin, ModeStyles, NoneEncapsulation, Prop, PropDecorator, PropOptions, PropSerialize, PropSerializeDecorator, QueueApi, RafCallback, ReactiveController, ReactiveControllerHost, ReactiveControllerHostInterface, ResolutionHandler, ResolveVarFunction, ScopedEncapsulation, ShadowEncapsulation, ShadowRootOptions, SignalRef, SlotPatch, State, StateDecorator, TagTransformer, UserBuildConditionals, VNode, VNodeData, Watch, WatchDecorator, forceUpdate, getAssetPath, getElement, getMode, getRenderingRef, getShadowRoot, h, jsx, jsxs, readTask, registerSideEffectStyleTarget, render, resolveVar, setAssetPath, setErrorHandler, setMode, setNonce, setPlatformHelpers, setTagTransformer, transformTag, unregisterSideEffectStyleTarget, writeTask };

package/dist/{index-BOrz3rbJ.d.mts → index-BAP9T4CB.d.mts}

@@ -1,4 +1,4 @@
-import { Gn as FunctionalComponent, Qn as VNode, Wn as ErrorHandler, Xn as TagTransformer, Yn as ResolutionHandler, Zn as UserBuildConditionals, a as HostElement, l as PropsType, qn as RafCallback, t as ChildType, u as RuntimeRef } from "./index-RrQfiPWK.mjs";
+import { Gn as FunctionalComponent, Qn as VNode, Wn as ErrorHandler, Xn as TagTransformer, Yn as ResolutionHandler, Zn as UserBuildConditionals, a as HostElement, l as PropsType, qn as RafCallback, t as ChildType, u as RuntimeRef } from "./index-BvF31nqP.mjs";
 //#region src/client/client-build.d.ts
 declare const Build: UserBuildConditionals;
 //#endregion

package/dist/{index-DnISpqrd.d.ts → index-BXAcVN2j.d.ts}

@@ -1,9 +1,6 @@
 import "rolldown";
 import "typescript";
 //#region src/declarations/stencil-public-runtime.d.ts
-interface ElementDecorator {
-  (): PropertyDecorator;
-}
 interface EventDecorator {
   (opts?: EventOptions): PropertyDecorator;
 }
@@ -25,11 +22,6 @@ interface EventOptions {
    */
   composed?: boolean;
 }
-/**
- * The `@Element()` decorator is a reference to the actual host element
- * once it has rendered.
- */
-declare const Element$1: ElementDecorator;
 /**
  * Components can emit data and events using the Event Emitter decorator.
  * To dispatch Custom DOM events for other components to handle, use the
@@ -460,7 +452,7 @@ declare namespace JSXBase {
     type?: string;
     value?: string | string[] | number;
     popoverTargetAction?: string;
-    popoverTargetElement?: Element$1 | null;
+    popoverTargetElement?: globalThis.Element | null;
     popoverTarget?: string;
     command?: string;
     commandFor?: string;
@@ -632,7 +624,7 @@ declare namespace JSXBase {
     webkitEntries?: any;
     width?: number | string;
     popoverTargetAction?: string;
-    popoverTargetElement?: Element$1 | null;
+    popoverTargetElement?: globalThis.Element | null;
     popoverTarget?: string;
   }
   interface KeygenHTMLAttributes<T> extends HTMLAttributes<T> {
@@ -1338,7 +1330,7 @@ declare namespace JSXBase {
     [key: `aria${string}`]: string | boolean | undefined;
   }
 }
-interface JSXAttributes<T = Element$1> {
+interface JSXAttributes<T = globalThis.Element> {
   key?: string | number;
   ref?: (elm?: T) => void;
   children?: any;

package/dist/{index-RrQfiPWK.d.mts → index-BvF31nqP.d.mts}

@@ -1784,7 +1784,8 @@ interface StencilConfig {
    * Will generate {@link https://nodejs.org/api/packages.html#packages_exports export map} entry points
    * for each component in the build when `true`.
    *
-   * @default false
+   * Defaults to `true` for "no-config" projects (no `stencil.config.ts`/`.js` file), and `false`
+   * whenever a config file is present - set this explicitly to opt an existing project in or out.
    */
   generateExportMaps?: boolean;
   /**
@@ -1838,10 +1839,19 @@ interface StencilConfig {
    */
   rolldownConfig?: RolldownConfig;
   /**
-   * Sets if the JS browser files are minified or not. Stencil uses `terser` under the hood.
+   * Sets if the JS browser files are minified or not.
    * Defaults to `false` in dev mode and `true` in production mode.
    */
   minifyJs?: boolean;
+  /**
+   * Which minifier to use for JS output when `minifyJs` is enabled.
+   *
+   * - `oxc`: built into rolldown. Much faster than terser. Output may be slightly larger.
+   * - `terser`: slower, but currently produces the smallest output.
+   *
+   * Defaults to `oxc`.
+   */
+  jsMinifier?: 'terser' | 'oxc';
   /**
    * Sets if the CSS is minified or not.
    * Defaults to `false` in dev mode and `true` in production mode.
@@ -2187,7 +2197,7 @@ type RequireFields<T, K extends keyof T> = T & { [P in K]-?: T[P]; };
 /**
  * Fields in {@link Config} to make required for {@link ValidatedConfig}
  */
-type StrictConfigFields = keyof Pick<Config, 'cacheDir' | 'devServer' | 'compat' | 'fsNamespace' | 'hydratedFlag' | 'logLevel' | 'logger' | 'minifyCss' | 'minifyJs' | 'namespace' | 'outputTargets' | 'packageJsonFilePath' | 'rolldownConfig' | 'rootDir' | 'srcDir' | 'srcIndexHtml' | 'sys' | 'transformAliasedImportPaths'>;
+type StrictConfigFields = keyof Pick<Config, 'cacheDir' | 'devServer' | 'compat' | 'fsNamespace' | 'hydratedFlag' | 'jsMinifier' | 'logLevel' | 'logger' | 'minifyCss' | 'minifyJs' | 'namespace' | 'outputTargets' | 'packageJsonFilePath' | 'rolldownConfig' | 'rootDir' | 'srcDir' | 'srcIndexHtml' | 'sys' | 'transformAliasedImportPaths'>;
 /**
  * A version of {@link Config} that makes certain fields required. This type represents a valid configuration entity.
  * When a configuration is received by the user, it is a bag of unverified data. In order to make stricter guarantees
@@ -4450,7 +4460,7 @@ type BuildOverrideKeys = 'hotModuleReplacement' | 'signalBacking' | 'vdomSignals
  * and types stay in sync with the authoritative definition.
  */
 type BuildOverrides = Pick<BuildConditionals, BuildOverrideKeys>;
-type CompileTarget = 'latest' | 'esnext' | 'es2020' | 'es2019' | 'es2018' | 'es2017' | 'es2015' | string | undefined;
+type CompileTarget = 'latest' | 'esnext' | 'es2022' | 'es2020' | 'es2019' | 'es2018' | 'es2017' | string | undefined;
 interface TranspileResults {
   code: string;
   data?: any[];
@@ -6062,6 +6072,12 @@ interface TransformCssToEsmOutput {
     varName: string;
     importPath: string;
   }[];
+  /**
+   * Whether `output` itself has an observable side effect (a plain, untagged CSS file's
+   * generated module self-injects CSSStyleSheets; a Stencil component's tagged `styleUrl`
+   * output doesn't)
+   */
+  moduleSideEffects?: boolean;
 }
 interface PackageJsonData {
   name?: string;

package/dist/index.d.mts

@@ -57,6 +57,7 @@ export {
   Prop,
   readTask,
   ReactiveControllerHost,
+  registerSideEffectStyleTarget,
   render,
   resolveVar,
   setAssetPath,
@@ -67,6 +68,7 @@ export {
   setTagTransformer,
   State,
   transformTag,
+  unregisterSideEffectStyleTarget,
   Watch,
   writeTask,
 } from './declarations/stencil-public-runtime';

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { C as setErrorHandler, _ as getAssetPath, a as transformTag, b as writeTask, c as Mixin, d as Host, f as h, g as getShadowRoot, h as getElement, i as setTagTransformer, l as getMode, m as getRenderingRef, o as render, p as forceUpdate, s as ReactiveControllerHost, u as setMode, v as setAssetPath, w as Build, x as setPlatformHelpers, y as readTask } from "./client-BRu0GtRn.mjs";
+import { C as setErrorHandler, _ as getAssetPath, a as transformTag, b as writeTask, c as Mixin, d as Host, f as h, g as getShadowRoot, h as getElement, i as setTagTransformer, l as getMode, m as getRenderingRef, o as render, p as forceUpdate, s as ReactiveControllerHost, u as setMode, v as setAssetPath, w as Build, x as setPlatformHelpers, y as readTask } from "./client-Db2rdxUM.mjs";
 import { t as Fragment } from "./fragment-Di1hWOC8.mjs";
 //#region src/client/client-decorators.ts
 /**
@@ -88,4 +88,84 @@ const AttrDeserialize = (_propName) => () => {};
 */
 const resolveVar = (variable) => String(variable);
 //#endregion
-export { AttachInternals, AttrDeserialize, Build, Component, Element, Event, Fragment, Host, Listen, Method, Mixin, Prop, PropSerialize, ReactiveControllerHost, State, Watch, forceUpdate, getAssetPath, getElement, getMode, getRenderingRef, getShadowRoot, h, readTask, render, resolveVar, setAssetPath, setErrorHandler, setMode, setPlatformHelpers, setTagTransformer, transformTag, writeTask };
+//#region src/runtime/inject-side-effect-style.ts
+const styleSheets = /* @__PURE__ */ new Map();
+const knownRoots = /* @__PURE__ */ new Set();
+const adoptedRoots = /* @__PURE__ */ new WeakMap();
+const knownFontFaces = /* @__PURE__ */ new Set();
+const adopt = (root, sheet) => {
+	let roots = adoptedRoots.get(sheet);
+	if (!roots) {
+		roots = /* @__PURE__ */ new WeakSet();
+		adoptedRoots.set(sheet, roots);
+	}
+	if (!roots.has(root)) {
+		roots.add(root);
+		root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
+	}
+};
+/**
+* Registers a root (a shadow root, or `document`) to receive every side-effect CSS import
+* (a plain, non-component `import './foo.css'`), now and in future. Call in `connectedCallback`,
+* paired with `unregisterSideEffectStyleTarget` in `disconnectedCallback` so the registry doesn't
+* hold disconnected roots forever.
+* @param root the root to register
+*/
+function registerSideEffectStyleTarget(root) {
+	knownRoots.add(root);
+	for (const sheet of styleSheets.values()) adopt(root, sheet);
+}
+/**
+* Removes a root registered via `registerSideEffectStyleTarget` - call in `disconnectedCallback`.
+* @param root the root to unregister
+*/
+function unregisterSideEffectStyleTarget(root) {
+	knownRoots.delete(root);
+}
+const FONT_FACE_RE = /@font-face\s*\{[^{}]*\}/g;
+/**
+* Splits `@font-face` rules out of a CSS text - exported standalone (from private
+* module state - usually 3rd party node_modules) exported for testing
+* @param cssText the CSS text to split
+* @returns the font-face rules joined together (`null` if there were none) and the remaining CSS
+*/
+function splitFontFaces(cssText) {
+	const fontFaces = cssText.match(FONT_FACE_RE);
+	if (!fontFaces) return {
+		fontFaceText: null,
+		rest: cssText
+	};
+	return {
+		fontFaceText: fontFaces.join("\n"),
+		rest: cssText.replace(FONT_FACE_RE, "")
+	};
+}
+/**
+* Applies plain (non-component) CSS text to every registered root - respects shadow DOM
+* encapsulation instead of always reaching for the top-level document. Not meant to be called
+* directly: this is what the compiler's CSS-to-ESM output calls for CSS with no Stencil `tag`
+* (i.e. not a component's own `styleUrl`), typically a third-party dependency's CSS import.
+*
+* `@font-face` rules are pulled out and adopted onto top-level `document` not per-root
+* (Chromium (https://issues.chromium.org/issues/41085401) per-root never loads).
+* @param cssText the CSS text to apply
+*/
+function injectSideEffectStyle(cssText) {
+	const { fontFaceText, rest } = splitFontFaces(cssText);
+	if (fontFaceText && !knownFontFaces.has(fontFaceText)) {
+		knownFontFaces.add(fontFaceText);
+		const fontFaceSheet = new CSSStyleSheet();
+		fontFaceSheet.replaceSync(fontFaceText);
+		document.adoptedStyleSheets = [...document.adoptedStyleSheets, fontFaceSheet];
+	}
+	if (!rest.trim()) return;
+	let sheet = styleSheets.get(rest);
+	if (!sheet) {
+		sheet = new CSSStyleSheet();
+		sheet.replaceSync(rest);
+		styleSheets.set(rest, sheet);
+	}
+	for (const root of knownRoots) adopt(root, sheet);
+}
+//#endregion
+export { AttachInternals, AttrDeserialize, Build, Component, Element, Event, Fragment, Host, Listen, Method, Mixin, Prop, PropSerialize, ReactiveControllerHost, State, Watch, forceUpdate, getAssetPath, getElement, getMode, getRenderingRef, getShadowRoot, h, injectSideEffectStyle, readTask, registerSideEffectStyleTarget, render, resolveVar, setAssetPath, setErrorHandler, setMode, setPlatformHelpers, setTagTransformer, transformTag, unregisterSideEffectStyleTarget, writeTask };

package/dist/jsx-runtime.mjs

@@ -1,3 +1,3 @@
-import { n as jsxDEV, r as jsxs, t as jsx } from "./client-BRu0GtRn.mjs";
+import { n as jsxDEV, r as jsxs, t as jsx } from "./client-Db2rdxUM.mjs";
 import { t as Fragment } from "./fragment-Di1hWOC8.mjs";
 export { Fragment, jsx, jsxDEV, jsxs };

package/dist/{node-75gQKkFz.mjs → node-BKtLn2R9.mjs}

@@ -1,5 +1,5 @@
 import { n as __require } from "./rolldown-runtime-BhDjJH2R.mjs";
-import "./client-BRu0GtRn.mjs";
+import "./client-Db2rdxUM.mjs";
 import { c as isFunction, f as isString, m as noop, r as flatOne } from "./helpers-Cpp3qc3u.mjs";
 import { $ as catchError, K as normalizePath, X as buildError, Y as TASK_CANCELED_MSG, nt as shouldIgnoreError, rt as isGlob } from "./util-IKfWWLJo.mjs";
 import fs from "node:fs";

package/dist/runtime/client/lazy.js

@@ -463,8 +463,6 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
 	if (module) return module[exportName];
 	const retryCount = failedLoadAttempts.get(bundleId) ?? 0;
 	const cacheBustParams = [retryCount > 0 ? `s-retry=${retryCount}` : "", BUILD.hotModuleReplacement && hmrVersionId ? `s-hmr=${hmrVersionId}` : ""].filter(Boolean).join("&");
-	/*!__STENCIL_STATIC_IMPORT_SWITCH__*/
-	const entryFile = `${bundleId}.entry.js${cacheBustParams ? "?" + cacheBustParams : ""}`;
 	const onLoad = (importedModule) => {
 		if (!BUILD.hotModuleReplacement) {
 			failedLoadAttempts.delete(bundleId);
@@ -476,6 +474,8 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
 		failedLoadAttempts.set(bundleId, retryCount + 1);
 		consoleError(e, hostRef.$hostElement$);
 	};
+	/*!__STENCIL_STATIC_IMPORT_SWITCH__*/
+	const entryFile = `${bundleId}.entry.js${cacheBustParams ? "?" + cacheBustParams : ""}`;
 	if (lazyLoadBasePath) return import(
 		/* @vite-ignore */
 		/* webpackInclude: /\.entry\.js$/ */
@@ -1983,16 +1983,33 @@ const signalNodeDisposers = /* @__PURE__ */ new WeakMap();
 const disposeSignalVNode = (vnode) => {
 	const elm = vnode.$elm$;
 	if (elm) {
-		const dispose = signalNodeDisposers.get(elm);
-		if (dispose) {
-			dispose();
-			signalNodeDisposers.delete(elm);
-		}
+		disposeTextSignal(elm);
 		disposeAllSignalAttrs(elm);
 	}
 	vnode.$children$?.forEach(disposeSignalVNode);
 };
 /**
+* Tear down a text node's signal subscription, if it has one.
+* @param textNode the text node to unsubscribe
+*/
+const disposeTextSignal = (textNode) => {
+	const dispose = signalNodeDisposers.get(textNode);
+	if (dispose) {
+		dispose();
+		signalNodeDisposers.delete(textNode);
+	}
+};
+/**
+* Subscribe a text node to a signal, keeping its `data` in sync on every change.
+* @param textNode the text node to keep in sync
+* @param textSig the signal to subscribe to
+*/
+const wireTextSignal = (textNode, textSig) => {
+	signalNodeDisposers.set(textNode, effect$1(() => {
+		textNode.data = String(textSig.value);
+	}));
+};
+/**
 * Create a DOM Node corresponding to one of the children of a given VNode.
 *
 * @param oldParentVNode the parent VNode from the previous render
@@ -2014,13 +2031,7 @@ const createElm = (oldParentVNode, newParentVNode, childIndex) => {
 	if (BUILD.isDev && newVNode.$elm$) consoleDevError(`The JSX ${newVNode.$text$ !== null ? `"${newVNode.$text$}" text` : `"${String(newVNode.$tag$)}" element`} node should not be shared within the same renderer. The renderer caches element lookups in order to improve performance. However, a side effect from this is that the exact same JSX node should not be reused. For more information please see https://stenciljs.com/docs/templating-jsx#avoid-shared-jsx-nodes`);
 	if (BUILD.vdomText && newVNode.$text$ != null) {
 		elm = newVNode.$elm$ = win.document.createTextNode(newVNode.$text$);
-		if (BUILD.vdomSignals && newVNode.$signal$) {
-			const textSig = newVNode.$signal$;
-			const textNode = elm;
-			signalNodeDisposers.set(textNode, effect$1(() => {
-				textNode.data = String(textSig.value);
-			}));
-		}
+		if (BUILD.vdomSignals && newVNode.$signal$) wireTextSignal(elm, newVNode.$signal$);
 	} else if (BUILD.slotRelocation && newVNode.$flags$ & VNODE_FLAGS.isSlotReference) {
 		elm = newVNode.$elm$ = BUILD.isDebug || BUILD.hydrateServerSide ? slotReferenceDebugNode(newVNode) : win.document.createTextNode("");
 		if (typeof newVNode.$attrs$?.slot === "string") elm["s-sa"] = newVNode.$attrs$.slot;
@@ -2381,7 +2392,17 @@ const patch = (oldVNode, newVNode, isInitialRender = false) => {
 		else if (BUILD.hydrateClientSide && isInitialRender && BUILD.updatable && oldChildren !== null && newChildren === null) newVNode.$children$ = oldChildren;
 		if (BUILD.svg && isSvgMode && tag === "svg") isSvgMode = false;
 	} else if (BUILD.vdomText && BUILD.slotRelocation && (defaultHolder = elm["s-cr"])) defaultHolder.parentNode.textContent = text;
-	else if (BUILD.vdomText && oldVNode.$text$ !== text) elm.data = text;
+	else if (BUILD.vdomText) {
+		if (BUILD.vdomSignals && newVNode.$signal$) {
+			if (newVNode.$signal$ !== oldVNode.$signal$) {
+				disposeTextSignal(elm);
+				wireTextSignal(elm, newVNode.$signal$);
+			}
+		} else {
+			if (BUILD.vdomSignals && oldVNode.$signal$) disposeTextSignal(elm);
+			if (oldVNode.$text$ !== text) elm.data = text;
+		}
+	}
 };
 /**
 * Component-global information about nodes which are either currently being
@@ -3719,12 +3740,13 @@ const restoreSafeSelector = (placeholders, content) => {
 const _polyfillHost = "-shadowcsshost";
 const _polyfillSlotted = "-shadowcssslotted";
 const _polyfillHostContext = "-shadowcsscontext";
+const _parenSuffix = ")(?:\\(((?:\\([^)(]*\\)|[^)(]*)+?)\\))?([^,{]*)";
 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 getCssColonHostRe = () => _cssColonHostRe ??= new RegExp("(-shadowcsshost" + _parenSuffix, "gim");
+const getCssColonHostContextRe = () => _cssColonHostContextRe ??= new RegExp("(-shadowcsscontext" + _parenSuffix, "gim");
+const getCssColonSlottedRe = () => _cssColonSlottedRe ??= new RegExp("(-shadowcssslotted" + _parenSuffix, "gim");
 const _polyfillHostNoCombinator = "-shadowcsshost-no-combinator";
 const _polyfillHostNoCombinatorRe = /-shadowcsshost-no-combinator([^\s]*)/;
 const _shadowDOMSelectorsRe = [/::shadow/g, /::content/g];
@@ -3987,12 +4009,13 @@ 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 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);
+		else if (isScopableAtRule(rule.selector)) content = scopeSelectors(rule.content, scopeSelectorText, hostSelector, slotSelector, commentOriginalSelector);
 		return {
 			selector: selector.replace(/\s{2,}/g, " ").trim(),
 			content
@@ -4084,14 +4107,12 @@ const scopeCss = (cssText, scopeId, commentOriginalSelector) => {
 			rule.selector = placeholder + rule.selector;
 			return rule;
 		};
-		cssText = processRules(cssText, (rule) => {
+		const commentSelectors = (input) => processRules(input, (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;
-			}
+			if (isScopableAtRule(rule.selector)) rule.content = commentSelectors(rule.content);
 			return rule;
 		});
+		cssText = commentSelectors(cssText);
 	}
 	const scoped = scopeCssText(cssText, scopeId, hostScopeId, slotScopeId, commentOriginalSelector);
 	cssText = [scoped.cssText, ...commentsWithHash].join("\n");
@@ -4290,6 +4311,14 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
 //#endregion
 //#region src/runtime/proxy-component.ts
 /**
+* Serialize a prop value the way `setAccessor()` does when it reflects it, so the runtime can
+* recognize an `attributeChangedCallback` it triggered itself.
+*
+* @param propValue the current value of a reflected prop
+* @returns the string the attribute would hold, or `null` if the attribute would be removed
+*/
+const reflectedAttrValue = (propValue) => propValue == null || propValue === false ? null : propValue === true ? "" : String(propValue);
+/**
 * Attach a series of runtime constructs to a compiled Stencil component
 * constructor, including getters and setters for the `@Prop` and `@State`
 * decorators, callbacks for when attributes change, and so on.
@@ -4437,7 +4466,9 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
 						return;
 					}
 					const propFlags = members.find(([m]) => m === propName);
-					const isBooleanTarget = propFlags && propFlags[1][0] & MEMBER_FLAGS.Boolean;
+					const propMemberFlags = propFlags ? propFlags[1][0] : 0;
+					const isBooleanTarget = propMemberFlags & MEMBER_FLAGS.Boolean;
+					if (BUILD.reflect && propMemberFlags & MEMBER_FLAGS.ReflectAttr && propMemberFlags & MEMBER_FLAGS.Any && !isComplexType(this[propName]) && reflectedAttrValue(this[propName]) === newValue) return;
 					const isSpuriousBooleanRemoval = isBooleanTarget && newValue === null && this[propName] === void 0;
 					if (isBooleanTarget) newValue = !(newValue === null || newValue === "false");
 					const propDesc = Object.getOwnPropertyDescriptor(prototype, propName);
@@ -5053,6 +5084,86 @@ const hostListenerOpts = (flags) => supportsListenerOptions ? {
 	capture: (flags & LISTENER_FLAGS.Capture) !== 0
 } : (flags & LISTENER_FLAGS.Capture) !== 0;
 //#endregion
+//#region src/runtime/inject-side-effect-style.ts
+const styleSheets = /* @__PURE__ */ new Map();
+const knownRoots = /* @__PURE__ */ new Set();
+const adoptedRoots = /* @__PURE__ */ new WeakMap();
+const knownFontFaces = /* @__PURE__ */ new Set();
+const adopt = (root, sheet) => {
+	let roots = adoptedRoots.get(sheet);
+	if (!roots) {
+		roots = /* @__PURE__ */ new WeakSet();
+		adoptedRoots.set(sheet, roots);
+	}
+	if (!roots.has(root)) {
+		roots.add(root);
+		root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
+	}
+};
+/**
+* Registers a root (a shadow root, or `document`) to receive every side-effect CSS import
+* (a plain, non-component `import './foo.css'`), now and in future. Call in `connectedCallback`,
+* paired with `unregisterSideEffectStyleTarget` in `disconnectedCallback` so the registry doesn't
+* hold disconnected roots forever.
+* @param root the root to register
+*/
+function registerSideEffectStyleTarget(root) {
+	knownRoots.add(root);
+	for (const sheet of styleSheets.values()) adopt(root, sheet);
+}
+/**
+* Removes a root registered via `registerSideEffectStyleTarget` - call in `disconnectedCallback`.
+* @param root the root to unregister
+*/
+function unregisterSideEffectStyleTarget(root) {
+	knownRoots.delete(root);
+}
+const FONT_FACE_RE = /@font-face\s*\{[^{}]*\}/g;
+/**
+* Splits `@font-face` rules out of a CSS text - exported standalone (from private
+* module state - usually 3rd party node_modules) exported for testing
+* @param cssText the CSS text to split
+* @returns the font-face rules joined together (`null` if there were none) and the remaining CSS
+*/
+function splitFontFaces(cssText) {
+	const fontFaces = cssText.match(FONT_FACE_RE);
+	if (!fontFaces) return {
+		fontFaceText: null,
+		rest: cssText
+	};
+	return {
+		fontFaceText: fontFaces.join("\n"),
+		rest: cssText.replace(FONT_FACE_RE, "")
+	};
+}
+/**
+* Applies plain (non-component) CSS text to every registered root - respects shadow DOM
+* encapsulation instead of always reaching for the top-level document. Not meant to be called
+* directly: this is what the compiler's CSS-to-ESM output calls for CSS with no Stencil `tag`
+* (i.e. not a component's own `styleUrl`), typically a third-party dependency's CSS import.
+*
+* `@font-face` rules are pulled out and adopted onto top-level `document` not per-root
+* (Chromium (https://issues.chromium.org/issues/41085401) per-root never loads).
+* @param cssText the CSS text to apply
+*/
+function injectSideEffectStyle(cssText) {
+	const { fontFaceText, rest } = splitFontFaces(cssText);
+	if (fontFaceText && !knownFontFaces.has(fontFaceText)) {
+		knownFontFaces.add(fontFaceText);
+		const fontFaceSheet = new CSSStyleSheet();
+		fontFaceSheet.replaceSync(fontFaceText);
+		document.adoptedStyleSheets = [...document.adoptedStyleSheets, fontFaceSheet];
+	}
+	if (!rest.trim()) return;
+	let sheet = styleSheets.get(rest);
+	if (!sheet) {
+		sheet = new CSSStyleSheet();
+		sheet.replaceSync(rest);
+		styleSheets.set(rest, sheet);
+	}
+	for (const root of knownRoots) adopt(root, sheet);
+}
+//#endregion
 //#region src/runtime/mixin.ts
 const baseClass = BUILD.lazyLoad ? class {} : globalThis.HTMLElement || class {};
 function Mixin(...mixins) {
@@ -5224,4 +5335,4 @@ function hasKeys(obj) {
 	return false;
 }
 //#endregion
-export { AttachInternals, AttrDeserialize, BUILD, Build, Component, Element$1 as Element, Env, Event, Fragment, H, H as HTMLElement, HYDRATED_STYLE_ID, Host, Listen, Method, Mixin, NAMESPACE, Prop, PropSerialize, ReactiveControllerHost, STENCIL_DEV_MODE, State, Watch, addHostEventListeners, bootstrapLazy, cmpModules, connectedCallback, consoleDevError, consoleDevInfo, consoleDevWarn, consoleError, createEvent, defineCustomElement, disconnectedCallback, forceModeUpdate, forceUpdate, getAssetPath, getElement, getHostRef, getMode, getRegistry, getRenderingRef, getShadowRoot, getValue, h, isMemberInElement, jsx, jsxDEV, jsxs, loadModule, modeResolutionChain, needsScopedSSR, nextTick, normalizeWatchers, parsePropertyValue, plt, postUpdateComponent, promiseResolve, proxyComponent, proxyCustomElement, readTask, registerHost, registerInstance, render, resolveVar, setAssetPath, setErrorHandler, setLazyLoadBasePath, setMode, setNonce, setPlatformHelpers, setPlatformOptions, setRegistry, setScopedSsr, setTagTransformer, setValue, styles, supportsConstructableStylesheets, supportsListenerOptions, supportsMutableAdoptedStyleSheets, transformTag, win, writeTask };
+export { AttachInternals, AttrDeserialize, BUILD, Build, Component, Element$1 as Element, Env, Event, Fragment, H, H as HTMLElement, HYDRATED_STYLE_ID, Host, Listen, Method, Mixin, NAMESPACE, Prop, PropSerialize, ReactiveControllerHost, STENCIL_DEV_MODE, State, Watch, addHostEventListeners, bootstrapLazy, cmpModules, connectedCallback, consoleDevError, consoleDevInfo, consoleDevWarn, consoleError, createEvent, defineCustomElement, disconnectedCallback, forceModeUpdate, forceUpdate, getAssetPath, getElement, getHostRef, getMode, getRegistry, getRenderingRef, getShadowRoot, getValue, h, injectSideEffectStyle, isMemberInElement, jsx, jsxDEV, jsxs, loadModule, modeResolutionChain, needsScopedSSR, nextTick, normalizeWatchers, parsePropertyValue, plt, postUpdateComponent, promiseResolve, proxyComponent, proxyCustomElement, readTask, registerHost, registerInstance, registerSideEffectStyleTarget, render, resolveVar, setAssetPath, setErrorHandler, setLazyLoadBasePath, setMode, setNonce, setPlatformHelpers, setPlatformOptions, setRegistry, setScopedSsr, setTagTransformer, setValue, styles, supportsConstructableStylesheets, supportsListenerOptions, supportsMutableAdoptedStyleSheets, transformTag, unregisterSideEffectStyleTarget, win, writeTask };