@verbb/plugin-kit-web 2.0.15 → 2.0.16

package/dist/chunks/{pk-code-editor-CrKnJUyi.js → pk-code-editor-BG9sG_Fy.js}

@@ -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-9M2NzOE2.js";
+import { t as PkFormAssociatedElement } from "./pk-form-associated-element-CCQALRGB.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-CrKnJUyi.js.map
+//# sourceMappingURL=pk-code-editor-BG9sG_Fy.js.map

package/dist/chunks/{pk-code-editor-CrKnJUyi.js.map → pk-code-editor-BG9sG_Fy.js.map}

@@ -1 +1 @@
-{"version":3,"file":"pk-code-editor-CrKnJUyi.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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"}
+{"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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"}

package/dist/chunks/{pk-color-input-DXdqNCK7.js → pk-color-input-CncNce1C.js}

@@ -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-9M2NzOE2.js";
+import { t as PkFormAssociatedElement } from "./pk-form-associated-element-CCQALRGB.js";
 import { t as MirrorValidator } from "./mirror-validator-DCjNYrrx.js";
 import { t as RequiredValidator } from "./required-validator-CEg8dvjS.js";
 import { css, html, nothing } from "lit";
@@ -402,4 +402,4 @@ PkColorInput = __decorate([customElement("pk-color-input")], PkColorInput);
 //#endregion
 export { PkColorInput as t };
 
-//# sourceMappingURL=pk-color-input-DXdqNCK7.js.map
+//# sourceMappingURL=pk-color-input-CncNce1C.js.map

package/dist/chunks/{pk-color-input-DXdqNCK7.js.map → pk-color-input-CncNce1C.js.map}

@@ -1 +1 @@
-{"version":3,"file":"pk-color-input-DXdqNCK7.js","names":[],"sources":["../../src/components/color-input/pk-color-input.styles.ts","../../src/components/color-input/pk-color-input.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * Size scale matches pk-input (xs / sm / default / lg). Metrics are shifted so\n * former `lg` (2.125rem / ~34px) is default — aligned with base input chrome.\n * `xl` is kept as a deprecated alias of `lg`.\n */\nexport const pkColorInputStyles = css`\n    @layer pk-component {\n        :host {\n            display: inline-block;\n            position: relative;\n            /* Former lg min-width — default now matches input default chrome. */\n            min-width: 6.75rem;\n            font-family: var(--pk-font-family);\n            vertical-align: middle;\n        }\n\n        :host([size='xs']) {\n            min-width: 5.5rem;\n        }\n\n        :host([size='sm']) {\n            min-width: 6.125rem;\n        }\n\n        :host([size='lg']),\n        :host([size='xl']) {\n            min-width: 7.375rem;\n        }\n\n        :host([fit-cell]) {\n            display: block;\n            width: 100%;\n            min-width: 0;\n            max-width: 100%;\n            height: 100%;\n        }\n\n        :host([fit-cell]) .root {\n            display: block;\n            width: 100%;\n            height: 100%;\n        }\n\n        .root {\n            position: relative;\n            display: inline-block;\n            width: 100%;\n        }\n\n        .swatch {\n            position: absolute;\n            top: 50%;\n            left: 0.5rem;\n            z-index: 2;\n            width: 1.25rem;\n            height: 1.25rem;\n            transform: translateY(-50%);\n            border-radius: var(--pk-radius-sm);\n        }\n\n        :host([size='xs']) .swatch {\n            left: 0.375rem;\n            width: 1rem;\n            height: 1rem;\n        }\n\n        :host([size='sm']) .swatch {\n            left: 0.375rem;\n            width: 1.25rem;\n            height: 1.25rem;\n        }\n\n        :host([size='lg']) .swatch,\n        :host([size='xl']) .swatch {\n            left: 0.5rem;\n            width: 1.5rem;\n            height: 1.5rem;\n        }\n\n        :host([fit-cell]) .swatch {\n            left: 0.5rem;\n            width: 1rem;\n            height: 1rem;\n        }\n\n        .swatch-preview {\n            position: absolute;\n            inset: 0;\n            border-radius: inherit;\n            box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15);\n        }\n\n        .swatch-preview.is-transparent {\n            background-color: #fff;\n            background-image:\n                linear-gradient(45deg, #d1d5db 25%, transparent 25%),\n                linear-gradient(-45deg, #d1d5db 25%, transparent 25%),\n                linear-gradient(45deg, transparent 75%, #d1d5db 75%),\n                linear-gradient(-45deg, transparent 75%, #d1d5db 75%);\n            background-size: 8px 8px;\n            background-position: 0 0, 0 4px, 4px -4px, -4px 0;\n        }\n\n        .swatch-picker {\n            position: absolute;\n            inset: 0;\n            width: 100%;\n            height: 100%;\n            margin: 0;\n            padding: 0;\n            border: 0;\n            opacity: 0;\n            cursor: pointer;\n            appearance: none;\n        }\n\n        .swatch-picker:disabled {\n            cursor: not-allowed;\n        }\n\n        .hash {\n            position: absolute;\n            top: 50%;\n            left: 2.125rem;\n            z-index: 1;\n            transform: translateY(-50%);\n            color: var(--pk-color-gray-300);\n            font-family: var(--pk-font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);\n            font-size: var(--pk-font-size-mono, 0.9em);\n            line-height: var(--pk-line-height-mono, 1.5);\n            pointer-events: none;\n            user-select: none;\n        }\n\n        :host([size='xs']) .hash {\n            left: 1.625rem;\n        }\n\n        :host([size='sm']) .hash {\n            left: 2rem;\n        }\n\n        :host([size='lg']) .hash,\n        :host([size='xl']) .hash {\n            left: 2.5rem;\n        }\n\n        :host([fit-cell]) .hash {\n            left: 1.75rem;\n        }\n\n        .hex-input {\n            display: block;\n            width: 100%;\n            /* Former lg — matches pk-input default chrome (~34px). */\n            height: 2.125rem;\n            margin: 0;\n            padding-inline: 3rem 0.75rem;\n            border: var(--pk-input-border);\n            border-radius: var(--pk-input-border-radius);\n            background: var(--pk-input-bg);\n            color: var(--pk-color-gray-700);\n            font-family: var(--pk-font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);\n            font-size: var(--pk-font-size-mono, 0.9em);\n            line-height: var(--pk-line-height-mono, 1.5);\n            outline: none;\n            box-sizing: border-box;\n            transition: border-color 0.12s ease, box-shadow 0.12s ease;\n        }\n\n        :host([size='xs']) .hex-input {\n            height: 1.625rem;\n            padding-inline: 2.25rem 0.625rem;\n        }\n\n        :host([size='sm']) .hex-input {\n            height: 1.875rem;\n            padding-inline: 2.75rem 0.75rem;\n        }\n\n        :host([size='lg']) .hex-input,\n        :host([size='xl']) .hex-input {\n            height: 2.375rem;\n            padding-inline: 3.25rem 0.875rem;\n        }\n\n        :host([fit-cell]) .hex-input {\n            width: 100%;\n            max-width: 100%;\n            height: 100%;\n            padding-inline: 2.25rem 0.5rem;\n            border: 0;\n            border-radius: 0;\n            background: transparent;\n        }\n\n        .hex-input:focus,\n        .hex-input:focus-visible {\n            border-color: var(--pk-color-sky-600);\n            box-shadow: var(--pk-input-focus-shadow);\n        }\n\n        :host([invalid]) .hex-input:focus,\n        :host([invalid]) .hex-input:focus-visible {\n            border-color: var(--pk-color-rose-600);\n            box-shadow: var(--pk-input-invalid-focus-shadow);\n        }\n\n        :host([fit-cell]:not([invalid])) .hex-input:focus,\n        :host([fit-cell]:not([invalid])) .hex-input:focus-visible {\n            box-shadow: inset 0 0 0 1px var(--pk-color-gray-200);\n        }\n\n        :host([fit-cell][invalid]) .hex-input,\n        :host([fit-cell][invalid]) .hex-input:focus,\n        :host([fit-cell][invalid]) .hex-input:focus-visible {\n            box-shadow: inset 0 0 0 1px var(--pk-color-rose-600);\n        }\n\n        .hex-input:disabled {\n            cursor: not-allowed;\n            opacity: 0.5;\n        }\n\n        :host([invalid]) .hex-input {\n            border-color: var(--pk-color-rose-600);\n        }\n\n        :host([disabled]) .swatch {\n            opacity: 0.5;\n        }\n    }\n`;\n","import { html, nothing } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query, state } from '../../decorators.js';\nimport type { PropertyValues } from 'lit';\n\nimport { PkFormAssociatedElement } from '../../base/pk-form-associated-element.js';\nimport { MirrorValidator, RequiredValidator } from '../../validators/index.js';\nimport { pkColorInputStyles } from './pk-color-input.styles.js';\n\n/** Public scale is xs / sm / default / lg (`xl` aliases `lg` for compatibility). */\nexport type PkColorInputSize = 'xs' | 'sm' | 'default' | 'lg' | 'xl';\n\nconst DEFAULT_COLOR = '#000000';\n\nfunction sanitizeHex(value: string): string {\n    return String(value || '')\n        .replace(/^#/, '')\n        .replace(/[^0-9a-fA-F]/g, '')\n        .slice(0, 6)\n        .toLowerCase();\n}\n\nfunction isCompleteHex(value: string): boolean {\n    return value.length === 3 || value.length === 6;\n}\n\nfunction expandShortHex(value: string): string {\n    if (value.length !== 3) {\n        return value;\n    }\n\n    return value.split('').map((char) => `${char}${char}`).join('');\n}\n\nfunction toPickerValue(hex: string): string {\n    if (hex.length === 6) {\n        return `#${hex}`;\n    }\n\n    if (hex.length === 3) {\n        return `#${expandShortHex(hex)}`;\n    }\n\n    return DEFAULT_COLOR;\n}\n\n/**\n * Color input — swatch picker + hex text field (Craft ColorInput parity).\n * Form-associated; submits `#rrggbb` or empty string.\n *\n * @csspart swatch - Swatch container\n * @csspart input - Hex text input\n */\n@customElement('pk-color-input')\nexport class PkColorInput extends PkFormAssociatedElement {\n    static override styles = pkColorInputStyles;\n\n    static override get validators() {\n        return [...super.validators, MirrorValidator(), RequiredValidator()];\n    }\n\n    override assumeInteractionOn = ['blur', 'input'];\n\n    @property({ reflect: true })\n    size: PkColorInputSize = 'default';\n\n    @property({ type: Boolean, reflect: true, attribute: 'fit-cell' })\n    fitCell = false;\n\n    @property({ type: Boolean, reflect: true })\n    readonly = false;\n\n    @property({ type: Boolean, reflect: true })\n    invalid = false;\n\n    @property()\n    value = '';\n\n    @property({ attribute: 'default-value' })\n    defaultValue = '';\n\n    @property({ attribute: 'aria-label' })\n    ariaLabel: string | null = null;\n\n    @query('.hex-input')\n    override input!: HTMLInputElement;\n\n    @state()\n    private hexValue = '';\n\n    override connectedCallback(): void {\n        super.connectedCallback();\n        this.syncHexFromValue();\n    }\n\n    protected override willUpdate(changed: PropertyValues): void {\n        if (changed.has('value')) {\n            this.syncHexFromValue();\n        }\n\n        super.willUpdate(changed);\n    }\n\n    private syncHexFromValue(): void {\n        this.hexValue = sanitizeHex(this.value);\n    }\n\n    protected override get validationTarget(): HTMLElement {\n        return this.input;\n    }\n\n    protected override syncFormValue(): void {\n        const submitted = this.hexValue ? `#${this.hexValue}` : '';\n        this.setFormValue(submitted, submitted);\n    }\n\n    protected override resetToDefaultValue(): void {\n        this.value = this.defaultValue;\n        this.hexValue = sanitizeHex(this.defaultValue);\n    }\n\n    protected override restoreFormState(state: string | File | FormData | null): void {\n        if (typeof state === 'string') {\n            this.value = state;\n            this.hexValue = sanitizeHex(state);\n        }\n    }\n\n    private emitChange(): void {\n        const next = this.hexValue ? `#${this.hexValue}` : '';\n        this.value = next;\n\n        this.dispatchEvent(new CustomEvent('pk-change', {\n            detail: { value: next },\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 handleHexInput(event: Event): void {\n        // Readonly must not mutate the value even if a stray input event slips through.\n        if (this.disabled || this.readonly) {\n            return;\n        }\n\n        const nextHex = sanitizeHex((event.target as HTMLInputElement).value);\n        this.hexValue = nextHex;\n        this.emitChange();\n    }\n\n    private handlePickerChange(event: Event): void {\n        if (this.disabled || this.readonly) {\n            return;\n        }\n\n        const nextHex = sanitizeHex((event.target as HTMLInputElement).value);\n        this.hexValue = nextHex;\n        this.emitChange();\n    }\n\n    override render() {\n        const previewColor = toPickerValue(this.hexValue);\n        const isTransparent = !isCompleteHex(this.hexValue);\n\n        return html`\n            <div class=\"root\">\n                <div part=\"swatch\" class=\"swatch\">\n                    <div\n                        class=${classMap({\n                            'swatch-preview': true,\n                            'is-transparent': isTransparent,\n                        })}\n                        style=${isTransparent ? nothing : `background-color: ${previewColor}`}\n                    ></div>\n                    <input\n                        part=\"picker\"\n                        class=\"swatch-picker\"\n                        type=\"color\"\n                        .value=${previewColor}\n                        ?disabled=${this.disabled || this.readonly}\n                        aria-label=\"Color picker\"\n                        @input=${this.handlePickerChange}\n                    />\n                </div>\n                <span class=\"hash\" aria-hidden=\"true\">#</span>\n                <input\n                    part=\"input\"\n                    class=\"hex-input\"\n                    type=\"text\"\n                    inputmode=\"text\"\n                    autocomplete=\"off\"\n                    maxlength=\"6\"\n                    .value=${this.hexValue}\n                    ?disabled=${this.disabled}\n                    ?readonly=${this.readonly}\n                    ?required=${this.required}\n                    aria-label=${this.ariaLabel ?? nothing}\n                    aria-invalid=${this.invalid ? 'true' : nothing}\n                    @input=${this.handleHexInput}\n                />\n            </div>\n        `;\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-color-input': PkColorInput;\n    }\n}\n"],"mappings":"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"}
+{"version":3,"file":"pk-color-input-CncNce1C.js","names":[],"sources":["../../src/components/color-input/pk-color-input.styles.ts","../../src/components/color-input/pk-color-input.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * Size scale matches pk-input (xs / sm / default / lg). Metrics are shifted so\n * former `lg` (2.125rem / ~34px) is default — aligned with base input chrome.\n * `xl` is kept as a deprecated alias of `lg`.\n */\nexport const pkColorInputStyles = css`\n    @layer pk-component {\n        :host {\n            display: inline-block;\n            position: relative;\n            /* Former lg min-width — default now matches input default chrome. */\n            min-width: 6.75rem;\n            font-family: var(--pk-font-family);\n            vertical-align: middle;\n        }\n\n        :host([size='xs']) {\n            min-width: 5.5rem;\n        }\n\n        :host([size='sm']) {\n            min-width: 6.125rem;\n        }\n\n        :host([size='lg']),\n        :host([size='xl']) {\n            min-width: 7.375rem;\n        }\n\n        :host([fit-cell]) {\n            display: block;\n            width: 100%;\n            min-width: 0;\n            max-width: 100%;\n            height: 100%;\n        }\n\n        :host([fit-cell]) .root {\n            display: block;\n            width: 100%;\n            height: 100%;\n        }\n\n        .root {\n            position: relative;\n            display: inline-block;\n            width: 100%;\n        }\n\n        .swatch {\n            position: absolute;\n            top: 50%;\n            left: 0.5rem;\n            z-index: 2;\n            width: 1.25rem;\n            height: 1.25rem;\n            transform: translateY(-50%);\n            border-radius: var(--pk-radius-sm);\n        }\n\n        :host([size='xs']) .swatch {\n            left: 0.375rem;\n            width: 1rem;\n            height: 1rem;\n        }\n\n        :host([size='sm']) .swatch {\n            left: 0.375rem;\n            width: 1.25rem;\n            height: 1.25rem;\n        }\n\n        :host([size='lg']) .swatch,\n        :host([size='xl']) .swatch {\n            left: 0.5rem;\n            width: 1.5rem;\n            height: 1.5rem;\n        }\n\n        :host([fit-cell]) .swatch {\n            left: 0.5rem;\n            width: 1rem;\n            height: 1rem;\n        }\n\n        .swatch-preview {\n            position: absolute;\n            inset: 0;\n            border-radius: inherit;\n            box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15);\n        }\n\n        .swatch-preview.is-transparent {\n            background-color: #fff;\n            background-image:\n                linear-gradient(45deg, #d1d5db 25%, transparent 25%),\n                linear-gradient(-45deg, #d1d5db 25%, transparent 25%),\n                linear-gradient(45deg, transparent 75%, #d1d5db 75%),\n                linear-gradient(-45deg, transparent 75%, #d1d5db 75%);\n            background-size: 8px 8px;\n            background-position: 0 0, 0 4px, 4px -4px, -4px 0;\n        }\n\n        .swatch-picker {\n            position: absolute;\n            inset: 0;\n            width: 100%;\n            height: 100%;\n            margin: 0;\n            padding: 0;\n            border: 0;\n            opacity: 0;\n            cursor: pointer;\n            appearance: none;\n        }\n\n        .swatch-picker:disabled {\n            cursor: not-allowed;\n        }\n\n        .hash {\n            position: absolute;\n            top: 50%;\n            left: 2.125rem;\n            z-index: 1;\n            transform: translateY(-50%);\n            color: var(--pk-color-gray-300);\n            font-family: var(--pk-font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);\n            font-size: var(--pk-font-size-mono, 0.9em);\n            line-height: var(--pk-line-height-mono, 1.5);\n            pointer-events: none;\n            user-select: none;\n        }\n\n        :host([size='xs']) .hash {\n            left: 1.625rem;\n        }\n\n        :host([size='sm']) .hash {\n            left: 2rem;\n        }\n\n        :host([size='lg']) .hash,\n        :host([size='xl']) .hash {\n            left: 2.5rem;\n        }\n\n        :host([fit-cell]) .hash {\n            left: 1.75rem;\n        }\n\n        .hex-input {\n            display: block;\n            width: 100%;\n            /* Former lg — matches pk-input default chrome (~34px). */\n            height: 2.125rem;\n            margin: 0;\n            padding-inline: 3rem 0.75rem;\n            border: var(--pk-input-border);\n            border-radius: var(--pk-input-border-radius);\n            background: var(--pk-input-bg);\n            color: var(--pk-color-gray-700);\n            font-family: var(--pk-font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);\n            font-size: var(--pk-font-size-mono, 0.9em);\n            line-height: var(--pk-line-height-mono, 1.5);\n            outline: none;\n            box-sizing: border-box;\n            transition: border-color 0.12s ease, box-shadow 0.12s ease;\n        }\n\n        :host([size='xs']) .hex-input {\n            height: 1.625rem;\n            padding-inline: 2.25rem 0.625rem;\n        }\n\n        :host([size='sm']) .hex-input {\n            height: 1.875rem;\n            padding-inline: 2.75rem 0.75rem;\n        }\n\n        :host([size='lg']) .hex-input,\n        :host([size='xl']) .hex-input {\n            height: 2.375rem;\n            padding-inline: 3.25rem 0.875rem;\n        }\n\n        :host([fit-cell]) .hex-input {\n            width: 100%;\n            max-width: 100%;\n            height: 100%;\n            padding-inline: 2.25rem 0.5rem;\n            border: 0;\n            border-radius: 0;\n            background: transparent;\n        }\n\n        .hex-input:focus,\n        .hex-input:focus-visible {\n            border-color: var(--pk-color-sky-600);\n            box-shadow: var(--pk-input-focus-shadow);\n        }\n\n        :host([invalid]) .hex-input:focus,\n        :host([invalid]) .hex-input:focus-visible {\n            border-color: var(--pk-color-rose-600);\n            box-shadow: var(--pk-input-invalid-focus-shadow);\n        }\n\n        :host([fit-cell]:not([invalid])) .hex-input:focus,\n        :host([fit-cell]:not([invalid])) .hex-input:focus-visible {\n            box-shadow: inset 0 0 0 1px var(--pk-color-gray-200);\n        }\n\n        :host([fit-cell][invalid]) .hex-input,\n        :host([fit-cell][invalid]) .hex-input:focus,\n        :host([fit-cell][invalid]) .hex-input:focus-visible {\n            box-shadow: inset 0 0 0 1px var(--pk-color-rose-600);\n        }\n\n        .hex-input:disabled {\n            cursor: not-allowed;\n            opacity: 0.5;\n        }\n\n        :host([invalid]) .hex-input {\n            border-color: var(--pk-color-rose-600);\n        }\n\n        :host([disabled]) .swatch {\n            opacity: 0.5;\n        }\n    }\n`;\n","import { html, nothing } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query, state } from '../../decorators.js';\nimport type { PropertyValues } from 'lit';\n\nimport { PkFormAssociatedElement } from '../../base/pk-form-associated-element.js';\nimport { MirrorValidator, RequiredValidator } from '../../validators/index.js';\nimport { pkColorInputStyles } from './pk-color-input.styles.js';\n\n/** Public scale is xs / sm / default / lg (`xl` aliases `lg` for compatibility). */\nexport type PkColorInputSize = 'xs' | 'sm' | 'default' | 'lg' | 'xl';\n\nconst DEFAULT_COLOR = '#000000';\n\nfunction sanitizeHex(value: string): string {\n    return String(value || '')\n        .replace(/^#/, '')\n        .replace(/[^0-9a-fA-F]/g, '')\n        .slice(0, 6)\n        .toLowerCase();\n}\n\nfunction isCompleteHex(value: string): boolean {\n    return value.length === 3 || value.length === 6;\n}\n\nfunction expandShortHex(value: string): string {\n    if (value.length !== 3) {\n        return value;\n    }\n\n    return value.split('').map((char) => `${char}${char}`).join('');\n}\n\nfunction toPickerValue(hex: string): string {\n    if (hex.length === 6) {\n        return `#${hex}`;\n    }\n\n    if (hex.length === 3) {\n        return `#${expandShortHex(hex)}`;\n    }\n\n    return DEFAULT_COLOR;\n}\n\n/**\n * Color input — swatch picker + hex text field (Craft ColorInput parity).\n * Form-associated; submits `#rrggbb` or empty string.\n *\n * @csspart swatch - Swatch container\n * @csspart input - Hex text input\n */\n@customElement('pk-color-input')\nexport class PkColorInput extends PkFormAssociatedElement {\n    static override styles = pkColorInputStyles;\n\n    static override get validators() {\n        return [...super.validators, MirrorValidator(), RequiredValidator()];\n    }\n\n    override assumeInteractionOn = ['blur', 'input'];\n\n    @property({ reflect: true })\n    size: PkColorInputSize = 'default';\n\n    @property({ type: Boolean, reflect: true, attribute: 'fit-cell' })\n    fitCell = false;\n\n    @property({ type: Boolean, reflect: true })\n    readonly = false;\n\n    @property({ type: Boolean, reflect: true })\n    invalid = false;\n\n    @property()\n    value = '';\n\n    @property({ attribute: 'default-value' })\n    defaultValue = '';\n\n    @property({ attribute: 'aria-label' })\n    ariaLabel: string | null = null;\n\n    @query('.hex-input')\n    override input!: HTMLInputElement;\n\n    @state()\n    private hexValue = '';\n\n    override connectedCallback(): void {\n        super.connectedCallback();\n        this.syncHexFromValue();\n    }\n\n    protected override willUpdate(changed: PropertyValues): void {\n        if (changed.has('value')) {\n            this.syncHexFromValue();\n        }\n\n        super.willUpdate(changed);\n    }\n\n    private syncHexFromValue(): void {\n        this.hexValue = sanitizeHex(this.value);\n    }\n\n    protected override get validationTarget(): HTMLElement {\n        return this.input;\n    }\n\n    protected override syncFormValue(): void {\n        const submitted = this.hexValue ? `#${this.hexValue}` : '';\n        this.setFormValue(submitted, submitted);\n    }\n\n    protected override resetToDefaultValue(): void {\n        this.value = this.defaultValue;\n        this.hexValue = sanitizeHex(this.defaultValue);\n    }\n\n    protected override restoreFormState(state: string | File | FormData | null): void {\n        if (typeof state === 'string') {\n            this.value = state;\n            this.hexValue = sanitizeHex(state);\n        }\n    }\n\n    private emitChange(): void {\n        const next = this.hexValue ? `#${this.hexValue}` : '';\n        this.value = next;\n\n        this.dispatchEvent(new CustomEvent('pk-change', {\n            detail: { value: next },\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 handleHexInput(event: Event): void {\n        // Readonly must not mutate the value even if a stray input event slips through.\n        if (this.disabled || this.readonly) {\n            return;\n        }\n\n        const nextHex = sanitizeHex((event.target as HTMLInputElement).value);\n        this.hexValue = nextHex;\n        this.emitChange();\n    }\n\n    private handlePickerChange(event: Event): void {\n        if (this.disabled || this.readonly) {\n            return;\n        }\n\n        const nextHex = sanitizeHex((event.target as HTMLInputElement).value);\n        this.hexValue = nextHex;\n        this.emitChange();\n    }\n\n    override render() {\n        const previewColor = toPickerValue(this.hexValue);\n        const isTransparent = !isCompleteHex(this.hexValue);\n\n        return html`\n            <div class=\"root\">\n                <div part=\"swatch\" class=\"swatch\">\n                    <div\n                        class=${classMap({\n                            'swatch-preview': true,\n                            'is-transparent': isTransparent,\n                        })}\n                        style=${isTransparent ? nothing : `background-color: ${previewColor}`}\n                    ></div>\n                    <input\n                        part=\"picker\"\n                        class=\"swatch-picker\"\n                        type=\"color\"\n                        .value=${previewColor}\n                        ?disabled=${this.disabled || this.readonly}\n                        aria-label=\"Color picker\"\n                        @input=${this.handlePickerChange}\n                    />\n                </div>\n                <span class=\"hash\" aria-hidden=\"true\">#</span>\n                <input\n                    part=\"input\"\n                    class=\"hex-input\"\n                    type=\"text\"\n                    inputmode=\"text\"\n                    autocomplete=\"off\"\n                    maxlength=\"6\"\n                    .value=${this.hexValue}\n                    ?disabled=${this.disabled}\n                    ?readonly=${this.readonly}\n                    ?required=${this.required}\n                    aria-label=${this.ariaLabel ?? nothing}\n                    aria-invalid=${this.invalid ? 'true' : nothing}\n                    @input=${this.handleHexInput}\n                />\n            </div>\n        `;\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-color-input': PkColorInput;\n    }\n}\n"],"mappings":"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"}

package/dist/chunks/{pk-combobox-BLft8AXy.js → pk-combobox-Dn7UJ_CV.js}

@@ -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-9M2NzOE2.js";
+import { t as PkFormAssociatedElement } from "./pk-form-associated-element-CCQALRGB.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";
@@ -12,9 +12,10 @@ import { t as PkClearEvent } from "./pk-clear--mPWZP7H.js";
 import { i as PkShowEvent, n as PkAfterShowEvent, r as PkHideEvent, t as PkAfterHideEvent } from "./overlay-lifecycle-D0pkTQyI.js";
 import "./pk-popup-B9AgBC2V.js";
 import { i as waitForPopupReposition, r as syncPopupPlacementAnimation } from "./popup-placement-animation-WlEXnS85.js";
-import { a as isListboxTypeToSelectKey, i as handleListboxKeyDown, n as LISTBOX_NAVIGATION_KEYS, t as syncListboxSeparators } from "./sync-listbox-separators-B1-V0oJi.js";
-import { n as isPointerInsideOverlay, t as isEventInsideOverlay } from "./popup-pointer-DMnuZDQl.js";
-import { t as popupContentAnimationStyles } from "./popup-content-animation.styles-Dc6d9quJ.js";
+import { a as isListboxTypeToSelectKey, i as handleListboxKeyDown, n as LISTBOX_NAVIGATION_KEYS } from "./sync-listbox-separators-B1-V0oJi.js";
+import { i as waitForPopupContentExitAnimation, n as AsyncOptionFetcher, r as syncFilteredOptions, t as matchesOptionFilter } from "./option-filter-BQqr8Z21.js";
+import { n as isPointerInsideOverlay, t as isEventInsideOverlay } from "./popup-pointer-CuLjk1th.js";
+import { t as popupContentAnimationStyles } from "./popup-content-animation.styles-BnNiguJo.js";
 import { css, html, nothing } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { unsafeSVG } from "lit/directives/unsafe-svg.js";
@@ -197,7 +198,8 @@ var pkComboboxStyles = [popupContentAnimationStyles, css`
             outline: none;
         }
 
-        /* Trailing control absorbs the control's inline-end padding into its hit box. */
+        /* Trailing control absorbs the control's inline-end padding into its hit box,
+           with the same 4px glyph inset as pk-copy-button[slot=end]. */
         .control > .expand-button,
         .control > .clear-button:last-child {
             width: calc(
@@ -205,7 +207,7 @@ var pkComboboxStyles = [popupContentAnimationStyles, css`
                     var(--pk-combobox-padding-inline)
             );
             margin-inline-start: calc(-0.5 * var(--pk-combobox-control-gap));
-            margin-inline-end: calc(-1 * var(--pk-combobox-padding-inline));
+            margin-inline-end: calc(-1 * var(--pk-combobox-padding-inline) + 4px);
         }
 
         .icon-button:disabled,
@@ -805,8 +807,8 @@ var PkCombobox = class PkCombobox extends PkFormAssociatedElement {
 		this.panelAnimated = false;
 		this.dismissRegistered = false;
 		this.panelEventTarget = null;
-		this.asyncFetchRequestId = 0;
 		this.selectedOptionMeta = null;
+		this.asyncFetcher = null;
 		this.asyncLoading = false;
 		this.asyncError = null;
 		this.handleOptionsMutation = (options = {}) => {
@@ -992,8 +994,7 @@ var PkCombobox = class PkCombobox extends PkFormAssociatedElement {
 		this.optionsObserver?.disconnect();
 		this.liveRegion?.destroy();
 		this.liveRegion = void 0;
-		window.clearTimeout(this.asyncFetchTimer);
-		this.fetchAbortController?.abort();
+		this.asyncFetcher?.cancel();
 		this.closePanel("api");
 		super.disconnectedCallback();
 	}
@@ -1069,15 +1070,8 @@ var PkCombobox = class PkCombobox extends PkFormAssociatedElement {
 		const group = option.closest("pk-option-group");
 		return Boolean(group?.hidden);
 	}
-	defaultFilter(option, query) {
-		const label = option.getLabel().toLowerCase();
-		const value = option.value.toLowerCase();
-		const searchText = (option.getSearchText?.() ?? label).toLowerCase();
-		return label.includes(query) || value.includes(query) || searchText.includes(query);
-	}
 	matchesFilter(option, query) {
-		if (this.filter) return this.filter(option, query);
-		return this.defaultFilter(option, query);
+		return matchesOptionFilter(option, query, this.filter);
 	}
 	getFilterQuery() {
 		if (!this.open) return "";
@@ -1148,37 +1142,31 @@ var PkCombobox = class PkCombobox extends PkFormAssociatedElement {
 		};
 	}
 	scheduleAsyncFetch(query) {
-		window.clearTimeout(this.asyncFetchTimer);
-		this.asyncFetchTimer = window.setTimeout(() => {
-			this.runAsyncFetch(query);
-		}, 200);
-	}
-	async runAsyncFetch(query) {
-		if (!this.fetchOptions) return;
-		const requestId = ++this.asyncFetchRequestId;
-		this.fetchAbortController?.abort();
-		this.fetchAbortController = new AbortController();
-		if (!query) {
-			this.asyncLoading = false;
-			this.asyncError = null;
-			this.renderAsyncOptionNodes(this.value && this.selectedOptionMeta ? [this.selectedOptionMeta] : []);
-			return;
-		}
-		this.asyncLoading = true;
-		this.asyncError = null;
-		try {
-			const results = await this.fetchOptions(query, this.fetchAbortController.signal);
-			if (requestId !== this.asyncFetchRequestId) return;
-			this.renderAsyncOptionNodes(results);
-		} catch (error) {
-			if (this.fetchAbortController?.signal.aborted || requestId !== this.asyncFetchRequestId) return;
-			if (error instanceof DOMException && error.name === "AbortError") return;
-			console.error("Failed to load combobox options:", error);
-			this.asyncError = "Failed to load options. Please try again.";
-			this.renderAsyncOptionNodes([]);
-		} finally {
-			if (requestId === this.asyncFetchRequestId) this.asyncLoading = false;
-		}
+		this.ensureAsyncFetcher().schedule(query);
+	}
+	ensureAsyncFetcher() {
+		if (!this.asyncFetcher) this.asyncFetcher = new AsyncOptionFetcher(() => this.fetchOptions, {
+			errorLabel: "combobox options",
+			onLoading: () => {
+				this.asyncLoading = true;
+				this.asyncError = null;
+			},
+			onResults: (results) => {
+				this.renderAsyncOptionNodes(results);
+			},
+			onError: (message) => {
+				this.asyncError = message;
+			},
+			onSettled: () => {
+				this.asyncLoading = false;
+			},
+			onEmptyQuery: () => {
+				this.asyncLoading = false;
+				this.asyncError = null;
+				this.renderAsyncOptionNodes(this.value && this.selectedOptionMeta ? [this.selectedOptionMeta] : []);
+			}
+		});
+		return this.asyncFetcher;
 	}
 	getAsyncStatusMessage() {
 		if (!this.usesAsyncSearch || !this.open) return null;
@@ -1189,11 +1177,6 @@ var PkCombobox = class PkCombobox extends PkFormAssociatedElement {
 		if (this.getEnabledVisibleOptions().length === 0 && !this.shouldShowCreateOption()) return `No matches for "${query}".`;
 		return null;
 	}
-	shouldShowAsyncEmpty() {
-		if (!this.usesAsyncSearch || !this.open) return false;
-		if (!this.inputValue.trim() || this.asyncLoading || this.asyncError) return false;
-		return this.getEnabledVisibleOptions().length === 0 && !this.shouldShowCreateOption();
-	}
 	isSelected(value) {
 		if (this.multiple) return this.values.includes(value);
 		return this.value === value;
@@ -1230,18 +1213,14 @@ var PkCombobox = class PkCombobox extends PkFormAssociatedElement {
 	applySelection() {
 		const visible = this.getVisibleOptions();
 		const filterQuery = this.open ? this.getFilterQuery() : "";
-		for (const option of this.options) {
-			option.selected = this.isSelected(option.value);
-			option.hidden = !visible.includes(option);
-			option.optionId = `${this.listboxId}-option-${option.value}`;
-			option.matchQuery = filterQuery;
-		}
-		for (const group of this.querySelectorAll("pk-option-group")) {
-			const groupOptions = [...group.querySelectorAll("pk-option")];
-			const filterEmpty = groupOptions.length > 0 && groupOptions.every((option) => option.hidden);
-			group.toggleAttribute("data-pk-filter-empty", filterEmpty);
-		}
-		syncListboxSeparators(this);
+		syncFilteredOptions({
+			host: this,
+			options: this.options,
+			visible,
+			listboxId: this.listboxId,
+			filterQuery,
+			isSelected: (value) => this.isSelected(value)
+		});
 		this.syncValueInput();
 		if (this.open) {
 			this.syncHighlight();
@@ -1411,7 +1390,7 @@ var PkCombobox = class PkCombobox extends PkFormAssociatedElement {
 		this.unbindPanelEvents();
 		this.closing = true;
 		this.panelAnimated = false;
-		await this.waitForExitAnimation();
+		await waitForPopupContentExitAnimation(this.panelElement);
 		this.open = false;
 		this.closing = false;
 		this.panelAnimated = false;
@@ -1425,8 +1404,7 @@ var PkCombobox = class PkCombobox extends PkFormAssociatedElement {
 		this.unregisterDismissHandlers();
 		this.applySelection();
 		if (this.usesAsyncSearch) {
-			window.clearTimeout(this.asyncFetchTimer);
-			this.fetchAbortController?.abort();
+			this.asyncFetcher?.cancel();
 			this.asyncLoading = false;
 			this.asyncError = null;
 			this.renderAsyncOptionNodes(this.selectedOptionMeta ? [this.selectedOptionMeta] : []);
@@ -1448,27 +1426,6 @@ var PkCombobox = class PkCombobox extends PkFormAssociatedElement {
 			composed: true
 		}));
 	}
-	waitForExitAnimation() {
-		const panel = this.panelElement;
-		if (!panel) return Promise.resolve();
-		return new Promise((resolve) => {
-			let settled = false;
-			const finish = () => {
-				if (settled) return;
-				settled = true;
-				panel.removeEventListener("animationend", onAnimationEnd);
-				window.clearTimeout(fallback);
-				panel.classList.remove("closing");
-				resolve();
-			};
-			const onAnimationEnd = (event) => {
-				if (event.target === panel && event.animationName.startsWith("pk-popup-content-out")) finish();
-			};
-			panel.classList.add("closing");
-			panel.addEventListener("animationend", onAnimationEnd);
-			const fallback = window.setTimeout(finish, 150);
-		});
-	}
 	shouldReturnFocusToInput(source) {
 		return source !== "light-dismiss" && source !== "pointer-dismiss";
 	}
@@ -1837,7 +1794,7 @@ var PkCombobox = class PkCombobox extends PkFormAssociatedElement {
 	render() {
 		const visibleOptions = this.getEnabledVisibleOptions();
 		const showCreate = this.shouldShowCreateOption();
-		const showEmpty = this.open && (this.usesAsyncSearch ? this.shouldShowAsyncEmpty() : visibleOptions.length === 0 && !showCreate);
+		const showEmpty = this.open && !this.usesAsyncSearch && visibleOptions.length === 0 && !showCreate;
 		const asyncStatus = this.getAsyncStatusMessage();
 		const createQuery = this.inputValue.trim();
 		return html`
@@ -2012,4 +1969,4 @@ PkCombobox = __decorate([customElement("pk-combobox")], PkCombobox);
 //#endregion
 export { PkCreateEvent as n, PkCombobox as t };
 
-//# sourceMappingURL=pk-combobox-BLft8AXy.js.map
+//# sourceMappingURL=pk-combobox-Dn7UJ_CV.js.map