@stencil/core 5.0.0-beta.1 → 5.0.0-beta.11

package/dist/runtime/client/runtime.d.ts

@@ -239,7 +239,7 @@ interface VNode {
   $signal$?: any;
 }
 declare namespace JSXBase {
-  interface IntrinsicElements {
+  export interface IntrinsicElements {
     slot: JSXBase.SlotAttributes<HTMLSlotElement>;
     a: JSXBase.AnchorHTMLAttributes<HTMLAnchorElement>;
     abbr: JSXBase.HTMLAttributes;
@@ -410,12 +410,12 @@ declare namespace JSXBase {
     use: JSXBase.SVGAttributes;
     view: JSXBase.SVGAttributes;
   }
-  interface SlotAttributes<T = HTMLSlotElement> extends JSXAttributes<T> {
+  export interface SlotAttributes<T = HTMLSlotElement> extends JSXAttributes<T> {
     name?: string;
     slot?: string;
     onSlotchange?: (event: Event$1) => void;
   }
-  interface AnchorHTMLAttributes<T> extends HTMLAttributes<T> {
+  export interface AnchorHTMLAttributes<T> extends HTMLAttributes<T> {
     download?: any;
     href?: string;
     hrefLang?: string;
@@ -426,8 +426,8 @@ declare namespace JSXBase {
     target?: string;
     referrerPolicy?: ReferrerPolicy;
   }
-  interface AudioHTMLAttributes<T> extends MediaHTMLAttributes<T> {}
-  interface AreaHTMLAttributes<T> extends HTMLAttributes<T> {
+  export interface AudioHTMLAttributes<T> extends MediaHTMLAttributes<T> {}
+  export interface AreaHTMLAttributes<T> extends HTMLAttributes<T> {
     alt?: string;
     coords?: string;
     download?: any;
@@ -439,14 +439,14 @@ declare namespace JSXBase {
     shape?: string;
     target?: string;
   }
-  interface BaseHTMLAttributes<T> extends HTMLAttributes<T> {
+  export interface BaseHTMLAttributes<T> extends HTMLAttributes<T> {
     href?: string;
     target?: string;
   }
-  interface BlockquoteHTMLAttributes<T> extends HTMLAttributes<T> {
+  export interface BlockquoteHTMLAttributes<T> extends HTMLAttributes<T> {
     cite?: string;
   }
-  interface ButtonHTMLAttributes<T> extends HTMLAttributes<T> {
+  export interface ButtonHTMLAttributes<T> extends HTMLAttributes<T> {
     disabled?: boolean;
     form?: string;
     formAction?: string;
@@ -469,45 +469,45 @@ declare namespace JSXBase {
     commandFor?: string;
     commandfor?: string;
   }
-  interface CanvasHTMLAttributes<T> extends HTMLAttributes<T> {
+  export interface CanvasHTMLAttributes<T> extends HTMLAttributes<T> {
     height?: number | string;
     width?: number | string;
   }
-  interface ColHTMLAttributes<T> extends HTMLAttributes<T> {
+  export interface ColHTMLAttributes<T> extends HTMLAttributes<T> {
     span?: number;
   }
-  interface ColgroupHTMLAttributes<T> extends HTMLAttributes<T> {
+  export interface ColgroupHTMLAttributes<T> extends HTMLAttributes<T> {
     span?: number;
   }
-  interface DetailsHTMLAttributes<T> extends HTMLAttributes<T> {
+  export interface DetailsHTMLAttributes<T> extends HTMLAttributes<T> {
     open?: boolean;
     name?: string;
     onToggle?: (event: ToggleEvent) => void;
   }
-  interface DelHTMLAttributes<T> extends HTMLAttributes<T> {
+  export interface DelHTMLAttributes<T> extends HTMLAttributes<T> {
     cite?: string;
     dateTime?: string;
     datetime?: string;
   }
-  interface DialogHTMLAttributes<T> extends HTMLAttributes<T> {
+  export interface DialogHTMLAttributes<T> extends HTMLAttributes<T> {
     onCancel?: (event: Event$1) => void;
     onClose?: (event: Event$1) => void;
     open?: boolean;
     returnValue?: string;
     closedby?: 'any' | 'closerequest' | 'none';
   }
-  interface EmbedHTMLAttributes<T> extends HTMLAttributes<T> {
+  export interface EmbedHTMLAttributes<T> extends HTMLAttributes<T> {
     height?: number | string;
     src?: string;
     type?: string;
     width?: number | string;
   }
-  interface FieldsetHTMLAttributes<T> extends HTMLAttributes<T> {
+  export interface FieldsetHTMLAttributes<T> extends HTMLAttributes<T> {
     disabled?: boolean;
     form?: string;
     name?: string;
   }
-  interface FormHTMLAttributes<T> extends HTMLAttributes<T> {
+  export interface FormHTMLAttributes<T> extends HTMLAttributes<T> {
     acceptCharset?: string;
     acceptcharset?: string;
     action?: string;
@@ -521,10 +521,10 @@ declare namespace JSXBase {
     novalidate?: boolean | string;
     target?: string;
   }
-  interface HtmlHTMLAttributes<T> extends HTMLAttributes<T> {
+  export interface HtmlHTMLAttributes<T> extends HTMLAttributes<T> {
     manifest?: string;
   }
-  interface IframeHTMLAttributes<T> extends HTMLAttributes<T> {
+  export interface IframeHTMLAttributes<T> extends HTMLAttributes<T> {
     allow?: string;
     allowFullScreen?: boolean;
     allowfullScreen?: string | boolean;
@@ -551,7 +551,7 @@ declare namespace JSXBase {
     srcdoc?: string;
     width?: number | string;
   }
-  interface ImgHTMLAttributes<T> extends HTMLAttributes<T> {
+  export interface ImgHTMLAttributes<T> extends HTMLAttributes<T> {
     alt?: string;
     crossOrigin?: string;
     crossorigin?: string;
@@ -570,12 +570,12 @@ declare namespace JSXBase {
     usemap?: string;
     width?: number | string;
   }
-  interface InsHTMLAttributes<T> extends HTMLAttributes<T> {
+  export interface InsHTMLAttributes<T> extends HTMLAttributes<T> {
     cite?: string;
     dateTime?: string;
     datetime?: string;
   }
-  interface InputHTMLAttributes<T> extends HTMLAttributes<T> {
+  export interface InputHTMLAttributes<T> extends HTMLAttributes<T> {
     accept?: string;
     allowdirs?: boolean;
     alt?: string;
@@ -638,7 +638,7 @@ declare namespace JSXBase {
     popoverTargetElement?: globalThis.Element | null;
     popoverTarget?: string;
   }
-  interface KeygenHTMLAttributes<T> extends HTMLAttributes<T> {
+  export interface KeygenHTMLAttributes<T> extends HTMLAttributes<T> {
     challenge?: string;
     disabled?: boolean;
     form?: string;
@@ -648,14 +648,14 @@ declare namespace JSXBase {
     keyparams?: string;
     name?: string;
   }
-  interface LabelHTMLAttributes<T> extends HTMLAttributes<T> {
+  export interface LabelHTMLAttributes<T> extends HTMLAttributes<T> {
     form?: string;
     htmlFor?: string;
   }
-  interface LiHTMLAttributes<T> extends HTMLAttributes<T> {
+  export interface LiHTMLAttributes<T> extends HTMLAttributes<T> {
     value?: string | string[] | number;
   }
-  interface LinkHTMLAttributes<T> extends HTMLAttributes<T> {
+  export interface LinkHTMLAttributes<T> extends HTMLAttributes<T> {
     as?: string;
     fetchPriority?: 'high' | 'low' | 'auto';
     fetchpriority?: 'high' | 'low' | 'auto';
@@ -669,13 +669,13 @@ declare namespace JSXBase {
     sizes?: string;
     type?: string;
   }
-  interface MapHTMLAttributes<T> extends HTMLAttributes<T> {
+  export interface MapHTMLAttributes<T> extends HTMLAttributes<T> {
     name?: string;
   }
-  interface MenuHTMLAttributes<T> extends HTMLAttributes<T> {
+  export interface MenuHTMLAttributes<T> extends HTMLAttributes<T> {
     type?: string;
   }
-  interface MediaHTMLAttributes<T> extends HTMLAttributes<T> {
+  export interface MediaHTMLAttributes<T> extends HTMLAttributes<T> {
     autoPlay?: boolean;
     autoplay?: boolean | string;
     controls?: boolean;
@@ -715,7 +715,7 @@ declare namespace JSXBase {
     onVolumeChange?: (event: Event$1) => void;
     onWaiting?: (event: Event$1) => void;
   }
-  interface MetaHTMLAttributes<T> extends HTMLAttributes<T> {
+  export interface MetaHTMLAttributes<T> extends HTMLAttributes<T> {
     charSet?: string;
     charset?: string;
     content?: string;
@@ -723,7 +723,7 @@ declare namespace JSXBase {
     httpequiv?: string;
     name?: string;
   }
-  interface MeterHTMLAttributes<T> extends HTMLAttributes<T> {
+  export interface MeterHTMLAttributes<T> extends HTMLAttributes<T> {
     form?: string;
     high?: number;
     low?: number;
@@ -732,10 +732,10 @@ declare namespace JSXBase {
     optimum?: number;
     value?: string | string[] | number;
   }
-  interface QuoteHTMLAttributes<T> extends HTMLAttributes<T> {
+  export interface QuoteHTMLAttributes<T> extends HTMLAttributes<T> {
     cite?: string;
   }
-  interface ObjectHTMLAttributes<T> extends HTMLAttributes<T> {
+  export interface ObjectHTMLAttributes<T> extends HTMLAttributes<T> {
     classID?: string;
     classid?: string;
     data?: string;
@@ -748,34 +748,34 @@ declare namespace JSXBase {
     width?: number | string;
     wmode?: string;
   }
-  interface OlHTMLAttributes<T> extends HTMLAttributes<T> {
+  export interface OlHTMLAttributes<T> extends HTMLAttributes<T> {
     reversed?: boolean;
     start?: number;
   }
-  interface OptgroupHTMLAttributes<T> extends HTMLAttributes<T> {
+  export interface OptgroupHTMLAttributes<T> extends HTMLAttributes<T> {
     disabled?: boolean;
     label?: string;
   }
-  interface OptionHTMLAttributes<T> extends HTMLAttributes<T> {
+  export interface OptionHTMLAttributes<T> extends HTMLAttributes<T> {
     disabled?: boolean;
     label?: string;
     selected?: boolean;
     value?: string | string[] | number;
   }
-  interface OutputHTMLAttributes<T> extends HTMLAttributes<T> {
+  export interface OutputHTMLAttributes<T> extends HTMLAttributes<T> {
     form?: string;
     htmlFor?: string;
     name?: string;
   }
-  interface ParamHTMLAttributes<T> extends HTMLAttributes<T> {
+  export interface ParamHTMLAttributes<T> extends HTMLAttributes<T> {
     name?: string;
     value?: string | string[] | number;
   }
-  interface ProgressHTMLAttributes<T> extends HTMLAttributes<T> {
+  export interface ProgressHTMLAttributes<T> extends HTMLAttributes<T> {
     max?: number | string;
     value?: string | string[] | number;
   }
-  interface ScriptHTMLAttributes<T> extends HTMLAttributes<T> {
+  export interface ScriptHTMLAttributes<T> extends HTMLAttributes<T> {
     async?: boolean;
     charSet?: string;
     charset?: string;
@@ -790,7 +790,7 @@ declare namespace JSXBase {
     src?: string;
     type?: string;
   }
-  interface SelectHTMLAttributes<T> extends HTMLAttributes<T> {
+  export interface SelectHTMLAttributes<T> extends HTMLAttributes<T> {
     disabled?: boolean;
     form?: string;
     multiple?: boolean;
@@ -800,7 +800,7 @@ declare namespace JSXBase {
     autoComplete?: string;
     autocomplete?: string;
   }
-  interface SourceHTMLAttributes<T> extends HTMLAttributes<T> {
+  export interface SourceHTMLAttributes<T> extends HTMLAttributes<T> {
     height?: number;
     media?: string;
     sizes?: string;
@@ -809,20 +809,20 @@ declare namespace JSXBase {
     type?: string;
     width?: number;
   }
-  interface StyleHTMLAttributes<T> extends HTMLAttributes<T> {
+  export interface StyleHTMLAttributes<T> extends HTMLAttributes<T> {
     media?: string;
     nonce?: string;
     scoped?: boolean;
     type?: string;
   }
-  interface TableHTMLAttributes<T> extends HTMLAttributes<T> {
+  export interface TableHTMLAttributes<T> extends HTMLAttributes<T> {
     cellPadding?: number | string;
     cellpadding?: number | string;
     cellSpacing?: number | string;
     cellspacing?: number | string;
     summary?: string;
   }
-  interface TextareaHTMLAttributes<T> extends HTMLAttributes<T> {
+  export interface TextareaHTMLAttributes<T> extends HTMLAttributes<T> {
     autoComplete?: string;
     autocomplete?: string;
     cols?: number;
@@ -843,12 +843,12 @@ declare namespace JSXBase {
     value?: string | string[] | number;
     wrap?: string;
   }
-  interface TdHTMLAttributes<T> extends HTMLAttributes<T> {
+  export interface TdHTMLAttributes<T> extends HTMLAttributes<T> {
     colSpan?: number;
     headers?: string;
     rowSpan?: number;
   }
-  interface ThHTMLAttributes<T> extends HTMLAttributes<T> {
+  export interface ThHTMLAttributes<T> extends HTMLAttributes<T> {
     abbr?: string;
     colSpan?: number;
     headers?: string;
@@ -856,10 +856,10 @@ declare namespace JSXBase {
     rowspan?: number | string;
     scope?: string;
   }
-  interface TimeHTMLAttributes<T> extends HTMLAttributes<T> {
+  export interface TimeHTMLAttributes<T> extends HTMLAttributes<T> {
     dateTime?: string;
   }
-  interface TrackHTMLAttributes<T> extends HTMLAttributes<T> {
+  export interface TrackHTMLAttributes<T> extends HTMLAttributes<T> {
     default?: boolean;
     kind?: string;
     label?: string;
@@ -867,14 +867,14 @@ declare namespace JSXBase {
     srcLang?: string;
     srclang?: string;
   }
-  interface VideoHTMLAttributes<T> extends MediaHTMLAttributes<T> {
+  export interface VideoHTMLAttributes<T> extends MediaHTMLAttributes<T> {
     height?: number | string;
     playsInline?: boolean;
     playsinline?: boolean | string;
     poster?: string;
     width?: number | string;
   }
-  interface HTMLAttributes<T = HTMLElement> extends DOMAttributes<T> {
+  export interface HTMLAttributes<T = HTMLElement> extends DOMAttributes<T> {
     innerHTML?: string;
     accessKey?: string;
     autoFocus?: boolean;
@@ -940,7 +940,7 @@ declare namespace JSXBase {
     security?: string;
     unselectable?: boolean;
   }
-  interface SVGAttributes<T = SVGElement> extends DOMAttributes<T> {
+  export interface SVGAttributes<T = SVGElement> extends DOMAttributes<T> {
     class?: string | {
       [className: string]: boolean;
     } | SignalRef<string>;
@@ -1202,13 +1202,15 @@ declare namespace JSXBase {
     zoomAndPan?: string;
   }
   /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ToggleEvent) */
-  interface ToggleEvent extends Event$1 {
+  export interface ToggleEvent extends Event$1 {
     /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ToggleEvent/newState) */
     readonly newState: string;
     /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ToggleEvent/oldState) */
     readonly oldState: string;
   }
-  interface DOMAttributes<T> extends JSXAttributes<T> {
+  type AriaIDLPropertyName = { [K in keyof ARIAMixin]: ARIAMixin[K] extends string | null ? K : never; }[keyof ARIAMixin];
+  type JSXAriaProperties = { [K in AriaIDLPropertyName]?: string | boolean | undefined; };
+  export interface DOMAttributes<T> extends JSXAttributes<T>, JSXAriaProperties {
     slot?: string;
     part?: string;
     exportparts?: string;
@@ -1338,8 +1340,8 @@ declare namespace JSXBase {
     onTransitionStart?: (event: TransitionEvent) => void;
     onTransitionStartCapture?: (event: TransitionEvent) => void;
     [key: `aria-${string}`]: string | boolean | undefined;
-    [key: `aria${string}`]: string | boolean | undefined;
   }
+  export {};
 }
 interface JSXAttributes<T = globalThis.Element> {
   key?: string | number;

package/dist/runtime/client/runtime.js

@@ -1,6 +1,6 @@
 import { BUILD, BUILD as BUILD$1, Env, NAMESPACE, NAMESPACE as NAMESPACE$1 } from "@stencil/core/app-data";
 import { globalStyles } from "@stencil/core/app-globals";
-import { effect, effect as effect$1, signal } from "@preact/signals-core";
+import * as SignalsCore from "@preact/signals-core";
 //#region src/client/client-build.ts
 const Build = {
 	isDev: BUILD$1.isDev,
@@ -1685,6 +1685,13 @@ const isComplexType = (o) => {
 	return o === "object" || o === "function";
 };
 //#endregion
+//#region src/runtime/signals-core.ts
+const getCore = () => globalThis[Symbol.for("stencil.preact-signals-core")] ??= SignalsCore;
+const effect = (fn, options) => getCore().effect(fn, options);
+function signal(value, options) {
+	return getCore().signal(value, options);
+}
+//#endregion
 //#region src/runtime/event-emitter.ts
 const createEvent = (ref, name, flags) => {
 	const elm = getElement(ref);
@@ -1760,7 +1767,7 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialR
 		attrMap.get(memberName)?.();
 		if (!signalAttrDisposers.has(elm)) signalAttrDisposers.set(elm, attrMap);
 		let prevVal = oldValue;
-		attrMap.set(memberName, effect$1(() => {
+		attrMap.set(memberName, effect(() => {
 			const curVal = newValue.value;
 			setAccessor(elm, memberName, prevVal, curVal, isSvg, flags);
 			prevVal = curVal;
@@ -1977,16 +1984,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(() => {
+		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
@@ -2008,13 +2032,7 @@ const createElm = (oldParentVNode, newParentVNode, childIndex) => {
 	if (BUILD$1.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$1.vdomText && newVNode.$text$ != null) {
 		elm = newVNode.$elm$ = win.document.createTextNode(newVNode.$text$);
-		if (BUILD$1.vdomSignals && newVNode.$signal$) {
-			const textSig = newVNode.$signal$;
-			const textNode = elm;
-			signalNodeDisposers.set(textNode, effect$1(() => {
-				textNode.data = String(textSig.value);
-			}));
-		}
+		if (BUILD$1.vdomSignals && newVNode.$signal$) wireTextSignal(elm, newVNode.$signal$);
 	} else if (BUILD$1.slotRelocation && newVNode.$flags$ & VNODE_FLAGS.isSlotReference) {
 		elm = newVNode.$elm$ = BUILD$1.isDebug || BUILD$1.hydrateServerSide ? slotReferenceDebugNode(newVNode) : win.document.createTextNode("");
 		if (typeof newVNode.$attrs$?.slot === "string") elm["s-sa"] = newVNode.$attrs$.slot;
@@ -2282,7 +2300,7 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh, isInitialRender = fal
 		}
 		if (BUILD$1.vdomKey && idxInOld >= 0) {
 			elmToMove = oldCh[idxInOld];
-			if (elmToMove.$tag$ !== newStartVnode.$tag$) node = createElm(oldCh && oldCh[newStartIdx], newVNode, idxInOld);
+			if (elmToMove.$tag$ !== newStartVnode.$tag$) node = createElm(oldCh && oldCh[newStartIdx], newVNode, newStartIdx);
 			else {
 				patch(elmToMove, newStartVnode, isInitialRender);
 				oldCh[idxInOld] = void 0;
@@ -2375,7 +2393,17 @@ const patch = (oldVNode, newVNode, isInitialRender = false) => {
 		else if (BUILD$1.hydrateClientSide && isInitialRender && BUILD$1.updatable && oldChildren !== null && newChildren === null) newVNode.$children$ = oldChildren;
 		if (BUILD$1.svg && isSvgMode && tag === "svg") isSvgMode = false;
 	} else if (BUILD$1.vdomText && BUILD$1.slotRelocation && (defaultHolder = elm["s-cr"])) defaultHolder.parentNode.textContent = text;
-	else if (BUILD$1.vdomText && oldVNode.$text$ !== text) elm.data = text;
+	else if (BUILD$1.vdomText) {
+		if (BUILD$1.vdomSignals && newVNode.$signal$) {
+			if (newVNode.$signal$ !== oldVNode.$signal$) {
+				disposeTextSignal(elm);
+				wireTextSignal(elm, newVNode.$signal$);
+			}
+		} else {
+			if (BUILD$1.vdomSignals && oldVNode.$signal$) disposeTextSignal(elm);
+			if (oldVNode.$text$ !== text) elm.data = text;
+		}
+	}
 };
 /**
 * Component-global information about nodes which are either currently being
@@ -3075,8 +3103,7 @@ const initializeSignals = (elm, hostRef, cmpMeta) => {
 	const instance = BUILD$1.lazyLoad ? hostRef.$lazyInstance$ : elm;
 	for (const [memberName, [memberFlags]] of Object.entries(cmpMeta.$members$ ?? {})) {
 		if (!(memberFlags & MEMBER_FLAGS.PropLike)) continue;
-		const initialVal = hostRef.$instanceValues$.get(memberName);
-		const sig = signal(initialVal);
+		const sig = signal(hostRef.$instanceValues$.get(memberName));
 		hostRef.$signalValues$.set(memberName, sig);
 		let prevScheduleVal = sig.peek();
 		disposers.push(effect(() => {
@@ -3982,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
@@ -4079,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");
@@ -4383,16 +4409,21 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
 							});
 							return;
 						}
-						const setterSetVal = () => {
+						const parsedValue = parsePropertyValue(newValue, memberFlags, BUILD$1.formAssociated && !!(cmpMeta.$flags$ & CMP_FLAGS.formAssociated));
+						const setterSetVal = (val) => {
 							const currentValue = ref.$lazyInstance$[memberName];
 							if (!ref.$instanceValues$.get(memberName) && currentValue) ref.$instanceValues$.set(memberName, currentValue);
-							ref.$lazyInstance$[memberName] = parsePropertyValue(newValue, memberFlags, BUILD$1.formAssociated && !!(cmpMeta.$flags$ & CMP_FLAGS.formAssociated));
+							ref.$lazyInstance$[memberName] = val;
 							setValue(this, memberName, ref.$lazyInstance$[memberName], cmpMeta);
 						};
-						if (ref.$lazyInstance$) setterSetVal();
-						else ref.$fetchedCbList$.push(() => {
-							setterSetVal();
-						});
+						if (ref.$lazyInstance$) setterSetVal(parsedValue);
+						else {
+							ref.$instanceValues$.set(memberName, parsedValue);
+							ref.$fetchedCbList$.push(() => {
+								const pendingValue = ref.$instanceValues$.get(memberName);
+								if (ref.$lazyInstance$[memberName] !== pendingValue) setterSetVal(pendingValue);
+							});
+						}
 					}
 				} });
 			} else if (BUILD$1.lazyLoad && BUILD$1.method && flags & PROXY_FLAGS.isElementConstructor && memberFlags & MEMBER_FLAGS.Method) Object.defineProperty(prototype, memberName, { value(...args) {
@@ -4445,8 +4476,9 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
 					if (BUILD$1.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 currentValue = BUILD$1.lazyLoad && propMemberFlags & MEMBER_FLAGS.Setter ? hostRef.$instanceValues$.get(propName) : this[propName];
 					const propDesc = Object.getOwnPropertyDescriptor(prototype, propName);
-					if (!isSpuriousBooleanRemoval && newValue != this[propName] && (!propDesc.get || !!propDesc.set)) this[propName] = newValue;
+					if (!isSpuriousBooleanRemoval && newValue != currentValue && (!propDesc.get || !!propDesc.set)) this[propName] = newValue;
 				});
 			};
 			Cstr.observedAttributes = Array.from(/* @__PURE__ */ new Set([...Object.keys(cmpMeta.$watchers$ ?? {}), ...members.filter(([_, m]) => m[0] & MEMBER_FLAGS.HasAttribute).map(([propName, m]) => {

package/dist/runtime/index.d.ts

@@ -1,4 +1,4 @@
-import { C as ReactiveControllerHostInterface, E as VNode, S as MixedInCtor, T as TagTransformer, _ as ComponentInterface, a as ComponentConstructor, b as HTMLStencilElement, c as ComponentRuntimeMeta, d as HostRef, f as LazyBundlesRuntimeData, g as RuntimeRef, h as RenderNode, i as ChildType, l as ComponentRuntimeMetaCompact, m as PropsType, o as ComponentConstructorChangeHandlers, p as PlatformRuntime, s as ComponentRuntimeHostListener, u as HostElement, v as CustomElementsDefineOptions, w as ResolutionHandler, x as JSXBase, y as FunctionalComponent } from "../index-BXAcVN2j.js";
+import { C as ReactiveControllerHostInterface, E as VNode, S as MixedInCtor, T as TagTransformer, _ as ComponentInterface, a as ComponentConstructor, b as HTMLStencilElement, c as ComponentRuntimeMeta, d as HostRef, f as LazyBundlesRuntimeData, g as RuntimeRef, h as RenderNode, i as ChildType, l as ComponentRuntimeMetaCompact, m as PropsType, o as ComponentConstructorChangeHandlers, p as PlatformRuntime, s as ComponentRuntimeHostListener, u as HostElement, v as CustomElementsDefineOptions, w as ResolutionHandler, x as JSXBase, y as FunctionalComponent } from "../index-BHciXst1.js";
 //#region src/runtime/asset-path.d.ts
 declare const getAssetPath: (path: string) => string;
 declare const setAssetPath: (path: string) => string;