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

@verbb/plugin-kit-web 2.0.15 → 2.0.17

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

Files changed (386) hide show

package/dist/chunks/{pk-input-group-input-mllffsjQ.js → pk-input-group-input-oNnqMBGU.js} RENAMED Viewed

@@ -132,4 +132,4 @@ PkInputGroupInput = __decorate([customElement("pk-input-group-input")], PkInputG
 //#endregion
 export { PkInputGroupInput as t };
-//# sourceMappingURL=pk-input-group-input-mllffsjQ.js.map
+//# sourceMappingURL=pk-input-group-input-oNnqMBGU.js.map

package/dist/chunks/{pk-input-group-input-mllffsjQ.js.map → pk-input-group-input-oNnqMBGU.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pk-input-group-input-~~mllffsjQ~~.js","names":[],"sources":["../../src/components/input-group/pk-input-group-input.styles.ts","../../src/components/input-group/pk-input-group-input.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkInputGroupInputStyles = css`\n @layer pk-component {\n :host {\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n align-self: stretch;\n }\n\n .input {\n display: block;\n width: 100%;\n min-width: 0;\n margin: 0;\n padding: 6px 8px;\n border: 0;\n border-radius: 0;\n background: transparent;\n color: var(--pk-color-gray-700);\n font: inherit;\n line-height: 1.4;\n appearance: none;\n box-sizing: border-box;\n box-shadow: none;\n outline: none;\n }\n\n .input::placeholder {\n color: var(--pk-input-placeholder-color, var(--pk-color-gray-400));\n }\n\n .input:disabled {\n cursor: not-allowed;\n }\n\n :host([size='xs']) .input {\n padding: 4px 6px;\n font-size: 11px;\n }\n\n :host([size='sm']) .input {\n padding: 4px 8px;\n font-size: 12px;\n }\n\n :host([size='lg']) .input {\n padding: 8px 12px;\n font-size: var(--pk-font-size-base);\n }\n\n :host([size='xl']) .input {\n padding: 10px 16px;\n font-size: 16px;\n }\n }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property, query } from '../../decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { pkInputGroupInputStyles } from './pk-input-group-input.styles.js';\n\nexport type PkInputGroupInputSize = 'xs' \| 'sm' \| 'default' \| 'lg' \| 'xl';\n\n/*\n Borderless input for use inside `pk-input-group`.\n \n @csspart input - Native input element\n */\n@customElement('pk-input-group-input')\nexport class PkInputGroupInput extends PkElement {\n static override styles = pkInputGroupInputStyles;\n\n @query('.input')\n inputElement!: HTMLInputElement;\n\n @property({ reflect: true })\n type = 'text';\n\n @property({ reflect: true })\n size: PkInputGroupInputSize = 'default';\n\n @property()\n placeholder = '';\n\n @property({ attribute: 'value', reflect: true })\n value = '';\n\n @property({ type: Boolean, reflect: true })\n disabled = 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 autocomplete?: string;\n\n focus(options?: FocusOptions): void {\n this.inputElement?.focus(options);\n }\n\n override render() {\n return html`\n <input\n part=\"input\"\n class=\"input\"\n data-slot=\"input-group-control\"\n type=${this.type}\n .value=${this.value}\n placeholder=${this.placeholder}\n autocomplete=${ifDefined(this.autocomplete)}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n aria-invalid=${this.invalid ? 'true' : nothing}\n @input=${this.handleInput}\n />\n `;\n }\n\n private handleInput(event: Event): void {\n const target = event.target as HTMLInputElement;\n this.value = target.value;\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-input-group-input': PkInputGroupInput;\n }\n}\n"],"mappings":";;;;AAEA,IAAa,0BAA0B,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACanC,IAAA,oBAAA,MAAM,0BAA0B,UAAU;;;cAOtC;cAGuB;qBAGhB;eAGN;kBAGG;kBAGA;iBAGD;;;gBAxBe;;CA6BzB,MAAM,SAA8B;AAChC,OAAK,cAAc,MAAM,QAAQ;;CAGrC,SAAkB;AACd,SAAO,IAAI;;;;;uBAKI,KAAK,KAAK;yBACR,KAAK,MAAM;8BACN,KAAK,YAAY;+BAChB,UAAU,KAAK,aAAa,CAAC;4BAChC,KAAK,SAAS;4BACd,KAAK,SAAS;+BACX,KAAK,UAAU,SAAS,QAAQ;yBACtC,KAAK,YAAY;;;;CAKtC,YAAoB,OAAoB;EACpC,MAAM,SAAS,MAAM;AACrB,OAAK,QAAQ,OAAO;AACpB,OAAK,cAAc,IAAI,MAAM,SAAS;GAAE,SAAS;GAAM,UAAU;GAAM,CAAC,CAAC;AACzE,OAAK,cAAc,IAAI,MAAM,UAAU;GAAE,SAAS;GAAM,UAAU;GAAM,CAAC,CAAC;;;YArD7E,MAAM,SAAS,CAAA,EAAA,kBAAA,WAAA,gBAAA,KAAA,EAAA;YAGf,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,kBAAA,WAAA,QAAA,KAAA,EAAA;YAG3B,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,kBAAA,WAAA,QAAA,KAAA,EAAA;YAG3B,UAAU,CAAA,EAAA,kBAAA,WAAA,eAAA,KAAA,EAAA;YAGV,SAAS;CAAE,WAAW;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,kBAAA,WAAA,SAAA,KAAA,EAAA;YAG/C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,kBAAA,WAAA,YAAA,KAAA,EAAA;YAG1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,kBAAA,WAAA,YAAA,KAAA,EAAA;YAG1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,kBAAA,WAAA,WAAA,KAAA,EAAA;YAG1C,UAAU,CAAA,EAAA,kBAAA,WAAA,gBAAA,KAAA,EAAA;gCA5Bd,cAAc,uBAAuB,CAAA,EAAA,kBAAA"}
1	+ {"version":3,"file":"pk-input-group-input-oNnqMBGU.js","names":[],"sources":["../../src/components/input-group/pk-input-group-input.styles.ts","../../src/components/input-group/pk-input-group-input.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkInputGroupInputStyles = css`\n @layer pk-component {\n :host {\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n align-self: stretch;\n }\n\n .input {\n display: block;\n width: 100%;\n min-width: 0;\n margin: 0;\n padding: 6px 8px;\n border: 0;\n border-radius: 0;\n background: transparent;\n color: var(--pk-color-gray-700);\n font: inherit;\n line-height: 1.4;\n appearance: none;\n box-sizing: border-box;\n box-shadow: none;\n outline: none;\n }\n\n .input::placeholder {\n color: var(--pk-input-placeholder-color, var(--pk-color-gray-400));\n }\n\n .input:disabled {\n cursor: not-allowed;\n }\n\n :host([size='xs']) .input {\n padding: 4px 6px;\n font-size: 11px;\n }\n\n :host([size='sm']) .input {\n padding: 4px 8px;\n font-size: 12px;\n }\n\n :host([size='lg']) .input {\n padding: 8px 12px;\n font-size: var(--pk-font-size-base);\n }\n\n :host([size='xl']) .input {\n padding: 10px 16px;\n font-size: 16px;\n }\n }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property, query } from '../../decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { pkInputGroupInputStyles } from './pk-input-group-input.styles.js';\n\nexport type PkInputGroupInputSize = 'xs' \| 'sm' \| 'default' \| 'lg' \| 'xl';\n\n/*\n Borderless input for use inside `pk-input-group`.\n \n @csspart input - Native input element\n */\n@customElement('pk-input-group-input')\nexport class PkInputGroupInput extends PkElement {\n static override styles = pkInputGroupInputStyles;\n\n @query('.input')\n inputElement!: HTMLInputElement;\n\n @property({ reflect: true })\n type = 'text';\n\n @property({ reflect: true })\n size: PkInputGroupInputSize = 'default';\n\n @property()\n placeholder = '';\n\n @property({ attribute: 'value', reflect: true })\n value = '';\n\n @property({ type: Boolean, reflect: true })\n disabled = 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 autocomplete?: string;\n\n focus(options?: FocusOptions): void {\n this.inputElement?.focus(options);\n }\n\n override render() {\n return html`\n <input\n part=\"input\"\n class=\"input\"\n data-slot=\"input-group-control\"\n type=${this.type}\n .value=${this.value}\n placeholder=${this.placeholder}\n autocomplete=${ifDefined(this.autocomplete)}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n aria-invalid=${this.invalid ? 'true' : nothing}\n @input=${this.handleInput}\n />\n `;\n }\n\n private handleInput(event: Event): void {\n const target = event.target as HTMLInputElement;\n this.value = target.value;\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-input-group-input': PkInputGroupInput;\n }\n}\n"],"mappings":";;;;AAEA,IAAa,0BAA0B,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACanC,IAAA,oBAAA,MAAM,0BAA0B,UAAU;;;cAOtC;cAGuB;qBAGhB;eAGN;kBAGG;kBAGA;iBAGD;;;gBAxBe;;CA6BzB,MAAM,SAA8B;AAChC,OAAK,cAAc,MAAM,QAAQ;;CAGrC,SAAkB;AACd,SAAO,IAAI;;;;;uBAKI,KAAK,KAAK;yBACR,KAAK,MAAM;8BACN,KAAK,YAAY;+BAChB,UAAU,KAAK,aAAa,CAAC;4BAChC,KAAK,SAAS;4BACd,KAAK,SAAS;+BACX,KAAK,UAAU,SAAS,QAAQ;yBACtC,KAAK,YAAY;;;;CAKtC,YAAoB,OAAoB;EACpC,MAAM,SAAS,MAAM;AACrB,OAAK,QAAQ,OAAO;AACpB,OAAK,cAAc,IAAI,MAAM,SAAS;GAAE,SAAS;GAAM,UAAU;GAAM,CAAC,CAAC;AACzE,OAAK,cAAc,IAAI,MAAM,UAAU;GAAE,SAAS;GAAM,UAAU;GAAM,CAAC,CAAC;;;YArD7E,MAAM,SAAS,CAAA,EAAA,kBAAA,WAAA,gBAAA,KAAA,EAAA;YAGf,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,kBAAA,WAAA,QAAA,KAAA,EAAA;YAG3B,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,kBAAA,WAAA,QAAA,KAAA,EAAA;YAG3B,UAAU,CAAA,EAAA,kBAAA,WAAA,eAAA,KAAA,EAAA;YAGV,SAAS;CAAE,WAAW;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,kBAAA,WAAA,SAAA,KAAA,EAAA;YAG/C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,kBAAA,WAAA,YAAA,KAAA,EAAA;YAG1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,kBAAA,WAAA,YAAA,KAAA,EAAA;YAG1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,kBAAA,WAAA,WAAA,KAAA,EAAA;YAG1C,UAAU,CAAA,EAAA,kBAAA,WAAA,gBAAA,KAAA,EAAA;gCA5Bd,cAAc,uBAAuB,CAAA,EAAA,kBAAA"}

package/dist/chunks/{pk-input-group-text-DvaPJvh2.js → pk-input-group-text-HUxlXROB.js} RENAMED Viewed

@@ -36,4 +36,4 @@ PkInputGroupText = __decorate([customElement("pk-input-group-text")], PkInputGro
 //#endregion
 export { PkInputGroupText as t };
-//# sourceMappingURL=pk-input-group-text-DvaPJvh2.js.map
+//# sourceMappingURL=pk-input-group-text-HUxlXROB.js.map

package/dist/chunks/{pk-input-group-text-DvaPJvh2.js.map → pk-input-group-text-HUxlXROB.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pk-input-group-text-~~DvaPJvh2~~.js","names":[],"sources":["../../src/components/input-group/pk-input-group-text.styles.ts","../../src/components/input-group/pk-input-group-text.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkInputGroupTextStyles = css`\n @layer pk-component {\n :host {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n font-size: var(--pk-font-size-sm);\n color: var(--pk-color-gray-500);\n }\n\n .text ::slotted(svg) {\n width: 0.75rem;\n height: 0.75rem;\n pointer-events: none;\n }\n }\n`;\n","import { html } from 'lit';\nimport { customElement } from '../../decorators.js';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { pkInputGroupTextStyles } from './pk-input-group-text.styles.js';\n\n/*\n Muted label text inside an input-group addon.\n \n @slot - Text content\n \n @csspart base - Text container\n */\n@customElement('pk-input-group-text')\nexport class PkInputGroupText extends PkElement {\n static override styles = pkInputGroupTextStyles;\n\n override render() {\n return html`\n <span part=\"base\" class=\"text\">\n <slot></slot>\n </span>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-input-group-text': PkInputGroupText;\n }\n}\n"],"mappings":";;;AAEA,IAAa,yBAAyB,GAAG;;;;;;;;;;;;;;;;;;;ACYlC,IAAA,mBAAA,MAAM,yBAAyB,UAAU;;gBACnB;;CAEzB,SAAkB;AACd,SAAO,IAAI;;;;;;;+BALlB,cAAc,sBAAsB,CAAA,EAAA,iBAAA"}
1	+ {"version":3,"file":"pk-input-group-text-HUxlXROB.js","names":[],"sources":["../../src/components/input-group/pk-input-group-text.styles.ts","../../src/components/input-group/pk-input-group-text.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkInputGroupTextStyles = css`\n @layer pk-component {\n :host {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n font-size: var(--pk-font-size-sm);\n color: var(--pk-color-gray-500);\n }\n\n .text ::slotted(svg) {\n width: 0.75rem;\n height: 0.75rem;\n pointer-events: none;\n }\n }\n`;\n","import { html } from 'lit';\nimport { customElement } from '../../decorators.js';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { pkInputGroupTextStyles } from './pk-input-group-text.styles.js';\n\n/*\n Muted label text inside an input-group addon.\n \n @slot - Text content\n \n @csspart base - Text container\n */\n@customElement('pk-input-group-text')\nexport class PkInputGroupText extends PkElement {\n static override styles = pkInputGroupTextStyles;\n\n override render() {\n return html`\n <span part=\"base\" class=\"text\">\n <slot></slot>\n </span>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-input-group-text': PkInputGroupText;\n }\n}\n"],"mappings":";;;AAEA,IAAa,yBAAyB,GAAG;;;;;;;;;;;;;;;;;;;ACYlC,IAAA,mBAAA,MAAM,yBAAyB,UAAU;;gBACnB;;CAEzB,SAAkB;AACd,SAAO,IAAI;;;;;;;+BALlB,cAAc,sBAAsB,CAAA,EAAA,iBAAA"}

package/dist/chunks/{pk-input-group-textarea-CqYv8tUQ.js → pk-input-group-textarea-Cl2FNuw-.js} RENAMED Viewed

@@ -109,4 +109,4 @@ PkInputGroupTextarea = __decorate([customElement("pk-input-group-textarea")], Pk
 //#endregion
 export { PkInputGroupTextarea as t };
-//# sourceMappingURL=pk-input-group-textarea-CqYv8tUQ.js.map
+//# sourceMappingURL=pk-input-group-textarea-Cl2FNuw-.js.map

package/dist/chunks/{pk-input-group-textarea-CqYv8tUQ.js.map → pk-input-group-textarea-Cl2FNuw-.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pk-input-group-textarea-~~CqYv8tUQ.~~js","names":[],"sources":["../../src/components/input-group/pk-input-group-textarea.styles.ts","../../src/components/input-group/pk-input-group-textarea.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkInputGroupTextareaStyles = css`\n @layer pk-component {\n :host {\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n align-self: stretch;\n }\n\n .textarea {\n display: block;\n width: 100%;\n min-width: 0;\n min-height: 5rem;\n margin: 0;\n padding: 7px 10px;\n border: 0;\n border-radius: 0;\n background: transparent;\n color: var(--pk-color-gray-700);\n font: inherit;\n line-height: 1.4;\n appearance: none;\n box-sizing: border-box;\n box-shadow: none;\n outline: none;\n resize: none;\n }\n\n .textarea::placeholder {\n color: var(--pk-color-gray-400);\n }\n\n .textarea:disabled {\n cursor: not-allowed;\n }\n }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property, query } from '../../decorators.js';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { pkInputGroupTextareaStyles } from './pk-input-group-textarea.styles.js';\n\n/*\n Borderless textarea for use inside `pk-input-group`.\n \n @csspart textarea - Native textarea element\n */\n@customElement('pk-input-group-textarea')\nexport class PkInputGroupTextarea extends PkElement {\n static override styles = pkInputGroupTextareaStyles;\n\n @query('.textarea')\n textareaElement!: HTMLTextAreaElement;\n\n @property()\n placeholder = '';\n\n @property({ attribute: 'value', reflect: true })\n value = '';\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n @property({ type: Boolean, reflect: true })\n readonly = false;\n\n @property({ type: Boolean, reflect: true })\n invalid = false;\n\n @property({ type: Number })\n rows = 3;\n\n focus(options?: FocusOptions): void {\n this.textareaElement?.focus(options);\n }\n\n override render() {\n return html`\n <textarea\n part=\"textarea\"\n class=\"textarea\"\n data-slot=\"input-group-control\"\n rows=${this.rows}\n .value=${this.value}\n placeholder=${this.placeholder}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n aria-invalid=${this.invalid ? 'true' : nothing}\n @input=${this.handleInput}\n ></textarea>\n `;\n }\n\n private handleInput(event: Event): void {\n const target = event.target as HTMLTextAreaElement;\n this.value = target.value;\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-input-group-textarea': PkInputGroupTextarea;\n }\n}\n"],"mappings":";;;AAEA,IAAa,6BAA6B,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACUtC,IAAA,uBAAA,MAAM,6BAA6B,UAAU;;;qBAOlC;eAGN;kBAGG;kBAGA;iBAGD;cAGH;;;gBArBkB;;CAuBzB,MAAM,SAA8B;AAChC,OAAK,iBAAiB,MAAM,QAAQ;;CAGxC,SAAkB;AACd,SAAO,IAAI;;;;;uBAKI,KAAK,KAAK;yBACR,KAAK,MAAM;8BACN,KAAK,YAAY;4BACnB,KAAK,SAAS;4BACd,KAAK,SAAS;+BACX,KAAK,UAAU,SAAS,QAAQ;yBACtC,KAAK,YAAY;;;;CAKtC,YAAoB,OAAoB;EACpC,MAAM,SAAS,MAAM;AACrB,OAAK,QAAQ,OAAO;AACpB,OAAK,cAAc,IAAI,MAAM,SAAS;GAAE,SAAS;GAAM,UAAU;GAAM,CAAC,CAAC;AACzE,OAAK,cAAc,IAAI,MAAM,UAAU;GAAE,SAAS;GAAM,UAAU;GAAM,CAAC,CAAC;;;YA9C7E,MAAM,YAAY,CAAA,EAAA,qBAAA,WAAA,mBAAA,KAAA,EAAA;YAGlB,UAAU,CAAA,EAAA,qBAAA,WAAA,eAAA,KAAA,EAAA;YAGV,SAAS;CAAE,WAAW;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,qBAAA,WAAA,SAAA,KAAA,EAAA;YAG/C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,qBAAA,WAAA,YAAA,KAAA,EAAA;YAG1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,qBAAA,WAAA,YAAA,KAAA,EAAA;YAG1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,qBAAA,WAAA,WAAA,KAAA,EAAA;YAG1C,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,qBAAA,WAAA,QAAA,KAAA,EAAA;mCAtB9B,cAAc,0BAA0B,CAAA,EAAA,qBAAA"}
1	+ {"version":3,"file":"pk-input-group-textarea-Cl2FNuw-.js","names":[],"sources":["../../src/components/input-group/pk-input-group-textarea.styles.ts","../../src/components/input-group/pk-input-group-textarea.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkInputGroupTextareaStyles = css`\n @layer pk-component {\n :host {\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n align-self: stretch;\n }\n\n .textarea {\n display: block;\n width: 100%;\n min-width: 0;\n min-height: 5rem;\n margin: 0;\n padding: 7px 10px;\n border: 0;\n border-radius: 0;\n background: transparent;\n color: var(--pk-color-gray-700);\n font: inherit;\n line-height: 1.4;\n appearance: none;\n box-sizing: border-box;\n box-shadow: none;\n outline: none;\n resize: none;\n }\n\n .textarea::placeholder {\n color: var(--pk-color-gray-400);\n }\n\n .textarea:disabled {\n cursor: not-allowed;\n }\n }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property, query } from '../../decorators.js';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { pkInputGroupTextareaStyles } from './pk-input-group-textarea.styles.js';\n\n/*\n Borderless textarea for use inside `pk-input-group`.\n \n @csspart textarea - Native textarea element\n */\n@customElement('pk-input-group-textarea')\nexport class PkInputGroupTextarea extends PkElement {\n static override styles = pkInputGroupTextareaStyles;\n\n @query('.textarea')\n textareaElement!: HTMLTextAreaElement;\n\n @property()\n placeholder = '';\n\n @property({ attribute: 'value', reflect: true })\n value = '';\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n @property({ type: Boolean, reflect: true })\n readonly = false;\n\n @property({ type: Boolean, reflect: true })\n invalid = false;\n\n @property({ type: Number })\n rows = 3;\n\n focus(options?: FocusOptions): void {\n this.textareaElement?.focus(options);\n }\n\n override render() {\n return html`\n <textarea\n part=\"textarea\"\n class=\"textarea\"\n data-slot=\"input-group-control\"\n rows=${this.rows}\n .value=${this.value}\n placeholder=${this.placeholder}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n aria-invalid=${this.invalid ? 'true' : nothing}\n @input=${this.handleInput}\n ></textarea>\n `;\n }\n\n private handleInput(event: Event): void {\n const target = event.target as HTMLTextAreaElement;\n this.value = target.value;\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-input-group-textarea': PkInputGroupTextarea;\n }\n}\n"],"mappings":";;;AAEA,IAAa,6BAA6B,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACUtC,IAAA,uBAAA,MAAM,6BAA6B,UAAU;;;qBAOlC;eAGN;kBAGG;kBAGA;iBAGD;cAGH;;;gBArBkB;;CAuBzB,MAAM,SAA8B;AAChC,OAAK,iBAAiB,MAAM,QAAQ;;CAGxC,SAAkB;AACd,SAAO,IAAI;;;;;uBAKI,KAAK,KAAK;yBACR,KAAK,MAAM;8BACN,KAAK,YAAY;4BACnB,KAAK,SAAS;4BACd,KAAK,SAAS;+BACX,KAAK,UAAU,SAAS,QAAQ;yBACtC,KAAK,YAAY;;;;CAKtC,YAAoB,OAAoB;EACpC,MAAM,SAAS,MAAM;AACrB,OAAK,QAAQ,OAAO;AACpB,OAAK,cAAc,IAAI,MAAM,SAAS;GAAE,SAAS;GAAM,UAAU;GAAM,CAAC,CAAC;AACzE,OAAK,cAAc,IAAI,MAAM,UAAU;GAAE,SAAS;GAAM,UAAU;GAAM,CAAC,CAAC;;;YA9C7E,MAAM,YAAY,CAAA,EAAA,qBAAA,WAAA,mBAAA,KAAA,EAAA;YAGlB,UAAU,CAAA,EAAA,qBAAA,WAAA,eAAA,KAAA,EAAA;YAGV,SAAS;CAAE,WAAW;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,qBAAA,WAAA,SAAA,KAAA,EAAA;YAG/C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,qBAAA,WAAA,YAAA,KAAA,EAAA;YAG1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,qBAAA,WAAA,YAAA,KAAA,EAAA;YAG1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,qBAAA,WAAA,WAAA,KAAA,EAAA;YAG1C,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,qBAAA,WAAA,QAAA,KAAA,EAAA;mCAtB9B,cAAc,0BAA0B,CAAA,EAAA,qBAAA"}

package/dist/chunks/{pk-lightswitch-DI1BeCmA.js → pk-lightswitch-D1qEFRxK.js} RENAMED Viewed

@@ -1,10 +1,10 @@
 import { a as query, i as property, 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 { t as HasSlotController } from "./has-slot-8BvCt_qo.js";
 import { t as formControlStyles } from "./form-control.styles-BQdimE5o.js";
-import { n as readLegacyInstructions, t as hasInstructionContent } from "./field-labels-CoU9dnNq.js";
+import { n as readLegacyInstructions, t as hasInstructionContent } from "./field-labels-CmuAW8Cl.js";
 import { css, html, nothing } from "lit";
 //#region src/components/lightswitch/pk-lightswitch.styles.ts
 var pkLightswitchStyles = css`
@@ -428,4 +428,4 @@ PkLightswitch = __decorate([customElement("pk-lightswitch")], PkLightswitch);
 //#endregion
 export { PkLightswitch as t };
-//# sourceMappingURL=pk-lightswitch-DI1BeCmA.js.map
+//# sourceMappingURL=pk-lightswitch-D1qEFRxK.js.map

package/dist/chunks/{pk-lightswitch-DI1BeCmA.js.map → pk-lightswitch-D1qEFRxK.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pk-lightswitch-DI1BeCmA.js","names":[],"sources":["../../src/components/lightswitch/pk-lightswitch.styles.ts","../../src/components/lightswitch/pk-lightswitch.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkLightswitchStyles = css`\n @layer pk-component {\n :host {\n display: inline-flex;\n vertical-align: middle;\n font-family: var(--pk-font-family);\n font-size: var(--pk-font-size-sm);\n line-height: var(--pk-line-height);\n --pk-lightswitch-border-color: var(--pk-color-slate-800);\n --pk-lightswitch-track-off: var(--pk-color-gray-200);\n --pk-lightswitch-track-on: var(--pk-color-teal-550);\n --pk-lightswitch-track-on-border: var(--pk-color-teal-550-border);\n --pk-lightswitch-focus-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--pk-color-sky-600),\n 0 0 6px 1px hsl(from var(--pk-color-sky-600) h s l / 0.8);\n --pk-lightswitch-invalid-shadow: 0 0 0 1px #fff, 0 0 0 2.5px var(--pk-color-rose-600);\n --pk-lightswitch-invalid-focus-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--pk-color-rose-600),\n 0 0 6px 1px hsl(from var(--pk-color-rose-600) h s l / 0.8);\n }\n\n :host([disabled]) {\n cursor: not-allowed;\n }\n\n .base {\n display: inline-flex;\n align-items: flex-start;\n gap: 0.5rem;\n }\n\n :host([disabled]) .base {\n opacity: 0.5;\n }\n\n .content {\n min-width: 0;\n cursor: pointer;\n user-select: none;\n }\n\n :host([disabled]) .content {\n cursor: not-allowed;\n }\n\n .label {\n display: block;\n /* Match checkbox / radio option labels (gray-700), not gray-900. /\n color: var(--pk-color-gray-700);\n line-height: 1rem;\n }\n\n .label:empty {\n display: none;\n }\n\n .instructions:empty,\n .hint:empty {\n display: none;\n }\n\n .switch {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n margin: 0;\n padding: 0;\n border: 0;\n border-radius: 11px;\n background: var(--pk-lightswitch-track-off, #d8dee7);\n box-shadow: inset 0 0 0 1px var(--pk-lightswitch-border-color, #667c92);\n cursor: pointer;\n user-select: none;\n appearance: none;\n transition: background-color 0.15s ease, box-shadow 0.15s ease;\n }\n\n .switch:focus {\n outline: none;\n }\n\n .switch:focus-visible {\n box-shadow: var(--pk-lightswitch-focus-shadow);\n }\n\n .switch[aria-checked='true'] {\n background: var(--pk-lightswitch-track-on, #0f9d8a);\n box-shadow: inset 0 0 0 1px var(--pk-lightswitch-track-on-border, #007d6f);\n }\n\n .switch[aria-checked='true']:focus-visible {\n box-shadow: var(--pk-lightswitch-focus-shadow);\n }\n\n :host([invalid]) .switch,\n :host(:state(user-invalid)) .switch,\n .switch[aria-invalid='true'] {\n box-shadow: var(--pk-lightswitch-invalid-shadow);\n }\n\n :host([invalid]) .switch[aria-checked='true'],\n :host(:state(user-invalid)) .switch[aria-checked='true'],\n .switch[aria-invalid='true'][aria-checked='true'] {\n background: var(--pk-lightswitch-track-on);\n }\n\n :host([invalid]) .switch:focus-visible,\n :host(:state(user-invalid)) .switch:focus-visible,\n .switch[aria-invalid='true']:focus-visible {\n box-shadow: var(--pk-lightswitch-invalid-focus-shadow);\n }\n\n .switch:disabled {\n cursor: not-allowed;\n }\n\n :host([size='default']) .switch {\n width: 34px;\n height: 22px;\n }\n\n :host([size='sm']) .switch {\n width: 28px;\n height: 18px;\n border-radius: 9px;\n }\n\n :host([size='xs']) .switch {\n width: 24px;\n height: 16px;\n border-radius: 8px;\n }\n\n :host([size='xxs']) .switch {\n width: 24px;\n height: 14px;\n border-radius: 7px;\n }\n\n .thumb {\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n background: var(--pk-color-white, #fff);\n box-shadow: inset 0 0 0 1px var(--pk-lightswitch-border-color, #667c92);\n pointer-events: none;\n transition: transform 0.15s ease, box-shadow 0.15s ease;\n }\n\n :host([size='default']) .thumb {\n width: 18px;\n height: 18px;\n transform: translateX(2px);\n }\n\n :host([size='default']) .switch[aria-checked='true'] .thumb {\n transform: translateX(calc(100% - 4px));\n box-shadow: inset 0 0 0 1px var(--pk-lightswitch-track-on-border);\n }\n\n :host([size='sm']) .thumb {\n width: 14px;\n height: 14px;\n transform: translateX(2px);\n }\n\n :host([size='sm']) .switch[aria-checked='true'] .thumb {\n transform: translateX(calc(100% - 2px));\n box-shadow: inset 0 0 0 1px var(--pk-lightswitch-track-on-border);\n }\n\n :host([size='xs']) .thumb {\n width: 12px;\n height: 12px;\n transform: translateX(2px);\n }\n\n :host([size='xs']) .switch[aria-checked='true'] .thumb {\n transform: translateX(calc(100% - 2px));\n box-shadow: inset 0 0 0 1px var(--pk-lightswitch-track-on-border);\n }\n\n :host([size='xxs']) .thumb {\n width: 10px;\n height: 10px;\n transform: translateX(2px);\n }\n\n :host([size='xxs']) .switch[aria-checked='true'] .thumb {\n transform: translateX(12px);\n box-shadow: inset 0 0 0 1px var(--pk-lightswitch-track-on-border, #007d6f);\n }\n\n .thumb svg {\n width: 14px;\n height: 14px;\n color: var(--pk-lightswitch-track-on);\n opacity: 0;\n transform: translateY(1px);\n transition: opacity 0.15s ease;\n }\n\n .switch[aria-checked='true'] .thumb svg {\n opacity: 1;\n }\n\n :host([size='sm']) .thumb svg {\n width: 10px;\n height: 10px;\n }\n\n :host([size='xs']) .thumb svg,\n :host([size='xxs']) .thumb svg {\n display: none;\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 }\n }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property, query } from '../../decorators.js';\nimport type { PropertyValues } from 'lit';\n\nimport { formControlStyles } from '../../base/form-control.styles.js';\nimport { PkFormAssociatedElement } from '../../base/pk-form-associated-element.js';\nimport { HasSlotController } from '../../internal/has-slot.js';\nimport { hasInstructionContent, readLegacyInstructions } from '../../internal/field-labels.js';\nimport { MirrorValidator, RequiredValidator } from '../../validators/index.js';\nimport { pkLightswitchStyles } from './pk-lightswitch.styles.js';\n\nconst CHECK_ICON = html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" aria-hidden=\"true\">\n <path fill=\"currentColor\" 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 </svg>\n`;\n\nexport type PkLightswitchSize = 'default' \| 'sm' \| 'xs' \| 'xxs';\n\n/\n Craft lightswitch — switch API (`role=\"switch\"`), form-associated.\n \n @slot - Switch label\n * @slot instructions - Instructions text (or use `instructions` attribute)\n * @slot hint - Alias for `instructions`\n \n @csspart base - Root wrapper\n * @csspart switch - Switch button\n * @csspart thumb - Thumb element\n * @csspart label - Label text\n * @csspart instructions - Instructions text\n * @csspart input - Hidden checkbox input\n */\n@customElement('pk-lightswitch')\nexport class PkLightswitch extends PkFormAssociatedElement {\n static override shadowRootOptions: ShadowRootInit = {\n mode: 'open',\n delegatesFocus: true,\n };\n\n static override styles = [formControlStyles, pkLightswitchStyles];\n\n static override get validators() {\n return [...super.validators, MirrorValidator(), RequiredValidator({ validationProperty: 'checked' })];\n }\n\n override assumeInteractionOn = ['change'];\n\n private readonly hasSlotController = new HasSlotController(this, 'instructions', 'hint');\n\n @property({ type: Boolean, reflect: true })\n checked = false;\n\n @property({ attribute: 'default-checked', type: Boolean })\n defaultChecked = false;\n\n @property({ type: Boolean, reflect: true })\n invalid = false;\n\n @property({ reflect: true })\n size: PkLightswitchSize = 'default';\n\n @property()\n value = 'on';\n\n @property()\n label = '';\n\n @property()\n instructions = '';\n\n @query('.input')\n override input!: HTMLInputElement;\n\n @query('[part=\"switch\"]')\n private switchElement!: HTMLButtonElement;\n\n override connectedCallback(): void {\n this.instructions = readLegacyInstructions(this, this.instructions);\n super.connectedCallback();\n }\n\n protected override get validationTarget(): HTMLElement {\n return this.input;\n }\n\n protected override syncFormValue(): void {\n this.setFormValue(this.checked ? this.value : null, this.checked ? 'on' : 'off');\n }\n\n protected override resetToDefaultValue(): void {\n this.checked = this.defaultChecked;\n }\n\n protected override restoreFormState(state: string \| File \| FormData \| null): void {\n if (state === 'on' \|\| state === this.value) {\n this.checked = true;\n } else {\n this.checked = false;\n }\n }\n\n override updated(changed: PropertyValues): void {\n if (this.input && changed.has('checked')) {\n this.input.checked = this.checked;\n }\n\n super.updated(changed);\n }\n\n click(): void {\n this.switchElement?.click();\n }\n\n override focus(options?: FocusOptions): void {\n this.switchElement?.focus(options);\n }\n\n override blur(): void {\n this.switchElement?.blur();\n }\n\n private toggle(): void {\n if (this.disabled) {\n return;\n }\n\n this.checked = !this.checked;\n this.emitCheckedChange();\n }\n\n private handleKeyDown(event: KeyboardEvent): void {\n const isRtl = this.matches(':dir(rtl)');\n\n if (event.key === ' ' \|\| event.key === 'Enter') {\n event.preventDefault();\n this.toggle();\n return;\n }\n\n if (event.key === 'ArrowLeft') {\n event.preventDefault();\n this.checked = isRtl;\n this.emitCheckedChange();\n return;\n }\n\n if (event.key === 'ArrowRight') {\n event.preventDefault();\n this.checked = !isRtl;\n this.emitCheckedChange();\n }\n }\n\n private emitCheckedChange(): void {\n this.hasInteracted = true;\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 private handleLabelClick(event: Event): void {\n if (this.disabled \|\| event.target === this.switchElement) {\n return;\n }\n\n this.toggle();\n }\n\n private hasLabelContent(): boolean {\n if (this.label) {\n return true;\n }\n\n const slot = this.shadowRoot?.querySelector('slot:not([name])') as HTMLSlotElement \| null;\n\n if (!slot) {\n return false;\n }\n\n return slot.assignedNodes({ flatten: true }).some((node) => {\n if (node.nodeType === Node.TEXT_NODE) {\n return Boolean(node.textContent?.trim());\n }\n\n return node.nodeType === Node.ELEMENT_NODE;\n });\n }\n\n override render() {\n const hasInstructions = hasInstructionContent(\n (name, flag) => this.hasSlotController.test(name, flag),\n this.instructions,\n );\n const hasLabel = this.hasLabelContent();\n\n return html`\n <div part=\"base\" class=\"base\">\n <button\n part=\"switch\"\n class=\"switch\"\n type=\"button\"\n role=\"switch\"\n ?disabled=${this.disabled}\n aria-checked=${this.checked ? 'true' : 'false'}\n aria-invalid=${this.invalid ? 'true' : nothing}\n aria-describedby=${hasInstructions ? 'instructions' : nothing}\n aria-labelledby=${hasLabel ? 'label' : nothing}\n @click=${this.toggle}\n @keydown=${this.handleKeyDown}\n >\n <span part=\"thumb\" class=\"thumb\">${CHECK_ICON}</span>\n </button>\n <input\n part=\"input\"\n class=\"input\"\n type=\"checkbox\"\n tabindex=\"-1\"\n .checked=${this.checked}\n ?disabled=${this.disabled}\n ?required=${this.required}\n value=${this.value}\n aria-invalid=${this.invalid ? 'true' : nothing}\n @change=${(event: Event) => event.stopPropagation()}\n />\n ${hasLabel \|\| hasInstructions\n ? html`\n <div class=\"content\" @click=${this.handleLabelClick}>\n ${hasLabel\n ? html`\n <span part=\"label\" class=\"label\" id=\"label\">\n <slot></slot>${this.label}\n </span>\n `\n : nothing}\n ${hasInstructions\n ? html`\n <span part=\"instructions\" class=\"instructions form-control__instructions\" id=\"instructions\">\n <slot name=\"instructions\">${this.instructions}</slot>\n <slot name=\"hint\"></slot>\n </span>\n `\n : nothing}\n </div>\n `\n : nothing}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-lightswitch': PkLightswitch;\n }\n}\n"],"mappings":";;;;;;;;;AAEA,IAAa,sBAAsB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACStC,IAAM,aAAa,IAAI;;;;;AAuBhB,IAAA,gBAAA,MAAM,sBAAsB,wBAAwB;;;6BAYxB,CAAC,SAAS;2BAEJ,IAAI,kBAAkB,MAAM,gBAAgB,OAAO;iBAG9E;wBAGO;iBAGP;cAGgB;eAGlB;eAGA;sBAGO;;;2BAlCqC;GAChD,MAAM;GACN,gBAAgB;GACnB;;;gBAEwB,CAAC,mBAAmB,oBAAoB;;CAEjE,WAAoB,aAAa;AAC7B,SAAO;GAAC,GAAG,MAAM;GAAY,iBAAiB;GAAE,kBAAkB,EAAE,oBAAoB,WAAW,CAAC;GAAC;;CAkCzG,oBAAmC;AAC/B,OAAK,eAAe,uBAAuB,MAAM,KAAK,aAAa;AACnE,QAAM,mBAAmB;;CAG7B,IAAuB,mBAAgC;AACnD,SAAO,KAAK;;CAGhB,gBAAyC;AACrC,OAAK,aAAa,KAAK,UAAU,KAAK,QAAQ,MAAM,KAAK,UAAU,OAAO,MAAM;;CAGpF,sBAA+C;AAC3C,OAAK,UAAU,KAAK;;CAGxB,iBAAoC,OAA8C;AAC9E,MAAI,UAAU,QAAQ,UAAU,KAAK,MACjC,MAAK,UAAU;MAEf,MAAK,UAAU;;CAIvB,QAAiB,SAA+B;AAC5C,MAAI,KAAK,SAAS,QAAQ,IAAI,UAAU,CACpC,MAAK,MAAM,UAAU,KAAK;AAG9B,QAAM,QAAQ,QAAQ;;CAG1B,QAAc;AACV,OAAK,eAAe,OAAO;;CAG/B,MAAe,SAA8B;AACzC,OAAK,eAAe,MAAM,QAAQ;;CAGtC,OAAsB;AAClB,OAAK,eAAe,MAAM;;CAG9B,SAAuB;AACnB,MAAI,KAAK,SACL;AAGJ,OAAK,UAAU,CAAC,KAAK;AACrB,OAAK,mBAAmB;;CAG5B,cAAsB,OAA4B;EAC9C,MAAM,QAAQ,KAAK,QAAQ,YAAY;AAEvC,MAAI,MAAM,QAAQ,OAAO,MAAM,QAAQ,SAAS;AAC5C,SAAM,gBAAgB;AACtB,QAAK,QAAQ;AACb;;AAGJ,MAAI,MAAM,QAAQ,aAAa;AAC3B,SAAM,gBAAgB;AACtB,QAAK,UAAU;AACf,QAAK,mBAAmB;AACxB;;AAGJ,MAAI,MAAM,QAAQ,cAAc;AAC5B,SAAM,gBAAgB;AACtB,QAAK,UAAU,CAAC;AAChB,QAAK,mBAAmB;;;CAIhC,oBAAkC;AAC9B,OAAK,gBAAgB;AAErB,OAAK,cAAc,IAAI,YAAY,aAAa;GAC5C,QAAQ,EAAE,SAAS,KAAK,SAAS;GACjC,SAAS;GACT,UAAU;GACb,CAAC,CAAC;AAEH,OAAK,cAAc,IAAI,MAAM,SAAS;GAAE,SAAS;GAAM,UAAU;GAAM,CAAC,CAAC;AACzE,OAAK,cAAc,IAAI,MAAM,UAAU;GAAE,SAAS;GAAM,UAAU;GAAM,CAAC,CAAC;;CAG9E,iBAAyB,OAAoB;AACzC,MAAI,KAAK,YAAY,MAAM,WAAW,KAAK,cACvC;AAGJ,OAAK,QAAQ;;CAGjB,kBAAmC;AAC/B,MAAI,KAAK,MACL,QAAO;EAGX,MAAM,OAAO,KAAK,YAAY,cAAc,mBAAmB;AAE/D,MAAI,CAAC,KACD,QAAO;AAGX,SAAO,KAAK,cAAc,EAAE,SAAS,MAAM,CAAC,CAAC,MAAM,SAAS;AACxD,OAAI,KAAK,aAAa,KAAK,UACvB,QAAO,QAAQ,KAAK,aAAa,MAAM,CAAC;AAG5C,UAAO,KAAK,aAAa,KAAK;IAChC;;CAGN,SAAkB;EACd,MAAM,kBAAkB,uBACnB,MAAM,SAAS,KAAK,kBAAkB,KAAK,MAAM,KAAK,EACvD,KAAK,aACR;EACD,MAAM,WAAW,KAAK,iBAAiB;AAEvC,SAAO,IAAI;;;;;;;gCAOa,KAAK,SAAS;mCACX,KAAK,UAAU,SAAS,QAAQ;mCAChC,KAAK,UAAU,SAAS,QAAQ;uCAC5B,kBAAkB,iBAAiB,QAAQ;sCAC5C,WAAW,UAAU,QAAQ;6BACtC,KAAK,OAAO;+BACV,KAAK,cAAc;;uDAEK,WAAW;;;;;;;+BAOnC,KAAK,QAAQ;gCACZ,KAAK,SAAS;gCACd,KAAK,SAAS;4BAClB,KAAK,MAAM;mCACJ,KAAK,UAAU,SAAS,QAAQ;+BACpC,UAAiB,MAAM,iBAAiB,CAAC;;kBAEtD,YAAY,kBACR,IAAI;sDAC4B,KAAK,iBAAiB;8BAC9C,WACI,IAAI;;uDAEiB,KAAK,MAAM;;oCAGhC,QAAQ;8BACZ,kBACI,IAAI;;oEAE8B,KAAK,aAAa;;;oCAIpD,QAAQ;;wBAGpB,QAAQ;;;;;YAzMzB,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,cAAA,WAAA,WAAA,KAAA,EAAA;YAG1C,SAAS;CAAE,WAAW;CAAmB,MAAM;CAAS,CAAC,CAAA,EAAA,cAAA,WAAA,kBAAA,KAAA,EAAA;YAGzD,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,cAAA,WAAA,WAAA,KAAA,EAAA;YAG1C,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,cAAA,WAAA,QAAA,KAAA,EAAA;YAG3B,UAAU,CAAA,EAAA,cAAA,WAAA,SAAA,KAAA,EAAA;YAGV,UAAU,CAAA,EAAA,cAAA,WAAA,SAAA,KAAA,EAAA;YAGV,UAAU,CAAA,EAAA,cAAA,WAAA,gBAAA,KAAA,EAAA;YAGV,MAAM,SAAS,CAAA,EAAA,cAAA,WAAA,SAAA,KAAA,EAAA;YAGf,MAAM,oBAAkB,CAAA,EAAA,cAAA,WAAA,iBAAA,KAAA,EAAA;4BAzC5B,cAAc,iBAAiB,CAAA,EAAA,cAAA"}
1	+ {"version":3,"file":"pk-lightswitch-D1qEFRxK.js","names":[],"sources":["../../src/components/lightswitch/pk-lightswitch.styles.ts","../../src/components/lightswitch/pk-lightswitch.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkLightswitchStyles = css`\n @layer pk-component {\n :host {\n display: inline-flex;\n vertical-align: middle;\n font-family: var(--pk-font-family);\n font-size: var(--pk-font-size-sm);\n line-height: var(--pk-line-height);\n --pk-lightswitch-border-color: var(--pk-color-slate-800);\n --pk-lightswitch-track-off: var(--pk-color-gray-200);\n --pk-lightswitch-track-on: var(--pk-color-teal-550);\n --pk-lightswitch-track-on-border: var(--pk-color-teal-550-border);\n --pk-lightswitch-focus-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--pk-color-sky-600),\n 0 0 6px 1px hsl(from var(--pk-color-sky-600) h s l / 0.8);\n --pk-lightswitch-invalid-shadow: 0 0 0 1px #fff, 0 0 0 2.5px var(--pk-color-rose-600);\n --pk-lightswitch-invalid-focus-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--pk-color-rose-600),\n 0 0 6px 1px hsl(from var(--pk-color-rose-600) h s l / 0.8);\n }\n\n :host([disabled]) {\n cursor: not-allowed;\n }\n\n .base {\n display: inline-flex;\n align-items: flex-start;\n gap: 0.5rem;\n }\n\n :host([disabled]) .base {\n opacity: 0.5;\n }\n\n .content {\n min-width: 0;\n cursor: pointer;\n user-select: none;\n }\n\n :host([disabled]) .content {\n cursor: not-allowed;\n }\n\n .label {\n display: block;\n /* Match checkbox / radio option labels (gray-700), not gray-900. /\n color: var(--pk-color-gray-700);\n line-height: 1rem;\n }\n\n .label:empty {\n display: none;\n }\n\n .instructions:empty,\n .hint:empty {\n display: none;\n }\n\n .switch {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n margin: 0;\n padding: 0;\n border: 0;\n border-radius: 11px;\n background: var(--pk-lightswitch-track-off, #d8dee7);\n box-shadow: inset 0 0 0 1px var(--pk-lightswitch-border-color, #667c92);\n cursor: pointer;\n user-select: none;\n appearance: none;\n transition: background-color 0.15s ease, box-shadow 0.15s ease;\n }\n\n .switch:focus {\n outline: none;\n }\n\n .switch:focus-visible {\n box-shadow: var(--pk-lightswitch-focus-shadow);\n }\n\n .switch[aria-checked='true'] {\n background: var(--pk-lightswitch-track-on, #0f9d8a);\n box-shadow: inset 0 0 0 1px var(--pk-lightswitch-track-on-border, #007d6f);\n }\n\n .switch[aria-checked='true']:focus-visible {\n box-shadow: var(--pk-lightswitch-focus-shadow);\n }\n\n :host([invalid]) .switch,\n :host(:state(user-invalid)) .switch,\n .switch[aria-invalid='true'] {\n box-shadow: var(--pk-lightswitch-invalid-shadow);\n }\n\n :host([invalid]) .switch[aria-checked='true'],\n :host(:state(user-invalid)) .switch[aria-checked='true'],\n .switch[aria-invalid='true'][aria-checked='true'] {\n background: var(--pk-lightswitch-track-on);\n }\n\n :host([invalid]) .switch:focus-visible,\n :host(:state(user-invalid)) .switch:focus-visible,\n .switch[aria-invalid='true']:focus-visible {\n box-shadow: var(--pk-lightswitch-invalid-focus-shadow);\n }\n\n .switch:disabled {\n cursor: not-allowed;\n }\n\n :host([size='default']) .switch {\n width: 34px;\n height: 22px;\n }\n\n :host([size='sm']) .switch {\n width: 28px;\n height: 18px;\n border-radius: 9px;\n }\n\n :host([size='xs']) .switch {\n width: 24px;\n height: 16px;\n border-radius: 8px;\n }\n\n :host([size='xxs']) .switch {\n width: 24px;\n height: 14px;\n border-radius: 7px;\n }\n\n .thumb {\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n background: var(--pk-color-white, #fff);\n box-shadow: inset 0 0 0 1px var(--pk-lightswitch-border-color, #667c92);\n pointer-events: none;\n transition: transform 0.15s ease, box-shadow 0.15s ease;\n }\n\n :host([size='default']) .thumb {\n width: 18px;\n height: 18px;\n transform: translateX(2px);\n }\n\n :host([size='default']) .switch[aria-checked='true'] .thumb {\n transform: translateX(calc(100% - 4px));\n box-shadow: inset 0 0 0 1px var(--pk-lightswitch-track-on-border);\n }\n\n :host([size='sm']) .thumb {\n width: 14px;\n height: 14px;\n transform: translateX(2px);\n }\n\n :host([size='sm']) .switch[aria-checked='true'] .thumb {\n transform: translateX(calc(100% - 2px));\n box-shadow: inset 0 0 0 1px var(--pk-lightswitch-track-on-border);\n }\n\n :host([size='xs']) .thumb {\n width: 12px;\n height: 12px;\n transform: translateX(2px);\n }\n\n :host([size='xs']) .switch[aria-checked='true'] .thumb {\n transform: translateX(calc(100% - 2px));\n box-shadow: inset 0 0 0 1px var(--pk-lightswitch-track-on-border);\n }\n\n :host([size='xxs']) .thumb {\n width: 10px;\n height: 10px;\n transform: translateX(2px);\n }\n\n :host([size='xxs']) .switch[aria-checked='true'] .thumb {\n transform: translateX(12px);\n box-shadow: inset 0 0 0 1px var(--pk-lightswitch-track-on-border, #007d6f);\n }\n\n .thumb svg {\n width: 14px;\n height: 14px;\n color: var(--pk-lightswitch-track-on);\n opacity: 0;\n transform: translateY(1px);\n transition: opacity 0.15s ease;\n }\n\n .switch[aria-checked='true'] .thumb svg {\n opacity: 1;\n }\n\n :host([size='sm']) .thumb svg {\n width: 10px;\n height: 10px;\n }\n\n :host([size='xs']) .thumb svg,\n :host([size='xxs']) .thumb svg {\n display: none;\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 }\n }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property, query } from '../../decorators.js';\nimport type { PropertyValues } from 'lit';\n\nimport { formControlStyles } from '../../base/form-control.styles.js';\nimport { PkFormAssociatedElement } from '../../base/pk-form-associated-element.js';\nimport { HasSlotController } from '../../internal/has-slot.js';\nimport { hasInstructionContent, readLegacyInstructions } from '../../internal/field-labels.js';\nimport { MirrorValidator, RequiredValidator } from '../../validators/index.js';\nimport { pkLightswitchStyles } from './pk-lightswitch.styles.js';\n\nconst CHECK_ICON = html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" aria-hidden=\"true\">\n <path fill=\"currentColor\" 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 </svg>\n`;\n\nexport type PkLightswitchSize = 'default' \| 'sm' \| 'xs' \| 'xxs';\n\n/\n Craft lightswitch — switch API (`role=\"switch\"`), form-associated.\n \n @slot - Switch label\n * @slot instructions - Instructions text (or use `instructions` attribute)\n * @slot hint - Alias for `instructions`\n \n @csspart base - Root wrapper\n * @csspart switch - Switch button\n * @csspart thumb - Thumb element\n * @csspart label - Label text\n * @csspart instructions - Instructions text\n * @csspart input - Hidden checkbox input\n */\n@customElement('pk-lightswitch')\nexport class PkLightswitch extends PkFormAssociatedElement {\n static override shadowRootOptions: ShadowRootInit = {\n mode: 'open',\n delegatesFocus: true,\n };\n\n static override styles = [formControlStyles, pkLightswitchStyles];\n\n static override get validators() {\n return [...super.validators, MirrorValidator(), RequiredValidator({ validationProperty: 'checked' })];\n }\n\n override assumeInteractionOn = ['change'];\n\n private readonly hasSlotController = new HasSlotController(this, 'instructions', 'hint');\n\n @property({ type: Boolean, reflect: true })\n checked = false;\n\n @property({ attribute: 'default-checked', type: Boolean })\n defaultChecked = false;\n\n @property({ type: Boolean, reflect: true })\n invalid = false;\n\n @property({ reflect: true })\n size: PkLightswitchSize = 'default';\n\n @property()\n value = 'on';\n\n @property()\n label = '';\n\n @property()\n instructions = '';\n\n @query('.input')\n override input!: HTMLInputElement;\n\n @query('[part=\"switch\"]')\n private switchElement!: HTMLButtonElement;\n\n override connectedCallback(): void {\n this.instructions = readLegacyInstructions(this, this.instructions);\n super.connectedCallback();\n }\n\n protected override get validationTarget(): HTMLElement {\n return this.input;\n }\n\n protected override syncFormValue(): void {\n this.setFormValue(this.checked ? this.value : null, this.checked ? 'on' : 'off');\n }\n\n protected override resetToDefaultValue(): void {\n this.checked = this.defaultChecked;\n }\n\n protected override restoreFormState(state: string \| File \| FormData \| null): void {\n if (state === 'on' \|\| state === this.value) {\n this.checked = true;\n } else {\n this.checked = false;\n }\n }\n\n override updated(changed: PropertyValues): void {\n if (this.input && changed.has('checked')) {\n this.input.checked = this.checked;\n }\n\n super.updated(changed);\n }\n\n click(): void {\n this.switchElement?.click();\n }\n\n override focus(options?: FocusOptions): void {\n this.switchElement?.focus(options);\n }\n\n override blur(): void {\n this.switchElement?.blur();\n }\n\n private toggle(): void {\n if (this.disabled) {\n return;\n }\n\n this.checked = !this.checked;\n this.emitCheckedChange();\n }\n\n private handleKeyDown(event: KeyboardEvent): void {\n const isRtl = this.matches(':dir(rtl)');\n\n if (event.key === ' ' \|\| event.key === 'Enter') {\n event.preventDefault();\n this.toggle();\n return;\n }\n\n if (event.key === 'ArrowLeft') {\n event.preventDefault();\n this.checked = isRtl;\n this.emitCheckedChange();\n return;\n }\n\n if (event.key === 'ArrowRight') {\n event.preventDefault();\n this.checked = !isRtl;\n this.emitCheckedChange();\n }\n }\n\n private emitCheckedChange(): void {\n this.hasInteracted = true;\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 private handleLabelClick(event: Event): void {\n if (this.disabled \|\| event.target === this.switchElement) {\n return;\n }\n\n this.toggle();\n }\n\n private hasLabelContent(): boolean {\n if (this.label) {\n return true;\n }\n\n const slot = this.shadowRoot?.querySelector('slot:not([name])') as HTMLSlotElement \| null;\n\n if (!slot) {\n return false;\n }\n\n return slot.assignedNodes({ flatten: true }).some((node) => {\n if (node.nodeType === Node.TEXT_NODE) {\n return Boolean(node.textContent?.trim());\n }\n\n return node.nodeType === Node.ELEMENT_NODE;\n });\n }\n\n override render() {\n const hasInstructions = hasInstructionContent(\n (name, flag) => this.hasSlotController.test(name, flag),\n this.instructions,\n );\n const hasLabel = this.hasLabelContent();\n\n return html`\n <div part=\"base\" class=\"base\">\n <button\n part=\"switch\"\n class=\"switch\"\n type=\"button\"\n role=\"switch\"\n ?disabled=${this.disabled}\n aria-checked=${this.checked ? 'true' : 'false'}\n aria-invalid=${this.invalid ? 'true' : nothing}\n aria-describedby=${hasInstructions ? 'instructions' : nothing}\n aria-labelledby=${hasLabel ? 'label' : nothing}\n @click=${this.toggle}\n @keydown=${this.handleKeyDown}\n >\n <span part=\"thumb\" class=\"thumb\">${CHECK_ICON}</span>\n </button>\n <input\n part=\"input\"\n class=\"input\"\n type=\"checkbox\"\n tabindex=\"-1\"\n .checked=${this.checked}\n ?disabled=${this.disabled}\n ?required=${this.required}\n value=${this.value}\n aria-invalid=${this.invalid ? 'true' : nothing}\n @change=${(event: Event) => event.stopPropagation()}\n />\n ${hasLabel \|\| hasInstructions\n ? html`\n <div class=\"content\" @click=${this.handleLabelClick}>\n ${hasLabel\n ? html`\n <span part=\"label\" class=\"label\" id=\"label\">\n <slot></slot>${this.label}\n </span>\n `\n : nothing}\n ${hasInstructions\n ? html`\n <span part=\"instructions\" class=\"instructions form-control__instructions\" id=\"instructions\">\n <slot name=\"instructions\">${this.instructions}</slot>\n <slot name=\"hint\"></slot>\n </span>\n `\n : nothing}\n </div>\n `\n : nothing}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-lightswitch': PkLightswitch;\n }\n}\n"],"mappings":"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"}

package/dist/chunks/{pk-option-MGj9SKOK.js → pk-option-DQZHV9jL.js} RENAMED Viewed

@@ -169,6 +169,7 @@ var PkOption = class PkOption extends PkElement {
 	static {
 		this.styles = pkOptionStyles;
 	}
+	/** Focus the option’s inner control (listbox keyboard navigation). */
 	focusControl(preventScroll = true) {
 		this.shadowRoot?.querySelector(".option")?.focus({ preventScroll });
 	}
@@ -235,7 +236,7 @@ var PkOption = class PkOption extends PkElement {
 			" ",
 			"Escape"
 		]).has(event.key)) return;
-		const owner = this.closest("pk-select, pk-combobox");
+		const owner = this.closest("pk-select, pk-combobox, pk-autocomplete");
 		const panel = owner ? null : this.closest("[role=\"listbox\"]");
 		if (!owner && !panel) return;
 		event.preventDefault();
@@ -316,4 +317,4 @@ PkOption = __decorate([customElement("pk-option")], PkOption);
 //#endregion
 export { PkOption as t };
-//# sourceMappingURL=pk-option-MGj9SKOK.js.map
+//# sourceMappingURL=pk-option-DQZHV9jL.js.map

package/dist/chunks/pk-option-DQZHV9jL.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"pk-option-DQZHV9jL.js","names":[],"sources":["../../src/utils/highlight-text.ts","../../src/components/select/pk-option.styles.ts","../../src/components/select/pk-option.ts"],"sourcesContent":["export type HighlightPart = {\n text: string;\n match: boolean;\n};\n\n/** Split label text into matched/unmatched segments for typeahead highlighting. */\nexport function splitHighlightParts(text: string, search: string): HighlightPart[] {\n const label = String(text ?? '');\n const query = String(search ?? '').trim();\n\n if (!query) {\n return [{ text: label, match: false }];\n }\n\n const lowerLabel = label.toLowerCase();\n const lowerQuery = query.toLowerCase();\n const parts: HighlightPart[] = [];\n let cursor = 0;\n let matchIndex = lowerLabel.indexOf(lowerQuery);\n\n while (matchIndex !== -1) {\n if (matchIndex > cursor) {\n parts.push({\n text: label.slice(cursor, matchIndex),\n match: false,\n });\n }\n\n parts.push({\n text: label.slice(matchIndex, matchIndex + query.length),\n match: true,\n });\n\n cursor = matchIndex + query.length;\n matchIndex = lowerLabel.indexOf(lowerQuery, cursor);\n }\n\n if (cursor < label.length) {\n parts.push({\n text: label.slice(cursor),\n match: false,\n });\n }\n\n return parts.length > 0 ? parts : [{ text: label, match: false }];\n}\n","import { css } from 'lit';\n\nexport const pkOptionStyles = css`\n @layer pk-component {\n :host {\n display: block;\n /*\n * Slotted option labels inherit type metrics from this host (same\n * Craft-vs-Tailwind trap as pk-dropdown-item). Size tokens arrive via\n * pk-select ::slotted(pk-option) custom properties.\n */\n font-family: var(--pk-font-family);\n font-size: var(--pk-select-item-font-size, var(--pk-font-size-base));\n line-height: var(--pk-select-item-line-height, 1.4);\n color: var(--pk-color-gray-700);\n }\n\n .option {\n position: relative;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n width: 100%;\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, 6px);\n padding-inline-start: var(--pk-select-item-padding-inline, 10px);\n padding-inline-end: var(--pk-select-item-padding-inline-end, 2rem);\n border: var(--pk-select-trigger-border-width, 1px) solid transparent;\n background: transparent;\n color: inherit;\n font: inherit;\n font-family: var(--pk-font-family);\n font-size: var(--pk-select-item-font-size, var(--pk-font-size-base));\n line-height: var(--pk-select-item-line-height, 1.4);\n text-align: left;\n white-space: nowrap;\n cursor: default;\n user-select: none;\n outline: none;\n box-sizing: border-box;\n }\n\n .start {\n display: none;\n flex: 0 0 auto;\n align-items: center;\n }\n\n :host([data-has-start]) .start {\n display: inline-flex;\n }\n\n :host([hidden]) {\n display: none !important;\n }\n\n .option:focus-visible,\n :host([highlighted]) .option {\n background: var(--pk-color-slate-100);\n }\n\n :host([disabled]) .option,\n .option[aria-disabled='true'] {\n pointer-events: none;\n opacity: 0.5;\n }\n\n .check {\n position: absolute;\n inset-inline-end: var(--pk-select-item-indicator-inset, 0.5rem);\n top: 50%;\n display: none;\n align-items: center;\n justify-content: center;\n width: var(--pk-select-item-indicator-size, 0.75rem);\n height: var(--pk-select-item-indicator-size, 0.75rem);\n color: var(--pk-color-gray-700);\n pointer-events: none;\n transform: translateY(-50%);\n line-height: 0;\n }\n\n :host([selected]) .check {\n display: inline-flex;\n }\n\n .check svg {\n display: block;\n width: var(--pk-select-item-indicator-size, 0.75rem);\n height: var(--pk-select-item-indicator-size, 0.75rem);\n flex-shrink: 0;\n pointer-events: none;\n }\n\n .label {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n /* Allow custom multi-line option layouts (title + subtitle) to stack. */\n white-space: normal;\n }\n\n .match {\n padding: 0;\n border-radius: 2px;\n background: var(--pk-color-blue-100);\n color: inherit;\n }\n }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property } from '../../decorators.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\n\nimport { check, renderIconHtml } from '../../icons/index.js';\nimport { PkElement } from '../../base/pk-element.js';\nimport { splitHighlightParts } from '../../utils/highlight-text.js';\nimport { pkOptionStyles } from './pk-option.styles.js';\n\nconst CHECK_ICON = renderIconHtml(check);\n\n/**\n * Select option — use inside `pk-select`, `pk-combobox`, or `pk-autocomplete`.\n *\n * @slot start - Presentational decoration before the label (e.g. `pk-status`).\n * @slot - Option label\n *\n * @csspart start - Start decoration container\n * @csspart option - Option button\n * @csspart label - Option label\n * @csspart check - Selected-state check indicator\n *\n * @event pk-option-select - Emitted when the option is activated (click / Enter).\n * @event pk-option-highlight - Emitted when the option becomes the highlighted item.\n */\n@customElement('pk-option')\nexport class PkOption extends PkElement {\n static override styles = pkOptionStyles;\n\n /** Option value submitted / emitted when selected. */\n @property()\n value = '';\n\n /**\n * Optional short label for the closed trigger / filter identity (v1 itemToStringLabel).\n * When set, preferred over concatenating rich default-slot text (title + subtitle).\n */\n @property()\n label = '';\n\n /** Disables the option so it cannot be selected. */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /** Whether this option is currently selected. */\n @property({ type: Boolean, reflect: true })\n selected = false;\n\n /** Keyboard / pointer highlight within the listbox. */\n @property({ type: Boolean, reflect: true })\n highlighted = false;\n\n /** Hides the option from the list (e.g. filtered combobox results). */\n @property({ type: Boolean, reflect: true })\n hidden = false;\n\n @property({ type: Number, attribute: 'focus-index' })\n focusIndex = -1;\n\n @property()\n optionId = '';\n\n /** When set, the label renders with matching query text highlighted (combobox filter). */\n @property({ attribute: false })\n matchQuery = '';\n\n /** Focus the option’s inner control (listbox keyboard navigation). */\n focusControl(preventScroll = true): void {\n this.shadowRoot?.querySelector<HTMLButtonElement>('.option')?.focus({ preventScroll });\n }\n\n /**\n * Label for the closed combobox/select value.\n * Prefers the `label` attribute when set; otherwise default-slot text\n * (excluding `slot=\"start\"`), joined with spaces for multi-node layouts.\n */\n getLabel(): string {\n if (this.label.trim()) {\n return this.label.trim();\n }\n\n const labelSlot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n\n if (!labelSlot) {\n return this.textContent?.trim() ?? this.value;\n }\n\n // Join with spaces so multi-line custom labels (\"Link\" + \"Craft CMS\") do not\n // concatenate into \"LinkCraft CMS\" when no explicit `label` is set.\n return labelSlot.assignedNodes()\n .map((node) => (node.textContent ?? '').trim())\n .filter(Boolean)\n .join(' ')\n .trim();\n }\n\n /** Full default-slot text for typeahead matching (includes subtitle lines). */\n getSearchText(): string {\n const labelSlot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n\n if (!labelSlot) {\n return this.getLabel();\n }\n\n const fromSlot = labelSlot.assignedNodes()\n .map((node) => (node.textContent ?? '').trim())\n .filter(Boolean)\n .join(' ')\n .trim();\n\n return fromSlot || this.getLabel();\n }\n\n /** True when the default slot has element children (custom multi-line / rich layouts). */\n private hasRichLabelContent(): boolean {\n return [...this.children].some((node) => {\n if (!(node instanceof HTMLElement)) {\n return false;\n }\n\n // Named slots (e.g. start) are not part of the label.\n return !node.slot || node.slot === '';\n });\n }\n\n /** Light-DOM elements assigned to the start decoration slot. */\n getStartElements(): HTMLElement[] {\n return [...this.querySelectorAll(':scope > [slot=\"start\"]')].filter(\n (node): node is HTMLElement => node instanceof HTMLElement,\n );\n }\n\n override firstUpdated(): void {\n const startSlot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"start\"]');\n\n startSlot?.addEventListener('slotchange', () => this.syncStartDecoration());\n this.syncStartDecoration();\n }\n\n private syncStartDecoration(): void {\n this.toggleAttribute('data-has-start', this.getStartElements().length > 0);\n }\n\n private handleClick(): void {\n if (this.disabled) {\n return;\n }\n\n this.dispatchEvent(new CustomEvent('pk-option-select', {\n detail: { value: this.value },\n bubbles: true,\n composed: true,\n }));\n }\n\n private handleMouseEnter(): void {\n if (this.disabled || this.hidden) {\n return;\n }\n\n this.dispatchEvent(new CustomEvent('pk-option-highlight', {\n detail: { value: this.value },\n bubbles: true,\n composed: true,\n }));\n }\n\n private handleKeyDown(event: KeyboardEvent): void {\n const navKeys = new Set([\n 'ArrowDown',\n 'ArrowUp',\n 'ArrowLeft',\n 'ArrowRight',\n 'Home',\n 'End',\n 'Enter',\n ' ',\n 'Escape',\n ]);\n\n if (!navKeys.has(event.key)) {\n return;\n }\n\n const owner = this.closest('pk-select, pk-combobox, pk-autocomplete');\n const panel = owner ? null : this.closest('[role=\"listbox\"]');\n\n if (!owner && !panel) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n\n const keydownEvent = new CustomEvent('pk-listbox-keydown', {\n detail: { keyboardEvent: event },\n bubbles: true,\n });\n\n if (owner) {\n owner.dispatchEvent(keydownEvent);\n return;\n }\n\n panel!.dispatchEvent(keydownEvent);\n }\n\n private renderLabel() {\n const query = this.matchQuery.trim();\n // Flat highlight replaces the default slot — that collapses custom layouts\n // (title + subtitle) into one run when filtering. Keep the slot for rich content.\n if (!query || this.hasRichLabelContent()) {\n return html`\n <span part=\"label\" class=\"label\">\n <slot></slot>\n </span>\n `;\n }\n\n const label = this.getLabel();\n const parts = splitHighlightParts(label, query);\n\n return html`\n <span part=\"label\" class=\"label\">\n ${parts.map((part) => part.match\n ? html`<mark class=\"match\">${part.text}</mark>`\n : html`<span>${part.text}</span>`)}\n </span>\n `;\n }\n\n override render() {\n return html`\n <button\n part=\"option\"\n type=\"button\"\n class=\"option\"\n role=\"option\"\n id=${this.optionId || nothing}\n ?disabled=${this.disabled}\n aria-disabled=${this.disabled ? 'true' : nothing}\n aria-selected=${this.selected ? 'true' : 'false'}\n tabindex=${this.focusIndex}\n @click=${this.handleClick}\n @mouseenter=${this.handleMouseEnter}\n @keydown=${this.handleKeyDown}\n >\n <span part=\"start\" class=\"start\">\n <slot name=\"start\"></slot>\n </span>\n ${this.renderLabel()}\n <span part=\"check\" class=\"check\" aria-hidden=\"true\">${unsafeSVG(CHECK_ICON)}</span>\n </button>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-option': PkOption;\n }\n}\n"],"mappings":"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"}

package/dist/chunks/{pk-option-group-Cs6N7mlP.js → pk-option-group-CCzJkBFp.js} RENAMED Viewed

@@ -68,4 +68,4 @@ PkOptionGroup = __decorate([customElement("pk-option-group")], PkOptionGroup);
 //#endregion
 export { PkOptionGroup as t };
-//# sourceMappingURL=pk-option-group-Cs6N7mlP.js.map
+//# sourceMappingURL=pk-option-group-CCzJkBFp.js.map

package/dist/chunks/{pk-option-group-Cs6N7mlP.js.map → pk-option-group-CCzJkBFp.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pk-option-group-~~Cs6N7mlP~~.js","names":[],"sources":["../../src/components/select/pk-option-group.styles.ts","../../src/components/select/pk-option-group.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkOptionGroupStyles = css`\n @layer pk-component {\n :host {\n display: block;\n }\n\n /* Hard hex fallbacks: when groups portal outside pk-select, size-token\n * vars / theme tokens may be absent and invalid color inherits option black.\n * Weight/color match v1 ComboboxLabel / SelectLabel (text-slate-700, no font-medium). /\n .label {\n padding-block-start: var(--pk-select-group-label-padding-block-start, 8px);\n padding-block-end: var(--pk-select-group-label-padding-block-end, 2px);\n padding-inline: var(--pk-select-item-padding-inline, 10px);\n color: var(--pk-select-group-label-color, var(--pk-color-slate-700, rgba(96, 125, 159, 0.7)));\n font-family: var(--pk-font-family);\n / Default matches v1 ComboboxLabel/SelectLabel text-xs (12px). /\n font-size: var(--pk-select-group-label-font-size, 12px);\n font-weight: 400;\n line-height: 1.3;\n / Light-DOM ancestors (e.g. Formie empty dropzone text-center) must not center labels. /\n text-align: left;\n user-select: none;\n pointer-events: none;\n }\n\n :host([hidden]),\n :host([data-pk-filter-empty]) {\n display: none !important;\n }\n }\n`;\n","import { html } from 'lit';\nimport { customElement, property } from '../../decorators.js';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { uniqueId } from '../../a11y/focus.js';\nimport { pkOptionGroupStyles } from './pk-option-group.styles.js';\n\n/\n Visual option group for `pk-select` — listbox grouping pattern.\n \n @slot - `pk-option` items in this group\n \n @csspart label - Group label\n */\n@customElement('pk-option-group')\nexport class PkOptionGroup extends PkElement {\n static override styles = pkOptionGroupStyles;\n\n @property({ reflect: true })\n label = '';\n\n @property({ type: Boolean, reflect: true })\n hidden = false;\n\n private readonly labelId = uniqueId('pk-option-group-label');\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.setAttribute('role', 'group');\n this.setAttribute('aria-labelledby', this.labelId);\n }\n\n override render() {\n return html`\n <div part=\"label\" class=\"label\" id=${this.labelId}>${this.label}</div>\n <div role=\"presentation\">\n <slot></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-option-group': PkOptionGroup;\n }\n}\n"],"mappings":";;;;AAEA,IAAa,sBAAsB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACa/B,IAAA,gBAAA,MAAM,sBAAsB,UAAU;;;~~eAIjC~~;~~gBAGC~~;iBAEkB,SAAS,wBAAwB;;;~~gBARnC~~;;~~CAUzB~~,oBAAmC;AAC/B,QAAM,mBAAmB;AACzB,OAAK,aAAa,QAAQ,QAAQ;AAClC,OAAK,aAAa,mBAAmB,KAAK,QAAQ;;CAGtD,SAAkB;AACd,SAAO,IAAI;iDAC8B,KAAK,QAAQ,GAAG,KAAK,MAAM;;;;;;;~~YAhBvE~~,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,cAAA,WAAA,SAAA,KAAA,EAAA;~~YAG3B~~,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,cAAA,WAAA,UAAA,KAAA,EAAA;~~4BAP9C~~,cAAc,kBAAkB,CAAA,EAAA,cAAA"}
1	+ {"version":3,"file":"pk-option-group-CCzJkBFp.js","names":[],"sources":["../../src/components/select/pk-option-group.styles.ts","../../src/components/select/pk-option-group.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkOptionGroupStyles = css`\n @layer pk-component {\n :host {\n display: block;\n }\n\n /* Hard hex fallbacks: when groups portal outside pk-select, size-token\n * vars / theme tokens may be absent and invalid color inherits option black.\n * Weight/color match v1 ComboboxLabel / SelectLabel (text-slate-700, no font-medium). /\n .label {\n padding-block-start: var(--pk-select-group-label-padding-block-start, 8px);\n padding-block-end: var(--pk-select-group-label-padding-block-end, 2px);\n padding-inline: var(--pk-select-item-padding-inline, 10px);\n color: var(--pk-select-group-label-color, var(--pk-color-slate-700, rgba(96, 125, 159, 0.7)));\n font-family: var(--pk-font-family);\n / Default matches v1 ComboboxLabel/SelectLabel text-xs (12px). /\n font-size: var(--pk-select-group-label-font-size, 12px);\n font-weight: 400;\n line-height: 1.3;\n / Light-DOM ancestors (e.g. Formie empty dropzone text-center) must not center labels. /\n text-align: left;\n user-select: none;\n pointer-events: none;\n }\n\n :host([hidden]),\n :host([data-pk-filter-empty]) {\n display: none !important;\n }\n }\n`;\n","import { html } from 'lit';\nimport { customElement, property } from '../../decorators.js';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { uniqueId } from '../../a11y/focus.js';\nimport { pkOptionGroupStyles } from './pk-option-group.styles.js';\n\n/\n Visual option group for `pk-select` — listbox grouping pattern.\n \n @slot - `pk-option` items in this group\n \n @csspart label - Group label\n /\n@customElement('pk-option-group')\nexport class PkOptionGroup extends PkElement {\n static override styles = pkOptionGroupStyles;\n\n /* Visible group heading above the options. /\n @property({ reflect: true })\n label = '';\n\n /* Hides the group and its options. */\n @property({ type: Boolean, reflect: true })\n hidden = false;\n\n private readonly labelId = uniqueId('pk-option-group-label');\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.setAttribute('role', 'group');\n this.setAttribute('aria-labelledby', this.labelId);\n }\n\n override render() {\n return html`\n <div part=\"label\" class=\"label\" id=${this.labelId}>${this.label}</div>\n <div role=\"presentation\">\n <slot></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-option-group': PkOptionGroup;\n }\n}\n"],"mappings":";;;;AAEA,IAAa,sBAAsB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACa/B,IAAA,gBAAA,MAAM,sBAAsB,UAAU;;;eAKjC;gBAIC;iBAEkB,SAAS,wBAAwB;;;gBAVnC;;CAYzB,oBAAmC;AAC/B,QAAM,mBAAmB;AACzB,OAAK,aAAa,QAAQ,QAAQ;AAClC,OAAK,aAAa,mBAAmB,KAAK,QAAQ;;CAGtD,SAAkB;AACd,SAAO,IAAI;iDAC8B,KAAK,QAAQ,GAAG,KAAK,MAAM;;;;;;;YAjBvE,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,cAAA,WAAA,SAAA,KAAA,EAAA;YAI3B,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,cAAA,WAAA,UAAA,KAAA,EAAA;4BAT9C,cAAc,kBAAkB,CAAA,EAAA,cAAA"}

package/dist/chunks/{pk-popover-duyNosk2.js → pk-popover-D3jkHfwB.js} RENAMED Viewed

@@ -3,10 +3,10 @@ import { r as buttonGroupCornerRoleStyles } from "./button-group-item.styles-DYm
 import { i as uniqueId } from "./focus-aa5dlv8k.js";
 import { i as unregisterDismissible, n as isTopDismissible, r as registerDismissible } from "./dismissible-stack-XQUMfKO3.js";
 import { i as PkShowEvent, n as PkAfterShowEvent, r as PkHideEvent, t as PkAfterHideEvent } from "./overlay-lifecycle-D0pkTQyI.js";
-import { r as resolveElementById } from "./pk-popup-B9AgBC2V.js";
+import { r as resolveElementById } from "./pk-popup-B65tZMQH.js";
 import { i as waitForPopupReposition, r as syncPopupPlacementAnimation } from "./popup-placement-animation-WlEXnS85.js";
-import { n as isPointerInsideOverlay } from "./popup-pointer-DMnuZDQl.js";
-import { t as popupContentAnimationStyles } from "./popup-content-animation.styles-Dc6d9quJ.js";
+import { n as isPointerInsideOverlay } 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";
 //#region src/components/popover/pk-popover.styles.ts
@@ -373,4 +373,4 @@ PkPopover = __decorate([customElement("pk-popover")], PkPopover);
 //#endregion
 export { PkPopover as t };
-//# sourceMappingURL=pk-popover-duyNosk2.js.map
+//# sourceMappingURL=pk-popover-D3jkHfwB.js.map

package/dist/chunks/pk-popover-D3jkHfwB.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"pk-popover-D3jkHfwB.js","names":[],"sources":["../../src/components/popover/pk-popover.styles.ts","../../src/components/popover/pk-popover.ts"],"sourcesContent":["import { css } from 'lit';\n\nimport { buttonGroupCornerRoleStyles } from '../button-group/button-group-item.styles.js';\nimport { popupContentAnimationStyles } from '../../styles/popup-content-animation.styles.js';\n\nexport const pkPopoverStyles = [\n buttonGroupCornerRoleStyles(),\n popupContentAnimationStyles,\n css`\n @layer pk-component {\n :host {\n /* Flex column parents stretch cross-axis size — pin to content.\n (inline-block + align-self; same class of fix as dialog / dropdown.) */\n display: inline-block;\n max-width: 100%;\n align-self: flex-start;\n flex: none;\n vertical-align: middle;\n }\n\n :host([data-pk-group-orientation]) {\n display: inline-flex;\n vertical-align: middle;\n flex: 0 0 auto;\n align-self: auto;\n }\n\n :host([data-pk-group-orientation]) ::slotted([slot='trigger']) {\n --pk-bg-start-start-radius: inherit;\n --pk-bg-start-end-radius: inherit;\n --pk-bg-end-start-radius: inherit;\n --pk-bg-end-end-radius: inherit;\n }\n\n :host([data-pk-group-orientation='horizontal'][data-pk-group-join]) {\n margin-inline-start: var(--pk-bg-horizontal-indent, 0);\n }\n\n :host([data-pk-group-orientation='vertical'][data-pk-group-join]) {\n margin-block-start: var(--pk-bg-vertical-indent, 0);\n }\n\n :host([data-pk-group-orientation='horizontal'][data-pk-group-join]:has([slot='trigger'][variant='outline'], [slot='trigger'][variant='dashed'])) {\n margin-inline-start: var(--pk-bg-horizontal-indent-outlined, 0);\n }\n\n :host([data-pk-group-orientation='vertical'][data-pk-group-join]:has([slot='trigger'][variant='outline'], [slot='trigger'][variant='dashed'])) {\n margin-block-start: var(--pk-bg-vertical-indent-outlined, 0);\n }\n\n /* Match pk-popup's arrow fill to the panel surface when with-arrow is on. */\n :host([with-arrow]) {\n --pk-popup-arrow-color: var(--pk-color-white);\n --pk-popup-arrow-size: 8px;\n }\n\n .panel {\n box-sizing: border-box;\n width: 18rem;\n padding: 1rem;\n border-radius: var(--pk-radius-md);\n background: var(--pk-color-white);\n box-shadow: var(--pk-shadow-popover);\n /* Craft CP body text (~gray-700), not gray-900. */\n color: var(--pk-color-gray-700);\n }\n\n /* Flush panels for command/menu chrome that owns its own inset (variable picker, etc.).\n Match kit v1 PopoverContent min-w 260px / max-w 360px: without min-width,\n width max-content shrinks to short labels and looks narrower than the old picker. */\n :host([flush]) .panel {\n width: max-content;\n min-width: var(--pk-popover-flush-min-width, 16.25rem);\n max-width: min(var(--pk-popover-flush-max-width, 22.5rem), 100vw - 1rem);\n padding: 0;\n }\n\n .panel[hidden] {\n display: none !important;\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 type { PropertyValues } from 'lit';\n\nimport { isTopDismissible, registerDismissible, unregisterDismissible } from '../../a11y/dismissible-stack.js';\nimport { uniqueId } from '../../a11y/focus.js';\nimport { PkElement } from '../../base/pk-element.js';\nimport { resolveElementById } from '../../internal/resolve-element-by-id.js';\nimport {\n PkAfterHideEvent,\n PkAfterShowEvent,\n PkHideEvent,\n PkShowEvent,\n type PkOverlaySource,\n} from '../../events/overlay-lifecycle.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 syncPopupPlacementAnimation,\n waitForPopupReposition,\n} from '../../utils/popup-placement-animation.js';\nimport { isPointerInsideOverlay } from '../../utils/popup-pointer.js';\nimport { pkPopoverStyles } from './pk-popover.styles.js';\n\n/**\n * Popover — pattern: trigger toggles a floating panel.\n *\n * @slot trigger - Popover trigger\n * @slot - Popover content\n *\n * @csspart panel - Floating content panel\n *\n * @attr with-arrow - Show a pointing arrow toward the trigger (default: off)\n */\n@customElement('pk-popover')\nexport class PkPopover extends PkElement {\n static override styles = pkPopoverStyles;\n\n @property({ type: Boolean, reflect: true })\n open = false;\n\n @property({ reflect: true })\n placement: PkPopupPlacement = 'bottom';\n\n @property({ attribute: 'side-offset', type: Number })\n sideOffset = 4;\n\n /**\n * Drop default panel padding/fixed width so slotted content (command lists, etc.)\n * can control its own inset. Consumer outer `p-0` alone cannot reach `.panel`.\n */\n @property({ type: Boolean, reflect: true })\n flush = false;\n\n /**\n * Show a floating-ui arrow on the panel (off by default).\n * Named like other optional controls (`with-clear`, `with-caret`) — tooltip always\n * paints its own arrow and has no toggle.\n */\n @property({ attribute: 'with-arrow', type: Boolean, reflect: true })\n withArrow = false;\n\n /** Anchor element id — alternative to the trigger slot. */\n @property({ reflect: true })\n for = '';\n\n /**\n * Live element anchor — use when the target lives in another shadow tree\n * (e.g. TipTap chips). Preferred over `for` / trigger slot when set.\n * Stays in the consumer tree so modal `showModal()` inert does not apply\n * (unlike portaling the panel to a root outside the dialog).\n */\n @property({ attribute: false })\n anchor: Element | null = null;\n\n @query('pk-popup')\n private popupElement!: PkPopup;\n\n private get panelElement(): HTMLDivElement | null {\n return this.popupElement?.getContentElement() as HTMLDivElement | null ?? null;\n }\n\n @state()\n private triggerElement: HTMLElement | null = null;\n\n /** True while the shared popup-content exit animation is running. */\n @state()\n private closing = false;\n\n /** Gates `data-open` so enter motion starts after Floating UI places the panel. */\n @state()\n private panelAnimated = false;\n\n private readonly triggerId = uniqueId('pk-popover-trigger');\n private dismissRegistered = false;\n /** Guard re-entry while openPopover/closePopover mutate `open`. */\n private syncingOpenSideEffects = false;\n /** Coalesce overlapping close calls (updated + light-dismiss) onto one exit. */\n private exitAnimationPromise: Promise<void> | null = null;\n\n override disconnectedCallback(): void {\n // Skip exit motion on teardown — demote immediately.\n void this.closePopover('api', true);\n super.disconnectedCallback();\n }\n\n /**\n * When controlled/toggle `open` flips false, arm `closing` in the same update so the\n * panel is not `hidden` for a frame before the exit animation starts.\n */\n override willUpdate(changed: PropertyValues): void {\n if (\n changed.has('open')\n && this.open === false\n && changed.get('open') === true\n && !this.syncingOpenSideEffects\n && !this.closing\n ) {\n this.closing = true;\n this.panelAnimated = false;\n }\n }\n\n /**\n * Controlled `open` (e.g. React) must arm/disarm light-dismiss the same way as\n * trigger toggles. Without this, programmatic open shows the panel but click-away\n * never fires.\n */\n override async updated(changed: PropertyValues): Promise<void> {\n super.updated(changed);\n\n if (!changed.has('open') || this.syncingOpenSideEffects) {\n return;\n }\n\n const previousOpen = changed.get('open');\n\n if (previousOpen === this.open) {\n return;\n }\n\n // Initial connect with open=false — nothing to tear down.\n if (previousOpen === undefined && this.open === false) {\n return;\n }\n\n if (this.open) {\n await this.openPopover();\n } else {\n await this.closePopover('api');\n }\n }\n\n private onTriggerSlotChange(event: Event): void {\n const slot = event.target as HTMLSlotElement;\n const [trigger] = slot.assignedElements({ flatten: true }) as HTMLElement[];\n\n this.unbindTrigger(this.triggerElement);\n this.triggerElement = trigger ?? null;\n this.bindTrigger(this.triggerElement);\n }\n\n private bindTrigger(trigger: HTMLElement | null): void {\n if (!trigger) {\n return;\n }\n\n if (!trigger.id) {\n trigger.id = this.triggerId;\n }\n\n trigger.setAttribute('aria-haspopup', 'dialog');\n trigger.addEventListener('click', this.handleToggleClick);\n this.syncExpanded();\n }\n\n private unbindTrigger(trigger: HTMLElement | null): void {\n trigger?.removeEventListener('click', this.handleToggleClick);\n }\n\n private handleToggleClick = (event: Event): void => {\n event.preventDefault();\n event.stopPropagation();\n\n if (this.closing) {\n return;\n }\n\n // Flip `open` only — side effects run from `updated()` (same as dropdown-menu).\n this.open = !this.open;\n };\n\n private async openPopover(): Promise<void> {\n if (!this.getAnchor()) {\n return;\n }\n\n // Finish any in-flight exit before arming a new open.\n if (this.exitAnimationPromise) {\n await this.exitAnimationPromise;\n }\n\n // Already armed from a prior controlled/toggle open.\n if (this.dismissRegistered && this.open) {\n if (this.panelElement) {\n this.panelElement.hidden = false;\n }\n this.syncExpanded();\n return;\n }\n\n if (!this.dispatchEvent(new PkShowEvent())) {\n this.syncingOpenSideEffects = true;\n this.open = false;\n this.syncingOpenSideEffects = false;\n return;\n }\n\n this.syncingOpenSideEffects = true;\n this.open = true;\n this.syncingOpenSideEffects = false;\n this.closing = false;\n this.panelAnimated = false;\n\n if (this.panelElement) {\n this.panelElement.hidden = false;\n // Seed side before first paint so enter keyframes pick a direction.\n syncPopupPlacementAnimation(this.panelElement, this.placement);\n }\n\n this.syncExpanded();\n this.registerDismissHandlers();\n\n await this.updateComplete;\n const placement = await waitForPopupReposition(this.popupElement, this.placement);\n\n if (this.panelElement) {\n syncPopupPlacementAnimation(this.panelElement, placement);\n }\n\n // Flip data-open after placement so the shared enter animation can run.\n this.panelAnimated = 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 * @param immediate Skip exit animation (disconnect / forced teardown).\n */\n async closePopover(source: PkOverlaySource = 'unknown', immediate = false): Promise<void> {\n if (this.exitAnimationPromise) {\n return this.exitAnimationPromise;\n }\n\n if (!this.dismissRegistered && !this.closing && !this.open) {\n return;\n }\n\n const hideEvent = new PkHideEvent(source);\n\n if (!this.dispatchEvent(hideEvent)) {\n // Controlled close was cancelled — restore open and cancel exit arming.\n this.syncingOpenSideEffects = true;\n this.open = true;\n this.syncingOpenSideEffects = false;\n this.closing = false;\n this.panelAnimated = true;\n return;\n }\n\n this.unregisterDismissHandlers();\n this.closing = true;\n this.panelAnimated = false;\n\n if (this.open) {\n this.syncingOpenSideEffects = true;\n this.open = false;\n this.syncingOpenSideEffects = false;\n }\n\n const finishClose = async (): Promise<void> => {\n if (!immediate) {\n await this.updateComplete;\n await this.waitForExitAnimation();\n }\n\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.syncExpanded();\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 this.exitAnimationPromise = finishClose().finally(() => {\n this.exitAnimationPromise = null;\n });\n\n return this.exitAnimationPromise;\n }\n\n private waitForExitAnimation(): Promise<void> {\n const panel = this.panelElement;\n\n if (!panel) {\n return Promise.resolve();\n }\n\n return new Promise((resolve) => {\n let settled = false;\n\n const finish = (): void => {\n if (settled) {\n return;\n }\n\n settled = true;\n panel.removeEventListener('animationend', onAnimationEnd);\n window.clearTimeout(fallback);\n panel.classList.remove('closing');\n resolve();\n };\n\n const onAnimationEnd = (event: AnimationEvent): void => {\n if (event.target === panel && event.animationName.startsWith('pk-popup-content-out')) {\n finish();\n }\n };\n\n panel.classList.add('closing');\n panel.addEventListener('animationend', onAnimationEnd);\n const fallback = window.setTimeout(finish, 150);\n });\n }\n\n private getAnchor(): Element | string | null {\n if (this.anchor) {\n return this.anchor;\n }\n\n if (this.for) {\n return resolveElementById(this, this.for);\n }\n\n if (this.triggerElement) {\n return this.triggerElement;\n }\n\n return null;\n }\n\n private registerDismissHandlers(): void {\n if (this.dismissRegistered) {\n return;\n }\n\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 (this.isPointerInside(event) || this.closing) {\n return;\n }\n\n void this.closePopover('light-dismiss');\n };\n\n private isPointerInside(event: PointerEvent): boolean {\n return isPointerInsideOverlay(event, {\n host: this,\n anchor: this.getAnchorElement(),\n panel: this.panelElement,\n });\n };\n\n private onDocumentKeyDown = (event: KeyboardEvent): void => {\n if (event.key !== 'Escape' || !isTopDismissible(this) || this.closing) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n void this.closePopover('escape');\n };\n\n private getAnchorElement(): HTMLElement | null {\n if (this.anchor instanceof HTMLElement) {\n return this.anchor;\n }\n\n if (this.triggerElement) {\n return this.triggerElement;\n }\n\n if (this.for) {\n return resolveElementById(this, this.for);\n }\n\n return null;\n }\n\n private syncExpanded(): void {\n this.triggerElement?.setAttribute('aria-expanded', this.open ? 'true' : 'false');\n }\n\n override render() {\n const anchor = this.getAnchor();\n\n return html`\n <slot name=\"trigger\" @slotchange=${this.onTriggerSlotChange}></slot>\n <pk-popup\n .active=${this.open || this.closing}\n .anchor=${anchor ?? ''}\n .placement=${this.placement}\n .distance=${this.sideOffset}\n .arrow=${this.withArrow}\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 ?hidden=${!this.open && !this.closing}\n data-open=${this.panelAnimated && !this.closing ? '' : nothing}\n tabindex=${this.open ? '-1' : nothing}\n >\n <slot></slot>\n </div>\n </pk-popup>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-popover': PkPopover;\n }\n}\n"],"mappings":"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"}

package/dist/chunks/{pk-popup-B9AgBC2V.js → pk-popup-B65tZMQH.js} RENAMED Viewed

@@ -161,6 +161,7 @@ var PkPopup = class PkPopup extends PkElement {
 		this.arrow = false;
 		this.arrowPlacement = "anchor";
 		this.arrowPadding = 10;
+		this.autoSizePadding = 8;
 		this.anchorTracking = true;
 		this.hoverBridge = false;
 		this.anchorElement = null;
@@ -221,6 +222,22 @@ var PkPopup = class PkPopup extends PkElement {
 			boundary: scrollBoundary,
 			padding: this.shiftPadding
 		}));
+		if (this.autoSize) middleware.push(size({
+			boundary: scrollBoundary,
+			padding: this.autoSizePadding,
+			apply: ({ availableHeight, availableWidth }) => {
+				const constrainWidth = this.autoSize === "horizontal" || this.autoSize === "both";
+				const constrainHeight = this.autoSize === "vertical" || this.autoSize === "both";
+				if (constrainWidth) floatingElement.style.setProperty("--pk-popup-available-width", `${Math.max(0, Math.floor(availableWidth))}px`);
+				else floatingElement.style.removeProperty("--pk-popup-available-width");
+				if (constrainHeight) floatingElement.style.setProperty("--pk-popup-available-height", `${Math.max(0, Math.floor(availableHeight))}px`);
+				else floatingElement.style.removeProperty("--pk-popup-available-height");
+			}
+		}));
+		else {
+			floatingElement.style.removeProperty("--pk-popup-available-width");
+			floatingElement.style.removeProperty("--pk-popup-available-height");
+		}
 		if (this.arrow && arrowTarget) middleware.push(arrow({
 			element: arrowTarget,
 			padding: this.arrowPadding
@@ -520,6 +537,11 @@ __decorate([property({
 	type: Number
 })], PkPopup.prototype, "arrowPadding", void 0);
 __decorate([property()], PkPopup.prototype, "sync", void 0);
+__decorate([property({ attribute: "auto-size" })], PkPopup.prototype, "autoSize", void 0);
+__decorate([property({
+	attribute: "auto-size-padding",
+	type: Number
+})], PkPopup.prototype, "autoSizePadding", void 0);
 __decorate([property({
 	attribute: "anchor-tracking",
 	type: Boolean
@@ -534,4 +556,4 @@ PkPopup = __decorate([customElement("pk-popup")], PkPopup);
 //#endregion
 export { PkRepositionEvent as n, resolveElementById as r, PkPopup as t };
-//# sourceMappingURL=pk-popup-B9AgBC2V.js.map
+//# sourceMappingURL=pk-popup-B65tZMQH.js.map

package/dist/chunks/pk-popup-B65tZMQH.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"pk-popup-B65tZMQH.js","names":[],"sources":["../../src/internal/resolve-element-by-id.ts","../../src/events/pk-reposition.ts","../../src/components/popup/pk-popup.styles.ts","../../src/components/popup/pk-popup.ts"],"sourcesContent":["/** Resolve an element id from the same root as the host (shadow or document), then the document. */\nexport function resolveElementById(host: HTMLElement, id: string): HTMLElement | null {\n if (!id) {\n return null;\n }\n\n const root = host.getRootNode();\n\n if (root instanceof Document || root instanceof ShadowRoot) {\n const match = root.getElementById(id);\n\n if (match) {\n return match;\n }\n }\n\n return host.ownerDocument.getElementById(id);\n}\n","/** Emitted when a popup repositions — mirrors reposition semantics with pk naming. */\nexport class PkRepositionEvent extends Event {\n constructor() {\n super('pk-reposition', { bubbles: true, cancelable: false, composed: true });\n }\n}\n\ndeclare global {\n interface GlobalEventHandlersEventMap {\n 'pk-reposition': PkRepositionEvent;\n }\n}\n","import { css } from 'lit';\n\nexport const pkPopupStyles = css`\n @layer pk-component {\n :host {\n display: contents;\n }\n\n .popup {\n position: absolute;\n isolation: isolate;\n width: max-content;\n z-index: var(--pk-popup-z-index, 1000);\n /* Never transition coordinates — flip would animate the jump. */\n transition: none;\n\n /* Reset UA styles for [popover] — see pk-popup. */\n inset: unset;\n padding: unset;\n margin: unset;\n height: unset;\n color: unset;\n background: unset;\n border: unset;\n overflow: unset;\n }\n\n .popup-fixed {\n position: fixed;\n }\n\n .popup:not(.active) {\n display: none;\n }\n\n /* Prefer visibility over opacity so enter animations are not fighting a\n * 0→1 fade. Matches base-ui isPositioned / hide-until-placed.\n */\n .popup.active:not(.positioned) {\n visibility: hidden;\n pointer-events: none;\n }\n\n .popup.show {\n animation: pk-popup-surface-in 100ms ease-out;\n }\n\n .popup.hide {\n animation: pk-popup-surface-out 100ms ease-in forwards;\n }\n\n @keyframes pk-popup-surface-in {\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n\n to {\n opacity: 1;\n transform: scale(1);\n }\n }\n\n @keyframes pk-popup-surface-out {\n from {\n opacity: 1;\n transform: scale(1);\n }\n\n to {\n opacity: 0;\n transform: scale(0.95);\n }\n }\n\n .arrow {\n position: absolute;\n width: var(--pk-popup-arrow-size, 6px);\n height: var(--pk-popup-arrow-size, 6px);\n rotate: 45deg;\n background: var(--pk-popup-arrow-color, var(--pk-color-white));\n z-index: 1;\n }\n\n .hover-bridge {\n position: fixed;\n z-index: calc(var(--pk-popup-z-index, 1000) - 1);\n inset: 0;\n clip-path: polygon(\n var(--pk-hover-bridge-top-left-x, 0) var(--pk-hover-bridge-top-left-y, 0),\n var(--pk-hover-bridge-top-right-x, 0) var(--pk-hover-bridge-top-right-y, 0),\n var(--pk-hover-bridge-bottom-right-x, 0) var(--pk-hover-bridge-bottom-right-y, 0),\n var(--pk-hover-bridge-bottom-left-x, 0) var(--pk-hover-bridge-bottom-left-y, 0)\n );\n pointer-events: auto;\n }\n\n .hover-bridge:not(.hover-bridge-visible) {\n display: none;\n }\n }\n`;\n","import {\n arrow,\n autoUpdate,\n computePosition,\n flip,\n getOverflowAncestors,\n offset,\n platform,\n shift,\n size,\n type Placement,\n} from '@floating-ui/dom';\nimport { offsetParent } from 'composed-offset-position';\nimport { html, nothing } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query } from '../../decorators.js';\nimport type { PropertyValues } from 'lit';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { resolveElementById } from '../../internal/resolve-element-by-id.js';\nimport { PkRepositionEvent } from '../../events/pk-reposition.js';\nimport { computePopupTransformOrigin } from '../../utils/popup-placement-animation.js';\nimport { SUPPORTS_POPOVER } from '../../utils/supports-popover.js';\nimport { pkPopupStyles } from './pk-popup.styles.js';\n\nexport type PkPopupPlacement = Placement;\n\nexport type PkPopupVirtualElement = {\n getBoundingClientRect: () => DOMRect;\n contextElement?: Element;\n};\n\nfunction isVirtualElement(value: unknown): value is PkPopupVirtualElement {\n return (\n value !== null\n && typeof value === 'object'\n && 'getBoundingClientRect' in value\n );\n}\n\nfunction resolvePositionStrategy(\n positionMethod: 'fixed' | 'absolute' | undefined,\n): 'fixed' | 'absolute' {\n if (positionMethod) {\n return positionMethod;\n }\n\n // Top-layer popovers use absolute coords; legacy fallback uses fixed viewport coords.\n return SUPPORTS_POPOVER ? 'absolute' : 'fixed';\n}\n\nfunction resolveScrollBoundary(\n anchorElement: Element | PkPopupVirtualElement,\n boundary: 'viewport' | 'scroll',\n): Element[] | undefined {\n if (!SUPPORTS_POPOVER || isVirtualElement(anchorElement) || boundary !== 'scroll') {\n return undefined;\n }\n\n // Popover content leaves the anchor's overflow chain — pass ancestor bounds explicitly.\n return getOverflowAncestors(anchorElement).filter((node): node is Element => node instanceof Element);\n}\n\n/**\n * Anchors floating content to a reference element — popup pattern with pk naming.\n * When the Popover API is available, content stays in the component tree and is promoted to\n * the top layer via `popover=\"manual\"` + `showPopover()` (no DOM reparenting).\n *\n * @event pk-reposition - Emitted when the popup is repositioned.\n *\n * @slot - Popup content.\n * @slot anchor - Anchor element when it lives inside the popup host.\n *\n * @csspart popup - Floating container.\n * @csspart arrow - Arrow element.\n * @csspart hover-bridge - Invisible bridge between anchor and popup.\n */\n@customElement('pk-popup')\nexport class PkPopup extends PkElement {\n static override styles = pkPopupStyles;\n\n /** Element id, DOM reference, or virtual element to anchor against. */\n @property()\n anchor: Element | string | PkPopupVirtualElement = '';\n\n /** When true, positioning runs and the popup is shown. */\n @property({ type: Boolean, reflect: true })\n active = false;\n\n /**\n * Floating UI positioning strategy.\n * Defaults to `absolute` when the Popover API is supported, otherwise `fixed`.\n */\n @property({ attribute: 'position-method' })\n positionMethod?: 'fixed' | 'absolute';\n\n /** Bounding box for flip/shift collision — `scroll` uses overflow ancestors when popover is active. */\n @property({ reflect: true })\n boundary: 'viewport' | 'scroll' = 'viewport';\n\n @property({ reflect: true })\n placement: PkPopupPlacement = 'bottom-start';\n\n @property({ type: Number })\n distance = 4;\n\n @property({ type: Number })\n skidding = 0;\n\n @property({ type: Boolean })\n flip = true;\n\n @property({ attribute: 'flip-fallback-placements' })\n flipFallbackPlacements = '';\n\n @property({ attribute: 'flip-fallback-strategy' })\n flipFallbackStrategy: 'best-fit' | 'initial' = 'best-fit';\n\n @property({ attribute: 'flip-padding', type: Number })\n flipPadding = 8;\n\n @property({ type: Boolean })\n shift = true;\n\n @property({ attribute: 'shift-padding', type: Number })\n shiftPadding = 8;\n\n @property({ type: Boolean })\n arrow = false;\n\n @property({ attribute: 'arrow-placement' })\n arrowPlacement: 'start' | 'end' | 'center' | 'anchor' = 'anchor';\n\n @property({ attribute: 'arrow-padding', type: Number })\n arrowPadding = 10;\n\n @property()\n sync?: 'width' | 'height' | 'both';\n\n /** Constrain the popup to the available collision boundary on the selected axes. */\n @property({ attribute: 'auto-size' })\n autoSize?: 'horizontal' | 'vertical' | 'both';\n\n /** Space retained between an auto-sized popup and its collision boundary. */\n @property({ attribute: 'auto-size-padding', type: Number })\n autoSizePadding = 8;\n\n /** When false, the popup is positioned once and not tracked on scroll/resize. */\n @property({ attribute: 'anchor-tracking', type: Boolean })\n anchorTracking = true;\n\n @property({ attribute: 'hover-bridge', type: Boolean })\n hoverBridge = false;\n\n @query('.popup')\n private popupElement?: HTMLElement;\n\n @query('.arrow')\n private arrowElement?: HTMLElement;\n\n private anchorElement: Element | PkPopupVirtualElement | null = null;\n private cleanup?: () => void;\n /** True while waiting for layout-stable coords before first paint. */\n private settlingInitialPosition = false;\n private settleGeneration = 0;\n\n override disconnectedCallback(): void {\n void this.stop();\n super.disconnectedCallback();\n }\n\n override updated(changed: PropertyValues): void {\n super.updated(changed);\n\n if (changed.has('active')) {\n if (this.active) {\n this.resolveAnchor();\n this.start();\n } else {\n this.stop();\n }\n }\n\n if (changed.has('anchor')) {\n void this.handleAnchorChange();\n }\n\n if (this.active && !changed.has('active')) {\n this.reposition();\n }\n }\n\n /** Forces the popup to recalculate and reposition itself. */\n reposition(): void {\n if (this.settlingInitialPosition) {\n return;\n }\n\n void this.repositionAsync();\n }\n\n /**\n * Runs Floating UI once and applies coords. Does not reveal an unpositioned\n * popup — `settleInitialPosition()` owns the first paint.\n */\n private async repositionAsync(emitEvent = true): Promise<boolean> {\n const floatingElement = this.popupElement;\n const arrowTarget = this.arrow ? this.arrowElement : null;\n\n if (!this.active || !this.anchorElement || !floatingElement) {\n return false;\n }\n\n const scrollBoundary = resolveScrollBoundary(this.anchorElement, this.boundary);\n\n const middleware = [\n offset({ mainAxis: this.distance, crossAxis: this.skidding }),\n ];\n\n if (this.sync) {\n middleware.push(\n size({\n apply: ({ rects }) => {\n const syncWidth = this.sync === 'width' || this.sync === 'both';\n const syncHeight = this.sync === 'height' || this.sync === 'both';\n floatingElement.style.width = syncWidth ? `${rects.reference.width}px` : '';\n floatingElement.style.height = syncHeight ? `${rects.reference.height}px` : '';\n },\n }),\n );\n } else {\n floatingElement.style.width = '';\n floatingElement.style.height = '';\n }\n\n if (this.flip) {\n middleware.push(\n flip({\n boundary: scrollBoundary,\n fallbackPlacements: this.flipFallbackPlacements\n ? this.flipFallbackPlacements.split(' ').map((value) => value.trim()).filter(Boolean) as Placement[]\n : undefined,\n fallbackStrategy: this.flipFallbackStrategy === 'best-fit' ? 'bestFit' : 'initialPlacement',\n padding: this.flipPadding,\n }),\n );\n }\n\n if (this.shift) {\n middleware.push(\n shift({\n boundary: scrollBoundary,\n padding: this.shiftPadding,\n }),\n );\n }\n\n if (this.autoSize) {\n middleware.push(\n size({\n boundary: scrollBoundary,\n padding: this.autoSizePadding,\n apply: ({ availableHeight, availableWidth }) => {\n const constrainWidth = this.autoSize === 'horizontal' || this.autoSize === 'both';\n const constrainHeight = this.autoSize === 'vertical' || this.autoSize === 'both';\n\n if (constrainWidth) {\n floatingElement.style.setProperty(\n '--pk-popup-available-width',\n `${Math.max(0, Math.floor(availableWidth))}px`,\n );\n } else {\n floatingElement.style.removeProperty('--pk-popup-available-width');\n }\n\n if (constrainHeight) {\n floatingElement.style.setProperty(\n '--pk-popup-available-height',\n `${Math.max(0, Math.floor(availableHeight))}px`,\n );\n } else {\n floatingElement.style.removeProperty('--pk-popup-available-height');\n }\n },\n }),\n );\n } else {\n floatingElement.style.removeProperty('--pk-popup-available-width');\n floatingElement.style.removeProperty('--pk-popup-available-height');\n }\n\n if (this.arrow && arrowTarget) {\n middleware.push(\n arrow({\n element: arrowTarget,\n padding: this.arrowPadding,\n }),\n );\n }\n\n const strategy = resolvePositionStrategy(this.positionMethod);\n const useFixedFallback = strategy === 'fixed';\n\n floatingElement.classList.toggle('popup-fixed', useFixedFallback);\n\n const getOffsetParentFn = SUPPORTS_POPOVER\n ? (element: Element) => platform.getOffsetParent(element, offsetParent)\n : platform.getOffsetParent;\n\n const { x, y, middlewareData, placement } = await computePosition(this.anchorElement, floatingElement, {\n placement: this.placement,\n middleware,\n strategy,\n platform: {\n ...platform,\n getOffsetParent: getOffsetParentFn,\n },\n });\n\n if (!this.active || !floatingElement.isConnected) {\n return false;\n }\n\n const staticSide = { top: 'bottom', right: 'left', bottom: 'top', left: 'right' }[\n placement.split('-')[0] as 'top' | 'right' | 'bottom' | 'left'\n ]!;\n\n this.setAttribute('data-current-placement', placement);\n\n Object.assign(floatingElement.style, {\n left: `${x}px`,\n top: `${y}px`,\n ...(useFixedFallback ? { position: 'fixed' } : { position: '' }),\n });\n\n if (this.anchorElement) {\n // Use viewport rects for both sides — computePosition x/y can be offset-parent\n // relative, and mixing that with getBoundingClientRect shifts transform-origin\n // sideways (menu appears to slide in from the right).\n const referenceRect = this.anchorElement.getBoundingClientRect();\n const floatingRect = floatingElement.getBoundingClientRect();\n\n floatingElement.style.setProperty('--pk-anchor-width', `${referenceRect.width}px`);\n floatingElement.style.setProperty('--pk-anchor-height', `${referenceRect.height}px`);\n\n const transformOrigin = computePopupTransformOrigin(\n placement,\n referenceRect,\n floatingRect,\n this.distance,\n middlewareData.shift,\n );\n\n floatingElement.style.setProperty('--pk-transform-origin', transformOrigin);\n }\n\n if (this.arrow && arrowTarget) {\n const arrowX = middlewareData.arrow?.x;\n const arrowY = middlewareData.arrow?.y;\n let top = '';\n let right = '';\n let bottom = '';\n let left = '';\n\n if (this.arrowPlacement === 'start') {\n const value = typeof arrowX === 'number' ? `${this.arrowPadding}px` : '';\n top = typeof arrowY === 'number' ? `${this.arrowPadding}px` : '';\n left = value;\n } else if (this.arrowPlacement === 'end') {\n right = typeof arrowX === 'number' ? `${this.arrowPadding}px` : '';\n bottom = typeof arrowY === 'number' ? `${this.arrowPadding}px` : '';\n } else if (this.arrowPlacement === 'center') {\n left = typeof arrowX === 'number' ? '50%' : '';\n top = typeof arrowY === 'number' ? '50%' : '';\n } else {\n left = typeof arrowX === 'number' ? `${arrowX}px` : '';\n top = typeof arrowY === 'number' ? `${arrowY}px` : '';\n }\n\n Object.assign(arrowTarget.style, {\n top,\n right,\n bottom,\n left,\n transform: '',\n [staticSide]: 'calc(-1 * var(--pk-popup-arrow-size, 6px) / 2)',\n });\n }\n\n requestAnimationFrame(() => this.updateHoverBridge());\n\n if (emitEvent) {\n this.dispatchEvent(new PkRepositionEvent());\n }\n\n return true;\n }\n\n private frames(count: number): Promise<void> {\n return new Promise((resolve) => {\n const step = (remaining: number): void => {\n if (remaining <= 0) {\n resolve();\n return;\n }\n\n requestAnimationFrame(() => step(remaining - 1));\n };\n\n step(count);\n });\n }\n\n /**\n * Hide → layout → measure → confirm flip → reveal.\n * A single computePosition often runs before slotted content has height, so flip\n * picks the preferred side; autoUpdate then jumps — that was the visible flash.\n */\n private async settleInitialPosition(): Promise<void> {\n const generation = ++this.settleGeneration;\n const floatingElement = this.popupElement;\n\n if (!floatingElement) {\n this.settlingInitialPosition = false;\n return;\n }\n\n // Two frames: display:none→block + slotted panel unhide need a layout pass.\n await this.frames(2);\n\n if (!this.active || generation !== this.settleGeneration) {\n return;\n }\n\n // Quiet passes — consumers waiting on pk-reposition should see the settled place.\n await this.repositionAsync(false);\n\n // Confirm after the first coords are applied (size middleware / content height).\n void floatingElement.offsetHeight;\n await this.frames(1);\n\n if (!this.active || generation !== this.settleGeneration) {\n return;\n }\n\n await this.repositionAsync(false);\n\n if (!this.active || generation !== this.settleGeneration) {\n return;\n }\n\n floatingElement.classList.add('positioned');\n this.settlingInitialPosition = false;\n requestAnimationFrame(() => this.updateHoverBridge());\n this.dispatchEvent(new PkRepositionEvent());\n }\n\n private resolveAnchor(): void {\n if (typeof this.anchor === 'string' && this.anchor) {\n this.anchorElement = resolveElementById(this, this.anchor);\n return;\n }\n\n if (this.anchor instanceof Element || isVirtualElement(this.anchor)) {\n this.anchorElement = this.anchor;\n return;\n }\n\n let slotted = this.querySelector('[slot=\"anchor\"]');\n\n if (slotted instanceof HTMLSlotElement) {\n slotted = slotted.assignedElements({ flatten: true })[0] ?? null;\n }\n\n this.anchorElement = slotted;\n }\n\n private async handleAnchorChange(): Promise<void> {\n await this.stop();\n this.resolveAnchor();\n\n if (this.anchorElement && this.active) {\n this.start();\n }\n }\n\n /** When false, skip popover top layer (e.g. menu/select use fixed coords to simplify modal handoff). */\n private usesPopoverTopLayer(): boolean {\n return SUPPORTS_POPOVER && this.positionMethod !== 'fixed';\n }\n\n /** `stop()` — sync hidePopover + cleanup autoUpdate. */\n stop(): Promise<void> {\n return new Promise((resolve) => {\n const popup = this.popupElement;\n this.settleGeneration += 1;\n this.settlingInitialPosition = false;\n popup?.classList.remove('positioned');\n\n if (this.usesPopoverTopLayer()) {\n popup?.hidePopover?.();\n }\n\n if (this.cleanup) {\n this.cleanup();\n this.cleanup = undefined;\n popup?.style.removeProperty('--pk-transform-origin');\n requestAnimationFrame(() => resolve());\n } else {\n resolve();\n }\n\n // Always clear — even when autoUpdate never started — so the next open\n // cannot short-circuit waitForPopupReposition on a stale placement.\n this.removeAttribute('data-current-placement');\n });\n }\n\n /** @deprecated Prefer `stop()` — kept for select/combobox handoff call sites. */\n releasePositioning(): void {\n if (this.cleanup) {\n this.cleanup();\n this.cleanup = undefined;\n }\n }\n\n /** @deprecated Prefer `stop()`. */\n async awaitHidden(): Promise<void> {\n await this.stop();\n }\n\n private start(): void {\n if (!this.anchorElement || !this.active || !this.isConnected || !this.popupElement) {\n return;\n }\n\n // Stay invisible until settleInitialPosition confirms flip with real content size.\n this.popupElement.classList.remove('positioned');\n this.settlingInitialPosition = true;\n\n if (this.usesPopoverTopLayer()) {\n this.popupElement.showPopover?.();\n }\n\n if (this.anchorTracking) {\n this.cleanup = autoUpdate(this.anchorElement, this.popupElement, () => {\n // Ignore the sync autoUpdate kick during settle — it races layout.\n if (this.settlingInitialPosition) {\n return;\n }\n\n this.reposition();\n });\n }\n\n void this.settleInitialPosition();\n }\n\n /** Slotted popup content root (e.g. `.panel`) — keeps content in-tree. */\n getContentElement(): HTMLElement | null {\n const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n const assigned = slot?.assignedElements({ flatten: true }) ?? [];\n const slotted = assigned.find((node): node is HTMLElement => node instanceof HTMLElement);\n\n if (slotted) {\n return slotted;\n }\n\n for (const node of this.childNodes) {\n if (node instanceof HTMLElement && node.getAttribute('slot') !== 'anchor') {\n return node;\n }\n }\n\n return null;\n }\n\n private updateHoverBridge(): void {\n const floatingElement = this.popupElement;\n\n if (!this.hoverBridge || !this.anchorElement || !floatingElement) {\n return;\n }\n\n const anchorRect = this.anchorElement.getBoundingClientRect();\n const popupRect = floatingElement.getBoundingClientRect();\n const isVertical = this.placement.includes('top') || this.placement.includes('bottom');\n\n let topLeftX = 0;\n let topLeftY = 0;\n let topRightX = 0;\n let topRightY = 0;\n let bottomLeftX = 0;\n let bottomLeftY = 0;\n let bottomRightX = 0;\n let bottomRightY = 0;\n\n if (isVertical) {\n if (anchorRect.top < popupRect.top) {\n topLeftX = anchorRect.left;\n topLeftY = anchorRect.bottom;\n topRightX = anchorRect.right;\n topRightY = anchorRect.bottom;\n bottomLeftX = popupRect.left;\n bottomLeftY = popupRect.top;\n bottomRightX = popupRect.right;\n bottomRightY = popupRect.top;\n } else {\n topLeftX = popupRect.left;\n topLeftY = popupRect.bottom;\n topRightX = popupRect.right;\n topRightY = popupRect.bottom;\n bottomLeftX = anchorRect.left;\n bottomLeftY = anchorRect.top;\n bottomRightX = anchorRect.right;\n bottomRightY = anchorRect.top;\n }\n } else if (anchorRect.left < popupRect.left) {\n topLeftX = anchorRect.right;\n topLeftY = anchorRect.top;\n topRightX = popupRect.left;\n topRightY = popupRect.top;\n bottomLeftX = anchorRect.right;\n bottomLeftY = anchorRect.bottom;\n bottomRightX = popupRect.left;\n bottomRightY = popupRect.bottom;\n } else {\n topLeftX = popupRect.right;\n topLeftY = popupRect.top;\n topRightX = anchorRect.left;\n topRightY = anchorRect.top;\n bottomLeftX = popupRect.right;\n bottomLeftY = popupRect.bottom;\n bottomRightX = anchorRect.left;\n bottomRightY = anchorRect.bottom;\n }\n\n this.style.setProperty('--pk-hover-bridge-top-left-x', `${topLeftX}px`);\n this.style.setProperty('--pk-hover-bridge-top-left-y', `${topLeftY}px`);\n this.style.setProperty('--pk-hover-bridge-top-right-x', `${topRightX}px`);\n this.style.setProperty('--pk-hover-bridge-top-right-y', `${topRightY}px`);\n this.style.setProperty('--pk-hover-bridge-bottom-left-x', `${bottomLeftX}px`);\n this.style.setProperty('--pk-hover-bridge-bottom-left-y', `${bottomLeftY}px`);\n this.style.setProperty('--pk-hover-bridge-bottom-right-x', `${bottomRightX}px`);\n this.style.setProperty('--pk-hover-bridge-bottom-right-y', `${bottomRightY}px`);\n }\n\n override render() {\n const useFixedFallback = !SUPPORTS_POPOVER || this.positionMethod === 'fixed';\n const usePopoverTopLayer = this.usesPopoverTopLayer();\n\n return html`\n <slot name=\"anchor\" @slotchange=${() => { void this.handleAnchorChange(); }}></slot>\n ${this.hoverBridge ? html`\n <div\n part=\"hover-bridge\"\n class=${classMap({\n 'hover-bridge': true,\n 'hover-bridge-visible': this.active,\n })}\n aria-hidden=\"true\"\n ></div>\n ` : nothing}\n <div\n popover=${usePopoverTopLayer ? 'manual' : nothing}\n part=\"popup\"\n class=${classMap({\n popup: true,\n active: this.active,\n 'popup-fixed': useFixedFallback,\n })}\n >\n ${this.arrow ? html`<div part=\"arrow\" class=\"arrow\"></div>` : nothing}\n <slot></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-popup': PkPopup;\n }\n}\n"],"mappings":";;;;;;;;;AACA,SAAgB,mBAAmB,MAAmB,IAAgC;AAClF,KAAI,CAAC,GACD,QAAO;CAGX,MAAM,OAAO,KAAK,aAAa;AAE/B,KAAI,gBAAgB,YAAY,gBAAgB,YAAY;EACxD,MAAM,QAAQ,KAAK,eAAe,GAAG;AAErC,MAAI,MACA,QAAO;;AAIf,QAAO,KAAK,cAAc,eAAe,GAAG;;;;;ACfhD,IAAa,oBAAb,cAAuC,MAAM;CACzC,cAAc;AACV,QAAM,iBAAiB;GAAE,SAAS;GAAM,YAAY;GAAO,UAAU;GAAM,CAAC;;;;;ACDpF,IAAa,gBAAgB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC8BhC,SAAS,iBAAiB,OAAgD;AACtE,QACI,UAAU,QACP,OAAO,UAAU,YACjB,2BAA2B;;AAItC,SAAS,wBACL,gBACoB;AACpB,KAAI,eACA,QAAO;AAIX,QAAO,mBAAmB,aAAa;;AAG3C,SAAS,sBACL,eACA,UACqB;AACrB,KAAI,CAAC,oBAAoB,iBAAiB,cAAc,IAAI,aAAa,SACrE;AAIJ,QAAO,qBAAqB,cAAc,CAAC,QAAQ,SAA0B,gBAAgB,QAAQ;;AAkBlG,IAAA,UAAA,MAAM,gBAAgB,UAAU;;;gBAKgB;gBAI1C;kBAWyB;mBAGJ;kBAGnB;kBAGA;cAGJ;gCAGkB;8BAGsB;qBAGjC;eAGN;sBAGO;eAGP;wBAGgD;sBAGzC;yBAWG;wBAID;qBAGH;uBAQkD;iCAG9B;0BACP;;;gBArFF;;CAuFzB,uBAAsC;AAC7B,OAAK,MAAM;AAChB,QAAM,sBAAsB;;CAGhC,QAAiB,SAA+B;AAC5C,QAAM,QAAQ,QAAQ;AAEtB,MAAI,QAAQ,IAAI,SAAS,CACrB,KAAI,KAAK,QAAQ;AACb,QAAK,eAAe;AACpB,QAAK,OAAO;QAEZ,MAAK,MAAM;AAInB,MAAI,QAAQ,IAAI,SAAS,CAChB,MAAK,oBAAoB;AAGlC,MAAI,KAAK,UAAU,CAAC,QAAQ,IAAI,SAAS,CACrC,MAAK,YAAY;;;CAKzB,aAAmB;AACf,MAAI,KAAK,wBACL;AAGC,OAAK,iBAAiB;;;;;;CAO/B,MAAc,gBAAgB,YAAY,MAAwB;EAC9D,MAAM,kBAAkB,KAAK;EAC7B,MAAM,cAAc,KAAK,QAAQ,KAAK,eAAe;AAErD,MAAI,CAAC,KAAK,UAAU,CAAC,KAAK,iBAAiB,CAAC,gBACxC,QAAO;EAGX,MAAM,iBAAiB,sBAAsB,KAAK,eAAe,KAAK,SAAS;EAE/E,MAAM,aAAa,CACf,OAAO;GAAE,UAAU,KAAK;GAAU,WAAW,KAAK;GAAU,CAAC,CAChE;AAED,MAAI,KAAK,KACL,YAAW,KACP,KAAK,EACD,QAAQ,EAAE,YAAY;GAClB,MAAM,YAAY,KAAK,SAAS,WAAW,KAAK,SAAS;GACzD,MAAM,aAAa,KAAK,SAAS,YAAY,KAAK,SAAS;AAC3D,mBAAgB,MAAM,QAAQ,YAAY,GAAG,MAAM,UAAU,MAAM,MAAM;AACzE,mBAAgB,MAAM,SAAS,aAAa,GAAG,MAAM,UAAU,OAAO,MAAM;KAEnF,CAAC,CACL;OACE;AACH,mBAAgB,MAAM,QAAQ;AAC9B,mBAAgB,MAAM,SAAS;;AAGnC,MAAI,KAAK,KACL,YAAW,KACP,KAAK;GACD,UAAU;GACV,oBAAoB,KAAK,yBACnB,KAAK,uBAAuB,MAAM,IAAI,CAAC,KAAK,UAAU,MAAM,MAAM,CAAC,CAAC,OAAO,QAAQ,GACnF,KAAA;GACN,kBAAkB,KAAK,yBAAyB,aAAa,YAAY;GACzE,SAAS,KAAK;GACjB,CAAC,CACL;AAGL,MAAI,KAAK,MACL,YAAW,KACP,MAAM;GACF,UAAU;GACV,SAAS,KAAK;GACjB,CAAC,CACL;AAGL,MAAI,KAAK,SACL,YAAW,KACP,KAAK;GACD,UAAU;GACV,SAAS,KAAK;GACd,QAAQ,EAAE,iBAAiB,qBAAqB;IAC5C,MAAM,iBAAiB,KAAK,aAAa,gBAAgB,KAAK,aAAa;IAC3E,MAAM,kBAAkB,KAAK,aAAa,cAAc,KAAK,aAAa;AAE1E,QAAI,eACA,iBAAgB,MAAM,YAClB,8BACA,GAAG,KAAK,IAAI,GAAG,KAAK,MAAM,eAAe,CAAC,CAAC,IAC9C;QAED,iBAAgB,MAAM,eAAe,6BAA6B;AAGtE,QAAI,gBACA,iBAAgB,MAAM,YAClB,+BACA,GAAG,KAAK,IAAI,GAAG,KAAK,MAAM,gBAAgB,CAAC,CAAC,IAC/C;QAED,iBAAgB,MAAM,eAAe,8BAA8B;;GAG9E,CAAC,CACL;OACE;AACH,mBAAgB,MAAM,eAAe,6BAA6B;AAClE,mBAAgB,MAAM,eAAe,8BAA8B;;AAGvE,MAAI,KAAK,SAAS,YACd,YAAW,KACP,MAAM;GACF,SAAS;GACT,SAAS,KAAK;GACjB,CAAC,CACL;EAGL,MAAM,WAAW,wBAAwB,KAAK,eAAe;EAC7D,MAAM,mBAAmB,aAAa;AAEtC,kBAAgB,UAAU,OAAO,eAAe,iBAAiB;EAEjE,MAAM,oBAAoB,oBACnB,YAAqB,SAAS,gBAAgB,SAAS,aAAa,GACrE,SAAS;EAEf,MAAM,EAAE,GAAG,GAAG,gBAAgB,cAAc,MAAM,gBAAgB,KAAK,eAAe,iBAAiB;GACnG,WAAW,KAAK;GAChB;GACA;GACA,UAAU;IACN,GAAG;IACH,iBAAiB;IACpB;GACJ,CAAC;AAEF,MAAI,CAAC,KAAK,UAAU,CAAC,gBAAgB,YACjC,QAAO;EAGX,MAAM,aAAa;GAAE,KAAK;GAAU,OAAO;GAAQ,QAAQ;GAAO,MAAM;GAAS,CAC7E,UAAU,MAAM,IAAI,CAAC;AAGzB,OAAK,aAAa,0BAA0B,UAAU;AAEtD,SAAO,OAAO,gBAAgB,OAAO;GACjC,MAAM,GAAG,EAAE;GACX,KAAK,GAAG,EAAE;GACV,GAAI,mBAAmB,EAAE,UAAU,SAAS,GAAG,EAAE,UAAU,IAAI;GAClE,CAAC;AAEF,MAAI,KAAK,eAAe;GAIpB,MAAM,gBAAgB,KAAK,cAAc,uBAAuB;GAChE,MAAM,eAAe,gBAAgB,uBAAuB;AAE5D,mBAAgB,MAAM,YAAY,qBAAqB,GAAG,cAAc,MAAM,IAAI;AAClF,mBAAgB,MAAM,YAAY,sBAAsB,GAAG,cAAc,OAAO,IAAI;GAEpF,MAAM,kBAAkB,4BACpB,WACA,eACA,cACA,KAAK,UACL,eAAe,MAClB;AAED,mBAAgB,MAAM,YAAY,yBAAyB,gBAAgB;;AAG/E,MAAI,KAAK,SAAS,aAAa;GAC3B,MAAM,SAAS,eAAe,OAAO;GACrC,MAAM,SAAS,eAAe,OAAO;GACrC,IAAI,MAAM;GACV,IAAI,QAAQ;GACZ,IAAI,SAAS;GACb,IAAI,OAAO;AAEX,OAAI,KAAK,mBAAmB,SAAS;IACjC,MAAM,QAAQ,OAAO,WAAW,WAAW,GAAG,KAAK,aAAa,MAAM;AACtE,UAAM,OAAO,WAAW,WAAW,GAAG,KAAK,aAAa,MAAM;AAC9D,WAAO;cACA,KAAK,mBAAmB,OAAO;AACtC,YAAQ,OAAO,WAAW,WAAW,GAAG,KAAK,aAAa,MAAM;AAChE,aAAS,OAAO,WAAW,WAAW,GAAG,KAAK,aAAa,MAAM;cAC1D,KAAK,mBAAmB,UAAU;AACzC,WAAO,OAAO,WAAW,WAAW,QAAQ;AAC5C,UAAM,OAAO,WAAW,WAAW,QAAQ;UACxC;AACH,WAAO,OAAO,WAAW,WAAW,GAAG,OAAO,MAAM;AACpD,UAAM,OAAO,WAAW,WAAW,GAAG,OAAO,MAAM;;AAGvD,UAAO,OAAO,YAAY,OAAO;IAC7B;IACA;IACA;IACA;IACA,WAAW;KACV,aAAa;IACjB,CAAC;;AAGN,8BAA4B,KAAK,mBAAmB,CAAC;AAErD,MAAI,UACA,MAAK,cAAc,IAAI,mBAAmB,CAAC;AAG/C,SAAO;;CAGX,OAAe,OAA8B;AACzC,SAAO,IAAI,SAAS,YAAY;GAC5B,MAAM,QAAQ,cAA4B;AACtC,QAAI,aAAa,GAAG;AAChB,cAAS;AACT;;AAGJ,gCAA4B,KAAK,YAAY,EAAE,CAAC;;AAGpD,QAAK,MAAM;IACb;;;;;;;CAQN,MAAc,wBAAuC;EACjD,MAAM,aAAa,EAAE,KAAK;EAC1B,MAAM,kBAAkB,KAAK;AAE7B,MAAI,CAAC,iBAAiB;AAClB,QAAK,0BAA0B;AAC/B;;AAIJ,QAAM,KAAK,OAAO,EAAE;AAEpB,MAAI,CAAC,KAAK,UAAU,eAAe,KAAK,iBACpC;AAIJ,QAAM,KAAK,gBAAgB,MAAM;AAG5B,kBAAgB;AACrB,QAAM,KAAK,OAAO,EAAE;AAEpB,MAAI,CAAC,KAAK,UAAU,eAAe,KAAK,iBACpC;AAGJ,QAAM,KAAK,gBAAgB,MAAM;AAEjC,MAAI,CAAC,KAAK,UAAU,eAAe,KAAK,iBACpC;AAGJ,kBAAgB,UAAU,IAAI,aAAa;AAC3C,OAAK,0BAA0B;AAC/B,8BAA4B,KAAK,mBAAmB,CAAC;AACrD,OAAK,cAAc,IAAI,mBAAmB,CAAC;;CAG/C,gBAA8B;AAC1B,MAAI,OAAO,KAAK,WAAW,YAAY,KAAK,QAAQ;AAChD,QAAK,gBAAgB,mBAAmB,MAAM,KAAK,OAAO;AAC1D;;AAGJ,MAAI,KAAK,kBAAkB,WAAW,iBAAiB,KAAK,OAAO,EAAE;AACjE,QAAK,gBAAgB,KAAK;AAC1B;;EAGJ,IAAI,UAAU,KAAK,cAAc,oBAAkB;AAEnD,MAAI,mBAAmB,gBACnB,WAAU,QAAQ,iBAAiB,EAAE,SAAS,MAAM,CAAC,CAAC,MAAM;AAGhE,OAAK,gBAAgB;;CAGzB,MAAc,qBAAoC;AAC9C,QAAM,KAAK,MAAM;AACjB,OAAK,eAAe;AAEpB,MAAI,KAAK,iBAAiB,KAAK,OAC3B,MAAK,OAAO;;;CAKpB,sBAAuC;AACnC,SAAO,oBAAoB,KAAK,mBAAmB;;;CAIvD,OAAsB;AAClB,SAAO,IAAI,SAAS,YAAY;GAC5B,MAAM,QAAQ,KAAK;AACnB,QAAK,oBAAoB;AACzB,QAAK,0BAA0B;AAC/B,UAAO,UAAU,OAAO,aAAa;AAErC,OAAI,KAAK,qBAAqB,CAC1B,QAAO,eAAe;AAG1B,OAAI,KAAK,SAAS;AACd,SAAK,SAAS;AACd,SAAK,UAAU,KAAA;AACf,WAAO,MAAM,eAAe,wBAAwB;AACpD,gCAA4B,SAAS,CAAC;SAEtC,UAAS;AAKb,QAAK,gBAAgB,yBAAyB;IAChD;;;CAIN,qBAA2B;AACvB,MAAI,KAAK,SAAS;AACd,QAAK,SAAS;AACd,QAAK,UAAU,KAAA;;;;CAKvB,MAAM,cAA6B;AAC/B,QAAM,KAAK,MAAM;;CAGrB,QAAsB;AAClB,MAAI,CAAC,KAAK,iBAAiB,CAAC,KAAK,UAAU,CAAC,KAAK,eAAe,CAAC,KAAK,aAClE;AAIJ,OAAK,aAAa,UAAU,OAAO,aAAa;AAChD,OAAK,0BAA0B;AAE/B,MAAI,KAAK,qBAAqB,CAC1B,MAAK,aAAa,eAAe;AAGrC,MAAI,KAAK,eACL,MAAK,UAAU,WAAW,KAAK,eAAe,KAAK,oBAAoB;AAEnE,OAAI,KAAK,wBACL;AAGJ,QAAK,YAAY;IACnB;AAGD,OAAK,uBAAuB;;;CAIrC,oBAAwC;EAGpC,MAAM,YAFO,KAAK,YAAY,cAA+B,mBAAmB,GACzD,iBAAiB,EAAE,SAAS,MAAM,CAAC,IAAI,EAAE,EACvC,MAAM,SAA8B,gBAAgB,YAAY;AAEzF,MAAI,QACA,QAAO;AAGX,OAAK,MAAM,QAAQ,KAAK,WACpB,KAAI,gBAAgB,eAAe,KAAK,aAAa,OAAO,KAAK,SAC7D,QAAO;AAIf,SAAO;;CAGX,oBAAkC;EAC9B,MAAM,kBAAkB,KAAK;AAE7B,MAAI,CAAC,KAAK,eAAe,CAAC,KAAK,iBAAiB,CAAC,gBAC7C;EAGJ,MAAM,aAAa,KAAK,cAAc,uBAAuB;EAC7D,MAAM,YAAY,gBAAgB,uBAAuB;EACzD,MAAM,aAAa,KAAK,UAAU,SAAS,MAAM,IAAI,KAAK,UAAU,SAAS,SAAS;EAEtF,IAAI,WAAW;EACf,IAAI,WAAW;EACf,IAAI,YAAY;EAChB,IAAI,YAAY;EAChB,IAAI,cAAc;EAClB,IAAI,cAAc;EAClB,IAAI,eAAe;EACnB,IAAI,eAAe;AAEnB,MAAI,WACA,KAAI,WAAW,MAAM,UAAU,KAAK;AAChC,cAAW,WAAW;AACtB,cAAW,WAAW;AACtB,eAAY,WAAW;AACvB,eAAY,WAAW;AACvB,iBAAc,UAAU;AACxB,iBAAc,UAAU;AACxB,kBAAe,UAAU;AACzB,kBAAe,UAAU;SACtB;AACH,cAAW,UAAU;AACrB,cAAW,UAAU;AACrB,eAAY,UAAU;AACtB,eAAY,UAAU;AACtB,iBAAc,WAAW;AACzB,iBAAc,WAAW;AACzB,kBAAe,WAAW;AAC1B,kBAAe,WAAW;;WAEvB,WAAW,OAAO,UAAU,MAAM;AACzC,cAAW,WAAW;AACtB,cAAW,WAAW;AACtB,eAAY,UAAU;AACtB,eAAY,UAAU;AACtB,iBAAc,WAAW;AACzB,iBAAc,WAAW;AACzB,kBAAe,UAAU;AACzB,kBAAe,UAAU;SACtB;AACH,cAAW,UAAU;AACrB,cAAW,UAAU;AACrB,eAAY,WAAW;AACvB,eAAY,WAAW;AACvB,iBAAc,UAAU;AACxB,iBAAc,UAAU;AACxB,kBAAe,WAAW;AAC1B,kBAAe,WAAW;;AAG9B,OAAK,MAAM,YAAY,gCAAgC,GAAG,SAAS,IAAI;AACvE,OAAK,MAAM,YAAY,gCAAgC,GAAG,SAAS,IAAI;AACvE,OAAK,MAAM,YAAY,iCAAiC,GAAG,UAAU,IAAI;AACzE,OAAK,MAAM,YAAY,iCAAiC,GAAG,UAAU,IAAI;AACzE,OAAK,MAAM,YAAY,mCAAmC,GAAG,YAAY,IAAI;AAC7E,OAAK,MAAM,YAAY,mCAAmC,GAAG,YAAY,IAAI;AAC7E,OAAK,MAAM,YAAY,oCAAoC,GAAG,aAAa,IAAI;AAC/E,OAAK,MAAM,YAAY,oCAAoC,GAAG,aAAa,IAAI;;CAGnF,SAAkB;EACd,MAAM,mBAAmB,CAAC,oBAAoB,KAAK,mBAAmB;EACtE,MAAM,qBAAqB,KAAK,qBAAqB;AAErD,SAAO,IAAI;oDACiC;AAAO,QAAK,oBAAoB;IAAI;cAC1E,KAAK,cAAc,IAAI;;;4BAGT,SAAS;GACb,gBAAgB;GAChB,wBAAwB,KAAK;GAChC,CAAC,CAAC;;;gBAGP,QAAQ;;0BAEE,qBAAqB,WAAW,QAAQ;;wBAE1C,SAAS;GACb,OAAO;GACP,QAAQ,KAAK;GACb,eAAe;GAClB,CAAC,CAAC;;kBAED,KAAK,QAAQ,IAAI,2CAA2C,QAAQ;;;;;;YA9kBjF,UAAU,CAAA,EAAA,QAAA,WAAA,UAAA,KAAA,EAAA;YAIV,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,QAAA,WAAA,UAAA,KAAA,EAAA;YAO1C,SAAS,EAAE,WAAW,mBAAmB,CAAC,CAAA,EAAA,QAAA,WAAA,kBAAA,KAAA,EAAA;YAI1C,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,QAAA,WAAA,YAAA,KAAA,EAAA;YAG3B,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,QAAA,WAAA,aAAA,KAAA,EAAA;YAG3B,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,QAAA,WAAA,YAAA,KAAA,EAAA;YAG1B,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,QAAA,WAAA,YAAA,KAAA,EAAA;YAG1B,SAAS,EAAE,MAAM,SAAS,CAAC,CAAA,EAAA,QAAA,WAAA,QAAA,KAAA,EAAA;YAG3B,SAAS,EAAE,WAAW,4BAA4B,CAAC,CAAA,EAAA,QAAA,WAAA,0BAAA,KAAA,EAAA;YAGnD,SAAS,EAAE,WAAW,0BAA0B,CAAC,CAAA,EAAA,QAAA,WAAA,wBAAA,KAAA,EAAA;YAGjD,SAAS;CAAE,WAAW;CAAgB,MAAM;CAAQ,CAAC,CAAA,EAAA,QAAA,WAAA,eAAA,KAAA,EAAA;YAGrD,SAAS,EAAE,MAAM,SAAS,CAAC,CAAA,EAAA,QAAA,WAAA,SAAA,KAAA,EAAA;YAG3B,SAAS;CAAE,WAAW;CAAiB,MAAM;CAAQ,CAAC,CAAA,EAAA,QAAA,WAAA,gBAAA,KAAA,EAAA;YAGtD,SAAS,EAAE,MAAM,SAAS,CAAC,CAAA,EAAA,QAAA,WAAA,SAAA,KAAA,EAAA;YAG3B,SAAS,EAAE,WAAW,mBAAmB,CAAC,CAAA,EAAA,QAAA,WAAA,kBAAA,KAAA,EAAA;YAG1C,SAAS;CAAE,WAAW;CAAiB,MAAM;CAAQ,CAAC,CAAA,EAAA,QAAA,WAAA,gBAAA,KAAA,EAAA;YAGtD,UAAU,CAAA,EAAA,QAAA,WAAA,QAAA,KAAA,EAAA;YAIV,SAAS,EAAE,WAAW,aAAa,CAAC,CAAA,EAAA,QAAA,WAAA,YAAA,KAAA,EAAA;YAIpC,SAAS;CAAE,WAAW;CAAqB,MAAM;CAAQ,CAAC,CAAA,EAAA,QAAA,WAAA,mBAAA,KAAA,EAAA;YAI1D,SAAS;CAAE,WAAW;CAAmB,MAAM;CAAS,CAAC,CAAA,EAAA,QAAA,WAAA,kBAAA,KAAA,EAAA;YAGzD,SAAS;CAAE,WAAW;CAAgB,MAAM;CAAS,CAAC,CAAA,EAAA,QAAA,WAAA,eAAA,KAAA,EAAA;YAGtD,MAAM,SAAS,CAAA,EAAA,QAAA,WAAA,gBAAA,KAAA,EAAA;YAGf,MAAM,SAAS,CAAA,EAAA,QAAA,WAAA,gBAAA,KAAA,EAAA;sBAhFnB,cAAc,WAAW,CAAA,EAAA,QAAA"}

package/dist/chunks/{pk-radio-BK4D2Htu.js → pk-radio-B5XkMHy3.js} RENAMED Viewed

@@ -229,4 +229,4 @@ PkRadio = __decorate([customElement("pk-radio")], PkRadio);
 //#endregion
 export { PkRadio as t };
-//# sourceMappingURL=pk-radio-BK4D2Htu.js.map
+//# sourceMappingURL=pk-radio-B5XkMHy3.js.map

package/dist/chunks/{pk-radio-BK4D2Htu.js.map → pk-radio-B5XkMHy3.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pk-radio-~~BK4D2Htu~~.js","names":[],"sources":["../../src/components/radio-group/pk-radio.styles.ts","../../src/components/radio-group/pk-radio.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkRadioStyles = css`\n @layer pk-component {\n :host {\n display: inline-flex;\n vertical-align: middle;\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 .item {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n position: relative;\n margin: 0;\n }\n\n :host([disabled]) .item {\n cursor: not-allowed;\n }\n\n .item--with-label {\n gap: 0.5rem;\n }\n\n .control {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 1rem;\n height: 1rem;\n border: 1px solid var(--pk-color-slate-400);\n border-radius: 9999px;\n background: var(--pk-color-white);\n transition: border-color 0.12s ease, box-shadow 0.12s ease;\n }\n\n .item:focus-visible .control,\n :host([data-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 border-color: var(--pk-color-rose-600);\n }\n\n :host([invalid]:focus-visible) .control,\n :host([invalid][data-focus-visible]) .control {\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 :host([checked]) .control {\n background: var(--pk-color-gray-50);\n color: #1f2933;\n }\n\n .indicator {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n color: currentcolor;\n }\n\n .indicator-dot {\n width: 0.5rem;\n height: 0.5rem;\n border-radius: 9999px;\n background: currentcolor;\n transition: opacity 0.12s ease, transform 0.12s ease;\n }\n\n :host(:not([checked])) .indicator-dot {\n opacity: 0;\n transform: scale(0);\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 .label {\n line-height: var(--pk-line-height);\n /* Match checkbox / form-control labels (gray-700). /\n color: var(--pk-color-gray-700);\n }\n\n .label.is-empty {\n display: none;\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 { PkElement } from '../../base/pk-element.js';\nimport { pkRadioStyles } from './pk-radio.styles.js';\n\n/\n Radio button — use inside `pk-radio-group`.\n \n @slot - Visible label text\n \n @csspart base - Root label element\n * @csspart input - Native radio input\n * @csspart control - Visual radio circle\n * @csspart indicator - Indicator container\n /\n@customElement('pk-radio')\nexport class PkRadio extends PkElement {\n static override styles = pkRadioStyles;\n\n @property()\n value = '';\n\n @property({ type: Boolean, reflect: true })\n checked = false;\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n @property({ type: Boolean, reflect: true })\n invalid = false;\n\n @property({ type: Boolean, reflect: true })\n required = false;\n\n @property({ type: Number })\n tabIndex = -1;\n\n @property({ attribute: 'aria-label' })\n ariaLabel: string \| null = null;\n\n /* Set by `pk-radio-group` when the group is disabled. */\n @property({ type: Boolean, attribute: false })\n forceDisabled = false;\n\n @query('.input')\n private input!: HTMLInputElement;\n\n @state()\n private hasDefaultSlotContent = false;\n\n override updated(changed: PropertyValues): void {\n if (this.input && changed.has('checked')) {\n this.input.checked = this.checked;\n }\n\n if (this.input && changed.has('tabIndex')) {\n this.input.tabIndex = this.tabIndex;\n }\n }\n\n focusControl(options?: FocusOptions): void {\n this.input.focus(options);\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 event.stopPropagation();\n const input = event.target as HTMLInputElement;\n\n if (this.disabled \|\| this.forceDisabled \|\| !input.checked) {\n return;\n }\n\n this.dispatchEvent(new CustomEvent('pk-radio-select', {\n detail: { value: this.value },\n bubbles: true,\n composed: true,\n }));\n }\n\n override render() {\n const isDisabled = this.disabled \|\| this.forceDisabled;\n\n return html`\n <label\n part=\"base\"\n class=${classMap({\n item: true,\n 'pk-radio-group__item': true,\n 'item--with-label': this.hasDefaultSlotContent,\n })}\n data-state=${this.checked ? 'checked' : nothing}\n ?data-disabled=${isDisabled}\n aria-disabled=${isDisabled ? 'true' : nothing}\n >\n <span part=\"control\" class=\"control pk-radio-group__control\">\n <span part=\"indicator\" class=\"indicator pk-radio-group__indicator\">\n <span class=\"indicator-dot pk-radio-group__indicator-dot\"></span>\n </span>\n </span>\n <input\n part=\"input\"\n class=\"input\"\n type=\"radio\"\n .checked=${this.checked}\n ?disabled=${isDisabled}\n ?required=${this.required}\n value=${this.value}\n tabindex=${this.tabIndex}\n aria-label=${this.ariaLabel ?? nothing}\n aria-invalid=${this.invalid ? 'true' : nothing}\n aria-checked=${this.checked ? 'true' : 'false'}\n @change=${this.handleChange}\n />\n <span\n class=${classMap({\n label: true,\n 'is-empty': !this.hasDefaultSlotContent,\n })}\n >\n <slot @slotchange=${this.defaultSlotChanged}></slot>\n </span>\n </label>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-radio': PkRadio;\n }\n}\n"],"mappings":";;;;AAEA,IAAa,gBAAgB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACiBzB,IAAA,UAAA,MAAM,gBAAgB,UAAU;;;eAI3B;iBAGE;kBAGC;iBAGD;kBAGC;kBAGA;mBAGgB;uBAIX;+BAMgB;;;gBA/BP;;CAiCzB,QAAiB,SAA+B;AAC5C,MAAI,KAAK,SAAS,QAAQ,IAAI,UAAU,CACpC,MAAK,MAAM,UAAU,KAAK;AAG9B,MAAI,KAAK,SAAS,QAAQ,IAAI,WAAW,CACrC,MAAK,MAAM,WAAW,KAAK;;CAInC,aAAa,SAA8B;AACvC,OAAK,MAAM,MAAM,QAAQ;;CAG7B,mBAA2B,OAAoB;EAC3C,MAAM,OAAO,MAAM;AACnB,OAAK,wBAAwB,KAAK,cAAc,EAAE,SAAS,MAAM,CAAC,CAAC,MAAM,SAAS;AAC9E,OAAI,KAAK,aAAa,KAAK,UACvB,QAAO,KAAK,aAAa,MAAM;AAGnC,UAAO,KAAK,aAAa,KAAK;IAChC;;CAGN,aAAqB,OAAoB;AACrC,QAAM,iBAAiB;EACvB,MAAM,QAAQ,MAAM;AAEpB,MAAI,KAAK,YAAY,KAAK,iBAAiB,CAAC,MAAM,QAC9C;AAGJ,OAAK,cAAc,IAAI,YAAY,mBAAmB;GAClD,QAAQ,EAAE,OAAO,KAAK,OAAO;GAC7B,SAAS;GACT,UAAU;GACb,CAAC,CAAC;;CAGP,SAAkB;EACd,MAAM,aAAa,KAAK,YAAY,KAAK;AAEzC,SAAO,IAAI;;;wBAGK,SAAS;GACb,MAAM;GACN,wBAAwB;GACxB,oBAAoB,KAAK;GAC5B,CAAC,CAAC;6BACU,KAAK,UAAU,YAAY,QAAQ;iCAC/B,WAAW;gCACZ,aAAa,SAAS,QAAQ;;;;;;;;;;;+BAW/B,KAAK,QAAQ;gCACZ,WAAW;gCACX,KAAK,SAAS;4BAClB,KAAK,MAAM;+BACR,KAAK,SAAS;iCACZ,KAAK,aAAa,QAAQ;mCACxB,KAAK,UAAU,SAAS,QAAQ;mCAChC,KAAK,UAAU,SAAS,QAAQ;8BACrC,KAAK,aAAa;;;4BAGpB,SAAS;GACb,OAAO;GACP,YAAY,CAAC,KAAK;GACrB,CAAC,CAAC;;wCAEiB,KAAK,mBAAmB;;;;;;YA/G3D,UAAU,CAAA,EAAA,QAAA,WAAA,SAAA,KAAA,EAAA;YAGV,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,QAAA,WAAA,WAAA,KAAA,EAAA;YAG1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,QAAA,WAAA,YAAA,KAAA,EAAA;YAG1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,QAAA,WAAA,WAAA,KAAA,EAAA;YAG1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,QAAA,WAAA,YAAA,KAAA,EAAA;YAG1C,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,QAAA,WAAA,YAAA,KAAA,EAAA;YAG1B,SAAS,EAAE,WAAW,cAAc,CAAC,CAAA,EAAA,QAAA,WAAA,aAAA,KAAA,EAAA;YAIrC,SAAS;CAAE,MAAM;CAAS,WAAW;CAAO,CAAC,CAAA,EAAA,QAAA,WAAA,iBAAA,KAAA,EAAA;YAG7C,MAAM,SAAS,CAAA,EAAA,QAAA,WAAA,SAAA,KAAA,EAAA;YAGf,OAAO,CAAA,EAAA,QAAA,WAAA,yBAAA,KAAA,EAAA;sBAhCX,cAAc,WAAW,CAAA,EAAA,QAAA"}
1	+ {"version":3,"file":"pk-radio-B5XkMHy3.js","names":[],"sources":["../../src/components/radio-group/pk-radio.styles.ts","../../src/components/radio-group/pk-radio.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkRadioStyles = css`\n @layer pk-component {\n :host {\n display: inline-flex;\n vertical-align: middle;\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 .item {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n position: relative;\n margin: 0;\n }\n\n :host([disabled]) .item {\n cursor: not-allowed;\n }\n\n .item--with-label {\n gap: 0.5rem;\n }\n\n .control {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 1rem;\n height: 1rem;\n border: 1px solid var(--pk-color-slate-400);\n border-radius: 9999px;\n background: var(--pk-color-white);\n transition: border-color 0.12s ease, box-shadow 0.12s ease;\n }\n\n .item:focus-visible .control,\n :host([data-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 border-color: var(--pk-color-rose-600);\n }\n\n :host([invalid]:focus-visible) .control,\n :host([invalid][data-focus-visible]) .control {\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 :host([checked]) .control {\n background: var(--pk-color-gray-50);\n color: #1f2933;\n }\n\n .indicator {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n color: currentcolor;\n }\n\n .indicator-dot {\n width: 0.5rem;\n height: 0.5rem;\n border-radius: 9999px;\n background: currentcolor;\n transition: opacity 0.12s ease, transform 0.12s ease;\n }\n\n :host(:not([checked])) .indicator-dot {\n opacity: 0;\n transform: scale(0);\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 .label {\n line-height: var(--pk-line-height);\n /* Match checkbox / form-control labels (gray-700). /\n color: var(--pk-color-gray-700);\n }\n\n .label.is-empty {\n display: none;\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 { PkElement } from '../../base/pk-element.js';\nimport { pkRadioStyles } from './pk-radio.styles.js';\n\n/\n Radio button — use inside `pk-radio-group`.\n \n @slot - Visible label text\n \n @csspart base - Root label element\n * @csspart input - Native radio input\n * @csspart control - Visual radio circle\n * @csspart indicator - Indicator container\n /\n@customElement('pk-radio')\nexport class PkRadio extends PkElement {\n static override styles = pkRadioStyles;\n\n @property()\n value = '';\n\n @property({ type: Boolean, reflect: true })\n checked = false;\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n @property({ type: Boolean, reflect: true })\n invalid = false;\n\n @property({ type: Boolean, reflect: true })\n required = false;\n\n @property({ type: Number })\n tabIndex = -1;\n\n @property({ attribute: 'aria-label' })\n ariaLabel: string \| null = null;\n\n /* Set by `pk-radio-group` when the group is disabled. */\n @property({ type: Boolean, attribute: false })\n forceDisabled = false;\n\n @query('.input')\n private input!: HTMLInputElement;\n\n @state()\n private hasDefaultSlotContent = false;\n\n override updated(changed: PropertyValues): void {\n if (this.input && changed.has('checked')) {\n this.input.checked = this.checked;\n }\n\n if (this.input && changed.has('tabIndex')) {\n this.input.tabIndex = this.tabIndex;\n }\n }\n\n focusControl(options?: FocusOptions): void {\n this.input.focus(options);\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 event.stopPropagation();\n const input = event.target as HTMLInputElement;\n\n if (this.disabled \|\| this.forceDisabled \|\| !input.checked) {\n return;\n }\n\n this.dispatchEvent(new CustomEvent('pk-radio-select', {\n detail: { value: this.value },\n bubbles: true,\n composed: true,\n }));\n }\n\n override render() {\n const isDisabled = this.disabled \|\| this.forceDisabled;\n\n return html`\n <label\n part=\"base\"\n class=${classMap({\n item: true,\n 'pk-radio-group__item': true,\n 'item--with-label': this.hasDefaultSlotContent,\n })}\n data-state=${this.checked ? 'checked' : nothing}\n ?data-disabled=${isDisabled}\n aria-disabled=${isDisabled ? 'true' : nothing}\n >\n <span part=\"control\" class=\"control pk-radio-group__control\">\n <span part=\"indicator\" class=\"indicator pk-radio-group__indicator\">\n <span class=\"indicator-dot pk-radio-group__indicator-dot\"></span>\n </span>\n </span>\n <input\n part=\"input\"\n class=\"input\"\n type=\"radio\"\n .checked=${this.checked}\n ?disabled=${isDisabled}\n ?required=${this.required}\n value=${this.value}\n tabindex=${this.tabIndex}\n aria-label=${this.ariaLabel ?? nothing}\n aria-invalid=${this.invalid ? 'true' : nothing}\n aria-checked=${this.checked ? 'true' : 'false'}\n @change=${this.handleChange}\n />\n <span\n class=${classMap({\n label: true,\n 'is-empty': !this.hasDefaultSlotContent,\n })}\n >\n <slot @slotchange=${this.defaultSlotChanged}></slot>\n </span>\n </label>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-radio': PkRadio;\n }\n}\n"],"mappings":";;;;AAEA,IAAa,gBAAgB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACiBzB,IAAA,UAAA,MAAM,gBAAgB,UAAU;;;eAI3B;iBAGE;kBAGC;iBAGD;kBAGC;kBAGA;mBAGgB;uBAIX;+BAMgB;;;gBA/BP;;CAiCzB,QAAiB,SAA+B;AAC5C,MAAI,KAAK,SAAS,QAAQ,IAAI,UAAU,CACpC,MAAK,MAAM,UAAU,KAAK;AAG9B,MAAI,KAAK,SAAS,QAAQ,IAAI,WAAW,CACrC,MAAK,MAAM,WAAW,KAAK;;CAInC,aAAa,SAA8B;AACvC,OAAK,MAAM,MAAM,QAAQ;;CAG7B,mBAA2B,OAAoB;EAC3C,MAAM,OAAO,MAAM;AACnB,OAAK,wBAAwB,KAAK,cAAc,EAAE,SAAS,MAAM,CAAC,CAAC,MAAM,SAAS;AAC9E,OAAI,KAAK,aAAa,KAAK,UACvB,QAAO,KAAK,aAAa,MAAM;AAGnC,UAAO,KAAK,aAAa,KAAK;IAChC;;CAGN,aAAqB,OAAoB;AACrC,QAAM,iBAAiB;EACvB,MAAM,QAAQ,MAAM;AAEpB,MAAI,KAAK,YAAY,KAAK,iBAAiB,CAAC,MAAM,QAC9C;AAGJ,OAAK,cAAc,IAAI,YAAY,mBAAmB;GAClD,QAAQ,EAAE,OAAO,KAAK,OAAO;GAC7B,SAAS;GACT,UAAU;GACb,CAAC,CAAC;;CAGP,SAAkB;EACd,MAAM,aAAa,KAAK,YAAY,KAAK;AAEzC,SAAO,IAAI;;;wBAGK,SAAS;GACb,MAAM;GACN,wBAAwB;GACxB,oBAAoB,KAAK;GAC5B,CAAC,CAAC;6BACU,KAAK,UAAU,YAAY,QAAQ;iCAC/B,WAAW;gCACZ,aAAa,SAAS,QAAQ;;;;;;;;;;;+BAW/B,KAAK,QAAQ;gCACZ,WAAW;gCACX,KAAK,SAAS;4BAClB,KAAK,MAAM;+BACR,KAAK,SAAS;iCACZ,KAAK,aAAa,QAAQ;mCACxB,KAAK,UAAU,SAAS,QAAQ;mCAChC,KAAK,UAAU,SAAS,QAAQ;8BACrC,KAAK,aAAa;;;4BAGpB,SAAS;GACb,OAAO;GACP,YAAY,CAAC,KAAK;GACrB,CAAC,CAAC;;wCAEiB,KAAK,mBAAmB;;;;;;YA/G3D,UAAU,CAAA,EAAA,QAAA,WAAA,SAAA,KAAA,EAAA;YAGV,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,QAAA,WAAA,WAAA,KAAA,EAAA;YAG1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,QAAA,WAAA,YAAA,KAAA,EAAA;YAG1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,QAAA,WAAA,WAAA,KAAA,EAAA;YAG1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,QAAA,WAAA,YAAA,KAAA,EAAA;YAG1C,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,QAAA,WAAA,YAAA,KAAA,EAAA;YAG1B,SAAS,EAAE,WAAW,cAAc,CAAC,CAAA,EAAA,QAAA,WAAA,aAAA,KAAA,EAAA;YAIrC,SAAS;CAAE,MAAM;CAAS,WAAW;CAAO,CAAC,CAAA,EAAA,QAAA,WAAA,iBAAA,KAAA,EAAA;YAG7C,MAAM,SAAS,CAAA,EAAA,QAAA,WAAA,SAAA,KAAA,EAAA;YAGf,OAAO,CAAA,EAAA,QAAA,WAAA,yBAAA,KAAA,EAAA;sBAhCX,cAAc,WAAW,CAAA,EAAA,QAAA"}