@verbb/plugin-kit-web 2.0.24 → 2.0.26

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 ## Unreleased
 
+## 2.0.26 - 2026-10-20
+
+### Fixed
+- Fixed element pickers opening behind dialogs launched from Craft live preview or another modal.
+
+## 2.0.25 - 2026-10-15
+
+### Fixed
+- Fixed variable chip keyboard focus indicators to surround the whole chip with a soft lavender ring when configuring it and highlight the remove button separately.
+
 ## 2.0.24 - 2026-10-09
 
 ### Changed

package/dist/chunks/{pk-dialog-C7KZGpQs.js → pk-dialog-Dh4F92mG.js}

@@ -20,16 +20,7 @@ var isVisiblyShown = (element) => {
 	const style = getComputedStyle(element);
 	return style.display !== "none" && style.visibility !== "hidden" && Number.parseFloat(style.opacity || "1") > 0;
 };
-/** True when a Craft/Garnish modal or shade is present and visible. */
-function isCraftHostModalOpen(root = document) {
-	const nodes = root.querySelectorAll(HOST_MODAL_SELECTOR);
-	for (const node of nodes) {
-		if (!(node instanceof HTMLElement)) continue;
-		if (node.closest("pk-dialog")) continue;
-		if (isVisiblyShown(node)) return true;
-	}
-	return false;
-}
+var visibleHostModals = (root) => Array.from(root.querySelectorAll(HOST_MODAL_SELECTOR)).filter((node) => node instanceof HTMLElement && !node.closest("pk-dialog") && isVisiblyShown(node));
 /**
 * Watch the document for Craft modal mount/unmount and invoke `onChange`
 * whenever presence flips. Used by `pk-dialog` to leave/re-enter the top layer.
@@ -37,9 +28,11 @@ function isCraftHostModalOpen(root = document) {
 function observeCraftHostModal(onChange, options = {}) {
 	const doc = options.getDocument?.() ?? document;
 	const root = options.root ?? doc.body;
-	let lastOpen = isCraftHostModalOpen(doc);
+	const existing = new Set(options.ignoreExisting ? visibleHostModals(doc) : []);
+	const hasNewModal = () => visibleHostModals(doc).some((node) => !existing.has(node));
+	let lastOpen = hasNewModal();
 	const emit = () => {
-		const next = isCraftHostModalOpen(doc);
+		const next = hasNewModal();
 		if (next === lastOpen) return;
 		lastOpen = next;
 		onChange(next);
@@ -538,8 +531,7 @@ var PkDialog = class PkDialog extends PkElement {
 		document.addEventListener("keydown", this.handleDocumentKeyDown);
 		registerDismissible(this);
 		this.hostModalObserver?.disconnect();
-		this.hostModalObserver = observeCraftHostModal(this.onHostModalPresenceChange);
-		this.onHostModalPresenceChange(isCraftHostModalOpen());
+		this.hostModalObserver = observeCraftHostModal(this.onHostModalPresenceChange, { ignoreExisting: true });
 	}
 	removeOpenListeners() {
 		document.removeEventListener("keydown", this.handleDocumentKeyDown);
@@ -645,4 +637,4 @@ PkDialog = __decorate([customElement("pk-dialog")], PkDialog);
 //#endregion
 export { PkDialog as t };
 
-//# sourceMappingURL=pk-dialog-C7KZGpQs.js.map
+//# sourceMappingURL=pk-dialog-Dh4F92mG.js.map

package/dist/chunks/pk-dialog-Dh4F92mG.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pk-dialog-Dh4F92mG.js","names":["xmark","_decorate"],"sources":["../../src/utils/craft-host-modal.ts","../../src/components/dialog/pk-dialog.styles.ts","../../src/components/dialog/pk-dialog.ts"],"sourcesContent":["/**\n * Craft CP Garnish modals (element selector, asset picker, …) live in normal\n * document stacking — not the browser top layer. Native `<dialog>.showModal()`\n * always paints above them, so open kit dialogs must briefly yield.\n */\n\nconst HOST_MODAL_SELECTOR = '.modal-shade, .modal';\n\nconst isVisiblyShown = (element: HTMLElement): boolean => {\n    const style = getComputedStyle(element);\n\n    return style.display !== 'none'\n        && style.visibility !== 'hidden'\n        && Number.parseFloat(style.opacity || '1') > 0;\n};\n\nconst visibleHostModals = (root: ParentNode): HTMLElement[] =>\n    Array.from(root.querySelectorAll(HOST_MODAL_SELECTOR)).filter((node): node is HTMLElement =>\n        node instanceof HTMLElement && !node.closest('pk-dialog') && isVisiblyShown(node),\n    );\n\n/** True when a Craft/Garnish modal or shade is present and visible. */\nexport function isCraftHostModalOpen(root: ParentNode = document): boolean {\n    return visibleHostModals(root).length > 0;\n}\n\nexport type CraftHostModalObserver = {\n    disconnect: () => void;\n};\n\n/**\n * Watch the document for Craft modal mount/unmount and invoke `onChange`\n * whenever presence flips. Used by `pk-dialog` to leave/re-enter the top layer.\n */\nexport function observeCraftHostModal(\n    onChange: (open: boolean) => void,\n    options: { root?: ParentNode; getDocument?: () => Document; ignoreExisting?: boolean } = {},\n): CraftHostModalObserver {\n    const doc = options.getDocument?.() ?? document;\n    const root = options.root ?? doc.body;\n    // A dialog opened from Preview owns a newer layer than Preview's shade.\n    // Only later host modals should make it yield; an existing shade must not\n    // mask the opening or closing of a child element picker.\n    const existing = new Set(options.ignoreExisting ? visibleHostModals(doc) : []);\n    const hasNewModal = () => visibleHostModals(doc).some(node => !existing.has(node));\n    let lastOpen = hasNewModal();\n\n    const emit = () => {\n        const next = hasNewModal();\n        if (next === lastOpen) {\n            return;\n        }\n        lastOpen = next;\n        onChange(next);\n    };\n\n    const observer = new MutationObserver(() => {\n        emit();\n    });\n\n    observer.observe(root, {\n        childList: true,\n        subtree: true,\n        attributes: true,\n        attributeFilter: ['class', 'style', 'hidden'],\n    });\n\n    // Craft sometimes toggles visibility a frame after insert.\n    const intervalId = window.setInterval(emit, 250);\n\n    return {\n        disconnect: () => {\n            observer.disconnect();\n            window.clearInterval(intervalId);\n        },\n    };\n}\n","import { css } from 'lit';\n\nexport const pkDialogStyles = css`\n    @layer pk-component {\n        :host {\n            /* Not display:contents — that flattens the trigger slot into flex parents\n               (e.g. playground cards) and stretches pk-button full width, same class of\n               bug as the dropdown host. Dialog host is display none/block, not contents. */\n            display: inline-block;\n            width: fit-content;\n            max-width: 100%;\n            align-self: flex-start;\n            flex: none;\n            vertical-align: middle;\n        }\n\n        /*\n         * Controlled dialogs (no slot=\"trigger\") — panel is top-layer / fixed while\n         * yielding. An inline-block host still sizes to the open <dialog> box in some\n         * engines and expands parents (Formie nested field cards grow a blank gap).\n         *\n         * Zero box ≠ gone from the tree: Tailwind space-y-* uses :not(:last-child) on\n         * DOM siblings, so an in-tree host still steals last-child and margins the\n         * previous sibling. Prefer flex/grid gap-* (skips out-of-flow children), or\n         * mount overlays outside the spaced stack. True light-DOM portal would also fix it.\n         */\n        :host(:not([data-has-trigger])) {\n            position: absolute;\n            width: 0;\n            height: 0;\n            max-width: none;\n            margin: 0;\n            padding: 0;\n            overflow: visible;\n            vertical-align: unset;\n        }\n\n        .dialog {\n            display: flex;\n            flex-direction: column;\n            width: min(100%, var(--pk-dialog-width, var(--pk-dialog-max-width, 32rem)));\n            min-width: var(--pk-dialog-min-width, 0);\n            /* Keep UA :modal inset (0) — that + margin:auto centers the panel. Do not\n             * unset inset; it breaks centering (field edit landed top-left). */\n            height: var(--pk-dialog-height, fit-content);\n            min-height: var(--pk-dialog-min-height, 0);\n            max-height: var(--pk-dialog-max-height, calc(100vh - 2rem));\n            margin: auto;\n            padding: 0;\n            /* v1 DialogContent: no CSS border — edge is the 1px ring inside --pk-shadow-modal. */\n            border: 0;\n            border-radius: var(--pk-radius-lg);\n            background: var(--pk-color-white);\n            box-shadow: var(--pk-shadow-modal);\n            color: var(--pk-color-gray-900);\n            overflow: hidden;\n            opacity: 1;\n            transform: scale(1);\n        }\n\n        .dialog:focus,\n        .dialog:focus-visible {\n            outline: none;\n        }\n\n        .dialog:not([open]) {\n            display: none;\n        }\n\n        .dialog--wide {\n            --pk-dialog-max-width: 42rem;\n        }\n\n        /* motion only via animateWithClass — never auto-animate on [open] alone. */\n        .dialog.show {\n            animation: pk-dialog-in 0.15s ease;\n        }\n\n        .dialog.hide {\n            animation: pk-dialog-out 0.15s ease forwards;\n        }\n\n        .dialog.pulse {\n            animation: pk-dialog-pulse 0.25s ease;\n        }\n\n        @keyframes pk-dialog-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-dialog-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-dialog-pulse {\n            0%, 100% {\n                transform: scale(1);\n            }\n\n            50% {\n                transform: scale(0.98);\n            }\n        }\n\n        .dialog.show::backdrop {\n            animation: pk-dialog-backdrop-in 0.15s ease;\n        }\n\n        .dialog.hide::backdrop {\n            animation: pk-dialog-backdrop-in 0.15s ease reverse;\n        }\n\n        .dialog::backdrop {\n            background: hsl(from var(--pk-color-gray-900) h s l / 0.2);\n            opacity: 1;\n        }\n\n        @keyframes pk-dialog-backdrop-in {\n            from {\n                opacity: 0;\n            }\n\n            to {\n                opacity: 1;\n            }\n        }\n\n        .header {\n            position: relative;\n            display: flex;\n            flex-shrink: 0;\n            flex-direction: column;\n            gap: 0.2rem;\n            padding: 1rem;\n            border-bottom: 1px solid var(--pk-color-gray-150);\n            border-radius: var(--pk-radius-lg) var(--pk-radius-lg) 0 0;\n            background: #f3f7fb;\n            text-align: left;\n        }\n\n        .title {\n            margin: 0;\n            padding-inline-end: 2rem;\n            font-size: 0.9375rem;\n            font-weight: 600;\n            line-height: 1.2;\n            color: var(--pk-color-gray-900);\n        }\n\n        .description {\n            margin: 0;\n            padding-inline-end: 2rem;\n            font-size: 0.75rem;\n            font-weight: 400;\n            line-height: 1.4;\n            color: var(--pk-color-gray-500);\n        }\n\n        .close {\n            --pk-dialog-close-focus-padding: 0.25rem;\n            position: absolute;\n            top: calc(1rem - var(--pk-dialog-close-focus-padding));\n            right: calc(1rem - var(--pk-dialog-close-focus-padding));\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            width: calc(1.125rem + 2 * var(--pk-dialog-close-focus-padding));\n            height: calc(1.125rem + 2 * var(--pk-dialog-close-focus-padding));\n            margin: 0;\n            padding: var(--pk-dialog-close-focus-padding);\n            border: 0;\n            border-radius: var(--pk-radius-sm);\n            background: transparent;\n            color: var(--pk-color-gray-600);\n            cursor: pointer;\n            line-height: 0;\n            opacity: 0.7;\n            transition: opacity 0.12s ease;\n            box-sizing: border-box;\n        }\n\n        .close-icon {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            line-height: 0;\n        }\n\n        .close-icon svg {\n            display: block;\n            width: 1.125rem;\n            height: 1.125rem;\n        }\n\n        .close:hover {\n            opacity: 1;\n            background: transparent;\n        }\n\n        .close:focus-visible {\n            opacity: 1;\n            box-shadow: 0 0 0 2px var(--pk-color-gray-600);\n        }\n\n        .body {\n            flex: 1 1 auto;\n            min-height: 0;\n            overflow: auto;\n            padding: 0;\n            /* v1 DialogContent inherited CP text defaults (14px / gray-700) — do not\n             * downshift body copy to sm/gray-600 or slotted content reads smaller than v1. */\n            font-size: var(--pk-font-size-base);\n            line-height: 1.5;\n            color: var(--pk-color-gray-700);\n        }\n\n        .body--padded {\n            padding: 1rem;\n        }\n\n        .footer {\n            display: flex;\n            flex-shrink: 0;\n            flex-direction: row;\n            justify-content: flex-end;\n            gap: 0.5rem;\n            padding: 0.625rem 1rem;\n            border-top: 1px solid var(--pk-color-gray-150);\n            border-radius: 0 0 var(--pk-radius-lg) var(--pk-radius-lg);\n            background: #e4edf6;\n        }\n    }\n`;\n","import { html, nothing } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query, state } from '../../decorators.js';\nimport type { PropertyValues } from 'lit';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\n\nimport { isTopDismissible, registerDismissible, unregisterDismissible } from '../../a11y/dismissible-stack.js';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../a11y/scroll-lock.js';\nimport { PkElement } from '../../base/pk-element.js';\nimport { xmark, renderIconHtml } from '../../icons/index.js';\nimport {\n    PkAfterHideEvent,\n    PkAfterShowEvent,\n    PkHideEvent,\n    PkShowEvent,\n    type PkOverlaySource,\n} from '../../events/overlay-lifecycle.js';\nimport { animateWithClass } from '../../utils/animate-with-class.js';\nimport { observeCraftHostModal, type CraftHostModalObserver } from '../../utils/craft-host-modal.js';\nimport { pkDialogStyles } from './pk-dialog.styles.js';\n\nconst CLOSE_ICON = renderIconHtml(xmark);\n\n/**\n * Modal dialog — literal  `pk-dialog` lifecycle with Plugin Kit styling.\n *\n * Craft CP Garnish modals (asset/element selectors) are not top-layer. While one\n * is open, this dialog temporarily uses `show()` instead of `showModal()` so the\n * Craft UI can stack above — same interop intent as v1 Base UI dialog + `.modal`.\n *\n * @slot trigger - Opens the dialog (optional — use `open` for declarative control)\n * @slot header - Custom header region (replaces the built-in `label` header)\n * @slot label - Dialog title\n * @slot footer - Dialog footer actions\n * @slot - Dialog body\n *\n * @csspart panel - Native dialog element\n * @csspart header - Header region\n * @csspart body - Body region\n * @csspart footer - Footer region\n */\n@customElement('pk-dialog')\nexport class PkDialog extends PkElement {\n    static override styles = pkDialogStyles;\n\n    @property({ type: Boolean, reflect: true })\n    open = false;\n\n    @property()\n    label = '';\n\n    /** Optional subtitle under the title in the built-in header (v1 DialogDescription). */\n    @property()\n    description = '';\n\n    /** Maps to  `light-dismiss` (inverted). */\n    @property({ attribute: 'disable-pointer-dismissal', type: Boolean, reflect: true })\n    disablePointerDismissal = false;\n\n    @property({ attribute: 'without-header', type: Boolean, reflect: true })\n    withoutHeader = false;\n\n    /**\n     * Opt out of the default 1rem body padding applied when the built-in header is shown.\n     * Use for flush layouts (sidebars, full-bleed pickers) that own their own inset.\n     */\n    @property({ attribute: 'without-body-padding', type: Boolean, reflect: true })\n    withoutBodyPadding = false;\n\n    /**\n     * Skip document scroll lock while open. Useful for labs / rare cases where the\n     * page should keep scrolling under the modal (native dialog still traps focus).\n     */\n    @property({ attribute: 'disable-scroll-lock', type: Boolean, reflect: true })\n    disableScrollLock = false;\n\n    @property({ reflect: true })\n    size: 'default' | 'wide' = 'default';\n\n    @query('dialog')\n    private dialogElement!: HTMLDialogElement;\n\n    @state()\n    private triggerElement: HTMLElement | null = null;\n\n    private previouslyFocused: HTMLElement | null = null;\n\n    /** True while demoted from `showModal` so a Craft Garnish modal can stack above. */\n    private yieldingToHostModal = false;\n\n    private hostModalObserver: CraftHostModalObserver | null = null;\n\n    /** Inline box captured before yield — cleared on restore. */\n    private yieldBox: { top: number; left: number; width: number; height: number } | null = null;\n\n    /** Light-DOM `slot=\"header\"` only — ignore built-in header fallback inside the shadow slot. */\n    private hasCustomHeaderSlot(): boolean {\n        return this.querySelector(':scope > [slot=\"header\"]') !== null;\n    }\n\n    private handleDocumentKeyDown = (event: KeyboardEvent): void => {\n        // Craft modal owns Escape while we have yielded the top layer.\n        if (this.yieldingToHostModal) {\n            return;\n        }\n\n        if (event.key === 'Escape' && this.open && isTopDismissible(this)) {\n            event.preventDefault();\n            event.stopPropagation();\n            void this.requestClose('escape');\n        }\n    };\n\n    /** Pin modeless dialog to the viewport box it had under `showModal`. */\n    private applyYieldPosition(box: { top: number; left: number; width: number; height: number }): void {\n        const el = this.dialogElement;\n        el.style.position = 'fixed';\n        el.style.top = `${box.top}px`;\n        el.style.left = `${box.left}px`;\n        el.style.width = `${box.width}px`;\n        el.style.height = `${box.height}px`;\n        el.style.margin = '0';\n        el.style.maxHeight = 'none';\n        // Below typical Garnish.Modal z-index (≥100); keeps page chrome from covering us.\n        el.style.zIndex = '99';\n        el.toggleAttribute('data-yielding', true);\n    }\n\n    private clearYieldPosition(): void {\n        const el = this.dialogElement;\n        if (!el) {\n            return;\n        }\n\n        el.style.position = '';\n        el.style.top = '';\n        el.style.left = '';\n        el.style.width = '';\n        el.style.height = '';\n        el.style.margin = '';\n        el.style.maxHeight = '';\n        el.style.zIndex = '';\n        el.removeAttribute('data-yielding');\n        this.yieldBox = null;\n    }\n\n    /** Demote `showModal` → `show` so Craft Garnish can paint above (not inert/under). */\n    private yieldToHostModal(): void {\n        if (this.yieldingToHostModal || !this.open || !this.dialogElement?.open) {\n            return;\n        }\n\n        // Capture centered modal box before leaving the top layer — `show()` is\n        // in-flow and would otherwise jump to the host's layout position.\n        const rect = this.dialogElement.getBoundingClientRect();\n        this.yieldBox = {\n            top: rect.top,\n            left: rect.left,\n            width: rect.width,\n            height: rect.height,\n        };\n        this.yieldingToHostModal = true;\n\n        try {\n            this.dialogElement.close();\n            this.dialogElement.show();\n            this.applyYieldPosition(this.yieldBox);\n        } catch {\n            this.yieldingToHostModal = false;\n            this.clearYieldPosition();\n        }\n    }\n\n    /** Restore top-layer modal after Craft Garnish closes. */\n    private restoreFromHostModal(): void {\n        if (!this.yieldingToHostModal) {\n            return;\n        }\n\n        this.yieldingToHostModal = false;\n        this.clearYieldPosition();\n\n        if (!this.open || !this.dialogElement) {\n            return;\n        }\n\n        try {\n            if (this.dialogElement.open) {\n                this.dialogElement.close();\n            }\n            this.dialogElement.showModal();\n        } catch {\n            /* noop — next open cycle will recover */\n        }\n    }\n\n    private onHostModalPresenceChange = (hostModalOpen: boolean): void => {\n        if (hostModalOpen) {\n            this.yieldToHostModal();\n        } else {\n            this.restoreFromHostModal();\n        }\n    };\n\n    override firstUpdated(): void {\n        // Mount-with-open (React `{open && <Dialog open>}` / `<Dialog open>`) must\n        // use show() so the enter animation runs. A bare showModal() here used to\n        // open instantly, then updated()→show() no-op'd because dialogElement.open\n        // was already true — page-settings (always mounted, open toggled) still\n        // animated because it only went through show().\n        if (this.open) {\n            void this.show();\n        }\n    }\n\n    override disconnectedCallback(): void {\n        if (!this.disableScrollLock) {\n            unlockBodyScrolling(this);\n        }\n\n        this.removeOpenListeners();\n        super.disconnectedCallback();\n    }\n\n    override updated(changed: PropertyValues): void {\n        super.updated(changed);\n\n        if (!changed.has('open') || !this.hasUpdated) {\n            return;\n        }\n\n        this.handleOpenChange();\n    }\n\n    /** `handleOpenChange` — declarative `open` drives show/close. */\n    private handleOpenChange(): void {\n        if (this.open && !this.dialogElement.open) {\n            void this.show();\n        } else if (!this.open && this.dialogElement.open) {\n            this.open = true;\n            void this.requestClose('api');\n        }\n    }\n\n    private showing = false;\n\n    /** Shows the dialog —  `show()`. */\n    async show(_source: PkOverlaySource = 'api'): Promise<void> {\n        if (this.showing || this.dialogElement?.open) {\n            return;\n        }\n\n        this.showing = true;\n\n        try {\n            const showEvent = new PkShowEvent();\n\n            if (!this.dispatchEvent(showEvent)) {\n                this.open = false;\n                return;\n            }\n\n            this.addOpenListeners();\n            this.previouslyFocused = document.activeElement as HTMLElement | null;\n            this.open = true;\n            this.dialogElement.showModal();\n\n            if (!this.disableScrollLock) {\n                lockBodyScrolling(this);\n            }\n\n            requestAnimationFrame(() => {\n                const elementToFocus = this.querySelector<HTMLElement>('[autofocus]');\n\n                if (elementToFocus) {\n                    const innerControl = elementToFocus.shadowRoot?.querySelector<HTMLElement>(\n                        'input, textarea, select, button',\n                    );\n\n                    (innerControl ?? elementToFocus).focus({ preventScroll: true });\n                    return;\n                }\n\n                this.dialogElement.focus({ preventScroll: true });\n            });\n\n            await animateWithClass(this.dialogElement, 'show');\n\n            this.dispatchEvent(new CustomEvent('pk-open-change', {\n                detail: { open: true },\n                bubbles: true,\n                composed: true,\n            }));\n            this.dispatchEvent(new PkAfterShowEvent());\n        } finally {\n            this.showing = false;\n        }\n    }\n\n    async hide(source: PkOverlaySource = 'unknown'): Promise<void> {\n        await this.requestClose(source);\n    }\n\n    closeDialog(): void {\n        void this.requestClose('close-button');\n    }\n\n    /** `requestClose()`. */\n    async requestClose(source: PkOverlaySource | EventTarget = 'unknown'): Promise<void> {\n        const overlaySource: PkOverlaySource = typeof source === 'string'\n            ? source\n            : 'close-button';\n\n        const hideEvent = new PkHideEvent(overlaySource);\n\n        if (!this.dispatchEvent(hideEvent)) {\n            this.open = true;\n            await animateWithClass(this.dialogElement, 'pulse');\n            return;\n        }\n\n        this.removeOpenListeners();\n        await animateWithClass(this.dialogElement, 'hide');\n        this.open = false;\n        this.dialogElement.close();\n\n        if (!this.disableScrollLock) {\n            unlockBodyScrolling(this);\n        }\n\n        const restoreFocus = this.previouslyFocused;\n        this.previouslyFocused = null;\n\n        if (restoreFocus?.isConnected) {\n            window.setTimeout(() => {\n                restoreFocus.focus({ preventScroll: true });\n            }, 0);\n        }\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    /** Recovery hook — clears hung modal state from overlay races. */\n    forceOverlayReset(): void {\n        this.open = false;\n        this.yieldingToHostModal = false;\n        this.clearYieldPosition();\n        this.removeOpenListeners();\n\n        if (this.dialogElement?.open) {\n            try {\n                this.dialogElement.close();\n            } catch {\n                /* noop */\n            }\n        }\n\n        this.dialogElement?.classList.remove('hide', 'show', 'pulse');\n\n        if (!this.disableScrollLock) {\n            unlockBodyScrolling(this);\n        }\n    }\n\n    private addOpenListeners(): void {\n        document.addEventListener('keydown', this.handleDocumentKeyDown);\n        registerDismissible(this);\n        this.hostModalObserver?.disconnect();\n        this.hostModalObserver = observeCraftHostModal(this.onHostModalPresenceChange, { ignoreExisting: true });\n    }\n\n    private removeOpenListeners(): void {\n        document.removeEventListener('keydown', this.handleDocumentKeyDown);\n        unregisterDismissible(this);\n        this.hostModalObserver?.disconnect();\n        this.hostModalObserver = null;\n        this.yieldingToHostModal = false;\n        this.clearYieldPosition();\n    }\n\n    private handleDialogCancel = (event: Event): void => {\n        event.preventDefault();\n\n        if (!this.dialogElement.classList.contains('hide') && isTopDismissible(this)) {\n            void this.requestClose('escape');\n        }\n    };\n\n    private handleDialogClick = (event: Event): void => {\n        const closeViaPath = event.composedPath().some(\n            (node): node is Element =>\n                node instanceof Element && node.matches('[data-dialog=\"close\"], [data-dialog-close]'),\n        );\n\n        if (closeViaPath) {\n            event.stopPropagation();\n            void this.requestClose('close-button');\n        }\n    };\n\n    private handleDialogPointerDown = async (event: Event): Promise<void> => {\n        if (event.target !== this.dialogElement) {\n            return;\n        }\n\n        // Nested overlays (dropdown / select / combobox) register above us on the\n        // dismissible stack. Their capture-phase light-dismiss runs first; skip closing\n        // the dialog for the same click so “click off the menu” doesn’t also dismiss us.\n        if (!isTopDismissible(this)) {\n            return;\n        }\n\n        if (!this.disablePointerDismissal) {\n            void this.requestClose('pointer-dismiss');\n            return;\n        }\n\n        await animateWithClass(this.dialogElement, 'pulse');\n    };\n\n    private syncHasTriggerAttribute(): void {\n        // Drives :host(:not([data-has-trigger])) zero-footprint layout (see styles).\n        this.toggleAttribute('data-has-trigger', Boolean(this.triggerElement));\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        if (this.triggerElement) {\n            this.triggerElement.removeEventListener('click', this.onTriggerClick);\n        }\n\n        this.triggerElement = trigger ?? null;\n        this.syncHasTriggerAttribute();\n\n        if (this.triggerElement) {\n            this.triggerElement.addEventListener('click', this.onTriggerClick);\n        }\n    }\n\n    private onTriggerClick = (event: Event): void => {\n        event.preventDefault();\n        this.open = true;\n    };\n\n    /** Re-render when footer actions are added/removed so the footer is not shown empty. */\n    private onFooterSlotChange = (): void => {\n        this.requestUpdate();\n    };\n\n    override render() {\n        const showBuiltInHeader = !this.hasCustomHeaderSlot()\n            && !this.withoutHeader\n            && Boolean(this.label);\n        const padBody = showBuiltInHeader && !this.withoutBodyPadding;\n        const hasFooter = this.querySelector(':scope > [slot=\"footer\"]') !== null;\n\n        return html`\n            <slot name=\"trigger\" @slotchange=${this.onTriggerSlotChange}></slot>\n            <dialog\n                part=\"panel\"\n                class=${classMap({\n                    dialog: true,\n                    open: this.open,\n                    'dialog--wide': this.size === 'wide',\n                })}\n                tabindex=\"-1\"\n                @cancel=${this.handleDialogCancel}\n                @click=${this.handleDialogClick}\n                @pointerdown=${this.handleDialogPointerDown}\n            >\n                <slot name=\"header\">\n                    ${showBuiltInHeader\n                        ? html`\n                            <header part=\"header\" class=\"header\">\n                                <h2 part=\"title\" class=\"title\">\n                                    <slot name=\"label\">${this.label}</slot>\n                                </h2>\n                                ${this.description\n                                    ? html`\n                                        <p part=\"description\" class=\"description\">\n                                            <slot name=\"description\">${this.description}</slot>\n                                        </p>\n                                    `\n                                    : html`<slot name=\"description\" hidden></slot>`}\n                                <button type=\"button\" class=\"close\" data-dialog=\"close\" aria-label=\"Close\">\n                                    <span class=\"close-icon\" aria-hidden=\"true\">${unsafeSVG(CLOSE_ICON)}</span>\n                                </button>\n                            </header>\n                        `\n                        : nothing}\n                </slot>\n                <div\n                    part=\"body\"\n                    class=${classMap({\n                        body: true,\n                        'body--padded': padBody,\n                    })}\n                >\n                    <slot></slot>\n                </div>\n                ${hasFooter\n                    ? html`\n                        <footer part=\"footer\" class=\"footer\">\n                            <slot name=\"footer\" @slotchange=${this.onFooterSlotChange}></slot>\n                        </footer>\n                    `\n                    : html`<slot name=\"footer\" @slotchange=${this.onFooterSlotChange} hidden></slot>`}\n            </dialog>\n        `;\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-dialog': PkDialog;\n    }\n}\n"],"mappings":"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"}

package/dist/chunks/{pk-tiptap-content-C2qzGQKj.js → pk-tiptap-content-DmS_2EUi.js}

@@ -1,6 +1,6 @@
 import { i as customElement, n as PkElement, t as __decorate } from "./decorate-Br_PE9pq.js";
 import { n as query, t as property } from "./decorators-BkErmuYK.js";
-import { i as createVariableTagDomNodeView, t as tiptapContentProseMirrorStyles } from "./tiptap.styles-Q4ED1nBw.js";
+import { i as createVariableTagDomNodeView, t as tiptapContentProseMirrorStyles } from "./tiptap.styles-Cwb_cj9g.js";
 import { css, html } from "lit";
 import { Editor } from "@tiptap/core";
 import { createTiptapExtensions, valueToContent } from "@verbb/plugin-kit-tiptap-core";
@@ -76,4 +76,4 @@ PkTiptapContent = __decorate([customElement("pk-tiptap-content")], PkTiptapConte
 //#endregion
 export { PkTiptapContent as t };
 
-//# sourceMappingURL=pk-tiptap-content-C2qzGQKj.js.map
+//# sourceMappingURL=pk-tiptap-content-DmS_2EUi.js.map

package/dist/chunks/{pk-tiptap-content-C2qzGQKj.js.map → pk-tiptap-content-DmS_2EUi.js.map}

@@ -1 +1 @@
-{"version":3,"file":"pk-tiptap-content-C2qzGQKj.js","names":["_decorate"],"sources":["../../src/components/tiptap/pk-tiptap-content.styles.ts","../../src/components/tiptap/pk-tiptap-content.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkTiptapContentStyles = css`\n    @layer pk-component {\n        :host {\n            display: block;\n            width: 100%;\n            /* Inherit light-DOM color/size (warning banners, badges). Tokens override when set. */\n            color: var(--pk-tiptap-content-color, inherit);\n            font-family: var(--pk-font-family);\n            font-size: var(--pk-tiptap-content-font-size, inherit);\n            line-height: var(--pk-tiptap-content-line-height, 1.4);\n        }\n    }\n`;\n","import { html } from 'lit';\nimport { customElement, property, query } from '../../decorators.js';\nimport type { PropertyValues } from 'lit';\nimport { Editor } from '@tiptap/core';\nimport {\n    createTiptapExtensions,\n    valueToContent,\n} from '@verbb/plugin-kit-tiptap-core';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { createVariableTagDomNodeView } from './variable-tag-node-view.js';\nimport { pkTiptapContentStyles } from './pk-tiptap-content.styles.js';\nimport { tiptapContentProseMirrorStyles } from './tiptap.styles.js';\n\nfunction serializeContent(doc: ReturnType<typeof valueToContent>): string {\n    if (!doc) {\n        return '[]';\n    }\n\n    if (Array.isArray(doc.content)) {\n        return JSON.stringify(doc.content);\n    }\n\n    return JSON.stringify(doc);\n}\n\n/**\n * Read-only TipTap / ProseMirror renderer.\n *\n * Pass the same `value` shapes as TiptapEditor: node array, doc object, or JSON string.\n */\n@customElement('pk-tiptap-content')\nexport class PkTiptapContent extends PkElement {\n    static override styles = [pkTiptapContentStyles, tiptapContentProseMirrorStyles];\n\n    @query('.editor-mount')\n    private editorMount!: HTMLDivElement;\n\n    private editor: Editor | null = null;\n\n    @property({ attribute: 'value' })\n    value = '';\n\n    override disconnectedCallback(): void {\n        this.editor?.destroy();\n        this.editor = null;\n        super.disconnectedCallback();\n    }\n\n    override updated(changed: PropertyValues): void {\n        if (changed.has('value') && this.editor) {\n            this.syncContent();\n        }\n\n        super.updated(changed);\n    }\n\n    override firstUpdated(): void {\n        this.mountEditor();\n    }\n\n    private mountEditor(): void {\n        this.editor = new Editor({\n            element: this.editorMount,\n            extensions: createTiptapExtensions({\n                variableTagNodeView: createVariableTagDomNodeView(),\n                surface: 'content',\n            }),\n            content: valueToContent(this.value),\n            editable: false,\n        });\n    }\n\n    private syncContent(): void {\n        if (!this.editor) {\n            return;\n        }\n\n        const doc = valueToContent(this.value) ?? { type: 'doc', content: [] };\n        const incoming = serializeContent(valueToContent(this.value));\n        const current = serializeContent(this.editor.getJSON() as ReturnType<typeof valueToContent>);\n\n        if (incoming === current) {\n            return;\n        }\n\n        this.editor.commands.setContent(doc);\n    }\n\n    override render() {\n        return html`<div class=\"editor-mount\" part=\"content\"></div>`;\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-tiptap-content': PkTiptapContent;\n    }\n}\n"],"mappings":";;;;;;;AAEA,IAAa,wBAAwB,GAAG;;;;;;;;;;;;;;;ACYxC,SAAS,iBAAiB,KAAgD;CACtE,IAAI,CAAC,KACD,OAAO;CAGX,IAAI,MAAM,QAAQ,IAAI,OAAO,GACzB,OAAO,KAAK,UAAU,IAAI,OAAO;CAGrC,OAAO,KAAK,UAAU,GAAG;AAC7B;AAQO,IAAM,kBAAN,MAAM,wBAAwB,UAAU;;;EAMX,KAAA,SAAA;EAGxB,KAAA,QAAA;;;EARiB,KAAA,SAAA,CAAC,uBAAuB,8BAA8B;;CAU/E,uBAAsC;EAClC,KAAK,QAAQ,QAAQ;EACrB,KAAK,SAAS;EACd,MAAM,qBAAqB;CAC/B;CAEA,QAAiB,SAA+B;EAC5C,IAAI,QAAQ,IAAI,OAAO,KAAK,KAAK,QAC7B,KAAK,YAAY;EAGrB,MAAM,QAAQ,OAAO;CACzB;CAEA,eAA8B;EAC1B,KAAK,YAAY;CACrB;CAEA,cAA4B;EACxB,KAAK,SAAS,IAAI,OAAO;GACrB,SAAS,KAAK;GACd,YAAY,uBAAuB;IAC/B,qBAAqB,6BAA6B;IAClD,SAAS;GACb,CAAC;GACD,SAAS,eAAe,KAAK,KAAK;GAClC,UAAU;EACd,CAAC;CACL;CAEA,cAA4B;EACxB,IAAI,CAAC,KAAK,QACN;EAGJ,MAAM,MAAM,eAAe,KAAK,KAAK,KAAK;GAAE,MAAM;GAAO,SAAS,CAAC;EAAE;EAIrE,IAHiB,iBAAiB,eAAe,KAAK,KAAK,CAGvD,MAFY,iBAAiB,KAAK,OAAO,QAAQ,CAEpC,GACb;EAGJ,KAAK,OAAO,SAAS,WAAW,GAAG;CACvC;CAEA,SAAkB;EACd,OAAO,IAAI;CACf;AACJ;AAzDKA,WAAA,CAAA,MAAM,eAAe,CAAA,GAAA,gBAAA,WAAA,eAAA,KAAA,CAAA;AAKrBA,WAAA,CAAA,SAAS,EAAE,WAAW,QAAQ,CAAC,CAAA,GAAA,gBAAA,WAAA,SAAA,KAAA,CAAA;AATnC,kBAAAA,WAAA,CAAA,cAAc,mBAAmB,CAAA,GAAA,eAAA"}
+{"version":3,"file":"pk-tiptap-content-DmS_2EUi.js","names":["_decorate"],"sources":["../../src/components/tiptap/pk-tiptap-content.styles.ts","../../src/components/tiptap/pk-tiptap-content.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkTiptapContentStyles = css`\n    @layer pk-component {\n        :host {\n            display: block;\n            width: 100%;\n            /* Inherit light-DOM color/size (warning banners, badges). Tokens override when set. */\n            color: var(--pk-tiptap-content-color, inherit);\n            font-family: var(--pk-font-family);\n            font-size: var(--pk-tiptap-content-font-size, inherit);\n            line-height: var(--pk-tiptap-content-line-height, 1.4);\n        }\n    }\n`;\n","import { html } from 'lit';\nimport { customElement, property, query } from '../../decorators.js';\nimport type { PropertyValues } from 'lit';\nimport { Editor } from '@tiptap/core';\nimport {\n    createTiptapExtensions,\n    valueToContent,\n} from '@verbb/plugin-kit-tiptap-core';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { createVariableTagDomNodeView } from './variable-tag-node-view.js';\nimport { pkTiptapContentStyles } from './pk-tiptap-content.styles.js';\nimport { tiptapContentProseMirrorStyles } from './tiptap.styles.js';\n\nfunction serializeContent(doc: ReturnType<typeof valueToContent>): string {\n    if (!doc) {\n        return '[]';\n    }\n\n    if (Array.isArray(doc.content)) {\n        return JSON.stringify(doc.content);\n    }\n\n    return JSON.stringify(doc);\n}\n\n/**\n * Read-only TipTap / ProseMirror renderer.\n *\n * Pass the same `value` shapes as TiptapEditor: node array, doc object, or JSON string.\n */\n@customElement('pk-tiptap-content')\nexport class PkTiptapContent extends PkElement {\n    static override styles = [pkTiptapContentStyles, tiptapContentProseMirrorStyles];\n\n    @query('.editor-mount')\n    private editorMount!: HTMLDivElement;\n\n    private editor: Editor | null = null;\n\n    @property({ attribute: 'value' })\n    value = '';\n\n    override disconnectedCallback(): void {\n        this.editor?.destroy();\n        this.editor = null;\n        super.disconnectedCallback();\n    }\n\n    override updated(changed: PropertyValues): void {\n        if (changed.has('value') && this.editor) {\n            this.syncContent();\n        }\n\n        super.updated(changed);\n    }\n\n    override firstUpdated(): void {\n        this.mountEditor();\n    }\n\n    private mountEditor(): void {\n        this.editor = new Editor({\n            element: this.editorMount,\n            extensions: createTiptapExtensions({\n                variableTagNodeView: createVariableTagDomNodeView(),\n                surface: 'content',\n            }),\n            content: valueToContent(this.value),\n            editable: false,\n        });\n    }\n\n    private syncContent(): void {\n        if (!this.editor) {\n            return;\n        }\n\n        const doc = valueToContent(this.value) ?? { type: 'doc', content: [] };\n        const incoming = serializeContent(valueToContent(this.value));\n        const current = serializeContent(this.editor.getJSON() as ReturnType<typeof valueToContent>);\n\n        if (incoming === current) {\n            return;\n        }\n\n        this.editor.commands.setContent(doc);\n    }\n\n    override render() {\n        return html`<div class=\"editor-mount\" part=\"content\"></div>`;\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-tiptap-content': PkTiptapContent;\n    }\n}\n"],"mappings":";;;;;;;AAEA,IAAa,wBAAwB,GAAG;;;;;;;;;;;;;;;ACYxC,SAAS,iBAAiB,KAAgD;CACtE,IAAI,CAAC,KACD,OAAO;CAGX,IAAI,MAAM,QAAQ,IAAI,OAAO,GACzB,OAAO,KAAK,UAAU,IAAI,OAAO;CAGrC,OAAO,KAAK,UAAU,GAAG;AAC7B;AAQO,IAAM,kBAAN,MAAM,wBAAwB,UAAU;;;EAMX,KAAA,SAAA;EAGxB,KAAA,QAAA;;;EARiB,KAAA,SAAA,CAAC,uBAAuB,8BAA8B;;CAU/E,uBAAsC;EAClC,KAAK,QAAQ,QAAQ;EACrB,KAAK,SAAS;EACd,MAAM,qBAAqB;CAC/B;CAEA,QAAiB,SAA+B;EAC5C,IAAI,QAAQ,IAAI,OAAO,KAAK,KAAK,QAC7B,KAAK,YAAY;EAGrB,MAAM,QAAQ,OAAO;CACzB;CAEA,eAA8B;EAC1B,KAAK,YAAY;CACrB;CAEA,cAA4B;EACxB,KAAK,SAAS,IAAI,OAAO;GACrB,SAAS,KAAK;GACd,YAAY,uBAAuB;IAC/B,qBAAqB,6BAA6B;IAClD,SAAS;GACb,CAAC;GACD,SAAS,eAAe,KAAK,KAAK;GAClC,UAAU;EACd,CAAC;CACL;CAEA,cAA4B;EACxB,IAAI,CAAC,KAAK,QACN;EAGJ,MAAM,MAAM,eAAe,KAAK,KAAK,KAAK;GAAE,MAAM;GAAO,SAAS,CAAC;EAAE;EAIrE,IAHiB,iBAAiB,eAAe,KAAK,KAAK,CAGvD,MAFY,iBAAiB,KAAK,OAAO,QAAQ,CAEpC,GACb;EAGJ,KAAK,OAAO,SAAS,WAAW,GAAG;CACvC;CAEA,SAAkB;EACd,OAAO,IAAI;CACf;AACJ;AAzDKA,WAAA,CAAA,MAAM,eAAe,CAAA,GAAA,gBAAA,WAAA,eAAA,KAAA,CAAA;AAKrBA,WAAA,CAAA,SAAS,EAAE,WAAW,QAAQ,CAAC,CAAA,GAAA,gBAAA,WAAA,SAAA,KAAA,CAAA;AATnC,kBAAAA,WAAA,CAAA,cAAc,mBAAmB,CAAA,GAAA,eAAA"}

package/dist/chunks/{pk-tiptap-editor-y_QyNSR-.js → pk-tiptap-editor-DLHbQRCW.js}

@@ -9,14 +9,14 @@ import "./pk-checkbox-L5uRex3b.js";
 import { t as formControlStyles } from "./form-control.styles-CQ93gnVf.js";
 import { i as uniqueId } from "./focus-DcVUPVqn.js";
 import "./pk-input-BUbXj9We.js";
-import "./pk-dialog-C7KZGpQs.js";
+import "./pk-dialog-Dh4F92mG.js";
 import "./pk-dropdown-item-Ck2N_suK.js";
 import "./pk-dropdown-menu-DBsO1uYR.js";
 import "./pk-dropdown-label-BdZLeizJ.js";
 import "../components/dropdown-menu/pk-dropdown-separator.js";
 import "./pk-field--PCE9nOd.js";
 import "./pk-tooltip-Cvv2f7T5.js";
-import { i as createVariableTagDomNodeView, r as tiptapProseMirrorStyles } from "./tiptap.styles-Q4ED1nBw.js";
+import { i as createVariableTagDomNodeView, r as tiptapProseMirrorStyles } from "./tiptap.styles-Cwb_cj9g.js";
 import { css, html, nothing } from "lit";
 import { unsafeSVG } from "lit/directives/unsafe-svg.js";
 import { Editor, getMarkRange, posToDOMRect } from "@tiptap/core";
@@ -1404,4 +1404,4 @@ PkTiptapEditor = __decorate([customElement("pk-tiptap-editor")], PkTiptapEditor)
 //#endregion
 export { PkTiptapEditor as t };
 
-//# sourceMappingURL=pk-tiptap-editor-y_QyNSR-.js.map
+//# sourceMappingURL=pk-tiptap-editor-DLHbQRCW.js.map