@verbb/plugin-kit-web 2.0.0

package/dist/chunks/pk-tooltip-fcUbVGli.js

@@ -0,0 +1,469 @@
+import { n as PkElement, t as __decorate } from "./decorate-W02hmVTt.js";
+import { i as uniqueId } from "./focus-aa5dlv8k.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, n as getPopupSide, r as syncPopupPlacementAnimation } from "./popup-placement-animation-WlEXnS85.js";
+import { css, html, nothing } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+import { customElement, property, query, state } from "lit/decorators.js";
+var pkTooltipStyles = [css`
+    @layer pk-component {
+        .content.pk-popup-content {
+            transform-origin: var(--pk-transform-origin, top);
+        }
+
+        .content.pk-popup-content[data-open] {
+            animation: pk-tooltip-in 150ms ease forwards;
+        }
+
+        .content.pk-popup-content[data-open][data-side='top'] {
+            animation-name: pk-tooltip-in-top;
+        }
+
+        .content.pk-popup-content[data-open][data-side='bottom'] {
+            animation-name: pk-tooltip-in-bottom;
+        }
+
+        .content.pk-popup-content[data-open][data-side='left'] {
+            animation-name: pk-tooltip-in-left;
+        }
+
+        .content.pk-popup-content[data-open][data-side='right'] {
+            animation-name: pk-tooltip-in-right;
+        }
+
+        .content.pk-popup-content.closing {
+            animation: pk-tooltip-out 150ms ease;
+        }
+
+        @keyframes pk-tooltip-in {
+            from {
+                opacity: 0;
+                transform: scale(0.95);
+            }
+
+            to {
+                opacity: 1;
+                transform: scale(1);
+            }
+        }
+
+        @keyframes pk-tooltip-out {
+            from {
+                opacity: 1;
+                transform: scale(1);
+            }
+
+            to {
+                opacity: 0;
+                transform: scale(0.95);
+            }
+        }
+
+        @keyframes pk-tooltip-in-top {
+            from {
+                opacity: 0;
+                transform: scale(0.95) translateY(0.5rem);
+            }
+
+            to {
+                opacity: 1;
+                transform: scale(1) translateY(0);
+            }
+        }
+
+        @keyframes pk-tooltip-in-bottom {
+            from {
+                opacity: 0;
+                transform: scale(0.95) translateY(-0.5rem);
+            }
+
+            to {
+                opacity: 1;
+                transform: scale(1) translateY(0);
+            }
+        }
+
+        @keyframes pk-tooltip-in-left {
+            from {
+                opacity: 0;
+                transform: scale(0.95) translateX(0.5rem);
+            }
+
+            to {
+                opacity: 1;
+                transform: scale(1) translateX(0);
+            }
+        }
+
+        @keyframes pk-tooltip-in-right {
+            from {
+                opacity: 0;
+                transform: scale(0.95) translateX(-0.5rem);
+            }
+
+            to {
+                opacity: 1;
+                transform: scale(1) translateX(0);
+            }
+        }
+    }
+`, css`
+    @layer pk-component {
+        :host {
+            display: inline-block;
+            max-width: 100%;
+            align-self: flex-start;
+            flex: none;
+            vertical-align: middle;
+            --pk-popup-z-index: 250;
+            --pk-tooltip-arrow-size: 9px;
+            --pk-tooltip-arrow-inset: 1px;
+        }
+
+        .content:not([data-open]):not(.closing) {
+            opacity: 0;
+            pointer-events: none;
+        }
+
+        .content[data-open]:not(.closing) {
+            opacity: 1;
+        }
+
+        .content {
+            position: relative;
+            isolation: isolate;
+            overflow: visible;
+            width: fit-content;
+            max-width: 20rem;
+            padding: 4px 8px;
+            border-radius: var(--pk-radius-sm);
+            background: #1c2e36;
+            color: var(--pk-color-white);
+            font-family: var(--pk-font-family);
+            font-size: 12px;
+            line-height: 1.4;
+            pointer-events: none;
+        }
+
+        .content::after {
+            content: '';
+            position: absolute;
+            z-index: -1;
+            width: var(--pk-tooltip-arrow-size);
+            height: var(--pk-tooltip-arrow-size);
+            background: #1c2e36;
+            border-radius: 2px;
+            rotate: 45deg;
+            pointer-events: none;
+        }
+
+        .content[data-side='top']::after {
+            left: calc(50% - var(--pk-tooltip-arrow-size) / 2);
+            bottom: calc(var(--pk-tooltip-arrow-size) * -0.5 + var(--pk-tooltip-arrow-inset));
+        }
+
+        .content[data-side='bottom']::after {
+            left: calc(50% - var(--pk-tooltip-arrow-size) / 2);
+            top: calc(var(--pk-tooltip-arrow-size) * -0.5 + var(--pk-tooltip-arrow-inset));
+        }
+
+        .content[data-side='left']::after {
+            top: calc(50% - var(--pk-tooltip-arrow-size) / 2);
+            right: calc(var(--pk-tooltip-arrow-size) * -0.5 + var(--pk-tooltip-arrow-inset));
+        }
+
+        .content[data-side='right']::after {
+            top: calc(50% - var(--pk-tooltip-arrow-size) / 2);
+            left: calc(var(--pk-tooltip-arrow-size) * -0.5 + var(--pk-tooltip-arrow-inset));
+        }
+
+        .content[hidden] {
+            display: none !important;
+        }
+    }
+    `];
+//#endregion
+//#region src/components/tooltip/pk-tooltip.ts
+var PkTooltip = class PkTooltip extends PkElement {
+	constructor(..._args) {
+		super(..._args);
+		this.placement = "top";
+		this.trigger = "hover focus";
+		this.disabled = false;
+		this.openDelay = 0;
+		this.closeDelay = 0;
+		this.content = "";
+		this.for = "";
+		this.open = false;
+		this.triggerElement = null;
+		this.contentAnimated = false;
+		this.closing = false;
+		this.contentSide = null;
+		this.hasSlottedBody = false;
+		this.triggerId = uniqueId("pk-tooltip-trigger");
+		this.tooltipId = uniqueId("pk-tooltip");
+		this.showGeneration = 0;
+		this.exitGeneration = 0;
+		this.syncPlacementAnimation = () => {
+			const placement = this.popupElement?.getAttribute("data-current-placement") ?? this.placement;
+			const content = this.popupElement?.getContentElement();
+			this.contentSide = placement ? getPopupSide(placement) : null;
+			syncPopupPlacementAnimation(this.popupElement, placement);
+			if (content) syncPopupPlacementAnimation(content, placement);
+		};
+		this.onBodySlotChange = (event) => {
+			const slot = event.target;
+			this.hasSlottedBody = slot.assignedNodes({ flatten: true }).some((node) => {
+				if (node.nodeType === Node.ELEMENT_NODE) return true;
+				return node.nodeType === Node.TEXT_NODE && Boolean(node.textContent?.trim());
+			});
+		};
+		this.scheduleShow = () => {
+			if (!this.usesPointerTrigger()) return;
+			window.clearTimeout(this.closeTimer);
+			window.clearTimeout(this.openTimer);
+			this.openTimer = window.setTimeout(() => this.showTooltip(), this.openDelay);
+		};
+		this.scheduleHide = () => {
+			if (!this.usesPointerTrigger()) return;
+			window.clearTimeout(this.openTimer);
+			window.clearTimeout(this.closeTimer);
+			this.closeTimer = window.setTimeout(() => this.hideTooltip(), this.closeDelay);
+		};
+	}
+	static {
+		this.styles = pkTooltipStyles;
+	}
+	disconnectedCallback() {
+		this.popupElement?.removeEventListener("pk-reposition", this.syncPlacementAnimation);
+		this.clearTimers();
+		this.hideTooltip(true);
+		super.disconnectedCallback();
+	}
+	updated(changed) {
+		super.updated(changed);
+		if (changed.has("trigger") || changed.has("disabled") || changed.has("for")) this.rebindTrigger();
+		if (this.disabled && this.open) this.hideTooltip(true);
+	}
+	firstUpdated() {
+		this.popupElement.addEventListener("pk-reposition", this.syncPlacementAnimation);
+		if (this.for) queueMicrotask(() => {
+			this.resolveExternalTrigger();
+		});
+	}
+	/** Opens the tooltip programmatically. */
+	async show() {
+		if (this.disabled) return;
+		this.clearTimers();
+		this.showTooltip(true);
+		await this.updateComplete;
+	}
+	/** Closes the tooltip programmatically. */
+	async hide() {
+		this.clearTimers();
+		this.hideTooltip(true);
+		await this.updateComplete;
+	}
+	clearTimers() {
+		window.clearTimeout(this.openTimer);
+		window.clearTimeout(this.closeTimer);
+	}
+	resolveExternalTrigger() {
+		this.triggerElement = resolveElementById(this, this.for);
+		this.rebindTrigger();
+	}
+	onTriggerSlotChange(event) {
+		const [trigger] = event.target.assignedElements({ flatten: true });
+		this.unbindTrigger(this.triggerElement);
+		this.triggerElement = trigger ?? null;
+		this.rebindTrigger();
+		this.requestUpdate();
+	}
+	rebindTrigger() {
+		this.unbindTrigger(this.triggerElement);
+		if (this.for) this.triggerElement = resolveElementById(this, this.for);
+		this.bindTrigger(this.triggerElement);
+	}
+	usesPointerTrigger() {
+		return !this.disabled && this.trigger !== "manual";
+	}
+	bindTrigger(trigger) {
+		if (!trigger || !this.usesPointerTrigger()) return;
+		if (!trigger.id) trigger.id = this.triggerId;
+		trigger.setAttribute("aria-describedby", this.tooltipId);
+		trigger.addEventListener("mouseenter", this.scheduleShow);
+		trigger.addEventListener("mouseleave", this.scheduleHide);
+		trigger.addEventListener("focus", this.scheduleShow);
+		trigger.addEventListener("blur", this.scheduleHide);
+	}
+	unbindTrigger(trigger) {
+		if (!trigger) return;
+		trigger.removeAttribute("aria-describedby");
+		trigger.removeEventListener("mouseenter", this.scheduleShow);
+		trigger.removeEventListener("mouseleave", this.scheduleHide);
+		trigger.removeEventListener("focus", this.scheduleShow);
+		trigger.removeEventListener("blur", this.scheduleHide);
+	}
+	getAnchor() {
+		if (this.for) return resolveElementById(this, this.for);
+		if (this.triggerElement) return this.triggerElement;
+		return null;
+	}
+	prepareContentForEnter(content) {
+		if (!content) return;
+		content.classList.remove("closing");
+		content.style.animation = "none";
+		content.getBoundingClientRect();
+		content.style.removeProperty("animation");
+		content.style.removeProperty("opacity");
+		content.style.removeProperty("transform");
+	}
+	showTooltip(force = false) {
+		if (!this.getAnchor()) return;
+		if (this.open && this.contentAnimated && !this.closing && !force) return;
+		if (!this.open) this.dispatchEvent(new PkShowEvent());
+		const generation = ++this.showGeneration;
+		this.exitGeneration += 1;
+		this.closing = false;
+		this.open = true;
+		this.contentAnimated = false;
+		this.prepareContentForEnter(this.popupElement?.getContentElement());
+		this.updateComplete.then(async () => {
+			if (generation !== this.showGeneration) return;
+			await waitForPopupReposition(this.popupElement, this.placement);
+			if (generation !== this.showGeneration) return;
+			this.syncPlacementAnimation();
+			this.prepareContentForEnter(this.popupElement?.getContentElement());
+			this.contentAnimated = true;
+			this.dispatchEvent(new PkAfterShowEvent());
+			this.dispatchEvent(new CustomEvent("pk-open-change", {
+				detail: { open: true },
+				bubbles: true,
+				composed: true
+			}));
+		});
+	}
+	hideTooltip(immediate = false, cancelable = false) {
+		if (!this.open && !this.closing && !immediate) return;
+		if (this.closing && !immediate) return;
+		if (cancelable) {
+			const hideEvent = new PkHideEvent("api");
+			if (!this.dispatchEvent(hideEvent)) return;
+		}
+		this.showGeneration += 1;
+		if (immediate) {
+			this.finishHide();
+			return;
+		}
+		if (!this.contentAnimated) {
+			this.finishHide();
+			return;
+		}
+		this.playExitAnimation();
+	}
+	async playExitAnimation() {
+		if (!this.open) return;
+		const generation = this.exitGeneration + 1;
+		this.exitGeneration = generation;
+		const content = this.popupElement?.getContentElement();
+		this.closing = true;
+		this.contentAnimated = false;
+		if (content) await this.waitForExitAnimation(content);
+		if (generation !== this.exitGeneration) return;
+		this.finishHide();
+	}
+	waitForExitAnimation(content) {
+		return new Promise((resolve) => {
+			let settled = false;
+			const finish = () => {
+				if (settled) return;
+				settled = true;
+				content.removeEventListener("animationend", onAnimationEnd);
+				window.clearTimeout(fallback);
+				content.classList.remove("closing");
+				resolve();
+			};
+			const onAnimationEnd = (event) => {
+				if (event.target === content && event.animationName.startsWith("pk-tooltip-out")) finish();
+			};
+			content.classList.add("closing");
+			content.addEventListener("animationend", onAnimationEnd);
+			const fallback = window.setTimeout(finish, 200);
+		});
+	}
+	finishHide() {
+		const content = this.popupElement?.getContentElement();
+		this.closing = false;
+		this.contentAnimated = false;
+		this.contentSide = null;
+		this.open = false;
+		this.popupElement?.removeAttribute("data-side");
+		this.prepareContentForEnter(content);
+		this.dispatchEvent(new PkAfterHideEvent());
+		this.dispatchEvent(new CustomEvent("pk-open-change", {
+			detail: { open: false },
+			bubbles: true,
+			composed: true
+		}));
+	}
+	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=${4}
+                hover-bridge
+                flip
+                shift
+            >
+                <div
+                    part="content"
+                    class=${classMap({
+			content: true,
+			"pk-popup-content": true,
+			closing: this.closing
+		})}
+                    id=${this.tooltipId}
+                    role="tooltip"
+                    ?hidden=${!this.open && !this.closing}
+                    data-open=${this.contentAnimated && !this.closing ? "" : nothing}
+                    data-side=${this.contentSide ?? nothing}
+                >
+                    <slot @slotchange=${this.onBodySlotChange}></slot>
+                    ${this.hasSlottedBody ? nothing : this.content || nothing}
+                </div>
+            </pk-popup>
+        `;
+	}
+};
+__decorate([property({ reflect: true })], PkTooltip.prototype, "placement", void 0);
+__decorate([property({ reflect: true })], PkTooltip.prototype, "trigger", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], PkTooltip.prototype, "disabled", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "open-delay"
+})], PkTooltip.prototype, "openDelay", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "close-delay"
+})], PkTooltip.prototype, "closeDelay", void 0);
+__decorate([property()], PkTooltip.prototype, "content", void 0);
+__decorate([property({ reflect: true })], PkTooltip.prototype, "for", void 0);
+__decorate([query("pk-popup")], PkTooltip.prototype, "popupElement", void 0);
+__decorate([state()], PkTooltip.prototype, "open", void 0);
+__decorate([state()], PkTooltip.prototype, "contentAnimated", void 0);
+__decorate([state()], PkTooltip.prototype, "closing", void 0);
+__decorate([state()], PkTooltip.prototype, "contentSide", void 0);
+__decorate([state()], PkTooltip.prototype, "hasSlottedBody", void 0);
+PkTooltip = __decorate([customElement("pk-tooltip")], PkTooltip);
+//#endregion
+export { PkTooltip as t };
+
+//# sourceMappingURL=pk-tooltip-fcUbVGli.js.map

package/dist/chunks/pk-tooltip-fcUbVGli.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pk-tooltip-fcUbVGli.js","names":[],"sources":["../../src/components/tooltip/pk-tooltip.styles.ts","../../src/components/tooltip/pk-tooltip.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * Tooltip motion — enter: fade + zoom + slide; exit: fade + zoom only, 150ms ease.\n */\nconst tooltipContentAnimationStyles = css`\n    @layer pk-component {\n        .content.pk-popup-content {\n            transform-origin: var(--pk-transform-origin, top);\n        }\n\n        .content.pk-popup-content[data-open] {\n            animation: pk-tooltip-in 150ms ease forwards;\n        }\n\n        .content.pk-popup-content[data-open][data-side='top'] {\n            animation-name: pk-tooltip-in-top;\n        }\n\n        .content.pk-popup-content[data-open][data-side='bottom'] {\n            animation-name: pk-tooltip-in-bottom;\n        }\n\n        .content.pk-popup-content[data-open][data-side='left'] {\n            animation-name: pk-tooltip-in-left;\n        }\n\n        .content.pk-popup-content[data-open][data-side='right'] {\n            animation-name: pk-tooltip-in-right;\n        }\n\n        .content.pk-popup-content.closing {\n            animation: pk-tooltip-out 150ms ease;\n        }\n\n        @keyframes pk-tooltip-in {\n            from {\n                opacity: 0;\n                transform: scale(0.95);\n            }\n\n            to {\n                opacity: 1;\n                transform: scale(1);\n            }\n        }\n\n        @keyframes pk-tooltip-out {\n            from {\n                opacity: 1;\n                transform: scale(1);\n            }\n\n            to {\n                opacity: 0;\n                transform: scale(0.95);\n            }\n        }\n\n        @keyframes pk-tooltip-in-top {\n            from {\n                opacity: 0;\n                transform: scale(0.95) translateY(0.5rem);\n            }\n\n            to {\n                opacity: 1;\n                transform: scale(1) translateY(0);\n            }\n        }\n\n        @keyframes pk-tooltip-in-bottom {\n            from {\n                opacity: 0;\n                transform: scale(0.95) translateY(-0.5rem);\n            }\n\n            to {\n                opacity: 1;\n                transform: scale(1) translateY(0);\n            }\n        }\n\n        @keyframes pk-tooltip-in-left {\n            from {\n                opacity: 0;\n                transform: scale(0.95) translateX(0.5rem);\n            }\n\n            to {\n                opacity: 1;\n                transform: scale(1) translateX(0);\n            }\n        }\n\n        @keyframes pk-tooltip-in-right {\n            from {\n                opacity: 0;\n                transform: scale(0.95) translateX(-0.5rem);\n            }\n\n            to {\n                opacity: 1;\n                transform: scale(1) translateX(0);\n            }\n        }\n    }\n`;\n\nexport const pkTooltipStyles = [\n    tooltipContentAnimationStyles,\n    css`\n    @layer pk-component {\n        :host {\n            display: inline-block;\n            max-width: 100%;\n            align-self: flex-start;\n            flex: none;\n            vertical-align: middle;\n            --pk-popup-z-index: 250;\n            --pk-tooltip-arrow-size: 9px;\n            --pk-tooltip-arrow-inset: 1px;\n        }\n\n        .content:not([data-open]):not(.closing) {\n            opacity: 0;\n            pointer-events: none;\n        }\n\n        .content[data-open]:not(.closing) {\n            opacity: 1;\n        }\n\n        .content {\n            position: relative;\n            isolation: isolate;\n            overflow: visible;\n            width: fit-content;\n            max-width: 20rem;\n            padding: 4px 8px;\n            border-radius: var(--pk-radius-sm);\n            background: #1c2e36;\n            color: var(--pk-color-white);\n            font-family: var(--pk-font-family);\n            font-size: 12px;\n            line-height: 1.4;\n            pointer-events: none;\n        }\n\n        .content::after {\n            content: '';\n            position: absolute;\n            z-index: -1;\n            width: var(--pk-tooltip-arrow-size);\n            height: var(--pk-tooltip-arrow-size);\n            background: #1c2e36;\n            border-radius: 2px;\n            rotate: 45deg;\n            pointer-events: none;\n        }\n\n        .content[data-side='top']::after {\n            left: calc(50% - var(--pk-tooltip-arrow-size) / 2);\n            bottom: calc(var(--pk-tooltip-arrow-size) * -0.5 + var(--pk-tooltip-arrow-inset));\n        }\n\n        .content[data-side='bottom']::after {\n            left: calc(50% - var(--pk-tooltip-arrow-size) / 2);\n            top: calc(var(--pk-tooltip-arrow-size) * -0.5 + var(--pk-tooltip-arrow-inset));\n        }\n\n        .content[data-side='left']::after {\n            top: calc(50% - var(--pk-tooltip-arrow-size) / 2);\n            right: calc(var(--pk-tooltip-arrow-size) * -0.5 + var(--pk-tooltip-arrow-inset));\n        }\n\n        .content[data-side='right']::after {\n            top: calc(50% - var(--pk-tooltip-arrow-size) / 2);\n            left: calc(var(--pk-tooltip-arrow-size) * -0.5 + var(--pk-tooltip-arrow-inset));\n        }\n\n        .content[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 { 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} from '../../events/overlay-lifecycle.js';\nimport { PkPopup, type PkPopupPlacement } from '../popup/pk-popup.js';\nimport { syncPopupPlacementAnimation, waitForPopupReposition, getPopupSide } from '../../utils/popup-placement-animation.js';\nimport { pkTooltipStyles } from './pk-tooltip.styles.js';\n\n/**\n * Tooltip —  pattern: hover/focus shows floating hint.\n *\n * @slot trigger - Element that receives the tooltip\n * @slot - Tooltip content (falls back to `content` attribute)\n *\n * @csspart content - Tooltip body\n */\n@customElement('pk-tooltip')\nexport class PkTooltip extends PkElement {\n    static override styles = pkTooltipStyles;\n\n    @property({ reflect: true })\n    placement: PkPopupPlacement = 'top';\n\n    /** `hover focus` (default) or `manual` for programmatic open only. */\n    @property({ reflect: true })\n    trigger: 'hover focus' | 'manual' = 'hover focus';\n\n    @property({ type: Boolean, reflect: true })\n    disabled = false;\n\n    @property({ type: Number, attribute: 'open-delay' })\n    openDelay = 0;\n\n    @property({ type: Number, attribute: 'close-delay' })\n    closeDelay = 0;\n\n    @property()\n    content = '';\n\n    /** Anchor element id — alternative to the trigger slot. */\n    @property({ reflect: true })\n    for = '';\n\n    @query('pk-popup')\n    private popupElement!: PkPopup;\n\n    @state()\n    private open = false;\n\n    private triggerElement: HTMLElement | null = null;\n\n    @state()\n    private contentAnimated = false;\n\n    @state()\n    private closing = false;\n\n    @state()\n    private contentSide: ReturnType<typeof getPopupSide> | null = null;\n\n    /**\n     * True only when the default slot has real nodes. Pretty-printed HTML often\n     * leaves whitespace text nodes in the default slot, which would otherwise\n     * suppress the `content` attribute fallback and show an empty tooltip body.\n     */\n    @state()\n    private hasSlottedBody = false;\n\n    private readonly triggerId = uniqueId('pk-tooltip-trigger');\n    private openTimer?: number;\n    private closeTimer?: number;\n    private readonly tooltipId = uniqueId('pk-tooltip');\n    private showGeneration = 0;\n    private exitGeneration = 0;\n\n    override disconnectedCallback(): void {\n        this.popupElement?.removeEventListener('pk-reposition', this.syncPlacementAnimation);\n        this.clearTimers();\n        this.hideTooltip(true);\n        super.disconnectedCallback();\n    }\n\n    override updated(changed: PropertyValues): void {\n        super.updated(changed);\n\n        if (changed.has('trigger') || changed.has('disabled') || changed.has('for')) {\n            this.rebindTrigger();\n        }\n\n        if (this.disabled && this.open) {\n            this.hideTooltip(true);\n        }\n    }\n\n    override firstUpdated(): void {\n        this.popupElement.addEventListener('pk-reposition', this.syncPlacementAnimation);\n\n        if (this.for) {\n            queueMicrotask(() => {\n                this.resolveExternalTrigger();\n            });\n        }\n    }\n\n    /** Opens the tooltip programmatically. */\n    async show(): Promise<void> {\n        if (this.disabled) {\n            return;\n        }\n\n        this.clearTimers();\n        this.showTooltip(true);\n        await this.updateComplete;\n    }\n\n    /** Closes the tooltip programmatically. */\n    async hide(): Promise<void> {\n        this.clearTimers();\n        this.hideTooltip(true);\n        await this.updateComplete;\n    }\n\n    private clearTimers(): void {\n        window.clearTimeout(this.openTimer);\n        window.clearTimeout(this.closeTimer);\n    }\n\n    private syncPlacementAnimation = (): void => {\n        const placement = this.popupElement?.getAttribute('data-current-placement') ?? this.placement;\n        const content = this.popupElement?.getContentElement();\n\n        this.contentSide = placement ? getPopupSide(placement) : null;\n        syncPopupPlacementAnimation(this.popupElement, placement);\n\n        if (content) {\n            syncPopupPlacementAnimation(content, placement);\n        }\n    };\n\n    private resolveExternalTrigger(): void {\n        this.triggerElement = resolveElementById(this, this.for);\n        this.rebindTrigger();\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.rebindTrigger();\n        this.requestUpdate();\n    }\n\n    private onBodySlotChange = (event: Event): void => {\n        const slot = event.target as HTMLSlotElement;\n        this.hasSlottedBody = slot.assignedNodes({ flatten: true }).some((node) => {\n            if (node.nodeType === Node.ELEMENT_NODE) {\n                return true;\n            }\n\n            return node.nodeType === Node.TEXT_NODE && Boolean(node.textContent?.trim());\n        });\n    };\n\n    private rebindTrigger(): void {\n        this.unbindTrigger(this.triggerElement);\n\n        if (this.for) {\n            this.triggerElement = resolveElementById(this, this.for);\n        }\n\n        this.bindTrigger(this.triggerElement);\n    }\n\n    private usesPointerTrigger(): boolean {\n        return !this.disabled && this.trigger !== 'manual';\n    }\n\n    private bindTrigger(trigger: HTMLElement | null): void {\n        if (!trigger || !this.usesPointerTrigger()) {\n            return;\n        }\n\n        if (!trigger.id) {\n            trigger.id = this.triggerId;\n        }\n\n        trigger.setAttribute('aria-describedby', this.tooltipId);\n        trigger.addEventListener('mouseenter', this.scheduleShow);\n        trigger.addEventListener('mouseleave', this.scheduleHide);\n        trigger.addEventListener('focus', this.scheduleShow);\n        trigger.addEventListener('blur', this.scheduleHide);\n    }\n\n    private unbindTrigger(trigger: HTMLElement | null): void {\n        if (!trigger) {\n            return;\n        }\n\n        trigger.removeAttribute('aria-describedby');\n        trigger.removeEventListener('mouseenter', this.scheduleShow);\n        trigger.removeEventListener('mouseleave', this.scheduleHide);\n        trigger.removeEventListener('focus', this.scheduleShow);\n        trigger.removeEventListener('blur', this.scheduleHide);\n    }\n\n    private scheduleShow = (): void => {\n        if (!this.usesPointerTrigger()) {\n            return;\n        }\n\n        window.clearTimeout(this.closeTimer);\n        window.clearTimeout(this.openTimer);\n        this.openTimer = window.setTimeout(() => this.showTooltip(), this.openDelay);\n    };\n\n    private scheduleHide = (): void => {\n        if (!this.usesPointerTrigger()) {\n            return;\n        }\n\n        window.clearTimeout(this.openTimer);\n        window.clearTimeout(this.closeTimer);\n        this.closeTimer = window.setTimeout(() => this.hideTooltip(), this.closeDelay);\n    };\n\n    private getAnchor(): Element | string | null {\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 prepareContentForEnter(content: HTMLElement | null | undefined): void {\n        if (!content) {\n            return;\n        }\n\n        content.classList.remove('closing');\n        content.style.animation = 'none';\n        void content.getBoundingClientRect();\n        content.style.removeProperty('animation');\n        content.style.removeProperty('opacity');\n        content.style.removeProperty('transform');\n    }\n\n    private showTooltip(force = false): void {\n        if (!this.getAnchor()) {\n            return;\n        }\n\n        if (this.open && this.contentAnimated && !this.closing && !force) {\n            return;\n        }\n\n        if (!this.open) {\n            this.dispatchEvent(new PkShowEvent());\n        }\n\n        const generation = ++this.showGeneration;\n        this.exitGeneration += 1;\n        this.closing = false;\n        this.open = true;\n        this.contentAnimated = false;\n        this.prepareContentForEnter(this.popupElement?.getContentElement());\n\n        void this.updateComplete.then(async () => {\n            if (generation !== this.showGeneration) {\n                return;\n            }\n\n            await waitForPopupReposition(this.popupElement, this.placement);\n\n            if (generation !== this.showGeneration) {\n                return;\n            }\n\n            this.syncPlacementAnimation();\n            this.prepareContentForEnter(this.popupElement?.getContentElement());\n            this.contentAnimated = 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    private hideTooltip(immediate = false, cancelable = false): void {\n        if ((!this.open && !this.closing) && !immediate) {\n            return;\n        }\n\n        if (this.closing && !immediate) {\n            return;\n        }\n\n        if (cancelable) {\n            const hideEvent = new PkHideEvent('api');\n\n            if (!this.dispatchEvent(hideEvent)) {\n                return;\n            }\n        }\n\n        this.showGeneration += 1;\n\n        if (immediate) {\n            this.finishHide();\n            return;\n        }\n\n        if (!this.contentAnimated) {\n            this.finishHide();\n            return;\n        }\n\n        void this.playExitAnimation();\n    }\n\n    private async playExitAnimation(): Promise<void> {\n        if (!this.open) {\n            return;\n        }\n\n        const generation = this.exitGeneration + 1;\n        this.exitGeneration = generation;\n\n        const content = this.popupElement?.getContentElement();\n\n        this.closing = true;\n        this.contentAnimated = false;\n\n        if (content) {\n            await this.waitForExitAnimation(content);\n        }\n\n        if (generation !== this.exitGeneration) {\n            return;\n        }\n\n        this.finishHide();\n    }\n\n    private waitForExitAnimation(content: HTMLElement): Promise<void> {\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                content.removeEventListener('animationend', onAnimationEnd);\n                window.clearTimeout(fallback);\n                content.classList.remove('closing');\n                resolve();\n            };\n\n            const onAnimationEnd = (event: AnimationEvent): void => {\n                if (event.target === content && event.animationName.startsWith('pk-tooltip-out')) {\n                    finish();\n                }\n            };\n\n            content.classList.add('closing');\n            content.addEventListener('animationend', onAnimationEnd);\n            const fallback = window.setTimeout(finish, 200);\n        });\n    }\n\n    private finishHide(): void {\n        const content = this.popupElement?.getContentElement();\n\n        this.closing = false;\n        this.contentAnimated = false;\n        this.contentSide = null;\n        this.open = false;\n        this.popupElement?.removeAttribute('data-side');\n        this.prepareContentForEnter(content);\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    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=${4}\n                hover-bridge\n                flip\n                shift\n            >\n                <div\n                    part=\"content\"\n                    class=${classMap({\n                        content: true,\n                        'pk-popup-content': true,\n                        closing: this.closing,\n                    })}\n                    id=${this.tooltipId}\n                    role=\"tooltip\"\n                    ?hidden=${!this.open && !this.closing}\n                    data-open=${this.contentAnimated && !this.closing ? '' : nothing}\n                    data-side=${this.contentSide ?? nothing}\n                >\n                    <slot @slotchange=${this.onBodySlotChange}></slot>\n                    ${this.hasSlottedBody ? nothing : (this.content || nothing)}\n                </div>\n            </pk-popup>\n        `;\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-tooltip': PkTooltip;\n    }\n}\n"],"mappings":"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"}

package/dist/chunks/popup-content-animation.styles-Dc6d9quJ.js

@@ -0,0 +1,117 @@
+import { css } from "lit";
+//#region src/styles/popup-content-animation.styles.ts
+/**
+* Placement-aware popup enter/exit motion — mirrors plugin-kit-react DropdownMenu
+* (fade + zoom + side slide on enter; fade + zoom only on exit).
+*
+* Keyframes stay outside `@layer` so constructed stylesheets resolve animation
+* names reliably (Chrome DevTools otherwise reports them as undefined).
+*/
+var popupContentAnimationStyles = css`
+    @layer pk-component {
+        .pk-popup-content {
+            transform-origin: var(--pk-transform-origin, top);
+        }
+
+        .pk-popup-content[data-open] {
+            animation: pk-popup-content-in 100ms ease-out;
+        }
+
+        .pk-popup-content[data-open][data-side='bottom'] {
+            animation-name: pk-popup-content-in-bottom;
+        }
+
+        .pk-popup-content[data-open][data-side='top'] {
+            animation-name: pk-popup-content-in-top;
+        }
+
+        .pk-popup-content[data-open][data-side='left'] {
+            animation-name: pk-popup-content-in-left;
+        }
+
+        .pk-popup-content[data-open][data-side='right'] {
+            animation-name: pk-popup-content-in-right;
+        }
+
+        /* Exit: fade + zoom only — matches tw-animate animate-out / tooltip motion. */
+        .pk-popup-content.closing {
+            animation: pk-popup-content-out 100ms ease-in forwards;
+        }
+    }
+
+    @keyframes pk-popup-content-in {
+        from {
+            opacity: 0;
+            transform: scale(0.95);
+        }
+
+        to {
+            opacity: 1;
+            transform: scale(1);
+        }
+    }
+
+    @keyframes pk-popup-content-out {
+        from {
+            opacity: 1;
+            transform: scale(1);
+        }
+
+        to {
+            opacity: 0;
+            transform: scale(0.95);
+        }
+    }
+
+    @keyframes pk-popup-content-in-bottom {
+        from {
+            opacity: 0;
+            transform: scale(0.95) translateY(-0.5rem);
+        }
+
+        to {
+            opacity: 1;
+            transform: scale(1) translateY(0);
+        }
+    }
+
+    @keyframes pk-popup-content-in-top {
+        from {
+            opacity: 0;
+            transform: scale(0.95) translateY(0.5rem);
+        }
+
+        to {
+            opacity: 1;
+            transform: scale(1) translateY(0);
+        }
+    }
+
+    @keyframes pk-popup-content-in-left {
+        from {
+            opacity: 0;
+            transform: scale(0.95) translateX(0.5rem);
+        }
+
+        to {
+            opacity: 1;
+            transform: scale(1) translateX(0);
+        }
+    }
+
+    @keyframes pk-popup-content-in-right {
+        from {
+            opacity: 0;
+            transform: scale(0.95) translateX(-0.5rem);
+        }
+
+        to {
+            opacity: 1;
+            transform: scale(1) translateX(0);
+        }
+    }
+`;
+//#endregion
+export { popupContentAnimationStyles as t };
+
+//# sourceMappingURL=popup-content-animation.styles-Dc6d9quJ.js.map

package/dist/chunks/popup-content-animation.styles-Dc6d9quJ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popup-content-animation.styles-Dc6d9quJ.js","names":[],"sources":["../../src/styles/popup-content-animation.styles.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * Placement-aware popup enter/exit motion — mirrors plugin-kit-react DropdownMenu\n * (fade + zoom + side slide on enter; fade + zoom only on exit).\n *\n * Keyframes stay outside `@layer` so constructed stylesheets resolve animation\n * names reliably (Chrome DevTools otherwise reports them as undefined).\n */\nexport const popupContentAnimationStyles = css`\n    @layer pk-component {\n        .pk-popup-content {\n            transform-origin: var(--pk-transform-origin, top);\n        }\n\n        .pk-popup-content[data-open] {\n            animation: pk-popup-content-in 100ms ease-out;\n        }\n\n        .pk-popup-content[data-open][data-side='bottom'] {\n            animation-name: pk-popup-content-in-bottom;\n        }\n\n        .pk-popup-content[data-open][data-side='top'] {\n            animation-name: pk-popup-content-in-top;\n        }\n\n        .pk-popup-content[data-open][data-side='left'] {\n            animation-name: pk-popup-content-in-left;\n        }\n\n        .pk-popup-content[data-open][data-side='right'] {\n            animation-name: pk-popup-content-in-right;\n        }\n\n        /* Exit: fade + zoom only — matches tw-animate animate-out / tooltip motion. */\n        .pk-popup-content.closing {\n            animation: pk-popup-content-out 100ms ease-in forwards;\n        }\n    }\n\n    @keyframes pk-popup-content-in {\n        from {\n            opacity: 0;\n            transform: scale(0.95);\n        }\n\n        to {\n            opacity: 1;\n            transform: scale(1);\n        }\n    }\n\n    @keyframes pk-popup-content-out {\n        from {\n            opacity: 1;\n            transform: scale(1);\n        }\n\n        to {\n            opacity: 0;\n            transform: scale(0.95);\n        }\n    }\n\n    @keyframes pk-popup-content-in-bottom {\n        from {\n            opacity: 0;\n            transform: scale(0.95) translateY(-0.5rem);\n        }\n\n        to {\n            opacity: 1;\n            transform: scale(1) translateY(0);\n        }\n    }\n\n    @keyframes pk-popup-content-in-top {\n        from {\n            opacity: 0;\n            transform: scale(0.95) translateY(0.5rem);\n        }\n\n        to {\n            opacity: 1;\n            transform: scale(1) translateY(0);\n        }\n    }\n\n    @keyframes pk-popup-content-in-left {\n        from {\n            opacity: 0;\n            transform: scale(0.95) translateX(0.5rem);\n        }\n\n        to {\n            opacity: 1;\n            transform: scale(1) translateX(0);\n        }\n    }\n\n    @keyframes pk-popup-content-in-right {\n        from {\n            opacity: 0;\n            transform: scale(0.95) translateX(-0.5rem);\n        }\n\n        to {\n            opacity: 1;\n            transform: scale(1) translateX(0);\n        }\n    }\n`;\n"],"mappings":";;;;;;;;;AASA,IAAa,8BAA8B,GAAG"}