@mhmo91/schmancy 0.10.37 → 0.10.39

package/src/navigation-rail/navigation-rail.ts

@@ -101,13 +101,13 @@ export class SchmancyNavigationRail extends SchmancyElement {
 	 */
 	@property({ type: String })
 	get activeValue() {
-		return this._activeValue
+		return this.#activeValue
 	}
 	set activeValue(value: string) {
-		this._activeValue = value
+		this.#activeValue = value
 		this.updateActiveByValue(value)
 	}
-	private _activeValue = ''
+	#activeValue = ''
 
 	/**
 	 * When to show labels for navigation items
@@ -164,7 +164,7 @@ export class SchmancyNavigationRail extends SchmancyElement {
 	 * When empty, the nav falls back to the M3 default: `flex flex-col gap-3`.
 	 */
 	@state()
-	private _hostLayoutClasses = ''
+	private hostLayoutClasses = ''
 
 	// Queries
 
@@ -217,7 +217,7 @@ export class SchmancyNavigationRail extends SchmancyElement {
 			return () => mo.disconnect()
 		}).pipe(
 			distinctUntilChanged(),
-			tap(layoutClasses => { this._hostLayoutClasses = layoutClasses }),
+			tap(layoutClasses => { this.hostLayoutClasses = layoutClasses }),
 			takeUntil(this.disconnecting),
 		).subscribe()
 
@@ -257,7 +257,7 @@ export class SchmancyNavigationRail extends SchmancyElement {
 
 			// Update activeValue when index changes
 			if (isActive) {
-				this._activeValue = item.value || item.label || ''
+				this.#activeValue = item.value || item.label || ''
 			}
 		})
 	}
@@ -409,7 +409,7 @@ export class SchmancyNavigationRail extends SchmancyElement {
 	protected render() {
 		// Host-level classes for the navigation rail (width, visibility, z-index).
 		// Layout utilities the author placed on the host are NOT included here —
-		// they are forwarded to the inner <nav> via _hostLayoutClasses instead.
+		// they are forwarded to the inner <nav> via hostLayoutClasses instead.
 		const hostClasses = this.classMap({
 			// Layout & Structure - Fixed width to prevent layout shift
 			'flex flex-col': true,
@@ -468,9 +468,9 @@ export class SchmancyNavigationRail extends SchmancyElement {
 		// after re-slotting through <schmancy-scroll>. Layout utilities forwarded from the
 		// host land here so that `grid gap-2` (or any other layout) actually shapes items.
 		// When the host carries no layout classes, default to M3 flex-column + alignment.
-		const hasHostLayout = this._hostLayoutClasses.length > 0
+		const hasHostLayout = this.hostLayoutClasses.length > 0
 		const itemsContainerClasses = hasHostLayout
-			? this._hostLayoutClasses
+			? this.hostLayoutClasses
 			: this.classMap({
 					'flex flex-col gap-3': true,
 					'justify-start': this.alignment === 'top',
@@ -519,7 +519,7 @@ export class SchmancyNavigationRail extends SchmancyElement {
 				const itemIndex = this.navigationItems.findIndex(item => item.value === value || item.label === value)
 				if (itemIndex >= 0) {
 					this.activeIndex = itemIndex
-					this._activeValue = value
+					this.#activeValue = value
 				}
 			}
 		})

package/src/notification/notification.ts

@@ -26,10 +26,10 @@ export default class SchmancyNotification extends SchmancyElement {
 	// startPosition retained for API compatibility — not used in entrance animation
 	@property({ type: Object }) startPosition: { x: number; y: number } = { x: 0, y: 0 }
 
-	@state() private _visible = true
-	@state() private _progress = 100
-	@state() private _hovered = false
-	@state() private _closing = false
+	@state() private visible = true
+	@state() private progress = 100
+	@state() private hovered = false
+	@state() private closing = false
 
 	private paused$ = new BehaviorSubject<boolean>(false)
 	private startTime = 0
@@ -56,7 +56,7 @@ export default class SchmancyNotification extends SchmancyElement {
 		}
 
 		if (this.playSound) {
-			this._playSound()
+			this.#playSound()
 		}
 	}
 
@@ -113,7 +113,7 @@ export default class SchmancyNotification extends SchmancyElement {
 				switchMap(() =>
 					this.paused$.pipe(
 						map(paused => {
-							if (paused) return this._progress
+							if (paused) return this.progress
 							const elapsed = this.elapsedBeforePause + (Date.now() - this.startTime)
 							const remaining = Math.max(0, this.duration - elapsed)
 							return (remaining / this.duration) * 100
@@ -122,14 +122,14 @@ export default class SchmancyNotification extends SchmancyElement {
 				),
 				distinctUntilChanged(),
 				tap(progress => {
-					this._progress = progress
+					this.progress = progress
 				}),
 				takeUntil(this.disconnecting),
 			)
 			.subscribe()
 	}
 
-	private _playSound() {
+	#playSound() {
 		this.dispatchEvent(
 			new CustomEvent('playsound', {
 				detail: { type: this.type },
@@ -139,20 +139,20 @@ export default class SchmancyNotification extends SchmancyElement {
 		)
 	}
 
-	private _handleMouseEnter() {
-		this._hovered = true
+	private handleMouseEnter() {
+		this.hovered = true
 		this.paused$.next(true)
 	}
 
-	private _handleMouseLeave() {
-		this._hovered = false
+	private handleMouseLeave() {
+		this.hovered = false
 		this.paused$.next(false)
 	}
 
 	public async close() {
-		if (this._closing) return
-		this._closing = true
-		this._visible = false
+		if (this.closing) return
+		this.closing = true
+		this.visible = false
 
 		await this.animate(
 			[
@@ -175,7 +175,7 @@ export default class SchmancyNotification extends SchmancyElement {
 		)
 	}
 
-	private _getTypeLabel(): string {
+	private getTypeLabel(): string {
 		switch (this.type) {
 			case 'success':
 				return 'SUCCESS'
@@ -189,26 +189,26 @@ export default class SchmancyNotification extends SchmancyElement {
 	}
 
 	render() {
-		if (!this._visible && this._closing) return html``
+		if (!this.visible && this.closing) return html``
 
 		return html`
 			<div
-				class="notification ${this.type} ${this._closing ? 'closing' : ''} ${this._hovered ? 'hovered' : ''}"
+				class="notification ${this.type} ${this.closing ? 'closing' : ''} ${this.hovered ? 'hovered' : ''}"
 				role="alert"
-				@mouseenter=${this._handleMouseEnter}
-				@mouseleave=${this._handleMouseLeave}
+				@mouseenter=${this.handleMouseEnter}
+				@mouseleave=${this.handleMouseLeave}
 			>
 				${this.showProgress || this.duration > 0
 					? html`<schmancy-progress
 							class="progress"
 							size="xs"
-							.value=${this._progress}
+							.value=${this.progress}
 							?indeterminate=${this.showProgress && this.duration === 0}
 						></schmancy-progress>`
 					: ''}
 				<div class="accent-rail"></div>
 				<div class="content">
-					<span class="type-tag">${this._getTypeLabel()}</span>
+					<span class="type-tag">${this.getTypeLabel()}</span>
 					${this.title ? html`<div class="title">${this.title}</div>` : ''}
 					<div class="message">${this.message}</div>
 				</div>

package/src/overlay/overlay.component.ts

@@ -118,29 +118,30 @@ export class SchmancyOverlay extends SchmancyElement {
 	@property({ type: Boolean, reflect: true }) modal = true
 	@property({ type: String, reflect: true }) tier: OverlayTier = 'modal'
 
-	@state() private _active = false
-	@state() private _full = false
+	@state() private active = false
+	@state() private full = false
 
-	@query('.backdrop') private _backdrop?: HTMLDivElement
-	@query('.surface') private _surface!: HTMLElement
-	@query('.shell') private _shell?: HTMLElement
+	@query('.backdrop') private backdrop?: HTMLDivElement
+	@query('.surface') private surface!: HTMLElement
+	@query('.shell') private shell?: HTMLElement
 
 	/** Close trigger for the service; emits the reason + detail payload. */
-	private readonly _closed$ = new Subject<{ reason: CloseReason; result?: unknown }>()
-
-	private _mounted = false
-	private _closing = false
-	private _resolvedAnchor?: ResolvedAnchor
-	private _rawAnchor?: Anchor
-	private _anchorOriginAnchor?: Anchor
-	private _positionerTeardown?: () => void
-	private _lastFocusedElement: HTMLElement | null = null
-	private _inertedSiblings: HTMLElement[] = []
-	private _lastReResolveAt = 0
+	readonly #closed$ = new Subject<{ reason: CloseReason; result?: unknown }>()
+
+	private mounted = false
+	private closing = false
+	private resolvedAnchor?: ResolvedAnchor
+	private rawAnchor?: Anchor
+	private anchorOriginAnchor?: Anchor
+	private positionerTeardown?: () => void
+	private factoryEffectDispose?: () => void
+	private lastFocusedElement: HTMLElement | null = null
+	private inertedSiblings: HTMLElement[] = []
+	private lastReResolveAt = 0
 
 	/** Service subscribes to this to know when the overlay dismissed. */
 	get closed$(): import('rxjs').Observable<{ reason: CloseReason; result?: unknown }> {
-		return this._closed$.asObservable()
+		return this.#closed$.asObservable()
 	}
 
 	/**
@@ -149,23 +150,34 @@ export class SchmancyOverlay extends SchmancyElement {
 	 * animation completes.
 	 */
 	async open(content: Content, options: ShowOptions): Promise<void> {
-		if (this._mounted) throw new Error('schmancy-overlay: open() called twice on the same element')
-		this._mounted = true
+		if (this.mounted) throw new Error('schmancy-overlay: open() called twice on the same element')
+		this.mounted = true
 
 		this.dismissable = options.dismissable !== false
-		this._full = options.full ?? false
-		this._rawAnchor = options.anchor
-		this._anchorOriginAnchor = options.anchor
-		this._resolvedAnchor = resolveAnchorRef(options.anchor)
+		this.full = options.full ?? false
+		this.rawAnchor = options.anchor
+		this.anchorOriginAnchor = options.anchor
+		this.resolvedAnchor = resolveAnchorRef(options.anchor)
 
 		// Ensure the shell is rendered so the mount point exists.
-		this._active = true
+		this.active = true
 		this.setAttribute('active', '')
 		await this.updateComplete
 
 		const mount = this.renderRoot.querySelector(`#${MOUNT_POINT_ID}`) as HTMLElement | null
 		if (!mount) throw new Error('schmancy-overlay: mount point missing')
-		await mountContent(content, mount, options.props)
+		if (isTemplateFactory(content)) {
+			// Factory content is reactive: re-run litRender whenever a signal the
+			// factory reads changes. The overlay IS a SignalWatcher (SchmancyElement),
+			// so its own effect loop owns tracking + scheduling + teardown. Content
+			// stays in the light-DOM mount point — no shadow boundary, every event /
+			// focus / ResizeObserver contract preserved.
+			this.factoryEffectDispose = this.updateEffect(() => litRender(content(), mount), {
+				manualDispose: true,
+			})
+		} else {
+			await mountContent(content, mount, options.props)
+		}
 
 		// Caller-forced layout (`as`) wins; otherwise resolver decides from anchor.
 		this.layout = options.as ?? resolveLayout({ anchor: options.anchor })
@@ -178,8 +190,8 @@ export class SchmancyOverlay extends SchmancyElement {
 		// ladder. `modal: true` on an anchored layout stays modal.
 		this.tier = this.modal
 			? 'modal'
-			: this._resolvedAnchor
-				? pickPositioner(this._resolvedAnchor)
+			: this.resolvedAnchor
+				? pickPositioner(this.resolvedAnchor)
 				: 'modal'
 
 		await this.updateComplete
@@ -187,41 +199,41 @@ export class SchmancyOverlay extends SchmancyElement {
 		// Apply tier-specific positioning. For 'modal' the CSS data-layout
 		// attribute + :host styles already place the surface; nothing to do.
 		// For anchored tiers we delegate to the positioning module.
-		if (this.tier === 'css-anchor' && this._resolvedAnchor?.el && this.shadowRoot) {
-			this._positionerTeardown = positionCSSAnchor(this._surface, this._resolvedAnchor, this.shadowRoot, {
+		if (this.tier === 'css-anchor' && this.resolvedAnchor?.el && this.shadowRoot) {
+			this.positionerTeardown = positionCSSAnchor(this.surface, this.resolvedAnchor, this.shadowRoot, {
 				id: `ov-${Math.random().toString(36).slice(2, 10)}`,
 				placement: options.preferredPlacement ?? 'bottom-start',
 			})
 			// Pair with Popover API to get native top-layer + light-dismiss.
-			const popoverCleanup = positionPopoverAPI(this._surface)
-			const cssAnchorTeardown = this._positionerTeardown
-			this._positionerTeardown = () => {
+			const popoverCleanup = positionPopoverAPI(this.surface)
+			const cssAnchorTeardown = this.positionerTeardown
+			this.positionerTeardown = () => {
 				popoverCleanup()
 				cssAnchorTeardown?.()
 			}
-		} else if (this.tier === 'popover-fui' && this._resolvedAnchor) {
-			const popoverCleanup = positionPopoverAPI(this._surface)
-			const floatSub = positionFloatingUI(this._surface, this._resolvedAnchor, {
+		} else if (this.tier === 'popover-fui' && this.resolvedAnchor) {
+			const popoverCleanup = positionPopoverAPI(this.surface)
+			const floatSub = positionFloatingUI(this.surface, this.resolvedAnchor, {
 				placement: options.preferredPlacement ?? 'bottom-start',
 				offsetPx: 8,
 				track: options.track !== false,
 			})
 				.pipe(takeUntil(this.disconnecting))
 				.subscribe()
-			this._positionerTeardown = () => {
+			this.positionerTeardown = () => {
 				popoverCleanup()
 				floatSub.unsubscribe()
 			}
-		} else if (this.tier === 'fui-only' && this._resolvedAnchor) {
-			const floatSub = positionFloatingUI(this._surface, this._resolvedAnchor, {
+		} else if (this.tier === 'fui-only' && this.resolvedAnchor) {
+			const floatSub = positionFloatingUI(this.surface, this.resolvedAnchor, {
 				placement: options.preferredPlacement ?? 'bottom-start',
 				offsetPx: 8,
 				track: options.track !== false,
 			})
 				.pipe(takeUntil(this.disconnecting))
 				.subscribe()
-			this._positionerTeardown = () => floatSub.unsubscribe()
-		} else if (this.tier === 'modal' && this._shell) {
+			this.positionerTeardown = () => floatSub.unsubscribe()
+		} else if (this.tier === 'modal' && this.shell) {
 			// Promote the whole modal shell (scrim + surface) into the native
 			// top layer — the same domain anchored tiers already use. The top
 			// layer paints strictly in show() order, so a sheet opened from
@@ -229,7 +241,7 @@ export class SchmancyOverlay extends SchmancyElement {
 			// (and recedes behind anything opened after it). Degrade silently
 			// to the legacy z-index host on browsers without the Popover API.
 			try {
-				this._positionerTeardown = positionPopoverAPI(this._shell)
+				this.positionerTeardown = positionPopoverAPI(this.shell)
 			} catch {
 				// no Popover API support — keep the host z-index:10000 path.
 			}
@@ -253,39 +265,47 @@ export class SchmancyOverlay extends SchmancyElement {
 
 	/** Play exit animations then dismiss. */
 	async close(reason: CloseReason, result?: unknown): Promise<void> {
-		if (this._closing || !this._mounted) return
-		this._closing = true
+		if (this.closing || !this.mounted) return
+		this.closing = true
 		try {
 			await this.playAnimations('out')
 		} catch {
 			// animation cancelled mid-flight — not an error.
 		}
 		this.releaseFocusTrap()
-		if (this._positionerTeardown) {
+		if (this.factoryEffectDispose) {
 			try {
-				this._positionerTeardown()
+				this.factoryEffectDispose()
 			} catch {
 				// cleanup shouldn't throw; ignore anything that does.
 			}
-			this._positionerTeardown = undefined
+			this.factoryEffectDispose = undefined
 		}
-		this._active = false
+		if (this.positionerTeardown) {
+			try {
+				this.positionerTeardown()
+			} catch {
+				// cleanup shouldn't throw; ignore anything that does.
+			}
+			this.positionerTeardown = undefined
+		}
+		this.active = false
 		this.removeAttribute('active')
-		this._closed$.next({ reason, result })
-		this._closed$.complete()
+		this.#closed$.next({ reason, result })
+		this.#closed$.complete()
 	}
 
 	/* ---------------- render ------------------------------------------- */
 
 	protected render(): TemplateResult {
-		if (!this._active) return html``
+		if (!this.active) return html``
 		const baseClasses =
 			'surface fixed pointer-events-auto ' +
 			'bg-surface-container/85 text-surface-on backdrop-blur-md ' +
 			'border border-surface-on/8'
 		const layoutClasses =
 			this.layout === 'sheet'
-				? this._full
+				? this.full
 					? 'left-0 right-0 bottom-0 w-full h-[90dvh] rounded-t-[28px] shadow-overlay flex flex-col overflow-hidden'
 					: 'left-0 right-0 bottom-0 w-full max-h-[90dvh] rounded-t-[28px] shadow-overlay overflow-auto'
 				: 'max-w-[min(480px,calc(100vw-2rem))] max-h-[90dvh] rounded-3xl shadow-overlay-anchored overflow-auto'
@@ -304,7 +324,7 @@ export class SchmancyOverlay extends SchmancyElement {
 					aria-modal=${this.modal ? 'true' : 'false'}
 					tabindex="-1"
 				>
-					<div id=${MOUNT_POINT_ID} class=${this.layout === 'sheet' && this._full ? 'flex-1 min-h-0 overflow-hidden' : ''}></div>
+					<div id=${MOUNT_POINT_ID} class=${this.layout === 'sheet' && this.full ? 'flex-1 min-h-0 overflow-hidden' : ''}></div>
 				</section>
 			</div>
 		`
@@ -317,13 +337,13 @@ export class SchmancyOverlay extends SchmancyElement {
 	/* ---------------- anchor-origin bloom ------------------------------ */
 
 	private setAnchorOriginVars(): void {
-		const surface = this._surface
+		const surface = this.surface
 		if (!surface) return
 		const rect = surface.getBoundingClientRect()
 		const vars =
-			this.layout === 'sheet' && !this._anchorOriginAnchor
+			this.layout === 'sheet' && !this.anchorOriginAnchor
 				? { '--schmancy-overlay-origin-x': '50%', '--schmancy-overlay-origin-y': '100%' }
-				: anchorOriginVars(this._anchorOriginAnchor, rect)
+				: anchorOriginVars(this.anchorOriginAnchor, rect)
 		for (const [k, v] of Object.entries(vars)) {
 			surface.style.setProperty(k, v)
 		}
@@ -333,35 +353,35 @@ export class SchmancyOverlay extends SchmancyElement {
 
 	private wireFocusTrap(): void {
 		if (!this.modal) return
-		this._lastFocusedElement = (document.activeElement as HTMLElement) ?? null
+		this.lastFocusedElement = (document.activeElement as HTMLElement) ?? null
 		const parent = this.parentElement
 		if (parent) {
-			this._inertedSiblings = []
+			this.inertedSiblings = []
 			for (const child of Array.from(parent.children)) {
 				if (child !== this && child instanceof HTMLElement && !child.inert) {
 					child.inert = true
-					this._inertedSiblings.push(child)
+					this.inertedSiblings.push(child)
 				}
 			}
 		}
 		// Focus the surface or the first [autofocus] child.
 		queueMicrotask(() => {
-			const auto = this._surface?.querySelector<HTMLElement>('[autofocus]')
-			;(auto ?? this._surface)?.focus()
+			const auto = this.surface?.querySelector<HTMLElement>('[autofocus]')
+			;(auto ?? this.surface)?.focus()
 		})
 	}
 
 	private releaseFocusTrap(): void {
-		for (const el of this._inertedSiblings) {
+		for (const el of this.inertedSiblings) {
 			el.inert = false
 		}
-		this._inertedSiblings = []
+		this.inertedSiblings = []
 		try {
-			this._lastFocusedElement?.focus?.()
+			this.lastFocusedElement?.focus?.()
 		} catch {
 			// trigger may be detached now; no-op.
 		}
-		this._lastFocusedElement = null
+		this.lastFocusedElement = null
 	}
 
 	/* ---------------- close triggers ----------------------------------- */
@@ -423,8 +443,8 @@ export class SchmancyOverlay extends SchmancyElement {
 				filter((e) => {
 					if (!this.dismissable) return false
 					const path = e.composedPath()
-					if (this._surface && path.includes(this._surface)) return false
-					if (this._resolvedAnchor?.el && path.includes(this._resolvedAnchor.el)) return false
+					if (this.surface && path.includes(this.surface)) return false
+					if (this.resolvedAnchor?.el && path.includes(this.resolvedAnchor.el)) return false
 					// Suppress dismiss when the click lands inside any overlay that sits
 					// ABOVE this one in the stack (nested overlays sibling-appended to
 					// body). Read the stack fresh per pointerdown — it mutates as overlays
@@ -450,7 +470,7 @@ export class SchmancyOverlay extends SchmancyElement {
 		// DRAG_START_TOP_PX in overlay.gestures). Escape + backdrop click
 		// cover the other dismiss paths via the modal-tier listeners above.
 		const swipe$ = this.layout === 'sheet' && this.dismissable
-			? swipeToDismiss$({ surface: this._surface, until$: merge(until, this._closed$) }).pipe(
+			? swipeToDismiss$({ surface: this.surface, until$: merge(until, this.#closed$) }).pipe(
 				take(1),
 				map(() => ({ reason: 'swipe' as CloseReason })),
 			)
@@ -490,25 +510,25 @@ export class SchmancyOverlay extends SchmancyElement {
 				filter((v): v is { w: number; h: number } => v !== null),
 				distinctUntilChanged((a, b) => a.w === b.w && a.h === b.h),
 				debounceTime(80),
-				takeUntil(merge(this.disconnecting, this._closed$)),
+				takeUntil(merge(this.disconnecting, this.#closed$)),
 			)
-			.subscribe((size) => this.maybeReResolve(size))
+			.subscribe(() => this.maybeReResolve())
 	}
 
-	private async maybeReResolve(_size: { w: number; h: number }): Promise<void> {
-		if (this._closing) return
-		const next = resolveLayout({ anchor: this._rawAnchor })
+	private async maybeReResolve(): Promise<void> {
+		if (this.closing) return
+		const next = resolveLayout({ anchor: this.rawAnchor })
 		if (next === this.layout) return
 		// Cooldown: prevent churn-driven bouncing.
 		const now = performance.now()
-		if (now - this._lastReResolveAt < RE_RESOLVE_COOLDOWN_MS) return
+		if (now - this.lastReResolveAt < RE_RESOLVE_COOLDOWN_MS) return
 		// Upward-only ratchet: centered → sheet on content-grow is OK,
 		// sheet → centered on content-shrink is ignored.
 		if (!isUpwardTransition(this.layout, next)) return
 
 		// FLIP: capture `before` rect, apply new layout, capture `after`,
 		// animate the inverse transform.
-		const surface = this._surface
+		const surface = this.surface
 		const before = surface.getBoundingClientRect()
 		this.layout = next
 		await this.updateComplete
@@ -519,19 +539,19 @@ export class SchmancyOverlay extends SchmancyElement {
 		} catch {
 			// cancelled — not an error.
 		}
-		this._lastReResolveAt = performance.now()
+		this.lastReResolveAt = performance.now()
 	}
 
 	/* ---------------- animations --------------------------------------- */
 
 	private async playAnimations(direction: 'in' | 'out'): Promise<void> {
-		const surface = this._surface
+		const surface = this.surface
 		if (!surface) return
 		const spec = surfaceAnimation(this.layout, direction)
 		const tasks: Promise<unknown>[] = [
 			surface.animate(spec.keyframes, spec.options).finished.catch(() => undefined),
 		]
-		const backdrop = this._backdrop
+		const backdrop = this.backdrop
 		if (this.modal && backdrop) {
 			tasks.push(
 				backdrop
@@ -561,11 +581,6 @@ async function mountContent(
 	host: HTMLElement,
 	props?: Record<string, unknown>,
 ): Promise<HTMLElement> {
-	// TemplateFactory — call at mount time so closed-over variables are read lazily.
-	if (isTemplateFactory(content)) {
-		return mountContent(content(), host, props)
-	}
-
 	// TemplateResult — render via lit's `render`.
 	if (isTemplateResult(content)) {
 		litRender(content, host)
@@ -580,11 +595,19 @@ async function mountContent(
 	}
 
 	// LazyComponent — await the module, recurse with the default export.
+	// Must precede the TemplateFactory check: a lazy loader is an arrow
+	// function with no `prototype`, so isTemplateFactory would match it
+	// first and call it as a factory.
 	if (isLazy(content)) {
 		const mod = await content()
 		return mountContent(mod.default, host, props)
 	}
 
+	// TemplateFactory — call at mount time so closed-over variables are read lazily.
+	if (isTemplateFactory(content)) {
+		return mountContent(content(), host, props)
+	}
+
 	// Class constructor.
 	if (typeof content === 'function') {
 		const Ctor = content as unknown as { new (): HTMLElement }
@@ -614,7 +637,7 @@ function isTemplateResult(x: unknown): x is TemplateResult {
 }
 
 function isLazy(x: unknown): x is LazyComponent {
-	return typeof x === 'function' && ('preload' in (x as object) || '_promise' in (x as object))
+	return typeof x === 'function' && 'preload' in (x as object)
 }
 
 function isUpwardTransition(from: OverlayLayout, to: OverlayLayout): boolean {

package/src/overlay/overlay.confirm-body.ts

@@ -60,11 +60,11 @@ export class SchmancyOverlayPromptBody extends SchmancyElement {
 	@property({ type: String }) pattern?: string
 	@property({ type: Boolean }) required = false
 
-	@query('schmancy-input') private _schmancyInput?: SchmancyInput
+	@query('schmancy-input') private schmancyInput?: SchmancyInput
 
 	override firstUpdated(): void {
 		if (this.mode === 'prompt') {
-			this._schmancyInput?.focus()
+			this.schmancyInput?.focus()
 		}
 	}
 
@@ -84,8 +84,8 @@ export class SchmancyOverlayPromptBody extends SchmancyElement {
 
 	private handleConfirm = (): void => {
 		if (this.mode === 'prompt') {
-			if (this._schmancyInput && !this._schmancyInput.reportValidity()) return
-			this.dismiss(this._schmancyInput?.value ?? '')
+			if (this.schmancyInput && !this.schmancyInput.reportValidity()) return
+			this.dismiss(this.schmancyInput?.value ?? '')
 		} else {
 			this.dismiss(true)
 		}

package/src/overlay/overlay.service.ts

@@ -176,10 +176,10 @@ export function show<T = void>(
 
 						const strategy: THistoryStrategy = resolvedOptions.historyStrategy ?? 'push'
 						if (strategy === 'push') {
-							history.pushState({ __schmancyOverlayId: id }, '', location.href)
+							history.pushState({ schmancyOverlayId: id }, '', location.href)
 							state.historyPushed = true
 						} else if (strategy === 'replace') {
-							history.replaceState({ __schmancyOverlayId: id }, '', location.href)
+							history.replaceState({ schmancyOverlayId: id }, '', location.href)
 						}
 					}),
 				)
@@ -214,7 +214,7 @@ export function show<T = void>(
 						if (
 							state.historyPushed &&
 							!state.settled &&
-							history.state?.__schmancyOverlayId === id
+							history.state?.schmancyOverlayId === id
 						) {
 							history.back()
 						}

package/src/overlay/overlay.types.ts

@@ -3,8 +3,10 @@ import type { Observable } from 'rxjs'
 import type { ComponentType, THistoryStrategy } from '../area/router.types'
 
 /**
- * Sync factory that returns a TemplateResult. Called at mount time so closed-over
- * variables are evaluated lazily — no snapshot staleness.
+ * Sync factory returning a TemplateResult. Invoked at mount and re-invoked
+ * whenever a signal read inside it changes — the factory's reactivity matches
+ * a component's render(). Prefer it over the eager html`` form whenever the
+ * template reads reactive state.
  */
 export type TemplateFactory = () => TemplateResult