npm - @verbb/plugin-kit-web - Versions diffs - 2.0.16 → 2.0.17 - Mend

@verbb/plugin-kit-web 2.0.16 → 2.0.17

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 (155) hide show

package/dist/chunks/pk-copy-button-BVaOLtYG.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pk-copy-button-BVaOLtYG.js","names":[],"sources":["../../src/events/pk-copy.ts","../../src/utils/copy-to-clipboard.ts","../../src/components/copy-button/pk-copy-button.styles.ts","../../src/components/copy-button/pk-copy-button.ts"],"sourcesContent":["/** Emitted when copy-button successfully copies text. /\nexport class PkCopyEvent extends Event {\n readonly detail: { value: string };\n\n constructor(value: string) {\n super('pk-copy', { bubbles: true, cancelable: false, composed: true });\n this.detail = { value };\n }\n}\n\n/* Emitted when copy-button fails to copy text. /\nexport class PkCopyErrorEvent extends Event {\n constructor() {\n super('pk-copy-error', { bubbles: true, cancelable: false, composed: true });\n }\n}\n\ndeclare global {\n interface GlobalEventHandlersEventMap {\n 'pk-copy': PkCopyEvent;\n 'pk-copy-error': PkCopyErrorEvent;\n }\n}\n","/* Writes text to the clipboard — requires a secure context in most browsers. /\nexport async function copyToClipboard(value: string): Promise<void> {\n await navigator.clipboard.writeText(value);\n}\n\n/* Resolves the string to copy from a `from` selector (from selector). /\nexport function resolveCopyValue(\n root: Document \| ShadowRoot,\n from: string,\n fallbackValue: string,\n): string \| null {\n if (!from) {\n return fallbackValue \|\| null;\n }\n\n const isProperty = from.includes('.');\n const isAttribute = from.includes('[') && from.includes(']');\n let id = from;\n let field = '';\n\n if (isProperty) {\n [id, field] = from.trim().split('.');\n } else if (isAttribute) {\n [id, field] = from.trim().replace(/\\]$/, '').split('[');\n }\n\n const target = 'getElementById' in root ? root.getElementById(id) : null;\n\n if (!target) {\n return null;\n }\n\n if (isAttribute) {\n return target.getAttribute(field) ?? '';\n }\n\n if (isProperty) {\n const record = target as unknown as Record<string, unknown>;\n const propertyValue = record[field];\n return propertyValue == null ? '' : String(propertyValue);\n }\n\n return target.textContent ?? '';\n}\n","import { css } from 'lit';\n\nexport const pkCopyButtonStyles = css`\n @layer pk-component {\n :host {\n display: inline-block;\n }\n\n / Match React CopyButton size=\"icon\" — square, no horizontal padding. /\n pk-button::part(base) {\n padding-inline: 0;\n width: var(--pk-btn-height-default);\n min-width: var(--pk-btn-height-default);\n }\n\n /\n * In-control trailing action (slot=end on pk-input, etc.): same family as\n * combobox expand/clear and image-browser clear — flex-reserved hit box\n * flush to the field edge, glyph sized via --pk-input-decoration-size.\n /\n :host([slot='end']) {\n display: inline-flex;\n align-self: stretch;\n height: auto;\n / size=none buttons resolve --pk-btn-icon-size: 1em against this. /\n font-size: var(--pk-input-decoration-size, 0.75rem);\n }\n\n :host([slot='end']) pk-button {\n display: flex;\n height: 100%;\n }\n\n :host([slot='end']) pk-button::part(base) {\n box-sizing: border-box;\n width: calc(\n var(--pk-input-decoration-size, 0.75rem) + var(--pk-input-padding-inline, 8px)\n );\n min-width: calc(\n var(--pk-input-decoration-size, 0.75rem) + var(--pk-input-padding-inline, 8px)\n );\n height: 100%;\n min-height: 100%;\n padding: 0;\n border-width: 0;\n border-radius: 0;\n background: transparent;\n color: var(--pk-color-gray-600);\n }\n\n :host([slot='end']) pk-button::part(base):hover:not(:disabled) {\n color: var(--pk-color-gray-800);\n }\n }\n`;\n","import { html } from 'lit';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { customElement, property, state } from '../../decorators.js';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { PkCopyErrorEvent, PkCopyEvent } from '../../events/pk-copy.js';\nimport { check, renderIconHtml } from '../../icons/index.js';\nimport { copyToClipboard, resolveCopyValue } from '../../utils/copy-to-clipboard.js';\nimport type { PkButtonVariant } from '../button/pk-button.js';\nimport '../button/pk-button.js';\nimport { pkCopyButtonStyles } from './pk-copy-button.styles.js';\n\nconst SUCCESS_ICON = renderIconHtml(check).replace(\n '<svg',\n '<svg slot=\"start\" part=\"success-icon\"',\n);\n\nconst COPIED_RESET_MS = 2000;\n\n/\n Copy button — copies text to the clipboard and briefly shows a check icon.\n \n Place in `slot=\"end\"` on `<pk-input>` (or another control with an end adornment)\n * for in-control chrome that matches combobox / image-browser trailing actions.\n \n @slot icon - Copy icon (SVG supplied by the consumer)\n \n @event pk-copy - Emitted when text is copied successfully\n * @event pk-copy-error - Emitted when copying fails\n \n @csspart button - Trigger button\n * @csspart success-icon - Success icon shown after copying\n /\n@customElement('pk-copy-button')\nexport class PkCopyButton extends PkElement {\n static override styles = pkCopyButtonStyles;\n\n @property()\n value = '';\n\n /\n Element id to copy from — `from=\"el[attr]\"` or `from=\"el.value\"`.\n * Takes precedence over `value` when set.\n */\n @property()\n from = '';\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n @property({ reflect: true })\n variant: PkButtonVariant = 'transparent';\n\n @state()\n private copied = false;\n\n private resetTimer?: number;\n\n override disconnectedCallback(): void {\n window.clearTimeout(this.resetTimer);\n super.disconnectedCallback();\n }\n\n private resetCopied = (): void => {\n this.copied = false;\n };\n\n private scheduleReset(): void {\n window.clearTimeout(this.resetTimer);\n this.resetTimer = window.setTimeout(this.resetCopied, COPIED_RESET_MS);\n }\n\n private async handleCopy(): Promise<void> {\n if (this.disabled) {\n return;\n }\n\n const root = this.getRootNode() as Document \| ShadowRoot;\n const valueToCopy = resolveCopyValue(root, this.from, this.value);\n\n if (valueToCopy == null \|\| valueToCopy === '') {\n this.dispatchEvent(new PkCopyErrorEvent());\n return;\n }\n\n try {\n await copyToClipboard(valueToCopy);\n this.copied = true;\n this.scheduleReset();\n this.dispatchEvent(new PkCopyEvent(valueToCopy));\n } catch {\n this.dispatchEvent(new PkCopyErrorEvent());\n }\n }\n\n override render() {\n // slot=end → in-control chrome (pk-input end adornment); padless glyph button.\n const inControl = this.getAttribute('slot') === 'end';\n\n return html`\n <pk-button\n part=\"button\"\n variant=${inControl ? 'none' : this.variant}\n size=${inControl ? 'none' : 'default'}\n ?icon=${inControl}\n aria-label=\"Copy\"\n ?disabled=${this.disabled}\n @click=${this.handleCopy}\n >\n ${this.copied\n ? unsafeHTML(SUCCESS_ICON)\n : html`<slot name=\"icon\" slot=\"start\"></slot>`}\n </pk-button>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-copy-button': PkCopyButton;\n }\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"pk-copy-button-BVaOLtYG.js","names":[],"sources":["../../src/events/pk-copy.ts","../../src/utils/copy-to-clipboard.ts","../../src/components/copy-button/pk-copy-button.styles.ts","../../src/components/copy-button/pk-copy-button.ts"],"sourcesContent":["/** Emitted when copy-button successfully copies text. /\nexport class PkCopyEvent extends Event {\n readonly detail: { value: string };\n\n constructor(value: string) {\n super('pk-copy', { bubbles: true, cancelable: false, composed: true });\n this.detail = { value };\n }\n}\n\n/* Emitted when copy-button fails to copy text. /\nexport class PkCopyErrorEvent extends Event {\n constructor() {\n super('pk-copy-error', { bubbles: true, cancelable: false, composed: true });\n }\n}\n\ndeclare global {\n interface GlobalEventHandlersEventMap {\n 'pk-copy': PkCopyEvent;\n 'pk-copy-error': PkCopyErrorEvent;\n }\n}\n","/* Writes text to the clipboard — requires a secure context in most browsers. /\nexport async function copyToClipboard(value: string): Promise<void> {\n await navigator.clipboard.writeText(value);\n}\n\n/* Resolves the string to copy from a `from` selector (from selector). /\nexport function resolveCopyValue(\n root: Document \| ShadowRoot,\n from: string,\n fallbackValue: string,\n): string \| null {\n if (!from) {\n return fallbackValue \|\| null;\n }\n\n const isProperty = from.includes('.');\n const isAttribute = from.includes('[') && from.includes(']');\n let id = from;\n let field = '';\n\n if (isProperty) {\n [id, field] = from.trim().split('.');\n } else if (isAttribute) {\n [id, field] = from.trim().replace(/\\]$/, '').split('[');\n }\n\n const target = 'getElementById' in root ? root.getElementById(id) : null;\n\n if (!target) {\n return null;\n }\n\n if (isAttribute) {\n return target.getAttribute(field) ?? '';\n }\n\n if (isProperty) {\n const record = target as unknown as Record<string, unknown>;\n const propertyValue = record[field];\n return propertyValue == null ? '' : String(propertyValue);\n }\n\n return target.textContent ?? '';\n}\n","import { css } from 'lit';\n\nexport const pkCopyButtonStyles = css`\n @layer pk-component {\n :host {\n display: inline-block;\n }\n\n / Match React CopyButton size=\"icon\" — square, no horizontal padding. /\n pk-button::part(base) {\n padding-inline: 0;\n width: var(--pk-btn-height-default);\n min-width: var(--pk-btn-height-default);\n }\n\n /\n * In-control trailing action (slot=end on pk-input, etc.): same family as\n * combobox expand/clear and image-browser clear — flex-reserved hit box\n * flush to the field edge, glyph sized via --pk-input-decoration-size.\n /\n :host([slot='end']) {\n display: inline-flex;\n align-self: stretch;\n height: auto;\n / size=none buttons resolve --pk-btn-icon-size: 1em against this. /\n font-size: var(--pk-input-decoration-size, 0.75rem);\n }\n\n :host([slot='end']) pk-button {\n display: flex;\n height: 100%;\n }\n\n :host([slot='end']) pk-button::part(base) {\n box-sizing: border-box;\n width: calc(\n var(--pk-input-decoration-size, 0.75rem) + var(--pk-input-padding-inline, 8px)\n );\n min-width: calc(\n var(--pk-input-decoration-size, 0.75rem) + var(--pk-input-padding-inline, 8px)\n );\n height: 100%;\n min-height: 100%;\n padding: 0;\n border-width: 0;\n border-radius: 0;\n background: transparent;\n color: var(--pk-color-gray-600);\n }\n\n :host([slot='end']) pk-button::part(base):hover:not(:disabled) {\n color: var(--pk-color-gray-800);\n }\n }\n`;\n","import { html } from 'lit';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { customElement, property, state } from '../../decorators.js';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { PkCopyErrorEvent, PkCopyEvent } from '../../events/pk-copy.js';\nimport { check, renderIconHtml } from '../../icons/index.js';\nimport { copyToClipboard, resolveCopyValue } from '../../utils/copy-to-clipboard.js';\nimport type { PkButtonVariant } from '../button/pk-button.js';\nimport '../button/pk-button.js';\nimport { pkCopyButtonStyles } from './pk-copy-button.styles.js';\n\nconst SUCCESS_ICON = renderIconHtml(check).replace(\n '<svg',\n '<svg slot=\"start\" part=\"success-icon\"',\n);\n\nconst COPIED_RESET_MS = 2000;\n\n/\n Copy button — copies text to the clipboard and briefly shows a check icon.\n \n Place in `slot=\"end\"` on `<pk-input>` (or another control with an end adornment)\n * for an in-control treatment that matches combobox / image-browser trailing actions.\n \n @slot icon - Copy icon (SVG supplied by the consumer)\n \n @event pk-copy - Emitted when text is copied successfully\n * @event pk-copy-error - Emitted when copying fails\n \n @csspart button - Trigger button\n * @csspart success-icon - Success icon shown after copying\n /\n@customElement('pk-copy-button')\nexport class PkCopyButton extends PkElement {\n static override styles = pkCopyButtonStyles;\n\n @property()\n value = '';\n\n /\n Element id to copy from — `from=\"el[attr]\"` or `from=\"el.value\"`.\n * Takes precedence over `value` when set.\n */\n @property()\n from = '';\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n @property({ reflect: true })\n variant: PkButtonVariant = 'transparent';\n\n @state()\n private copied = false;\n\n private resetTimer?: number;\n\n override disconnectedCallback(): void {\n window.clearTimeout(this.resetTimer);\n super.disconnectedCallback();\n }\n\n private resetCopied = (): void => {\n this.copied = false;\n };\n\n private scheduleReset(): void {\n window.clearTimeout(this.resetTimer);\n this.resetTimer = window.setTimeout(this.resetCopied, COPIED_RESET_MS);\n }\n\n private async handleCopy(): Promise<void> {\n if (this.disabled) {\n return;\n }\n\n const root = this.getRootNode() as Document \| ShadowRoot;\n const valueToCopy = resolveCopyValue(root, this.from, this.value);\n\n if (valueToCopy == null \|\| valueToCopy === '') {\n this.dispatchEvent(new PkCopyErrorEvent());\n return;\n }\n\n try {\n await copyToClipboard(valueToCopy);\n this.copied = true;\n this.scheduleReset();\n this.dispatchEvent(new PkCopyEvent(valueToCopy));\n } catch {\n this.dispatchEvent(new PkCopyErrorEvent());\n }\n }\n\n override render() {\n // slot=end → in-control chrome (pk-input end adornment); padless glyph button.\n const inControl = this.getAttribute('slot') === 'end';\n\n return html`\n <pk-button\n part=\"button\"\n variant=${inControl ? 'none' : this.variant}\n size=${inControl ? 'none' : 'default'}\n ?icon=${inControl}\n aria-label=\"Copy\"\n ?disabled=${this.disabled}\n @click=${this.handleCopy}\n >\n ${this.copied\n ? unsafeHTML(SUCCESS_ICON)\n : html`<slot name=\"icon\" slot=\"start\"></slot>`}\n </pk-button>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-copy-button': PkCopyButton;\n }\n}\n"],"mappings":"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"}

package/dist/chunks/{pk-date-picker-DfIvmoZ1.js → pk-date-picker-BEAd4Ngl.js} RENAMED Viewed

@@ -11,7 +11,7 @@ import { i as uniqueId } from "./focus-aa5dlv8k.js";
 import { i as unregisterDismissible, n as isTopDismissible, r as registerDismissible } from "./dismissible-stack-XQUMfKO3.js";
 import { t as PkClearEvent } from "./pk-clear--mPWZP7H.js";
 import { i as PkShowEvent, n as PkAfterShowEvent, r as PkHideEvent, t as PkAfterHideEvent } from "./overlay-lifecycle-D0pkTQyI.js";
-import "./pk-popup-B9AgBC2V.js";
+import "./pk-popup-B65tZMQH.js";
 import { i as waitForPopupReposition } from "./popup-placement-animation-WlEXnS85.js";
 import { n as isPointerInsideOverlay } from "./popup-pointer-CuLjk1th.js";
 import { n as readLegacyInstructions } from "./field-labels-CmuAW8Cl.js";
@@ -734,4 +734,4 @@ PkDatePicker = __decorate([customElement("pk-date-picker")], PkDatePicker);
 //#endregion
 export { PkDatePicker as t };
-//# sourceMappingURL=pk-date-picker-DfIvmoZ1.js.map
+//# sourceMappingURL=pk-date-picker-BEAd4Ngl.js.map

package/dist/chunks/{pk-date-picker-DfIvmoZ1.js.map → pk-date-picker-BEAd4Ngl.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pk-date-picker-DfIvmoZ1.js","names":[],"sources":["../../src/utils/host-date.ts","../../src/components/date-picker/pk-date-picker.styles.ts","../../src/components/date-picker/pk-date-picker.ts"],"sourcesContent":["type CraftDateApi = {\n formatDate?: (date: Date) => string;\n locale?: string;\n};\n\nfunction getCraft(): CraftDateApi \| undefined {\n return (globalThis as typeof globalThis & { Craft?: CraftDateApi }).Craft;\n}\n\n/** Locale chain aligned with React `hostGetLocale` / Craft CP. /\nexport function resolveHostLocale(): string {\n return getCraft()?.locale \|\| document.documentElement.lang \|\| 'en-US';\n}\n\n/\n Display date in the host locale — mirrors React `hostFormatDate` → `Craft.formatDate`.\n * Falls back to numeric `Intl` when Craft is unavailable (e.g. playground).\n /\nexport function formatHostDate(date: Date, locale?: string): string {\n const craftFormat = getCraft()?.formatDate;\n\n if (typeof craftFormat === 'function') {\n try {\n return craftFormat(date);\n } catch {\n // fall through to Intl\n }\n }\n\n const resolved = locale \|\| resolveHostLocale();\n\n return new Intl.DateTimeFormat(resolved, {\n year: 'numeric',\n month: 'numeric',\n day: 'numeric',\n }).format(date);\n}\n","import { css } from 'lit';\n\nimport { iconStyles } from '../../base/icon.styles.js';\n\nexport const pkDatePickerStyles = css`\n ${iconStyles}\n @layer pk-component {\n :host {\n display: inline-block;\n position: relative;\n width: fit-content;\n max-width: 100%;\n color: var(--pk-color-gray-700);\n font-family: var(--pk-font-family);\n font-size: var(--pk-font-size-base);\n line-height: var(--pk-line-height);\n --pk-date-picker-height: 2.125rem;\n --pk-date-picker-min-width: 8.125rem;\n --pk-date-picker-padding-inline: 10px;\n --pk-date-picker-font-size: var(--pk-font-size-base);\n }\n\n :host([width='full']) {\n display: block;\n width: 100%;\n }\n\n :host([width='full']) .control {\n width: 100%;\n }\n\n .control {\n display: inline-flex;\n align-items: center;\n justify-content: flex-start;\n gap: 0.5rem;\n width: fit-content;\n min-width: var(--pk-date-picker-min-width);\n max-width: 100%;\n height: var(--pk-date-picker-height);\n min-height: var(--pk-date-picker-height);\n margin: 0;\n padding: 0 var(--pk-date-picker-padding-inline);\n border: 1px solid var(--pk-color-slate-400);\n border-radius: var(--pk-radius-lg);\n background: transparent;\n color: inherit;\n font: inherit;\n font-size: var(--pk-date-picker-font-size);\n font-weight: 400;\n line-height: 1.2;\n cursor: default;\n outline: none;\n box-sizing: border-box;\n transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;\n }\n\n .control[data-popup-open] {\n background: var(--pk-color-slate-150);\n border-color: var(--pk-color-slate-400);\n box-shadow: none;\n }\n\n :host(:not([disabled])) .control:hover:not(.is-disabled) {\n background: var(--pk-color-slate-50);\n }\n\n :host(:not([disabled])) .control[data-popup-open]:hover:not(.is-disabled),\n :host(:not([disabled])) .control:active:not(.is-disabled) {\n background: var(--pk-color-slate-150);\n }\n\n / Outline-button focus — lighter than --pk-shadow-focus (see React DatePicker trigger). /\n :host(:not([invalid]):not(:state(user-invalid))) .control:focus-visible,\n :host(:not([invalid]):not(:state(user-invalid))[data-state='focus-visible']) .control {\n border-color: var(--pk-color-sky-600);\n box-shadow: var(--pk-input-focus-shadow);\n }\n\n :host(:not([invalid]):not(:state(user-invalid))) .control[data-popup-open]:focus-visible,\n :host(:not([invalid]):not(:state(user-invalid))[data-state='focus-visible']) .control[data-popup-open] {\n border-color: var(--pk-color-slate-400);\n box-shadow: none;\n }\n\n :host([invalid]) .control,\n :host(:state(user-invalid)) .control {\n border-color: var(--pk-color-rose-600);\n }\n\n :host([invalid]) .control:focus-visible,\n :host([invalid][data-state='focus-visible']) .control,\n :host(:state(user-invalid)) .control:focus-visible,\n :host(:state(user-invalid)[data-state='focus-visible']) .control {\n box-shadow: var(--pk-input-invalid-focus-shadow);\n }\n\n .control.is-disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n .display-value {\n display: inline-flex;\n align-items: center;\n flex: 1;\n min-width: 0;\n line-height: 1.2;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n text-align: left;\n color: inherit;\n }\n\n .display-value.is-placeholder {\n color: var(--pk-color-gray-400);\n }\n\n .calendar-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n line-height: 0;\n color: var(--pk-color-gray-400);\n pointer-events: none;\n }\n\n .calendar-icon .icon,\n .calendar-icon svg {\n display: block;\n width: 14px;\n height: 14px;\n }\n\n .icon-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n margin-inline-start: auto;\n width: 1.25rem;\n height: 1.25rem;\n padding: 0;\n border: 0;\n border-radius: var(--pk-radius-sm);\n background: transparent;\n color: var(--pk-color-gray-500);\n cursor: pointer;\n }\n\n .icon-button:hover:not(:disabled) {\n color: var(--pk-color-gray-800);\n background: var(--pk-color-slate-100);\n }\n\n .icon-button:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n .icon-button .icon {\n width: 0.875rem;\n height: 0.875rem;\n }\n\n .panel {\n padding: 0;\n border: 0;\n border-radius: var(--pk-radius-md);\n background: var(--pk-color-white);\n box-shadow: var(--pk-shadow-popup);\n }\n\n .panel pk-calendar {\n display: block;\n }\n\n :host([size='xs']) {\n --pk-date-picker-height: 1.5rem;\n --pk-date-picker-padding-inline: 8px;\n --pk-date-picker-font-size: 11px;\n }\n\n :host([size='sm']) {\n --pk-date-picker-height: 1.625rem;\n --pk-date-picker-padding-inline: 9px;\n --pk-date-picker-font-size: 12px;\n }\n\n :host([size='lg']) {\n --pk-date-picker-height: 2.125rem;\n --pk-date-picker-padding-inline: 11px;\n --pk-date-picker-font-size: 14px;\n }\n\n :host([size='xl']) {\n --pk-date-picker-height: 2.375rem;\n --pk-date-picker-padding-inline: 12px;\n --pk-date-picker-font-size: 15px;\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 { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport type { PropertyValues } from 'lit';\n\nimport { calendar, xmark, renderIconHtml } from '../../icons/index.js';\nimport { isTopDismissible, registerDismissible, unregisterDismissible } from '../../a11y/dismissible-stack.js';\nimport { formControlStyles } from '../../base/form-control.styles.js';\nimport { PkFormAssociatedElement } from '../../base/pk-form-associated-element.js';\nimport { uniqueId } from '../../a11y/focus.js';\nimport { PkClearEvent } from '../../events/pk-clear.js';\nimport {\n PkAfterHideEvent,\n PkAfterShowEvent,\n PkHideEvent,\n PkShowEvent,\n type PkOverlaySource,\n} from '../../events/overlay-lifecycle.js';\nimport { HasSlotController } from '../../internal/has-slot.js';\nimport { readLegacyInstructions } from '../../internal/field-labels.js';\nimport { MirrorValidator, RequiredValidator } from '../../validators/index.js';\n// Keep the internal element registered when production builds erase type-only imports.\nimport '../popup/pk-popup.js';\nimport type { PkPopup, PkPopupPlacement } from '../popup/pk-popup.js';\nimport { PkCalendar, type PkCalendarDayContent } from '../calendar/pk-calendar.js';\nimport { coerceToDate, formatIsoDate, parseDateList, parseIsoDate, parseRange } from '../../utils/date.js';\nimport { formatHostDate, resolveHostLocale } from '../../utils/host-date.js';\nimport { waitForPopupReposition } from '../../utils/popup-placement-animation.js';\nimport { isPointerInsideOverlay } from '../../utils/popup-pointer.js';\nimport { pkDatePickerStyles } from './pk-date-picker.styles.js';\n\nexport type PkDatePickerSize = 'xs' \| 'sm' \| 'default' \| 'lg' \| 'xl';\nexport type PkDatePickerMode = 'single' \| 'range' \| 'multiple';\n\nconst CALENDAR_ICON = renderIconHtml(calendar);\nconst CLEAR_ICON = renderIconHtml(xmark);\n\n/\n Date picker — mirrors React `DatePicker` ( `pk-date-input` API).\n \n @slot label\n * @slot instructions\n * @slot hint\n * @slot start\n * @slot end\n * @slot clear-icon\n * @slot expand-icon\n * @slot footer\n \n @event input\n * @event change\n * @event pk-clear\n /\n@customElement('pk-date-picker')\nexport class PkDatePicker extends PkFormAssociatedElement {\n static override styles = [formControlStyles, pkDatePickerStyles];\n\n static override get validators() {\n return [...super.validators, MirrorValidator(), RequiredValidator()];\n }\n\n override assumeInteractionOn = ['input'];\n\n private readonly hasSlotController = new HasSlotController(\n this,\n 'label',\n 'instructions',\n 'hint',\n 'start',\n 'end',\n 'footer',\n );\n\n private readonly controlId = uniqueId('pk-date-picker');\n\n @property({ type: Boolean, reflect: true })\n open = false;\n\n @property({ reflect: true })\n placement: PkPopupPlacement = 'bottom';\n\n @property({ attribute: 'side-offset', type: Number })\n sideOffset = 4;\n\n @property({ reflect: true })\n size: PkDatePickerSize = 'default';\n\n @property({ reflect: true })\n mode: PkDatePickerMode = 'single';\n\n // Accept Date at the boundary (Formie/v1); willUpdate coerces to ISO string.\n @property()\n value: string \| Date = '';\n\n @property({ attribute: 'default-value' })\n defaultValue = '';\n\n @property()\n label = '';\n\n @property()\n instructions = '';\n\n @property()\n placeholder = '';\n\n @property({ attribute: 'with-clear', type: Boolean })\n withClear = false;\n\n @property({ type: Boolean, reflect: true })\n readonly = false;\n\n @property({ type: Boolean, reflect: true })\n invalid = false;\n\n @property({ reflect: true })\n min = '';\n\n @property({ reflect: true })\n max = '';\n\n @property({ reflect: true })\n locale = '';\n\n @property({ attribute: 'disable-past', type: Boolean, reflect: true })\n disablePast = false;\n\n @property({ attribute: 'disable-future', type: Boolean, reflect: true })\n disableFuture = false;\n\n @property({ attribute: 'disabled-dates' })\n disabledDates = '';\n\n @property({ attribute: 'disabled-days-of-week', reflect: true })\n disabledDaysOfWeek = '';\n\n @property({ attribute: 'first-day-of-week', reflect: true })\n firstDayOfWeek: 'auto' \| 'sun' \| 'mon' \| 'tue' \| 'wed' \| 'thu' \| 'fri' \| 'sat' = 'auto';\n\n @property({ attribute: 'with-outside-days', type: Boolean, reflect: true })\n withOutsideDays = true;\n\n @property({ attribute: 'with-week-numbers', type: Boolean, reflect: true })\n withWeekNumbers = false;\n\n @property({ attribute: 'weekday-format', reflect: true })\n weekdayFormat?: 'narrow' \| 'short' \| 'long';\n\n @property({ type: Number, reflect: true })\n months: 1 \| 2 = 1;\n\n @property({ attribute: 'page-by', reflect: true })\n pageBy: 'months' \| 'single' = 'months';\n\n @property({ attribute: 'min-range', type: Number })\n minRange = 0;\n\n @property({ attribute: 'max-range', type: Number })\n maxRange = 0;\n\n @property({ attribute: false })\n isDateDisabled?: (date: Date) => boolean;\n\n @property({ attribute: false })\n dayContent?: PkCalendarDayContent;\n\n @property({ attribute: 'with-label', type: Boolean })\n withLabel = false;\n\n @property({ attribute: 'with-instructions', type: Boolean })\n withInstructions = false;\n\n @property({ attribute: 'aria-label' })\n ariaLabel: string \| null = null;\n\n /* When `full`, the control stretches to the host width. /\n @property({ reflect: true })\n width?: 'full';\n\n @query('.value-input')\n override input!: HTMLInputElement;\n\n @query('pk-popup')\n private popupElement!: PkPopup;\n\n @query('pk-calendar')\n private calendarElement?: PkCalendar;\n\n @query('.control')\n private controlElement!: HTMLElement;\n\n private dismissRegistered = false;\n\n @state()\n private daySlotNames: string[] = [];\n\n private childrenObserver?: MutationObserver;\n\n override connectedCallback(): void {\n this.instructions = readLegacyInstructions(this, this.instructions);\n\n if (this.hasAttribute('with-hint')) {\n this.withInstructions = true;\n }\n\n super.connectedCallback();\n this.toggleAttribute('data-has-value', Boolean(this.value));\n this.setState('blank', !this.value);\n this.updateDaySlots();\n this.childrenObserver = new MutationObserver(() => this.updateDaySlots());\n this.childrenObserver.observe(this, { childList: true, attributes: true, attributeFilter: ['slot'] });\n }\n\n override disconnectedCallback(): void {\n this.childrenObserver?.disconnect();\n void this.closePanel('api');\n super.disconnectedCallback();\n }\n\n protected override willUpdate(changed: PropertyValues): void {\n if (changed.has('value')) {\n // Normalize Date → ISO so form values and parseIsoDate stay string-typed.\n // Formie/v1 pass `value={Date}`; assigning a Date used to throw in displayText.\n if (this.value instanceof Date) {\n this.value = formatIsoDate(coerceToDate(this.value));\n }\n\n this.toggleAttribute('data-has-value', Boolean(this.value));\n this.setState('blank', !this.value);\n }\n\n if (changed.has('open')) {\n this.setState('open', this.open);\n this.controlElement?.toggleAttribute('data-popup-open', this.open);\n }\n\n if (changed.has('mode')) {\n this.setState('range', this.mode === 'range');\n this.setState('multiple', this.mode === 'multiple');\n }\n\n super.willUpdate(changed);\n }\n\n private updateDaySlots(): void {\n const names = [...this.children]\n .map((child) => child.getAttribute('slot'))\n .filter((name): name is string => Boolean(name?.startsWith('day-')));\n\n if (names.join(',') !== this.daySlotNames.join(',')) {\n this.daySlotNames = names;\n }\n }\n\n /\n `value` accepts a Date at the boundary (Formie/v1) but is normalized to an ISO\n * string in willUpdate. Coerce defensively so string-typed consumers (form value,\n * parseRange) never receive a Date if they read before the next update tick.\n /\n private get valueString(): string {\n return this.value instanceof Date ? formatIsoDate(coerceToDate(this.value)) : this.value;\n }\n\n protected override syncFormValue(): void {\n this.setValue(this.valueString \|\| '');\n }\n\n protected override resetToDefaultValue(): void {\n this.value = this.defaultValue;\n }\n\n protected override restoreFormState(state: string \| File \| FormData \| null): void {\n if (typeof state === 'string') {\n this.value = state;\n }\n }\n\n private get resolvedLocale(): string {\n return this.locale \|\| this.lang \|\| resolveHostLocale();\n }\n\n private get displayText(): string {\n if (!this.value) {\n return this.placeholder;\n }\n\n if (this.mode === 'multiple') {\n const count = parseDateList(this.valueString).length;\n\n if (count === 0) {\n return this.placeholder;\n }\n\n return `${count} date${count === 1 ? '' : 's'} selected`;\n }\n\n if (this.mode === 'range') {\n const range = parseRange(this.valueString);\n\n if (range.from && range.to) {\n return `${formatHostDate(range.from, this.resolvedLocale)} – ${formatHostDate(range.to, this.resolvedLocale)}`;\n }\n\n if (range.from) {\n return formatHostDate(range.from, this.resolvedLocale);\n }\n\n return this.placeholder;\n }\n\n const date = parseIsoDate(this.value);\n\n return date ? formatHostDate(date, this.resolvedLocale) : this.placeholder;\n }\n\n get valueAsDate(): Date \| null {\n return this.mode === 'single' ? parseIsoDate(this.value) : null;\n }\n\n get valueAsRange() {\n return parseRange(this.valueString);\n }\n\n /* Sorted, deduped selection for `multiple` mode (empty otherwise). */\n get valueAsDates(): Date[] {\n return this.mode === 'multiple' ? parseDateList(this.valueString) : [];\n }\n\n async show(): Promise<void> {\n await this.openPanel();\n }\n\n async hide(): Promise<void> {\n await this.closePanel('api');\n }\n\n clear(): void {\n if (this.disabled \|\| this.readonly \|\| !this.value) {\n return;\n }\n\n this.value = '';\n this.dispatchEvent(new PkClearEvent());\n this.emitValueChange();\n this.controlElement?.focus();\n }\n\n private emitValueChange(): void {\n this.dispatchEvent(new CustomEvent('pk-change', {\n detail: { value: this.value },\n bubbles: true,\n composed: true,\n }));\n\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n }\n\n private async openPanel(): Promise<void> {\n if (this.disabled \|\| this.open) {\n return;\n }\n\n if (!this.dispatchEvent(new PkShowEvent())) {\n return;\n }\n\n this.open = true;\n this.registerDismissHandlers();\n\n await this.updateComplete;\n await waitForPopupReposition(this.popupElement, this.placement);\n\n this.dispatchEvent(new PkAfterShowEvent());\n }\n\n private async closePanel(source: PkOverlaySource = 'unknown'): Promise<void> {\n if (!this.open) {\n return;\n }\n\n const hideEvent = new PkHideEvent(source);\n\n if (!this.dispatchEvent(hideEvent)) {\n return;\n }\n\n this.open = false;\n this.unregisterDismissHandlers();\n this.dispatchEvent(new PkAfterHideEvent());\n }\n\n private registerDismissHandlers(): void {\n if (this.dismissRegistered) {\n return;\n }\n\n registerDismissible(this);\n document.addEventListener('pointerdown', this.handleDocumentPointerDown, true);\n document.addEventListener('keydown', this.handleDocumentKeyDown, true);\n this.dismissRegistered = true;\n }\n\n private unregisterDismissHandlers(): void {\n if (!this.dismissRegistered) {\n return;\n }\n\n unregisterDismissible(this);\n document.removeEventListener('pointerdown', this.handleDocumentPointerDown, true);\n document.removeEventListener('keydown', this.handleDocumentKeyDown, true);\n this.dismissRegistered = false;\n }\n\n private handleDocumentPointerDown = (event: PointerEvent): void => {\n if (!this.open \|\| !isTopDismissible(this)) {\n return;\n }\n\n if (this.isPointerInside(event)) {\n return;\n }\n\n void this.closePanel('light-dismiss');\n };\n\n private isPointerInside(event: PointerEvent): boolean {\n return isPointerInsideOverlay(event, {\n host: this,\n panel: this.popupElement?.querySelector('.panel') ?? undefined,\n });\n };\n\n private handleDocumentKeyDown = (event: KeyboardEvent): void => {\n if (!this.open \|\| event.key !== 'Escape') {\n return;\n }\n\n event.preventDefault();\n void this.closePanel('escape');\n };\n\n private handleControlClick = (): void => {\n if (this.disabled) {\n return;\n }\n\n if (this.open) {\n void this.closePanel('api');\n return;\n }\n\n void this.openPanel();\n };\n\n private handleControlKeyDown = (event: KeyboardEvent): void => {\n if (this.disabled) {\n return;\n }\n\n if (event.key === 'ArrowDown' && event.altKey) {\n event.preventDefault();\n void this.openPanel();\n queueMicrotask(() => this.calendarElement?.focus());\n return;\n }\n\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n this.handleControlClick();\n }\n };\n\n private handleClearClick = (event: Event): void => {\n event.preventDefault();\n event.stopPropagation();\n this.clear();\n };\n\n private handleCalendarChange = (event: Event): void => {\n const calendar = event.target as PkCalendar;\n this.value = calendar.value;\n this.emitValueChange();\n\n if (this.mode === 'single' && calendar.value) {\n void this.closePanel('api');\n }\n\n if (this.mode === 'range' && parseRange(calendar.value).from && parseRange(calendar.value).to) {\n void this.closePanel('api');\n }\n };\n\n private handleCalendarInput = (event: Event): void => {\n const calendar = event.target as PkCalendar;\n this.value = calendar.value;\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n };\n\n private renderClearButton() {\n if (!this.withClear \|\| !this.value \|\| this.disabled) {\n return nothing;\n }\n\n return html`\n <button\n type=\"button\"\n class=\"icon-button clear-button\"\n part=\"clear-button\"\n aria-label=\"Clear date\"\n ?disabled=${this.disabled}\n @click=${this.handleClearClick}\n >\n <slot name=\"clear-icon\">\n <span class=\"icon\" aria-hidden=\"true\">${unsafeSVG(CLEAR_ICON)}</span>\n </slot>\n </button>\n `;\n }\n\n private renderCalendarIcon() {\n return html`\n <span class=\"calendar-icon\" part=\"expand-icon\" aria-hidden=\"true\">\n <slot name=\"expand-icon\">\n <span class=\"icon\">${unsafeSVG(CALENDAR_ICON)}</span>\n </slot>\n </span>\n `;\n }\n\n override render() {\n const hasValue = Boolean(this.value);\n const display = this.displayText;\n const showPlaceholder = !hasValue;\n\n return html`\n <div part=\"form-control\" class=\"form-control\">\n ${this.label \|\| this.hasSlotController.test('label')\n ? html`\n <label part=\"label\" class=\"label\" for=${this.controlId}>\n <slot name=\"label\">${this.label}</slot>\n </label>\n `\n : nothing}\n\n <div part=\"form-control-input\" class=\"form-control-input\">\n <input\n class=\"value-input\"\n type=\"hidden\"\n .value=${this.value}\n ?required=${this.required}\n />\n\n <div\n part=\"base\"\n id=${this.controlId}\n class=${classMap({\n control: true,\n 'is-disabled': this.disabled,\n })}\n role=\"combobox\"\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-haspopup=\"dialog\"\n aria-label=${this.ariaLabel ?? nothing}\n tabindex=${this.disabled ? '-1' : '0'}\n @click=${this.handleControlClick}\n @keydown=${this.handleControlKeyDown}\n >\n ${this.hasSlotController.test('start')\n ? html`<span part=\"start\" class=\"control-start\"><slot name=\"start\"></slot></span>`\n : nothing}\n\n ${this.renderCalendarIcon()}\n\n <span\n part=\"input\"\n class=${classMap({\n 'display-value': true,\n 'is-placeholder': showPlaceholder,\n })}\n >\n ${display}\n </span>\n\n ${this.renderClearButton()}\n\n ${this.hasSlotController.test('end')\n ? html`<span part=\"end\" class=\"control-end\"><slot name=\"end\"></slot></span>`\n : nothing}\n </div>\n\n <pk-popup\n .active=${this.open}\n .anchor=${this.controlElement ?? ''}\n .placement=${this.placement}\n .distance=${this.sideOffset}\n >\n <div part=\"popup\" class=\"panel\" role=\"dialog\" aria-label=\"Choose date\">\n <pk-calendar\n part=\"calendar\"\n .bordered=${false}\n .mode=${this.mode}\n .value=${this.value}\n .min=${this.min}\n .max=${this.max}\n .locale=${this.resolvedLocale}\n .months=${this.months}\n .pageBy=${this.pageBy}\n .firstDayOfWeek=${this.firstDayOfWeek}\n .withOutsideDays=${this.withOutsideDays}\n .withWeekNumbers=${this.withWeekNumbers}\n .weekdayFormat=${this.weekdayFormat ?? nothing}\n .minRange=${this.minRange}\n .maxRange=${this.maxRange}\n .disablePast=${this.disablePast}\n .disableFuture=${this.disableFuture}\n .disabledDatesRaw=${this.disabledDates}\n .disabledDaysOfWeek=${this.disabledDaysOfWeek}\n .isDateDisabled=${this.isDateDisabled}\n .dayContent=${this.dayContent}\n .disabled=${this.disabled}\n .readonly=${this.readonly}\n @change=${this.handleCalendarChange}\n @input=${this.handleCalendarInput}\n >\n ${this.daySlotNames.map((name) => html`\n <slot name=${name} slot=${name}></slot>\n `)}\n <slot name=\"footer\" slot=\"footer\"></slot>\n </pk-calendar>\n </div>\n </pk-popup>\n </div>\n\n ${this.instructions \|\| this.hasSlotController.test('instructions') \|\| this.hasSlotController.test('hint')\n ? html`\n <div part=\"instructions\" class=\"instructions\">\n <slot name=\"instructions\">\n <slot name=\"hint\">${this.instructions}</slot>\n </slot>\n </div>\n `\n : nothing}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-date-picker': PkDatePicker;\n }\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"pk-date-picker-BEAd4Ngl.js","names":[],"sources":["../../src/utils/host-date.ts","../../src/components/date-picker/pk-date-picker.styles.ts","../../src/components/date-picker/pk-date-picker.ts"],"sourcesContent":["type CraftDateApi = {\n formatDate?: (date: Date) => string;\n locale?: string;\n};\n\nfunction getCraft(): CraftDateApi \| undefined {\n return (globalThis as typeof globalThis & { Craft?: CraftDateApi }).Craft;\n}\n\n/** Locale chain aligned with React `hostGetLocale` / Craft CP. /\nexport function resolveHostLocale(): string {\n return getCraft()?.locale \|\| document.documentElement.lang \|\| 'en-US';\n}\n\n/\n Display date in the host locale — mirrors React `hostFormatDate` → `Craft.formatDate`.\n * Falls back to numeric `Intl` when Craft is unavailable (e.g. playground).\n /\nexport function formatHostDate(date: Date, locale?: string): string {\n const craftFormat = getCraft()?.formatDate;\n\n if (typeof craftFormat === 'function') {\n try {\n return craftFormat(date);\n } catch {\n // fall through to Intl\n }\n }\n\n const resolved = locale \|\| resolveHostLocale();\n\n return new Intl.DateTimeFormat(resolved, {\n year: 'numeric',\n month: 'numeric',\n day: 'numeric',\n }).format(date);\n}\n","import { css } from 'lit';\n\nimport { iconStyles } from '../../base/icon.styles.js';\n\nexport const pkDatePickerStyles = css`\n ${iconStyles}\n @layer pk-component {\n :host {\n display: inline-block;\n position: relative;\n width: fit-content;\n max-width: 100%;\n color: var(--pk-color-gray-700);\n font-family: var(--pk-font-family);\n font-size: var(--pk-font-size-base);\n line-height: var(--pk-line-height);\n --pk-date-picker-height: 2.125rem;\n --pk-date-picker-min-width: 8.125rem;\n --pk-date-picker-padding-inline: 10px;\n --pk-date-picker-font-size: var(--pk-font-size-base);\n }\n\n :host([width='full']) {\n display: block;\n width: 100%;\n }\n\n :host([width='full']) .control {\n width: 100%;\n }\n\n .control {\n display: inline-flex;\n align-items: center;\n justify-content: flex-start;\n gap: 0.5rem;\n width: fit-content;\n min-width: var(--pk-date-picker-min-width);\n max-width: 100%;\n height: var(--pk-date-picker-height);\n min-height: var(--pk-date-picker-height);\n margin: 0;\n padding: 0 var(--pk-date-picker-padding-inline);\n border: 1px solid var(--pk-color-slate-400);\n border-radius: var(--pk-radius-lg);\n background: transparent;\n color: inherit;\n font: inherit;\n font-size: var(--pk-date-picker-font-size);\n font-weight: 400;\n line-height: 1.2;\n cursor: default;\n outline: none;\n box-sizing: border-box;\n transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;\n }\n\n .control[data-popup-open] {\n background: var(--pk-color-slate-150);\n border-color: var(--pk-color-slate-400);\n box-shadow: none;\n }\n\n :host(:not([disabled])) .control:hover:not(.is-disabled) {\n background: var(--pk-color-slate-50);\n }\n\n :host(:not([disabled])) .control[data-popup-open]:hover:not(.is-disabled),\n :host(:not([disabled])) .control:active:not(.is-disabled) {\n background: var(--pk-color-slate-150);\n }\n\n / Outline-button focus — lighter than --pk-shadow-focus (see React DatePicker trigger). /\n :host(:not([invalid]):not(:state(user-invalid))) .control:focus-visible,\n :host(:not([invalid]):not(:state(user-invalid))[data-state='focus-visible']) .control {\n border-color: var(--pk-color-sky-600);\n box-shadow: var(--pk-input-focus-shadow);\n }\n\n :host(:not([invalid]):not(:state(user-invalid))) .control[data-popup-open]:focus-visible,\n :host(:not([invalid]):not(:state(user-invalid))[data-state='focus-visible']) .control[data-popup-open] {\n border-color: var(--pk-color-slate-400);\n box-shadow: none;\n }\n\n :host([invalid]) .control,\n :host(:state(user-invalid)) .control {\n border-color: var(--pk-color-rose-600);\n }\n\n :host([invalid]) .control:focus-visible,\n :host([invalid][data-state='focus-visible']) .control,\n :host(:state(user-invalid)) .control:focus-visible,\n :host(:state(user-invalid)[data-state='focus-visible']) .control {\n box-shadow: var(--pk-input-invalid-focus-shadow);\n }\n\n .control.is-disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n .display-value {\n display: inline-flex;\n align-items: center;\n flex: 1;\n min-width: 0;\n line-height: 1.2;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n text-align: left;\n color: inherit;\n }\n\n .display-value.is-placeholder {\n color: var(--pk-color-gray-400);\n }\n\n .calendar-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n line-height: 0;\n color: var(--pk-color-gray-400);\n pointer-events: none;\n }\n\n .calendar-icon .icon,\n .calendar-icon svg {\n display: block;\n width: 14px;\n height: 14px;\n }\n\n .icon-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n margin-inline-start: auto;\n width: 1.25rem;\n height: 1.25rem;\n padding: 0;\n border: 0;\n border-radius: var(--pk-radius-sm);\n background: transparent;\n color: var(--pk-color-gray-500);\n cursor: pointer;\n }\n\n .icon-button:hover:not(:disabled) {\n color: var(--pk-color-gray-800);\n background: var(--pk-color-slate-100);\n }\n\n .icon-button:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n .icon-button .icon {\n width: 0.875rem;\n height: 0.875rem;\n }\n\n .panel {\n padding: 0;\n border: 0;\n border-radius: var(--pk-radius-md);\n background: var(--pk-color-white);\n box-shadow: var(--pk-shadow-popup);\n }\n\n .panel pk-calendar {\n display: block;\n }\n\n :host([size='xs']) {\n --pk-date-picker-height: 1.5rem;\n --pk-date-picker-padding-inline: 8px;\n --pk-date-picker-font-size: 11px;\n }\n\n :host([size='sm']) {\n --pk-date-picker-height: 1.625rem;\n --pk-date-picker-padding-inline: 9px;\n --pk-date-picker-font-size: 12px;\n }\n\n :host([size='lg']) {\n --pk-date-picker-height: 2.125rem;\n --pk-date-picker-padding-inline: 11px;\n --pk-date-picker-font-size: 14px;\n }\n\n :host([size='xl']) {\n --pk-date-picker-height: 2.375rem;\n --pk-date-picker-padding-inline: 12px;\n --pk-date-picker-font-size: 15px;\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 { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport type { PropertyValues } from 'lit';\n\nimport { calendar, xmark, renderIconHtml } from '../../icons/index.js';\nimport { isTopDismissible, registerDismissible, unregisterDismissible } from '../../a11y/dismissible-stack.js';\nimport { formControlStyles } from '../../base/form-control.styles.js';\nimport { PkFormAssociatedElement } from '../../base/pk-form-associated-element.js';\nimport { uniqueId } from '../../a11y/focus.js';\nimport { PkClearEvent } from '../../events/pk-clear.js';\nimport {\n PkAfterHideEvent,\n PkAfterShowEvent,\n PkHideEvent,\n PkShowEvent,\n type PkOverlaySource,\n} from '../../events/overlay-lifecycle.js';\nimport { HasSlotController } from '../../internal/has-slot.js';\nimport { readLegacyInstructions } from '../../internal/field-labels.js';\nimport { MirrorValidator, RequiredValidator } from '../../validators/index.js';\n// Keep the internal element registered when production builds erase type-only imports.\nimport '../popup/pk-popup.js';\nimport type { PkPopup, PkPopupPlacement } from '../popup/pk-popup.js';\nimport { PkCalendar, type PkCalendarDayContent } from '../calendar/pk-calendar.js';\nimport { coerceToDate, formatIsoDate, parseDateList, parseIsoDate, parseRange } from '../../utils/date.js';\nimport { formatHostDate, resolveHostLocale } from '../../utils/host-date.js';\nimport { waitForPopupReposition } from '../../utils/popup-placement-animation.js';\nimport { isPointerInsideOverlay } from '../../utils/popup-pointer.js';\nimport { pkDatePickerStyles } from './pk-date-picker.styles.js';\n\nexport type PkDatePickerSize = 'xs' \| 'sm' \| 'default' \| 'lg' \| 'xl';\nexport type PkDatePickerMode = 'single' \| 'range' \| 'multiple';\n\nconst CALENDAR_ICON = renderIconHtml(calendar);\nconst CLEAR_ICON = renderIconHtml(xmark);\n\n/\n Date picker — mirrors React `DatePicker` ( `pk-date-input` API).\n \n @slot label\n * @slot instructions\n * @slot hint\n * @slot start\n * @slot end\n * @slot clear-icon\n * @slot expand-icon\n * @slot footer\n \n @event input\n * @event change\n * @event pk-clear\n /\n@customElement('pk-date-picker')\nexport class PkDatePicker extends PkFormAssociatedElement {\n static override styles = [formControlStyles, pkDatePickerStyles];\n\n static override get validators() {\n return [...super.validators, MirrorValidator(), RequiredValidator()];\n }\n\n override assumeInteractionOn = ['input'];\n\n private readonly hasSlotController = new HasSlotController(\n this,\n 'label',\n 'instructions',\n 'hint',\n 'start',\n 'end',\n 'footer',\n );\n\n private readonly controlId = uniqueId('pk-date-picker');\n\n @property({ type: Boolean, reflect: true })\n open = false;\n\n @property({ reflect: true })\n placement: PkPopupPlacement = 'bottom';\n\n @property({ attribute: 'side-offset', type: Number })\n sideOffset = 4;\n\n @property({ reflect: true })\n size: PkDatePickerSize = 'default';\n\n @property({ reflect: true })\n mode: PkDatePickerMode = 'single';\n\n // Accept Date at the boundary (Formie/v1); willUpdate coerces to ISO string.\n @property()\n value: string \| Date = '';\n\n @property({ attribute: 'default-value' })\n defaultValue = '';\n\n @property()\n label = '';\n\n @property()\n instructions = '';\n\n @property()\n placeholder = '';\n\n @property({ attribute: 'with-clear', type: Boolean })\n withClear = false;\n\n @property({ type: Boolean, reflect: true })\n readonly = false;\n\n @property({ type: Boolean, reflect: true })\n invalid = false;\n\n @property({ reflect: true })\n min = '';\n\n @property({ reflect: true })\n max = '';\n\n @property({ reflect: true })\n locale = '';\n\n @property({ attribute: 'disable-past', type: Boolean, reflect: true })\n disablePast = false;\n\n @property({ attribute: 'disable-future', type: Boolean, reflect: true })\n disableFuture = false;\n\n @property({ attribute: 'disabled-dates' })\n disabledDates = '';\n\n @property({ attribute: 'disabled-days-of-week', reflect: true })\n disabledDaysOfWeek = '';\n\n @property({ attribute: 'first-day-of-week', reflect: true })\n firstDayOfWeek: 'auto' \| 'sun' \| 'mon' \| 'tue' \| 'wed' \| 'thu' \| 'fri' \| 'sat' = 'auto';\n\n @property({ attribute: 'with-outside-days', type: Boolean, reflect: true })\n withOutsideDays = true;\n\n @property({ attribute: 'with-week-numbers', type: Boolean, reflect: true })\n withWeekNumbers = false;\n\n @property({ attribute: 'weekday-format', reflect: true })\n weekdayFormat?: 'narrow' \| 'short' \| 'long';\n\n @property({ type: Number, reflect: true })\n months: 1 \| 2 = 1;\n\n @property({ attribute: 'page-by', reflect: true })\n pageBy: 'months' \| 'single' = 'months';\n\n @property({ attribute: 'min-range', type: Number })\n minRange = 0;\n\n @property({ attribute: 'max-range', type: Number })\n maxRange = 0;\n\n @property({ attribute: false })\n isDateDisabled?: (date: Date) => boolean;\n\n @property({ attribute: false })\n dayContent?: PkCalendarDayContent;\n\n @property({ attribute: 'with-label', type: Boolean })\n withLabel = false;\n\n @property({ attribute: 'with-instructions', type: Boolean })\n withInstructions = false;\n\n @property({ attribute: 'aria-label' })\n ariaLabel: string \| null = null;\n\n /* When `full`, the control stretches to the host width. /\n @property({ reflect: true })\n width?: 'full';\n\n @query('.value-input')\n override input!: HTMLInputElement;\n\n @query('pk-popup')\n private popupElement!: PkPopup;\n\n @query('pk-calendar')\n private calendarElement?: PkCalendar;\n\n @query('.control')\n private controlElement!: HTMLElement;\n\n private dismissRegistered = false;\n\n @state()\n private daySlotNames: string[] = [];\n\n private childrenObserver?: MutationObserver;\n\n override connectedCallback(): void {\n this.instructions = readLegacyInstructions(this, this.instructions);\n\n if (this.hasAttribute('with-hint')) {\n this.withInstructions = true;\n }\n\n super.connectedCallback();\n this.toggleAttribute('data-has-value', Boolean(this.value));\n this.setState('blank', !this.value);\n this.updateDaySlots();\n this.childrenObserver = new MutationObserver(() => this.updateDaySlots());\n this.childrenObserver.observe(this, { childList: true, attributes: true, attributeFilter: ['slot'] });\n }\n\n override disconnectedCallback(): void {\n this.childrenObserver?.disconnect();\n void this.closePanel('api');\n super.disconnectedCallback();\n }\n\n protected override willUpdate(changed: PropertyValues): void {\n if (changed.has('value')) {\n // Normalize Date → ISO so form values and parseIsoDate stay string-typed.\n // Formie/v1 pass `value={Date}`; assigning a Date used to throw in displayText.\n if (this.value instanceof Date) {\n this.value = formatIsoDate(coerceToDate(this.value));\n }\n\n this.toggleAttribute('data-has-value', Boolean(this.value));\n this.setState('blank', !this.value);\n }\n\n if (changed.has('open')) {\n this.setState('open', this.open);\n this.controlElement?.toggleAttribute('data-popup-open', this.open);\n }\n\n if (changed.has('mode')) {\n this.setState('range', this.mode === 'range');\n this.setState('multiple', this.mode === 'multiple');\n }\n\n super.willUpdate(changed);\n }\n\n private updateDaySlots(): void {\n const names = [...this.children]\n .map((child) => child.getAttribute('slot'))\n .filter((name): name is string => Boolean(name?.startsWith('day-')));\n\n if (names.join(',') !== this.daySlotNames.join(',')) {\n this.daySlotNames = names;\n }\n }\n\n /\n `value` accepts a Date at the boundary (Formie/v1) but is normalized to an ISO\n * string in willUpdate. Coerce defensively so string-typed consumers (form value,\n * parseRange) never receive a Date if they read before the next update tick.\n /\n private get valueString(): string {\n return this.value instanceof Date ? formatIsoDate(coerceToDate(this.value)) : this.value;\n }\n\n protected override syncFormValue(): void {\n this.setValue(this.valueString \|\| '');\n }\n\n protected override resetToDefaultValue(): void {\n this.value = this.defaultValue;\n }\n\n protected override restoreFormState(state: string \| File \| FormData \| null): void {\n if (typeof state === 'string') {\n this.value = state;\n }\n }\n\n private get resolvedLocale(): string {\n return this.locale \|\| this.lang \|\| resolveHostLocale();\n }\n\n private get displayText(): string {\n if (!this.value) {\n return this.placeholder;\n }\n\n if (this.mode === 'multiple') {\n const count = parseDateList(this.valueString).length;\n\n if (count === 0) {\n return this.placeholder;\n }\n\n return `${count} date${count === 1 ? '' : 's'} selected`;\n }\n\n if (this.mode === 'range') {\n const range = parseRange(this.valueString);\n\n if (range.from && range.to) {\n return `${formatHostDate(range.from, this.resolvedLocale)} – ${formatHostDate(range.to, this.resolvedLocale)}`;\n }\n\n if (range.from) {\n return formatHostDate(range.from, this.resolvedLocale);\n }\n\n return this.placeholder;\n }\n\n const date = parseIsoDate(this.value);\n\n return date ? formatHostDate(date, this.resolvedLocale) : this.placeholder;\n }\n\n get valueAsDate(): Date \| null {\n return this.mode === 'single' ? parseIsoDate(this.value) : null;\n }\n\n get valueAsRange() {\n return parseRange(this.valueString);\n }\n\n /* Sorted, deduped selection for `multiple` mode (empty otherwise). */\n get valueAsDates(): Date[] {\n return this.mode === 'multiple' ? parseDateList(this.valueString) : [];\n }\n\n async show(): Promise<void> {\n await this.openPanel();\n }\n\n async hide(): Promise<void> {\n await this.closePanel('api');\n }\n\n clear(): void {\n if (this.disabled \|\| this.readonly \|\| !this.value) {\n return;\n }\n\n this.value = '';\n this.dispatchEvent(new PkClearEvent());\n this.emitValueChange();\n this.controlElement?.focus();\n }\n\n private emitValueChange(): void {\n this.dispatchEvent(new CustomEvent('pk-change', {\n detail: { value: this.value },\n bubbles: true,\n composed: true,\n }));\n\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n }\n\n private async openPanel(): Promise<void> {\n if (this.disabled \|\| this.open) {\n return;\n }\n\n if (!this.dispatchEvent(new PkShowEvent())) {\n return;\n }\n\n this.open = true;\n this.registerDismissHandlers();\n\n await this.updateComplete;\n await waitForPopupReposition(this.popupElement, this.placement);\n\n this.dispatchEvent(new PkAfterShowEvent());\n }\n\n private async closePanel(source: PkOverlaySource = 'unknown'): Promise<void> {\n if (!this.open) {\n return;\n }\n\n const hideEvent = new PkHideEvent(source);\n\n if (!this.dispatchEvent(hideEvent)) {\n return;\n }\n\n this.open = false;\n this.unregisterDismissHandlers();\n this.dispatchEvent(new PkAfterHideEvent());\n }\n\n private registerDismissHandlers(): void {\n if (this.dismissRegistered) {\n return;\n }\n\n registerDismissible(this);\n document.addEventListener('pointerdown', this.handleDocumentPointerDown, true);\n document.addEventListener('keydown', this.handleDocumentKeyDown, true);\n this.dismissRegistered = true;\n }\n\n private unregisterDismissHandlers(): void {\n if (!this.dismissRegistered) {\n return;\n }\n\n unregisterDismissible(this);\n document.removeEventListener('pointerdown', this.handleDocumentPointerDown, true);\n document.removeEventListener('keydown', this.handleDocumentKeyDown, true);\n this.dismissRegistered = false;\n }\n\n private handleDocumentPointerDown = (event: PointerEvent): void => {\n if (!this.open \|\| !isTopDismissible(this)) {\n return;\n }\n\n if (this.isPointerInside(event)) {\n return;\n }\n\n void this.closePanel('light-dismiss');\n };\n\n private isPointerInside(event: PointerEvent): boolean {\n return isPointerInsideOverlay(event, {\n host: this,\n panel: this.popupElement?.querySelector('.panel') ?? undefined,\n });\n };\n\n private handleDocumentKeyDown = (event: KeyboardEvent): void => {\n if (!this.open \|\| event.key !== 'Escape') {\n return;\n }\n\n event.preventDefault();\n void this.closePanel('escape');\n };\n\n private handleControlClick = (): void => {\n if (this.disabled) {\n return;\n }\n\n if (this.open) {\n void this.closePanel('api');\n return;\n }\n\n void this.openPanel();\n };\n\n private handleControlKeyDown = (event: KeyboardEvent): void => {\n if (this.disabled) {\n return;\n }\n\n if (event.key === 'ArrowDown' && event.altKey) {\n event.preventDefault();\n void this.openPanel();\n queueMicrotask(() => this.calendarElement?.focus());\n return;\n }\n\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n this.handleControlClick();\n }\n };\n\n private handleClearClick = (event: Event): void => {\n event.preventDefault();\n event.stopPropagation();\n this.clear();\n };\n\n private handleCalendarChange = (event: Event): void => {\n const calendar = event.target as PkCalendar;\n this.value = calendar.value;\n this.emitValueChange();\n\n if (this.mode === 'single' && calendar.value) {\n void this.closePanel('api');\n }\n\n if (this.mode === 'range' && parseRange(calendar.value).from && parseRange(calendar.value).to) {\n void this.closePanel('api');\n }\n };\n\n private handleCalendarInput = (event: Event): void => {\n const calendar = event.target as PkCalendar;\n this.value = calendar.value;\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n };\n\n private renderClearButton() {\n if (!this.withClear \|\| !this.value \|\| this.disabled) {\n return nothing;\n }\n\n return html`\n <button\n type=\"button\"\n class=\"icon-button clear-button\"\n part=\"clear-button\"\n aria-label=\"Clear date\"\n ?disabled=${this.disabled}\n @click=${this.handleClearClick}\n >\n <slot name=\"clear-icon\">\n <span class=\"icon\" aria-hidden=\"true\">${unsafeSVG(CLEAR_ICON)}</span>\n </slot>\n </button>\n `;\n }\n\n private renderCalendarIcon() {\n return html`\n <span class=\"calendar-icon\" part=\"expand-icon\" aria-hidden=\"true\">\n <slot name=\"expand-icon\">\n <span class=\"icon\">${unsafeSVG(CALENDAR_ICON)}</span>\n </slot>\n </span>\n `;\n }\n\n override render() {\n const hasValue = Boolean(this.value);\n const display = this.displayText;\n const showPlaceholder = !hasValue;\n\n return html`\n <div part=\"form-control\" class=\"form-control\">\n ${this.label \|\| this.hasSlotController.test('label')\n ? html`\n <label part=\"label\" class=\"label\" for=${this.controlId}>\n <slot name=\"label\">${this.label}</slot>\n </label>\n `\n : nothing}\n\n <div part=\"form-control-input\" class=\"form-control-input\">\n <input\n class=\"value-input\"\n type=\"hidden\"\n .value=${this.value}\n ?required=${this.required}\n />\n\n <div\n part=\"base\"\n id=${this.controlId}\n class=${classMap({\n control: true,\n 'is-disabled': this.disabled,\n })}\n role=\"combobox\"\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-haspopup=\"dialog\"\n aria-label=${this.ariaLabel ?? nothing}\n tabindex=${this.disabled ? '-1' : '0'}\n @click=${this.handleControlClick}\n @keydown=${this.handleControlKeyDown}\n >\n ${this.hasSlotController.test('start')\n ? html`<span part=\"start\" class=\"control-start\"><slot name=\"start\"></slot></span>`\n : nothing}\n\n ${this.renderCalendarIcon()}\n\n <span\n part=\"input\"\n class=${classMap({\n 'display-value': true,\n 'is-placeholder': showPlaceholder,\n })}\n >\n ${display}\n </span>\n\n ${this.renderClearButton()}\n\n ${this.hasSlotController.test('end')\n ? html`<span part=\"end\" class=\"control-end\"><slot name=\"end\"></slot></span>`\n : nothing}\n </div>\n\n <pk-popup\n .active=${this.open}\n .anchor=${this.controlElement ?? ''}\n .placement=${this.placement}\n .distance=${this.sideOffset}\n >\n <div part=\"popup\" class=\"panel\" role=\"dialog\" aria-label=\"Choose date\">\n <pk-calendar\n part=\"calendar\"\n .bordered=${false}\n .mode=${this.mode}\n .value=${this.value}\n .min=${this.min}\n .max=${this.max}\n .locale=${this.resolvedLocale}\n .months=${this.months}\n .pageBy=${this.pageBy}\n .firstDayOfWeek=${this.firstDayOfWeek}\n .withOutsideDays=${this.withOutsideDays}\n .withWeekNumbers=${this.withWeekNumbers}\n .weekdayFormat=${this.weekdayFormat ?? nothing}\n .minRange=${this.minRange}\n .maxRange=${this.maxRange}\n .disablePast=${this.disablePast}\n .disableFuture=${this.disableFuture}\n .disabledDatesRaw=${this.disabledDates}\n .disabledDaysOfWeek=${this.disabledDaysOfWeek}\n .isDateDisabled=${this.isDateDisabled}\n .dayContent=${this.dayContent}\n .disabled=${this.disabled}\n .readonly=${this.readonly}\n @change=${this.handleCalendarChange}\n @input=${this.handleCalendarInput}\n >\n ${this.daySlotNames.map((name) => html`\n <slot name=${name} slot=${name}></slot>\n `)}\n <slot name=\"footer\" slot=\"footer\"></slot>\n </pk-calendar>\n </div>\n </pk-popup>\n </div>\n\n ${this.instructions \|\| this.hasSlotController.test('instructions') \|\| this.hasSlotController.test('hint')\n ? html`\n <div part=\"instructions\" class=\"instructions\">\n <slot name=\"instructions\">\n <slot name=\"hint\">${this.instructions}</slot>\n </slot>\n </div>\n `\n : nothing}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-date-picker': PkDatePicker;\n }\n}\n"],"mappings":"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"}

package/dist/chunks/pk-dialog-VMQqLW1f.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pk-dialog-VMQqLW1f.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 '../../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 // 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 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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"}
1	+ {"version":3,"file":"pk-dialog-VMQqLW1f.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 '../../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 // 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-dropdown-item-BZQS87U0.js → pk-dropdown-item-D9OaG5o-.js} RENAMED Viewed

@@ -307,7 +307,9 @@ var pkDropdownItemStyles = [
         .submenu-panel {
             width: max-content;
             min-width: 8rem;
-            overflow: hidden;
+            max-height: var(--pk-popup-available-height, calc(100dvh - 20px));
+            overflow: auto;
+            overscroll-behavior: contain;
             padding: 4px 0;
             border-radius: var(--pk-radius-md);
             background: var(--pk-color-white);
@@ -490,9 +492,9 @@ var PkDropdownItem = class PkDropdownItem extends PkElement {
                     <slot name="start"></slot>
                     <slot name="prefix"></slot>
                 </span>
-                <span class="label"><slot></slot></span>
+                <span part="label" 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}
+                ${showCheck ? html`<span part="check" 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`
@@ -504,6 +506,8 @@ var PkDropdownItem = class PkDropdownItem extends PkElement {
                     .skidding=${-4}
                     flip
                     shift
+                    auto-size="vertical"
+                    .autoSizePadding=${10}
                     hover-bridge
                     style="--pk-popup-z-index: 1001"
                 >
@@ -558,4 +562,4 @@ function resolveMenuSize(item) {
 //#endregion
 export { dropdownMenuHostSizeStyles as n, dropdownMenuPanelSizeStyles as r, PkDropdownItem as t };
-//# sourceMappingURL=pk-dropdown-item-BZQS87U0.js.map
+//# sourceMappingURL=pk-dropdown-item-D9OaG5o-.js.map

package/dist/chunks/pk-dropdown-item-D9OaG5o-.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"pk-dropdown-item-D9OaG5o-.js","names":[],"sources":["../../src/components/dropdown-menu/dropdown-menu-size.styles.ts","../../src/components/dropdown-menu/pk-dropdown-item.styles.ts","../../src/components/dropdown-menu/pk-dropdown-item.ts"],"sourcesContent":["import { css } from 'lit';\n\nconst dropdownMenuSizeTokens = {\n default: css`\n --pk-dropdown-item-padding-block: 8px;\n --pk-dropdown-item-padding-inline: 12px;\n --pk-dropdown-item-gap: 0.625rem;\n --pk-dropdown-item-font-size: var(--pk-font-size-base);\n --pk-dropdown-item-line-height: 1.5;\n --pk-dropdown-item-icon-size: 12px;\n --pk-dropdown-label-padding-inline: 12px;\n --pk-dropdown-label-font-size: 13px;\n --pk-dropdown-details-font-size: var(--pk-font-size-sm);\n `,\n xs: css`\n --pk-dropdown-item-padding-block: 3px;\n --pk-dropdown-item-padding-inline: 8px;\n --pk-dropdown-item-gap: 0.375rem;\n --pk-dropdown-item-font-size: 12px;\n --pk-dropdown-item-line-height: 1.5;\n --pk-dropdown-item-icon-size: 10px;\n --pk-dropdown-label-padding-inline: 8px;\n --pk-dropdown-label-font-size: 11px;\n --pk-dropdown-details-font-size: 11px;\n `,\n sm: css`\n --pk-dropdown-item-padding-block: 4px;\n --pk-dropdown-item-padding-inline: 10px;\n --pk-dropdown-item-gap: 0.4375rem;\n --pk-dropdown-item-font-size: 13px;\n --pk-dropdown-item-line-height: 1.5;\n --pk-dropdown-item-icon-size: 12px;\n --pk-dropdown-label-padding-inline: 10px;\n --pk-dropdown-label-font-size: 11px;\n --pk-dropdown-details-font-size: 12px;\n `,\n lg: css`\n --pk-dropdown-item-padding-block: 10px;\n --pk-dropdown-item-padding-inline: 14px;\n --pk-dropdown-item-gap: 0.75rem;\n --pk-dropdown-item-font-size: 16px;\n --pk-dropdown-item-line-height: 1.5;\n --pk-dropdown-item-icon-size: 14px;\n --pk-dropdown-label-padding-inline: 14px;\n --pk-dropdown-label-font-size: 14px;\n --pk-dropdown-details-font-size: var(--pk-font-size-sm);\n `,\n xl: css`\n --pk-dropdown-item-padding-block: 12px;\n --pk-dropdown-item-padding-inline: 16px;\n --pk-dropdown-item-gap: 0.75rem;\n --pk-dropdown-item-font-size: 18px;\n --pk-dropdown-item-line-height: 1.5;\n --pk-dropdown-item-icon-size: 16px;\n --pk-dropdown-label-padding-inline: 16px;\n --pk-dropdown-label-font-size: 15px;\n --pk-dropdown-details-font-size: var(--pk-font-size-base);\n `,\n} as const;\n\n/** Size tokens on `pk-dropdown-menu` — cascades to light-DOM menu children. */\nexport const dropdownMenuHostSizeStyles = css`\n @layer pk-component {\n :host {\n ${dropdownMenuSizeTokens.default}\n }\n\n :host([size='xs']) {\n ${dropdownMenuSizeTokens.xs}\n }\n\n :host([size='sm']) {\n ${dropdownMenuSizeTokens.sm}\n }\n\n :host([size='lg']) {\n ${dropdownMenuSizeTokens.lg}\n }\n\n :host([size='xl']) {\n ${dropdownMenuSizeTokens.xl}\n }\n }\n`;\n\n/**\n * Size tokens on popup panels.\n * Do not include bare `:host` here; importing this in `pk-dropdown-item`\n * would reset every item back to the default size.\n */\nexport const dropdownMenuPanelSizeStyles = css`\n @layer pk-component {\n .panel[data-size='default'],\n .submenu-panel[data-size='default'] {\n ${dropdownMenuSizeTokens.default}\n }\n\n .panel[data-size='xs'],\n .submenu-panel[data-size='xs'] {\n ${dropdownMenuSizeTokens.xs}\n }\n\n .panel[data-size='sm'],\n .submenu-panel[data-size='sm'] {\n ${dropdownMenuSizeTokens.sm}\n }\n\n .panel[data-size='lg'],\n .submenu-panel[data-size='lg'] {\n ${dropdownMenuSizeTokens.lg}\n }\n\n .panel[data-size='xl'],\n .submenu-panel[data-size='xl'] {\n ${dropdownMenuSizeTokens.xl}\n }\n }\n`;\n\n/** @deprecated Use dropdownMenuHostSizeStyles + dropdownMenuPanelSizeStyles. */\nexport const dropdownMenuSizeStyles = css`\n ${dropdownMenuHostSizeStyles}\n ${dropdownMenuPanelSizeStyles}\n`;\n","import { css } from 'lit';\n\nimport { popupContentAnimationStyles } from '../../styles/popup-content-animation.styles.js';\nimport { dropdownMenuPanelSizeStyles } from './dropdown-menu-size.styles.js';\n\nexport const pkDropdownItemStyles = [\n popupContentAnimationStyles,\n dropdownMenuPanelSizeStyles,\n css`\n @layer pk-component {\n :host {\n display: block;\n position: relative;\n /*\n * Slotted label text inherits from this host (light DOM), not from\n * shadow .item — pin size-token metrics so Craft CP / Tailwind /\n * bare hosts all get the same item rhythm.\n */\n font-size: var(--pk-dropdown-item-font-size, var(--pk-font-size-base));\n line-height: var(--pk-dropdown-item-line-height, 1.5);\n color: var(--text-color, var(--pk-color-gray-700));\n }\n\n .item {\n display: flex;\n align-items: center;\n gap: var(--pk-dropdown-item-gap, 0.625rem);\n width: 100%;\n margin: 0;\n padding: var(--pk-dropdown-item-padding-block, 8px) var(--pk-dropdown-item-padding-inline, 12px);\n border: 0;\n background: transparent;\n color: inherit;\n font: inherit;\n font-size: var(--pk-dropdown-item-font-size, var(--pk-font-size-base));\n /* Explicit — do not let font:inherit re-leak page line-height. */\n line-height: var(--pk-dropdown-item-line-height, 1.5);\n font-weight: normal;\n text-align: left;\n white-space: nowrap;\n cursor: default;\n user-select: none;\n outline: none;\n box-sizing: border-box;\n }\n\n .item:hover:not([disabled]):not([aria-disabled='true']),\n :host([data-highlighted]) .item,\n :host([submenu-open]) .item {\n background: var(--pk-color-slate-100);\n }\n\n .item:focus-visible {\n background: var(--pk-color-slate-100);\n }\n\n .item[aria-disabled='true'] {\n pointer-events: none;\n opacity: 0.5;\n }\n\n .label {\n flex: 1 1 auto;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .prefix {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: var(--pk-dropdown-item-icon-size, 12px);\n height: var(--pk-dropdown-item-icon-size, 12px);\n line-height: 0;\n }\n\n .prefix--empty {\n display: none;\n }\n\n .prefix ::slotted(*) {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: var(--pk-dropdown-item-icon-size, 12px);\n height: var(--pk-dropdown-item-icon-size, 12px);\n /* Kill pk-icon text-baseline nudge inside the padded flex row. */\n vertical-align: 0;\n }\n\n .prefix ::slotted(svg),\n .prefix ::slotted(*) svg,\n .prefix ::slotted(.pk-dropdown-item__prefix-icon) {\n display: block;\n width: var(--pk-dropdown-item-icon-size, 12px) !important;\n height: var(--pk-dropdown-item-icon-size, 12px) !important;\n max-width: var(--pk-dropdown-item-icon-size, 12px);\n max-height: var(--pk-dropdown-item-icon-size, 12px);\n flex-shrink: 0;\n pointer-events: none;\n }\n\n .details {\n margin-left: auto;\n color: var(--pk-color-gray-500);\n font-size: var(--pk-dropdown-details-font-size, var(--pk-font-size-sm));\n letter-spacing: 0.04em;\n }\n\n .details:empty {\n display: none;\n }\n\n .check {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: 12px;\n height: 12px;\n color: var(--pk-color-gray-700);\n }\n\n .check svg {\n display: block;\n width: 12px;\n height: 12px;\n flex-shrink: 0;\n pointer-events: none;\n }\n\n .submenu-icon {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: 1rem;\n color: var(--pk-color-gray-700);\n }\n\n .submenu-icon svg {\n display: block;\n width: 1em;\n height: 1em;\n flex-shrink: 0;\n pointer-events: none;\n }\n\n .check {\n opacity: 0;\n }\n\n :host([checked]) .check {\n opacity: 1;\n }\n\n :host([type='checkbox']) .check,\n :host([type='radio']) .check {\n margin-left: auto;\n }\n\n :host([type='checkbox'][checked]) .check,\n :host([type='radio'][checked]) .check {\n opacity: 1;\n }\n\n .submenu-icon:empty {\n display: none;\n }\n\n :host([destructive]) .item {\n color: var(--pk-color-error);\n }\n\n :host([destructive]) .item:hover:not([disabled]):not([aria-disabled='true']),\n :host([destructive]) .item:focus-visible {\n color: var(--pk-color-error);\n }\n\n .submenu-panel {\n width: max-content;\n min-width: 8rem;\n max-height: var(--pk-popup-available-height, calc(100dvh - 20px));\n overflow: auto;\n overscroll-behavior: contain;\n padding: 4px 0;\n border-radius: var(--pk-radius-md);\n background: var(--pk-color-white);\n box-shadow: var(--pk-shadow-popup);\n /* Match root menu panel — Craft body text, not gray-900. */\n color: var(--text-color, var(--pk-color-gray-700));\n }\n\n .submenu-panel ::slotted(pk-dropdown-item),\n .submenu-panel ::slotted(pk-dropdown-separator),\n .submenu-panel ::slotted(pk-dropdown-label) {\n display: block;\n }\n\n .submenu-panel[hidden] {\n display: none !important;\n }\n }\n`,\n];\n","import { html, nothing } from 'lit';\nimport { customElement, property, query, state } from '../../decorators.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { check, chevronRight } from '@verbb/plugin-kit-icons';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { HasSlotController } from '../../internal/has-slot.js';\nimport { renderIconHtml } from '../../icons/render.js';\nimport {\n syncPopupPlacementAnimation,\n waitForPopupReposition,\n} from '../../utils/popup-placement-animation.js';\nimport { pkDropdownItemStyles } from './pk-dropdown-item.styles.js';\n\nconst CHECK_ICON = renderIconHtml(check);\nconst SUBMENU_ICON = renderIconHtml(chevronRight);\n\nexport type PkDropdownItemType = 'normal' | 'checkbox' | 'radio';\n\ntype PkDropdownMenuSize = 'xs' | 'sm' | 'default' | 'lg' | 'xl';\n\n/**\n * Dropdown menu item — use inside `pk-dropdown-menu`.\n *\n * @slot - Item label\n * @slot start - Leading icon (preferred; matches pk-button)\n * @slot prefix - Alias for `start` (legacy)\n * @slot details - Trailing shortcut text\n * @slot submenu - Nested menu items (`pk-dropdown-item`, separators, labels)\n *\n * @csspart item - Menu item button\n * @csspart prefix - Leading icon wrapper (hidden when empty)\n * @csspart label - Item label wrapper\n * @csspart check - Checkbox/radio selected indicator\n */\n@customElement('pk-dropdown-item')\nexport class PkDropdownItem extends PkElement {\n static override styles = pkDropdownItemStyles;\n\n @property()\n value = '';\n\n @property({ reflect: true })\n type: PkDropdownItemType = 'normal';\n\n @property({ attribute: 'radio-group' })\n radioGroup = '';\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n @property({ type: Boolean, reflect: true })\n destructive = false;\n\n @property({ type: Boolean, reflect: true })\n checked = false;\n\n @property({ attribute: 'submenu-open', type: Boolean, reflect: true })\n submenuOpen = false;\n\n /**\n * Roving highlight index for keyboard nav (`active`).\n * Visual styling uses `:focus-visible` / hover — not this flag — so mouse-open\n * does not paint the first item selected (initial open).\n */\n @property({ type: Boolean })\n active = false;\n\n @state()\n private submenuAnimated = false;\n\n @query('.submenu-panel')\n private submenuPanelElement!: HTMLDivElement;\n\n @query('pk-popup')\n private submenuPopupElement!: HTMLElement;\n\n private readonly hasSlotController = new HasSlotController(this, 'submenu', 'details', 'start', 'prefix');\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.syncRole();\n this.syncSubmenuAria();\n this.addEventListener('click', this.handleHostClick);\n // Bind mouseenter on the host — covers the whole row, not just the button.\n this.addEventListener('mouseenter', this.handleMouseEnter);\n }\n\n override disconnectedCallback(): void {\n this.removeEventListener('click', this.handleHostClick);\n this.removeEventListener('mouseenter', this.handleMouseEnter);\n this.closeSubmenu();\n super.disconnectedCallback();\n }\n\n override updated(changed: Map<string, unknown>): void {\n if (changed.has('type') || changed.has('checked')) {\n this.syncRole();\n }\n\n if (changed.has('submenuOpen') || changed.size === 0) {\n this.syncSubmenuAria();\n }\n\n // Keyboard / external callers set `submenuOpen`; mouse path goes through openSubmenu().\n if (changed.has('submenuOpen')) {\n if (this.submenuOpen) {\n this.ensureSubmenuSurface();\n } else {\n this.submenuAnimated = false;\n }\n }\n }\n\n /** Light-DOM `slot=\"submenu\"` — public for menu keyboard (`hasSubmenu`). */\n hasSubmenu(): boolean {\n return this.hasSlotController.test('submenu');\n }\n\n private syncSubmenuAria(): void {\n const hasSubmenu = this.hasSubmenu();\n\n if (hasSubmenu) {\n this.setAttribute('aria-haspopup', 'menu');\n } else {\n this.removeAttribute('aria-haspopup');\n }\n\n this.setAttribute('aria-expanded', hasSubmenu && this.submenuOpen ? 'true' : 'false');\n }\n\n focusControl(): void {\n this.shadowRoot?.querySelector<HTMLButtonElement>('.item')?.focus({ preventScroll: true });\n }\n\n /** Callers `item.focus()` — route into the shadow control button. */\n override focus(options?: FocusOptions): void {\n const button = this.shadowRoot?.querySelector<HTMLButtonElement>('.item');\n\n if (button) {\n button.focus(options);\n return;\n }\n\n super.focus(options);\n }\n\n /** Public for menu leave-detection (`submenuElement`). */\n get submenuElement(): HTMLDivElement | null {\n return this.submenuPanelElement ?? null;\n }\n\n closeSubmenu(): void {\n this.submenuAnimated = false;\n this.submenuOpen = false;\n }\n\n /**\n * Opens the nested submenu panel (mouse + keyboard).\n * notify parent first so siblings close, then set `submenuOpen`.\n */\n openSubmenu(): void {\n if (!this.hasSubmenu() || this.disabled || !this.isConnected) {\n return;\n }\n\n this.notifyParentOfOpening();\n this.submenuOpen = true;\n }\n\n /** `notifyParentOfOpening` — sibling close + bubble to the menu. */\n private notifyParentOfOpening(): void {\n this.dispatchEvent(new CustomEvent('pk-submenu-open', {\n bubbles: true,\n composed: true,\n detail: { item: this },\n }));\n\n const parent = this.parentElement;\n\n if (!parent) {\n return;\n }\n\n // Same slot + same light-DOM parent = siblings (top-level or nested submenu).\n for (const el of parent.children) {\n if (\n el !== this\n && el instanceof PkDropdownItem\n && el.getAttribute('slot') === this.getAttribute('slot')\n && el.submenuOpen\n ) {\n el.submenuOpen = false;\n }\n }\n }\n\n private ensureSubmenuSurface(): void {\n if (!this.hasSubmenu() || this.disabled) {\n return;\n }\n\n this.submenuAnimated = true;\n\n void this.updateComplete.then(() => {\n if (!this.submenuOpen || !this.submenuPanelElement) {\n return;\n }\n\n this.submenuPanelElement.hidden = false;\n syncPopupPlacementAnimation(this.submenuPanelElement, 'right-start');\n\n void waitForPopupReposition(this.submenuPopupElement, 'right-start').then((placement) => {\n syncPopupPlacementAnimation(this.submenuPanelElement, placement);\n });\n });\n }\n\n private syncRole(): void {\n if (this.type === 'checkbox') {\n this.setAttribute('role', 'menuitemcheckbox');\n this.setAttribute('aria-checked', this.checked ? 'true' : 'false');\n return;\n }\n\n if (this.type === 'radio') {\n this.setAttribute('role', 'menuitemradio');\n this.setAttribute('aria-checked', this.checked ? 'true' : 'false');\n return;\n }\n\n this.setAttribute('role', 'menuitem');\n this.removeAttribute('aria-checked');\n }\n\n /** `handleMouseEnter` — open on hover; siblings close via notify. */\n private handleMouseEnter = (): void => {\n if (!this.hasSubmenu() || this.disabled) {\n return;\n }\n\n this.notifyParentOfOpening();\n this.submenuOpen = true;\n };\n\n /** Host has `role=\"menuitem\"` — block disabled activation; selection is handled by `pk-dropdown-menu`. */\n private handleHostClick = (event: Event): void => {\n if (this.disabled) {\n event.preventDefault();\n event.stopImmediatePropagation();\n }\n };\n\n private handleClick(event: Event): void {\n if (this.disabled) {\n event.preventDefault();\n event.stopImmediatePropagation();\n return;\n }\n\n if (this.hasSubmenu()) {\n event.preventDefault();\n this.openSubmenu();\n }\n }\n\n override render() {\n const hasSubmenu = this.hasSubmenu();\n const showCheck = this.type === 'checkbox' || this.type === 'radio';\n // Prefer start (button parity); prefix kept as legacy alias.\n const hasLeadingIcon = this.hasSlotController.test('start') || this.hasSlotController.test('prefix');\n\n return html`\n <button\n part=\"item\"\n type=\"button\"\n class=\"item\"\n ?disabled=${this.disabled}\n aria-disabled=${this.disabled ? 'true' : nothing}\n @click=${this.handleClick}\n >\n <span\n part=\"prefix\"\n class=${hasLeadingIcon ? 'prefix' : 'prefix prefix--empty'}\n >\n <slot name=\"start\"></slot>\n <slot name=\"prefix\"></slot>\n </span>\n <span part=\"label\" class=\"label\"><slot></slot></span>\n <span class=\"details\"><slot name=\"details\"></slot></span>\n ${showCheck ? html`<span part=\"check\" class=\"check\" aria-hidden=\"true\">${unsafeSVG(CHECK_ICON)}</span>` : nothing}\n ${hasSubmenu ? html`<span class=\"submenu-icon\" aria-hidden=\"true\">${unsafeSVG(SUBMENU_ICON)}</span>` : nothing}\n </button>\n ${hasSubmenu ? html`\n <pk-popup\n .active=${this.submenuOpen}\n .anchor=${this}\n placement=\"right-start\"\n .distance=${0}\n .skidding=${-4}\n flip\n shift\n auto-size=\"vertical\"\n .autoSizePadding=${10}\n hover-bridge\n style=\"--pk-popup-z-index: 1001\"\n >\n <div\n part=\"submenu\"\n class=\"submenu-panel pk-popup-content\"\n role=\"menu\"\n data-size=${resolveMenuSize(this)}\n ?hidden=${!this.submenuOpen}\n data-open=${this.submenuAnimated ? '' : nothing}\n aria-orientation=\"vertical\"\n >\n <slot name=\"submenu\"></slot>\n </div>\n </pk-popup>\n ` : nothing}\n `;\n }\n}\n\nfunction resolveMenuSize(item: PkDropdownItem): PkDropdownMenuSize {\n const panelSize = item.parentElement?.getAttribute('data-size');\n\n if (panelSize === 'xs' || panelSize === 'sm' || panelSize === 'default' || panelSize === 'lg' || panelSize === 'xl') {\n return panelSize;\n }\n\n const menu = item.closest('pk-dropdown-menu');\n const menuSize = menu?.getAttribute('size');\n\n if (menuSize === 'xs' || menuSize === 'sm' || menuSize === 'lg' || menuSize === 'xl') {\n return menuSize;\n }\n\n return 'default';\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-dropdown-item': PkDropdownItem;\n }\n}\n"],"mappings":"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"}

package/dist/chunks/{pk-dropdown-menu-D60p2-9X.js → pk-dropdown-menu-DW1wI8xQ.js} RENAMED Viewed

@@ -3,10 +3,10 @@ import { r as buttonGroupCornerRoleStyles } from "./button-group-item.styles-DYm
 import { t as activeElements } from "./active-elements-BwpXu8Lb.js";
 import { i as unregisterDismissible, n as isTopDismissible, r as registerDismissible } from "./dismissible-stack-XQUMfKO3.js";
 import { i as PkShowEvent, n as PkAfterShowEvent, r as PkHideEvent, t as PkAfterHideEvent } from "./overlay-lifecycle-D0pkTQyI.js";
-import { r as resolveElementById } from "./pk-popup-B9AgBC2V.js";
+import { r as resolveElementById } from "./pk-popup-B65tZMQH.js";
 import { i as waitForPopupReposition } from "./popup-placement-animation-WlEXnS85.js";
 import { t as animateWithClass } from "./animate-with-class-CsDwYnXL.js";
-import { n as dropdownMenuHostSizeStyles, r as dropdownMenuPanelSizeStyles, t as PkDropdownItem } from "./pk-dropdown-item-BZQS87U0.js";
+import { n as dropdownMenuHostSizeStyles, r as dropdownMenuPanelSizeStyles, t as PkDropdownItem } from "./pk-dropdown-item-D9OaG5o-.js";
 import { css, html } from "lit";
 //#region src/components/dropdown-menu/pk-dropdown-menu.styles.ts
 /**
@@ -79,8 +79,10 @@ var pkDropdownMenuStyles = [
                 flex-direction: column;
                 width: max-content;
                 min-width: 8rem;
+                max-height: var(--pk-popup-available-height, calc(100dvh - 20px));
                 margin: 0;
                 overflow: auto;
+                overscroll-behavior: contain;
                 padding: 4px 0;
                 border: 0;
                 border-radius: var(--pk-radius-md);
@@ -731,4 +733,4 @@ PkDropdownMenu = __decorate([customElement("pk-dropdown-menu")], PkDropdownMenu)
 //#endregion
 export { PkDropdownMenu as t };
-//# sourceMappingURL=pk-dropdown-menu-D60p2-9X.js.map
+//# sourceMappingURL=pk-dropdown-menu-DW1wI8xQ.js.map