npm - @verbb/plugin-kit-web - Versions diffs - 2.0.6 → 2.0.8 - Mend

@verbb/plugin-kit-web 2.0.6 → 2.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (83) hide show

package/dist/chunks/{pk-dialog-DZZd1Tzb.js → pk-dialog-BXJr3iEo.js} RENAMED Viewed

@@ -2,7 +2,7 @@ import { t as icons_exports } from "./icons-BR8JcQj2.js";
 import { n as PkElement, t as __decorate } from "./decorate-W02hmVTt.js";
 import { n as renderIconHtml } from "./render-Dvc3MHQR.js";
 import { i as unregisterDismissible, n as isTopDismissible, r as registerDismissible } from "./dismissible-stack-XQUMfKO3.js";
-import { a as unlockBodyScrolling, r as lockBodyScrolling } from "./scroll-lock-B4o9vdzJ.js";
+import { a as unlockBodyScrolling, r as lockBodyScrolling } from "./scroll-lock-Bbh3Sc5g.js";
 import { i as PkShowEvent, n as PkAfterShowEvent, r as PkHideEvent, t as PkAfterHideEvent } from "./overlay-lifecycle-D0pkTQyI.js";
 import { t as animateWithClass } from "./animate-with-class-CsDwYnXL.js";
 import { css, html, nothing } from "lit";
@@ -83,6 +83,11 @@ var pkDialogStyles = css`
          * Controlled dialogs (no slot="trigger") — panel is top-layer / fixed while
          * yielding. An inline-block host still sizes to the open <dialog> box in some
          * engines and expands parents (Formie nested field cards grow a blank gap).
+         *
+         * Zero box ≠ gone from the tree: Tailwind space-y-* uses :not(:last-child) on
+         * DOM siblings, so an in-tree host still steals last-child and margins the
+         * previous sibling. Prefer flex/grid gap-* (skips out-of-flow children), or
+         * mount overlays outside the spaced stack. True light-DOM portal would also fix it.
          */
         :host(:not([data-has-trigger])) {
             position: absolute;
@@ -319,6 +324,7 @@ var PkDialog = class PkDialog extends PkElement {
 		this.disablePointerDismissal = false;
 		this.withoutHeader = false;
 		this.withoutBodyPadding = false;
+		this.disableScrollLock = false;
 		this.size = "default";
 		this.triggerElement = null;
 		this.previouslyFocused = null;
@@ -433,7 +439,7 @@ var PkDialog = class PkDialog extends PkElement {
 		if (this.open) this.show();
 	}
 	disconnectedCallback() {
-		unlockBodyScrolling(this);
+		if (!this.disableScrollLock) unlockBodyScrolling(this);
 		this.removeOpenListeners();
 		super.disconnectedCallback();
 	}
@@ -464,7 +470,7 @@ var PkDialog = class PkDialog extends PkElement {
 			this.previouslyFocused = document.activeElement;
 			this.open = true;
 			this.dialogElement.showModal();
-			lockBodyScrolling(this);
+			if (!this.disableScrollLock) lockBodyScrolling(this);
 			requestAnimationFrame(() => {
 				const elementToFocus = this.querySelector("[autofocus]");
 				if (elementToFocus) {
@@ -502,7 +508,7 @@ var PkDialog = class PkDialog extends PkElement {
 		await animateWithClass(this.dialogElement, "hide");
 		this.open = false;
 		this.dialogElement.close();
-		unlockBodyScrolling(this);
+		if (!this.disableScrollLock) unlockBodyScrolling(this);
 		const restoreFocus = this.previouslyFocused;
 		this.previouslyFocused = null;
 		if (restoreFocus?.isConnected) window.setTimeout(() => {
@@ -525,7 +531,7 @@ var PkDialog = class PkDialog extends PkElement {
 			this.dialogElement.close();
 		} catch {}
 		this.dialogElement?.classList.remove("hide", "show", "pulse");
-		unlockBodyScrolling(this);
+		if (!this.disableScrollLock) unlockBodyScrolling(this);
 	}
 	addOpenListeners() {
 		document.addEventListener("keydown", this.handleDocumentKeyDown);
@@ -626,6 +632,11 @@ __decorate([property({
 	type: Boolean,
 	reflect: true
 })], PkDialog.prototype, "withoutBodyPadding", void 0);
+__decorate([property({
+	attribute: "disable-scroll-lock",
+	type: Boolean,
+	reflect: true
+})], PkDialog.prototype, "disableScrollLock", void 0);
 __decorate([property({ reflect: true })], PkDialog.prototype, "size", void 0);
 __decorate([query("dialog")], PkDialog.prototype, "dialogElement", void 0);
 __decorate([state()], PkDialog.prototype, "triggerElement", void 0);
@@ -633,4 +644,4 @@ PkDialog = __decorate([customElement("pk-dialog")], PkDialog);
 //#endregion
 export { PkDialog as t };
-//# sourceMappingURL=pk-dialog-DZZd1Tzb.js.map
+//# sourceMappingURL=pk-dialog-BXJr3iEo.js.map

package/dist/chunks/pk-dialog-BXJr3iEo.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"pk-dialog-BXJr3iEo.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 * 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 '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 /**\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);\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-editable-table-DVqOEz3W.js → pk-editable-table-sZO9JwiR.js} RENAMED Viewed

@@ -4,7 +4,7 @@ import { t as PkFormAssociatedElement } from "./pk-form-associated-element-DmZKg
 import { t as RequiredValidator } from "./required-validator-CEg8dvjS.js";
 import "./pk-checkbox-Bavq3-9C.js";
 import { n as renderIconHtml } from "./render-Dvc3MHQR.js";
-import "./pk-combobox-DtkXaX67.js";
+import "./pk-combobox-BqaSsLJb.js";
 import "./pk-input-naIRPWGC.js";
 import "./pk-textarea-BEapC8Rk.js";
 import "./pk-lightswitch-B-rLflNq.js";
@@ -13,8 +13,8 @@ import "./pk-dropdown-menu-CsX95MCP.js";
 import "./pk-color-input-CNnmHJJB.js";
 import "./pk-date-picker-x-qkpQWF.js";
 import "./pk-option-C-cR-jOv.js";
-import "./pk-select-odSNU1tN.js";
-import "./pk-time-picker-DtX0LtID.js";
+import "./pk-select-BPnO9qgj.js";
+import "./pk-time-picker-CZGr2dI2.js";
 import { css, html, nothing } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { customElement, property, state } from "lit/decorators.js";
@@ -1538,4 +1538,4 @@ PkEditableTable = __decorate([customElement("pk-editable-table")], PkEditableTab
 //#endregion
 export { nextRowId as a, isCustomColumn as i, BUILTIN_COLUMN_TYPES as n, getCustomCellSlotName as r, PkEditableTable as t };
-//# sourceMappingURL=pk-editable-table-DVqOEz3W.js.map
+//# sourceMappingURL=pk-editable-table-sZO9JwiR.js.map