@mhmo91/schmancy 0.10.19 → 0.10.21

package/src/overlay/overlay.component.ts

@@ -409,51 +409,41 @@ export class SchmancyOverlay extends SchmancyElement {
 			)
 			.subscribe()
 
-		// Modal tier: manual Esc (popover tiers use native toggle event).
-		if (this.tier === 'modal') {
-			fromEvent<KeyboardEvent>(document, 'keydown')
-				.pipe(
-					filter((e) => e.key === 'Escape'),
-					tap((e) => {
-						if (!this.dismissable) {
-							e.preventDefault()
-							return
-						}
+		// Manual Esc — all tiers. Modal has no native dismiss; anchored
+		// tiers use `popover="manual"` so the browser doesn't auto-Esc them
+		// either (the auto popover-stack would close ancestor overlays when
+		// a nested overlay opens — see positionPopoverAPI's comment).
+		fromEvent<KeyboardEvent>(document, 'keydown')
+			.pipe(
+				filter((e) => e.key === 'Escape'),
+				tap((e) => {
+					if (!this.dismissable) {
 						e.preventDefault()
-						void this.close('escape')
-					}),
-					takeUntil(until),
-				)
-				.subscribe()
-		}
-
-		// Popover tiers: native `toggle` event fires on open/close, with
-		// `newState: 'closed'` when the browser light-dismisses the popover.
-		if (this.tier === 'popover-fui' || this.tier === 'css-anchor') {
-			fromEvent<ToggleEvent>(this._surface, 'toggle')
-				.pipe(
-					filter((e) => e.newState === 'closed'),
-					take(1),
-					tap(() => {
-						if (!this._closing) void this.close('light-dismiss')
-					}),
-					takeUntil(until),
-				)
-				.subscribe()
-		}
+						return
+					}
+					e.preventDefault()
+					void this.close('escape')
+				}),
+				takeUntil(until),
+			)
+			.subscribe()
 
-		// Floating-UI-only tier: manual outside-click dismissal.
-		if (this.tier === 'fui-only') {
+		// Manual outside-click — all anchored tiers. Modal layouts have a
+		// backdrop that catches outside clicks via `onBackdropClick`; the
+		// anchored tiers (no backdrop) need a document-level pointerdown
+		// listener that ignores clicks whose composedPath includes the
+		// surface or anchor. Use composedPath membership (not
+		// `Node.contains`) so clicks on elements inside slotted /
+		// shadow-DOM descendants of the surface are correctly classified
+		// as "inside".
+		if (this.tier !== 'modal') {
 			fromEvent<PointerEvent>(document, 'pointerdown', { capture: true })
 				.pipe(
 					filter((e) => {
 						if (!this.dismissable) return false
-						const target = e.composedPath()[0] as Node | undefined
-						if (!target) return false
-						// Clicks inside the surface shouldn't dismiss.
-						if (this._surface?.contains(target as Node)) return false
-						// Clicks on the anchor itself shouldn't dismiss (avoid re-toggle).
-						if (this._resolvedAnchor?.el?.contains(target as Node)) 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
 						return true
 					}),
 					take(1),
@@ -603,6 +593,11 @@ 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)
@@ -642,6 +637,10 @@ async function mountContent(
 	throw new Error('schmancy-overlay: unsupported content type')
 }
 
+function isTemplateFactory(x: unknown): x is import('./overlay.types').TemplateFactory {
+	return typeof x === 'function' && !(x as { prototype?: unknown }).prototype
+}
+
 function isTemplateResult(x: unknown): x is TemplateResult {
 	return typeof x === 'object' && x !== null && '_$litType$' in x
 }

package/src/overlay/overlay.positioning.ts

@@ -145,18 +145,26 @@ function cssForPlacement(p: OverlayPlacement): string {
  * ======================================================================= */
 
 /**
- * Wire the Popover API lifecycle — the surface gets `popover="auto"` and
+ * Wire the Popover API lifecycle — the surface gets `popover="manual"` and
  * `showPopover()` is called to promote it into the native top layer. No
  * position math here; the caller pairs this with `positionFloatingUI` for
  * the geometry, since Tier 2 is Popover-for-stacking + Floating UI-for-math.
  *
+ * `manual` (not `auto`) so stacked overlays don't fight the browser's
+ * popover-auto light-dismiss algorithm: opening a second `popover="auto"`
+ * that isn't a DOM/invoker descendant of the first closes the first via
+ * the toggle event. Each schmancy overlay is appended as a sibling to
+ * `<body>`, so the browser can't see the nesting and would dismiss the
+ * parent. With `manual`, schmancy owns Esc + outside-click via
+ * `wireCloseTriggers`, and the top-layer rendering is preserved.
+ *
  * Returns a cleanup function that hides the popover and strips the attr.
  */
 export function positionPopoverAPI(surface: HTMLElement): () => void {
 	if (!CAPS.popover) {
 		throw new Error('positionPopoverAPI requires Popover API support')
 	}
-	surface.setAttribute('popover', 'auto')
+	surface.setAttribute('popover', 'manual')
 	try {
 		;(surface as unknown as { showPopover(): void }).showPopover()
 	} catch {

package/src/overlay/overlay.types.ts

@@ -3,15 +3,22 @@ import type { Observable } from 'rxjs'
 import type { ComponentType } from '../area/router.types'
 import type { 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.
+ */
+export type TemplateFactory = () => TemplateResult
+
 /**
  * What the caller is showing. Flat union — `typeof`-discriminated at runtime.
  * Reuses area's `ComponentType` (class | tag name | HTMLElement | lazy loader)
- * and adds Lit `TemplateResult` for inline templates.
+ * and adds Lit `TemplateResult` for inline templates plus `TemplateFactory` for
+ * lazy template evaluation.
  *
  * The common case is one positional arg: `show(MyEditor)`, `show(html\`...\`)`,
- * `show(el)`, `show('my-tag')`, `show(lazy(() => import('./x')))`.
+ * `show(() => html\`...\`)`, `show(el)`, `show('my-tag')`, `show(lazy(() => import('./x')))`.
  */
-export type Content = ComponentType | TemplateResult
+export type Content = ComponentType | TemplateResult | TemplateFactory
 
 /**
  * Virtual reference object — same contract Floating UI and CSS Anchor