@verbb/plugin-kit-web 2.0.0

package/dist/chunks/pk-popover-XZZdJ4WI.js

@@ -0,0 +1,377 @@
+import { n as PkElement, t as __decorate } from "./decorate-W02hmVTt.js";
+import { r as buttonGroupCornerRoleStyles } from "./button-group-item.styles-DYmBR28a.js";
+import { i as uniqueId } from "./focus-aa5dlv8k.js";
+import { i as unregisterDismissible, n as isTopDismissible, r as registerDismissible } from "./dismissible-stack-XQUMfKO3.js";
+import { i as PkShowEvent, n as PkAfterShowEvent, r as PkHideEvent, t as PkAfterHideEvent } from "./overlay-lifecycle-D0pkTQyI.js";
+import { r as resolveElementById } from "./pk-popup-CgiXok-U.js";
+import { i as waitForPopupReposition, r as syncPopupPlacementAnimation } from "./popup-placement-animation-WlEXnS85.js";
+import { n as isPointerInsideOverlay } from "./popup-pointer-C8lypj8V.js";
+import { t as popupContentAnimationStyles } from "./popup-content-animation.styles-Dc6d9quJ.js";
+import { css, html, nothing } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+import { customElement, property, query, state } from "lit/decorators.js";
+//#region src/components/popover/pk-popover.styles.ts
+var pkPopoverStyles = [
+	buttonGroupCornerRoleStyles(),
+	popupContentAnimationStyles,
+	css`
+        @layer pk-component {
+            :host {
+                /* Flex column parents stretch cross-axis size — pin to content.
+                   (inline-block + align-self; same class of fix as dialog / dropdown.) */
+                display: inline-block;
+                max-width: 100%;
+                align-self: flex-start;
+                flex: none;
+                vertical-align: middle;
+            }
+
+            :host([data-pk-group-orientation]) {
+                display: inline-flex;
+                vertical-align: middle;
+                flex: 0 0 auto;
+                align-self: auto;
+            }
+
+            :host([data-pk-group-orientation]) ::slotted([slot='trigger']) {
+                --pk-bg-start-start-radius: inherit;
+                --pk-bg-start-end-radius: inherit;
+                --pk-bg-end-start-radius: inherit;
+                --pk-bg-end-end-radius: inherit;
+            }
+
+            :host([data-pk-group-orientation='horizontal'][data-pk-group-join]) {
+                margin-inline-start: var(--pk-bg-horizontal-indent, 0);
+            }
+
+            :host([data-pk-group-orientation='vertical'][data-pk-group-join]) {
+                margin-block-start: var(--pk-bg-vertical-indent, 0);
+            }
+
+            :host([data-pk-group-orientation='horizontal'][data-pk-group-join]:has([slot='trigger'][variant='outline'], [slot='trigger'][variant='dashed'])) {
+                margin-inline-start: var(--pk-bg-horizontal-indent-outlined, 0);
+            }
+
+            :host([data-pk-group-orientation='vertical'][data-pk-group-join]:has([slot='trigger'][variant='outline'], [slot='trigger'][variant='dashed'])) {
+                margin-block-start: var(--pk-bg-vertical-indent-outlined, 0);
+            }
+
+            /* Match pk-popup's arrow fill to the panel surface when with-arrow is on. */
+            :host([with-arrow]) {
+                --pk-popup-arrow-color: var(--pk-color-white);
+                --pk-popup-arrow-size: 8px;
+            }
+
+            .panel {
+                box-sizing: border-box;
+                width: 18rem;
+                padding: 1rem;
+                border-radius: var(--pk-radius-md);
+                background: var(--pk-color-white);
+                box-shadow: var(--pk-shadow-popover);
+                /* Craft CP body text (~gray-700), not gray-900. */
+                color: var(--pk-color-gray-700);
+            }
+
+            /* Flush panels for command/menu chrome that owns its own inset (variable picker, etc.).
+               Match kit v1 PopoverContent min-w 260px / max-w 360px: without min-width,
+               width max-content shrinks to short labels and looks narrower than the old picker. */
+            :host([flush]) .panel {
+                width: max-content;
+                min-width: var(--pk-popover-flush-min-width, 16.25rem);
+                max-width: min(var(--pk-popover-flush-max-width, 22.5rem), 100vw - 1rem);
+                padding: 0;
+            }
+
+            .panel[hidden] {
+                display: none !important;
+            }
+        }
+    `
+];
+//#endregion
+//#region src/components/popover/pk-popover.ts
+var PkPopover = class PkPopover extends PkElement {
+	constructor(..._args) {
+		super(..._args);
+		this.open = false;
+		this.placement = "bottom";
+		this.sideOffset = 4;
+		this.flush = false;
+		this.withArrow = false;
+		this.for = "";
+		this.anchor = null;
+		this.triggerElement = null;
+		this.closing = false;
+		this.panelAnimated = false;
+		this.triggerId = uniqueId("pk-popover-trigger");
+		this.dismissRegistered = false;
+		this.syncingOpenSideEffects = false;
+		this.exitAnimationPromise = null;
+		this.handleToggleClick = (event) => {
+			event.preventDefault();
+			event.stopPropagation();
+			if (this.closing) return;
+			this.open = !this.open;
+		};
+		this.onDocumentPointerDown = (event) => {
+			if (this.isPointerInside(event) || this.closing) return;
+			this.closePopover("light-dismiss");
+		};
+		this.onDocumentKeyDown = (event) => {
+			if (event.key !== "Escape" || !isTopDismissible(this) || this.closing) return;
+			event.preventDefault();
+			event.stopPropagation();
+			this.closePopover("escape");
+		};
+	}
+	static {
+		this.styles = pkPopoverStyles;
+	}
+	get panelElement() {
+		return this.popupElement?.getContentElement() ?? null;
+	}
+	disconnectedCallback() {
+		this.closePopover("api", true);
+		super.disconnectedCallback();
+	}
+	/**
+	* When controlled/toggle `open` flips false, arm `closing` in the same update so the
+	* panel is not `hidden` for a frame before the exit animation starts.
+	*/
+	willUpdate(changed) {
+		if (changed.has("open") && this.open === false && changed.get("open") === true && !this.syncingOpenSideEffects && !this.closing) {
+			this.closing = true;
+			this.panelAnimated = false;
+		}
+	}
+	/**
+	* Controlled `open` (e.g. React) must arm/disarm light-dismiss the same way as
+	* trigger toggles. Without this, programmatic open shows the panel but click-away
+	* never fires.
+	*/
+	async updated(changed) {
+		super.updated(changed);
+		if (!changed.has("open") || this.syncingOpenSideEffects) return;
+		const previousOpen = changed.get("open");
+		if (previousOpen === this.open) return;
+		if (previousOpen === void 0 && this.open === false) return;
+		if (this.open) await this.openPopover();
+		else await this.closePopover("api");
+	}
+	onTriggerSlotChange(event) {
+		const [trigger] = event.target.assignedElements({ flatten: true });
+		this.unbindTrigger(this.triggerElement);
+		this.triggerElement = trigger ?? null;
+		this.bindTrigger(this.triggerElement);
+	}
+	bindTrigger(trigger) {
+		if (!trigger) return;
+		if (!trigger.id) trigger.id = this.triggerId;
+		trigger.setAttribute("aria-haspopup", "dialog");
+		trigger.addEventListener("click", this.handleToggleClick);
+		this.syncExpanded();
+	}
+	unbindTrigger(trigger) {
+		trigger?.removeEventListener("click", this.handleToggleClick);
+	}
+	async openPopover() {
+		if (!this.getAnchor()) return;
+		if (this.exitAnimationPromise) await this.exitAnimationPromise;
+		if (this.dismissRegistered && this.open) {
+			if (this.panelElement) this.panelElement.hidden = false;
+			this.syncExpanded();
+			return;
+		}
+		if (!this.dispatchEvent(new PkShowEvent())) {
+			this.syncingOpenSideEffects = true;
+			this.open = false;
+			this.syncingOpenSideEffects = false;
+			return;
+		}
+		this.syncingOpenSideEffects = true;
+		this.open = true;
+		this.syncingOpenSideEffects = false;
+		this.closing = false;
+		this.panelAnimated = false;
+		if (this.panelElement) {
+			this.panelElement.hidden = false;
+			syncPopupPlacementAnimation(this.panelElement, this.placement);
+		}
+		this.syncExpanded();
+		this.registerDismissHandlers();
+		await this.updateComplete;
+		const placement = await waitForPopupReposition(this.popupElement, this.placement);
+		if (this.panelElement) syncPopupPlacementAnimation(this.panelElement, placement);
+		this.panelAnimated = true;
+		this.dispatchEvent(new PkAfterShowEvent());
+		this.dispatchEvent(new CustomEvent("pk-open-change", {
+			detail: { open: true },
+			bubbles: true,
+			composed: true
+		}));
+	}
+	/**
+	* @param immediate Skip exit animation (disconnect / forced teardown).
+	*/
+	async closePopover(source = "unknown", immediate = false) {
+		if (this.exitAnimationPromise) return this.exitAnimationPromise;
+		if (!this.dismissRegistered && !this.closing && !this.open) return;
+		const hideEvent = new PkHideEvent(source);
+		if (!this.dispatchEvent(hideEvent)) {
+			this.syncingOpenSideEffects = true;
+			this.open = true;
+			this.syncingOpenSideEffects = false;
+			this.closing = false;
+			this.panelAnimated = true;
+			return;
+		}
+		this.unregisterDismissHandlers();
+		this.closing = true;
+		this.panelAnimated = false;
+		if (this.open) {
+			this.syncingOpenSideEffects = true;
+			this.open = false;
+			this.syncingOpenSideEffects = false;
+		}
+		const finishClose = async () => {
+			if (!immediate) {
+				await this.updateComplete;
+				await this.waitForExitAnimation();
+			}
+			this.closing = false;
+			this.panelAnimated = false;
+			if (this.panelElement) {
+				this.panelElement.hidden = true;
+				this.panelElement.removeAttribute("data-side");
+			}
+			this.syncExpanded();
+			this.dispatchEvent(new PkAfterHideEvent());
+			this.dispatchEvent(new CustomEvent("pk-open-change", {
+				detail: { open: false },
+				bubbles: true,
+				composed: true
+			}));
+		};
+		this.exitAnimationPromise = finishClose().finally(() => {
+			this.exitAnimationPromise = null;
+		});
+		return this.exitAnimationPromise;
+	}
+	waitForExitAnimation() {
+		const panel = this.panelElement;
+		if (!panel) return Promise.resolve();
+		return new Promise((resolve) => {
+			let settled = false;
+			const finish = () => {
+				if (settled) return;
+				settled = true;
+				panel.removeEventListener("animationend", onAnimationEnd);
+				window.clearTimeout(fallback);
+				panel.classList.remove("closing");
+				resolve();
+			};
+			const onAnimationEnd = (event) => {
+				if (event.target === panel && event.animationName.startsWith("pk-popup-content-out")) finish();
+			};
+			panel.classList.add("closing");
+			panel.addEventListener("animationend", onAnimationEnd);
+			const fallback = window.setTimeout(finish, 150);
+		});
+	}
+	getAnchor() {
+		if (this.anchor) return this.anchor;
+		if (this.for) return resolveElementById(this, this.for);
+		if (this.triggerElement) return this.triggerElement;
+		return null;
+	}
+	registerDismissHandlers() {
+		if (this.dismissRegistered) return;
+		registerDismissible(this);
+		this.dismissRegistered = true;
+		document.addEventListener("pointerdown", this.onDocumentPointerDown, true);
+		document.addEventListener("keydown", this.onDocumentKeyDown, true);
+	}
+	unregisterDismissHandlers() {
+		if (this.dismissRegistered) {
+			unregisterDismissible(this);
+			this.dismissRegistered = false;
+		}
+		document.removeEventListener("pointerdown", this.onDocumentPointerDown, true);
+		document.removeEventListener("keydown", this.onDocumentKeyDown, true);
+	}
+	isPointerInside(event) {
+		return isPointerInsideOverlay(event, {
+			host: this,
+			anchor: this.getAnchorElement(),
+			panel: this.panelElement
+		});
+	}
+	getAnchorElement() {
+		if (this.anchor instanceof HTMLElement) return this.anchor;
+		if (this.triggerElement) return this.triggerElement;
+		if (this.for) return resolveElementById(this, this.for);
+		return null;
+	}
+	syncExpanded() {
+		this.triggerElement?.setAttribute("aria-expanded", this.open ? "true" : "false");
+	}
+	render() {
+		const anchor = this.getAnchor();
+		return html`
+            <slot name="trigger" @slotchange=${this.onTriggerSlotChange}></slot>
+            <pk-popup
+                .active=${this.open || this.closing}
+                .anchor=${anchor ?? ""}
+                .placement=${this.placement}
+                .distance=${this.sideOffset}
+                .arrow=${this.withArrow}
+                flip
+                shift
+            >
+                <div
+                    part="panel"
+                    class=${classMap({
+			panel: true,
+			"pk-popup-content": true,
+			closing: this.closing
+		})}
+                    ?hidden=${!this.open && !this.closing}
+                    data-open=${this.panelAnimated && !this.closing ? "" : nothing}
+                    tabindex=${this.open ? "-1" : nothing}
+                >
+                    <slot></slot>
+                </div>
+            </pk-popup>
+        `;
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], PkPopover.prototype, "open", void 0);
+__decorate([property({ reflect: true })], PkPopover.prototype, "placement", void 0);
+__decorate([property({
+	attribute: "side-offset",
+	type: Number
+})], PkPopover.prototype, "sideOffset", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], PkPopover.prototype, "flush", void 0);
+__decorate([property({
+	attribute: "with-arrow",
+	type: Boolean,
+	reflect: true
+})], PkPopover.prototype, "withArrow", void 0);
+__decorate([property({ reflect: true })], PkPopover.prototype, "for", void 0);
+__decorate([property({ attribute: false })], PkPopover.prototype, "anchor", void 0);
+__decorate([query("pk-popup")], PkPopover.prototype, "popupElement", void 0);
+__decorate([state()], PkPopover.prototype, "triggerElement", void 0);
+__decorate([state()], PkPopover.prototype, "closing", void 0);
+__decorate([state()], PkPopover.prototype, "panelAnimated", void 0);
+PkPopover = __decorate([customElement("pk-popover")], PkPopover);
+//#endregion
+export { PkPopover as t };
+
+//# sourceMappingURL=pk-popover-XZZdJ4WI.js.map

package/dist/chunks/pk-popover-XZZdJ4WI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pk-popover-XZZdJ4WI.js","names":[],"sources":["../../src/components/popover/pk-popover.styles.ts","../../src/components/popover/pk-popover.ts"],"sourcesContent":["import { css } from 'lit';\n\nimport { buttonGroupCornerRoleStyles } from '../button-group/button-group-item.styles.js';\nimport { popupContentAnimationStyles } from '../../styles/popup-content-animation.styles.js';\n\nexport const pkPopoverStyles = [\n    buttonGroupCornerRoleStyles(),\n    popupContentAnimationStyles,\n    css`\n        @layer pk-component {\n            :host {\n                /* Flex column parents stretch cross-axis size — pin to content.\n                   (inline-block + align-self; same class of fix as dialog / dropdown.) */\n                display: inline-block;\n                max-width: 100%;\n                align-self: flex-start;\n                flex: none;\n                vertical-align: middle;\n            }\n\n            :host([data-pk-group-orientation]) {\n                display: inline-flex;\n                vertical-align: middle;\n                flex: 0 0 auto;\n                align-self: auto;\n            }\n\n            :host([data-pk-group-orientation]) ::slotted([slot='trigger']) {\n                --pk-bg-start-start-radius: inherit;\n                --pk-bg-start-end-radius: inherit;\n                --pk-bg-end-start-radius: inherit;\n                --pk-bg-end-end-radius: inherit;\n            }\n\n            :host([data-pk-group-orientation='horizontal'][data-pk-group-join]) {\n                margin-inline-start: var(--pk-bg-horizontal-indent, 0);\n            }\n\n            :host([data-pk-group-orientation='vertical'][data-pk-group-join]) {\n                margin-block-start: var(--pk-bg-vertical-indent, 0);\n            }\n\n            :host([data-pk-group-orientation='horizontal'][data-pk-group-join]:has([slot='trigger'][variant='outline'], [slot='trigger'][variant='dashed'])) {\n                margin-inline-start: var(--pk-bg-horizontal-indent-outlined, 0);\n            }\n\n            :host([data-pk-group-orientation='vertical'][data-pk-group-join]:has([slot='trigger'][variant='outline'], [slot='trigger'][variant='dashed'])) {\n                margin-block-start: var(--pk-bg-vertical-indent-outlined, 0);\n            }\n\n            /* Match pk-popup's arrow fill to the panel surface when with-arrow is on. */\n            :host([with-arrow]) {\n                --pk-popup-arrow-color: var(--pk-color-white);\n                --pk-popup-arrow-size: 8px;\n            }\n\n            .panel {\n                box-sizing: border-box;\n                width: 18rem;\n                padding: 1rem;\n                border-radius: var(--pk-radius-md);\n                background: var(--pk-color-white);\n                box-shadow: var(--pk-shadow-popover);\n                /* Craft CP body text (~gray-700), not gray-900. */\n                color: var(--pk-color-gray-700);\n            }\n\n            /* Flush panels for command/menu chrome that owns its own inset (variable picker, etc.).\n               Match kit v1 PopoverContent min-w 260px / max-w 360px: without min-width,\n               width max-content shrinks to short labels and looks narrower than the old picker. */\n            :host([flush]) .panel {\n                width: max-content;\n                min-width: var(--pk-popover-flush-min-width, 16.25rem);\n                max-width: min(var(--pk-popover-flush-max-width, 22.5rem), 100vw - 1rem);\n                padding: 0;\n            }\n\n            .panel[hidden] {\n                display: none !important;\n            }\n        }\n    `,\n];\n","import { html, nothing } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport type { PropertyValues } from 'lit';\n\nimport { isTopDismissible, registerDismissible, unregisterDismissible } from '../../a11y/dismissible-stack.js';\nimport { uniqueId } from '../../a11y/focus.js';\nimport { PkElement } from '../../base/pk-element.js';\nimport { resolveElementById } from '../../internal/resolve-element-by-id.js';\nimport {\n    PkAfterHideEvent,\n    PkAfterShowEvent,\n    PkHideEvent,\n    PkShowEvent,\n    type PkOverlaySource,\n} from '../../events/overlay-lifecycle.js';\nimport { PkPopup, type PkPopupPlacement } from '../popup/pk-popup.js';\nimport {\n    syncPopupPlacementAnimation,\n    waitForPopupReposition,\n} from '../../utils/popup-placement-animation.js';\nimport { isPointerInsideOverlay } from '../../utils/popup-pointer.js';\nimport { pkPopoverStyles } from './pk-popover.styles.js';\n\n/**\n * Popover —  pattern: trigger toggles a floating panel.\n *\n * @slot trigger - Popover trigger\n * @slot - Popover content\n *\n * @csspart panel - Floating content panel\n *\n * @attr with-arrow - Show a pointing arrow toward the trigger (default: off)\n */\n@customElement('pk-popover')\nexport class PkPopover extends PkElement {\n    static override styles = pkPopoverStyles;\n\n    @property({ type: Boolean, reflect: true })\n    open = false;\n\n    @property({ reflect: true })\n    placement: PkPopupPlacement = 'bottom';\n\n    @property({ attribute: 'side-offset', type: Number })\n    sideOffset = 4;\n\n    /**\n     * Drop default panel padding/fixed width so slotted chrome (command lists, etc.)\n     * can control its own inset. Consumer outer `p-0` alone cannot reach `.panel`.\n     */\n    @property({ type: Boolean, reflect: true })\n    flush = false;\n\n    /**\n     * Show a floating-ui arrow on the panel (off by default).\n     * Named like other optional chrome (`with-clear`, `with-caret`) — tooltip always\n     * paints its own arrow and has no toggle.\n     */\n    @property({ attribute: 'with-arrow', type: Boolean, reflect: true })\n    withArrow = false;\n\n    /** Anchor element id — alternative to the trigger slot. */\n    @property({ reflect: true })\n    for = '';\n\n    /**\n     * Live element anchor — use when the target lives in another shadow tree\n     * (e.g. TipTap chips). Preferred over `for` / trigger slot when set.\n     * Stays in the consumer tree so modal `showModal()` inert does not apply\n     * (unlike portaling the panel to a root outside the dialog).\n     */\n    @property({ attribute: false })\n    anchor: Element | null = null;\n\n    @query('pk-popup')\n    private popupElement!: PkPopup;\n\n    private get panelElement(): HTMLDivElement | null {\n        return this.popupElement?.getContentElement() as HTMLDivElement | null ?? null;\n    }\n\n    @state()\n    private triggerElement: HTMLElement | null = null;\n\n    /** True while the shared popup-content exit animation is running. */\n    @state()\n    private closing = false;\n\n    /** Gates `data-open` so enter motion starts after Floating UI places the panel. */\n    @state()\n    private panelAnimated = false;\n\n    private readonly triggerId = uniqueId('pk-popover-trigger');\n    private dismissRegistered = false;\n    /** Guard re-entry while openPopover/closePopover mutate `open`. */\n    private syncingOpenSideEffects = false;\n    /** Coalesce overlapping close calls (updated + light-dismiss) onto one exit. */\n    private exitAnimationPromise: Promise<void> | null = null;\n\n    override disconnectedCallback(): void {\n        // Skip exit motion on teardown — demote immediately.\n        void this.closePopover('api', true);\n        super.disconnectedCallback();\n    }\n\n    /**\n     * When controlled/toggle `open` flips false, arm `closing` in the same update so the\n     * panel is not `hidden` for a frame before the exit animation starts.\n     */\n    override willUpdate(changed: PropertyValues): void {\n        if (\n            changed.has('open')\n            && this.open === false\n            && changed.get('open') === true\n            && !this.syncingOpenSideEffects\n            && !this.closing\n        ) {\n            this.closing = true;\n            this.panelAnimated = false;\n        }\n    }\n\n    /**\n     * Controlled `open` (e.g. React) must arm/disarm light-dismiss the same way as\n     * trigger toggles. Without this, programmatic open shows the panel but click-away\n     * never fires.\n     */\n    override async updated(changed: PropertyValues): Promise<void> {\n        super.updated(changed);\n\n        if (!changed.has('open') || this.syncingOpenSideEffects) {\n            return;\n        }\n\n        const previousOpen = changed.get('open');\n\n        if (previousOpen === this.open) {\n            return;\n        }\n\n        // Initial connect with open=false — nothing to tear down.\n        if (previousOpen === undefined && this.open === false) {\n            return;\n        }\n\n        if (this.open) {\n            await this.openPopover();\n        } else {\n            await this.closePopover('api');\n        }\n    }\n\n    private onTriggerSlotChange(event: Event): void {\n        const slot = event.target as HTMLSlotElement;\n        const [trigger] = slot.assignedElements({ flatten: true }) as HTMLElement[];\n\n        this.unbindTrigger(this.triggerElement);\n        this.triggerElement = trigger ?? null;\n        this.bindTrigger(this.triggerElement);\n    }\n\n    private bindTrigger(trigger: HTMLElement | null): void {\n        if (!trigger) {\n            return;\n        }\n\n        if (!trigger.id) {\n            trigger.id = this.triggerId;\n        }\n\n        trigger.setAttribute('aria-haspopup', 'dialog');\n        trigger.addEventListener('click', this.handleToggleClick);\n        this.syncExpanded();\n    }\n\n    private unbindTrigger(trigger: HTMLElement | null): void {\n        trigger?.removeEventListener('click', this.handleToggleClick);\n    }\n\n    private handleToggleClick = (event: Event): void => {\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (this.closing) {\n            return;\n        }\n\n        // Flip `open` only — side effects run from `updated()` (same as dropdown-menu).\n        this.open = !this.open;\n    };\n\n    private async openPopover(): Promise<void> {\n        if (!this.getAnchor()) {\n            return;\n        }\n\n        // Finish any in-flight exit before arming a new open.\n        if (this.exitAnimationPromise) {\n            await this.exitAnimationPromise;\n        }\n\n        // Already armed from a prior controlled/toggle open.\n        if (this.dismissRegistered && this.open) {\n            if (this.panelElement) {\n                this.panelElement.hidden = false;\n            }\n            this.syncExpanded();\n            return;\n        }\n\n        if (!this.dispatchEvent(new PkShowEvent())) {\n            this.syncingOpenSideEffects = true;\n            this.open = false;\n            this.syncingOpenSideEffects = false;\n            return;\n        }\n\n        this.syncingOpenSideEffects = true;\n        this.open = true;\n        this.syncingOpenSideEffects = false;\n        this.closing = false;\n        this.panelAnimated = false;\n\n        if (this.panelElement) {\n            this.panelElement.hidden = false;\n            // Seed side before first paint so enter keyframes pick a direction.\n            syncPopupPlacementAnimation(this.panelElement, this.placement);\n        }\n\n        this.syncExpanded();\n        this.registerDismissHandlers();\n\n        await this.updateComplete;\n        const placement = await waitForPopupReposition(this.popupElement, this.placement);\n\n        if (this.panelElement) {\n            syncPopupPlacementAnimation(this.panelElement, placement);\n        }\n\n        // Flip data-open after placement so the shared enter animation can run.\n        this.panelAnimated = true;\n\n        this.dispatchEvent(new PkAfterShowEvent());\n        this.dispatchEvent(new CustomEvent('pk-open-change', {\n            detail: { open: true },\n            bubbles: true,\n            composed: true,\n        }));\n    }\n\n    /**\n     * @param immediate Skip exit animation (disconnect / forced teardown).\n     */\n    async closePopover(source: PkOverlaySource = 'unknown', immediate = false): Promise<void> {\n        if (this.exitAnimationPromise) {\n            return this.exitAnimationPromise;\n        }\n\n        if (!this.dismissRegistered && !this.closing && !this.open) {\n            return;\n        }\n\n        const hideEvent = new PkHideEvent(source);\n\n        if (!this.dispatchEvent(hideEvent)) {\n            // Controlled close was cancelled — restore open and cancel exit arming.\n            this.syncingOpenSideEffects = true;\n            this.open = true;\n            this.syncingOpenSideEffects = false;\n            this.closing = false;\n            this.panelAnimated = true;\n            return;\n        }\n\n        this.unregisterDismissHandlers();\n        this.closing = true;\n        this.panelAnimated = false;\n\n        if (this.open) {\n            this.syncingOpenSideEffects = true;\n            this.open = false;\n            this.syncingOpenSideEffects = false;\n        }\n\n        const finishClose = async (): Promise<void> => {\n            if (!immediate) {\n                await this.updateComplete;\n                await this.waitForExitAnimation();\n            }\n\n            this.closing = false;\n            this.panelAnimated = false;\n\n            if (this.panelElement) {\n                this.panelElement.hidden = true;\n                this.panelElement.removeAttribute('data-side');\n            }\n\n            this.syncExpanded();\n\n            this.dispatchEvent(new PkAfterHideEvent());\n            this.dispatchEvent(new CustomEvent('pk-open-change', {\n                detail: { open: false },\n                bubbles: true,\n                composed: true,\n            }));\n        };\n\n        this.exitAnimationPromise = finishClose().finally(() => {\n            this.exitAnimationPromise = null;\n        });\n\n        return this.exitAnimationPromise;\n    }\n\n    private waitForExitAnimation(): Promise<void> {\n        const panel = this.panelElement;\n\n        if (!panel) {\n            return Promise.resolve();\n        }\n\n        return new Promise((resolve) => {\n            let settled = false;\n\n            const finish = (): void => {\n                if (settled) {\n                    return;\n                }\n\n                settled = true;\n                panel.removeEventListener('animationend', onAnimationEnd);\n                window.clearTimeout(fallback);\n                panel.classList.remove('closing');\n                resolve();\n            };\n\n            const onAnimationEnd = (event: AnimationEvent): void => {\n                if (event.target === panel && event.animationName.startsWith('pk-popup-content-out')) {\n                    finish();\n                }\n            };\n\n            panel.classList.add('closing');\n            panel.addEventListener('animationend', onAnimationEnd);\n            const fallback = window.setTimeout(finish, 150);\n        });\n    }\n\n    private getAnchor(): Element | string | null {\n        if (this.anchor) {\n            return this.anchor;\n        }\n\n        if (this.for) {\n            return resolveElementById(this, this.for);\n        }\n\n        if (this.triggerElement) {\n            return this.triggerElement;\n        }\n\n        return null;\n    }\n\n    private registerDismissHandlers(): void {\n        if (this.dismissRegistered) {\n            return;\n        }\n\n        registerDismissible(this);\n        this.dismissRegistered = true;\n        document.addEventListener('pointerdown', this.onDocumentPointerDown, true);\n        document.addEventListener('keydown', this.onDocumentKeyDown, true);\n    }\n\n    private unregisterDismissHandlers(): void {\n        if (this.dismissRegistered) {\n            unregisterDismissible(this);\n            this.dismissRegistered = false;\n        }\n\n        document.removeEventListener('pointerdown', this.onDocumentPointerDown, true);\n        document.removeEventListener('keydown', this.onDocumentKeyDown, true);\n    }\n\n    private onDocumentPointerDown = (event: PointerEvent): void => {\n        if (this.isPointerInside(event) || this.closing) {\n            return;\n        }\n\n        void this.closePopover('light-dismiss');\n    };\n\n    private isPointerInside(event: PointerEvent): boolean {\n        return isPointerInsideOverlay(event, {\n            host: this,\n            anchor: this.getAnchorElement(),\n            panel: this.panelElement,\n        });\n    };\n\n    private onDocumentKeyDown = (event: KeyboardEvent): void => {\n        if (event.key !== 'Escape' || !isTopDismissible(this) || this.closing) {\n            return;\n        }\n\n        event.preventDefault();\n        event.stopPropagation();\n        void this.closePopover('escape');\n    };\n\n    private getAnchorElement(): HTMLElement | null {\n        if (this.anchor instanceof HTMLElement) {\n            return this.anchor;\n        }\n\n        if (this.triggerElement) {\n            return this.triggerElement;\n        }\n\n        if (this.for) {\n            return resolveElementById(this, this.for);\n        }\n\n        return null;\n    }\n\n    private syncExpanded(): void {\n        this.triggerElement?.setAttribute('aria-expanded', this.open ? 'true' : 'false');\n    }\n\n    override render() {\n        const anchor = this.getAnchor();\n\n        return html`\n            <slot name=\"trigger\" @slotchange=${this.onTriggerSlotChange}></slot>\n            <pk-popup\n                .active=${this.open || this.closing}\n                .anchor=${anchor ?? ''}\n                .placement=${this.placement}\n                .distance=${this.sideOffset}\n                .arrow=${this.withArrow}\n                flip\n                shift\n            >\n                <div\n                    part=\"panel\"\n                    class=${classMap({\n                        panel: true,\n                        'pk-popup-content': true,\n                        closing: this.closing,\n                    })}\n                    ?hidden=${!this.open && !this.closing}\n                    data-open=${this.panelAnimated && !this.closing ? '' : nothing}\n                    tabindex=${this.open ? '-1' : nothing}\n                >\n                    <slot></slot>\n                </div>\n            </pk-popup>\n        `;\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-popover': PkPopover;\n    }\n}\n"],"mappings":"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"}