@verbb/plugin-kit-web 2.0.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"pk-dialog-DZZd1Tzb.js","names":[],"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\n/** True when a Craft/Garnish modal or shade is present and visible. */\nexport function isCraftHostModalOpen(root: ParentNode = document): boolean {\n    const nodes = root.querySelectorAll(HOST_MODAL_SELECTOR);\n\n    for (const node of nodes) {\n        if (!(node instanceof HTMLElement)) {\n            continue;\n        }\n\n        // Ignore kit chrome that happens to reuse `.modal` inside a dialog.\n        if (node.closest('pk-dialog')) {\n            continue;\n        }\n\n        if (isVisiblyShown(node)) {\n            return true;\n        }\n    }\n\n    return false;\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 } = {},\n): CraftHostModalObserver {\n    const doc = options.getDocument?.() ?? document;\n    const root = options.root ?? doc.body;\n    let lastOpen = isCraftHostModalOpen(doc);\n\n    const emit = () => {\n        const next = isCraftHostModalOpen(doc);\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        :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 'lit/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, isCraftHostModalOpen, 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    @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        unlockBodyScrolling(this);\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            lockBodyScrolling(this);\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        unlockBodyScrolling(this);\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        unlockBodyScrolling(this);\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);\n        // Craft modal may already be open when this dialog mounts (rare).\n        this.onHostModalPresenceChange(isCraftHostModalOpen());\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        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 chrome 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-dropdown-item-BFyjtsL5.js

@@ -0,0 +1,547 @@
+import { n as PkElement, t as __decorate } from "./decorate-W02hmVTt.js";
+import { t as HasSlotController } from "./has-slot-8BvCt_qo.js";
+import { n as renderIconHtml } from "./render-Dvc3MHQR.js";
+import { i as waitForPopupReposition, r as syncPopupPlacementAnimation } from "./popup-placement-animation-WlEXnS85.js";
+import { t as popupContentAnimationStyles } from "./popup-content-animation.styles-Dc6d9quJ.js";
+import { css, html, nothing } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { unsafeSVG } from "lit/directives/unsafe-svg.js";
+import { check, chevronRight } from "@verbb/plugin-kit-icons";
+//#region src/components/dropdown-menu/dropdown-menu-size.styles.ts
+var dropdownMenuSizeTokens = {
+	default: css`
+        --pk-dropdown-item-padding-block: 8px;
+        --pk-dropdown-item-padding-inline: 12px;
+        --pk-dropdown-item-gap: 0.625rem;
+        --pk-dropdown-item-font-size: var(--pk-font-size-base);
+        --pk-dropdown-item-icon-size: 12px;
+        --pk-dropdown-label-padding-inline: 12px;
+        --pk-dropdown-label-font-size: 13px;
+        --pk-dropdown-details-font-size: var(--pk-font-size-sm);
+    `,
+	xs: css`
+        --pk-dropdown-item-padding-block: 3px;
+        --pk-dropdown-item-padding-inline: 8px;
+        --pk-dropdown-item-gap: 0.375rem;
+        --pk-dropdown-item-font-size: 12px;
+        --pk-dropdown-item-icon-size: 10px;
+        --pk-dropdown-label-padding-inline: 8px;
+        --pk-dropdown-label-font-size: 11px;
+        --pk-dropdown-details-font-size: 11px;
+    `,
+	sm: css`
+        --pk-dropdown-item-padding-block: 4px;
+        --pk-dropdown-item-padding-inline: 10px;
+        --pk-dropdown-item-gap: 0.4375rem;
+        --pk-dropdown-item-font-size: 13px;
+        --pk-dropdown-item-icon-size: 12px;
+        --pk-dropdown-label-padding-inline: 10px;
+        --pk-dropdown-label-font-size: 11px;
+        --pk-dropdown-details-font-size: 12px;
+    `,
+	lg: css`
+        --pk-dropdown-item-padding-block: 10px;
+        --pk-dropdown-item-padding-inline: 14px;
+        --pk-dropdown-item-gap: 0.75rem;
+        --pk-dropdown-item-font-size: 16px;
+        --pk-dropdown-item-icon-size: 14px;
+        --pk-dropdown-label-padding-inline: 14px;
+        --pk-dropdown-label-font-size: 14px;
+        --pk-dropdown-details-font-size: var(--pk-font-size-sm);
+    `,
+	xl: css`
+        --pk-dropdown-item-padding-block: 12px;
+        --pk-dropdown-item-padding-inline: 16px;
+        --pk-dropdown-item-gap: 0.75rem;
+        --pk-dropdown-item-font-size: 18px;
+        --pk-dropdown-item-icon-size: 16px;
+        --pk-dropdown-label-padding-inline: 16px;
+        --pk-dropdown-label-font-size: 15px;
+        --pk-dropdown-details-font-size: var(--pk-font-size-base);
+    `
+};
+/** Size tokens on `pk-dropdown-menu` — cascades to light-DOM menu children. */
+var dropdownMenuHostSizeStyles = css`
+    @layer pk-component {
+        :host {
+            ${dropdownMenuSizeTokens.default}
+        }
+
+        :host([size='xs']) {
+            ${dropdownMenuSizeTokens.xs}
+        }
+
+        :host([size='sm']) {
+            ${dropdownMenuSizeTokens.sm}
+        }
+
+        :host([size='lg']) {
+            ${dropdownMenuSizeTokens.lg}
+        }
+
+        :host([size='xl']) {
+            ${dropdownMenuSizeTokens.xl}
+        }
+    }
+`;
+/**
+* Size tokens on popup panels.
+* Do not include bare `:host` here; importing this in `pk-dropdown-item`
+* would reset every item back to the default size.
+*/
+var dropdownMenuPanelSizeStyles = css`
+    @layer pk-component {
+        .panel[data-size='default'],
+        .submenu-panel[data-size='default'] {
+            ${dropdownMenuSizeTokens.default}
+        }
+
+        .panel[data-size='xs'],
+        .submenu-panel[data-size='xs'] {
+            ${dropdownMenuSizeTokens.xs}
+        }
+
+        .panel[data-size='sm'],
+        .submenu-panel[data-size='sm'] {
+            ${dropdownMenuSizeTokens.sm}
+        }
+
+        .panel[data-size='lg'],
+        .submenu-panel[data-size='lg'] {
+            ${dropdownMenuSizeTokens.lg}
+        }
+
+        .panel[data-size='xl'],
+        .submenu-panel[data-size='xl'] {
+            ${dropdownMenuSizeTokens.xl}
+        }
+    }
+`;
+css`
+    ${dropdownMenuHostSizeStyles}
+    ${dropdownMenuPanelSizeStyles}
+`;
+//#endregion
+//#region src/components/dropdown-menu/pk-dropdown-item.styles.ts
+var pkDropdownItemStyles = [
+	popupContentAnimationStyles,
+	dropdownMenuPanelSizeStyles,
+	css`
+    @layer pk-component {
+        :host {
+            display: block;
+            position: relative;
+        }
+
+        .item {
+            display: flex;
+            align-items: center;
+            gap: var(--pk-dropdown-item-gap, 0.625rem);
+            width: 100%;
+            margin: 0;
+            padding: var(--pk-dropdown-item-padding-block, 8px) var(--pk-dropdown-item-padding-inline, 12px);
+            border: 0;
+            background: transparent;
+            color: inherit;
+            font: inherit;
+            font-size: var(--pk-dropdown-item-font-size, var(--pk-font-size-base));
+            font-weight: normal;
+            text-align: left;
+            white-space: nowrap;
+            cursor: default;
+            user-select: none;
+            outline: none;
+            box-sizing: border-box;
+        }
+
+        .item:hover:not([disabled]):not([aria-disabled='true']),
+        :host([data-highlighted]) .item,
+        :host([submenu-open]) .item {
+            background: var(--pk-color-slate-100);
+        }
+
+        .item:focus-visible {
+            background: var(--pk-color-slate-100);
+        }
+
+        .item[aria-disabled='true'] {
+            pointer-events: none;
+            opacity: 0.5;
+        }
+
+        .label {
+            flex: 1 1 auto;
+            min-width: 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .prefix {
+            display: inline-flex;
+            flex: 0 0 auto;
+            align-items: center;
+            justify-content: center;
+            width: var(--pk-dropdown-item-icon-size, 12px);
+            height: var(--pk-dropdown-item-icon-size, 12px);
+            line-height: 0;
+        }
+
+        .prefix--empty {
+            display: none;
+        }
+
+        .prefix ::slotted(*) {
+            display: inline-flex;
+            flex: 0 0 auto;
+            align-items: center;
+            justify-content: center;
+            width: var(--pk-dropdown-item-icon-size, 12px);
+            height: var(--pk-dropdown-item-icon-size, 12px);
+            /* Kill pk-icon text-baseline nudge inside the padded flex row. */
+            vertical-align: 0;
+        }
+
+        .prefix ::slotted(svg),
+        .prefix ::slotted(*) svg,
+        .prefix ::slotted(.pk-dropdown-item__prefix-icon) {
+            display: block;
+            width: var(--pk-dropdown-item-icon-size, 12px) !important;
+            height: var(--pk-dropdown-item-icon-size, 12px) !important;
+            max-width: var(--pk-dropdown-item-icon-size, 12px);
+            max-height: var(--pk-dropdown-item-icon-size, 12px);
+            flex-shrink: 0;
+            pointer-events: none;
+        }
+
+        .details {
+            margin-left: auto;
+            color: var(--pk-color-gray-500);
+            font-size: var(--pk-dropdown-details-font-size, var(--pk-font-size-sm));
+            letter-spacing: 0.04em;
+        }
+
+        .details:empty {
+            display: none;
+        }
+
+        .check {
+            display: inline-flex;
+            flex: 0 0 auto;
+            align-items: center;
+            justify-content: center;
+            width: 12px;
+            height: 12px;
+            color: var(--pk-color-gray-700);
+        }
+
+        .check svg {
+            display: block;
+            width: 12px;
+            height: 12px;
+            flex-shrink: 0;
+            pointer-events: none;
+        }
+
+        .submenu-icon {
+            display: inline-flex;
+            flex: 0 0 auto;
+            align-items: center;
+            justify-content: center;
+            width: 1rem;
+            color: var(--pk-color-gray-700);
+        }
+
+        .submenu-icon svg {
+            display: block;
+            width: 1em;
+            height: 1em;
+            flex-shrink: 0;
+            pointer-events: none;
+        }
+
+        .check {
+            opacity: 0;
+        }
+
+        :host([checked]) .check {
+            opacity: 1;
+        }
+
+        :host([type='checkbox']) .check,
+        :host([type='radio']) .check {
+            margin-left: auto;
+        }
+
+        :host([type='checkbox'][checked]) .check,
+        :host([type='radio'][checked]) .check {
+            opacity: 1;
+        }
+
+        .submenu-icon:empty {
+            display: none;
+        }
+
+        :host([destructive]) .item {
+            color: var(--pk-color-error);
+        }
+
+        :host([destructive]) .item:hover:not([disabled]):not([aria-disabled='true']),
+        :host([destructive]) .item:focus-visible {
+            color: var(--pk-color-error);
+        }
+
+        .submenu-panel {
+            width: max-content;
+            min-width: 8rem;
+            overflow: hidden;
+            padding: 4px 0;
+            border-radius: var(--pk-radius-md);
+            background: var(--pk-color-white);
+            box-shadow: var(--pk-shadow-popup);
+            /* Match root menu panel — Craft body text, not gray-900. */
+            color: var(--text-color, var(--pk-color-gray-700));
+        }
+
+        .submenu-panel ::slotted(pk-dropdown-item),
+        .submenu-panel ::slotted(pk-dropdown-separator),
+        .submenu-panel ::slotted(pk-dropdown-label) {
+            display: block;
+        }
+
+        .submenu-panel[hidden] {
+            display: none !important;
+        }
+    }
+`
+];
+//#endregion
+//#region src/components/dropdown-menu/pk-dropdown-item.ts
+var _PkDropdownItem;
+var CHECK_ICON = renderIconHtml(check);
+var SUBMENU_ICON = renderIconHtml(chevronRight);
+var PkDropdownItem = class PkDropdownItem extends PkElement {
+	static {
+		_PkDropdownItem = this;
+	}
+	constructor(..._args) {
+		super(..._args);
+		this.value = "";
+		this.type = "normal";
+		this.radioGroup = "";
+		this.disabled = false;
+		this.destructive = false;
+		this.checked = false;
+		this.submenuOpen = false;
+		this.active = false;
+		this.submenuAnimated = false;
+		this.hasSlotController = new HasSlotController(this, "submenu", "details", "start", "prefix");
+		this.handleMouseEnter = () => {
+			if (!this.hasSubmenu() || this.disabled) return;
+			this.notifyParentOfOpening();
+			this.submenuOpen = true;
+		};
+		this.handleHostClick = (event) => {
+			if (this.disabled) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		};
+	}
+	static {
+		this.styles = pkDropdownItemStyles;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.syncRole();
+		this.syncSubmenuAria();
+		this.addEventListener("click", this.handleHostClick);
+		this.addEventListener("mouseenter", this.handleMouseEnter);
+	}
+	disconnectedCallback() {
+		this.removeEventListener("click", this.handleHostClick);
+		this.removeEventListener("mouseenter", this.handleMouseEnter);
+		this.closeSubmenu();
+		super.disconnectedCallback();
+	}
+	updated(changed) {
+		if (changed.has("type") || changed.has("checked")) this.syncRole();
+		if (changed.has("submenuOpen") || changed.size === 0) this.syncSubmenuAria();
+		if (changed.has("submenuOpen")) if (this.submenuOpen) this.ensureSubmenuSurface();
+		else this.submenuAnimated = false;
+	}
+	/** Light-DOM `slot="submenu"` — public for menu keyboard (`hasSubmenu`). */
+	hasSubmenu() {
+		return this.hasSlotController.test("submenu");
+	}
+	syncSubmenuAria() {
+		const hasSubmenu = this.hasSubmenu();
+		if (hasSubmenu) this.setAttribute("aria-haspopup", "menu");
+		else this.removeAttribute("aria-haspopup");
+		this.setAttribute("aria-expanded", hasSubmenu && this.submenuOpen ? "true" : "false");
+	}
+	focusControl() {
+		this.shadowRoot?.querySelector(".item")?.focus({ preventScroll: true });
+	}
+	/** Callers `item.focus()` — route into the shadow control button. */
+	focus(options) {
+		const button = this.shadowRoot?.querySelector(".item");
+		if (button) {
+			button.focus(options);
+			return;
+		}
+		super.focus(options);
+	}
+	/** Public for menu leave-detection (`submenuElement`). */
+	get submenuElement() {
+		return this.submenuPanelElement ?? null;
+	}
+	closeSubmenu() {
+		this.submenuAnimated = false;
+		this.submenuOpen = false;
+	}
+	/**
+	* Opens the nested submenu panel (mouse + keyboard).
+	* notify parent first so siblings close, then set `submenuOpen`.
+	*/
+	openSubmenu() {
+		if (!this.hasSubmenu() || this.disabled || !this.isConnected) return;
+		this.notifyParentOfOpening();
+		this.submenuOpen = true;
+	}
+	/** `notifyParentOfOpening` — sibling close + bubble to the menu. */
+	notifyParentOfOpening() {
+		this.dispatchEvent(new CustomEvent("pk-submenu-open", {
+			bubbles: true,
+			composed: true,
+			detail: { item: this }
+		}));
+		const parent = this.parentElement;
+		if (!parent) return;
+		for (const el of parent.children) if (el !== this && el instanceof _PkDropdownItem && el.getAttribute("slot") === this.getAttribute("slot") && el.submenuOpen) el.submenuOpen = false;
+	}
+	ensureSubmenuSurface() {
+		if (!this.hasSubmenu() || this.disabled) return;
+		this.submenuAnimated = true;
+		this.updateComplete.then(() => {
+			if (!this.submenuOpen || !this.submenuPanelElement) return;
+			this.submenuPanelElement.hidden = false;
+			syncPopupPlacementAnimation(this.submenuPanelElement, "right-start");
+			waitForPopupReposition(this.submenuPopupElement, "right-start").then((placement) => {
+				syncPopupPlacementAnimation(this.submenuPanelElement, placement);
+			});
+		});
+	}
+	syncRole() {
+		if (this.type === "checkbox") {
+			this.setAttribute("role", "menuitemcheckbox");
+			this.setAttribute("aria-checked", this.checked ? "true" : "false");
+			return;
+		}
+		if (this.type === "radio") {
+			this.setAttribute("role", "menuitemradio");
+			this.setAttribute("aria-checked", this.checked ? "true" : "false");
+			return;
+		}
+		this.setAttribute("role", "menuitem");
+		this.removeAttribute("aria-checked");
+	}
+	handleClick(event) {
+		if (this.disabled) {
+			event.preventDefault();
+			event.stopImmediatePropagation();
+			return;
+		}
+		if (this.hasSubmenu()) {
+			event.preventDefault();
+			this.openSubmenu();
+		}
+	}
+	render() {
+		const hasSubmenu = this.hasSubmenu();
+		const showCheck = this.type === "checkbox" || this.type === "radio";
+		const hasLeadingIcon = this.hasSlotController.test("start") || this.hasSlotController.test("prefix");
+		return html`
+            <button
+                part="item"
+                type="button"
+                class="item"
+                ?disabled=${this.disabled}
+                aria-disabled=${this.disabled ? "true" : nothing}
+                @click=${this.handleClick}
+            >
+                <span
+                    part="prefix"
+                    class=${hasLeadingIcon ? "prefix" : "prefix prefix--empty"}
+                >
+                    <slot name="start"></slot>
+                    <slot name="prefix"></slot>
+                </span>
+                <span class="label"><slot></slot></span>
+                <span class="details"><slot name="details"></slot></span>
+                ${showCheck ? html`<span class="check" aria-hidden="true">${unsafeSVG(CHECK_ICON)}</span>` : nothing}
+                ${hasSubmenu ? html`<span class="submenu-icon" aria-hidden="true">${unsafeSVG(SUBMENU_ICON)}</span>` : nothing}
+            </button>
+            ${hasSubmenu ? html`
+                <pk-popup
+                    .active=${this.submenuOpen}
+                    .anchor=${this}
+                    placement="right-start"
+                    .distance=${0}
+                    .skidding=${-4}
+                    flip
+                    shift
+                    hover-bridge
+                    style="--pk-popup-z-index: 1001"
+                >
+                    <div
+                        part="submenu"
+                        class="submenu-panel pk-popup-content"
+                        role="menu"
+                        data-size=${resolveMenuSize(this)}
+                        ?hidden=${!this.submenuOpen}
+                        data-open=${this.submenuAnimated ? "" : nothing}
+                        aria-orientation="vertical"
+                    >
+                        <slot name="submenu"></slot>
+                    </div>
+                </pk-popup>
+            ` : nothing}
+        `;
+	}
+};
+__decorate([property()], PkDropdownItem.prototype, "value", void 0);
+__decorate([property({ reflect: true })], PkDropdownItem.prototype, "type", void 0);
+__decorate([property({ attribute: "radio-group" })], PkDropdownItem.prototype, "radioGroup", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], PkDropdownItem.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], PkDropdownItem.prototype, "destructive", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], PkDropdownItem.prototype, "checked", void 0);
+__decorate([property({
+	attribute: "submenu-open",
+	type: Boolean,
+	reflect: true
+})], PkDropdownItem.prototype, "submenuOpen", void 0);
+__decorate([property({ type: Boolean })], PkDropdownItem.prototype, "active", void 0);
+__decorate([state()], PkDropdownItem.prototype, "submenuAnimated", void 0);
+__decorate([query(".submenu-panel")], PkDropdownItem.prototype, "submenuPanelElement", void 0);
+__decorate([query("pk-popup")], PkDropdownItem.prototype, "submenuPopupElement", void 0);
+PkDropdownItem = _PkDropdownItem = __decorate([customElement("pk-dropdown-item")], PkDropdownItem);
+function resolveMenuSize(item) {
+	const panelSize = item.parentElement?.getAttribute("data-size");
+	if (panelSize === "xs" || panelSize === "sm" || panelSize === "default" || panelSize === "lg" || panelSize === "xl") return panelSize;
+	const menuSize = item.closest("pk-dropdown-menu")?.getAttribute("size");
+	if (menuSize === "xs" || menuSize === "sm" || menuSize === "lg" || menuSize === "xl") return menuSize;
+	return "default";
+}
+//#endregion
+export { dropdownMenuHostSizeStyles as n, dropdownMenuPanelSizeStyles as r, PkDropdownItem as t };
+
+//# sourceMappingURL=pk-dropdown-item-BFyjtsL5.js.map