npm - @verbb/plugin-kit-web - Versions diffs - 2.0.20 → 2.0.21 - Mend

@verbb/plugin-kit-web 2.0.20 → 2.0.21

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

package/CHANGELOG.md CHANGED Viewed

@@ -2,6 +2,11 @@
 ## Unreleased
+## 2.0.21 - 2026-09-28
+### Fixed
+- Checkbox, lightswitch, radio group, multi-select and multi-combobox form values now update when their submitted state changes. ([#1](https://github.com/verbb/plugin-kit/issues/1))
 ## 2.0.20 - 2026-09-24
 ### Fixed

package/dist/base/pk-form-associated-element.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pk-form-associated-element.d.ts","sourceRoot":"","sources":["../../src/base/pk-form-associated-element.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAK1C,OAAO,EAAwB,KAAK,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAChF,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C;;;;;;;;;;GAUG;AACH,8BAAsB,uBAAwB,SAAQ,SAAS;IAC3D,MAAM,CAAC,cAAc,UAAQ;IAE7B,MAAM,KAAK,UAAU,IAAI,WAAW,EAAE,CAErC;IAED,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAUxC;IAED,SAAS,CAAC,QAAQ,CAAC,SAAS,mBAA0B;IAEtD,mDAAmD;IACnD,KAAK,CAAC,EAAE,gBAAgB,GAAG,mBAAmB,GAAG,iBAAiB,CAAC;IAEnE,yFAAyF;IACzF,mBAAmB,EAAE,MAAM,EAAE,CAAa;IAE1C,UAAU,EAAE,WAAW,EAAE,CAAM;IAE/B,qCAAqC;IAErC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE3B,uEAAuE;IAEvE,QAAQ,UAAS;IAEjB,yDAAyD;IAEzD,QAAQ,UAAS;IAEjB,0EAA0E;IAE1E,WAAW,EAAE,MAAM,GAAG,IAAI,CAAQ;IAGlC,eAAe,UAAS;IAGxB,aAAa,UAAS;IAEtB,OAAO,CAAC,aAAa,CAAgB;IAErC,OAAO,CAAC,cAAc,CAAC,CAAiB;;IAO/B,iBAAiB,IAAI,IAAI;IAUzB,oBAAoB,IAAI,IAAI;IAY5B,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;~~IAuBtC~~,YAAY,CAAC,QAAQ,EAAE,cAAc,GAAG,IAAI;IAKrD,wEAAwE;IACxE,SAAS,CAAC,mBAAmB,IAAI,WAAW,GAAG,IAAI;IAInD,oFAAoF;IACpF,SAAS,CAAC,kBAAkB,IAAI,IAAI;IAEpC,SAAS,CAAC,qBAAqB,IAAI,IAAI;IAUvC,SAAS,CAAC,kBAAkB,IAAI,IAAI;IAIpC,iBAAiB,IAAI,IAAI;IAUzB,oBAAoB,CAAC,UAAU,EAAE,OAAO,GAAG,IAAI;IAK/C,wBAAwB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,QAAQ,GAAG,IAAI,EAAE,OAAO,CAAC,EAAE,SAAS,GAAG,cAAc,GAAG,IAAI;IAM5G,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAMrB;IAED,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;IAED,IAAI,MAAM,IAAI,QAAQ,CAErB;IAED,IAAI,QAAQ,IAAI,aAAa,CAE5B;IAED,IAAI,YAAY,IAAI,OAAO,CAE1B;IAED,IAAI,iBAAiB,IAAI,MAAM,CAE9B;IAED,OAAO,IAAI,eAAe,GAAG,IAAI;IAIjC,iEAAiE;IACjE,aAAa,IAAI,OAAO;IAKxB,wEAAwE;IACxE,cAAc,IAAI,OAAO;IAMzB,wDAAwD;IACxD,aAAa,IAAI,IAAI;IAMrB,kDAAkD;IAClD,iBAAiB,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAoBxC,SAAS,KAAK,gBAAgB,IAAI,WAAW,GAAG,SAAS,CAExD;IAED,SAAS,KAAK,aAAa,IAAI,WAAW,EAAE,CAG3C;IAED,SAAS,CAAC,YAAY,CAClB,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,QAAQ,GAAG,IAAI,EACtC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,QAAQ,GAAG,IAAI,GACxC,IAAI;IAIP,SAAS,CAAC,QAAQ,CACd,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,QAAQ,GAAG,IAAI,EACtC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,QAAQ,GAAG,IAAI,GACxC,IAAI;IAIP,SAAS,CAAC,cAAc,IAAI,IAAI;IAiDhC,SAAS,CAAC,gBAAgB,IAAI,IAAI;IAWlC,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,GAAG,IAAI;IAcvD,SAAS,CAAC,aAAa,IAAI,IAAI;IAE/B,SAAS,CAAC,mBAAmB,IAAI,IAAI;IAErC,SAAS,CAAC,gBAAgB,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,QAAQ,GAAG,IAAI,GAAG,IAAI;IAEzE,OAAO,CAAC,WAAW,CAOjB;IAEF,OAAO,CAAC,iBAAiB,CASvB;CACL"}
1	+ {"version":3,"file":"pk-form-associated-element.d.ts","sourceRoot":"","sources":["../../src/base/pk-form-associated-element.ts"],"names":[],"mappings":"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"}

package/dist/chunks/{pk-autocomplete-IFL-u-RF.js → pk-autocomplete-qy2Psvqm.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 import { t as icons_exports } from "./icons-BR8JcQj2.js";
 import { a as query, i as property, o as state, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
 import { t as iconStyles } from "./icon.styles-BLTWLqYp.js";
-import { t as PkFormAssociatedElement } from "./pk-form-associated-element-CCQALRGB.js";
+import { t as PkFormAssociatedElement } from "./pk-form-associated-element-GxX5lbnk.js";
 import { t as MirrorValidator } from "./mirror-validator-DCjNYrrx.js";
 import { t as HasSlotController } from "./has-slot-8BvCt_qo.js";
 import { n as renderIconHtml } from "./render-Dvc3MHQR.js";
@@ -989,4 +989,4 @@ PkAutocomplete = __decorate([customElement("pk-autocomplete")], PkAutocomplete);
 //#endregion
 export { PkAutocomplete as t };
-//# sourceMappingURL=pk-autocomplete-IFL-u-RF.js.map
+//# sourceMappingURL=pk-autocomplete-qy2Psvqm.js.map

package/dist/chunks/{pk-autocomplete-IFL-u-RF.js.map → pk-autocomplete-qy2Psvqm.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pk-autocomplete-IFL-u-RF.js","names":[],"sources":["../../src/components/autocomplete/pk-autocomplete.styles.ts","../../src/components/autocomplete/pk-autocomplete.ts"],"sourcesContent":["import { css } from 'lit';\n\nimport { iconStyles } from '../../base/icon.styles.js';\nimport { popupContentAnimationStyles } from '../../styles/popup-content-animation.styles.js';\n\n/*\n Autocomplete chrome matches `pk-input` (text field), not Combobox’s slate\n * select fill / chevron affordance. Panel / listbox tokens stay shared with\n * Combobox so suggestion rows look the same.\n /\nexport const pkAutocompleteStyles = [\n popupContentAnimationStyles,\n css`\n ${iconStyles}\n @layer pk-component {\n :host {\n display: block;\n position: relative;\n 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 / Match pk-input control tokens — not Combobox slate fill. /\n --pk-autocomplete-padding-block: 6px;\n --pk-autocomplete-padding-inline: 8px;\n --pk-autocomplete-control-gap: 6px;\n --pk-autocomplete-decoration-size: 0.75rem;\n --pk-autocomplete-font-size: var(--pk-font-size-base);\n --pk-select-item-min-height: 0;\n --pk-select-item-padding-block: 6px;\n --pk-select-item-padding-inline: 10px;\n --pk-select-item-padding-inline-end: 2rem;\n --pk-select-item-font-size: 14px;\n --pk-select-item-line-height: 1.4;\n --pk-select-item-indicator-size: 0.75rem;\n --pk-select-item-indicator-inset: 0.5rem;\n --pk-select-group-label-font-size: 12px;\n }\n\n / width=\"full\" is the documented stretch opt-in; host already fills by default. /\n :host([width='full']) {\n display: block;\n width: 100%;\n }\n\n .control {\n display: flex;\n align-items: center;\n gap: var(--pk-autocomplete-control-gap);\n width: 100%;\n max-width: 100%;\n min-width: 0;\n margin: 0;\n padding-block: var(--pk-autocomplete-padding-block);\n padding-inline: var(--pk-autocomplete-padding-inline);\n border: var(--pk-input-border);\n border-radius: var(--pk-input-border-radius, var(--pk-radius-sm));\n background: var(--pk-input-bg);\n background-clip: padding-box;\n color: var(--pk-color-gray-700);\n font: inherit;\n font-size: var(--pk-autocomplete-font-size);\n line-height: var(--pk-input-control-line-height, 1.25rem);\n white-space: nowrap;\n cursor: text;\n outline: none;\n box-sizing: border-box;\n transition: border-color 0.12s ease, box-shadow 0.12s ease;\n }\n\n /\n * Craft text focus: resting border stays; ring is box-shadow only\n * (--pk-input-focus-shadow already includes the 1px edge). Same when the\n * suggestion panel is open — still a text field, not a select trigger.\n /\n :host(:not([invalid]):not(:state(user-invalid))) .control:focus-within,\n :host(:not([invalid]):not(:state(user-invalid))[data-state='focus-visible']) .control,\n :host(:not([invalid]):not(:state(user-invalid))) .control[data-popup-open] {\n box-shadow: var(--pk-input-focus-shadow);\n }\n\n .control.is-disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n .control-start,\n .control-end {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n line-height: 0;\n color: var(--pk-color-gray-400);\n }\n\n slot[name='start']::slotted(svg),\n slot[name='end']::slotted(svg) {\n width: var(--pk-autocomplete-decoration-size);\n height: var(--pk-autocomplete-decoration-size);\n }\n\n .autocomplete-input {\n flex: 1 1 auto;\n width: 100%;\n min-width: 0;\n margin: 0;\n padding: 0;\n border: 0;\n background: transparent;\n color: inherit;\n font: inherit;\n line-height: var(--pk-input-control-line-height, 1.25rem);\n outline: none;\n }\n\n .autocomplete-input::placeholder {\n color: var(--pk-input-placeholder-color, var(--pk-color-gray-400));\n }\n\n / Clear: flex trailing action — same contract as pk-input / Combobox clear. /\n .clear-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n align-self: stretch;\n box-sizing: border-box;\n width: calc(var(--pk-autocomplete-decoration-size) + var(--pk-autocomplete-padding-inline));\n height: auto;\n min-height: var(--pk-autocomplete-decoration-size);\n margin-block: calc(-1 var(--pk-autocomplete-padding-block));\n /* Match pk-copy-button[slot=end]: pull into padding but leave a 4px glyph inset. /\n margin-inline-end: calc(-1 var(--pk-autocomplete-padding-inline) + 4px);\n margin-inline-start: 0;\n padding: 0;\n border: 0;\n border-radius: 0;\n background: transparent;\n color: var(--pk-color-gray-600);\n cursor: pointer;\n outline: none;\n }\n\n .clear-button:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n .clear-button-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n line-height: 0;\n pointer-events: none;\n }\n\n .clear-button-icon svg {\n display: block;\n width: 0.75rem;\n height: 0.75rem;\n }\n\n .value-input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n\n .panel ::slotted(pk-separator) {\n margin: 4px 0;\n }\n\n .panel {\n width: max-content;\n min-width: var(--pk-autocomplete-anchor-width, 8rem);\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 color: var(--pk-color-gray-700);\n outline: none;\n }\n\n .panel-body {\n max-height: 16rem;\n overflow: auto;\n }\n\n .panel:not([data-open]):not(.closing) {\n opacity: 0;\n pointer-events: none;\n }\n\n .panel[data-open]:not(.closing) {\n opacity: 1;\n pointer-events: auto;\n }\n\n .panel[hidden] {\n display: none !important;\n }\n\n .empty,\n .async-status {\n display: flex;\n align-items: center;\n margin: 0;\n min-height: var(--pk-select-item-min-height, var(--pk-input-height));\n padding-block: var(--pk-select-item-padding-block);\n padding-inline: var(--pk-select-item-padding-inline);\n border: var(--pk-select-trigger-border-width, 1px) solid transparent;\n box-sizing: border-box;\n color: var(--pk-color-gray-500);\n font-size: var(--pk-select-item-font-size);\n line-height: var(--pk-select-item-line-height);\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-within,\n :host([invalid][data-state='focus-visible']) .control,\n :host(:state(user-invalid)) .control:focus-within,\n :host(:state(user-invalid)[data-state='focus-visible']) .control {\n box-shadow: var(--pk-input-invalid-focus-shadow);\n }\n\n :host([size='xs']) {\n --pk-autocomplete-padding-block: 4px;\n --pk-autocomplete-padding-inline: 6px;\n --pk-autocomplete-control-gap: 4px;\n --pk-autocomplete-decoration-size: 0.625rem;\n --pk-autocomplete-font-size: 11px;\n --pk-select-item-padding-block: 4px;\n --pk-select-item-padding-inline: 8px;\n --pk-select-item-padding-inline-end: 1.75rem;\n --pk-select-item-font-size: 11px;\n --pk-select-group-label-font-size: 11px;\n }\n\n :host([size='xs']) .clear-button-icon svg {\n width: 0.625rem;\n height: 0.625rem;\n }\n\n :host([size='sm']) {\n --pk-autocomplete-padding-block: 4px;\n --pk-autocomplete-padding-inline: 8px;\n --pk-autocomplete-control-gap: 4px;\n --pk-autocomplete-decoration-size: 0.6875rem;\n --pk-autocomplete-font-size: 12px;\n --pk-select-item-padding-block: 6px;\n --pk-select-item-padding-inline: 10px;\n --pk-select-item-padding-inline-end: 1.75rem;\n --pk-select-item-font-size: 12px;\n --pk-select-group-label-font-size: 12px;\n }\n\n :host([size='sm']) .clear-button-icon svg {\n width: 0.6875rem;\n height: 0.6875rem;\n }\n\n :host([size='lg']) {\n --pk-autocomplete-padding-block: 8px;\n --pk-autocomplete-padding-inline: 12px;\n --pk-autocomplete-control-gap: 8px;\n --pk-autocomplete-decoration-size: 0.875rem;\n --pk-autocomplete-font-size: var(--pk-font-size-base);\n --pk-select-item-padding-block: 8px;\n --pk-select-item-padding-inline: 12px;\n --pk-select-item-font-size: 14px;\n --pk-select-group-label-font-size: 14px;\n }\n\n :host([size='xl']) {\n --pk-autocomplete-padding-block: 10px;\n --pk-autocomplete-padding-inline: 16px;\n --pk-autocomplete-control-gap: 8px;\n --pk-autocomplete-decoration-size: 1rem;\n --pk-autocomplete-font-size: 16px;\n --pk-select-item-padding-block: 10px;\n --pk-select-item-padding-inline: 14px;\n --pk-select-item-padding-inline-end: 2.25rem;\n --pk-select-item-font-size: 14px;\n --pk-select-group-label-font-size: 16px;\n }\n\n :host([size='xl']) .clear-button-icon svg {\n width: 0.875rem;\n height: 0.875rem;\n }\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 { xmark, renderIconHtml } from '../../icons/index.js';\nimport { LiveRegion, uniqueId } from '../../a11y/focus.js';\nimport { isTopDismissible, registerDismissible, unregisterDismissible } from '../../a11y/dismissible-stack.js';\nimport { scrollIntoView } from '../../a11y/scroll-lock.js';\nimport { PkFormAssociatedElement } from '../../base/pk-form-associated-element.js';\nimport { HasSlotController } from '../../internal/has-slot.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 type { PkValidator } from '../../validators/types.js';\nimport { MirrorValidator } from '../../validators/mirror-validator.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 {\n handleListboxKeyDown,\n isListboxTypeToSelectKey,\n LISTBOX_NAVIGATION_KEYS,\n} from '../../utils/listbox-keyboard.js';\nimport {\n syncPopupPlacementAnimation,\n waitForPopupReposition,\n} from '../../utils/popup-placement-animation.js';\nimport { waitForPopupContentExitAnimation } from '../../utils/popup-content-exit.js';\nimport { isEventInsideOverlay, isPointerInsideOverlay } from '../../utils/popup-pointer.js';\nimport { syncFilteredOptions } from '../../internal/sync-filtered-options.js';\nimport {\n AsyncOptionFetcher,\n type PkAsyncOptionFetchHandler,\n type PkAsyncOptionItem,\n} from '../../utils/async-option-fetch.js';\nimport { matchesOptionFilter, type PkOptionFilter } from '../../utils/option-filter.js';\nimport type { PkOption } from '../select/pk-option.js';\nimport type { PkOptionGroup } from '../select/pk-option-group.js';\n// Freeform field chrome matches pk-input — not Combobox’s select fill / chevron.\nimport { pkAutocompleteStyles } from './pk-autocomplete.styles.js';\n\nexport type PkAutocompleteSize = 'xs' \| 'sm' \| 'default' \| 'lg' \| 'xl';\n\nexport type PkAutocompleteFilter = PkOptionFilter;\n\nexport type PkAutocompleteAsyncOption = PkAsyncOptionItem;\n\nexport type PkAutocompleteFetchHandler = PkAsyncOptionFetchHandler;\n\nconst XMARK_ICON = renderIconHtml(xmark);\n\n/*\n Autocomplete — freeform text field with optional list suggestions.\n \n Unlike Combobox, the committed `value` is the input text. Choosing a\n * suggestion inserts that option’s value into the field; typing always wins.\n \n @slot start - Presentational decoration before the input (e.g. icons)\n * @slot end - Presentational decoration before the clear control\n * @slot - `pk-option` and `pk-option-group` items\n \n @csspart control - Input control wrapper\n * @csspart start - Host start decoration container\n * @csspart end - Host end decoration container\n * @csspart input - Autocomplete text input\n * @csspart clear-button - Clear value button\n * @csspart panel-body - Scrollable listbox region inside the popup panel\n * @csspart empty - Empty-state message\n * @csspart async-status - Async search status message\n \n @dependency pk-popup - Positioned suggestion panel host.\n /\n@customElement('pk-autocomplete')\nexport class PkAutocomplete extends PkFormAssociatedElement {\n static override styles = pkAutocompleteStyles;\n\n static override get validators(): PkValidator[] {\n return [\n ...super.validators,\n MirrorValidator(),\n {\n observedAttributes: ['required'],\n checkValidity: (element) => {\n const field = element as unknown as PkAutocomplete;\n const result = {\n message: 'Please fill out this field.',\n isValid: true,\n invalidKeys: [] as ReturnType<PkValidator['checkValidity']>['invalidKeys'],\n };\n\n if (!field.required \|\| field.value.trim()) {\n return result;\n }\n\n result.isValid = false;\n result.invalidKeys.push('valueMissing');\n return result;\n },\n },\n ];\n }\n\n override assumeInteractionOn = ['blur', 'input'];\n\n @property({ type: Boolean, reflect: true })\n open = false;\n\n @property({ reflect: true })\n placement: PkPopupPlacement = 'bottom-start';\n\n /* Gap between the control and listbox panel in px (default: 6). /\n @property({ attribute: 'side-offset', type: Number })\n sideOffset = 6;\n\n @property({ type: Boolean, reflect: true })\n clearable = false;\n\n @property({ attribute: 'with-clear', type: Boolean })\n withClear = false;\n\n /* When true, the first matching option is highlighted on open or when filtering. /\n @property({ attribute: 'auto-highlight', type: Boolean })\n autoHighlight = false;\n\n @property({ type: Boolean, reflect: true })\n invalid = false;\n\n @property({ reflect: true })\n size: PkAutocompleteSize = 'default';\n\n /* When `full`, the control stretches to the host width. /\n @property({ reflect: true })\n width?: 'full';\n\n /* Empty by default — consumers opt in when a prompt is useful. /\n @property()\n placeholder = '';\n\n @property({ attribute: 'empty-message' })\n emptyMessage = 'No options found.';\n\n /* Freeform field value — always mirrors the visible input text. /\n @property()\n value = '';\n\n @property({ attribute: 'default-value' })\n defaultValue = '';\n\n @property()\n label = '';\n\n @property()\n instructions = '';\n\n @property({ attribute: 'aria-label' })\n ariaLabel: string \| null = null;\n\n /\n Whether arrow-key focus loops from the last option back to the first (and vice versa).\n * Default: `true` (same as Combobox).\n /\n @property({ attribute: 'loop-focus', type: Boolean })\n loopFocus = true;\n\n /* Custom filter — `(option, query) => boolean`. Defaults to label/value substring match. /\n @property({ attribute: false })\n filter: PkAutocompleteFilter \| null = null;\n\n /\n When true, options are loaded via `fetchOptions` as the user types instead of\n * filtering static `pk-option` children.\n /\n @property({ type: Boolean, reflect: true })\n async = false;\n\n /* Message shown while async results are loading. /\n @property({ attribute: 'loading-message' })\n loadingMessage = 'Searching…';\n\n /* Message shown before the user types in async mode. /\n @property({ attribute: 'start-typing-message' })\n startTypingMessage = 'Start typing to search…';\n\n /* Remote search handler — `(query, signal) => Promise<options>`. */\n @property({ attribute: false })\n fetchOptions: PkAutocompleteFetchHandler \| null = null;\n\n private readonly hasSlotController = new HasSlotController(this, 'start', 'end');\n\n private readonly listboxId = uniqueId('pk-autocomplete-listbox');\n private readonly inputId = uniqueId('pk-autocomplete-input');\n\n @query('pk-popup')\n private popupElement!: PkPopup;\n\n @query('.control')\n private controlElement!: HTMLElement;\n\n @query('.control-input')\n private controlInput?: HTMLInputElement;\n\n @query('.value-input')\n override input!: HTMLInputElement;\n\n private get panelElement(): HTMLDivElement \| null {\n return this.popupElement?.getContentElement() as HTMLDivElement \| null ?? null;\n }\n\n private get panelBodyElement(): HTMLDivElement \| undefined {\n return this.panelElement?.querySelector('.panel-body') as HTMLDivElement \| undefined;\n }\n\n private get listScrollContainer(): HTMLElement {\n return this.panelBodyElement ?? this.panelElement ?? this;\n }\n\n private options: PkOption[] = [];\n\n @state()\n private highlightedIndex = -1;\n\n @state()\n private closing = false;\n\n @state()\n private panelAnimated = false;\n\n private dismissRegistered = false;\n private panelEventTarget: HTMLElement \| null = null;\n private optionsObserver?: MutationObserver;\n private liveRegion?: LiveRegion;\n private asyncFetcher: AsyncOptionFetcher \| null = null;\n\n @state()\n private asyncLoading = false;\n\n @state()\n private asyncError: string \| null = null;\n\n override connectedCallback(): void {\n this.instructions = this.getAttribute('hint') ?? this.instructions;\n this.refreshOptions();\n super.connectedCallback();\n this.syncHasValueAttribute();\n this.addEventListener('pk-listbox-keydown', this.handleListboxKeyDownEvent as EventListener);\n this.optionsObserver = new MutationObserver(() => {\n this.handleOptionsMutation({ render: true });\n });\n this.optionsObserver.observe(this, { childList: true, subtree: true });\n }\n\n override disconnectedCallback(): void {\n this.unbindPanelEvents();\n this.removeEventListener('pk-listbox-keydown', this.handleListboxKeyDownEvent as EventListener);\n this.optionsObserver?.disconnect();\n this.liveRegion?.destroy();\n this.liveRegion = undefined;\n this.asyncFetcher?.cancel();\n void this.closePanel('api');\n super.disconnectedCallback();\n }\n\n override firstUpdated(changed: PropertyValues): void {\n super.firstUpdated(changed);\n\n if (!this.value && this.defaultValue) {\n this.value = this.defaultValue;\n }\n\n this.applyOptionState();\n }\n\n override updated(changed: PropertyValues): void {\n if (changed.has('value')) {\n this.syncHasValueAttribute();\n this.applyOptionState();\n }\n\n super.updated(changed);\n }\n\n protected override get validationTarget(): HTMLElement \| undefined {\n return this.controlInput ?? this.controlElement;\n }\n\n protected override getAriaMirrorTarget(): HTMLElement \| null {\n return this.controlInput ?? this.controlElement ?? null;\n }\n\n protected override syncFormValue(): void {\n if (!this.name) {\n this.setFormValue(null);\n return;\n }\n\n this.setFormValue(this.value);\n }\n\n private syncHasValueAttribute(): void {\n this.toggleAttribute('data-has-value', Boolean(this.value));\n }\n\n private refreshOptions(): void {\n this.options = [...this.querySelectorAll('pk-option')] as PkOption[];\n }\n\n private handleOptionsMutation(options: { render?: boolean } = {}): void {\n this.refreshOptions();\n this.applyOptionState();\n\n if (options.render) {\n this.requestUpdate();\n }\n }\n\n private bindPanelEvents(): void {\n const panel = this.panelElement;\n\n if (!panel \|\| this.panelEventTarget === panel) {\n return;\n }\n\n this.unbindPanelEvents();\n this.panelEventTarget = panel;\n panel.addEventListener('pk-option-select', this.handleOptionSelect as EventListener);\n panel.addEventListener('pk-option-highlight', this.handleOptionHighlight as EventListener);\n panel.addEventListener('pk-listbox-keydown', this.handleListboxKeyDownEvent as EventListener);\n }\n\n private unbindPanelEvents(): void {\n if (!this.panelEventTarget) {\n return;\n }\n\n this.panelEventTarget.removeEventListener('pk-option-select', this.handleOptionSelect as EventListener);\n this.panelEventTarget.removeEventListener('pk-option-highlight', this.handleOptionHighlight as EventListener);\n this.panelEventTarget.removeEventListener('pk-listbox-keydown', this.handleListboxKeyDownEvent as EventListener);\n this.panelEventTarget = null;\n }\n\n private isOptionInHiddenGroup(option: PkOption): boolean {\n const group = option.closest('pk-option-group') as PkOptionGroup \| null;\n return Boolean(group?.hidden);\n }\n\n private getFilterQuery(): string {\n if (!this.open) {\n return '';\n }\n\n return this.value.trim().toLowerCase();\n }\n\n private get usesAsyncSearch(): boolean {\n return this.async && Boolean(this.fetchOptions);\n }\n\n private getVisibleOptions(): PkOption[] {\n if (this.usesAsyncSearch) {\n return this.options.filter((option) => !this.isOptionInHiddenGroup(option));\n }\n\n const filter = this.getFilterQuery();\n\n return this.options.filter((option) => {\n if (this.isOptionInHiddenGroup(option)) {\n return false;\n }\n\n if (!filter) {\n return true;\n }\n\n return matchesOptionFilter(option, filter, this.filter);\n });\n }\n\n private getEnabledVisibleOptions(): PkOption[] {\n return this.getVisibleOptions().filter((option) => !option.disabled);\n }\n\n private clearAsyncOptionNodes(): void {\n this.querySelectorAll(':scope > pk-option, :scope > pk-option-group, :scope > pk-separator')\n .forEach((node) => node.remove());\n }\n\n private renderAsyncOptionNodes(items: PkAutocompleteAsyncOption[]): void {\n this.clearAsyncOptionNodes();\n\n for (const item of items) {\n const option = document.createElement('pk-option');\n option.value = item.value;\n option.textContent = item.label;\n this.append(option);\n }\n\n this.handleOptionsMutation({ render: true });\n }\n\n private scheduleAsyncFetch(query: string): void {\n this.ensureAsyncFetcher().schedule(query);\n }\n\n private ensureAsyncFetcher(): AsyncOptionFetcher {\n if (!this.asyncFetcher) {\n this.asyncFetcher = new AsyncOptionFetcher(\n () => this.fetchOptions,\n {\n errorLabel: 'autocomplete options',\n onLoading: () => {\n this.asyncLoading = true;\n this.asyncError = null;\n // Drop previous results so loading never stacks under a stale list.\n this.renderAsyncOptionNodes([]);\n },\n onResults: (results) => {\n this.renderAsyncOptionNodes(results);\n },\n onError: (message) => {\n this.asyncError = message;\n },\n onSettled: () => {\n this.asyncLoading = false;\n },\n onEmptyQuery: () => {\n this.asyncLoading = false;\n this.asyncError = null;\n this.renderAsyncOptionNodes([]);\n },\n },\n );\n }\n\n return this.asyncFetcher;\n }\n\n private getAsyncStatusMessage(): string \| null {\n if (!this.usesAsyncSearch \|\| !this.open) {\n return null;\n }\n\n if (this.asyncLoading) {\n return this.loadingMessage;\n }\n\n if (this.asyncError) {\n return this.asyncError;\n }\n\n const query = this.value.trim();\n\n if (!query) {\n return this.startTypingMessage;\n }\n\n if (this.getEnabledVisibleOptions().length === 0) {\n return `No matches for \"${query}\".`;\n }\n\n return null;\n }\n\n private applyOptionState(): void {\n const visible = this.getVisibleOptions();\n const filterQuery = this.open ? this.getFilterQuery() : '';\n\n // Freeform: never mark options as the “selected” form value — the text is.\n syncFilteredOptions({\n host: this,\n options: this.options,\n visible,\n listboxId: this.listboxId,\n filterQuery,\n isSelected: () => false,\n });\n\n this.syncValueInput();\n\n if (this.open) {\n this.syncHighlight();\n this.announceFilterResults();\n }\n }\n\n private syncValueInput(): void {\n if (!this.input) {\n return;\n }\n\n this.input.value = this.value;\n this.input.required = this.required;\n }\n\n private resetHighlightedIndexOnOpen(): void {\n this.highlightedIndex = this.autoHighlight ? 0 : -1;\n }\n\n private syncHighlight(): void {\n const enabled = this.getEnabledVisibleOptions();\n\n for (const option of this.options) {\n option.highlighted = false;\n option.focusIndex = -1;\n }\n\n if (enabled.length === 0 \|\| this.highlightedIndex < 0) {\n return;\n }\n\n if (this.highlightedIndex >= enabled.length) {\n this.highlightedIndex = enabled.length - 1;\n }\n\n const highlighted = enabled[this.highlightedIndex];\n\n if (highlighted) {\n highlighted.highlighted = true;\n // Keep focus on the text field; use aria-activedescendant for the option.\n highlighted.focusIndex = -1;\n scrollIntoView(highlighted, this.listScrollContainer, 'vertical', 'auto');\n this.controlInput?.focus({ preventScroll: true });\n }\n }\n\n private getActiveDescendantId(): string \| null {\n const highlighted = this.getEnabledVisibleOptions()[this.highlightedIndex];\n return highlighted?.optionId \|\| null;\n }\n\n private announceFilterResults(): void {\n if (!this.liveRegion) {\n this.liveRegion = new LiveRegion('polite');\n }\n\n const count = this.getEnabledVisibleOptions().length;\n const filter = this.getFilterQuery();\n\n if (!filter) {\n return;\n }\n\n this.liveRegion.announce(\n count === 0\n ? `${this.emptyMessage}`\n : `${count} ${count === 1 ? 'result' : 'results'} available`,\n );\n }\n\n private openPanel(): Promise<void> {\n const anchor = this.controlElement;\n\n if (!anchor) {\n return Promise.resolve();\n }\n\n if (this.open) {\n this.controlInput?.focus({ preventScroll: true });\n return Promise.resolve();\n }\n\n if (this.closing) {\n return Promise.resolve();\n }\n\n this.dispatchEvent(new PkShowEvent());\n this.closing = false;\n this.panelAnimated = false;\n this.open = true;\n this.applyOptionState();\n this.resetHighlightedIndexOnOpen();\n\n if (this.usesAsyncSearch) {\n this.asyncError = null;\n // Freeform async: value is the query. Clear stale nodes and show loading\n // immediately when reopening with text so “Searching…” never sits under\n // the previous result list during debounce.\n this.renderAsyncOptionNodes([]);\n const query = this.value.trim();\n this.asyncLoading = Boolean(query);\n this.scheduleAsyncFetch(query);\n }\n\n this.style.setProperty('--pk-autocomplete-anchor-width', `${anchor.getBoundingClientRect().width}px`);\n this.popupElement.active = true;\n\n if (this.panelElement) {\n this.panelElement.hidden = false;\n syncPopupPlacementAnimation(this.panelElement, this.placement);\n }\n\n this.registerDismissHandlers();\n this.syncHighlight();\n this.controlInput?.focus({ preventScroll: true });\n\n return this.updateComplete.then(async () => {\n const placement = await waitForPopupReposition(this.popupElement, this.placement, 300, {\n requireEvent: true,\n });\n\n if (this.panelElement) {\n syncPopupPlacementAnimation(this.panelElement, placement);\n }\n\n this.panelAnimated = true;\n this.bindPanelEvents();\n this.refreshOptions();\n this.controlInput?.focus({ preventScroll: true });\n\n this.dispatchEvent(new PkAfterShowEvent());\n this.dispatchEvent(new CustomEvent('pk-open-change', {\n detail: { open: true },\n bubbles: true,\n composed: true,\n }));\n });\n }\n\n private async closePanel(source: PkOverlaySource = 'unknown'): Promise<void> {\n if (!this.open \|\| this.closing) {\n return;\n }\n\n const hideEvent = new PkHideEvent(source);\n\n if (!this.dispatchEvent(hideEvent)) {\n return;\n }\n\n this.unbindPanelEvents();\n this.closing = true;\n this.panelAnimated = false;\n await waitForPopupContentExitAnimation(this.panelElement);\n\n this.open = false;\n this.closing = false;\n this.panelAnimated = false;\n\n if (this.panelElement) {\n this.panelElement.hidden = true;\n this.panelElement.removeAttribute('data-side');\n }\n\n this.popupElement.active = false;\n this.unregisterDismissHandlers();\n this.applyOptionState();\n\n if (this.usesAsyncSearch) {\n this.asyncFetcher?.cancel();\n this.asyncLoading = false;\n this.asyncError = null;\n this.renderAsyncOptionNodes([]);\n }\n\n if (source !== 'light-dismiss' && source !== 'pointer-dismiss') {\n this.controlInput?.focus({ preventScroll: true });\n } else {\n this.controlInput?.blur();\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 private registerDismissHandlers(): void {\n registerDismissible(this);\n this.dismissRegistered = true;\n document.addEventListener('pointerdown', this.onDocumentPointerDown, true);\n document.addEventListener('keydown', this.onDocumentKeyDown, true);\n }\n\n private unregisterDismissHandlers(): void {\n if (this.dismissRegistered) {\n unregisterDismissible(this);\n this.dismissRegistered = false;\n }\n\n document.removeEventListener('pointerdown', this.onDocumentPointerDown, true);\n document.removeEventListener('keydown', this.onDocumentKeyDown, true);\n }\n\n private onDocumentPointerDown = (event: PointerEvent): void => {\n if (isPointerInsideOverlay(event, {\n anchor: this.controlElement,\n panel: this.panelElement,\n })) {\n return;\n }\n\n void this.closePanel('light-dismiss');\n };\n\n private onDocumentKeyDown = (event: KeyboardEvent): void => {\n if (!this.open) {\n return;\n }\n\n if (event.key === 'Escape') {\n if (!isTopDismissible(this)) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n void this.closePanel('escape');\n return;\n }\n\n const isListboxKey = LISTBOX_NAVIGATION_KEYS.has(event.key) \|\| isListboxTypeToSelectKey(event);\n\n if (!isListboxKey) {\n return;\n }\n\n const panel = this.panelElement;\n const path = event.composedPath();\n const focusInPortaledPanel = Boolean(panel && path.includes(panel));\n\n if (!focusInPortaledPanel) {\n return;\n }\n\n if (!isEventInsideOverlay(event, {\n anchor: this.controlElement,\n panel,\n })) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n this.onListboxKeyDown(event);\n };\n\n private handleOptionSelect = (event: CustomEvent<{ value: string }>): void => {\n const { value } = event.detail;\n this.commitValue(value, { close: true });\n };\n\n private handleOptionHighlight = (event: CustomEvent<{ value: string }>): void => {\n if (!this.open) {\n return;\n }\n\n const enabled = this.getEnabledVisibleOptions();\n const index = enabled.findIndex((option) => option.value === event.detail.value);\n\n if (index === -1 \|\| index === this.highlightedIndex) {\n return;\n }\n\n this.highlightedIndex = index;\n this.syncHighlight();\n };\n\n private commitValue(next: string, { close = false, emit = true } = {}): void {\n const changed = this.value !== next;\n this.value = next;\n this.syncHasValueAttribute();\n this.applyOptionState();\n\n if (close) {\n void this.closePanel('api');\n }\n\n if (changed && emit) {\n this.emitValueChange();\n }\n }\n\n private handleClear(event: Event): void {\n event.preventDefault();\n event.stopPropagation();\n this.commitValue('');\n this.dispatchEvent(new PkClearEvent());\n this.controlInput?.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 handleInput(event: Event): void {\n const next = (event.target as HTMLInputElement).value;\n this.value = next;\n this.syncHasValueAttribute();\n this.highlightedIndex = this.autoHighlight ? 0 : -1;\n this.applyOptionState();\n this.emitValueChange();\n\n if (this.usesAsyncSearch) {\n this.asyncError = null;\n this.scheduleAsyncFetch(next.trim());\n }\n\n if (!this.open) {\n void this.openPanel();\n }\n }\n\n private handleControlMouseDown = (event: MouseEvent): void => {\n if (this.disabled) {\n return;\n }\n\n const path = event.composedPath();\n const isInteractiveChild = path.some((node) => {\n if (!(node instanceof HTMLElement)) {\n return false;\n }\n\n return node.classList.contains('clear-button');\n });\n\n if (isInteractiveChild) {\n return;\n }\n\n const isInput = event.target === this.controlInput;\n\n if (!this.open && !this.closing) {\n if (!isInput) {\n event.preventDefault();\n }\n\n this.controlInput?.focus({ preventScroll: true });\n void this.openPanel();\n return;\n }\n\n if (!isInput) {\n event.preventDefault();\n this.controlInput?.focus({ preventScroll: true });\n }\n };\n\n private handleInputKeyDown(event: KeyboardEvent): void {\n if (event.key === 'Escape' && this.open) {\n event.preventDefault();\n void this.closePanel('escape');\n return;\n }\n\n if (event.key === 'ArrowDown' && !this.open) {\n event.preventDefault();\n void this.openPanel();\n return;\n }\n\n if (!this.open) {\n return;\n }\n\n if (event.key === 'Enter') {\n const enabled = this.getEnabledVisibleOptions();\n\n if (this.highlightedIndex >= 0 && enabled[this.highlightedIndex]) {\n event.preventDefault();\n this.commitValue(enabled[this.highlightedIndex]!.value, { close: true });\n } else {\n void this.closePanel('api');\n }\n\n return;\n }\n\n if (LISTBOX_NAVIGATION_KEYS.has(event.key) && event.key !== 'Enter' && event.key !== 'Escape') {\n this.onListboxKeyDown(event);\n }\n }\n\n private onListboxKeyDown(event: KeyboardEvent): void {\n const enabled = this.getEnabledVisibleOptions() as unknown as HTMLElement[];\n\n this.highlightedIndex = handleListboxKeyDown(event, {\n items: enabled,\n currentIndex: this.highlightedIndex,\n loop: this.loopFocus,\n onSelect: (index) => {\n const option = this.getEnabledVisibleOptions()[index];\n\n if (option) {\n this.commitValue(option.value, { close: true });\n }\n },\n onClose: () => {\n void this.closePanel('escape');\n },\n focusItem: (index) => {\n this.highlightedIndex = index;\n this.syncHighlight();\n },\n });\n }\n\n private handleListboxKeyDownEvent = (event: CustomEvent<{ keyboardEvent: KeyboardEvent }>): void => {\n this.onListboxKeyDown(event.detail.keyboardEvent);\n };\n\n async hide(source: PkOverlaySource = 'api'): Promise<void> {\n await this.closePanel(source);\n }\n\n private renderHostDecorationSlot(name: 'start' \| 'end') {\n if (!this.hasSlotController.test(name)) {\n return nothing;\n }\n\n return html`<slot name=${name} part=${name} class=${name === 'start' ? 'control-start' : 'control-end'}></slot>`;\n }\n\n override render() {\n const visibleOptions = this.getEnabledVisibleOptions();\n // Async empty / loading / errors use `async-status` only — do not also paint\n // `emptyMessage` or the panel shows two notices for the same empty result.\n const showEmpty = this.open && !this.usesAsyncSearch && visibleOptions.length === 0;\n const asyncStatus = this.getAsyncStatusMessage();\n const showClear = (this.clearable \|\| this.withClear) && Boolean(this.value) && !this.disabled;\n const activeDescendant = this.open ? this.getActiveDescendantId() : null;\n\n return html`\n <input\n class=\"value-input\"\n part=\"value-input\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n .value=${this.value}\n ?required=${this.required}\n @input=${() => this.updateValidity()}\n />\n <div\n part=\"control\"\n class=${classMap({\n control: true,\n 'is-disabled': this.disabled,\n })}\n data-popup-open=${this.open \|\| this.closing ? '' : nothing}\n @mousedown=${this.handleControlMouseDown}\n >\n ${this.renderHostDecorationSlot('start')}\n <input\n part=\"input\"\n class=\"autocomplete-input control-input\"\n type=\"text\"\n role=\"combobox\"\n id=${this.inputId}\n .value=${this.value}\n placeholder=${this.placeholder \|\| nothing}\n ?disabled=${this.disabled}\n aria-label=${this.ariaLabel ?? nothing}\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-controls=${this.listboxId}\n aria-autocomplete=\"both\"\n aria-activedescendant=${activeDescendant ?? nothing}\n @input=${this.handleInput}\n @keydown=${this.handleInputKeyDown}\n />\n ${this.renderHostDecorationSlot('end')}\n ${showClear\n ? html`\n <button\n type=\"button\"\n class=\"clear-button\"\n part=\"clear-button\"\n aria-label=\"Clear\"\n ?disabled=${this.disabled}\n @click=${this.handleClear}\n >\n <span class=\"clear-button-icon\" aria-hidden=\"true\">${unsafeSVG(XMARK_ICON)}</span>\n </button>\n `\n : nothing}\n </div>\n <pk-popup\n .active=${this.open \|\| this.closing}\n .anchor=${this.controlElement ?? ''}\n .placement=${this.placement}\n .distance=${this.sideOffset}\n .sync=${'width'}\n flip\n shift\n >\n <div\n part=\"panel\"\n class=${classMap({\n panel: true,\n 'pk-popup-content': true,\n closing: this.closing,\n })}\n tabindex=\"-1\"\n ?hidden=${!this.open && !this.closing}\n data-open=${this.panelAnimated && !this.closing ? '' : nothing}\n >\n <div\n part=\"panel-body\"\n class=\"panel-body\"\n id=${this.listboxId}\n role=\"listbox\"\n aria-busy=${this.usesAsyncSearch && this.asyncLoading ? 'true' : nothing}\n >\n <slot></slot>\n ${asyncStatus\n ? html`\n <div part=\"async-status\" class=\"async-status\" role=\"status\">${asyncStatus}</div>\n `\n : nothing}\n ${showEmpty\n ? html`\n <div part=\"empty\" class=\"empty\">${this.emptyMessage}</div>\n `\n : nothing}\n </div>\n </div>\n </pk-popup>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-autocomplete': PkAutocomplete;\n }\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"pk-autocomplete-qy2Psvqm.js","names":[],"sources":["../../src/components/autocomplete/pk-autocomplete.styles.ts","../../src/components/autocomplete/pk-autocomplete.ts"],"sourcesContent":["import { css } from 'lit';\n\nimport { iconStyles } from '../../base/icon.styles.js';\nimport { popupContentAnimationStyles } from '../../styles/popup-content-animation.styles.js';\n\n/*\n Autocomplete chrome matches `pk-input` (text field), not Combobox’s slate\n * select fill / chevron affordance. Panel / listbox tokens stay shared with\n * Combobox so suggestion rows look the same.\n /\nexport const pkAutocompleteStyles = [\n popupContentAnimationStyles,\n css`\n ${iconStyles}\n @layer pk-component {\n :host {\n display: block;\n position: relative;\n 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 / Match pk-input control tokens — not Combobox slate fill. /\n --pk-autocomplete-padding-block: 6px;\n --pk-autocomplete-padding-inline: 8px;\n --pk-autocomplete-control-gap: 6px;\n --pk-autocomplete-decoration-size: 0.75rem;\n --pk-autocomplete-font-size: var(--pk-font-size-base);\n --pk-select-item-min-height: 0;\n --pk-select-item-padding-block: 6px;\n --pk-select-item-padding-inline: 10px;\n --pk-select-item-padding-inline-end: 2rem;\n --pk-select-item-font-size: 14px;\n --pk-select-item-line-height: 1.4;\n --pk-select-item-indicator-size: 0.75rem;\n --pk-select-item-indicator-inset: 0.5rem;\n --pk-select-group-label-font-size: 12px;\n }\n\n / width=\"full\" is the documented stretch opt-in; host already fills by default. /\n :host([width='full']) {\n display: block;\n width: 100%;\n }\n\n .control {\n display: flex;\n align-items: center;\n gap: var(--pk-autocomplete-control-gap);\n width: 100%;\n max-width: 100%;\n min-width: 0;\n margin: 0;\n padding-block: var(--pk-autocomplete-padding-block);\n padding-inline: var(--pk-autocomplete-padding-inline);\n border: var(--pk-input-border);\n border-radius: var(--pk-input-border-radius, var(--pk-radius-sm));\n background: var(--pk-input-bg);\n background-clip: padding-box;\n color: var(--pk-color-gray-700);\n font: inherit;\n font-size: var(--pk-autocomplete-font-size);\n line-height: var(--pk-input-control-line-height, 1.25rem);\n white-space: nowrap;\n cursor: text;\n outline: none;\n box-sizing: border-box;\n transition: border-color 0.12s ease, box-shadow 0.12s ease;\n }\n\n /\n * Craft text focus: resting border stays; ring is box-shadow only\n * (--pk-input-focus-shadow already includes the 1px edge). Same when the\n * suggestion panel is open — still a text field, not a select trigger.\n /\n :host(:not([invalid]):not(:state(user-invalid))) .control:focus-within,\n :host(:not([invalid]):not(:state(user-invalid))[data-state='focus-visible']) .control,\n :host(:not([invalid]):not(:state(user-invalid))) .control[data-popup-open] {\n box-shadow: var(--pk-input-focus-shadow);\n }\n\n .control.is-disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n .control-start,\n .control-end {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n line-height: 0;\n color: var(--pk-color-gray-400);\n }\n\n slot[name='start']::slotted(svg),\n slot[name='end']::slotted(svg) {\n width: var(--pk-autocomplete-decoration-size);\n height: var(--pk-autocomplete-decoration-size);\n }\n\n .autocomplete-input {\n flex: 1 1 auto;\n width: 100%;\n min-width: 0;\n margin: 0;\n padding: 0;\n border: 0;\n background: transparent;\n color: inherit;\n font: inherit;\n line-height: var(--pk-input-control-line-height, 1.25rem);\n outline: none;\n }\n\n .autocomplete-input::placeholder {\n color: var(--pk-input-placeholder-color, var(--pk-color-gray-400));\n }\n\n / Clear: flex trailing action — same contract as pk-input / Combobox clear. /\n .clear-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n align-self: stretch;\n box-sizing: border-box;\n width: calc(var(--pk-autocomplete-decoration-size) + var(--pk-autocomplete-padding-inline));\n height: auto;\n min-height: var(--pk-autocomplete-decoration-size);\n margin-block: calc(-1 var(--pk-autocomplete-padding-block));\n /* Match pk-copy-button[slot=end]: pull into padding but leave a 4px glyph inset. /\n margin-inline-end: calc(-1 var(--pk-autocomplete-padding-inline) + 4px);\n margin-inline-start: 0;\n padding: 0;\n border: 0;\n border-radius: 0;\n background: transparent;\n color: var(--pk-color-gray-600);\n cursor: pointer;\n outline: none;\n }\n\n .clear-button:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n .clear-button-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n line-height: 0;\n pointer-events: none;\n }\n\n .clear-button-icon svg {\n display: block;\n width: 0.75rem;\n height: 0.75rem;\n }\n\n .value-input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n\n .panel ::slotted(pk-separator) {\n margin: 4px 0;\n }\n\n .panel {\n width: max-content;\n min-width: var(--pk-autocomplete-anchor-width, 8rem);\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 color: var(--pk-color-gray-700);\n outline: none;\n }\n\n .panel-body {\n max-height: 16rem;\n overflow: auto;\n }\n\n .panel:not([data-open]):not(.closing) {\n opacity: 0;\n pointer-events: none;\n }\n\n .panel[data-open]:not(.closing) {\n opacity: 1;\n pointer-events: auto;\n }\n\n .panel[hidden] {\n display: none !important;\n }\n\n .empty,\n .async-status {\n display: flex;\n align-items: center;\n margin: 0;\n min-height: var(--pk-select-item-min-height, var(--pk-input-height));\n padding-block: var(--pk-select-item-padding-block);\n padding-inline: var(--pk-select-item-padding-inline);\n border: var(--pk-select-trigger-border-width, 1px) solid transparent;\n box-sizing: border-box;\n color: var(--pk-color-gray-500);\n font-size: var(--pk-select-item-font-size);\n line-height: var(--pk-select-item-line-height);\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-within,\n :host([invalid][data-state='focus-visible']) .control,\n :host(:state(user-invalid)) .control:focus-within,\n :host(:state(user-invalid)[data-state='focus-visible']) .control {\n box-shadow: var(--pk-input-invalid-focus-shadow);\n }\n\n :host([size='xs']) {\n --pk-autocomplete-padding-block: 4px;\n --pk-autocomplete-padding-inline: 6px;\n --pk-autocomplete-control-gap: 4px;\n --pk-autocomplete-decoration-size: 0.625rem;\n --pk-autocomplete-font-size: 11px;\n --pk-select-item-padding-block: 4px;\n --pk-select-item-padding-inline: 8px;\n --pk-select-item-padding-inline-end: 1.75rem;\n --pk-select-item-font-size: 11px;\n --pk-select-group-label-font-size: 11px;\n }\n\n :host([size='xs']) .clear-button-icon svg {\n width: 0.625rem;\n height: 0.625rem;\n }\n\n :host([size='sm']) {\n --pk-autocomplete-padding-block: 4px;\n --pk-autocomplete-padding-inline: 8px;\n --pk-autocomplete-control-gap: 4px;\n --pk-autocomplete-decoration-size: 0.6875rem;\n --pk-autocomplete-font-size: 12px;\n --pk-select-item-padding-block: 6px;\n --pk-select-item-padding-inline: 10px;\n --pk-select-item-padding-inline-end: 1.75rem;\n --pk-select-item-font-size: 12px;\n --pk-select-group-label-font-size: 12px;\n }\n\n :host([size='sm']) .clear-button-icon svg {\n width: 0.6875rem;\n height: 0.6875rem;\n }\n\n :host([size='lg']) {\n --pk-autocomplete-padding-block: 8px;\n --pk-autocomplete-padding-inline: 12px;\n --pk-autocomplete-control-gap: 8px;\n --pk-autocomplete-decoration-size: 0.875rem;\n --pk-autocomplete-font-size: var(--pk-font-size-base);\n --pk-select-item-padding-block: 8px;\n --pk-select-item-padding-inline: 12px;\n --pk-select-item-font-size: 14px;\n --pk-select-group-label-font-size: 14px;\n }\n\n :host([size='xl']) {\n --pk-autocomplete-padding-block: 10px;\n --pk-autocomplete-padding-inline: 16px;\n --pk-autocomplete-control-gap: 8px;\n --pk-autocomplete-decoration-size: 1rem;\n --pk-autocomplete-font-size: 16px;\n --pk-select-item-padding-block: 10px;\n --pk-select-item-padding-inline: 14px;\n --pk-select-item-padding-inline-end: 2.25rem;\n --pk-select-item-font-size: 14px;\n --pk-select-group-label-font-size: 16px;\n }\n\n :host([size='xl']) .clear-button-icon svg {\n width: 0.875rem;\n height: 0.875rem;\n }\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 { xmark, renderIconHtml } from '../../icons/index.js';\nimport { LiveRegion, uniqueId } from '../../a11y/focus.js';\nimport { isTopDismissible, registerDismissible, unregisterDismissible } from '../../a11y/dismissible-stack.js';\nimport { scrollIntoView } from '../../a11y/scroll-lock.js';\nimport { PkFormAssociatedElement } from '../../base/pk-form-associated-element.js';\nimport { HasSlotController } from '../../internal/has-slot.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 type { PkValidator } from '../../validators/types.js';\nimport { MirrorValidator } from '../../validators/mirror-validator.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 {\n handleListboxKeyDown,\n isListboxTypeToSelectKey,\n LISTBOX_NAVIGATION_KEYS,\n} from '../../utils/listbox-keyboard.js';\nimport {\n syncPopupPlacementAnimation,\n waitForPopupReposition,\n} from '../../utils/popup-placement-animation.js';\nimport { waitForPopupContentExitAnimation } from '../../utils/popup-content-exit.js';\nimport { isEventInsideOverlay, isPointerInsideOverlay } from '../../utils/popup-pointer.js';\nimport { syncFilteredOptions } from '../../internal/sync-filtered-options.js';\nimport {\n AsyncOptionFetcher,\n type PkAsyncOptionFetchHandler,\n type PkAsyncOptionItem,\n} from '../../utils/async-option-fetch.js';\nimport { matchesOptionFilter, type PkOptionFilter } from '../../utils/option-filter.js';\nimport type { PkOption } from '../select/pk-option.js';\nimport type { PkOptionGroup } from '../select/pk-option-group.js';\n// Freeform field chrome matches pk-input — not Combobox’s select fill / chevron.\nimport { pkAutocompleteStyles } from './pk-autocomplete.styles.js';\n\nexport type PkAutocompleteSize = 'xs' \| 'sm' \| 'default' \| 'lg' \| 'xl';\n\nexport type PkAutocompleteFilter = PkOptionFilter;\n\nexport type PkAutocompleteAsyncOption = PkAsyncOptionItem;\n\nexport type PkAutocompleteFetchHandler = PkAsyncOptionFetchHandler;\n\nconst XMARK_ICON = renderIconHtml(xmark);\n\n/*\n Autocomplete — freeform text field with optional list suggestions.\n \n Unlike Combobox, the committed `value` is the input text. Choosing a\n * suggestion inserts that option’s value into the field; typing always wins.\n \n @slot start - Presentational decoration before the input (e.g. icons)\n * @slot end - Presentational decoration before the clear control\n * @slot - `pk-option` and `pk-option-group` items\n \n @csspart control - Input control wrapper\n * @csspart start - Host start decoration container\n * @csspart end - Host end decoration container\n * @csspart input - Autocomplete text input\n * @csspart clear-button - Clear value button\n * @csspart panel-body - Scrollable listbox region inside the popup panel\n * @csspart empty - Empty-state message\n * @csspart async-status - Async search status message\n \n @dependency pk-popup - Positioned suggestion panel host.\n /\n@customElement('pk-autocomplete')\nexport class PkAutocomplete extends PkFormAssociatedElement {\n static override styles = pkAutocompleteStyles;\n\n static override get validators(): PkValidator[] {\n return [\n ...super.validators,\n MirrorValidator(),\n {\n observedAttributes: ['required'],\n checkValidity: (element) => {\n const field = element as unknown as PkAutocomplete;\n const result = {\n message: 'Please fill out this field.',\n isValid: true,\n invalidKeys: [] as ReturnType<PkValidator['checkValidity']>['invalidKeys'],\n };\n\n if (!field.required \|\| field.value.trim()) {\n return result;\n }\n\n result.isValid = false;\n result.invalidKeys.push('valueMissing');\n return result;\n },\n },\n ];\n }\n\n override assumeInteractionOn = ['blur', 'input'];\n\n @property({ type: Boolean, reflect: true })\n open = false;\n\n @property({ reflect: true })\n placement: PkPopupPlacement = 'bottom-start';\n\n /* Gap between the control and listbox panel in px (default: 6). /\n @property({ attribute: 'side-offset', type: Number })\n sideOffset = 6;\n\n @property({ type: Boolean, reflect: true })\n clearable = false;\n\n @property({ attribute: 'with-clear', type: Boolean })\n withClear = false;\n\n /* When true, the first matching option is highlighted on open or when filtering. /\n @property({ attribute: 'auto-highlight', type: Boolean })\n autoHighlight = false;\n\n @property({ type: Boolean, reflect: true })\n invalid = false;\n\n @property({ reflect: true })\n size: PkAutocompleteSize = 'default';\n\n /* When `full`, the control stretches to the host width. /\n @property({ reflect: true })\n width?: 'full';\n\n /* Empty by default — consumers opt in when a prompt is useful. /\n @property()\n placeholder = '';\n\n @property({ attribute: 'empty-message' })\n emptyMessage = 'No options found.';\n\n /* Freeform field value — always mirrors the visible input text. /\n @property()\n value = '';\n\n @property({ attribute: 'default-value' })\n defaultValue = '';\n\n @property()\n label = '';\n\n @property()\n instructions = '';\n\n @property({ attribute: 'aria-label' })\n ariaLabel: string \| null = null;\n\n /\n Whether arrow-key focus loops from the last option back to the first (and vice versa).\n * Default: `true` (same as Combobox).\n /\n @property({ attribute: 'loop-focus', type: Boolean })\n loopFocus = true;\n\n /* Custom filter — `(option, query) => boolean`. Defaults to label/value substring match. /\n @property({ attribute: false })\n filter: PkAutocompleteFilter \| null = null;\n\n /\n When true, options are loaded via `fetchOptions` as the user types instead of\n * filtering static `pk-option` children.\n /\n @property({ type: Boolean, reflect: true })\n async = false;\n\n /* Message shown while async results are loading. /\n @property({ attribute: 'loading-message' })\n loadingMessage = 'Searching…';\n\n /* Message shown before the user types in async mode. /\n @property({ attribute: 'start-typing-message' })\n startTypingMessage = 'Start typing to search…';\n\n /* Remote search handler — `(query, signal) => Promise<options>`. */\n @property({ attribute: false })\n fetchOptions: PkAutocompleteFetchHandler \| null = null;\n\n private readonly hasSlotController = new HasSlotController(this, 'start', 'end');\n\n private readonly listboxId = uniqueId('pk-autocomplete-listbox');\n private readonly inputId = uniqueId('pk-autocomplete-input');\n\n @query('pk-popup')\n private popupElement!: PkPopup;\n\n @query('.control')\n private controlElement!: HTMLElement;\n\n @query('.control-input')\n private controlInput?: HTMLInputElement;\n\n @query('.value-input')\n override input!: HTMLInputElement;\n\n private get panelElement(): HTMLDivElement \| null {\n return this.popupElement?.getContentElement() as HTMLDivElement \| null ?? null;\n }\n\n private get panelBodyElement(): HTMLDivElement \| undefined {\n return this.panelElement?.querySelector('.panel-body') as HTMLDivElement \| undefined;\n }\n\n private get listScrollContainer(): HTMLElement {\n return this.panelBodyElement ?? this.panelElement ?? this;\n }\n\n private options: PkOption[] = [];\n\n @state()\n private highlightedIndex = -1;\n\n @state()\n private closing = false;\n\n @state()\n private panelAnimated = false;\n\n private dismissRegistered = false;\n private panelEventTarget: HTMLElement \| null = null;\n private optionsObserver?: MutationObserver;\n private liveRegion?: LiveRegion;\n private asyncFetcher: AsyncOptionFetcher \| null = null;\n\n @state()\n private asyncLoading = false;\n\n @state()\n private asyncError: string \| null = null;\n\n override connectedCallback(): void {\n this.instructions = this.getAttribute('hint') ?? this.instructions;\n this.refreshOptions();\n super.connectedCallback();\n this.syncHasValueAttribute();\n this.addEventListener('pk-listbox-keydown', this.handleListboxKeyDownEvent as EventListener);\n this.optionsObserver = new MutationObserver(() => {\n this.handleOptionsMutation({ render: true });\n });\n this.optionsObserver.observe(this, { childList: true, subtree: true });\n }\n\n override disconnectedCallback(): void {\n this.unbindPanelEvents();\n this.removeEventListener('pk-listbox-keydown', this.handleListboxKeyDownEvent as EventListener);\n this.optionsObserver?.disconnect();\n this.liveRegion?.destroy();\n this.liveRegion = undefined;\n this.asyncFetcher?.cancel();\n void this.closePanel('api');\n super.disconnectedCallback();\n }\n\n override firstUpdated(changed: PropertyValues): void {\n super.firstUpdated(changed);\n\n if (!this.value && this.defaultValue) {\n this.value = this.defaultValue;\n }\n\n this.applyOptionState();\n }\n\n override updated(changed: PropertyValues): void {\n if (changed.has('value')) {\n this.syncHasValueAttribute();\n this.applyOptionState();\n }\n\n super.updated(changed);\n }\n\n protected override get validationTarget(): HTMLElement \| undefined {\n return this.controlInput ?? this.controlElement;\n }\n\n protected override getAriaMirrorTarget(): HTMLElement \| null {\n return this.controlInput ?? this.controlElement ?? null;\n }\n\n protected override syncFormValue(): void {\n if (!this.name) {\n this.setFormValue(null);\n return;\n }\n\n this.setFormValue(this.value);\n }\n\n private syncHasValueAttribute(): void {\n this.toggleAttribute('data-has-value', Boolean(this.value));\n }\n\n private refreshOptions(): void {\n this.options = [...this.querySelectorAll('pk-option')] as PkOption[];\n }\n\n private handleOptionsMutation(options: { render?: boolean } = {}): void {\n this.refreshOptions();\n this.applyOptionState();\n\n if (options.render) {\n this.requestUpdate();\n }\n }\n\n private bindPanelEvents(): void {\n const panel = this.panelElement;\n\n if (!panel \|\| this.panelEventTarget === panel) {\n return;\n }\n\n this.unbindPanelEvents();\n this.panelEventTarget = panel;\n panel.addEventListener('pk-option-select', this.handleOptionSelect as EventListener);\n panel.addEventListener('pk-option-highlight', this.handleOptionHighlight as EventListener);\n panel.addEventListener('pk-listbox-keydown', this.handleListboxKeyDownEvent as EventListener);\n }\n\n private unbindPanelEvents(): void {\n if (!this.panelEventTarget) {\n return;\n }\n\n this.panelEventTarget.removeEventListener('pk-option-select', this.handleOptionSelect as EventListener);\n this.panelEventTarget.removeEventListener('pk-option-highlight', this.handleOptionHighlight as EventListener);\n this.panelEventTarget.removeEventListener('pk-listbox-keydown', this.handleListboxKeyDownEvent as EventListener);\n this.panelEventTarget = null;\n }\n\n private isOptionInHiddenGroup(option: PkOption): boolean {\n const group = option.closest('pk-option-group') as PkOptionGroup \| null;\n return Boolean(group?.hidden);\n }\n\n private getFilterQuery(): string {\n if (!this.open) {\n return '';\n }\n\n return this.value.trim().toLowerCase();\n }\n\n private get usesAsyncSearch(): boolean {\n return this.async && Boolean(this.fetchOptions);\n }\n\n private getVisibleOptions(): PkOption[] {\n if (this.usesAsyncSearch) {\n return this.options.filter((option) => !this.isOptionInHiddenGroup(option));\n }\n\n const filter = this.getFilterQuery();\n\n return this.options.filter((option) => {\n if (this.isOptionInHiddenGroup(option)) {\n return false;\n }\n\n if (!filter) {\n return true;\n }\n\n return matchesOptionFilter(option, filter, this.filter);\n });\n }\n\n private getEnabledVisibleOptions(): PkOption[] {\n return this.getVisibleOptions().filter((option) => !option.disabled);\n }\n\n private clearAsyncOptionNodes(): void {\n this.querySelectorAll(':scope > pk-option, :scope > pk-option-group, :scope > pk-separator')\n .forEach((node) => node.remove());\n }\n\n private renderAsyncOptionNodes(items: PkAutocompleteAsyncOption[]): void {\n this.clearAsyncOptionNodes();\n\n for (const item of items) {\n const option = document.createElement('pk-option');\n option.value = item.value;\n option.textContent = item.label;\n this.append(option);\n }\n\n this.handleOptionsMutation({ render: true });\n }\n\n private scheduleAsyncFetch(query: string): void {\n this.ensureAsyncFetcher().schedule(query);\n }\n\n private ensureAsyncFetcher(): AsyncOptionFetcher {\n if (!this.asyncFetcher) {\n this.asyncFetcher = new AsyncOptionFetcher(\n () => this.fetchOptions,\n {\n errorLabel: 'autocomplete options',\n onLoading: () => {\n this.asyncLoading = true;\n this.asyncError = null;\n // Drop previous results so loading never stacks under a stale list.\n this.renderAsyncOptionNodes([]);\n },\n onResults: (results) => {\n this.renderAsyncOptionNodes(results);\n },\n onError: (message) => {\n this.asyncError = message;\n },\n onSettled: () => {\n this.asyncLoading = false;\n },\n onEmptyQuery: () => {\n this.asyncLoading = false;\n this.asyncError = null;\n this.renderAsyncOptionNodes([]);\n },\n },\n );\n }\n\n return this.asyncFetcher;\n }\n\n private getAsyncStatusMessage(): string \| null {\n if (!this.usesAsyncSearch \|\| !this.open) {\n return null;\n }\n\n if (this.asyncLoading) {\n return this.loadingMessage;\n }\n\n if (this.asyncError) {\n return this.asyncError;\n }\n\n const query = this.value.trim();\n\n if (!query) {\n return this.startTypingMessage;\n }\n\n if (this.getEnabledVisibleOptions().length === 0) {\n return `No matches for \"${query}\".`;\n }\n\n return null;\n }\n\n private applyOptionState(): void {\n const visible = this.getVisibleOptions();\n const filterQuery = this.open ? this.getFilterQuery() : '';\n\n // Freeform: never mark options as the “selected” form value — the text is.\n syncFilteredOptions({\n host: this,\n options: this.options,\n visible,\n listboxId: this.listboxId,\n filterQuery,\n isSelected: () => false,\n });\n\n this.syncValueInput();\n\n if (this.open) {\n this.syncHighlight();\n this.announceFilterResults();\n }\n }\n\n private syncValueInput(): void {\n if (!this.input) {\n return;\n }\n\n this.input.value = this.value;\n this.input.required = this.required;\n }\n\n private resetHighlightedIndexOnOpen(): void {\n this.highlightedIndex = this.autoHighlight ? 0 : -1;\n }\n\n private syncHighlight(): void {\n const enabled = this.getEnabledVisibleOptions();\n\n for (const option of this.options) {\n option.highlighted = false;\n option.focusIndex = -1;\n }\n\n if (enabled.length === 0 \|\| this.highlightedIndex < 0) {\n return;\n }\n\n if (this.highlightedIndex >= enabled.length) {\n this.highlightedIndex = enabled.length - 1;\n }\n\n const highlighted = enabled[this.highlightedIndex];\n\n if (highlighted) {\n highlighted.highlighted = true;\n // Keep focus on the text field; use aria-activedescendant for the option.\n highlighted.focusIndex = -1;\n scrollIntoView(highlighted, this.listScrollContainer, 'vertical', 'auto');\n this.controlInput?.focus({ preventScroll: true });\n }\n }\n\n private getActiveDescendantId(): string \| null {\n const highlighted = this.getEnabledVisibleOptions()[this.highlightedIndex];\n return highlighted?.optionId \|\| null;\n }\n\n private announceFilterResults(): void {\n if (!this.liveRegion) {\n this.liveRegion = new LiveRegion('polite');\n }\n\n const count = this.getEnabledVisibleOptions().length;\n const filter = this.getFilterQuery();\n\n if (!filter) {\n return;\n }\n\n this.liveRegion.announce(\n count === 0\n ? `${this.emptyMessage}`\n : `${count} ${count === 1 ? 'result' : 'results'} available`,\n );\n }\n\n private openPanel(): Promise<void> {\n const anchor = this.controlElement;\n\n if (!anchor) {\n return Promise.resolve();\n }\n\n if (this.open) {\n this.controlInput?.focus({ preventScroll: true });\n return Promise.resolve();\n }\n\n if (this.closing) {\n return Promise.resolve();\n }\n\n this.dispatchEvent(new PkShowEvent());\n this.closing = false;\n this.panelAnimated = false;\n this.open = true;\n this.applyOptionState();\n this.resetHighlightedIndexOnOpen();\n\n if (this.usesAsyncSearch) {\n this.asyncError = null;\n // Freeform async: value is the query. Clear stale nodes and show loading\n // immediately when reopening with text so “Searching…” never sits under\n // the previous result list during debounce.\n this.renderAsyncOptionNodes([]);\n const query = this.value.trim();\n this.asyncLoading = Boolean(query);\n this.scheduleAsyncFetch(query);\n }\n\n this.style.setProperty('--pk-autocomplete-anchor-width', `${anchor.getBoundingClientRect().width}px`);\n this.popupElement.active = true;\n\n if (this.panelElement) {\n this.panelElement.hidden = false;\n syncPopupPlacementAnimation(this.panelElement, this.placement);\n }\n\n this.registerDismissHandlers();\n this.syncHighlight();\n this.controlInput?.focus({ preventScroll: true });\n\n return this.updateComplete.then(async () => {\n const placement = await waitForPopupReposition(this.popupElement, this.placement, 300, {\n requireEvent: true,\n });\n\n if (this.panelElement) {\n syncPopupPlacementAnimation(this.panelElement, placement);\n }\n\n this.panelAnimated = true;\n this.bindPanelEvents();\n this.refreshOptions();\n this.controlInput?.focus({ preventScroll: true });\n\n this.dispatchEvent(new PkAfterShowEvent());\n this.dispatchEvent(new CustomEvent('pk-open-change', {\n detail: { open: true },\n bubbles: true,\n composed: true,\n }));\n });\n }\n\n private async closePanel(source: PkOverlaySource = 'unknown'): Promise<void> {\n if (!this.open \|\| this.closing) {\n return;\n }\n\n const hideEvent = new PkHideEvent(source);\n\n if (!this.dispatchEvent(hideEvent)) {\n return;\n }\n\n this.unbindPanelEvents();\n this.closing = true;\n this.panelAnimated = false;\n await waitForPopupContentExitAnimation(this.panelElement);\n\n this.open = false;\n this.closing = false;\n this.panelAnimated = false;\n\n if (this.panelElement) {\n this.panelElement.hidden = true;\n this.panelElement.removeAttribute('data-side');\n }\n\n this.popupElement.active = false;\n this.unregisterDismissHandlers();\n this.applyOptionState();\n\n if (this.usesAsyncSearch) {\n this.asyncFetcher?.cancel();\n this.asyncLoading = false;\n this.asyncError = null;\n this.renderAsyncOptionNodes([]);\n }\n\n if (source !== 'light-dismiss' && source !== 'pointer-dismiss') {\n this.controlInput?.focus({ preventScroll: true });\n } else {\n this.controlInput?.blur();\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 private registerDismissHandlers(): void {\n registerDismissible(this);\n this.dismissRegistered = true;\n document.addEventListener('pointerdown', this.onDocumentPointerDown, true);\n document.addEventListener('keydown', this.onDocumentKeyDown, true);\n }\n\n private unregisterDismissHandlers(): void {\n if (this.dismissRegistered) {\n unregisterDismissible(this);\n this.dismissRegistered = false;\n }\n\n document.removeEventListener('pointerdown', this.onDocumentPointerDown, true);\n document.removeEventListener('keydown', this.onDocumentKeyDown, true);\n }\n\n private onDocumentPointerDown = (event: PointerEvent): void => {\n if (isPointerInsideOverlay(event, {\n anchor: this.controlElement,\n panel: this.panelElement,\n })) {\n return;\n }\n\n void this.closePanel('light-dismiss');\n };\n\n private onDocumentKeyDown = (event: KeyboardEvent): void => {\n if (!this.open) {\n return;\n }\n\n if (event.key === 'Escape') {\n if (!isTopDismissible(this)) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n void this.closePanel('escape');\n return;\n }\n\n const isListboxKey = LISTBOX_NAVIGATION_KEYS.has(event.key) \|\| isListboxTypeToSelectKey(event);\n\n if (!isListboxKey) {\n return;\n }\n\n const panel = this.panelElement;\n const path = event.composedPath();\n const focusInPortaledPanel = Boolean(panel && path.includes(panel));\n\n if (!focusInPortaledPanel) {\n return;\n }\n\n if (!isEventInsideOverlay(event, {\n anchor: this.controlElement,\n panel,\n })) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n this.onListboxKeyDown(event);\n };\n\n private handleOptionSelect = (event: CustomEvent<{ value: string }>): void => {\n const { value } = event.detail;\n this.commitValue(value, { close: true });\n };\n\n private handleOptionHighlight = (event: CustomEvent<{ value: string }>): void => {\n if (!this.open) {\n return;\n }\n\n const enabled = this.getEnabledVisibleOptions();\n const index = enabled.findIndex((option) => option.value === event.detail.value);\n\n if (index === -1 \|\| index === this.highlightedIndex) {\n return;\n }\n\n this.highlightedIndex = index;\n this.syncHighlight();\n };\n\n private commitValue(next: string, { close = false, emit = true } = {}): void {\n const changed = this.value !== next;\n this.value = next;\n this.syncHasValueAttribute();\n this.applyOptionState();\n\n if (close) {\n void this.closePanel('api');\n }\n\n if (changed && emit) {\n this.emitValueChange();\n }\n }\n\n private handleClear(event: Event): void {\n event.preventDefault();\n event.stopPropagation();\n this.commitValue('');\n this.dispatchEvent(new PkClearEvent());\n this.controlInput?.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 handleInput(event: Event): void {\n const next = (event.target as HTMLInputElement).value;\n this.value = next;\n this.syncHasValueAttribute();\n this.highlightedIndex = this.autoHighlight ? 0 : -1;\n this.applyOptionState();\n this.emitValueChange();\n\n if (this.usesAsyncSearch) {\n this.asyncError = null;\n this.scheduleAsyncFetch(next.trim());\n }\n\n if (!this.open) {\n void this.openPanel();\n }\n }\n\n private handleControlMouseDown = (event: MouseEvent): void => {\n if (this.disabled) {\n return;\n }\n\n const path = event.composedPath();\n const isInteractiveChild = path.some((node) => {\n if (!(node instanceof HTMLElement)) {\n return false;\n }\n\n return node.classList.contains('clear-button');\n });\n\n if (isInteractiveChild) {\n return;\n }\n\n const isInput = event.target === this.controlInput;\n\n if (!this.open && !this.closing) {\n if (!isInput) {\n event.preventDefault();\n }\n\n this.controlInput?.focus({ preventScroll: true });\n void this.openPanel();\n return;\n }\n\n if (!isInput) {\n event.preventDefault();\n this.controlInput?.focus({ preventScroll: true });\n }\n };\n\n private handleInputKeyDown(event: KeyboardEvent): void {\n if (event.key === 'Escape' && this.open) {\n event.preventDefault();\n void this.closePanel('escape');\n return;\n }\n\n if (event.key === 'ArrowDown' && !this.open) {\n event.preventDefault();\n void this.openPanel();\n return;\n }\n\n if (!this.open) {\n return;\n }\n\n if (event.key === 'Enter') {\n const enabled = this.getEnabledVisibleOptions();\n\n if (this.highlightedIndex >= 0 && enabled[this.highlightedIndex]) {\n event.preventDefault();\n this.commitValue(enabled[this.highlightedIndex]!.value, { close: true });\n } else {\n void this.closePanel('api');\n }\n\n return;\n }\n\n if (LISTBOX_NAVIGATION_KEYS.has(event.key) && event.key !== 'Enter' && event.key !== 'Escape') {\n this.onListboxKeyDown(event);\n }\n }\n\n private onListboxKeyDown(event: KeyboardEvent): void {\n const enabled = this.getEnabledVisibleOptions() as unknown as HTMLElement[];\n\n this.highlightedIndex = handleListboxKeyDown(event, {\n items: enabled,\n currentIndex: this.highlightedIndex,\n loop: this.loopFocus,\n onSelect: (index) => {\n const option = this.getEnabledVisibleOptions()[index];\n\n if (option) {\n this.commitValue(option.value, { close: true });\n }\n },\n onClose: () => {\n void this.closePanel('escape');\n },\n focusItem: (index) => {\n this.highlightedIndex = index;\n this.syncHighlight();\n },\n });\n }\n\n private handleListboxKeyDownEvent = (event: CustomEvent<{ keyboardEvent: KeyboardEvent }>): void => {\n this.onListboxKeyDown(event.detail.keyboardEvent);\n };\n\n async hide(source: PkOverlaySource = 'api'): Promise<void> {\n await this.closePanel(source);\n }\n\n private renderHostDecorationSlot(name: 'start' \| 'end') {\n if (!this.hasSlotController.test(name)) {\n return nothing;\n }\n\n return html`<slot name=${name} part=${name} class=${name === 'start' ? 'control-start' : 'control-end'}></slot>`;\n }\n\n override render() {\n const visibleOptions = this.getEnabledVisibleOptions();\n // Async empty / loading / errors use `async-status` only — do not also paint\n // `emptyMessage` or the panel shows two notices for the same empty result.\n const showEmpty = this.open && !this.usesAsyncSearch && visibleOptions.length === 0;\n const asyncStatus = this.getAsyncStatusMessage();\n const showClear = (this.clearable \|\| this.withClear) && Boolean(this.value) && !this.disabled;\n const activeDescendant = this.open ? this.getActiveDescendantId() : null;\n\n return html`\n <input\n class=\"value-input\"\n part=\"value-input\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n .value=${this.value}\n ?required=${this.required}\n @input=${() => this.updateValidity()}\n />\n <div\n part=\"control\"\n class=${classMap({\n control: true,\n 'is-disabled': this.disabled,\n })}\n data-popup-open=${this.open \|\| this.closing ? '' : nothing}\n @mousedown=${this.handleControlMouseDown}\n >\n ${this.renderHostDecorationSlot('start')}\n <input\n part=\"input\"\n class=\"autocomplete-input control-input\"\n type=\"text\"\n role=\"combobox\"\n id=${this.inputId}\n .value=${this.value}\n placeholder=${this.placeholder \|\| nothing}\n ?disabled=${this.disabled}\n aria-label=${this.ariaLabel ?? nothing}\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-controls=${this.listboxId}\n aria-autocomplete=\"both\"\n aria-activedescendant=${activeDescendant ?? nothing}\n @input=${this.handleInput}\n @keydown=${this.handleInputKeyDown}\n />\n ${this.renderHostDecorationSlot('end')}\n ${showClear\n ? html`\n <button\n type=\"button\"\n class=\"clear-button\"\n part=\"clear-button\"\n aria-label=\"Clear\"\n ?disabled=${this.disabled}\n @click=${this.handleClear}\n >\n <span class=\"clear-button-icon\" aria-hidden=\"true\">${unsafeSVG(XMARK_ICON)}</span>\n </button>\n `\n : nothing}\n </div>\n <pk-popup\n .active=${this.open \|\| this.closing}\n .anchor=${this.controlElement ?? ''}\n .placement=${this.placement}\n .distance=${this.sideOffset}\n .sync=${'width'}\n flip\n shift\n >\n <div\n part=\"panel\"\n class=${classMap({\n panel: true,\n 'pk-popup-content': true,\n closing: this.closing,\n })}\n tabindex=\"-1\"\n ?hidden=${!this.open && !this.closing}\n data-open=${this.panelAnimated && !this.closing ? '' : nothing}\n >\n <div\n part=\"panel-body\"\n class=\"panel-body\"\n id=${this.listboxId}\n role=\"listbox\"\n aria-busy=${this.usesAsyncSearch && this.asyncLoading ? 'true' : nothing}\n >\n <slot></slot>\n ${asyncStatus\n ? html`\n <div part=\"async-status\" class=\"async-status\" role=\"status\">${asyncStatus}</div>\n `\n : nothing}\n ${showEmpty\n ? html`\n <div part=\"empty\" class=\"empty\">${this.emptyMessage}</div>\n `\n : nothing}\n </div>\n </div>\n </pk-popup>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-autocomplete': PkAutocomplete;\n }\n}\n"],"mappings":"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"}

package/dist/chunks/{pk-checkbox-CfV1uDdC.js → pk-checkbox-13ArHSmt.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { a as query, i as property, o as state, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
-import { t as PkFormAssociatedElement } from "./pk-form-associated-element-CCQALRGB.js";
+import { t as PkFormAssociatedElement } from "./pk-form-associated-element-GxX5lbnk.js";
 import { t as RequiredValidator } from "./required-validator-CEg8dvjS.js";
 import { t as HasSlotController } from "./has-slot-8BvCt_qo.js";
 import { css, html, nothing } from "lit";
@@ -244,6 +244,7 @@ var PkCheckbox = class PkCheckbox extends PkFormAssociatedElement {
 			super.updated(changed);
 			return;
 		}
+		if (changed.has("checkboxValue")) this.syncFormValue();
 		if (changed.has("indeterminate") || changed.has("checked")) {
 			this.input.indeterminate = this.indeterminate;
 			this.input.checked = this.checked;
@@ -356,4 +357,4 @@ PkCheckbox = __decorate([customElement("pk-checkbox")], PkCheckbox);
 //#endregion
 export { PkCheckbox as t };
-//# sourceMappingURL=pk-checkbox-CfV1uDdC.js.map
+//# sourceMappingURL=pk-checkbox-13ArHSmt.js.map

package/dist/chunks/{pk-checkbox-CfV1uDdC.js.map → pk-checkbox-13ArHSmt.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pk-checkbox-CfV1uDdC.js","names":[],"sources":["../../src/icons/checkbox-indicators.ts","../../src/base/checkbox-control.styles.ts","../../src/components/checkbox/pk-checkbox.styles.ts","../../src/components/checkbox/pk-checkbox.ts"],"sourcesContent":["import { html, type TemplateResult } from 'lit';\n\n/** Craft checkbox tick — matches plugin-kit-react Checkbox.tsx /\nexport function renderCheckboxCheckIcon(): TemplateResult {\n return html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" aria-hidden=\"true\" viewBox=\"0 0 640 640\">\n <path\n fill=\"currentColor\"\n d=\"M557.5 192L534.9 214.6L278.9 470.6C266.4 483.1 246.1 483.1 233.6 470.6L105.6 342.6L83 320L128.3 274.7C129.6 276 172.3 318.7 256.3 402.7L489.7 169.3L512.3 146.7L557.6 192z\"\n />\n </svg>\n `;\n}\n\n/* Craft checkbox indeterminate mark — matches plugin-kit-react Checkbox.tsx /\nexport function renderCheckboxIndeterminateIcon(): TemplateResult {\n return html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" aria-hidden=\"true\" viewBox=\"0 0 640 640\">\n <path fill=\"currentColor\" d=\"M96 352V288H544V352H96z\" />\n </svg>\n `;\n}\n","import { css } from 'lit';\n\n/* Shared checkbox/radio control box — Craft tokens, border-box sizing. /\nexport const checkboxControlStyles = css`\n @layer pk-component {\n .control {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n position: relative;\n box-sizing: border-box;\n width: var(--pk-checkbox-size);\n height: var(--pk-checkbox-size);\n border: 1px solid var(--pk-checkbox-border-color, #c0cbd9);\n border-radius: var(--pk-radius-sm);\n background: var(--pk-color-white);\n cursor: pointer;\n transition: border-color 0.12s ease, box-shadow 0.12s ease;\n }\n\n :host([disabled]) .control {\n cursor: not-allowed;\n }\n\n .input:focus-visible + .control {\n border-color: var(--pk-color-sky-600);\n box-shadow: 0 0 0 1px var(--pk-color-sky-600), 0 0 4px 0 hsl(from var(--pk-color-sky-600) h s l / 0.7);\n }\n\n :host([invalid]) .control,\n .input[aria-invalid='true'] + .control {\n border-color: var(--pk-color-rose-600);\n }\n\n :host([invalid]) .input:focus-visible + .control,\n .input[aria-invalid='true']:focus-visible + .control {\n border-color: var(--pk-color-rose-600);\n box-shadow: 0 0 0 1px var(--pk-color-rose-600), 0 0 4px 0 hsl(from var(--pk-color-rose-600) h s l / 0.7);\n }\n\n .indicator {\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--pk-color-gray-900);\n }\n\n .icon-check,\n .icon-indeterminate {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n pointer-events: none;\n }\n\n .icon-check svg {\n width: 14px;\n height: 14px;\n transform: translateY(1px) scale(1.2);\n }\n\n .icon-indeterminate svg {\n width: 12px;\n height: 12px;\n }\n\n :host([checked]) .icon-check,\n .input:checked + .control .icon-check {\n opacity: 1;\n }\n\n :host([indeterminate]) .icon-check,\n .input:indeterminate + .control .icon-check {\n opacity: 0;\n }\n\n :host([indeterminate]) .icon-indeterminate,\n .input:indeterminate + .control .icon-indeterminate {\n opacity: 1;\n }\n }\n`;\n","import { css } from 'lit';\n\nimport { checkboxControlStyles } from '../../base/checkbox-control.styles.js';\n\nconst pkCheckboxLayoutStyles = css`\n @layer pk-component {\n :host {\n display: inline-flex;\n vertical-align: middle;\n / Hit target is the content-sized .root label (Craft checkbox-select), not the host. /\n cursor: default;\n font-family: var(--pk-font-family);\n font-size: var(--pk-font-size-base);\n line-height: var(--pk-line-height);\n }\n\n :host([disabled]) {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n .root {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: flex-start;\n gap: var(--pk-control-label-gap);\n / Content-sized like Craft's <label> beside the checkbox — not full-row. /\n width: fit-content;\n max-width: 100%;\n margin: 0;\n min-height: 0;\n cursor: pointer;\n user-select: none;\n position: relative;\n }\n\n :host([disabled]) .root {\n cursor: not-allowed;\n }\n\n .root--with-hint {\n align-items: flex-start;\n }\n\n .input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n opacity: 0;\n appearance: none;\n }\n\n .text {\n display: flex;\n flex-direction: column;\n gap: 0.125rem;\n min-width: 0;\n }\n\n .label {\n line-height: max(1rem, var(--pk-checkbox-size));\n / Match form-control / Craft body labels (gray-700), not gray-900. /\n color: var(--pk-color-gray-700);\n cursor: pointer;\n }\n\n :host([disabled]) .label {\n cursor: not-allowed;\n }\n\n :host(.all-option) .label {\n font-weight: 700;\n }\n\n .hint {\n margin: 0;\n color: var(--pk-color-gray-500);\n font-size: var(--pk-font-size-sm);\n line-height: var(--pk-line-height);\n }\n\n .hint:empty {\n display: none;\n }\n }\n`;\n\nexport const pkCheckboxStyles = [checkboxControlStyles, pkCheckboxLayoutStyles];\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';\n\nimport { PkFormAssociatedElement } from '../../base/pk-form-associated-element.js';\nimport { renderCheckboxCheckIcon, renderCheckboxIndeterminateIcon } from '../../icons/checkbox-indicators.js';\nimport { HasSlotController } from '../../internal/has-slot.js';\nimport { RequiredValidator } from '../../validators/index.js';\nimport { pkCheckboxStyles } from './pk-checkbox.styles.js';\n\n/\n –aligned checkbox control.\n \n @slot - Checkbox label text\n * @slot hint - Descriptive hint (or use the `hint` attribute)\n \n @csspart base - Root label element\n * @csspart input - Native checkbox input\n * @csspart control - Visual checkbox box\n * @csspart label - Label text container\n * @csspart hint - Hint text container\n * @csspart checked-icon - Checked state icon\n * @csspart indeterminate-icon - Indeterminate state icon\n /\n@customElement('pk-checkbox')\nexport class PkCheckbox extends PkFormAssociatedElement {\n static override shadowRootOptions: ShadowRootInit = {\n mode: 'open',\n delegatesFocus: true,\n };\n\n static override styles = pkCheckboxStyles;\n\n static override get validators() {\n return [...super.validators, RequiredValidator({ validationProperty: 'checked' })];\n }\n\n override assumeInteractionOn = ['change'];\n\n private readonly hasSlotController = new HasSlotController(this, 'hint');\n\n @property({ type: Boolean, reflect: true })\n checked = false;\n\n @property({ type: Boolean, reflect: true })\n indeterminate = false;\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n @property({ type: Boolean, reflect: true })\n invalid = false;\n\n @property()\n checkboxValue = 'on';\n\n @property({ attribute: 'default-checked', type: Boolean })\n defaultChecked = false;\n\n @property({ attribute: 'aria-label' })\n ariaLabel: string \| null = null;\n\n /* Descriptive hint — use the `hint` slot for HTML content. /\n @property()\n hint = '';\n\n /* Only required for SSR when slotting a hint. */\n @property({ type: Boolean, attribute: 'with-hint' })\n withHint = false;\n\n @query('.input')\n override input!: HTMLInputElement;\n\n @state()\n private hasDefaultSlotContent = false;\n\n protected override get validationTarget(): HTMLElement {\n return this.input;\n }\n\n protected override syncFormValue(): void {\n this.setFormValue(this.checked ? this.checkboxValue : null, this.checked ? 'on' : 'off');\n }\n\n protected override resetToDefaultValue(): void {\n this.checked = this.defaultChecked;\n this.indeterminate = false;\n }\n\n protected override restoreFormState(state: string \| File \| FormData \| null): void {\n if (state === 'on' \|\| state === this.checkboxValue) {\n this.checked = true;\n } else {\n this.checked = false;\n }\n }\n\n override updated(changed: PropertyValues): void {\n if (!this.input) {\n super.updated(changed);\n return;\n }\n\n if (changed.has('indeterminate') \|\| changed.has('checked')) {\n this.input.indeterminate = this.indeterminate;\n this.input.checked = this.checked;\n }\n\n super.updated(changed);\n }\n\n private defaultSlotChanged(event: Event): void {\n const slot = event.target as HTMLSlotElement;\n this.hasDefaultSlotContent = slot.assignedNodes({ flatten: true }).some((node) => {\n if (node.nodeType === Node.TEXT_NODE) {\n return node.textContent?.trim();\n }\n\n return node.nodeType === Node.ELEMENT_NODE;\n });\n }\n\n private handleChange(event: Event): void {\n const input = event.target as HTMLInputElement;\n this.checked = input.checked;\n this.indeterminate = false;\n\n this.dispatchEvent(new CustomEvent('pk-change', {\n detail: { checked: this.checked },\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 override render() {\n const hasLabel = this.hasDefaultSlotContent;\n const hasHint = Boolean(this.hint) \|\| this.hasSlotController.test('hint', this.withHint);\n\n return html`\n <label\n part=\"base\"\n class=${classMap({\n root: true,\n 'root--with-hint': hasHint,\n })}\n >\n <input\n part=\"input\"\n class=\"input\"\n type=\"checkbox\"\n .checked=${this.checked}\n ?disabled=${this.disabled}\n ?required=${this.required}\n name=${this.name ?? nothing}\n value=${this.checkboxValue}\n aria-labelledby=${hasLabel ? 'label' : nothing}\n aria-describedby=${hasHint ? 'hint' : nothing}\n aria-label=${!hasLabel ? (this.ariaLabel ?? nothing) : nothing}\n aria-invalid=${this.invalid ? 'true' : nothing}\n @change=${this.handleChange}\n />\n <span part=\"control\" class=\"control\">\n <span part=\"checked-icon\" class=\"icon-check\">${renderCheckboxCheckIcon()}</span>\n <span part=\"indeterminate-icon\" class=\"icon-indeterminate\">${renderCheckboxIndeterminateIcon()}</span>\n </span>\n ${hasLabel \|\| hasHint\n ? html`\n <span class=\"text\">\n ${hasLabel\n ? html`\n <span part=\"label\" class=\"label\" id=\"label\">\n <slot @slotchange=${this.defaultSlotChanged}></slot>\n </span>\n `\n : html`<slot @slotchange=${this.defaultSlotChanged} hidden></slot>`}\n ${hasHint\n ? html`\n <span part=\"hint\" class=\"hint\" id=\"hint\">\n <slot name=\"hint\">${this.hint}</slot>\n </span>\n `\n : nothing}\n </span>\n `\n : html`<slot @slotchange=${this.defaultSlotChanged} hidden></slot>`}\n </label>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-checkbox': PkCheckbox;\n }\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"pk-checkbox-13ArHSmt.js","names":[],"sources":["../../src/icons/checkbox-indicators.ts","../../src/base/checkbox-control.styles.ts","../../src/components/checkbox/pk-checkbox.styles.ts","../../src/components/checkbox/pk-checkbox.ts"],"sourcesContent":["import { html, type TemplateResult } from 'lit';\n\n/** Craft checkbox tick — matches plugin-kit-react Checkbox.tsx /\nexport function renderCheckboxCheckIcon(): TemplateResult {\n return html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" aria-hidden=\"true\" viewBox=\"0 0 640 640\">\n <path\n fill=\"currentColor\"\n d=\"M557.5 192L534.9 214.6L278.9 470.6C266.4 483.1 246.1 483.1 233.6 470.6L105.6 342.6L83 320L128.3 274.7C129.6 276 172.3 318.7 256.3 402.7L489.7 169.3L512.3 146.7L557.6 192z\"\n />\n </svg>\n `;\n}\n\n/* Craft checkbox indeterminate mark — matches plugin-kit-react Checkbox.tsx /\nexport function renderCheckboxIndeterminateIcon(): TemplateResult {\n return html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" aria-hidden=\"true\" viewBox=\"0 0 640 640\">\n <path fill=\"currentColor\" d=\"M96 352V288H544V352H96z\" />\n </svg>\n `;\n}\n","import { css } from 'lit';\n\n/* Shared checkbox/radio control box — Craft tokens, border-box sizing. /\nexport const checkboxControlStyles = css`\n @layer pk-component {\n .control {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n position: relative;\n box-sizing: border-box;\n width: var(--pk-checkbox-size);\n height: var(--pk-checkbox-size);\n border: 1px solid var(--pk-checkbox-border-color, #c0cbd9);\n border-radius: var(--pk-radius-sm);\n background: var(--pk-color-white);\n cursor: pointer;\n transition: border-color 0.12s ease, box-shadow 0.12s ease;\n }\n\n :host([disabled]) .control {\n cursor: not-allowed;\n }\n\n .input:focus-visible + .control {\n border-color: var(--pk-color-sky-600);\n box-shadow: 0 0 0 1px var(--pk-color-sky-600), 0 0 4px 0 hsl(from var(--pk-color-sky-600) h s l / 0.7);\n }\n\n :host([invalid]) .control,\n .input[aria-invalid='true'] + .control {\n border-color: var(--pk-color-rose-600);\n }\n\n :host([invalid]) .input:focus-visible + .control,\n .input[aria-invalid='true']:focus-visible + .control {\n border-color: var(--pk-color-rose-600);\n box-shadow: 0 0 0 1px var(--pk-color-rose-600), 0 0 4px 0 hsl(from var(--pk-color-rose-600) h s l / 0.7);\n }\n\n .indicator {\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--pk-color-gray-900);\n }\n\n .icon-check,\n .icon-indeterminate {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n pointer-events: none;\n }\n\n .icon-check svg {\n width: 14px;\n height: 14px;\n transform: translateY(1px) scale(1.2);\n }\n\n .icon-indeterminate svg {\n width: 12px;\n height: 12px;\n }\n\n :host([checked]) .icon-check,\n .input:checked + .control .icon-check {\n opacity: 1;\n }\n\n :host([indeterminate]) .icon-check,\n .input:indeterminate + .control .icon-check {\n opacity: 0;\n }\n\n :host([indeterminate]) .icon-indeterminate,\n .input:indeterminate + .control .icon-indeterminate {\n opacity: 1;\n }\n }\n`;\n","import { css } from 'lit';\n\nimport { checkboxControlStyles } from '../../base/checkbox-control.styles.js';\n\nconst pkCheckboxLayoutStyles = css`\n @layer pk-component {\n :host {\n display: inline-flex;\n vertical-align: middle;\n / Hit target is the content-sized .root label (Craft checkbox-select), not the host. /\n cursor: default;\n font-family: var(--pk-font-family);\n font-size: var(--pk-font-size-base);\n line-height: var(--pk-line-height);\n }\n\n :host([disabled]) {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n .root {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: flex-start;\n gap: var(--pk-control-label-gap);\n / Content-sized like Craft's <label> beside the checkbox — not full-row. /\n width: fit-content;\n max-width: 100%;\n margin: 0;\n min-height: 0;\n cursor: pointer;\n user-select: none;\n position: relative;\n }\n\n :host([disabled]) .root {\n cursor: not-allowed;\n }\n\n .root--with-hint {\n align-items: flex-start;\n }\n\n .input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n opacity: 0;\n appearance: none;\n }\n\n .text {\n display: flex;\n flex-direction: column;\n gap: 0.125rem;\n min-width: 0;\n }\n\n .label {\n line-height: max(1rem, var(--pk-checkbox-size));\n / Match form-control / Craft body labels (gray-700), not gray-900. /\n color: var(--pk-color-gray-700);\n cursor: pointer;\n }\n\n :host([disabled]) .label {\n cursor: not-allowed;\n }\n\n :host(.all-option) .label {\n font-weight: 700;\n }\n\n .hint {\n margin: 0;\n color: var(--pk-color-gray-500);\n font-size: var(--pk-font-size-sm);\n line-height: var(--pk-line-height);\n }\n\n .hint:empty {\n display: none;\n }\n }\n`;\n\nexport const pkCheckboxStyles = [checkboxControlStyles, pkCheckboxLayoutStyles];\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';\n\nimport { PkFormAssociatedElement } from '../../base/pk-form-associated-element.js';\nimport { renderCheckboxCheckIcon, renderCheckboxIndeterminateIcon } from '../../icons/checkbox-indicators.js';\nimport { HasSlotController } from '../../internal/has-slot.js';\nimport { RequiredValidator } from '../../validators/index.js';\nimport { pkCheckboxStyles } from './pk-checkbox.styles.js';\n\n/\n –aligned checkbox control.\n \n @slot - Checkbox label text\n * @slot hint - Descriptive hint (or use the `hint` attribute)\n \n @csspart base - Root label element\n * @csspart input - Native checkbox input\n * @csspart control - Visual checkbox box\n * @csspart label - Label text container\n * @csspart hint - Hint text container\n * @csspart checked-icon - Checked state icon\n * @csspart indeterminate-icon - Indeterminate state icon\n /\n@customElement('pk-checkbox')\nexport class PkCheckbox extends PkFormAssociatedElement {\n static override shadowRootOptions: ShadowRootInit = {\n mode: 'open',\n delegatesFocus: true,\n };\n\n static override styles = pkCheckboxStyles;\n\n static override get validators() {\n return [...super.validators, RequiredValidator({ validationProperty: 'checked' })];\n }\n\n override assumeInteractionOn = ['change'];\n\n private readonly hasSlotController = new HasSlotController(this, 'hint');\n\n @property({ type: Boolean, reflect: true })\n checked = false;\n\n @property({ type: Boolean, reflect: true })\n indeterminate = false;\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n @property({ type: Boolean, reflect: true })\n invalid = false;\n\n @property()\n checkboxValue = 'on';\n\n @property({ attribute: 'default-checked', type: Boolean })\n defaultChecked = false;\n\n @property({ attribute: 'aria-label' })\n ariaLabel: string \| null = null;\n\n /* Descriptive hint — use the `hint` slot for HTML content. /\n @property()\n hint = '';\n\n /* Only required for SSR when slotting a hint. */\n @property({ type: Boolean, attribute: 'with-hint' })\n withHint = false;\n\n @query('.input')\n override input!: HTMLInputElement;\n\n @state()\n private hasDefaultSlotContent = false;\n\n protected override get validationTarget(): HTMLElement {\n return this.input;\n }\n\n protected override syncFormValue(): void {\n this.setFormValue(this.checked ? this.checkboxValue : null, this.checked ? 'on' : 'off');\n }\n\n protected override resetToDefaultValue(): void {\n this.checked = this.defaultChecked;\n this.indeterminate = false;\n }\n\n protected override restoreFormState(state: string \| File \| FormData \| null): void {\n if (state === 'on' \|\| state === this.checkboxValue) {\n this.checked = true;\n } else {\n this.checked = false;\n }\n }\n\n override updated(changed: PropertyValues): void {\n if (!this.input) {\n super.updated(changed);\n return;\n }\n\n if (changed.has('checkboxValue')) {\n this.syncFormValue();\n }\n\n if (changed.has('indeterminate') \|\| changed.has('checked')) {\n this.input.indeterminate = this.indeterminate;\n this.input.checked = this.checked;\n }\n\n super.updated(changed);\n }\n\n private defaultSlotChanged(event: Event): void {\n const slot = event.target as HTMLSlotElement;\n this.hasDefaultSlotContent = slot.assignedNodes({ flatten: true }).some((node) => {\n if (node.nodeType === Node.TEXT_NODE) {\n return node.textContent?.trim();\n }\n\n return node.nodeType === Node.ELEMENT_NODE;\n });\n }\n\n private handleChange(event: Event): void {\n const input = event.target as HTMLInputElement;\n this.checked = input.checked;\n this.indeterminate = false;\n\n this.dispatchEvent(new CustomEvent('pk-change', {\n detail: { checked: this.checked },\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 override render() {\n const hasLabel = this.hasDefaultSlotContent;\n const hasHint = Boolean(this.hint) \|\| this.hasSlotController.test('hint', this.withHint);\n\n return html`\n <label\n part=\"base\"\n class=${classMap({\n root: true,\n 'root--with-hint': hasHint,\n })}\n >\n <input\n part=\"input\"\n class=\"input\"\n type=\"checkbox\"\n .checked=${this.checked}\n ?disabled=${this.disabled}\n ?required=${this.required}\n name=${this.name ?? nothing}\n value=${this.checkboxValue}\n aria-labelledby=${hasLabel ? 'label' : nothing}\n aria-describedby=${hasHint ? 'hint' : nothing}\n aria-label=${!hasLabel ? (this.ariaLabel ?? nothing) : nothing}\n aria-invalid=${this.invalid ? 'true' : nothing}\n @change=${this.handleChange}\n />\n <span part=\"control\" class=\"control\">\n <span part=\"checked-icon\" class=\"icon-check\">${renderCheckboxCheckIcon()}</span>\n <span part=\"indeterminate-icon\" class=\"icon-indeterminate\">${renderCheckboxIndeterminateIcon()}</span>\n </span>\n ${hasLabel \|\| hasHint\n ? html`\n <span class=\"text\">\n ${hasLabel\n ? html`\n <span part=\"label\" class=\"label\" id=\"label\">\n <slot @slotchange=${this.defaultSlotChanged}></slot>\n </span>\n `\n : html`<slot @slotchange=${this.defaultSlotChanged} hidden></slot>`}\n ${hasHint\n ? html`\n <span part=\"hint\" class=\"hint\" id=\"hint\">\n <slot name=\"hint\">${this.hint}</slot>\n </span>\n `\n : nothing}\n </span>\n `\n : html`<slot @slotchange=${this.defaultSlotChanged} hidden></slot>`}\n </label>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-checkbox': PkCheckbox;\n }\n}\n"],"mappings":"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"}

package/dist/chunks/{pk-checkbox-select-DeCaI3a0.js → pk-checkbox-select-Ckvfbu83.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { i as property, n as PkElement, o as state, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
-import "./pk-checkbox-CfV1uDdC.js";
+import "./pk-checkbox-13ArHSmt.js";
 import { css, html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 //#region src/components/checkbox-select/pk-checkbox-select.styles.ts
@@ -218,4 +218,4 @@ PkCheckboxSelect = __decorate([customElement("pk-checkbox-select")], PkCheckboxS
 //#endregion
 export { PkCheckboxSelect as n, ALL_VALUE as t };
-//# sourceMappingURL=pk-checkbox-select-DeCaI3a0.js.map
+//# sourceMappingURL=pk-checkbox-select-Ckvfbu83.js.map

package/dist/chunks/{pk-checkbox-select-DeCaI3a0.js.map → pk-checkbox-select-Ckvfbu83.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pk-checkbox-select-DeCaI3a0.js","names":[],"sources":["../../src/components/checkbox-select/pk-checkbox-select.styles.ts","../../src/components/checkbox-select/pk-checkbox-select.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkCheckboxSelectStyles = css`\n @layer pk-component {\n :host {\n display: block;\n font-family: var(--pk-font-family);\n font-size: var(--pk-font-size-sm);\n line-height: var(--pk-line-height);\n }\n\n :host([disabled]) {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n .options {\n display: flex;\n flex-direction: column;\n gap: var(--pk-checkbox-select-gap, 0);\n }\n\n .options--horizontal {\n flex-direction: row;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--pk-checkbox-select-gap, 0);\n }\n\n ::slotted(pk-checkbox),\n pk-checkbox {\n display: block;\n }\n\n .options--horizontal pk-checkbox.all-option {\n width: 100%;\n }\n }\n`;\n","import { html } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, state } from '../../decorators.js';\nimport type { ComplexAttributeConverter, PropertyValues } from 'lit';\n\nimport { PkElement } from '../../base/pk-element.js';\n// Side-effect import — option rows are created as `pk-checkbox` in the shadow tree.\nimport '../checkbox/pk-checkbox.js';\nimport type { PkCheckbox } from '../checkbox/pk-checkbox.js';\nimport { pkCheckboxSelectStyles } from './pk-checkbox-select.styles.js';\n\nexport const ALL_VALUE = '' as const;\n\nexport type PkCheckboxSelectOption = {\n label: string;\n value: string;\n};\n\nexport type PkCheckboxSelectValue = typeof ALL_VALUE \| string[];\n\nexport type PkCheckboxSelectOrientation = 'horizontal' \| 'vertical';\n\n/* JSON array for Craft/Twig + docs HTML; property assignment still preferred in JS. /\nconst optionsConverter: ComplexAttributeConverter<PkCheckboxSelectOption[]> = {\n fromAttribute(value) {\n if (!value) {\n return [];\n }\n\n try {\n const parsed = JSON.parse(value);\n\n return Array.isArray(parsed)\n ? parsed\n .filter((item): item is PkCheckboxSelectOption => Boolean(item && typeof item === 'object' && 'value' in item))\n .map((item) => ({\n label: String((item as PkCheckboxSelectOption).label ?? (item as PkCheckboxSelectOption).value),\n value: String((item as PkCheckboxSelectOption).value),\n }))\n : [];\n } catch {\n return [];\n }\n },\n toAttribute(value) {\n return JSON.stringify(value ?? []);\n },\n};\n\n/* `` for all-selected, otherwise a JSON string array. /\nconst valueConverter: ComplexAttributeConverter<PkCheckboxSelectValue> = {\n fromAttribute(value) {\n if (value == null \|\| value === '') {\n return [];\n }\n\n if (value === '') {\n return ALL_VALUE;\n }\n\n try {\n const parsed = JSON.parse(value);\n\n if (parsed === '') {\n return ALL_VALUE;\n }\n\n return Array.isArray(parsed) ? parsed.map(String) : [];\n } catch {\n return [];\n }\n },\n toAttribute(value) {\n return value === ALL_VALUE ? '' : JSON.stringify(value ?? []);\n },\n};\n\n/\n Multi-select checkbox group — options via the `options` property/attribute (not slotted\n * checkboxes). Wrap in `pk-field` for label/instructions (mirrors React `CheckboxSelect` + `FieldLayout`).\n \n @fires pk-change - `{ value: string[] \| '' }`\n \n * @csspart base - Checkbox options container\n /\n@customElement('pk-checkbox-select')\nexport class PkCheckboxSelect extends PkElement {\n static override styles = pkCheckboxSelectStyles;\n\n @property({ attribute: 'options', converter: optionsConverter })\n options: PkCheckboxSelectOption[] = [];\n\n /* Selected values, or `` when the All option is active. /\n @property({ attribute: 'value', converter: valueConverter })\n value: PkCheckboxSelectValue = [];\n @property({ type: Boolean, attribute: 'show-all-option' })\n showAllOption = false;\n\n @property({ attribute: 'all-label' })\n allLabel = 'All';\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n @property({ reflect: true })\n orientation: PkCheckboxSelectOrientation = 'vertical';\n\n @property({ attribute: 'aria-label' })\n ariaLabel: string \| null = null;\n\n @state()\n private optionElements: PkCheckbox[] = [];\n\n private allOptionElement: PkCheckbox \| null = null;\n\n override connectedCallback(): void {\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'group');\n }\n\n super.connectedCallback();\n }\n\n override updated(changed: PropertyValues): void {\n if (changed.has('options') \|\| changed.has('showAllOption')) {\n this.rebuildOptionElements();\n return;\n }\n\n if (changed.has('value') \|\| changed.has('disabled')) {\n this.updateOptionStates();\n }\n }\n\n override firstUpdated(): void {\n this.rebuildOptionElements();\n }\n\n override focus(options?: FocusOptions): void {\n const first = this.optionElements.find((element) => !element.disabled);\n\n first?.focus(options);\n }\n\n private get isAllSelected(): boolean {\n return this.value === ALL_VALUE;\n }\n\n private get selectedValues(): string[] {\n if (this.isAllSelected) {\n return this.options.map((option) => option.value);\n }\n\n return Array.isArray(this.value) ? this.value : [];\n }\n\n private dispatchValueChange(): void {\n const detailValue = this.isAllSelected ? ALL_VALUE : [...this.selectedValues];\n\n this.dispatchEvent(new CustomEvent('pk-change', {\n detail: { value: detailValue },\n bubbles: true,\n composed: true,\n }));\n\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n }\n\n private handleAllChange = (event: CustomEvent<{ checked: boolean }>): void => {\n event.stopPropagation();\n this.value = event.detail.checked ? ALL_VALUE : [];\n this.dispatchValueChange();\n };\n\n private handleItemChange = (optionValue: string, event: CustomEvent<{ checked: boolean }>): void => {\n event.stopPropagation();\n\n if (this.isAllSelected) {\n return;\n }\n\n const checked = event.detail.checked;\n const current = this.selectedValues;\n this.value = checked\n ? [...current, optionValue]\n : current.filter((value) => value !== optionValue);\n\n this.dispatchValueChange();\n };\n\n private rebuildOptionElements(): void {\n const container = this.shadowRoot?.querySelector('.options');\n\n if (!container) {\n return;\n }\n\n for (const element of this.optionElements) {\n element.remove();\n }\n\n this.optionElements = [];\n this.allOptionElement = null;\n\n if (this.showAllOption) {\n const allCheckbox = document.createElement('pk-checkbox') as PkCheckbox;\n allCheckbox.classList.add('all-option');\n allCheckbox.append(this.allLabel);\n allCheckbox.addEventListener('pk-change', this.handleAllChange as EventListener);\n\n container.append(allCheckbox);\n this.allOptionElement = allCheckbox;\n this.optionElements.push(allCheckbox);\n }\n\n for (const option of this.options) {\n const checkbox = document.createElement('pk-checkbox') as PkCheckbox;\n checkbox.checkboxValue = option.value;\n checkbox.append(option.label);\n checkbox.addEventListener('pk-change', (event) => {\n this.handleItemChange(option.value, event as CustomEvent<{ checked: boolean }>);\n });\n\n container.append(checkbox);\n this.optionElements.push(checkbox);\n }\n\n this.updateOptionStates();\n }\n\n private updateOptionStates(): void {\n if (this.allOptionElement) {\n this.allOptionElement.checked = this.isAllSelected;\n this.allOptionElement.disabled = this.disabled;\n }\n\n for (const option of this.options) {\n const checkbox = this.optionElements.find(\n (element) => element !== this.allOptionElement && element.checkboxValue === option.value,\n );\n\n if (!checkbox) {\n continue;\n }\n\n checkbox.checked = this.isAllSelected \|\| this.selectedValues.includes(option.value);\n checkbox.disabled = this.disabled \|\| this.isAllSelected;\n }\n }\n\n override render() {\n return html`\n <div\n part=\"base\"\n class=${classMap({\n options: true,\n 'options--horizontal': this.orientation === 'horizontal',\n })}\n ></div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-checkbox-select': PkCheckboxSelect;\n }\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"pk-checkbox-select-Ckvfbu83.js","names":[],"sources":["../../src/components/checkbox-select/pk-checkbox-select.styles.ts","../../src/components/checkbox-select/pk-checkbox-select.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkCheckboxSelectStyles = css`\n @layer pk-component {\n :host {\n display: block;\n font-family: var(--pk-font-family);\n font-size: var(--pk-font-size-sm);\n line-height: var(--pk-line-height);\n }\n\n :host([disabled]) {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n .options {\n display: flex;\n flex-direction: column;\n gap: var(--pk-checkbox-select-gap, 0);\n }\n\n .options--horizontal {\n flex-direction: row;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--pk-checkbox-select-gap, 0);\n }\n\n ::slotted(pk-checkbox),\n pk-checkbox {\n display: block;\n }\n\n .options--horizontal pk-checkbox.all-option {\n width: 100%;\n }\n }\n`;\n","import { html } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, state } from '../../decorators.js';\nimport type { ComplexAttributeConverter, PropertyValues } from 'lit';\n\nimport { PkElement } from '../../base/pk-element.js';\n// Side-effect import — option rows are created as `pk-checkbox` in the shadow tree.\nimport '../checkbox/pk-checkbox.js';\nimport type { PkCheckbox } from '../checkbox/pk-checkbox.js';\nimport { pkCheckboxSelectStyles } from './pk-checkbox-select.styles.js';\n\nexport const ALL_VALUE = '' as const;\n\nexport type PkCheckboxSelectOption = {\n label: string;\n value: string;\n};\n\nexport type PkCheckboxSelectValue = typeof ALL_VALUE \| string[];\n\nexport type PkCheckboxSelectOrientation = 'horizontal' \| 'vertical';\n\n/* JSON array for Craft/Twig + docs HTML; property assignment still preferred in JS. /\nconst optionsConverter: ComplexAttributeConverter<PkCheckboxSelectOption[]> = {\n fromAttribute(value) {\n if (!value) {\n return [];\n }\n\n try {\n const parsed = JSON.parse(value);\n\n return Array.isArray(parsed)\n ? parsed\n .filter((item): item is PkCheckboxSelectOption => Boolean(item && typeof item === 'object' && 'value' in item))\n .map((item) => ({\n label: String((item as PkCheckboxSelectOption).label ?? (item as PkCheckboxSelectOption).value),\n value: String((item as PkCheckboxSelectOption).value),\n }))\n : [];\n } catch {\n return [];\n }\n },\n toAttribute(value) {\n return JSON.stringify(value ?? []);\n },\n};\n\n/* `` for all-selected, otherwise a JSON string array. /\nconst valueConverter: ComplexAttributeConverter<PkCheckboxSelectValue> = {\n fromAttribute(value) {\n if (value == null \|\| value === '') {\n return [];\n }\n\n if (value === '') {\n return ALL_VALUE;\n }\n\n try {\n const parsed = JSON.parse(value);\n\n if (parsed === '') {\n return ALL_VALUE;\n }\n\n return Array.isArray(parsed) ? parsed.map(String) : [];\n } catch {\n return [];\n }\n },\n toAttribute(value) {\n return value === ALL_VALUE ? '' : JSON.stringify(value ?? []);\n },\n};\n\n/\n Multi-select checkbox group — options via the `options` property/attribute (not slotted\n * checkboxes). Wrap in `pk-field` for label/instructions (mirrors React `CheckboxSelect` + `FieldLayout`).\n \n @fires pk-change - `{ value: string[] \| '' }`\n \n * @csspart base - Checkbox options container\n /\n@customElement('pk-checkbox-select')\nexport class PkCheckboxSelect extends PkElement {\n static override styles = pkCheckboxSelectStyles;\n\n @property({ attribute: 'options', converter: optionsConverter })\n options: PkCheckboxSelectOption[] = [];\n\n /* Selected values, or `` when the All option is active. /\n @property({ attribute: 'value', converter: valueConverter })\n value: PkCheckboxSelectValue = [];\n @property({ type: Boolean, attribute: 'show-all-option' })\n showAllOption = false;\n\n @property({ attribute: 'all-label' })\n allLabel = 'All';\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n @property({ reflect: true })\n orientation: PkCheckboxSelectOrientation = 'vertical';\n\n @property({ attribute: 'aria-label' })\n ariaLabel: string \| null = null;\n\n @state()\n private optionElements: PkCheckbox[] = [];\n\n private allOptionElement: PkCheckbox \| null = null;\n\n override connectedCallback(): void {\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'group');\n }\n\n super.connectedCallback();\n }\n\n override updated(changed: PropertyValues): void {\n if (changed.has('options') \|\| changed.has('showAllOption')) {\n this.rebuildOptionElements();\n return;\n }\n\n if (changed.has('value') \|\| changed.has('disabled')) {\n this.updateOptionStates();\n }\n }\n\n override firstUpdated(): void {\n this.rebuildOptionElements();\n }\n\n override focus(options?: FocusOptions): void {\n const first = this.optionElements.find((element) => !element.disabled);\n\n first?.focus(options);\n }\n\n private get isAllSelected(): boolean {\n return this.value === ALL_VALUE;\n }\n\n private get selectedValues(): string[] {\n if (this.isAllSelected) {\n return this.options.map((option) => option.value);\n }\n\n return Array.isArray(this.value) ? this.value : [];\n }\n\n private dispatchValueChange(): void {\n const detailValue = this.isAllSelected ? ALL_VALUE : [...this.selectedValues];\n\n this.dispatchEvent(new CustomEvent('pk-change', {\n detail: { value: detailValue },\n bubbles: true,\n composed: true,\n }));\n\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n }\n\n private handleAllChange = (event: CustomEvent<{ checked: boolean }>): void => {\n event.stopPropagation();\n this.value = event.detail.checked ? ALL_VALUE : [];\n this.dispatchValueChange();\n };\n\n private handleItemChange = (optionValue: string, event: CustomEvent<{ checked: boolean }>): void => {\n event.stopPropagation();\n\n if (this.isAllSelected) {\n return;\n }\n\n const checked = event.detail.checked;\n const current = this.selectedValues;\n this.value = checked\n ? [...current, optionValue]\n : current.filter((value) => value !== optionValue);\n\n this.dispatchValueChange();\n };\n\n private rebuildOptionElements(): void {\n const container = this.shadowRoot?.querySelector('.options');\n\n if (!container) {\n return;\n }\n\n for (const element of this.optionElements) {\n element.remove();\n }\n\n this.optionElements = [];\n this.allOptionElement = null;\n\n if (this.showAllOption) {\n const allCheckbox = document.createElement('pk-checkbox') as PkCheckbox;\n allCheckbox.classList.add('all-option');\n allCheckbox.append(this.allLabel);\n allCheckbox.addEventListener('pk-change', this.handleAllChange as EventListener);\n\n container.append(allCheckbox);\n this.allOptionElement = allCheckbox;\n this.optionElements.push(allCheckbox);\n }\n\n for (const option of this.options) {\n const checkbox = document.createElement('pk-checkbox') as PkCheckbox;\n checkbox.checkboxValue = option.value;\n checkbox.append(option.label);\n checkbox.addEventListener('pk-change', (event) => {\n this.handleItemChange(option.value, event as CustomEvent<{ checked: boolean }>);\n });\n\n container.append(checkbox);\n this.optionElements.push(checkbox);\n }\n\n this.updateOptionStates();\n }\n\n private updateOptionStates(): void {\n if (this.allOptionElement) {\n this.allOptionElement.checked = this.isAllSelected;\n this.allOptionElement.disabled = this.disabled;\n }\n\n for (const option of this.options) {\n const checkbox = this.optionElements.find(\n (element) => element !== this.allOptionElement && element.checkboxValue === option.value,\n );\n\n if (!checkbox) {\n continue;\n }\n\n checkbox.checked = this.isAllSelected \|\| this.selectedValues.includes(option.value);\n checkbox.disabled = this.disabled \|\| this.isAllSelected;\n }\n }\n\n override render() {\n return html`\n <div\n part=\"base\"\n class=${classMap({\n options: true,\n 'options--horizontal': this.orientation === 'horizontal',\n })}\n ></div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-checkbox-select': PkCheckboxSelect;\n }\n}\n"],"mappings":"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"}

package/dist/chunks/{pk-code-editor-BG9sG_Fy.js → pk-code-editor-BlG6O5qB.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { a as query, i as property, o as state, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
-import { t as PkFormAssociatedElement } from "./pk-form-associated-element-CCQALRGB.js";
+import { t as PkFormAssociatedElement } from "./pk-form-associated-element-GxX5lbnk.js";
 import { t as MirrorValidator } from "./mirror-validator-DCjNYrrx.js";
 import { t as formControlStyles } from "./form-control.styles-BQdimE5o.js";
 import { css, html } from "lit";
@@ -209,4 +209,4 @@ PkCodeEditor = __decorate([customElement("pk-code-editor")], PkCodeEditor);
 //#endregion
 export { PkCodeEditor as t };
-//# sourceMappingURL=pk-code-editor-BG9sG_Fy.js.map
+//# sourceMappingURL=pk-code-editor-BlG6O5qB.js.map

package/dist/chunks/{pk-code-editor-BG9sG_Fy.js.map → pk-code-editor-BlG6O5qB.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pk-code-editor-BG9sG_Fy.js","names":[],"sources":["../../src/components/code-editor/pk-code-editor.styles.ts","../../src/components/code-editor/pk-code-editor.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkCodeEditorStyles = css`\n @layer pk-component {\n :host {\n display: block;\n width: 100%;\n font-family: var(--pk-font-family);\n }\n\n .shell {\n overflow: hidden;\n border: 1px solid rgba(96, 125, 159, 0.4);\n border-radius: var(--pk-radius-sm);\n background: #ffffff;\n }\n\n .shell:focus-within {\n border-color: var(--pk-color-sky-600);\n box-shadow:\n 0 0 0 1px var(--pk-color-sky-600),\n 0 0 4px 0 color-mix(in srgb, var(--pk-color-sky-600) 70%, transparent);\n }\n\n :host([invalid]) .shell,\n :host(:state(user-invalid)) .shell {\n border-color: var(--pk-color-rose-600);\n }\n\n :host([invalid]) .shell:focus-within,\n :host(:state(user-invalid)) .shell:focus-within {\n border-color: var(--pk-color-rose-600);\n box-shadow:\n 0 0 0 1px var(--pk-color-rose-600),\n 0 0 4px 0 color-mix(in srgb, var(--pk-color-rose-600) 70%, transparent);\n }\n\n :host([disabled]),\n :host([readonly]) {\n opacity: 0.7;\n }\n\n .editor-mount {\n min-height: var(--pk-code-editor-min-height, 12rem);\n }\n\n .editor-mount .cm-editor {\n min-height: inherit;\n }\n\n .mirror-input {\n display: none;\n }\n }\n`;\n","import { html } from 'lit';\nimport { customElement, property, query, state } from '../../decorators.js';\nimport type { PropertyValues } from 'lit';\nimport {\n CodeMirrorHost,\n computeCodeEditorMinHeight,\n type CodeEditorLanguage,\n} from '@verbb/plugin-kit-codemirror-core';\n\nimport { formControlStyles } from '../../base/form-control.styles.js';\nimport { PkFormAssociatedElement } from '../../base/pk-form-associated-element.js';\nimport { MirrorValidator } from '../../validators/index.js';\nimport { pkCodeEditorStyles } from './pk-code-editor.styles.js';\n\n@customElement('pk-code-editor')\nexport class PkCodeEditor extends PkFormAssociatedElement {\n static override styles = [formControlStyles, pkCodeEditorStyles];\n\n static override get validators() {\n return [...super.validators, MirrorValidator()];\n }\n\n override assumeInteractionOn = ['blur', 'input'];\n\n @query('.editor-mount')\n private editorMount!: HTMLDivElement;\n\n @query('.mirror-input')\n override input!: HTMLInputElement;\n\n private readonly host = new CodeMirrorHost();\n\n private hasInitializedEditor = false;\n\n private _value: string \| null = null;\n\n @property()\n language: CodeEditorLanguage = 'html';\n\n @property({ type: Number, attribute: 'tab-size' })\n tabSize = 4;\n\n @property({ type: Boolean, attribute: 'line-numbers' })\n lineNumbers = true;\n\n @property({ type: Number })\n rows = 12;\n\n @property({ type: Boolean, reflect: true })\n readonly = false;\n\n @property({ type: Boolean, reflect: true })\n invalid = false;\n\n get value(): string {\n if (this.valueHasChanged) {\n return this._value ?? '';\n }\n\n return this._value ?? this.defaultValue ?? '';\n }\n\n @state()\n set value(val: string \| null) {\n const next = val ?? '';\n\n if (this._value === next) {\n return;\n }\n\n this.valueHasChanged = true;\n this._value = next;\n }\n\n @property({ attribute: 'value', reflect: true })\n defaultValue: string \| null = '';\n\n get editorView() {\n return this.host.view;\n }\n\n protected override syncFormValue(): void {\n this.setValue(this.value \|\| '');\n\n if (this.input) {\n this.input.value = this.value \|\| '';\n }\n }\n\n protected override resetToDefaultValue(): void {\n this.valueHasChanged = false;\n this._value = null;\n this.syncEditorContent();\n }\n\n protected override restoreFormState(state: string \| File \| FormData \| null): void {\n if (typeof state === 'string') {\n this.value = state;\n this.syncEditorContent();\n }\n }\n\n override disconnectedCallback(): void {\n this.host.destroy();\n super.disconnectedCallback();\n }\n\n override updated(changed: PropertyValues): void {\n if ((changed.has('value') && !changed.has('defaultValue')) \|\| (changed.has('defaultValue') && !this.valueHasChanged)) {\n this.syncEditorContent();\n }\n\n if (changed.has('disabled') \|\| changed.has('readonly')) {\n this.host.setEditable(!this.disabled && !this.readonly);\n }\n\n if (\n this.hasInitializedEditor\n && (changed.has('language') \|\| changed.has('tabSize') \|\| changed.has('lineNumbers') \|\| changed.has('rows'))\n ) {\n this.remountEditor();\n }\n\n super.updated(changed);\n }\n\n override firstUpdated(): void {\n this.style.setProperty('--pk-code-editor-min-height', computeCodeEditorMinHeight(this.rows));\n this.mountEditor();\n this.hasInitializedEditor = true;\n this.syncFormValue();\n }\n\n private mountEditor(): void {\n this.host.mount({\n parent: this.editorMount,\n value: this.value,\n language: this.language,\n tabSize: this.tabSize,\n lineNumbers: this.lineNumbers,\n rows: this.rows,\n editable: !this.disabled && !this.readonly,\n onUpdate: (nextValue) => {\n this.value = nextValue;\n\n if (this.input) {\n this.input.value = nextValue;\n }\n\n this.syncFormValue();\n this.emitValueChange(nextValue);\n },\n onBlur: () => {\n this.dispatchEvent(new Event('blur', { bubbles: true, composed: true }));\n },\n });\n }\n\n private remountEditor(): void {\n this.host.destroy();\n this.style.setProperty('--pk-code-editor-min-height', computeCodeEditorMinHeight(this.rows));\n this.mountEditor();\n }\n\n private syncEditorContent(): void {\n this.host.setValue(this.value);\n }\n\n private emitValueChange(value: string): void {\n this.dispatchEvent(new CustomEvent('pk-change', {\n detail: { value },\n bubbles: true,\n composed: true,\n }));\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n }\n\n override render() {\n return html`\n <div class=\"shell\" part=\"shell\">\n <div class=\"editor-mount\" part=\"editor\"></div>\n <input class=\"mirror-input\" type=\"text\" .value=${this.value} readonly tabindex=\"-1\" aria-hidden=\"true\" />\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-code-editor': PkCodeEditor;\n }\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"pk-code-editor-BlG6O5qB.js","names":[],"sources":["../../src/components/code-editor/pk-code-editor.styles.ts","../../src/components/code-editor/pk-code-editor.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkCodeEditorStyles = css`\n @layer pk-component {\n :host {\n display: block;\n width: 100%;\n font-family: var(--pk-font-family);\n }\n\n .shell {\n overflow: hidden;\n border: 1px solid rgba(96, 125, 159, 0.4);\n border-radius: var(--pk-radius-sm);\n background: #ffffff;\n }\n\n .shell:focus-within {\n border-color: var(--pk-color-sky-600);\n box-shadow:\n 0 0 0 1px var(--pk-color-sky-600),\n 0 0 4px 0 color-mix(in srgb, var(--pk-color-sky-600) 70%, transparent);\n }\n\n :host([invalid]) .shell,\n :host(:state(user-invalid)) .shell {\n border-color: var(--pk-color-rose-600);\n }\n\n :host([invalid]) .shell:focus-within,\n :host(:state(user-invalid)) .shell:focus-within {\n border-color: var(--pk-color-rose-600);\n box-shadow:\n 0 0 0 1px var(--pk-color-rose-600),\n 0 0 4px 0 color-mix(in srgb, var(--pk-color-rose-600) 70%, transparent);\n }\n\n :host([disabled]),\n :host([readonly]) {\n opacity: 0.7;\n }\n\n .editor-mount {\n min-height: var(--pk-code-editor-min-height, 12rem);\n }\n\n .editor-mount .cm-editor {\n min-height: inherit;\n }\n\n .mirror-input {\n display: none;\n }\n }\n`;\n","import { html } from 'lit';\nimport { customElement, property, query, state } from '../../decorators.js';\nimport type { PropertyValues } from 'lit';\nimport {\n CodeMirrorHost,\n computeCodeEditorMinHeight,\n type CodeEditorLanguage,\n} from '@verbb/plugin-kit-codemirror-core';\n\nimport { formControlStyles } from '../../base/form-control.styles.js';\nimport { PkFormAssociatedElement } from '../../base/pk-form-associated-element.js';\nimport { MirrorValidator } from '../../validators/index.js';\nimport { pkCodeEditorStyles } from './pk-code-editor.styles.js';\n\n@customElement('pk-code-editor')\nexport class PkCodeEditor extends PkFormAssociatedElement {\n static override styles = [formControlStyles, pkCodeEditorStyles];\n\n static override get validators() {\n return [...super.validators, MirrorValidator()];\n }\n\n override assumeInteractionOn = ['blur', 'input'];\n\n @query('.editor-mount')\n private editorMount!: HTMLDivElement;\n\n @query('.mirror-input')\n override input!: HTMLInputElement;\n\n private readonly host = new CodeMirrorHost();\n\n private hasInitializedEditor = false;\n\n private _value: string \| null = null;\n\n @property()\n language: CodeEditorLanguage = 'html';\n\n @property({ type: Number, attribute: 'tab-size' })\n tabSize = 4;\n\n @property({ type: Boolean, attribute: 'line-numbers' })\n lineNumbers = true;\n\n @property({ type: Number })\n rows = 12;\n\n @property({ type: Boolean, reflect: true })\n readonly = false;\n\n @property({ type: Boolean, reflect: true })\n invalid = false;\n\n get value(): string {\n if (this.valueHasChanged) {\n return this._value ?? '';\n }\n\n return this._value ?? this.defaultValue ?? '';\n }\n\n @state()\n set value(val: string \| null) {\n const next = val ?? '';\n\n if (this._value === next) {\n return;\n }\n\n this.valueHasChanged = true;\n this._value = next;\n }\n\n @property({ attribute: 'value', reflect: true })\n defaultValue: string \| null = '';\n\n get editorView() {\n return this.host.view;\n }\n\n protected override syncFormValue(): void {\n this.setValue(this.value \|\| '');\n\n if (this.input) {\n this.input.value = this.value \|\| '';\n }\n }\n\n protected override resetToDefaultValue(): void {\n this.valueHasChanged = false;\n this._value = null;\n this.syncEditorContent();\n }\n\n protected override restoreFormState(state: string \| File \| FormData \| null): void {\n if (typeof state === 'string') {\n this.value = state;\n this.syncEditorContent();\n }\n }\n\n override disconnectedCallback(): void {\n this.host.destroy();\n super.disconnectedCallback();\n }\n\n override updated(changed: PropertyValues): void {\n if ((changed.has('value') && !changed.has('defaultValue')) \|\| (changed.has('defaultValue') && !this.valueHasChanged)) {\n this.syncEditorContent();\n }\n\n if (changed.has('disabled') \|\| changed.has('readonly')) {\n this.host.setEditable(!this.disabled && !this.readonly);\n }\n\n if (\n this.hasInitializedEditor\n && (changed.has('language') \|\| changed.has('tabSize') \|\| changed.has('lineNumbers') \|\| changed.has('rows'))\n ) {\n this.remountEditor();\n }\n\n super.updated(changed);\n }\n\n override firstUpdated(): void {\n this.style.setProperty('--pk-code-editor-min-height', computeCodeEditorMinHeight(this.rows));\n this.mountEditor();\n this.hasInitializedEditor = true;\n this.syncFormValue();\n }\n\n private mountEditor(): void {\n this.host.mount({\n parent: this.editorMount,\n value: this.value,\n language: this.language,\n tabSize: this.tabSize,\n lineNumbers: this.lineNumbers,\n rows: this.rows,\n editable: !this.disabled && !this.readonly,\n onUpdate: (nextValue) => {\n this.value = nextValue;\n\n if (this.input) {\n this.input.value = nextValue;\n }\n\n this.syncFormValue();\n this.emitValueChange(nextValue);\n },\n onBlur: () => {\n this.dispatchEvent(new Event('blur', { bubbles: true, composed: true }));\n },\n });\n }\n\n private remountEditor(): void {\n this.host.destroy();\n this.style.setProperty('--pk-code-editor-min-height', computeCodeEditorMinHeight(this.rows));\n this.mountEditor();\n }\n\n private syncEditorContent(): void {\n this.host.setValue(this.value);\n }\n\n private emitValueChange(value: string): void {\n this.dispatchEvent(new CustomEvent('pk-change', {\n detail: { value },\n bubbles: true,\n composed: true,\n }));\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n }\n\n override render() {\n return html`\n <div class=\"shell\" part=\"shell\">\n <div class=\"editor-mount\" part=\"editor\"></div>\n <input class=\"mirror-input\" type=\"text\" .value=${this.value} readonly tabindex=\"-1\" aria-hidden=\"true\" />\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-code-editor': PkCodeEditor;\n }\n}\n"],"mappings":"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"}