@verbb/plugin-kit-web 2.0.19 → 2.0.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (165) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dist/base/pk-form-associated-element.d.ts.map +1 -1
  3. package/dist/chunks/{pk-autocomplete-IFL-u-RF.js → pk-autocomplete-qy2Psvqm.js} +2 -2
  4. package/dist/chunks/{pk-autocomplete-IFL-u-RF.js.map → pk-autocomplete-qy2Psvqm.js.map} +1 -1
  5. package/dist/chunks/{pk-checkbox-CfV1uDdC.js → pk-checkbox-13ArHSmt.js} +3 -2
  6. package/dist/chunks/{pk-checkbox-CfV1uDdC.js.map → pk-checkbox-13ArHSmt.js.map} +1 -1
  7. package/dist/chunks/{pk-checkbox-select-DeCaI3a0.js → pk-checkbox-select-Ckvfbu83.js} +2 -2
  8. package/dist/chunks/{pk-checkbox-select-DeCaI3a0.js.map → pk-checkbox-select-Ckvfbu83.js.map} +1 -1
  9. package/dist/chunks/{pk-code-editor-BG9sG_Fy.js → pk-code-editor-BlG6O5qB.js} +2 -2
  10. package/dist/chunks/{pk-code-editor-BG9sG_Fy.js.map → pk-code-editor-BlG6O5qB.js.map} +1 -1
  11. package/dist/chunks/{pk-color-input-CncNce1C.js → pk-color-input-BRgQ5-vB.js} +2 -2
  12. package/dist/chunks/{pk-color-input-CncNce1C.js.map → pk-color-input-BRgQ5-vB.js.map} +1 -1
  13. package/dist/chunks/{pk-combobox-CL9En0J-.js → pk-combobox-ag89QEX2.js} +3 -2
  14. package/dist/chunks/pk-combobox-ag89QEX2.js.map +1 -0
  15. package/dist/chunks/{pk-date-picker-BEAd4Ngl.js → pk-date-picker-C2YvDPNm.js} +2 -2
  16. package/dist/chunks/{pk-date-picker-BEAd4Ngl.js.map → pk-date-picker-C2YvDPNm.js.map} +1 -1
  17. package/dist/chunks/{pk-editable-table-BubcKCBn.js → pk-editable-table-DDnu1I8Y.js} +11 -11
  18. package/dist/chunks/{pk-editable-table-BubcKCBn.js.map → pk-editable-table-DDnu1I8Y.js.map} +1 -1
  19. package/dist/chunks/{pk-form-associated-element-CCQALRGB.js → pk-form-associated-element-GxX5lbnk.js} +2 -2
  20. package/dist/chunks/pk-form-associated-element-GxX5lbnk.js.map +1 -0
  21. package/dist/chunks/{pk-image-browser-DwiCFOIG.js → pk-image-browser-Bj8LhWfk.js} +3 -4
  22. package/dist/chunks/pk-image-browser-Bj8LhWfk.js.map +1 -0
  23. package/dist/chunks/{pk-input-CF_icEtR.js → pk-input-BywmK5n2.js} +2 -2
  24. package/dist/chunks/{pk-input-CF_icEtR.js.map → pk-input-BywmK5n2.js.map} +1 -1
  25. package/dist/chunks/{pk-lightswitch-D1qEFRxK.js → pk-lightswitch-VHfJizBW.js} +2 -2
  26. package/dist/chunks/{pk-lightswitch-D1qEFRxK.js.map → pk-lightswitch-VHfJizBW.js.map} +1 -1
  27. package/dist/chunks/{pk-radio-group-ByrxGLdX.js → pk-radio-group-Dzd-3HaQ.js} +3 -2
  28. package/dist/chunks/pk-radio-group-Dzd-3HaQ.js.map +1 -0
  29. package/dist/chunks/{pk-select-CdQdhnZN.js → pk-select-b5S5WKc-.js} +3 -2
  30. package/dist/chunks/pk-select-b5S5WKc-.js.map +1 -0
  31. package/dist/chunks/{pk-textarea-CYM2tK88.js → pk-textarea-Dhj1WFLH.js} +2 -2
  32. package/dist/chunks/{pk-textarea-CYM2tK88.js.map → pk-textarea-Dhj1WFLH.js.map} +1 -1
  33. package/dist/chunks/{pk-time-picker-CebRqydV.js → pk-time-picker-ChRbKHNB.js} +2 -2
  34. package/dist/chunks/{pk-time-picker-CebRqydV.js.map → pk-time-picker-ChRbKHNB.js.map} +1 -1
  35. package/dist/chunks/{pk-tiptap-editor-CTz-yfHL.js → pk-tiptap-editor-BzZ-J2sl.js} +4 -4
  36. package/dist/chunks/{pk-tiptap-editor-CTz-yfHL.js.map → pk-tiptap-editor-BzZ-J2sl.js.map} +1 -1
  37. package/dist/chunks/{pk-tiptap-input-Y9eog9Zn.js → pk-tiptap-input-YKg4VLp_.js} +2 -2
  38. package/dist/chunks/{pk-tiptap-input-Y9eog9Zn.js.map → pk-tiptap-input-YKg4VLp_.js.map} +1 -1
  39. package/dist/chunks/{register-Bw9kG690.js → register-C6_F-VwU.js} +16 -16
  40. package/dist/chunks/{register-Bw9kG690.js.map → register-C6_F-VwU.js.map} +1 -1
  41. package/dist/components/autocomplete/pk-autocomplete.js +1 -1
  42. package/dist/components/autocomplete.js +1 -1
  43. package/dist/components/checkbox/pk-checkbox.d.ts.map +1 -1
  44. package/dist/components/checkbox/pk-checkbox.js +1 -1
  45. package/dist/components/checkbox-select/pk-checkbox-select.js +1 -1
  46. package/dist/components/checkbox-select.js +1 -1
  47. package/dist/components/checkbox.js +1 -1
  48. package/dist/components/code-editor/pk-code-editor.js +1 -1
  49. package/dist/components/code-editor.js +1 -1
  50. package/dist/components/color-input/pk-color-input.js +1 -1
  51. package/dist/components/color-input.js +1 -1
  52. package/dist/components/combobox/pk-combobox.d.ts.map +1 -1
  53. package/dist/components/combobox/pk-combobox.js +1 -1
  54. package/dist/components/combobox.js +1 -1
  55. package/dist/components/date-picker/pk-date-picker.js +1 -1
  56. package/dist/components/date-picker.js +1 -1
  57. package/dist/components/editable-table/pk-editable-table.js +1 -1
  58. package/dist/components/editable-table.js +1 -1
  59. package/dist/components/image-browser/pk-image-browser.d.ts.map +1 -1
  60. package/dist/components/image-browser/pk-image-browser.js +1 -1
  61. package/dist/components/image-browser.js +1 -1
  62. package/dist/components/input/pk-input.js +1 -1
  63. package/dist/components/input.js +1 -1
  64. package/dist/components/lightswitch/pk-lightswitch.js +1 -1
  65. package/dist/components/lightswitch.js +1 -1
  66. package/dist/components/radio-group/pk-radio-group.d.ts.map +1 -1
  67. package/dist/components/radio-group/pk-radio-group.js +1 -1
  68. package/dist/components/radio-group.js +1 -1
  69. package/dist/components/select/pk-select.d.ts.map +1 -1
  70. package/dist/components/select/pk-select.js +1 -1
  71. package/dist/components/select.js +1 -1
  72. package/dist/components/textarea/pk-textarea.js +1 -1
  73. package/dist/components/textarea.js +1 -1
  74. package/dist/components/time-picker/pk-time-picker.js +1 -1
  75. package/dist/components/time-picker.js +1 -1
  76. package/dist/components/tiptap/pk-tiptap-editor.js +1 -1
  77. package/dist/components/tiptap/pk-tiptap-input.js +1 -1
  78. package/dist/components/tiptap-editor.js +1 -1
  79. package/dist/components/tiptap-input.js +1 -1
  80. package/dist/index.js +17 -17
  81. package/dist/register.js +16 -16
  82. package/dist-loader/chunks/{pk-base-CyzwylQ7.js → pk-base-B2MqxErC.js} +1 -1
  83. package/dist-loader/chunks/{pk-button-saBDszJV.js → pk-button-Dfm23jEC.js} +2 -2
  84. package/dist-loader/chunks/{pk-calendar-BrF8i3dW.js → pk-calendar-BuSULJCU.js} +1 -1
  85. package/dist-loader/chunks/{pk-checkbox-B3d4nkBx.js → pk-checkbox-BDoq3xg0.js} +2 -1
  86. package/dist-loader/chunks/{pk-color-input-CD-r_sfG.js → pk-color-input-eLjO9zfn.js} +1 -1
  87. package/dist-loader/chunks/{pk-combobox-Cpx0w1KV.js → pk-combobox-DBvcyxRC.js} +3 -2
  88. package/dist-loader/chunks/{pk-date-picker-DEoiTOxN.js → pk-date-picker-CYLpYIji.js} +3 -3
  89. package/dist-loader/chunks/{pk-dialog-C6aaPokv.js → pk-dialog-BtrH5Ke0.js} +1 -1
  90. package/dist-loader/chunks/{pk-dropdown-item-D8RrwjxL.js → pk-dropdown-item-D8tfEU-k.js} +1 -1
  91. package/dist-loader/chunks/{pk-dropdown-label-Cg32UgRe.js → pk-dropdown-label-TbLj4bHK.js} +1 -1
  92. package/dist-loader/chunks/{pk-dropdown-menu-CAHCltlX.js → pk-dropdown-menu-C4GDW5pE.js} +3 -3
  93. package/dist-loader/chunks/{pk-field-V7JOy26T.js → pk-field-BM0XD9Ij.js} +1 -1
  94. package/dist-loader/chunks/{pk-icon-Bph-EBqp.js → pk-icon-_1F1aL74.js} +1 -1
  95. package/dist-loader/chunks/{pk-input-BhU0PiCk.js → pk-input-DvBrD7Md.js} +1 -1
  96. package/dist-loader/chunks/{pk-lightswitch-m23Cy3_D.js → pk-lightswitch-CcwlLQ9f.js} +1 -1
  97. package/dist-loader/chunks/{pk-option-BrDMERSl.js → pk-option-DATPm0Bo.js} +1 -1
  98. package/dist-loader/chunks/{pk-popup-CrxxR-Hb.js → pk-popup-CUuGs8r_.js} +1 -1
  99. package/dist-loader/chunks/{pk-select-Dok-JdSe.js → pk-select-DpcvbzUL.js} +3 -2
  100. package/dist-loader/chunks/{pk-spinner-BKU9Rf2R.js → pk-spinner-Dk_LbvHW.js} +1 -1
  101. package/dist-loader/chunks/{pk-status-D2g_77m_.js → pk-status-B8UvjIp2.js} +1 -1
  102. package/dist-loader/chunks/{pk-textarea-CC7rA5A7.js → pk-textarea-DeSuxufJ.js} +1 -1
  103. package/dist-loader/chunks/{pk-time-picker-h5Wgd4a_.js → pk-time-picker-DpJt8biN.js} +3 -3
  104. package/dist-loader/chunks/{pk-tooltip-Dd_Q0Bn5.js → pk-tooltip-DcF9J5GT.js} +2 -2
  105. package/dist-loader/components/autocomplete/autocomplete.js +2 -2
  106. package/dist-loader/components/button/button.js +1 -1
  107. package/dist-loader/components/button-group/button-group-separator.js +1 -1
  108. package/dist-loader/components/button-group/button-group-text.js +1 -1
  109. package/dist-loader/components/button-group/button-group.js +1 -1
  110. package/dist-loader/components/calendar/calendar.js +1 -1
  111. package/dist-loader/components/checkbox/checkbox.js +1 -1
  112. package/dist-loader/components/checkbox-select/checkbox-select.js +2 -2
  113. package/dist-loader/components/code-editor/code-editor.js +1 -1
  114. package/dist-loader/components/color-input/color-input.js +1 -1
  115. package/dist-loader/components/combobox/combobox.js +1 -1
  116. package/dist-loader/components/connect/connect-oauth.js +3 -3
  117. package/dist-loader/components/connect/connect.js +5 -5
  118. package/dist-loader/components/copy-button/copy-button.js +2 -2
  119. package/dist-loader/components/date-picker/date-picker.js +1 -1
  120. package/dist-loader/components/dialog/dialog.js +1 -1
  121. package/dist-loader/components/dropdown-menu/dropdown-item.js +1 -1
  122. package/dist-loader/components/dropdown-menu/dropdown-label.js +1 -1
  123. package/dist-loader/components/dropdown-menu/dropdown-menu.js +1 -1
  124. package/dist-loader/components/dropdown-menu/dropdown-separator.js +1 -1
  125. package/dist-loader/components/editable-table/editable-table.js +14 -14
  126. package/dist-loader/components/field/field.js +1 -1
  127. package/dist-loader/components/icon/icon.js +1 -1
  128. package/dist-loader/components/image-browser/image-browser.js +5 -6
  129. package/dist-loader/components/input/input.js +1 -1
  130. package/dist-loader/components/input-group/input-group-addon.js +1 -1
  131. package/dist-loader/components/input-group/input-group-button.js +1 -1
  132. package/dist-loader/components/input-group/input-group-input.js +1 -1
  133. package/dist-loader/components/input-group/input-group-text.js +1 -1
  134. package/dist-loader/components/input-group/input-group-textarea.js +1 -1
  135. package/dist-loader/components/input-group/input-group.js +1 -1
  136. package/dist-loader/components/lightswitch/lightswitch.js +1 -1
  137. package/dist-loader/components/popover/popover.js +2 -2
  138. package/dist-loader/components/popup/popup.js +1 -1
  139. package/dist-loader/components/radio-group/radio-group.js +2 -1
  140. package/dist-loader/components/radio-group/radio.js +1 -1
  141. package/dist-loader/components/scroll-area/scroll-area.js +1 -1
  142. package/dist-loader/components/select/option-group.js +1 -1
  143. package/dist-loader/components/select/option.js +1 -1
  144. package/dist-loader/components/select/select.js +1 -1
  145. package/dist-loader/components/separator/separator.js +1 -1
  146. package/dist-loader/components/spinner/spinner.js +1 -1
  147. package/dist-loader/components/status/status.js +1 -1
  148. package/dist-loader/components/tabs/tab-heading.js +1 -1
  149. package/dist-loader/components/tabs/tab-panel.js +1 -1
  150. package/dist-loader/components/tabs/tab.js +1 -1
  151. package/dist-loader/components/tabs/tabs.js +1 -1
  152. package/dist-loader/components/textarea/textarea.js +1 -1
  153. package/dist-loader/components/time-picker/time-picker.js +1 -1
  154. package/dist-loader/components/tiptap/tiptap-content.js +1 -1
  155. package/dist-loader/components/tiptap/tiptap-editor.js +10 -10
  156. package/dist-loader/components/tiptap/tiptap-input.js +1 -1
  157. package/dist-loader/components/toggle/toggle.js +1 -1
  158. package/dist-loader/components/toggle-group/toggle-group.js +1 -1
  159. package/dist-loader/components/tooltip/tooltip.js +1 -1
  160. package/package.json +7 -7
  161. package/dist/chunks/pk-combobox-CL9En0J-.js.map +0 -1
  162. package/dist/chunks/pk-form-associated-element-CCQALRGB.js.map +0 -1
  163. package/dist/chunks/pk-image-browser-DwiCFOIG.js.map +0 -1
  164. package/dist/chunks/pk-radio-group-ByrxGLdX.js.map +0 -1
  165. package/dist/chunks/pk-select-CdQdhnZN.js.map +0 -1
@@ -1,5 +1,5 @@
1
1
  import { a as query, i as property, o as state, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
2
- import { t as PkFormAssociatedElement } from "./pk-form-associated-element-CCQALRGB.js";
2
+ import { t as PkFormAssociatedElement } from "./pk-form-associated-element-GxX5lbnk.js";
3
3
  import { t as RequiredValidator } from "./required-validator-CEg8dvjS.js";
4
4
  import { t as HasSlotController } from "./has-slot-8BvCt_qo.js";
5
5
  import { t as formControlStyles } from "./form-control.styles-BQdimE5o.js";
@@ -231,6 +231,7 @@ var PkRadioGroup = class PkRadioGroup extends PkFormAssociatedElement {
231
231
  `;
232
232
  }
233
233
  };
234
+ __decorate([state()], PkRadioGroup.prototype, "value", null);
234
235
  __decorate([property({
235
236
  attribute: "value",
236
237
  reflect: true
@@ -249,4 +250,4 @@ PkRadioGroup = __decorate([customElement("pk-radio-group")], PkRadioGroup);
249
250
  //#endregion
250
251
  export { PkRadioGroup as t };
251
252
 
252
- //# sourceMappingURL=pk-radio-group-ByrxGLdX.js.map
253
+ //# sourceMappingURL=pk-radio-group-Dzd-3HaQ.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"pk-radio-group-Dzd-3HaQ.js","names":[],"sources":["../../src/components/radio-group/pk-radio-group.styles.ts","../../src/components/radio-group/pk-radio-group.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkRadioGroupStyles = css`\n @layer pk-component {\n :host {\n display: block;\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 .group {\n display: grid;\n gap: 0.375rem;\n }\n\n .group--horizontal {\n grid-auto-flow: column;\n grid-auto-columns: max-content;\n align-items: center;\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 { 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 { RequiredValidator } from '../../validators/index.js';\nimport type { PkRadio } from './pk-radio.js';\nimport { pkRadioGroupStyles } from './pk-radio-group.styles.js';\n\nexport type PkRadioGroupOrientation = 'horizontal' | 'vertical';\n\n/**\n * Radio group — pattern: light-DOM `pk-radio` children, shared value + validation.\n *\n * @slot label - Group label\n * @slot instructions - Instructions text\n * @slot hint - Alias for `instructions`\n * @slot - `pk-radio` items\n *\n * @csspart form-control - Form control wrapper\n * @csspart label - Label text\n * @csspart radios - Radio items container\n * @csspart instructions - Instructions text\n */\n@customElement('pk-radio-group')\nexport class PkRadioGroup extends PkFormAssociatedElement {\n static override shadowRootOptions: ShadowRootInit = {\n mode: 'open',\n delegatesFocus: true,\n };\n\n static override styles = [formControlStyles, pkRadioGroupStyles];\n\n static override get validators() {\n return [...super.validators, RequiredValidator()];\n }\n\n override assumeInteractionOn = ['change'];\n\n private readonly hasSlotController = new HasSlotController(this, 'instructions', 'hint', 'label');\n\n private _value: string | null = null;\n\n get value(): string {\n if (this.valueHasChanged) {\n return this._value ?? '';\n }\n\n return this._value ?? this.defaultValue ?? '';\n }\n\n @state()\n set value(val: string | null) {\n this._value = val == null ? null : String(val);\n this.valueHasChanged = true;\n }\n\n /** Default value — reflected as the `value` attribute. */\n @property({ attribute: 'value', reflect: true })\n defaultValue = '';\n\n @property({ reflect: true })\n orientation: PkRadioGroupOrientation = 'vertical';\n\n @property({ type: Boolean, reflect: true })\n invalid = false;\n\n @property()\n label = '';\n\n @property()\n instructions = '';\n\n @property({ attribute: 'aria-label' })\n override ariaLabel: string | null = null;\n\n @query('slot:not([name])')\n private defaultSlot!: HTMLSlotElement;\n\n @state()\n private items: PkRadio[] = [];\n\n protected override syncFormValue(): void {\n this.setFormValue(this.value || null);\n }\n\n protected override resetToDefaultValue(): void {\n this._value = null;\n this.applySelection();\n }\n\n protected override restoreFormState(state: string | File | FormData | null): void {\n if (typeof state === 'string') {\n this.value = state;\n this.applySelection();\n }\n }\n\n protected override get validationTarget(): HTMLElement | undefined {\n return this.getAllRadios().find((item) => !item.disabled) ?? this.getAllRadios()[0];\n }\n\n override connectedCallback(): void {\n this.instructions = readLegacyInstructions(this, this.instructions);\n super.connectedCallback();\n this.addEventListener('keydown', this.handleKeyDown);\n this.addEventListener('click', this.handleRadioClick);\n }\n\n override disconnectedCallback(): void {\n this.removeEventListener('keydown', this.handleKeyDown);\n this.removeEventListener('click', this.handleRadioClick);\n super.disconnectedCallback();\n }\n\n override updated(changed: PropertyValues): void {\n if (changed.has('value') || changed.has('disabled') || changed.has('invalid') || changed.has('name')) {\n this.applySelection();\n }\n\n super.updated(changed);\n }\n\n override formResetCallback(): void {\n this._value = null;\n super.formResetCallback();\n this.applySelection();\n }\n\n override focus(options?: FocusOptions): void {\n if (this.disabled) {\n return;\n }\n\n const radios = this.getEnabledItems();\n const checked = radios.find((radio) => radio.checked);\n const target = checked ?? radios[0];\n target?.focusControl(options);\n }\n\n private getAllRadios(): PkRadio[] {\n return [...this.querySelectorAll('pk-radio')];\n }\n\n private syncItems = (): void => {\n this.items = this.getAllRadios();\n this.applySelection();\n };\n\n private getEnabledItems(): PkRadio[] {\n return this.items.filter((item) => !item.disabled && !this.disabled);\n }\n\n private applySelection(): void {\n const radios = this.getAllRadios();\n this.items = radios;\n\n const enabled = this.getEnabledItems();\n const checkedRadio = enabled.find((item) => item.value === this.value);\n\n for (const item of radios) {\n const checked = item.value === this.value;\n // React sets CE booleans as properties, while hand-written HTML uses attributes.\n // Preserve item-level disabled state from either source, but do not let a prior\n // group-level disabled pass permanently mark every child disabled.\n const itemDisabled = item.hasAttribute('disabled') || (item.disabled && !item.forceDisabled);\n item.checked = checked;\n item.disabled = this.disabled || itemDisabled;\n item.invalid = this.invalid;\n item.required = this.required;\n item.forceDisabled = this.disabled;\n }\n\n if (this.disabled) {\n for (const item of radios) {\n item.tabIndex = -1;\n }\n return;\n }\n\n if (checkedRadio) {\n for (const item of enabled) {\n item.tabIndex = item.checked ? 0 : -1;\n }\n } else if (enabled.length > 0) {\n enabled.forEach((item, index) => {\n item.tabIndex = index === 0 ? 0 : -1;\n });\n }\n\n for (const item of radios.filter((radio) => radio.disabled)) {\n item.tabIndex = -1;\n }\n }\n\n private handleRadioClick = (event: Event): void => {\n const clickedRadio = (event.target as HTMLElement).closest('pk-radio') as PkRadio | null;\n\n if (!clickedRadio || clickedRadio.disabled || clickedRadio.forceDisabled || this.disabled) {\n return;\n }\n\n const oldValue = this.value;\n this.value = clickedRadio.value;\n this.applySelection();\n\n if (this.value !== oldValue) {\n this.emitValueChange();\n }\n };\n\n private handleKeyDown = (event: KeyboardEvent): void => {\n if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', ' ', 'Home', 'End'].includes(event.key) || this.disabled) {\n return;\n }\n\n const radios = this.getEnabledItems();\n\n if (radios.length === 0) {\n return;\n }\n\n event.preventDefault();\n\n const oldValue = this.value;\n const checkedRadio = radios.find((radio) => radio.checked) ?? radios[0]!;\n let index = radios.indexOf(checkedRadio);\n\n if (event.key === ' ') {\n // Space selects focused radio without moving\n } else if (event.key === 'Home') {\n index = 0;\n } else if (event.key === 'End') {\n index = radios.length - 1;\n } else {\n const increment = ['ArrowUp', 'ArrowLeft'].includes(event.key) ? -1 : 1;\n index += increment;\n\n if (index < 0) {\n index = radios.length - 1;\n }\n\n if (index >= radios.length) {\n index = 0;\n }\n }\n\n this.value = radios[index]!.value;\n this.applySelection();\n radios[index]!.focusControl();\n\n if (this.value !== oldValue) {\n this.emitValueChange();\n }\n };\n\n private emitValueChange(): void {\n this.dispatchEvent(new CustomEvent('pk-change', {\n detail: { value: this.value },\n bubbles: true,\n composed: true,\n }));\n\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n }\n\n override render() {\n const hasLabelSlot = this.hasSlotController.test('label');\n const hasInstructions = hasInstructionContent(\n (name, flag) => this.hasSlotController.test(name, flag),\n this.instructions,\n );\n const hasLabel = Boolean(this.label) || hasLabelSlot;\n\n return html`\n <div part=\"form-control\" class=\"form-control\">\n ${hasLabel\n ? html`\n <div part=\"label\" class=\"form-control__label\" id=\"label\">\n <slot name=\"label\">${this.label}</slot>\n </div>\n `\n : nothing}\n\n ${hasInstructions\n ? html`\n <div part=\"instructions\" class=\"form-control__instructions\" id=\"instructions\">\n <slot name=\"instructions\">${this.instructions}</slot>\n <slot name=\"hint\"></slot>\n </div>\n `\n : nothing}\n\n <div\n part=\"radios\"\n class=${classMap({\n group: true,\n 'pk-radio-group': true,\n 'group--horizontal': this.orientation === 'horizontal',\n 'pk-radio-group--horizontal': this.orientation === 'horizontal',\n })}\n role=\"radiogroup\"\n aria-labelledby=${hasLabel ? 'label' : nothing}\n aria-label=${!hasLabel ? (this.ariaLabel ?? nothing) : nothing}\n aria-describedby=${hasInstructions ? 'instructions' : nothing}\n aria-invalid=${this.invalid ? 'true' : nothing}\n aria-required=${this.required ? 'true' : nothing}\n >\n <slot @slotchange=${this.syncItems}></slot>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-radio-group': PkRadioGroup;\n }\n}\n"],"mappings":"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"}
@@ -1,7 +1,7 @@
1
1
  import { t as icons_exports } from "./icons-BR8JcQj2.js";
2
2
  import { a as query, i as property, o as state, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
3
3
  import { t as iconStyles } from "./icon.styles-BLTWLqYp.js";
4
- import { t as PkFormAssociatedElement } from "./pk-form-associated-element-CCQALRGB.js";
4
+ import { t as PkFormAssociatedElement } from "./pk-form-associated-element-GxX5lbnk.js";
5
5
  import { t as MirrorValidator } from "./mirror-validator-DCjNYrrx.js";
6
6
  import { t as HasSlotController } from "./has-slot-8BvCt_qo.js";
7
7
  import { n as renderIconHtml } from "./render-Dvc3MHQR.js";
@@ -582,6 +582,7 @@ var PkSelect = class PkSelect extends PkFormAssociatedElement {
582
582
  }
583
583
  updated(changed) {
584
584
  if (changed.has("value") || changed.has("values") || changed.has("multiple")) this.applySelection();
585
+ if (changed.has("values") || changed.has("multiple")) this.syncFormValue();
585
586
  super.updated(changed);
586
587
  }
587
588
  getOptionElements() {
@@ -1128,4 +1129,4 @@ PkSelect = __decorate([customElement("pk-select")], PkSelect);
1128
1129
  //#endregion
1129
1130
  export { pkSelectStyles as n, PkSelect as t };
1130
1131
 
1131
- //# sourceMappingURL=pk-select-CdQdhnZN.js.map
1132
+ //# sourceMappingURL=pk-select-b5S5WKc-.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"pk-select-b5S5WKc-.js","names":[],"sources":["../../src/components/select/pk-select.styles.ts","../../src/components/select/pk-select.ts"],"sourcesContent":["import { css } from 'lit';\n\nimport { iconStyles } from '../../base/icon.styles.js';\nimport { popupContentAnimationStyles } from '../../styles/popup-content-animation.styles.js';\n\nexport const pkSelectStyles = [\n popupContentAnimationStyles,\n css`\n ${iconStyles}\n @layer pk-component {\n :host {\n display: inline-block;\n position: relative;\n width: fit-content;\n max-width: 100%;\n align-self: flex-start;\n flex: none;\n color: var(--pk-color-gray-700);\n font-family: var(--pk-font-family);\n font-size: var(--pk-font-size-base);\n line-height: var(--pk-line-height);\n --pk-select-trigger-border-width: 1px;\n --pk-select-item-min-height: var(--pk-input-height);\n --pk-select-item-padding-block: 6px;\n --pk-select-item-padding-inline: 10px;\n --pk-select-item-padding-inline-end: 2rem;\n --pk-select-item-font-size: var(--pk-font-size-base);\n --pk-select-item-line-height: var(--pk-input-control-line-height, 1.25rem);\n --pk-select-item-indicator-size: 0.75rem;\n --pk-select-item-indicator-inset: 0.5rem;\n /* v1 SelectLabel default: text-xs → 12px */\n --pk-select-group-label-font-size: 12px;\n --pk-select-decoration-size: 0.875rem;\n }\n\n :host([width='full']) {\n display: block;\n width: 100%;\n }\n\n :host([width='full']) .control {\n width: 100%;\n }\n\n :host([width='full']) button.control .icon {\n margin-inline-start: auto;\n }\n\n .control {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n /* Fill the host when consumers set min-width/width on :host. */\n width: 100%;\n max-width: 100%;\n min-width: 0;\n margin: 0;\n padding: var(--pk-select-item-padding-block) var(--pk-select-item-padding-inline);\n border: var(--pk-select-trigger-border-width) solid transparent;\n border-radius: var(--pk-radius-lg);\n --pk-select-fill: var(--pk-color-slate-250);\n --pk-select-fill-hover: var(--pk-color-slate-300);\n background: var(--pk-select-fill);\n color: var(--pk-color-gray-700);\n font: inherit;\n font-size: var(--pk-select-item-font-size);\n line-height: var(--pk-input-control-line-height, 1.25rem);\n white-space: nowrap;\n cursor: pointer;\n outline: none;\n box-sizing: border-box;\n transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;\n }\n\n button.control {\n appearance: none;\n -webkit-appearance: none;\n text-align: left;\n background-color: var(--pk-select-fill);\n border: var(--pk-select-trigger-border-width) solid transparent;\n }\n\n :host(:not([disabled])) .control:hover:not(.is-disabled):not(:disabled),\n :host(:not([disabled])) button.control:hover:not(.is-disabled):not(:disabled) {\n background: var(--pk-select-fill-hover);\n }\n\n :host(:not([disabled])) button.control:hover:not(.is-disabled):not(:disabled) {\n background-color: var(--pk-select-fill-hover);\n }\n\n :host(:not([invalid]):not(:state(user-invalid))) button.control:focus-visible,\n :host(:not([invalid]):not(:state(user-invalid))[data-state='focus-visible']) button.control {\n border-color: var(--pk-color-sky-600);\n box-shadow: var(--pk-input-focus-shadow);\n }\n\n .control.is-disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n .trigger {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n min-width: 0;\n padding: 0;\n border: 0;\n background: transparent;\n color: inherit;\n font: inherit;\n cursor: inherit;\n outline: none;\n }\n\n .control > .trigger:not(.trigger--icon) {\n flex: 0 1 auto;\n justify-content: flex-start;\n }\n\n .trigger--icon {\n width: 1.25rem;\n }\n\n .trigger-start {\n display: none;\n flex: 0 0 auto;\n align-items: center;\n }\n\n .trigger-start.has-decoration {\n display: inline-flex;\n }\n\n .control-start,\n .control-end {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n line-height: 0;\n color: var(--pk-color-gray-600);\n }\n\n slot[name='start']::slotted(svg),\n slot[name='end']::slotted(svg) {\n width: var(--pk-select-decoration-size);\n height: var(--pk-select-decoration-size);\n }\n\n .value {\n flex: 1 1 auto;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n text-align: left;\n }\n\n .icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n line-height: 0;\n pointer-events: none;\n color: var(--pk-color-gray-600);\n }\n\n /* Extra space before the expand chevron (control gap stays for start icon ↔ label). */\n .control > .icon,\n .control > .trigger--icon {\n margin-inline-start: 0.25rem;\n }\n\n .icon svg {\n display: block;\n width: 0.75rem;\n height: 0.75rem;\n }\n\n .tags {\n display: flex;\n flex: 0 1 auto;\n flex-wrap: wrap;\n gap: 0.25rem;\n min-width: 0;\n }\n\n .tag {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n max-width: 10ch;\n padding: 0.125rem 0.375rem;\n border-radius: var(--pk-radius-sm);\n background: var(--pk-color-gray-200);\n color: var(--pk-color-gray-800);\n font-size: 12px;\n line-height: 1.3;\n }\n\n .tag-label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .tag-remove {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 0.875rem;\n height: 0.875rem;\n padding: 0;\n border: 0;\n border-radius: var(--pk-radius-sm);\n background: transparent;\n color: var(--pk-color-gray-600);\n cursor: pointer;\n }\n\n .tag-remove:hover {\n background: rgb(0 0 0 / 8%);\n }\n\n .clear-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 1.25rem;\n height: 1.25rem;\n padding: 0;\n border: 0;\n border-radius: var(--pk-radius-sm);\n background: transparent;\n color: var(--pk-color-gray-600);\n cursor: pointer;\n flex-shrink: 0;\n }\n\n .clear-button:hover {\n background: rgb(0 0 0 / 6%);\n color: var(--pk-color-gray-800);\n }\n\n .value-input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n\n .panel ::slotted(pk-separator) {\n margin: 4px 0;\n }\n\n .panel {\n width: max-content;\n min-width: var(--pk-select-anchor-width, 8rem);\n max-height: 16rem;\n overflow: auto;\n padding: 0;\n border: 0;\n border-radius: var(--pk-radius-md);\n background: var(--pk-color-white);\n box-shadow: var(--pk-shadow-popup);\n color: var(--pk-color-gray-700);\n outline: none;\n }\n\n .panel[hidden] {\n display: none !important;\n }\n\n :host([invalid]) .control,\n :host(:state(user-invalid)) .control {\n border-color: var(--pk-color-rose-600);\n }\n\n :host([invalid]) button.control:focus-visible,\n :host([invalid][data-state='focus-visible']) button.control,\n :host(:state(user-invalid)) button.control:focus-visible,\n :host(:state(user-invalid)[data-state='focus-visible']) button.control {\n border-color: var(--pk-color-rose-600);\n box-shadow: var(--pk-input-invalid-focus-shadow);\n }\n\n :host([size='xs']) {\n --pk-select-item-min-height: 0;\n --pk-select-item-padding-block: 4px;\n --pk-select-item-padding-inline: 8px;\n --pk-select-item-padding-inline-end: 1.75rem;\n --pk-select-item-font-size: 11px;\n --pk-select-item-line-height: 1.25;\n /* v1 SelectLabel xs: text-[11px] */\n --pk-select-group-label-font-size: 11px;\n --pk-select-decoration-size: 0.625rem;\n }\n\n :host([size='xs']) .control {\n border-radius: var(--pk-radius-sm);\n /* Match trigger line-height to the compact item token (default is 1.25rem). */\n line-height: var(--pk-select-item-line-height, 1.25);\n }\n\n :host([size='xs']) .icon svg {\n width: 0.625rem;\n height: 0.625rem;\n }\n\n /* Options live in light DOM; ::slotted pushes size tokens onto each pk-option\n * host so the open listbox matches the trigger (inheritance alone is flaky when\n * the panel is promoted to the popover top layer). */\n :host([size='xs']) ::slotted(pk-option) {\n --pk-select-item-min-height: 0;\n --pk-select-item-padding-block: 4px;\n --pk-select-item-padding-inline: 8px;\n --pk-select-item-padding-inline-end: 1.75rem;\n --pk-select-item-font-size: 11px;\n --pk-select-item-line-height: 1.25;\n --pk-select-item-indicator-size: 0.625rem;\n }\n\n :host([size='xs']) .panel {\n max-height: 12rem;\n }\n\n /* Editable-table cells only (class set by pk-editable-table) — compact chip + menu. */\n :host(.cell-pk-control) {\n --pk-select-item-min-height: 0;\n --pk-select-item-padding-block: 5px;\n --pk-select-item-padding-inline: 8px;\n --pk-select-item-padding-inline-end: 1.5rem;\n --pk-select-item-font-size: 11px;\n --pk-select-item-line-height: 1.2;\n /* Compact table chip — match xs label size. */\n --pk-select-group-label-font-size: 11px;\n --pk-select-decoration-size: 0.625rem;\n --pk-select-item-indicator-size: 0.625rem;\n }\n\n :host(.cell-pk-control) .control {\n border-radius: var(--pk-radius-sm);\n line-height: var(--pk-select-item-line-height, 1.2);\n }\n\n :host(.cell-pk-control) ::slotted(pk-option) {\n --pk-select-item-min-height: 0;\n --pk-select-item-padding-block: 5px;\n --pk-select-item-padding-inline: 8px;\n --pk-select-item-padding-inline-end: 1.5rem;\n --pk-select-item-font-size: 11px;\n --pk-select-item-line-height: 1.2;\n --pk-select-item-indicator-size: 0.625rem;\n }\n\n :host(.cell-pk-control) .panel {\n max-height: 11rem;\n }\n\n :host([size='sm']) {\n --pk-select-item-min-height: 0;\n --pk-select-item-padding-block: 6px;\n --pk-select-item-padding-inline: 10px;\n --pk-select-item-padding-inline-end: 1.75rem;\n --pk-select-item-font-size: 12px;\n --pk-select-item-indicator-inset: 0.625rem;\n /* v1 SelectLabel sm: text-[12px] */\n --pk-select-group-label-font-size: 12px;\n --pk-select-decoration-size: 0.6875rem;\n }\n\n :host([size='sm']) .control {\n border-radius: var(--pk-radius-md);\n }\n\n :host([size='sm']) .icon svg {\n width: 0.6875rem;\n height: 0.6875rem;\n }\n\n :host([size='lg']) {\n --pk-select-item-padding-block: 8px;\n --pk-select-item-padding-inline: 12px;\n --pk-select-item-font-size: var(--pk-font-size-base);\n --pk-select-item-indicator-inset: 0.75rem;\n /* v1 SelectLabel lg: text-sm → 14px */\n --pk-select-group-label-font-size: 14px;\n --pk-select-decoration-size: 1rem;\n }\n\n :host([size='xl']) {\n --pk-select-item-padding-block: 10px;\n --pk-select-item-padding-inline: 14px;\n --pk-select-item-padding-inline-end: 2.25rem;\n --pk-select-item-font-size: var(--pk-font-size-base);\n --pk-select-item-indicator-inset: 0.875rem;\n /* v1 SelectLabel xl: text-base → 16px */\n --pk-select-group-label-font-size: 16px;\n --pk-select-decoration-size: 1.125rem;\n }\n\n :host([size='xl']) .icon svg {\n width: 0.875rem;\n height: 0.875rem;\n }\n }\n`,\n];\n","import { html, nothing } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query, state } from '../../decorators.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport type { PropertyValues } from 'lit';\n\nimport { chevronDown, renderIconHtml } from '../../icons/index.js';\n\nimport { isTopDismissible, registerDismissible, unregisterDismissible } from '../../a11y/dismissible-stack.js';\nimport { scrollIntoView } from '../../a11y/scroll-lock.js';\nimport { uniqueId } from '../../a11y/focus.js';\nimport { PkFormAssociatedElement } from '../../base/pk-form-associated-element.js';\nimport { HasSlotController } from '../../internal/has-slot.js';\nimport { PkClearEvent } from '../../events/pk-clear.js';\nimport {\n PkAfterHideEvent,\n PkAfterShowEvent,\n PkHideEvent,\n PkShowEvent,\n type PkOverlaySource,\n} from '../../events/overlay-lifecycle.js';\nimport type { PkValidator } from '../../validators/types.js';\nimport { MirrorValidator } from '../../validators/mirror-validator.js';\n// Keep the internal element registered when production builds erase type-only imports.\nimport '../popup/pk-popup.js';\nimport type { PkPopup, PkPopupPlacement } from '../popup/pk-popup.js';\nimport {\n createTypeToSelectHandler,\n handleListboxKeyDown,\n isListboxTypeToSelectKey,\n LISTBOX_NAVIGATION_KEYS,\n} from '../../utils/listbox-keyboard.js';\nimport {\n syncPopupPlacementAnimation,\n waitForPopupReposition,\n} from '../../utils/popup-placement-animation.js';\nimport { isEventInsideOverlay, isPointerInsideOverlay } from '../../utils/popup-pointer.js';\nimport { syncListboxSeparators } from '../../internal/sync-listbox-separators.js';\nimport type { PkOption } from './pk-option.js';\nimport type { PkOptionGroup } from './pk-option-group.js';\nimport { pkSelectStyles } from './pk-select.styles.js';\n\nexport type PkSelectSize = 'xs' | 'sm' | 'default' | 'lg' | 'xl';\n\nconst CHEVRON_ICON = renderIconHtml(chevronDown);\n\n/**\n * Select — slotted `pk-option` children, form-associated, clearable, multiselect tags.\n *\n * @slot start - Presentational decoration before the trigger label (e.g. icons)\n * @slot end - Presentational decoration before the expand chevron\n * @slot - `pk-option` and `pk-option-group` items\n *\n * @csspart control - Trigger control wrapper\n * @csspart start - Host start decoration container\n * @csspart end - Host end decoration container\n * @csspart trigger-start - Mirrored start decoration from the selected option\n * @csspart trigger - Select trigger button\n * @csspart panel - Listbox panel\n *\n * @cssproperty [--pk-select-fill=var(--pk-color-slate-250)] - Closed trigger background.\n * @cssproperty [--pk-select-fill-hover=var(--pk-color-slate-300)] - Closed trigger hover background.\n * @cssproperty [--pk-select-anchor-width] - Panel min-width; set from the trigger width while open.\n * @cssproperty [--pk-select-decoration-size=0.875rem] - Start/end decoration glyph size.\n *\n * @event pk-show - Emitted when the listbox begins to open.\n * @event pk-after-show - Emitted after the listbox opens and enter motion finishes.\n * @event {{ source: string }} pk-hide - Emitted when the listbox begins to close (cancelable).\n * @event pk-after-hide - Emitted after the listbox closes and exit motion finishes.\n * @event {{ open: boolean }} pk-open-change - Emitted when `open` changes after show/hide settles.\n * @event {{ value: string, values: string[] }} pk-change - Emitted when the selection changes.\n * @event pk-clear - Emitted when the value is cleared via the clear control.\n * @event pk-invalid - Emitted when constraint validation fails.\n * @event input - Native input event when the selection changes.\n * @event change - Native change event when the selection changes.\n *\n * @method show - Opens the listbox.\n * @method hide - Closes the listbox.\n * @method checkValidity - Runs constraint validation without showing the browser UI.\n * @method reportValidity - Runs constraint validation and shows the browser UI when invalid.\n * @method setCustomValidity - Sets or clears a custom validation message.\n * @method resetValidity - Clears custom errors and re-syncs validity state.\n *\n * @dependency pk-popup - Positioned listbox panel host.\n */\n@customElement('pk-select')\nexport class PkSelect extends PkFormAssociatedElement {\n static override styles = pkSelectStyles;\n\n static override get validators(): PkValidator[] {\n return [\n ...super.validators,\n MirrorValidator(),\n {\n observedAttributes: ['required'],\n checkValidity: (element) => {\n const select = element as PkSelect;\n const result = {\n message: 'Please select an item in the list.',\n isValid: true,\n invalidKeys: [] as ReturnType<PkValidator['checkValidity']>['invalidKeys'],\n };\n\n if (!select.required) {\n return result;\n }\n\n const missing = select.multiple ? select.values.length === 0 : !select.value;\n\n if (!missing) {\n return result;\n }\n\n result.isValid = false;\n result.invalidKeys.push('valueMissing');\n return result;\n },\n },\n ];\n }\n\n override assumeInteractionOn = ['blur', 'input'];\n\n /** Whether the listbox is open. Prefer `show()` / `hide()` for animated transitions. */\n @property({ type: Boolean, reflect: true })\n open = false;\n\n /** Allow more than one option to be selected (tag display). */\n @property({ type: Boolean, reflect: true })\n multiple = false;\n\n /** Preferred listbox placement; may flip to stay in viewport. */\n @property({ reflect: true })\n placement: PkPopupPlacement = 'bottom-start';\n\n /** Gap between the trigger and listbox panel in px. */\n @property({ attribute: 'side-offset', type: Number })\n sideOffset = 4;\n\n /** Alias of `with-clear` — shows a clear control when the value is non-empty. */\n @property({ type: Boolean, reflect: true })\n clearable = false;\n\n /** Shows a clear control when the value is non-empty. */\n @property({ attribute: 'with-clear', type: Boolean })\n withClear = false;\n\n /** Marks the control invalid (visual + ARIA). */\n @property({ type: Boolean, reflect: true })\n invalid = false;\n\n /** Shared CP size scale for the closed trigger and list items. */\n @property({ reflect: true })\n size: PkSelectSize = 'default';\n\n /** When `full`, the trigger stretches to the host width. */\n @property({ reflect: true })\n width?: 'full';\n\n /** Prompt shown when nothing is selected. Empty by default. */\n @property()\n placeholder = '';\n\n /** Selected value (single-select). Empty string when cleared. */\n @property()\n value = '';\n\n /** Initial value before user interaction (form reset baseline). */\n @property({ attribute: 'default-value' })\n defaultValue = '';\n\n /** Selected values when `multiple` is set. Property-only (not an attribute). */\n @property({ type: Array, attribute: false })\n values: string[] = [];\n\n /** Initial multi values before user interaction. Property-only. */\n @property({ attribute: false })\n defaultValues: string[] = [];\n\n /** Accessible name for the trigger when no visible label is present. */\n @property({ attribute: 'aria-label' })\n ariaLabel: string | null = null;\n\n /**\n * Whether arrow-key focus loops from the last option back to the first (and vice versa).\n * Base UI `Select` has no equivalent; default: `false`.\n */\n @property({ attribute: 'loop-focus', type: Boolean })\n loopFocus = false;\n\n private readonly hasSlotController = new HasSlotController(this, 'start', 'end');\n\n private readonly listboxId = uniqueId('pk-select-listbox');\n private readonly triggerId = uniqueId('pk-select-trigger');\n\n @query('.trigger-start')\n private triggerStartElement?: HTMLSpanElement;\n\n @query('pk-popup')\n private popupElement!: PkPopup;\n\n @query('.control')\n private controlElement!: HTMLElement;\n\n @query('button.control, .control > button.trigger')\n private triggerButton?: HTMLButtonElement;\n\n @query('.value-input')\n override input!: HTMLInputElement;\n\n private get panelElement(): HTMLDivElement | null {\n return this.popupElement?.getContentElement() as HTMLDivElement | null ?? null;\n }\n\n private options: PkOption[] = [];\n\n @state()\n private highlightedIndex = 0;\n\n private dismissRegistered = false;\n private panelEventTarget: HTMLElement | null = null;\n private typeToSelect = createTypeToSelectHandler([], () => {});\n private optionsObserver?: MutationObserver;\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 override connectedCallback(): void {\n this.refreshOptions();\n super.connectedCallback();\n this.addEventListener('pk-listbox-keydown', this.handleListboxKeyDownEvent as EventListener);\n this.addEventListener('keydown', this.onKeyDown);\n this.optionsObserver = new MutationObserver(() => {\n this.handleOptionsMutation({ render: true });\n });\n this.optionsObserver.observe(this, { childList: true, subtree: true });\n }\n\n override disconnectedCallback(): void {\n this.unbindPanelEvents();\n this.removeEventListener('pk-listbox-keydown', this.handleListboxKeyDownEvent as EventListener);\n this.removeEventListener('keydown', this.onKeyDown);\n this.optionsObserver?.disconnect();\n void this.closePanel('api');\n super.disconnectedCallback();\n }\n\n override updated(changed: PropertyValues): void {\n if (changed.has('value') || changed.has('values') || changed.has('multiple')) {\n this.applySelection();\n }\n\n if (changed.has('values') || changed.has('multiple')) {\n this.syncFormValue();\n }\n\n super.updated(changed);\n }\n\n private getOptionElements(): PkOption[] {\n const portaled = this.popupElement?.getContentElement()?.querySelectorAll('pk-option');\n\n if (portaled && portaled.length > 0) {\n return [...portaled];\n }\n\n return [...this.querySelectorAll('pk-option')];\n }\n\n private handleOptionsMutation = (options: { render?: boolean } = {}): void => {\n const next = this.getOptionElements();\n const changed = next.length !== this.options.length\n || next.some((option, index) => option !== this.options[index]);\n\n this.options = next;\n this.applySelection();\n this.updateTypeToSelect();\n\n if (options.render !== false && changed) {\n this.requestUpdate();\n }\n };\n\n private refreshOptions(): void {\n this.handleOptionsMutation({ render: false });\n }\n\n private syncOptions = (): void => {\n this.handleOptionsMutation({ render: true });\n };\n\n /** Portaled listbox options are outside the host tree — listen on the panel instead. */\n private bindPanelEvents(): void {\n const panel = this.panelElement;\n\n if (!panel || panel === this.panelEventTarget) {\n return;\n }\n\n this.unbindPanelEvents();\n this.panelEventTarget = panel;\n panel.addEventListener('pk-option-select', this.handleOptionSelect as EventListener);\n panel.addEventListener('pk-option-highlight', this.handleOptionHighlight as EventListener);\n panel.addEventListener('pk-listbox-keydown', this.handleListboxKeyDownEvent as EventListener);\n }\n\n private unbindPanelEvents(): void {\n if (!this.panelEventTarget) {\n return;\n }\n\n this.panelEventTarget.removeEventListener('pk-option-select', this.handleOptionSelect as EventListener);\n this.panelEventTarget.removeEventListener('pk-option-highlight', this.handleOptionHighlight as EventListener);\n this.panelEventTarget.removeEventListener('pk-listbox-keydown', this.handleListboxKeyDownEvent as EventListener);\n this.panelEventTarget = null;\n }\n\n protected override get validationTarget(): HTMLElement | undefined {\n return this.input ?? this.triggerButton ?? this.controlElement;\n }\n\n protected override getAriaMirrorTarget(): HTMLElement | null {\n return this.triggerButton ?? this.controlElement ?? null;\n }\n\n protected override syncFormValue(): void {\n if (!this.name) {\n this.setFormValue(null);\n return;\n }\n\n if (this.multiple) {\n const formData = new FormData();\n\n for (const item of this.values) {\n formData.append(this.name, item);\n }\n\n this.setFormValue(formData);\n return;\n }\n\n this.setFormValue(this.value || '');\n }\n\n protected override resetToDefaultValue(): void {\n if (this.multiple) {\n this.values = [...this.defaultValues];\n } else {\n this.value = this.defaultValue;\n }\n\n this.applySelection();\n }\n\n protected override restoreFormState(state: string | File | FormData | null): void {\n if (state instanceof FormData && this.name) {\n this.values = state.getAll(this.name).map(String);\n return;\n }\n\n if (typeof state === 'string') {\n this.value = state;\n }\n }\n\n private isOptionInHiddenGroup(option: PkOption): boolean {\n const group = option.closest('pk-option-group') as PkOptionGroup | null;\n\n return Boolean(group?.hidden);\n }\n\n private getVisibleOptions(): PkOption[] {\n return this.options.filter((option) => !this.isOptionInHiddenGroup(option));\n }\n\n private getEnabledVisibleOptions(): PkOption[] {\n return this.getVisibleOptions().filter((option) => !option.disabled);\n }\n\n private isSelected(value: string): boolean {\n if (this.multiple) {\n return this.values.includes(value);\n }\n\n return this.value === value;\n }\n\n private applySelection(): void {\n const visible = this.getVisibleOptions();\n\n for (const option of this.options) {\n option.selected = this.isSelected(option.value);\n option.hidden = !visible.includes(option);\n option.optionId = `${this.listboxId}-option-${option.value}`;\n }\n\n for (const group of this.querySelectorAll('pk-option-group')) {\n const groupOptions = [...group.querySelectorAll('pk-option')];\n group.hidden = groupOptions.length > 0 && groupOptions.every((option) => option.hidden);\n }\n\n syncListboxSeparators(this);\n\n this.syncValueInput();\n this.syncTriggerDecorations();\n\n if (this.open) {\n this.syncHighlight();\n }\n }\n\n private syncValueInput(): void {\n if (!this.input) {\n return;\n }\n\n if (this.multiple) {\n this.input.value = this.values.join(',');\n this.input.required = this.required;\n return;\n }\n\n this.input.value = this.value;\n this.input.required = this.required;\n }\n\n private getDisplayValue(): string {\n if (this.multiple) {\n const labels = this.getSelectedOptions()\n .map((option) => option.getLabel());\n\n return labels.length > 0 ? labels.join(', ') : this.placeholder;\n }\n\n const selected = this.options.find((option) => option.value === this.value);\n\n return selected?.getLabel() || this.placeholder;\n }\n\n private getSelectedOptions(): PkOption[] {\n return this.options.filter((option) => this.isSelected(option.value));\n }\n\n /**\n * Mirror the selected option's `slot=\"start\"` decorations into the trigger —\n * `pk-select` start/end decoration pattern.\n */\n private syncTriggerDecorations(): void {\n const container = this.triggerStartElement;\n\n if (!container || this.multiple) {\n return;\n }\n\n container.replaceChildren();\n container.classList.remove('has-decoration');\n\n const selected = this.options.find((option) => option.value === this.value);\n\n if (!selected) {\n return;\n }\n\n for (const element of selected.getStartElements()) {\n container.append(element.cloneNode(true));\n }\n\n container.classList.toggle('has-decoration', container.childElementCount > 0);\n }\n\n private hasSelection(): boolean {\n if (this.multiple) {\n return this.values.length > 0;\n }\n\n // Empty-string values are valid when an option declares them (e.g. \"Default\").\n return this.options.some((option) => option.value === this.value) || Boolean(this.value);\n }\n\n private syncHighlightedIndexToSelection(): void {\n if (this.multiple) {\n return;\n }\n\n const enabled = this.getEnabledVisibleOptions();\n\n if (enabled.length === 0) {\n return;\n }\n\n const selectedIndex = enabled.findIndex((option) => option.value === this.value);\n\n if (selectedIndex >= 0) {\n this.highlightedIndex = selectedIndex;\n }\n }\n\n private syncHighlight(): void {\n const enabled = this.getEnabledVisibleOptions();\n\n for (const option of this.options) {\n option.highlighted = false;\n option.focusIndex = -1;\n }\n\n if (enabled.length === 0) {\n this.highlightedIndex = 0;\n return;\n }\n\n if (this.highlightedIndex >= enabled.length) {\n this.highlightedIndex = 0;\n }\n\n const highlighted = enabled[this.highlightedIndex];\n\n if (highlighted && this.panelElement) {\n highlighted.highlighted = true;\n highlighted.focusIndex = 0;\n scrollIntoView(highlighted, this.panelElement, 'vertical', 'auto');\n }\n }\n\n private updateTypeToSelect(): void {\n this.typeToSelect = createTypeToSelectHandler(\n this.getEnabledVisibleOptions() as unknown as HTMLElement[],\n (index) => {\n this.highlightedIndex = index;\n this.syncHighlight();\n this.getEnabledVisibleOptions()[index]?.focusControl();\n },\n );\n }\n\n private togglePanel = (event?: Event): void => {\n event?.preventDefault();\n event?.stopPropagation();\n\n if (this.disabled || this.closing) {\n return;\n }\n\n if (this.open) {\n void this.closePanel('api');\n } else {\n void this.openPanel();\n }\n };\n\n private getPopupAnchor(): HTMLElement | null {\n return this.controlElement ?? null;\n }\n\n private getActiveDescendantId(): string | null {\n const enabled = this.getEnabledVisibleOptions();\n const highlighted = enabled[this.highlightedIndex];\n return highlighted?.optionId || null;\n }\n\n /** Opens the listbox. */\n async show(): Promise<void> {\n if (this.open || this.closing || this.disabled) {\n return;\n }\n\n await this.openPanel();\n }\n\n /** Closes the listbox. */\n async hide(source: PkOverlaySource = 'api'): Promise<void> {\n if (!this.open || this.closing) {\n return;\n }\n\n await this.closePanel(source);\n }\n\n private openPanel(): Promise<void> {\n const anchor = this.getPopupAnchor();\n\n if (!anchor || this.closing) {\n return Promise.resolve();\n }\n\n this.dispatchEvent(new PkShowEvent());\n this.closing = false;\n this.panelAnimated = false;\n this.open = true;\n this.popupElement.active = true;\n this.applySelection();\n this.syncHighlightedIndexToSelection();\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 const anchorWidth = anchor.getBoundingClientRect().width;\n this.style.setProperty('--pk-select-anchor-width', `${anchorWidth}px`);\n this.registerDismissHandlers();\n this.syncHighlight();\n this.updateTypeToSelect();\n\n return this.updateComplete.then(async () => {\n const placement = await waitForPopupReposition(this.popupElement, this.placement, 300, {\n requireEvent: true,\n });\n\n if (this.panelElement) {\n syncPopupPlacementAnimation(this.panelElement, placement);\n }\n\n // Flip data-open after placement so the shared enter animation can run.\n this.panelAnimated = true;\n this.bindPanelEvents();\n this.refreshOptions();\n this.getEnabledVisibleOptions()[this.highlightedIndex]?.focusControl();\n\n this.dispatchEvent(new PkAfterShowEvent());\n this.dispatchEvent(new CustomEvent('pk-open-change', {\n detail: { open: true },\n bubbles: true,\n composed: true,\n }));\n });\n }\n\n private async closePanel(source: PkOverlaySource = 'unknown'): Promise<void> {\n if (!this.open || this.closing) {\n return;\n }\n\n const hideEvent = new PkHideEvent(source);\n\n if (!this.dispatchEvent(hideEvent)) {\n return;\n }\n\n this.typeToSelect.reset();\n this.unbindPanelEvents();\n this.unregisterDismissHandlers();\n\n this.closing = true;\n this.panelAnimated = false;\n await this.waitForExitAnimation();\n\n this.open = false;\n this.closing = false;\n this.panelAnimated = false;\n\n if (this.panelElement) {\n this.panelElement.hidden = true;\n this.panelElement.removeAttribute('data-side');\n }\n\n this.popupElement.active = false;\n\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 if (this.shouldReturnFocusToTrigger(source)) {\n this.triggerButton?.focus({ preventScroll: true });\n } else {\n this.triggerButton?.blur();\n }\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 /** Base UI skips return focus on outside press — avoids an unwanted focus ring after light dismiss. */\n private shouldReturnFocusToTrigger(source: PkOverlaySource): boolean {\n return source !== 'light-dismiss' && source !== 'pointer-dismiss';\n }\n\n private registerDismissHandlers(): void {\n registerDismissible(this);\n this.dismissRegistered = true;\n document.addEventListener('pointerdown', this.onDocumentPointerDown, true);\n document.addEventListener('keydown', this.onDocumentKeyDown, true);\n }\n\n private unregisterDismissHandlers(): void {\n if (this.dismissRegistered) {\n unregisterDismissible(this);\n this.dismissRegistered = false;\n }\n\n document.removeEventListener('pointerdown', this.onDocumentPointerDown, true);\n document.removeEventListener('keydown', this.onDocumentKeyDown, true);\n }\n\n private onDocumentPointerDown = (event: PointerEvent): void => {\n if (this.isPointerInside(event)) {\n return;\n }\n\n void this.closePanel('light-dismiss');\n };\n\n private isPointerInside(event: PointerEvent): boolean {\n return isPointerInsideOverlay(event, {\n anchor: this.getPopupAnchor(),\n panel: this.panelElement,\n });\n };\n\n private onDocumentKeyDown = (event: KeyboardEvent): void => {\n if (!this.open) {\n return;\n }\n\n if (event.key === 'Escape') {\n if (!isTopDismissible(this)) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n void this.closePanel('escape');\n return;\n }\n\n const isListboxKey = LISTBOX_NAVIGATION_KEYS.has(event.key) || isListboxTypeToSelectKey(event);\n\n if (!isListboxKey) {\n return;\n }\n\n if (!isEventInsideOverlay(event, {\n anchor: this.getPopupAnchor(),\n panel: this.panelElement,\n })) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n this.onListboxKeyDown(event);\n };\n\n private handleOptionSelect = (event: CustomEvent<{ value: string }>): void => {\n const { value } = event.detail;\n\n if (this.multiple) {\n this.values = this.values.includes(value)\n ? this.values.filter((v) => v !== value)\n : [...this.values, value];\n } else {\n this.value = value;\n void this.closePanel('api');\n }\n\n this.applySelection();\n this.emitValueChange();\n };\n\n private handleOptionHighlight = (event: CustomEvent<{ value: string }>): void => {\n if (!this.open) {\n return;\n }\n\n const enabled = this.getEnabledVisibleOptions();\n const index = enabled.findIndex((option) => option.value === event.detail.value);\n\n if (index === -1 || index === this.highlightedIndex) {\n return;\n }\n\n this.highlightedIndex = index;\n this.syncHighlight();\n };\n\n private removeTag(value: string, event: Event): void {\n event.preventDefault();\n event.stopPropagation();\n this.values = this.values.filter((item) => item !== value);\n this.applySelection();\n this.emitValueChange();\n }\n\n private handleClear(event: Event): void {\n event.preventDefault();\n event.stopPropagation();\n\n if (this.multiple) {\n this.values = [];\n } else {\n this.value = '';\n }\n\n this.applySelection();\n this.dispatchEvent(new PkClearEvent());\n this.emitValueChange();\n this.triggerButton?.focus();\n }\n\n private emitValueChange(): void {\n this.dispatchEvent(new CustomEvent('pk-change', {\n detail: {\n value: this.multiple ? [...this.values] : this.value,\n },\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 onKeyDown = (event: KeyboardEvent): void => {\n if (!this.open) {\n if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n void this.openPanel();\n }\n\n return;\n }\n\n this.onListboxKeyDown(event);\n };\n\n private onListboxKeyDown(event: KeyboardEvent): void {\n const enabled = this.getEnabledVisibleOptions();\n\n this.highlightedIndex = handleListboxKeyDown(event, {\n items: enabled as unknown as HTMLElement[],\n currentIndex: this.highlightedIndex,\n multiselect: this.multiple,\n loop: this.loopFocus,\n onSelect: (index) => {\n this.highlightedIndex = index;\n this.syncHighlight();\n },\n focusItem: (index) => {\n enabled[index]?.focusControl();\n },\n onClose: () => { void this.closePanel('escape'); },\n });\n\n if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {\n this.typeToSelect.handleKey(event);\n }\n }\n\n private handleListboxKeyDownEvent = (event: CustomEvent<{ keyboardEvent: KeyboardEvent }>): void => {\n if (!this.open) {\n return;\n }\n\n this.onListboxKeyDown(event.detail.keyboardEvent);\n };\n\n private renderTags() {\n return this.getSelectedOptions().map((option) => html`\n <span class=\"tag\" part=\"tag\">\n <span class=\"tag-label\">${option.getLabel()}</span>\n <button\n type=\"button\"\n class=\"tag-remove\"\n part=\"tag-remove\"\n aria-label=${`Remove ${option.getLabel()}`}\n @click=${(event: Event) => this.removeTag(option.value, event)}\n >\n ×\n </button>\n </span>\n `);\n }\n\n private renderChevronIcon() {\n return html`\n <span class=\"icon\" aria-hidden=\"true\">${unsafeSVG(CHEVRON_ICON)}</span>\n `;\n }\n\n private renderHostDecorationSlot(name: 'start' | 'end') {\n if (!this.hasSlotController.test(name)) {\n return html`<slot name=${name} hidden></slot>`;\n }\n\n const className = name === 'start' ? 'control-start' : 'control-end';\n\n return html`\n <span part=${name} class=${className}>\n <slot name=${name}></slot>\n </span>\n `;\n }\n\n override render() {\n const displayValue = this.getDisplayValue();\n const isPlaceholder = !this.hasSelection();\n const showClear = (this.clearable || this.withClear) && this.hasSelection() && !this.disabled;\n\n return html`\n <input\n class=\"value-input\"\n part=\"value-input\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n .value=${this.multiple ? this.values.join(',') : this.value}\n ?required=${this.required}\n @input=${() => this.updateValidity()}\n />\n ${this.multiple\n ? html`\n <div\n part=\"control\"\n class=${classMap({\n control: true,\n 'is-disabled': this.disabled,\n })}\n >\n ${this.renderHostDecorationSlot('start')}\n ${this.hasSelection()\n ? html`\n <div class=\"tags\" part=\"tags\">${this.renderTags()}</div>\n ${showClear\n ? html`\n <button\n type=\"button\"\n class=\"clear-button\"\n part=\"clear-button\"\n aria-label=\"Clear selection\"\n @click=${this.handleClear}\n >\n ×\n </button>\n `\n : nothing}\n `\n : html`\n <button\n part=\"trigger\"\n type=\"button\"\n class=\"trigger\"\n id=${this.triggerId}\n ?disabled=${this.disabled}\n aria-label=${this.ariaLabel ?? nothing}\n aria-haspopup=\"listbox\"\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-controls=${this.listboxId}\n @click=${this.togglePanel}\n >\n <span class=\"value is-placeholder\">${this.placeholder}</span>\n </button>\n `}\n ${this.renderHostDecorationSlot('end')}\n <button\n type=\"button\"\n class=\"trigger trigger--icon\"\n part=\"trigger expand-button\"\n aria-label=\"Toggle options\"\n ?disabled=${this.disabled}\n @click=${this.togglePanel}\n >\n ${this.renderChevronIcon()}\n </button>\n </div>\n `\n : html`\n <button\n part=\"control\"\n type=\"button\"\n class=${classMap({\n control: true,\n 'is-disabled': this.disabled,\n })}\n id=${this.triggerId}\n ?disabled=${this.disabled}\n aria-label=${this.ariaLabel ?? nothing}\n aria-haspopup=\"listbox\"\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-controls=${this.listboxId}\n @click=${this.togglePanel}\n >\n ${this.renderHostDecorationSlot('start')}\n <span part=\"trigger-start\" class=\"trigger-start\"></span>\n <span\n class=${classMap({\n value: true,\n 'is-placeholder': isPlaceholder,\n })}\n >${displayValue}</span>\n ${showClear\n ? html`\n <span\n class=\"clear-button\"\n part=\"clear-button\"\n role=\"button\"\n tabindex=\"-1\"\n aria-label=\"Clear selection\"\n @click=${this.handleClear}\n >\n ×\n </span>\n `\n : nothing}\n ${this.renderHostDecorationSlot('end')}\n ${this.renderChevronIcon()}\n </button>\n `}\n <pk-popup\n .anchor=${this.getPopupAnchor() ?? ''}\n .placement=${this.placement}\n .distance=${this.sideOffset}\n .sync=${'width'}\n flip\n shift\n >\n <div\n part=\"panel\"\n class=${classMap({\n panel: true,\n 'pk-popup-content': true,\n closing: this.closing,\n })}\n id=${this.listboxId}\n role=\"listbox\"\n aria-multiselectable=${this.multiple ? 'true' : 'false'}\n tabindex=\"-1\"\n ?hidden=${!this.open && !this.closing}\n data-open=${this.panelAnimated && !this.closing ? '' : nothing}\n @slotchange=${this.syncOptions}\n >\n <slot></slot>\n </div>\n </pk-popup>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-select': PkSelect;\n }\n}\n"],"mappings":"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"}
@@ -1,6 +1,6 @@
1
1
  import { a as query, i as property, o as state, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
2
2
  import { n as syncStandaloneControlAria } from "./control-aria-B2QMq4ji.js";
3
- import { t as PkFormAssociatedElement } from "./pk-form-associated-element-CCQALRGB.js";
3
+ import { t as PkFormAssociatedElement } from "./pk-form-associated-element-GxX5lbnk.js";
4
4
  import { t as MirrorValidator } from "./mirror-validator-DCjNYrrx.js";
5
5
  import { t as RequiredValidator } from "./required-validator-CEg8dvjS.js";
6
6
  import { t as HasSlotController } from "./has-slot-8BvCt_qo.js";
@@ -338,4 +338,4 @@ PkTextarea = __decorate([customElement("pk-textarea")], PkTextarea);
338
338
  //#endregion
339
339
  export { PkTextarea as t };
340
340
 
341
- //# sourceMappingURL=pk-textarea-CYM2tK88.js.map
341
+ //# sourceMappingURL=pk-textarea-Dhj1WFLH.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"pk-textarea-CYM2tK88.js","names":[],"sources":["../../src/components/textarea/pk-textarea.styles.ts","../../src/components/textarea/pk-textarea.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkTextareaStyles = css`\n @layer pk-component {\n :host {\n display: block;\n width: 100%;\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 .textarea {\n display: block;\n width: 100%;\n min-height: 5rem;\n margin: 0;\n padding: 7px 10px;\n border: var(--pk-input-border);\n border-radius: var(--pk-textarea-border-radius, var(--pk-radius-md));\n background: var(--pk-input-bg);\n background-clip: padding-box;\n /* Craft CP body / field value text. */\n color: var(--pk-color-gray-700);\n font: inherit;\n line-height: 1.4;\n resize: vertical;\n appearance: none;\n box-sizing: border-box;\n outline: none;\n transition: border-color 0.12s ease, box-shadow 0.12s ease;\n }\n\n .textarea::placeholder {\n color: var(--pk-input-placeholder-color, var(--pk-color-gray-400));\n }\n\n /* Craft: focus is box-shadow only — do not also flip border-color (double ring). */\n :host(:not([invalid]):not(:state(user-invalid))) .textarea:focus,\n :host(:not([invalid]):not(:state(user-invalid))) .textarea:focus-visible,\n :host([data-state='focus-visible']:not([invalid]):not(:state(user-invalid))) .textarea {\n box-shadow: var(--pk-input-focus-shadow);\n }\n\n .textarea:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n background: var(--pk-color-gray-50);\n }\n\n :host([invalid]) .textarea,\n :host(:state(user-invalid)) .textarea {\n border-color: var(--pk-color-rose-600);\n }\n\n :host([invalid]) .textarea:focus,\n :host([invalid]) .textarea:focus-visible,\n :host([invalid][data-state='focus-visible']) .textarea,\n :host(:state(user-invalid)) .textarea:focus,\n :host(:state(user-invalid)) .textarea:focus-visible {\n box-shadow: var(--pk-input-invalid-focus-shadow);\n }\n\n /* Editable-table cells (v1): flush into the row and fill cell height.\n * Chain height through form-control — percentage on .textarea alone\n * doesn't resolve when the wrapper sizes to content (rows / min-height). */\n :host([fit-cell]),\n :host([data-editable-table-input]) {\n display: block;\n height: 100%;\n min-height: 100%;\n box-sizing: border-box;\n overflow: hidden;\n }\n\n :host([fit-cell]) .form-control,\n :host([data-editable-table-input]) .form-control {\n display: flex;\n flex-direction: column;\n height: 100%;\n min-height: 100%;\n }\n\n :host([fit-cell]) .textarea,\n :host([data-editable-table-input]) .textarea {\n flex: 1 1 auto;\n border: none;\n border-radius: 0;\n background: transparent;\n box-shadow: none;\n height: 100%;\n min-height: 0;\n max-height: 100%;\n /* Match text-cell inset (v1 py-1.5 / px-2). 0.5rem block padding +\n * line-height 1.4 overflows the 34px et cell and shows a scrollbar\n * even for empty / single-line notes. */\n padding: 0.375rem 0.5rem;\n line-height: 1.25;\n overflow-x: hidden;\n overflow-y: auto;\n resize: none;\n }\n\n :host([fit-cell]:not([invalid]):not(:state(user-invalid))) .textarea:focus,\n :host([fit-cell]:not([invalid]):not(:state(user-invalid))) .textarea:focus-visible,\n :host([fit-cell][data-state='focus-visible']:not([invalid]):not(:state(user-invalid))) .textarea,\n :host([data-editable-table-input]:not([invalid]):not(:state(user-invalid))) .textarea:focus,\n :host([data-editable-table-input]:not([invalid]):not(:state(user-invalid))) .textarea:focus-visible,\n :host([data-editable-table-input][data-state='focus-visible']:not([invalid]):not(:state(user-invalid))) .textarea {\n border: none;\n box-shadow: inset 0 0 0 1px var(--pk-color-gray-200);\n }\n\n :host([fit-cell][invalid]) .textarea,\n :host([fit-cell]:state(user-invalid)) .textarea,\n :host([fit-cell][invalid]) .textarea:focus,\n :host([fit-cell][invalid]) .textarea:focus-visible,\n :host([fit-cell]:state(user-invalid)) .textarea:focus,\n :host([fit-cell]:state(user-invalid)) .textarea:focus-visible,\n :host([data-editable-table-input][invalid]) .textarea,\n :host([data-editable-table-input]:state(user-invalid)) .textarea,\n :host([data-editable-table-input][invalid]) .textarea:focus,\n :host([data-editable-table-input][invalid]) .textarea:focus-visible,\n :host([data-editable-table-input]:state(user-invalid)) .textarea:focus,\n :host([data-editable-table-input]:state(user-invalid)) .textarea:focus-visible {\n border: none;\n box-shadow: inset 0 0 0 1px var(--pk-color-rose-600);\n }\n }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property, query, state } from '../../decorators.js';\nimport type { PropertyValues } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\n\nimport { formControlStyles } from '../../base/form-control.styles.js';\nimport { PkFormAssociatedElement } from '../../base/pk-form-associated-element.js';\nimport { uniqueId } from '../../a11y/focus.js';\nimport { HasSlotController } from '../../internal/has-slot.js';\nimport { syncStandaloneControlAria } from '../../internal/control-aria.js';\nimport { hasInstructionContent, readLegacyInstructions } from '../../internal/field-labels.js';\nimport { MirrorValidator, RequiredValidator } from '../../validators/index.js';\nimport { pkTextareaStyles } from './pk-textarea.styles.js';\n\nexport type PkTextareaSize = 'default' | 'sm';\n\n/**\n * Multiline text field — API, Craft visuals.\n *\n * @slot label\n * @slot instructions\n * @slot hint - Alias for `instructions`\n *\n * @csspart form-control - Wrapper\n * @csspart label - Label\n * @csspart instructions - Instructions\n * @csspart textarea - Native textarea\n */\n@customElement('pk-textarea')\nexport class PkTextarea extends PkFormAssociatedElement {\n static override styles = [formControlStyles, pkTextareaStyles];\n\n static override get validators() {\n return [...super.validators, MirrorValidator(), RequiredValidator()];\n }\n\n override assumeInteractionOn = ['blur', 'input'];\n\n private readonly hasSlotController = new HasSlotController(this, 'instructions', 'hint', 'label');\n\n private readonly controlId = uniqueId('pk-textarea');\n\n @query('textarea')\n override input!: HTMLTextAreaElement;\n\n @property()\n placeholder = '';\n\n private _value: string | null = null;\n\n get value(): string {\n if (this.valueHasChanged) {\n return this._value ?? '';\n }\n\n return this._value ?? this.defaultValue ?? '';\n }\n\n @state()\n set value(val: string | null) {\n const next = val ?? '';\n\n if (this._value === next) {\n return;\n }\n\n this.valueHasChanged = true;\n this._value = next;\n }\n\n @property({ attribute: 'value', reflect: true })\n defaultValue: string | null = null;\n\n @property({ reflect: true })\n size: PkTextareaSize = 'default';\n\n @property()\n label = '';\n\n @property()\n instructions = '';\n\n @property({ type: Boolean, reflect: true })\n readonly = false;\n\n @property({ type: Boolean, reflect: true })\n invalid = false;\n\n /** Flush + fill parent cell (editable tables). */\n @property({ type: Boolean, reflect: true, attribute: 'fit-cell' })\n fitCell = false;\n\n /** Native `rows` — use `1` in table cells so intrinsic height doesn't overflow. */\n @property({ type: Number })\n rows?: number;\n\n @property({ type: Number, attribute: 'max-length' })\n maxlength?: number;\n\n @property({ attribute: 'with-label', type: Boolean })\n withLabel = false;\n\n @property({ attribute: 'with-instructions', type: Boolean })\n withInstructions = false;\n\n override connectedCallback(): void {\n this.instructions = readLegacyInstructions(this, this.instructions);\n\n if (this.hasAttribute('with-hint')) {\n this.withInstructions = true;\n }\n\n super.connectedCallback();\n }\n\n protected override syncFormValue(): void {\n this.setValue(this.value || '');\n }\n\n protected override resetToDefaultValue(): void {\n this.valueHasChanged = false;\n this._value = null;\n }\n\n protected override restoreFormState(state: string | File | FormData | null): void {\n if (typeof state === 'string') {\n this.value = state;\n }\n }\n\n override formResetCallback(): void {\n this.valueHasChanged = false;\n this._value = null;\n\n if (this.input) {\n this.input.value = this.defaultValue ?? '';\n }\n\n super.formResetCallback();\n }\n\n override updated(changed: PropertyValues): void {\n if (changed.has('value') || changed.has('defaultValue')) {\n this.setState('blank', !this.value);\n }\n\n super.updated(changed);\n }\n\n protected override syncStandaloneAria(): void {\n if (!this.input) {\n return;\n }\n\n const hasLabel = this.hasLabelContent();\n const hasInstructions = this.hasInstructionsContent();\n\n syncStandaloneControlAria({\n control: this.input,\n labelId: `${this.controlId}-label`,\n instructionsId: `${this.controlId}-instructions`,\n hasLabel,\n hasInstructions,\n required: this.required,\n invalid: this.invalid || !this.internals.validity.valid,\n });\n }\n\n private hasLabelContent(): boolean {\n return Boolean(this.label) || this.hasSlotController.test('label', this.withLabel);\n }\n\n private hasInstructionsContent(): boolean {\n return hasInstructionContent(\n (name, flag) => this.hasSlotController.test(name, flag),\n this.instructions,\n this.withInstructions,\n );\n }\n\n focus(options?: FocusOptions): void {\n this.input?.focus(options);\n }\n\n blur(): void {\n this.input?.blur();\n }\n\n private handleInput(): void {\n this.value = this.input.value;\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n }\n\n private handleChange(event: Event): void {\n this.value = this.input.value;\n event.stopPropagation();\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n }\n\n override render() {\n const hasLabel = this.hasLabelContent();\n const hasInstructions = this.hasInstructionsContent();\n\n return html`\n <div part=\"form-control\" class=\"form-control\">\n ${hasLabel\n ? html`\n <label\n part=\"label\"\n class=\"form-control__label\"\n id=${`${this.controlId}-label`}\n for=${`${this.controlId}-control`}\n >\n <slot name=\"label\">${this.label}</slot>\n </label>\n `\n : nothing}\n\n ${hasInstructions\n ? html`\n <p\n part=\"instructions\"\n class=\"form-control__instructions\"\n id=${`${this.controlId}-instructions`}\n >\n <slot name=\"instructions\">${this.instructions}</slot>\n <slot name=\"hint\"></slot>\n </p>\n `\n : nothing}\n\n <textarea\n part=\"textarea\"\n class=\"textarea\"\n id=${hasLabel ? `${this.controlId}-control` : nothing}\n rows=${ifDefined(this.fitCell ? (this.rows ?? 1) : this.rows)}\n .value=${live(this.value)}\n placeholder=${this.placeholder || nothing}\n maxlength=${ifDefined(this.maxlength)}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n ?required=${this.required}\n @input=${this.handleInput}\n @change=${this.handleChange}\n @focus=${() => this.dispatchEvent(new Event('focus', { bubbles: true, composed: true }))}\n @blur=${() => this.dispatchEvent(new Event('blur', { bubbles: true, composed: true }))}\n ></textarea>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-textarea': PkTextarea;\n }\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"pk-textarea-Dhj1WFLH.js","names":[],"sources":["../../src/components/textarea/pk-textarea.styles.ts","../../src/components/textarea/pk-textarea.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkTextareaStyles = css`\n @layer pk-component {\n :host {\n display: block;\n width: 100%;\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 .textarea {\n display: block;\n width: 100%;\n min-height: 5rem;\n margin: 0;\n padding: 7px 10px;\n border: var(--pk-input-border);\n border-radius: var(--pk-textarea-border-radius, var(--pk-radius-md));\n background: var(--pk-input-bg);\n background-clip: padding-box;\n /* Craft CP body / field value text. */\n color: var(--pk-color-gray-700);\n font: inherit;\n line-height: 1.4;\n resize: vertical;\n appearance: none;\n box-sizing: border-box;\n outline: none;\n transition: border-color 0.12s ease, box-shadow 0.12s ease;\n }\n\n .textarea::placeholder {\n color: var(--pk-input-placeholder-color, var(--pk-color-gray-400));\n }\n\n /* Craft: focus is box-shadow only — do not also flip border-color (double ring). */\n :host(:not([invalid]):not(:state(user-invalid))) .textarea:focus,\n :host(:not([invalid]):not(:state(user-invalid))) .textarea:focus-visible,\n :host([data-state='focus-visible']:not([invalid]):not(:state(user-invalid))) .textarea {\n box-shadow: var(--pk-input-focus-shadow);\n }\n\n .textarea:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n background: var(--pk-color-gray-50);\n }\n\n :host([invalid]) .textarea,\n :host(:state(user-invalid)) .textarea {\n border-color: var(--pk-color-rose-600);\n }\n\n :host([invalid]) .textarea:focus,\n :host([invalid]) .textarea:focus-visible,\n :host([invalid][data-state='focus-visible']) .textarea,\n :host(:state(user-invalid)) .textarea:focus,\n :host(:state(user-invalid)) .textarea:focus-visible {\n box-shadow: var(--pk-input-invalid-focus-shadow);\n }\n\n /* Editable-table cells (v1): flush into the row and fill cell height.\n * Chain height through form-control — percentage on .textarea alone\n * doesn't resolve when the wrapper sizes to content (rows / min-height). */\n :host([fit-cell]),\n :host([data-editable-table-input]) {\n display: block;\n height: 100%;\n min-height: 100%;\n box-sizing: border-box;\n overflow: hidden;\n }\n\n :host([fit-cell]) .form-control,\n :host([data-editable-table-input]) .form-control {\n display: flex;\n flex-direction: column;\n height: 100%;\n min-height: 100%;\n }\n\n :host([fit-cell]) .textarea,\n :host([data-editable-table-input]) .textarea {\n flex: 1 1 auto;\n border: none;\n border-radius: 0;\n background: transparent;\n box-shadow: none;\n height: 100%;\n min-height: 0;\n max-height: 100%;\n /* Match text-cell inset (v1 py-1.5 / px-2). 0.5rem block padding +\n * line-height 1.4 overflows the 34px et cell and shows a scrollbar\n * even for empty / single-line notes. */\n padding: 0.375rem 0.5rem;\n line-height: 1.25;\n overflow-x: hidden;\n overflow-y: auto;\n resize: none;\n }\n\n :host([fit-cell]:not([invalid]):not(:state(user-invalid))) .textarea:focus,\n :host([fit-cell]:not([invalid]):not(:state(user-invalid))) .textarea:focus-visible,\n :host([fit-cell][data-state='focus-visible']:not([invalid]):not(:state(user-invalid))) .textarea,\n :host([data-editable-table-input]:not([invalid]):not(:state(user-invalid))) .textarea:focus,\n :host([data-editable-table-input]:not([invalid]):not(:state(user-invalid))) .textarea:focus-visible,\n :host([data-editable-table-input][data-state='focus-visible']:not([invalid]):not(:state(user-invalid))) .textarea {\n border: none;\n box-shadow: inset 0 0 0 1px var(--pk-color-gray-200);\n }\n\n :host([fit-cell][invalid]) .textarea,\n :host([fit-cell]:state(user-invalid)) .textarea,\n :host([fit-cell][invalid]) .textarea:focus,\n :host([fit-cell][invalid]) .textarea:focus-visible,\n :host([fit-cell]:state(user-invalid)) .textarea:focus,\n :host([fit-cell]:state(user-invalid)) .textarea:focus-visible,\n :host([data-editable-table-input][invalid]) .textarea,\n :host([data-editable-table-input]:state(user-invalid)) .textarea,\n :host([data-editable-table-input][invalid]) .textarea:focus,\n :host([data-editable-table-input][invalid]) .textarea:focus-visible,\n :host([data-editable-table-input]:state(user-invalid)) .textarea:focus,\n :host([data-editable-table-input]:state(user-invalid)) .textarea:focus-visible {\n border: none;\n box-shadow: inset 0 0 0 1px var(--pk-color-rose-600);\n }\n }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property, query, state } from '../../decorators.js';\nimport type { PropertyValues } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\n\nimport { formControlStyles } from '../../base/form-control.styles.js';\nimport { PkFormAssociatedElement } from '../../base/pk-form-associated-element.js';\nimport { uniqueId } from '../../a11y/focus.js';\nimport { HasSlotController } from '../../internal/has-slot.js';\nimport { syncStandaloneControlAria } from '../../internal/control-aria.js';\nimport { hasInstructionContent, readLegacyInstructions } from '../../internal/field-labels.js';\nimport { MirrorValidator, RequiredValidator } from '../../validators/index.js';\nimport { pkTextareaStyles } from './pk-textarea.styles.js';\n\nexport type PkTextareaSize = 'default' | 'sm';\n\n/**\n * Multiline text field — API, Craft visuals.\n *\n * @slot label\n * @slot instructions\n * @slot hint - Alias for `instructions`\n *\n * @csspart form-control - Wrapper\n * @csspart label - Label\n * @csspart instructions - Instructions\n * @csspart textarea - Native textarea\n */\n@customElement('pk-textarea')\nexport class PkTextarea extends PkFormAssociatedElement {\n static override styles = [formControlStyles, pkTextareaStyles];\n\n static override get validators() {\n return [...super.validators, MirrorValidator(), RequiredValidator()];\n }\n\n override assumeInteractionOn = ['blur', 'input'];\n\n private readonly hasSlotController = new HasSlotController(this, 'instructions', 'hint', 'label');\n\n private readonly controlId = uniqueId('pk-textarea');\n\n @query('textarea')\n override input!: HTMLTextAreaElement;\n\n @property()\n placeholder = '';\n\n private _value: string | null = null;\n\n get value(): string {\n if (this.valueHasChanged) {\n return this._value ?? '';\n }\n\n return this._value ?? this.defaultValue ?? '';\n }\n\n @state()\n set value(val: string | null) {\n const next = val ?? '';\n\n if (this._value === next) {\n return;\n }\n\n this.valueHasChanged = true;\n this._value = next;\n }\n\n @property({ attribute: 'value', reflect: true })\n defaultValue: string | null = null;\n\n @property({ reflect: true })\n size: PkTextareaSize = 'default';\n\n @property()\n label = '';\n\n @property()\n instructions = '';\n\n @property({ type: Boolean, reflect: true })\n readonly = false;\n\n @property({ type: Boolean, reflect: true })\n invalid = false;\n\n /** Flush + fill parent cell (editable tables). */\n @property({ type: Boolean, reflect: true, attribute: 'fit-cell' })\n fitCell = false;\n\n /** Native `rows` — use `1` in table cells so intrinsic height doesn't overflow. */\n @property({ type: Number })\n rows?: number;\n\n @property({ type: Number, attribute: 'max-length' })\n maxlength?: number;\n\n @property({ attribute: 'with-label', type: Boolean })\n withLabel = false;\n\n @property({ attribute: 'with-instructions', type: Boolean })\n withInstructions = false;\n\n override connectedCallback(): void {\n this.instructions = readLegacyInstructions(this, this.instructions);\n\n if (this.hasAttribute('with-hint')) {\n this.withInstructions = true;\n }\n\n super.connectedCallback();\n }\n\n protected override syncFormValue(): void {\n this.setValue(this.value || '');\n }\n\n protected override resetToDefaultValue(): void {\n this.valueHasChanged = false;\n this._value = null;\n }\n\n protected override restoreFormState(state: string | File | FormData | null): void {\n if (typeof state === 'string') {\n this.value = state;\n }\n }\n\n override formResetCallback(): void {\n this.valueHasChanged = false;\n this._value = null;\n\n if (this.input) {\n this.input.value = this.defaultValue ?? '';\n }\n\n super.formResetCallback();\n }\n\n override updated(changed: PropertyValues): void {\n if (changed.has('value') || changed.has('defaultValue')) {\n this.setState('blank', !this.value);\n }\n\n super.updated(changed);\n }\n\n protected override syncStandaloneAria(): void {\n if (!this.input) {\n return;\n }\n\n const hasLabel = this.hasLabelContent();\n const hasInstructions = this.hasInstructionsContent();\n\n syncStandaloneControlAria({\n control: this.input,\n labelId: `${this.controlId}-label`,\n instructionsId: `${this.controlId}-instructions`,\n hasLabel,\n hasInstructions,\n required: this.required,\n invalid: this.invalid || !this.internals.validity.valid,\n });\n }\n\n private hasLabelContent(): boolean {\n return Boolean(this.label) || this.hasSlotController.test('label', this.withLabel);\n }\n\n private hasInstructionsContent(): boolean {\n return hasInstructionContent(\n (name, flag) => this.hasSlotController.test(name, flag),\n this.instructions,\n this.withInstructions,\n );\n }\n\n focus(options?: FocusOptions): void {\n this.input?.focus(options);\n }\n\n blur(): void {\n this.input?.blur();\n }\n\n private handleInput(): void {\n this.value = this.input.value;\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n }\n\n private handleChange(event: Event): void {\n this.value = this.input.value;\n event.stopPropagation();\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n }\n\n override render() {\n const hasLabel = this.hasLabelContent();\n const hasInstructions = this.hasInstructionsContent();\n\n return html`\n <div part=\"form-control\" class=\"form-control\">\n ${hasLabel\n ? html`\n <label\n part=\"label\"\n class=\"form-control__label\"\n id=${`${this.controlId}-label`}\n for=${`${this.controlId}-control`}\n >\n <slot name=\"label\">${this.label}</slot>\n </label>\n `\n : nothing}\n\n ${hasInstructions\n ? html`\n <p\n part=\"instructions\"\n class=\"form-control__instructions\"\n id=${`${this.controlId}-instructions`}\n >\n <slot name=\"instructions\">${this.instructions}</slot>\n <slot name=\"hint\"></slot>\n </p>\n `\n : nothing}\n\n <textarea\n part=\"textarea\"\n class=\"textarea\"\n id=${hasLabel ? `${this.controlId}-control` : nothing}\n rows=${ifDefined(this.fitCell ? (this.rows ?? 1) : this.rows)}\n .value=${live(this.value)}\n placeholder=${this.placeholder || nothing}\n maxlength=${ifDefined(this.maxlength)}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n ?required=${this.required}\n @input=${this.handleInput}\n @change=${this.handleChange}\n @focus=${() => this.dispatchEvent(new Event('focus', { bubbles: true, composed: true }))}\n @blur=${() => this.dispatchEvent(new Event('blur', { bubbles: true, composed: true }))}\n ></textarea>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-textarea': PkTextarea;\n }\n}\n"],"mappings":"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"}
@@ -2,7 +2,7 @@ import { t as icons_exports } from "./icons-BR8JcQj2.js";
2
2
  import { s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
3
3
  import { t as createIconElement } from "./render-Dvc3MHQR.js";
4
4
  import "./pk-option-DQZHV9jL.js";
5
- import { n as pkSelectStyles, t as PkSelect } from "./pk-select-CdQdhnZN.js";
5
+ import { n as pkSelectStyles, t as PkSelect } from "./pk-select-b5S5WKc-.js";
6
6
  import { css } from "lit";
7
7
  //#region src/utils/time-options.ts
8
8
  var timeOptionsCache = null;
@@ -225,4 +225,4 @@ PkTimePicker = __decorate([customElement("pk-time-picker")], PkTimePicker);
225
225
  //#endregion
226
226
  export { PkTimePicker as t };
227
227
 
228
- //# sourceMappingURL=pk-time-picker-CebRqydV.js.map
228
+ //# sourceMappingURL=pk-time-picker-ChRbKHNB.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"pk-time-picker-CebRqydV.js","names":[],"sources":["../../src/utils/time-options.ts","../../src/components/time-picker/pk-time-picker.styles.ts","../../src/components/time-picker/pk-time-picker.ts"],"sourcesContent":["export type TimeOption = {\n value: string;\n label: string;\n};\n\nexport type TimepickerFormatOptions = {\n timeFormat?: string;\n lang?: {\n AM?: string;\n PM?: string;\n };\n locale?: string;\n};\n\nlet timeOptionsCache: TimeOption[] | null = null;\n\nfunction resolveTimepickerOptions(): Required<Pick<TimepickerFormatOptions, 'timeFormat' | 'lang'>> & { locale: string } {\n const craft = (globalThis as typeof globalThis & {\n Craft?: { timepicker?: TimepickerFormatOptions };\n }).Craft?.timepicker;\n\n return {\n timeFormat: craft?.timeFormat || 'g:i A',\n lang: {\n AM: craft?.lang?.AM || 'AM',\n PM: craft?.lang?.PM || 'PM',\n },\n locale: craft?.locale || document.documentElement.lang || 'en-US',\n };\n}\n\n/** Generate time options in 30-minute increments — mirrors React `generateTimeOptions`. */\nexport function generateTimeOptions(): TimeOption[] {\n if (timeOptionsCache) {\n return timeOptionsCache;\n }\n\n const options: TimeOption[] = [];\n const { timeFormat, lang, locale } = resolveTimepickerOptions();\n\n for (let hour = 0; hour < 24; hour += 1) {\n for (let minute = 0; minute < 60; minute += 30) {\n const timeString = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;\n\n let displayTime: string;\n\n if (timeFormat === 'g:i A') {\n let displayHour = hour;\n\n if (hour === 0) {\n displayHour = 12;\n } else if (hour > 12) {\n displayHour = hour - 12;\n }\n\n const ampm = hour >= 12 ? lang.PM : lang.AM;\n displayTime = `${displayHour}:${minute.toString().padStart(2, '0')} ${ampm}`;\n } else if (timeFormat === 'G:i') {\n displayTime = timeString;\n } else {\n displayTime = new Date(`2000-01-01T${timeString}:00`).toLocaleTimeString(locale, {\n hour: 'numeric',\n minute: '2-digit',\n hour12: timeFormat.includes('A'),\n });\n }\n\n options.push({\n value: timeString,\n label: displayTime,\n });\n }\n }\n\n timeOptionsCache = options;\n\n return options;\n}\n\nexport function clearTimeOptionsCache(): void {\n timeOptionsCache = null;\n}\n","import { css } from 'lit';\n\nexport const pkTimePickerStyles = css`\n @layer pk-component {\n :host {\n display: inline-block;\n width: 8.125rem;\n min-width: 8.125rem;\n color: var(--pk-color-gray-700);\n --pk-select-trigger-border-width: 1px;\n --pk-select-item-min-height: 2.125rem;\n --pk-select-item-padding-block: 0;\n --pk-select-item-padding-inline: 10px;\n --pk-select-item-font-size: var(--pk-font-size-base);\n }\n\n .control {\n justify-content: flex-start;\n gap: 0.5rem;\n width: 100%;\n height: 2.125rem;\n min-height: 2.125rem;\n border-color: var(--pk-color-slate-400) !important;\n border-radius: var(--pk-radius-lg) !important;\n background: transparent !important;\n background-color: transparent !important;\n text-align: left;\n font-weight: 400;\n line-height: 1.2;\n cursor: default;\n }\n\n :host([open]) .control {\n background: var(--pk-color-slate-150, var(--pk-color-slate-100)) !important;\n background-color: var(--pk-color-slate-150, var(--pk-color-slate-100)) !important;\n border-color: var(--pk-color-slate-400) !important;\n box-shadow: none;\n }\n\n :host(:not([disabled])) .control:hover:not(:disabled) {\n background: var(--pk-color-slate-50) !important;\n background-color: var(--pk-color-slate-50) !important;\n }\n\n :host(:not([disabled])[open]) .control:hover:not(:disabled),\n :host(:not([disabled])) .control:active:not(:disabled) {\n background: var(--pk-color-slate-150, var(--pk-color-slate-100)) !important;\n background-color: var(--pk-color-slate-150, var(--pk-color-slate-100)) !important;\n }\n\n :host(:not([invalid]):not(:state(user-invalid))) .control:focus-visible,\n :host(:not([invalid]):not(:state(user-invalid))[data-state='focus-visible']) .control {\n border-color: var(--pk-color-sky-600) !important;\n box-shadow: var(--pk-input-focus-shadow);\n }\n\n :host(:not([invalid]):not(:state(user-invalid))[open]) .control:focus-visible,\n :host(:not([invalid]):not(:state(user-invalid))[open][data-state='focus-visible']) .control {\n border-color: var(--pk-color-slate-400) !important;\n box-shadow: none;\n }\n\n :host([invalid]) .control,\n :host(:state(user-invalid)) .control {\n border-color: var(--pk-color-rose-600) !important;\n }\n\n :host([invalid]) .control:focus-visible,\n :host([invalid][data-state='focus-visible']) .control,\n :host(:state(user-invalid)) .control:focus-visible,\n :host(:state(user-invalid)[data-state='focus-visible']) .control {\n box-shadow: var(--pk-input-invalid-focus-shadow);\n }\n\n .control-start {\n color: var(--pk-color-gray-400);\n pointer-events: none;\n }\n\n .control-start svg {\n display: block;\n width: 14px;\n height: 14px;\n }\n\n .value {\n flex: 1;\n line-height: 1.2;\n color: inherit;\n }\n\n .value.is-placeholder {\n color: var(--pk-color-gray-400);\n }\n\n .icon {\n margin-inline-start: auto;\n color: var(--pk-color-gray-600);\n }\n\n .panel {\n min-width: 8rem;\n max-height: 15rem;\n }\n\n /* Editable-table cells: flush fill — must live here so !important beats the\n * standalone trigger chrome (external ::part cannot override it). */\n :host(.cell-pk-control) {\n display: block;\n width: 100%;\n min-width: 0;\n height: 100%;\n --pk-select-trigger-border-width: 0;\n --pk-select-item-min-height: 100%;\n --pk-select-item-padding-block: 0;\n }\n\n :host(.cell-pk-control) .control {\n width: 100%;\n height: 100% !important;\n min-height: 100% !important;\n border: 0 !important;\n border-radius: 0 !important;\n background: transparent !important;\n background-color: transparent !important;\n }\n\n :host(.cell-pk-control:not([disabled])) .control:hover:not(:disabled),\n :host(.cell-pk-control[open]) .control,\n :host(.cell-pk-control:not([disabled])[open]) .control:hover:not(:disabled),\n :host(.cell-pk-control:not([disabled])) .control:active:not(:disabled) {\n border-radius: 0 !important;\n }\n\n :host(.cell-pk-control:not([invalid]):not(:state(user-invalid))) .control:focus-visible,\n :host(.cell-pk-control:not([invalid]):not(:state(user-invalid))[data-state='focus-visible']) .control {\n border: 0 !important;\n box-shadow: inset 0 0 0 1px var(--pk-color-gray-200, #e5e7eb);\n }\n }\n`;\n","import { customElement } from '../../decorators.js';\n\nimport { createIconElement, clock } from '../../icons/index.js';\nimport { PkSelect } from '../select/pk-select.js';\n// Time picker seeds light-DOM options at connect — register the CE so getLabel() works.\nimport '../select/pk-option.js';\nimport { pkSelectStyles } from '../select/pk-select.styles.js';\nimport { generateTimeOptions } from '../../utils/time-options.js';\nimport { pkTimePickerStyles } from './pk-time-picker.styles.js';\n\n/**\n * Time picker — select wrapper with 30-minute increments and a clock icon.\n * Mirrors React `TimePicker` (not `pk-time-input`).\n *\n * @slot start - Overrides the default clock icon\n * @slot - Additional `pk-option` items append after the generated list\n *\n * @event input\n * @event change\n * @event pk-change - `detail.value`\n */\n@customElement('pk-time-picker')\nexport class PkTimePicker extends PkSelect {\n // Flatten — `pkSelectStyles` is already a CSSResult[].\n static override styles = [...pkSelectStyles, pkTimePickerStyles];\n\n private optionsSeeded = false;\n\n override connectedCallback(): void {\n this.ensureTimeOptions();\n this.ensureClockIcon();\n super.connectedCallback();\n }\n\n private ensureTimeOptions(): void {\n if (this.optionsSeeded || this.querySelector('pk-option')) {\n this.optionsSeeded = true;\n return;\n }\n\n for (const option of generateTimeOptions()) {\n const element = document.createElement('pk-option');\n element.value = option.value;\n element.textContent = option.label;\n this.append(element);\n }\n\n this.optionsSeeded = true;\n }\n\n private ensureClockIcon(): void {\n if (this.querySelector('[slot=\"start\"]')) {\n return;\n }\n\n const icon = createIconElement(clock);\n icon.setAttribute('slot', 'start');\n this.prepend(icon);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-time-picker': PkTimePicker;\n }\n}\n"],"mappings":";;;;;;;AAcA,IAAI,mBAAwC;AAE5C,SAAS,2BAAgH;CACrH,MAAM,QAAS,WAEZ,OAAO;AAEV,QAAO;EACH,YAAY,OAAO,cAAc;EACjC,MAAM;GACF,IAAI,OAAO,MAAM,MAAM;GACvB,IAAI,OAAO,MAAM,MAAM;GAC1B;EACD,QAAQ,OAAO,UAAU,SAAS,gBAAgB,QAAQ;EAC7D;;;AAIL,SAAgB,sBAAoC;AAChD,KAAI,iBACA,QAAO;CAGX,MAAM,UAAwB,EAAE;CAChC,MAAM,EAAE,YAAY,MAAM,WAAW,0BAA0B;AAE/D,MAAK,IAAI,OAAO,GAAG,OAAO,IAAI,QAAQ,EAClC,MAAK,IAAI,SAAS,GAAG,SAAS,IAAI,UAAU,IAAI;EAC5C,MAAM,aAAa,GAAG,KAAK,UAAU,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG,OAAO,UAAU,CAAC,SAAS,GAAG,IAAI;EAE5F,IAAI;AAEJ,MAAI,eAAe,SAAS;GACxB,IAAI,cAAc;AAElB,OAAI,SAAS,EACT,eAAc;YACP,OAAO,GACd,eAAc,OAAO;GAGzB,MAAM,OAAO,QAAQ,KAAK,KAAK,KAAK,KAAK;AACzC,iBAAc,GAAG,YAAY,GAAG,OAAO,UAAU,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG;aAC/D,eAAe,MACtB,eAAc;MAEd,gCAAc,IAAI,KAAK,cAAc,WAAW,KAAK,EAAC,mBAAmB,QAAQ;GAC7E,MAAM;GACN,QAAQ;GACR,QAAQ,WAAW,SAAS,IAAI;GACnC,CAAC;AAGN,UAAQ,KAAK;GACT,OAAO;GACP,OAAO;GACV,CAAC;;AAIV,oBAAmB;AAEnB,QAAO;;;;AC1EX,IAAa,qBAAqB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACoB9B,IAAA,eAAA,MAAM,qBAAqB,SAAS;;;uBAIf;;;gBAFC,CAAC,GAAG,gBAAgB,mBAAmB;;CAIhE,oBAAmC;AAC/B,OAAK,mBAAmB;AACxB,OAAK,iBAAiB;AACtB,QAAM,mBAAmB;;CAG7B,oBAAkC;AAC9B,MAAI,KAAK,iBAAiB,KAAK,cAAc,YAAY,EAAE;AACvD,QAAK,gBAAgB;AACrB;;AAGJ,OAAK,MAAM,UAAU,qBAAqB,EAAE;GACxC,MAAM,UAAU,SAAS,cAAc,YAAY;AACnD,WAAQ,QAAQ,OAAO;AACvB,WAAQ,cAAc,OAAO;AAC7B,QAAK,OAAO,QAAQ;;AAGxB,OAAK,gBAAgB;;CAGzB,kBAAgC;AAC5B,MAAI,KAAK,cAAc,mBAAiB,CACpC;EAGJ,MAAM,OAAO,kBAAkB,cAAA,MAAM;AACrC,OAAK,aAAa,QAAQ,QAAQ;AAClC,OAAK,QAAQ,KAAK;;;2BApCzB,cAAc,iBAAiB,CAAA,EAAA,aAAA"}
1
+ {"version":3,"file":"pk-time-picker-ChRbKHNB.js","names":[],"sources":["../../src/utils/time-options.ts","../../src/components/time-picker/pk-time-picker.styles.ts","../../src/components/time-picker/pk-time-picker.ts"],"sourcesContent":["export type TimeOption = {\n value: string;\n label: string;\n};\n\nexport type TimepickerFormatOptions = {\n timeFormat?: string;\n lang?: {\n AM?: string;\n PM?: string;\n };\n locale?: string;\n};\n\nlet timeOptionsCache: TimeOption[] | null = null;\n\nfunction resolveTimepickerOptions(): Required<Pick<TimepickerFormatOptions, 'timeFormat' | 'lang'>> & { locale: string } {\n const craft = (globalThis as typeof globalThis & {\n Craft?: { timepicker?: TimepickerFormatOptions };\n }).Craft?.timepicker;\n\n return {\n timeFormat: craft?.timeFormat || 'g:i A',\n lang: {\n AM: craft?.lang?.AM || 'AM',\n PM: craft?.lang?.PM || 'PM',\n },\n locale: craft?.locale || document.documentElement.lang || 'en-US',\n };\n}\n\n/** Generate time options in 30-minute increments — mirrors React `generateTimeOptions`. */\nexport function generateTimeOptions(): TimeOption[] {\n if (timeOptionsCache) {\n return timeOptionsCache;\n }\n\n const options: TimeOption[] = [];\n const { timeFormat, lang, locale } = resolveTimepickerOptions();\n\n for (let hour = 0; hour < 24; hour += 1) {\n for (let minute = 0; minute < 60; minute += 30) {\n const timeString = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;\n\n let displayTime: string;\n\n if (timeFormat === 'g:i A') {\n let displayHour = hour;\n\n if (hour === 0) {\n displayHour = 12;\n } else if (hour > 12) {\n displayHour = hour - 12;\n }\n\n const ampm = hour >= 12 ? lang.PM : lang.AM;\n displayTime = `${displayHour}:${minute.toString().padStart(2, '0')} ${ampm}`;\n } else if (timeFormat === 'G:i') {\n displayTime = timeString;\n } else {\n displayTime = new Date(`2000-01-01T${timeString}:00`).toLocaleTimeString(locale, {\n hour: 'numeric',\n minute: '2-digit',\n hour12: timeFormat.includes('A'),\n });\n }\n\n options.push({\n value: timeString,\n label: displayTime,\n });\n }\n }\n\n timeOptionsCache = options;\n\n return options;\n}\n\nexport function clearTimeOptionsCache(): void {\n timeOptionsCache = null;\n}\n","import { css } from 'lit';\n\nexport const pkTimePickerStyles = css`\n @layer pk-component {\n :host {\n display: inline-block;\n width: 8.125rem;\n min-width: 8.125rem;\n color: var(--pk-color-gray-700);\n --pk-select-trigger-border-width: 1px;\n --pk-select-item-min-height: 2.125rem;\n --pk-select-item-padding-block: 0;\n --pk-select-item-padding-inline: 10px;\n --pk-select-item-font-size: var(--pk-font-size-base);\n }\n\n .control {\n justify-content: flex-start;\n gap: 0.5rem;\n width: 100%;\n height: 2.125rem;\n min-height: 2.125rem;\n border-color: var(--pk-color-slate-400) !important;\n border-radius: var(--pk-radius-lg) !important;\n background: transparent !important;\n background-color: transparent !important;\n text-align: left;\n font-weight: 400;\n line-height: 1.2;\n cursor: default;\n }\n\n :host([open]) .control {\n background: var(--pk-color-slate-150, var(--pk-color-slate-100)) !important;\n background-color: var(--pk-color-slate-150, var(--pk-color-slate-100)) !important;\n border-color: var(--pk-color-slate-400) !important;\n box-shadow: none;\n }\n\n :host(:not([disabled])) .control:hover:not(:disabled) {\n background: var(--pk-color-slate-50) !important;\n background-color: var(--pk-color-slate-50) !important;\n }\n\n :host(:not([disabled])[open]) .control:hover:not(:disabled),\n :host(:not([disabled])) .control:active:not(:disabled) {\n background: var(--pk-color-slate-150, var(--pk-color-slate-100)) !important;\n background-color: var(--pk-color-slate-150, var(--pk-color-slate-100)) !important;\n }\n\n :host(:not([invalid]):not(:state(user-invalid))) .control:focus-visible,\n :host(:not([invalid]):not(:state(user-invalid))[data-state='focus-visible']) .control {\n border-color: var(--pk-color-sky-600) !important;\n box-shadow: var(--pk-input-focus-shadow);\n }\n\n :host(:not([invalid]):not(:state(user-invalid))[open]) .control:focus-visible,\n :host(:not([invalid]):not(:state(user-invalid))[open][data-state='focus-visible']) .control {\n border-color: var(--pk-color-slate-400) !important;\n box-shadow: none;\n }\n\n :host([invalid]) .control,\n :host(:state(user-invalid)) .control {\n border-color: var(--pk-color-rose-600) !important;\n }\n\n :host([invalid]) .control:focus-visible,\n :host([invalid][data-state='focus-visible']) .control,\n :host(:state(user-invalid)) .control:focus-visible,\n :host(:state(user-invalid)[data-state='focus-visible']) .control {\n box-shadow: var(--pk-input-invalid-focus-shadow);\n }\n\n .control-start {\n color: var(--pk-color-gray-400);\n pointer-events: none;\n }\n\n .control-start svg {\n display: block;\n width: 14px;\n height: 14px;\n }\n\n .value {\n flex: 1;\n line-height: 1.2;\n color: inherit;\n }\n\n .value.is-placeholder {\n color: var(--pk-color-gray-400);\n }\n\n .icon {\n margin-inline-start: auto;\n color: var(--pk-color-gray-600);\n }\n\n .panel {\n min-width: 8rem;\n max-height: 15rem;\n }\n\n /* Editable-table cells: flush fill — must live here so !important beats the\n * standalone trigger chrome (external ::part cannot override it). */\n :host(.cell-pk-control) {\n display: block;\n width: 100%;\n min-width: 0;\n height: 100%;\n --pk-select-trigger-border-width: 0;\n --pk-select-item-min-height: 100%;\n --pk-select-item-padding-block: 0;\n }\n\n :host(.cell-pk-control) .control {\n width: 100%;\n height: 100% !important;\n min-height: 100% !important;\n border: 0 !important;\n border-radius: 0 !important;\n background: transparent !important;\n background-color: transparent !important;\n }\n\n :host(.cell-pk-control:not([disabled])) .control:hover:not(:disabled),\n :host(.cell-pk-control[open]) .control,\n :host(.cell-pk-control:not([disabled])[open]) .control:hover:not(:disabled),\n :host(.cell-pk-control:not([disabled])) .control:active:not(:disabled) {\n border-radius: 0 !important;\n }\n\n :host(.cell-pk-control:not([invalid]):not(:state(user-invalid))) .control:focus-visible,\n :host(.cell-pk-control:not([invalid]):not(:state(user-invalid))[data-state='focus-visible']) .control {\n border: 0 !important;\n box-shadow: inset 0 0 0 1px var(--pk-color-gray-200, #e5e7eb);\n }\n }\n`;\n","import { customElement } from '../../decorators.js';\n\nimport { createIconElement, clock } from '../../icons/index.js';\nimport { PkSelect } from '../select/pk-select.js';\n// Time picker seeds light-DOM options at connect — register the CE so getLabel() works.\nimport '../select/pk-option.js';\nimport { pkSelectStyles } from '../select/pk-select.styles.js';\nimport { generateTimeOptions } from '../../utils/time-options.js';\nimport { pkTimePickerStyles } from './pk-time-picker.styles.js';\n\n/**\n * Time picker — select wrapper with 30-minute increments and a clock icon.\n * Mirrors React `TimePicker` (not `pk-time-input`).\n *\n * @slot start - Overrides the default clock icon\n * @slot - Additional `pk-option` items append after the generated list\n *\n * @event input\n * @event change\n * @event pk-change - `detail.value`\n */\n@customElement('pk-time-picker')\nexport class PkTimePicker extends PkSelect {\n // Flatten — `pkSelectStyles` is already a CSSResult[].\n static override styles = [...pkSelectStyles, pkTimePickerStyles];\n\n private optionsSeeded = false;\n\n override connectedCallback(): void {\n this.ensureTimeOptions();\n this.ensureClockIcon();\n super.connectedCallback();\n }\n\n private ensureTimeOptions(): void {\n if (this.optionsSeeded || this.querySelector('pk-option')) {\n this.optionsSeeded = true;\n return;\n }\n\n for (const option of generateTimeOptions()) {\n const element = document.createElement('pk-option');\n element.value = option.value;\n element.textContent = option.label;\n this.append(element);\n }\n\n this.optionsSeeded = true;\n }\n\n private ensureClockIcon(): void {\n if (this.querySelector('[slot=\"start\"]')) {\n return;\n }\n\n const icon = createIconElement(clock);\n icon.setAttribute('slot', 'start');\n this.prepend(icon);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-time-picker': PkTimePicker;\n }\n}\n"],"mappings":";;;;;;;AAcA,IAAI,mBAAwC;AAE5C,SAAS,2BAAgH;CACrH,MAAM,QAAS,WAEZ,OAAO;AAEV,QAAO;EACH,YAAY,OAAO,cAAc;EACjC,MAAM;GACF,IAAI,OAAO,MAAM,MAAM;GACvB,IAAI,OAAO,MAAM,MAAM;GAC1B;EACD,QAAQ,OAAO,UAAU,SAAS,gBAAgB,QAAQ;EAC7D;;;AAIL,SAAgB,sBAAoC;AAChD,KAAI,iBACA,QAAO;CAGX,MAAM,UAAwB,EAAE;CAChC,MAAM,EAAE,YAAY,MAAM,WAAW,0BAA0B;AAE/D,MAAK,IAAI,OAAO,GAAG,OAAO,IAAI,QAAQ,EAClC,MAAK,IAAI,SAAS,GAAG,SAAS,IAAI,UAAU,IAAI;EAC5C,MAAM,aAAa,GAAG,KAAK,UAAU,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG,OAAO,UAAU,CAAC,SAAS,GAAG,IAAI;EAE5F,IAAI;AAEJ,MAAI,eAAe,SAAS;GACxB,IAAI,cAAc;AAElB,OAAI,SAAS,EACT,eAAc;YACP,OAAO,GACd,eAAc,OAAO;GAGzB,MAAM,OAAO,QAAQ,KAAK,KAAK,KAAK,KAAK;AACzC,iBAAc,GAAG,YAAY,GAAG,OAAO,UAAU,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG;aAC/D,eAAe,MACtB,eAAc;MAEd,gCAAc,IAAI,KAAK,cAAc,WAAW,KAAK,EAAC,mBAAmB,QAAQ;GAC7E,MAAM;GACN,QAAQ;GACR,QAAQ,WAAW,SAAS,IAAI;GACnC,CAAC;AAGN,UAAQ,KAAK;GACT,OAAO;GACP,OAAO;GACV,CAAC;;AAIV,oBAAmB;AAEnB,QAAO;;;;AC1EX,IAAa,qBAAqB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACoB9B,IAAA,eAAA,MAAM,qBAAqB,SAAS;;;uBAIf;;;gBAFC,CAAC,GAAG,gBAAgB,mBAAmB;;CAIhE,oBAAmC;AAC/B,OAAK,mBAAmB;AACxB,OAAK,iBAAiB;AACtB,QAAM,mBAAmB;;CAG7B,oBAAkC;AAC9B,MAAI,KAAK,iBAAiB,KAAK,cAAc,YAAY,EAAE;AACvD,QAAK,gBAAgB;AACrB;;AAGJ,OAAK,MAAM,UAAU,qBAAqB,EAAE;GACxC,MAAM,UAAU,SAAS,cAAc,YAAY;AACnD,WAAQ,QAAQ,OAAO;AACvB,WAAQ,cAAc,OAAO;AAC7B,QAAK,OAAO,QAAQ;;AAGxB,OAAK,gBAAgB;;CAGzB,kBAAgC;AAC5B,MAAI,KAAK,cAAc,mBAAiB,CACpC;EAGJ,MAAM,OAAO,kBAAkB,cAAA,MAAM;AACrC,OAAK,aAAa,QAAQ,QAAQ;AAClC,OAAK,QAAQ,KAAK;;;2BApCzB,cAAc,iBAAiB,CAAA,EAAA,aAAA"}
@@ -1,13 +1,13 @@
1
1
  import { t as icons_exports } from "./icons-BR8JcQj2.js";
2
2
  import { a as query, i as property, o as state, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
3
3
  import "./pk-button-BrH4u4Qr.js";
4
- import { t as PkFormAssociatedElement } from "./pk-form-associated-element-CCQALRGB.js";
4
+ import { t as PkFormAssociatedElement } from "./pk-form-associated-element-GxX5lbnk.js";
5
5
  import { t as MirrorValidator } from "./mirror-validator-DCjNYrrx.js";
6
- import "./pk-checkbox-CfV1uDdC.js";
6
+ import "./pk-checkbox-13ArHSmt.js";
7
7
  import { t as formControlStyles } from "./form-control.styles-BQdimE5o.js";
8
8
  import { n as renderIconHtml } from "./render-Dvc3MHQR.js";
9
9
  import { i as uniqueId } from "./focus-aa5dlv8k.js";
10
- import "./pk-input-CF_icEtR.js";
10
+ import "./pk-input-BywmK5n2.js";
11
11
  import "./pk-dialog-VMQqLW1f.js";
12
12
  import "./pk-dropdown-item-D9OaG5o-.js";
13
13
  import "./pk-dropdown-menu-DW1wI8xQ.js";
@@ -1405,4 +1405,4 @@ PkTiptapEditor = __decorate([customElement("pk-tiptap-editor")], PkTiptapEditor)
1405
1405
  //#endregion
1406
1406
  export { PkTiptapEditor as t };
1407
1407
 
1408
- //# sourceMappingURL=pk-tiptap-editor-CTz-yfHL.js.map
1408
+ //# sourceMappingURL=pk-tiptap-editor-BzZ-J2sl.js.map