@mhmo91/schmancy 0.10.27 → 0.10.29

package/src/overlay/overlay.stack.test.ts

@@ -0,0 +1,113 @@
+// overlay.stack.test.ts — unit tests for the stacked-overlay dismiss guard
+//
+// Exercises the outsideClick$ filter in SchmancyOverlay by driving the element
+// state directly and calling wireCloseTriggers via type-cast. The test spies on
+// close() so it doesn't need to wait for animation promises to settle.
+//
+// Uses the real browser DOM (vitest browser mode) so composedPath and
+// shadow-DOM queries behave identically to production.
+
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import './overlay.component'
+import { clearStack, currentStack, pushEntry, removeEntry } from './overlay.stack'
+import type { OverlayEntry } from './overlay.types'
+
+const nextFrame = () => new Promise<void>(r => requestAnimationFrame(() => r()))
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type AnyOverlay = any
+
+function entryFor(element: HTMLElement, id: string): OverlayEntry {
+	return { id, element, layout: 'anchored', modal: false, tier: 'fui-only' }
+}
+
+// Patch the @query getter for _surface (read-only) so wireCloseTriggers reads it.
+function patchSurface(overlay: AnyOverlay, surface: HTMLElement): void {
+	Object.defineProperty(overlay, '_surface', { get: () => surface, configurable: true })
+}
+
+// Stub close() so tests don't wait for animation promises.
+function stubClose(overlay: AnyOverlay): ReturnType<typeof vi.fn> {
+	const spy = vi.fn().mockResolvedValue(undefined)
+	Object.defineProperty(overlay, 'close', { value: spy, configurable: true })
+	return spy
+}
+
+describe('overlay stacked-dismiss guard', () => {
+	beforeEach(() => clearStack())
+	afterEach(() => { clearStack(); vi.restoreAllMocks() })
+
+	it('single overlay: body click invokes close("backdrop") (baseline)', async () => {
+		const overlayA: AnyOverlay = document.createElement('schmancy-overlay')
+		document.body.appendChild(overlayA)
+		await nextFrame()
+
+		const fakesurf = document.createElement('div')
+		fakesurf.className = 'surface'
+		document.body.appendChild(fakesurf)
+		patchSurface(overlayA, fakesurf)
+
+		overlayA.tier = 'fui-only'
+		overlayA.dismissable = true
+		overlayA.modal = false
+
+		const closeSpy = stubClose(overlayA)
+
+		pushEntry(entryFor(overlayA, 'a'))
+		expect(currentStack()).toHaveLength(1)
+
+		overlayA.wireCloseTriggers()
+
+		// Dispatch on a separate span — not inside the overlay's surface.
+		const outside = document.createElement('span')
+		document.body.appendChild(outside)
+		outside.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, composed: true, cancelable: true }))
+		await nextFrame()
+
+		expect(closeSpy.mock.calls[0]?.[0]).toBe('backdrop')
+
+		outside.remove()
+		fakesurf.remove()
+		overlayA.remove()
+		removeEntry('a')
+	})
+
+	it('nested overlay: click inside overlay B does not close overlay A', async () => {
+		const overlayA: AnyOverlay = document.createElement('schmancy-overlay')
+		const overlayB: AnyOverlay = document.createElement('schmancy-overlay')
+		document.body.appendChild(overlayA)
+		document.body.appendChild(overlayB)
+		await nextFrame()
+
+		const surfA = document.createElement('div')
+		surfA.className = 'surface'
+		document.body.appendChild(surfA)
+		patchSurface(overlayA, surfA)
+
+		overlayA.tier = 'fui-only'
+		overlayA.dismissable = true
+		overlayA.modal = false
+
+		const closeSpy = stubClose(overlayA)
+
+		// Register A first, then B on top.
+		pushEntry(entryFor(overlayA, 'a'))
+		pushEntry(entryFor(overlayB, 'b'))
+		expect(currentStack()).toHaveLength(2)
+
+		overlayA.wireCloseTriggers()
+
+		// Dispatch a pointerdown on overlayB — its host element IS in composedPath.
+		overlayB.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, composed: true, cancelable: true }))
+		await nextFrame()
+
+		// A must not have been closed.
+		expect(closeSpy).not.toHaveBeenCalled()
+
+		surfA.remove()
+		overlayA.remove()
+		overlayB.remove()
+		removeEntry('a')
+		removeEntry('b')
+	})
+})

package/src/overlay/overlay.types.ts

@@ -97,11 +97,11 @@ export interface ShowOptions {
 	 *  dismisses (same as unsubscribe). */
 	signal?: AbortSignal
 
-	/** Rare escape hatch. Defaults: `false` for anchored, `true` for
-	 *  centered/sheet. Setting `modal: true` on an anchored overlay forces
-	 *  <dialog>.showModal() semantics (focus trap + background inert) —
-	 *  use for destructive-confirm menus. */
-	modal?: boolean
+	/** Override the resolved layout. When set, short-circuits the resolver
+	 *  and forces this layout. Use when the caller knows the content's nature
+	 *  better than the resolver can — e.g. `as: 'sheet'` for an immersive
+	 *  takeover view that doesn't have an anchor. */
+	as?: OverlayLayout
 
 	/** Default `'push'`. Same vocabulary as `area.push()`.
 	 *  - `'push'` — new history entry; back dismisses, forward re-opens.
@@ -129,14 +129,20 @@ export interface ShowOptions {
 }
 
 /**
- * Resolved layout. Pure output of the dispatch engine; callers never pick.
- * - `'centered'`  — native <dialog>.showModal(), focus-trapped.
+ * Resolved layout. Two values:
  * - `'anchored'`  — popover="auto" + CSS Anchor Positioning / Floating UI,
- *                    non-modal, background stays interactive.
- * - `'sheet'`     — native <dialog>.showModal() as a bottom sheet,
- *                    swipe-to-dismiss, safe-area aware.
+ *                    non-modal, background stays interactive. Used when the
+ *                    caller passes an anchor (the novel default for menus,
+ *                    popovers, dropdowns).
+ * - `'sheet'`     — bottom sheet (mobile) or modal panel (desktop) with
+ *                    swipe-to-dismiss, safe-area aware. The default for every
+ *                    non-anchored overlay — confirm/prompt, immersive content
+ *                    views, legal pages, takeovers.
+ *
+ * Callers can force a layout with `ShowOptions.as` — useful for an anchored
+ * trigger whose content should still render as a sheet, or vice versa.
  */
-export type OverlayLayout = 'centered' | 'anchored' | 'sheet'
+export type OverlayLayout = 'anchored' | 'sheet'
 
 /**
  * Positioning tier an anchored overlay is using.

package/types/src/form/fields/date-range/date-range-dialog.d.ts

@@ -13,6 +13,7 @@ import { PresetCategory } from './date-range-presets';
  * @element schmancy-date-range-dialog
  */
 export declare class SchmancyDateRangeDialog extends SchmancyElement {
+    static styles: import("lit").CSSResult[];
     type: 'date' | 'datetime-local';
     dateFrom: {
         label: string;

package/types/src/form/form.d.ts

@@ -33,6 +33,7 @@ export type SchmancyFormSubmitDetail<T = Record<string, FormDataEntryValue>> = {
     until(p: Promise<unknown>): void;
 };
 export default class SchmancyForm<TSchema extends ParseSchema | undefined = undefined> extends SchmancyElement {
+    static styles: import("lit").CSSResult;
     static readonly tagName: string;
     /**
      * Optional schema for parsing FormData on submit. Anything with a

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

@@ -1,6 +1,6 @@
 import { SchmancyElement } from '@mixins/index';
 import { type TemplateResult } from 'lit';
-import '../icons/icon';
+import '../form/form';
 import '../form/fields/input/input';
 import '../typography/typography';
 import '../button/button';

package/types/src/overlay/overlay.layout.d.ts

@@ -7,45 +7,25 @@ import type { Anchor, OverlayLayout, VirtualAnchor } from './overlay.types';
  * as named-constant diffs, not hidden in inline literals (state skill:
  * "thresholds ARE the policy").
  */
-/** Below this viewport width, every overlay becomes a bottom sheet. */
-export declare const NARROW_VIEWPORT_PX = 640;
-/** Content taller than this fraction of viewport height → sheet. */
-export declare const TALL_CONTENT_FRACTION = 0.8;
-/** Content wider than this fraction of viewport width → sheet. */
-export declare const WIDE_CONTENT_FRACTION = 0.9;
 /** Floating UI / CSS anchor-positioning safety padding. */
 export declare const ANCHOR_FIT_PADDING_PX = 16;
 export interface LayoutInputs {
     anchor?: Anchor;
-    content: {
-        width: number;
-        height: number;
-    };
-    viewport: {
-        width: number;
-        height: number;
-        /** `matchMedia('(pointer: coarse)').matches` at call time. */
-        isCoarsePointer: boolean;
-    };
 }
 /**
- * Priority order:
- *   1. viewport / content forces sheet
- *   2. anchor provided → anchored (the novel default)
- *   3. fallback → centered
+ * Two outcomes, one signal: anchor presence.
  *
- * Floating UI's `flip` + `shift` + `size` middleware handles "anchor
- * doesn't fit initially" — it returns a fitting position rather than
- * rejecting. So step 2 does NOT branch on "does the anchor fit?";
- * Floating UI's output IS the answer. If content is genuinely too
- * large for any anchored position, step 1 already routed to sheet.
+ * - anchor provided → anchored (popover/menu/dropdown next to a trigger)
+ * - no anchor       → sheet    (everything else: dialogs, takeovers, content panels)
+ *
+ * Callers who want to force a specific layout regardless of anchor pass
+ * `ShowOptions.as` — the resolver is bypassed entirely in that case.
+ *
+ * Floating UI's `flip` + `shift` + `size` middleware handles "anchor doesn't
+ * fit initially" — it returns a fitting position rather than rejecting. So
+ * anchored layouts don't need a fallback; Floating UI's output IS the answer.
  */
 export declare function resolveLayout(inputs: LayoutInputs): OverlayLayout;
-/**
- * Read the current viewport + pointer inputs. Separated so tests can
- * substitute synthetic inputs and the `resolveLayout` fn stays pure.
- */
-export declare function readViewport(): LayoutInputs['viewport'];
 /**
  * Resolved reference the positioning strategies consume.
  *

package/types/src/overlay/overlay.stack.test.d.ts

@@ -0,0 +1 @@
+import './overlay.component';

package/types/src/overlay/overlay.types.d.ts

@@ -71,11 +71,11 @@ export interface ShowOptions {
      *  addEventListener, getUserMedia, etc. When signal aborts, overlay
      *  dismisses (same as unsubscribe). */
     signal?: AbortSignal;
-    /** Rare escape hatch. Defaults: `false` for anchored, `true` for
-     *  centered/sheet. Setting `modal: true` on an anchored overlay forces
-     *  <dialog>.showModal() semantics (focus trap + background inert) —
-     *  use for destructive-confirm menus. */
-    modal?: boolean;
+    /** Override the resolved layout. When set, short-circuits the resolver
+     *  and forces this layout. Use when the caller knows the content's nature
+     *  better than the resolver can — e.g. `as: 'sheet'` for an immersive
+     *  takeover view that doesn't have an anchor. */
+    as?: OverlayLayout;
     /** Default `'push'`. Same vocabulary as `area.push()`.
      *  - `'push'` — new history entry; back dismisses, forward re-opens.
      *  - `'replace'` — replace current entry; back skips the overlay.
@@ -98,14 +98,20 @@ export interface ShowOptions {
     track?: boolean;
 }
 /**
- * Resolved layout. Pure output of the dispatch engine; callers never pick.
- * - `'centered'`  — native <dialog>.showModal(), focus-trapped.
+ * Resolved layout. Two values:
  * - `'anchored'`  — popover="auto" + CSS Anchor Positioning / Floating UI,
- *                    non-modal, background stays interactive.
- * - `'sheet'`     — native <dialog>.showModal() as a bottom sheet,
- *                    swipe-to-dismiss, safe-area aware.
+ *                    non-modal, background stays interactive. Used when the
+ *                    caller passes an anchor (the novel default for menus,
+ *                    popovers, dropdowns).
+ * - `'sheet'`     — bottom sheet (mobile) or modal panel (desktop) with
+ *                    swipe-to-dismiss, safe-area aware. The default for every
+ *                    non-anchored overlay — confirm/prompt, immersive content
+ *                    views, legal pages, takeovers.
+ *
+ * Callers can force a layout with `ShowOptions.as` — useful for an anchored
+ * trigger whose content should still render as a sheet, or vice versa.
  */
-export type OverlayLayout = 'centered' | 'anchored' | 'sheet';
+export type OverlayLayout = 'anchored' | 'sheet';
 /**
  * Positioning tier an anchored overlay is using.
  * - `'css-anchor'` — Tier 1: Popover API + CSS Anchor Positioning (Chromium).