@verbb/plugin-kit-web 2.0.14 → 2.0.16
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.
- package/CHANGELOG.md +73 -0
- package/custom-elements.json +39571 -0
- package/dist/base/pk-form-associated-element.d.ts +17 -1
- package/dist/base/pk-form-associated-element.d.ts.map +1 -1
- package/dist/chunks/{animate-with-class-ZJeCOKB3.js → animate-with-class-CsDwYnXL.js} +1 -1
- package/dist/chunks/{animate-with-class-ZJeCOKB3.js.map → animate-with-class-CsDwYnXL.js.map} +1 -1
- package/dist/chunks/{autoloader-DPX9YYZs.js → autoloader-dJO3tYOX.js} +2 -2
- package/dist/chunks/{autoloader-DPX9YYZs.js.map → autoloader-dJO3tYOX.js.map} +1 -1
- package/dist/chunks/{component-registry-CNB8PbP_.js → component-registry-D34fm8xW.js} +5 -1
- package/dist/chunks/component-registry-D34fm8xW.js.map +1 -0
- package/dist/chunks/{decorate-W02hmVTt.js → decorate-R0X811qp.js} +13 -2
- package/dist/chunks/decorate-R0X811qp.js.map +1 -0
- package/dist/chunks/{field-labels-CoU9dnNq.js → field-labels-CmuAW8Cl.js} +1 -1
- package/dist/chunks/{field-labels-CoU9dnNq.js.map → field-labels-CmuAW8Cl.js.map} +1 -1
- package/dist/chunks/option-filter-BQqr8Z21.js +121 -0
- package/dist/chunks/option-filter-BQqr8Z21.js.map +1 -0
- package/dist/chunks/pk-autocomplete-kOT0Zlld.js +992 -0
- package/dist/chunks/pk-autocomplete-kOT0Zlld.js.map +1 -0
- package/dist/chunks/{pk-button-QpDDlRbG.js → pk-button-BrH4u4Qr.js} +10 -7
- package/dist/chunks/{pk-button-QpDDlRbG.js.map → pk-button-BrH4u4Qr.js.map} +1 -1
- package/dist/chunks/{pk-button-group-D9hqSfb_.js → pk-button-group-BSz5T5iS.js} +2 -3
- package/dist/chunks/pk-button-group-BSz5T5iS.js.map +1 -0
- package/dist/chunks/{pk-button-group-separator-DG0CYaqc.js → pk-button-group-separator-DH3Rl24b.js} +2 -3
- package/dist/chunks/pk-button-group-separator-DH3Rl24b.js.map +1 -0
- package/dist/chunks/{pk-button-group-text-C5z4P7ur.js → pk-button-group-text-Qro_KmZb.js} +2 -3
- package/dist/chunks/{pk-button-group-text-C5z4P7ur.js.map → pk-button-group-text-Qro_KmZb.js.map} +1 -1
- package/dist/chunks/{pk-calendar-CoUil0F7.js → pk-calendar-Z7Y0PjeY.js} +2 -3
- package/dist/chunks/pk-calendar-Z7Y0PjeY.js.map +1 -0
- package/dist/chunks/{pk-checkbox-Bavq3-9C.js → pk-checkbox-CfV1uDdC.js} +3 -4
- package/dist/chunks/pk-checkbox-CfV1uDdC.js.map +1 -0
- package/dist/chunks/{pk-checkbox-select-9lqd9Rwz.js → pk-checkbox-select-DeCaI3a0.js} +3 -4
- package/dist/chunks/pk-checkbox-select-DeCaI3a0.js.map +1 -0
- package/dist/chunks/{pk-code-editor-DSG6AwLV.js → pk-code-editor-BG9sG_Fy.js} +3 -4
- package/dist/chunks/pk-code-editor-BG9sG_Fy.js.map +1 -0
- package/dist/chunks/{pk-color-input-BCCXCZMA.js → pk-color-input-CncNce1C.js} +3 -4
- package/dist/chunks/pk-color-input-CncNce1C.js.map +1 -0
- package/dist/chunks/{pk-combobox-BqaSsLJb.js → pk-combobox-Dn7UJ_CV.js} +50 -94
- package/dist/chunks/pk-combobox-Dn7UJ_CV.js.map +1 -0
- package/dist/chunks/{pk-connect.styles-DshgIW2n.js → pk-connect.styles-BhW406jt.js} +1 -1
- package/dist/chunks/{pk-connect.styles-DshgIW2n.js.map → pk-connect.styles-BhW406jt.js.map} +1 -1
- package/dist/chunks/{pk-copy-button-CfeVuQ0r.js → pk-copy-button-BVaOLtYG.js} +47 -7
- package/dist/chunks/pk-copy-button-BVaOLtYG.js.map +1 -0
- package/dist/chunks/{pk-date-picker-BM4HMb4-.js → pk-date-picker-DfIvmoZ1.js} +7 -8
- package/dist/chunks/pk-date-picker-DfIvmoZ1.js.map +1 -0
- package/dist/chunks/{pk-dialog-Ck1InIBC.js → pk-dialog-VMQqLW1f.js} +3 -4
- package/dist/chunks/pk-dialog-VMQqLW1f.js.map +1 -0
- package/dist/chunks/{pk-dropdown-item-HcIUlFH1.js → pk-dropdown-item-BZQS87U0.js} +3 -4
- package/dist/chunks/pk-dropdown-item-BZQS87U0.js.map +1 -0
- package/dist/chunks/{pk-dropdown-label-DLgrmYND.js → pk-dropdown-label-CRNWMWQd.js} +2 -3
- package/dist/chunks/{pk-dropdown-label-DLgrmYND.js.map → pk-dropdown-label-CRNWMWQd.js.map} +1 -1
- package/dist/chunks/{pk-dropdown-menu-r5wgkvmZ.js → pk-dropdown-menu-D60p2-9X.js} +5 -6
- package/dist/chunks/pk-dropdown-menu-D60p2-9X.js.map +1 -0
- package/dist/chunks/{pk-editable-table-DMHGqZlQ.js → pk-editable-table-BQ47MXpu.js} +18 -21
- package/dist/chunks/pk-editable-table-BQ47MXpu.js.map +1 -0
- package/dist/chunks/{pk-field-JFP24j4o.js → pk-field-UAlMq6mQ.js} +3 -4
- package/dist/chunks/pk-field-UAlMq6mQ.js.map +1 -0
- package/dist/chunks/{pk-form-associated-element-DmZKgNPL.js → pk-form-associated-element-CCQALRGB.js} +15 -3
- package/dist/chunks/pk-form-associated-element-CCQALRGB.js.map +1 -0
- package/dist/chunks/pk-image-browser-BXFDfch3.js +1364 -0
- package/dist/chunks/pk-image-browser-BXFDfch3.js.map +1 -0
- package/dist/chunks/{pk-input-naIRPWGC.js → pk-input-CF_icEtR.js} +77 -32
- package/dist/chunks/pk-input-CF_icEtR.js.map +1 -0
- package/dist/chunks/{pk-input-group-CGHQKrt8.js → pk-input-group-CWdoVhkH.js} +2 -3
- package/dist/chunks/pk-input-group-CWdoVhkH.js.map +1 -0
- package/dist/chunks/{pk-input-group-addon-DXbNbsfY.js → pk-input-group-addon-ClBkGmAw.js} +2 -3
- package/dist/chunks/pk-input-group-addon-ClBkGmAw.js.map +1 -0
- package/dist/chunks/{pk-input-group-button-XOfVLqGO.js → pk-input-group-button-CHQHsWd4.js} +2 -3
- package/dist/chunks/pk-input-group-button-CHQHsWd4.js.map +1 -0
- package/dist/chunks/{pk-input-group-input-CSmR5vdY.js → pk-input-group-input-oNnqMBGU.js} +2 -3
- package/dist/chunks/pk-input-group-input-oNnqMBGU.js.map +1 -0
- package/dist/chunks/{pk-input-group-text-C6ekhtff.js → pk-input-group-text-HUxlXROB.js} +2 -3
- package/dist/chunks/pk-input-group-text-HUxlXROB.js.map +1 -0
- package/dist/chunks/{pk-input-group-textarea-DALr3pdU.js → pk-input-group-textarea-Cl2FNuw-.js} +2 -3
- package/dist/chunks/pk-input-group-textarea-Cl2FNuw-.js.map +1 -0
- package/dist/chunks/{pk-lightswitch-B-rLflNq.js → pk-lightswitch-D1qEFRxK.js} +4 -5
- package/dist/chunks/pk-lightswitch-D1qEFRxK.js.map +1 -0
- package/dist/chunks/{pk-option-Cy7oOcwF.js → pk-option-DQZHV9jL.js} +4 -4
- package/dist/chunks/pk-option-DQZHV9jL.js.map +1 -0
- package/dist/chunks/{pk-option-group-BAFSIZTa.js → pk-option-group-CCzJkBFp.js} +2 -3
- package/dist/chunks/pk-option-group-CCzJkBFp.js.map +1 -0
- package/dist/chunks/{pk-popover-G3ojheBD.js → pk-popover-KSIOYlbs.js} +5 -6
- package/dist/chunks/pk-popover-KSIOYlbs.js.map +1 -0
- package/dist/chunks/{pk-popup-CgiXok-U.js → pk-popup-B9AgBC2V.js} +2 -3
- package/dist/chunks/pk-popup-B9AgBC2V.js.map +1 -0
- package/dist/chunks/{pk-radio-CDfhOW8L.js → pk-radio-B5XkMHy3.js} +2 -3
- package/dist/chunks/pk-radio-B5XkMHy3.js.map +1 -0
- package/dist/chunks/{pk-radio-group-BazmLDvl.js → pk-radio-group-ByrxGLdX.js} +4 -5
- package/dist/chunks/pk-radio-group-ByrxGLdX.js.map +1 -0
- package/dist/chunks/{pk-scroll-area-BjU7-vZX.js → pk-scroll-area-CdfNxYz8.js} +2 -3
- package/dist/chunks/pk-scroll-area-CdfNxYz8.js.map +1 -0
- package/dist/chunks/{pk-select-BeMDXEC6.js → pk-select-DQtORz-v.js} +8 -7
- package/dist/chunks/pk-select-DQtORz-v.js.map +1 -0
- package/dist/chunks/{pk-separator-CLb9n0FK.js → pk-separator-N-VyjYE6.js} +2 -3
- package/dist/chunks/pk-separator-N-VyjYE6.js.map +1 -0
- package/dist/chunks/{pk-spinner-Blxd3SIH.js → pk-spinner-DweuYJ_Z.js} +2 -3
- package/dist/chunks/{pk-spinner-Blxd3SIH.js.map → pk-spinner-DweuYJ_Z.js.map} +1 -1
- package/dist/chunks/{pk-status-7_5dEuw-.js → pk-status-BehQARDv.js} +2 -3
- package/dist/chunks/{pk-status-7_5dEuw-.js.map → pk-status-BehQARDv.js.map} +1 -1
- package/dist/chunks/{pk-tab-f1OLMVXs.js → pk-tab-CTloD18e.js} +3 -3
- package/dist/chunks/{pk-tab-f1OLMVXs.js.map → pk-tab-CTloD18e.js.map} +1 -1
- package/dist/chunks/{pk-tab-heading-79ZuLhXi.js → pk-tab-heading-Cjcgebxn.js} +2 -3
- package/dist/chunks/pk-tab-heading-Cjcgebxn.js.map +1 -0
- package/dist/chunks/{pk-tab-panel-DdAbrOBF.js → pk-tab-panel-CkKU5-Ah.js} +3 -3
- package/dist/chunks/{pk-tab-panel-DdAbrOBF.js.map → pk-tab-panel-CkKU5-Ah.js.map} +1 -1
- package/dist/chunks/{pk-tabs-BhC5PAnO.js → pk-tabs-BgEBki1q.js} +2 -3
- package/dist/chunks/{pk-tabs-BhC5PAnO.js.map → pk-tabs-BgEBki1q.js.map} +1 -1
- package/dist/chunks/{pk-textarea-BEapC8Rk.js → pk-textarea-CYM2tK88.js} +4 -5
- package/dist/chunks/pk-textarea-CYM2tK88.js.map +1 -0
- package/dist/chunks/{pk-time-picker-RlAqlho4.js → pk-time-picker-DLUBYLFo.js} +4 -5
- package/dist/chunks/{pk-time-picker-RlAqlho4.js.map → pk-time-picker-DLUBYLFo.js.map} +1 -1
- package/dist/chunks/{pk-tiptap-content-zzx3-xrD.js → pk-tiptap-content-BwkqYVJb.js} +3 -4
- package/dist/chunks/pk-tiptap-content-BwkqYVJb.js.map +1 -0
- package/dist/chunks/{pk-tiptap-editor-DpT4TYdi.js → pk-tiptap-editor-De8UUTis.js} +13 -14
- package/dist/chunks/pk-tiptap-editor-De8UUTis.js.map +1 -0
- package/dist/chunks/{pk-tiptap-input-D7xj13FY.js → pk-tiptap-input-Y9eog9Zn.js} +4 -5
- package/dist/chunks/pk-tiptap-input-Y9eog9Zn.js.map +1 -0
- package/dist/chunks/{pk-toggle-5-GKVLye.js → pk-toggle-BthhH7vl.js} +2 -3
- package/dist/chunks/{pk-toggle-5-GKVLye.js.map → pk-toggle-BthhH7vl.js.map} +1 -1
- package/dist/chunks/{pk-toggle-group-CWDwYlgR.js → pk-toggle-group-D2Quux8D.js} +2 -3
- package/dist/chunks/pk-toggle-group-D2Quux8D.js.map +1 -0
- package/dist/chunks/{pk-tooltip-DAq-JZpg.js → pk-tooltip-Cmmc0916.js} +3 -4
- package/dist/chunks/pk-tooltip-Cmmc0916.js.map +1 -0
- package/dist/chunks/{popup-content-animation.styles-Dc6d9quJ.js → popup-content-animation.styles-BnNiguJo.js} +1 -1
- package/dist/chunks/{popup-content-animation.styles-Dc6d9quJ.js.map → popup-content-animation.styles-BnNiguJo.js.map} +1 -1
- package/dist/chunks/{popup-pointer-DMnuZDQl.js → popup-pointer-CuLjk1th.js} +1 -1
- package/dist/chunks/{popup-pointer-DMnuZDQl.js.map → popup-pointer-CuLjk1th.js.map} +1 -1
- package/dist/chunks/{register-components-B-qCPFFh.js → register-components-BT9THgdh.js} +1 -1
- package/dist/chunks/{register-components-B-qCPFFh.js.map → register-components-BT9THgdh.js.map} +1 -1
- package/dist/chunks/{register-DeqrQzRS.js → register-posLyX3U.js} +50 -50
- package/dist/chunks/{register-DeqrQzRS.js.map → register-posLyX3U.js.map} +1 -1
- package/dist/chunks/{tiptap.styles-ChAfyVi9.js → tiptap.styles-CPRows--.js} +4 -3
- package/dist/chunks/tiptap.styles-CPRows--.js.map +1 -0
- package/dist/component-registry.d.ts.map +1 -1
- package/dist/components/autocomplete/index.d.ts +2 -0
- package/dist/components/autocomplete/index.d.ts.map +1 -0
- package/dist/components/autocomplete/pk-autocomplete.d.ts +150 -0
- package/dist/components/autocomplete/pk-autocomplete.d.ts.map +1 -0
- package/dist/components/autocomplete/pk-autocomplete.js +2 -0
- package/dist/components/autocomplete/pk-autocomplete.styles.d.ts +7 -0
- package/dist/components/autocomplete/pk-autocomplete.styles.d.ts.map +1 -0
- package/dist/components/autocomplete.d.ts +2 -0
- package/dist/components/autocomplete.js +2 -0
- package/dist/components/button/pk-button.d.ts +37 -1
- package/dist/components/button/pk-button.d.ts.map +1 -1
- package/dist/components/button/pk-button.js +1 -1
- package/dist/components/button-group/pk-button-group-separator.js +1 -1
- package/dist/components/button-group/pk-button-group-text.js +1 -1
- package/dist/components/button-group/pk-button-group.js +1 -1
- package/dist/components/button-group.js +3 -3
- package/dist/components/button.js +1 -1
- package/dist/components/calendar/pk-calendar.js +1 -1
- package/dist/components/calendar.js +1 -1
- package/dist/components/checkbox/pk-checkbox.js +1 -1
- package/dist/components/checkbox-select/pk-checkbox-select.js +1 -1
- package/dist/components/checkbox-select.js +1 -1
- package/dist/components/checkbox.js +1 -1
- package/dist/components/code-editor/pk-code-editor.js +1 -1
- package/dist/components/code-editor.js +1 -1
- package/dist/components/color-input/pk-color-input.js +1 -1
- package/dist/components/color-input.js +1 -1
- package/dist/components/combobox/pk-combobox.d.ts +8 -14
- package/dist/components/combobox/pk-combobox.d.ts.map +1 -1
- package/dist/components/combobox/pk-combobox.js +1 -1
- package/dist/components/combobox/pk-combobox.styles.d.ts.map +1 -1
- package/dist/components/combobox.js +1 -1
- package/dist/components/connect/pk-connect-oauth.js +4 -5
- package/dist/components/connect/pk-connect-oauth.js.map +1 -1
- package/dist/components/connect/pk-connect.js +5 -6
- package/dist/components/connect/pk-connect.js.map +1 -1
- package/dist/components/copy-button/pk-copy-button.d.ts +3 -0
- package/dist/components/copy-button/pk-copy-button.d.ts.map +1 -1
- package/dist/components/copy-button/pk-copy-button.js +1 -1
- package/dist/components/copy-button/pk-copy-button.styles.d.ts.map +1 -1
- package/dist/components/copy-button.js +1 -1
- package/dist/components/date-picker/pk-date-picker.js +1 -1
- package/dist/components/date-picker.js +1 -1
- package/dist/components/dialog/pk-dialog.js +1 -1
- package/dist/components/dialog.js +1 -1
- package/dist/components/dropdown-menu/pk-dropdown-item.js +1 -1
- package/dist/components/dropdown-menu/pk-dropdown-label.js +1 -1
- package/dist/components/dropdown-menu/pk-dropdown-menu.js +1 -1
- package/dist/components/dropdown-menu/pk-dropdown-separator.js +1 -2
- package/dist/components/dropdown-menu/pk-dropdown-separator.js.map +1 -1
- package/dist/components/dropdown-menu.js +3 -3
- package/dist/components/editable-table/editable-table-model.d.ts +4 -1
- package/dist/components/editable-table/editable-table-model.d.ts.map +1 -1
- package/dist/components/editable-table/pk-editable-table.d.ts +1 -1
- package/dist/components/editable-table/pk-editable-table.d.ts.map +1 -1
- package/dist/components/editable-table/pk-editable-table.js +1 -1
- package/dist/components/editable-table.js +1 -1
- package/dist/components/field/pk-field.js +1 -1
- package/dist/components/field.js +1 -1
- package/dist/components/icon/pk-icon.d.ts +3 -2
- package/dist/components/icon/pk-icon.d.ts.map +1 -1
- package/dist/components/icon/pk-icon.js +1 -2
- package/dist/components/icon/pk-icon.js.map +1 -1
- package/dist/components/image-browser/index.d.ts +2 -0
- package/dist/components/image-browser/index.d.ts.map +1 -0
- package/dist/components/image-browser/pk-image-browser.d.ts +190 -0
- package/dist/components/image-browser/pk-image-browser.d.ts.map +1 -0
- package/dist/components/image-browser/pk-image-browser.js +2 -0
- package/dist/components/image-browser/pk-image-browser.styles.d.ts +6 -0
- package/dist/components/image-browser/pk-image-browser.styles.d.ts.map +1 -0
- package/dist/components/image-browser.d.ts +2 -0
- package/dist/components/image-browser.js +2 -0
- package/dist/components/input/pk-input.d.ts +2 -1
- package/dist/components/input/pk-input.d.ts.map +1 -1
- package/dist/components/input/pk-input.js +1 -1
- package/dist/components/input/pk-input.styles.d.ts.map +1 -1
- package/dist/components/input-group/pk-input-group-addon.js +1 -1
- package/dist/components/input-group/pk-input-group-button.js +1 -1
- package/dist/components/input-group/pk-input-group-input.js +1 -1
- package/dist/components/input-group/pk-input-group-text.js +1 -1
- package/dist/components/input-group/pk-input-group-textarea.js +1 -1
- package/dist/components/input-group/pk-input-group.js +1 -1
- package/dist/components/input-group.js +6 -6
- package/dist/components/input.js +1 -1
- package/dist/components/lightswitch/pk-lightswitch.js +1 -1
- package/dist/components/lightswitch.js +1 -1
- package/dist/components/popover/pk-popover.js +1 -1
- package/dist/components/popover.js +1 -1
- package/dist/components/popup/pk-popup.js +1 -1
- package/dist/components/popup.js +1 -1
- package/dist/components/radio-group/pk-radio-group.js +1 -1
- package/dist/components/radio-group/pk-radio.js +1 -1
- package/dist/components/radio-group.js +2 -2
- package/dist/components/scroll-area/pk-scroll-area.js +1 -1
- package/dist/components/scroll-area.js +1 -1
- package/dist/components/select/pk-option-group.d.ts +3 -1
- package/dist/components/select/pk-option-group.d.ts.map +1 -1
- package/dist/components/select/pk-option-group.js +1 -1
- package/dist/components/select/pk-option.d.ts +10 -1
- package/dist/components/select/pk-option.d.ts.map +1 -1
- package/dist/components/select/pk-option.js +1 -1
- package/dist/components/select/pk-select.d.ts +42 -3
- package/dist/components/select/pk-select.d.ts.map +1 -1
- package/dist/components/select/pk-select.js +1 -1
- package/dist/components/select.js +3 -3
- package/dist/components/separator/pk-separator.js +1 -1
- package/dist/components/separator.js +1 -1
- package/dist/components/spinner/pk-spinner.js +1 -1
- package/dist/components/spinner.js +1 -1
- package/dist/components/status/pk-status.js +1 -1
- package/dist/components/status.js +1 -1
- package/dist/components/tabs/pk-tab-heading.js +1 -1
- package/dist/components/tabs/pk-tab-panel.js +1 -1
- package/dist/components/tabs/pk-tab.js +1 -1
- package/dist/components/tabs/pk-tabs.js +1 -1
- package/dist/components/tabs.js +4 -4
- package/dist/components/textarea/pk-textarea.js +1 -1
- package/dist/components/textarea.js +1 -1
- package/dist/components/time-picker/pk-time-picker.js +1 -1
- package/dist/components/time-picker.js +1 -1
- package/dist/components/tiptap/pk-tiptap-content.js +1 -1
- package/dist/components/tiptap/pk-tiptap-editor.js +1 -1
- package/dist/components/tiptap/pk-tiptap-input.js +1 -1
- package/dist/components/tiptap/variable-tag-node-view.d.ts.map +1 -1
- package/dist/components/tiptap-content.js +1 -1
- package/dist/components/tiptap-editor.js +1 -1
- package/dist/components/tiptap-input.js +1 -1
- package/dist/components/toggle/pk-toggle.js +1 -1
- package/dist/components/toggle-group/pk-toggle-group.js +1 -1
- package/dist/components/toggle-group.js +1 -1
- package/dist/components/toggle.js +1 -1
- package/dist/components/tooltip/pk-tooltip.js +1 -1
- package/dist/components/tooltip.js +1 -1
- package/dist/connect/register-cp-connect.js +3 -3
- package/dist/decorators.d.ts +12 -0
- package/dist/decorators.d.ts.map +1 -0
- package/dist/index.js +55 -55
- package/dist/internal/sync-filtered-options.d.ts +23 -0
- package/dist/internal/sync-filtered-options.d.ts.map +1 -0
- package/dist/plugin-kit.css +2 -0
- package/dist/plugin-kit.js +2 -2
- package/dist/register-components.js +1 -1
- package/dist/register-pk.generated.d.ts +4 -0
- package/dist/register-pk.generated.d.ts.map +1 -1
- package/dist/register.js +52 -52
- package/dist/utilities/fouce.css +2 -0
- package/dist/utils/async-option-fetch.d.ts +38 -0
- package/dist/utils/async-option-fetch.d.ts.map +1 -0
- package/dist/utils/option-filter.d.ts +11 -0
- package/dist/utils/option-filter.d.ts.map +1 -0
- package/dist/utils/popup-content-exit.d.ts +6 -0
- package/dist/utils/popup-content-exit.d.ts.map +1 -0
- package/dist-loader/chunks/option-filter-Z7bomRrK.js +119 -0
- package/dist-loader/chunks/{pk-base-B21zXxSo.js → pk-base-CyzwylQ7.js} +13 -1
- package/dist-loader/chunks/{pk-button-Dh4gjLHw.js → pk-button-dngp-vOd.js} +10 -6
- package/dist-loader/chunks/{pk-calendar-n1bwSO7X.js → pk-calendar-BE4HRfCq.js} +3 -3
- package/dist-loader/chunks/{pk-checkbox-BrZQB816.js → pk-checkbox-B3d4nkBx.js} +1 -1
- package/dist-loader/chunks/{pk-color-input-sS05YOwT.js → pk-color-input-CD-r_sfG.js} +1 -1
- package/dist-loader/chunks/{pk-combobox-B7q6alzE.js → pk-combobox-DMBKXPLB.js} +48 -91
- package/dist-loader/chunks/{pk-date-picker-Dni5ty79.js → pk-date-picker-wntQmeIM.js} +5 -5
- package/dist-loader/chunks/{pk-dialog-BpPRqFMm.js → pk-dialog-B6lzsRur.js} +3 -3
- package/dist-loader/chunks/{pk-dropdown-item-CHkFNlA9.js → pk-dropdown-item-DJ5TeF1r.js} +3 -3
- package/dist-loader/chunks/{pk-dropdown-menu-BHVOMNV1.js → pk-dropdown-menu-B87bsdlI.js} +3 -3
- package/dist-loader/chunks/{pk-field-CJ09ll1S.js → pk-field-D_SNOJpl.js} +4 -4
- package/dist-loader/chunks/{pk-icon-WHUu7wxk.js → pk-icon-B5ob3JdK.js} +2 -2
- package/dist-loader/chunks/{pk-input-CEw3AdYt.js → pk-input-BhU0PiCk.js} +74 -28
- package/dist-loader/chunks/{pk-lightswitch-DJEUScgo.js → pk-lightswitch-DRxY8511.js} +1 -1
- package/dist-loader/chunks/{pk-option-CunPIei0.js → pk-option-Cc6QWw-0.js} +5 -4
- package/dist-loader/chunks/{pk-popup-FDdBxb4k.js → pk-popup-BooGjXgH.js} +1 -1
- package/dist-loader/chunks/{pk-select-CbAaQ7uE.js → pk-select-BG8qPsBd.js} +6 -4
- package/dist-loader/chunks/{pk-spinner-CIbXjDnp.js → pk-spinner-BKU9Rf2R.js} +1 -1
- package/dist-loader/chunks/{pk-status-BRIVW7EH.js → pk-status-D3ArH2ui.js} +1 -1
- package/dist-loader/chunks/{pk-textarea-C_rOUtFS.js → pk-textarea-CC7rA5A7.js} +1 -1
- package/dist-loader/chunks/{pk-time-picker-Dr3uvbvc.js → pk-time-picker-CDVFNhN7.js} +5 -5
- package/dist-loader/chunks/{pk-tooltip-HwZ0zRd2.js → pk-tooltip-BS2dNLOS.js} +2 -2
- package/dist-loader/chunks/{render-Niz5wYRa.js → render-BKfL_WRl.js} +1 -1
- package/dist-loader/chunks/{svg-_Mtb7CHx.js → svg-BiAlXtCn.js} +5 -3
- package/dist-loader/chunks/{tiptap.styles-BIRIMP7I.js → tiptap.styles-BFGP4eTV.js} +3 -2
- package/dist-loader/components/autocomplete/autocomplete.js +984 -0
- package/dist-loader/components/button/button.js +1 -1
- package/dist-loader/components/button-group/button-group-separator.js +1 -1
- package/dist-loader/components/button-group/button-group-text.js +1 -1
- package/dist-loader/components/button-group/button-group.js +1 -1
- package/dist-loader/components/calendar/calendar.js +1 -1
- package/dist-loader/components/checkbox/checkbox.js +1 -1
- package/dist-loader/components/checkbox-select/checkbox-select.js +2 -2
- package/dist-loader/components/code-editor/code-editor.js +1 -1
- package/dist-loader/components/color-input/color-input.js +1 -1
- package/dist-loader/components/combobox/combobox.js +1 -1
- package/dist-loader/components/connect/connect-oauth.js +3 -3
- package/dist-loader/components/connect/connect.js +5 -5
- package/dist-loader/components/copy-button/copy-button.js +48 -7
- package/dist-loader/components/date-picker/date-picker.js +1 -1
- package/dist-loader/components/dialog/dialog.js +1 -1
- package/dist-loader/components/dropdown-menu/dropdown-item.js +1 -1
- package/dist-loader/components/dropdown-menu/dropdown-label.js +1 -1
- package/dist-loader/components/dropdown-menu/dropdown-menu.js +1 -1
- package/dist-loader/components/dropdown-menu/dropdown-separator.js +1 -1
- package/dist-loader/components/editable-table/editable-table.js +18 -20
- package/dist-loader/components/field/field.js +1 -1
- package/dist-loader/components/icon/icon.js +2 -2
- package/dist-loader/components/image-browser/image-browser.js +1356 -0
- package/dist-loader/components/input/input.js +1 -1
- package/dist-loader/components/input-group/input-group-addon.js +1 -1
- package/dist-loader/components/input-group/input-group-button.js +1 -1
- package/dist-loader/components/input-group/input-group-input.js +1 -1
- package/dist-loader/components/input-group/input-group-text.js +1 -1
- package/dist-loader/components/input-group/input-group-textarea.js +1 -1
- package/dist-loader/components/input-group/input-group.js +1 -1
- package/dist-loader/components/lightswitch/lightswitch.js +1 -1
- package/dist-loader/components/popover/popover.js +2 -2
- package/dist-loader/components/popup/popup.js +1 -1
- package/dist-loader/components/radio-group/radio-group.js +1 -1
- package/dist-loader/components/radio-group/radio.js +1 -1
- package/dist-loader/components/scroll-area/scroll-area.js +1 -1
- package/dist-loader/components/select/option-group.js +1 -1
- package/dist-loader/components/select/option.js +1 -1
- package/dist-loader/components/select/select.js +1 -1
- package/dist-loader/components/separator/separator.js +1 -1
- package/dist-loader/components/spinner/spinner.js +1 -1
- package/dist-loader/components/status/status.js +1 -1
- package/dist-loader/components/tabs/tab-heading.js +1 -1
- package/dist-loader/components/tabs/tab-panel.js +1 -1
- package/dist-loader/components/tabs/tab.js +1 -1
- package/dist-loader/components/tabs/tabs.js +1 -1
- package/dist-loader/components/textarea/textarea.js +1 -1
- package/dist-loader/components/time-picker/time-picker.js +1 -1
- package/dist-loader/components/tiptap/tiptap-content.js +2 -2
- package/dist-loader/components/tiptap/tiptap-editor.js +13 -13
- package/dist-loader/components/tiptap/tiptap-input.js +2 -2
- package/dist-loader/components/toggle/toggle.js +1 -1
- package/dist-loader/components/toggle-group/toggle-group.js +1 -1
- package/dist-loader/components/tooltip/tooltip.js +1 -1
- package/dist-loader/plugin-kit.css +2 -0
- package/dist-loader/plugin-kit.loader.js +4 -0
- package/dist-loader/utilities/fouce.css +2 -0
- package/package.json +53 -9
- package/dist/chunks/component-registry-CNB8PbP_.js.map +0 -1
- package/dist/chunks/decorate-W02hmVTt.js.map +0 -1
- package/dist/chunks/pk-button-group-D9hqSfb_.js.map +0 -1
- package/dist/chunks/pk-button-group-separator-DG0CYaqc.js.map +0 -1
- package/dist/chunks/pk-calendar-CoUil0F7.js.map +0 -1
- package/dist/chunks/pk-checkbox-Bavq3-9C.js.map +0 -1
- package/dist/chunks/pk-checkbox-select-9lqd9Rwz.js.map +0 -1
- package/dist/chunks/pk-code-editor-DSG6AwLV.js.map +0 -1
- package/dist/chunks/pk-color-input-BCCXCZMA.js.map +0 -1
- package/dist/chunks/pk-combobox-BqaSsLJb.js.map +0 -1
- package/dist/chunks/pk-copy-button-CfeVuQ0r.js.map +0 -1
- package/dist/chunks/pk-date-picker-BM4HMb4-.js.map +0 -1
- package/dist/chunks/pk-dialog-Ck1InIBC.js.map +0 -1
- package/dist/chunks/pk-dropdown-item-HcIUlFH1.js.map +0 -1
- package/dist/chunks/pk-dropdown-menu-r5wgkvmZ.js.map +0 -1
- package/dist/chunks/pk-editable-table-DMHGqZlQ.js.map +0 -1
- package/dist/chunks/pk-field-JFP24j4o.js.map +0 -1
- package/dist/chunks/pk-form-associated-element-DmZKgNPL.js.map +0 -1
- package/dist/chunks/pk-input-group-CGHQKrt8.js.map +0 -1
- package/dist/chunks/pk-input-group-addon-DXbNbsfY.js.map +0 -1
- package/dist/chunks/pk-input-group-button-XOfVLqGO.js.map +0 -1
- package/dist/chunks/pk-input-group-input-CSmR5vdY.js.map +0 -1
- package/dist/chunks/pk-input-group-text-C6ekhtff.js.map +0 -1
- package/dist/chunks/pk-input-group-textarea-DALr3pdU.js.map +0 -1
- package/dist/chunks/pk-input-naIRPWGC.js.map +0 -1
- package/dist/chunks/pk-lightswitch-B-rLflNq.js.map +0 -1
- package/dist/chunks/pk-option-Cy7oOcwF.js.map +0 -1
- package/dist/chunks/pk-option-group-BAFSIZTa.js.map +0 -1
- package/dist/chunks/pk-popover-G3ojheBD.js.map +0 -1
- package/dist/chunks/pk-popup-CgiXok-U.js.map +0 -1
- package/dist/chunks/pk-radio-CDfhOW8L.js.map +0 -1
- package/dist/chunks/pk-radio-group-BazmLDvl.js.map +0 -1
- package/dist/chunks/pk-scroll-area-BjU7-vZX.js.map +0 -1
- package/dist/chunks/pk-select-BeMDXEC6.js.map +0 -1
- package/dist/chunks/pk-separator-CLb9n0FK.js.map +0 -1
- package/dist/chunks/pk-tab-heading-79ZuLhXi.js.map +0 -1
- package/dist/chunks/pk-textarea-BEapC8Rk.js.map +0 -1
- package/dist/chunks/pk-tiptap-content-zzx3-xrD.js.map +0 -1
- package/dist/chunks/pk-tiptap-editor-DpT4TYdi.js.map +0 -1
- package/dist/chunks/pk-tiptap-input-D7xj13FY.js.map +0 -1
- package/dist/chunks/pk-toggle-group-CWDwYlgR.js.map +0 -1
- package/dist/chunks/pk-tooltip-DAq-JZpg.js.map +0 -1
- package/dist/chunks/tiptap.styles-ChAfyVi9.js.map +0 -1
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import { n as PkElement, t as __decorate } from "./decorate-
|
|
1
|
+
import { n as PkElement, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
|
|
2
2
|
import { css, html } from "lit";
|
|
3
|
-
import { customElement } from "lit/decorators.js";
|
|
4
3
|
//#region src/components/input-group/pk-input-group-text.styles.ts
|
|
5
4
|
var pkInputGroupTextStyles = css`
|
|
6
5
|
@layer pk-component {
|
|
@@ -37,4 +36,4 @@ PkInputGroupText = __decorate([customElement("pk-input-group-text")], PkInputGro
|
|
|
37
36
|
//#endregion
|
|
38
37
|
export { PkInputGroupText as t };
|
|
39
38
|
|
|
40
|
-
//# sourceMappingURL=pk-input-group-text-
|
|
39
|
+
//# sourceMappingURL=pk-input-group-text-HUxlXROB.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pk-input-group-text-HUxlXROB.js","names":[],"sources":["../../src/components/input-group/pk-input-group-text.styles.ts","../../src/components/input-group/pk-input-group-text.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkInputGroupTextStyles = css`\n @layer pk-component {\n :host {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n font-size: var(--pk-font-size-sm);\n color: var(--pk-color-gray-500);\n }\n\n .text ::slotted(svg) {\n width: 0.75rem;\n height: 0.75rem;\n pointer-events: none;\n }\n }\n`;\n","import { html } from 'lit';\nimport { customElement } from '../../decorators.js';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { pkInputGroupTextStyles } from './pk-input-group-text.styles.js';\n\n/**\n * Muted label text inside an input-group addon.\n *\n * @slot - Text content\n *\n * @csspart base - Text container\n */\n@customElement('pk-input-group-text')\nexport class PkInputGroupText extends PkElement {\n static override styles = pkInputGroupTextStyles;\n\n override render() {\n return html`\n <span part=\"base\" class=\"text\">\n <slot></slot>\n </span>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-input-group-text': PkInputGroupText;\n }\n}\n"],"mappings":";;;AAEA,IAAa,yBAAyB,GAAG;;;;;;;;;;;;;;;;;;;ACYlC,IAAA,mBAAA,MAAM,yBAAyB,UAAU;;gBACnB;;CAEzB,SAAkB;AACd,SAAO,IAAI;;;;;;;+BALlB,cAAc,sBAAsB,CAAA,EAAA,iBAAA"}
|
package/dist/chunks/{pk-input-group-textarea-DALr3pdU.js → pk-input-group-textarea-Cl2FNuw-.js}
RENAMED
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import { n as PkElement, t as __decorate } from "./decorate-
|
|
1
|
+
import { a as query, i as property, n as PkElement, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
|
|
2
2
|
import { css, html, nothing } from "lit";
|
|
3
|
-
import { customElement, property, query } from "lit/decorators.js";
|
|
4
3
|
//#region src/components/input-group/pk-input-group-textarea.styles.ts
|
|
5
4
|
var pkInputGroupTextareaStyles = css`
|
|
6
5
|
@layer pk-component {
|
|
@@ -110,4 +109,4 @@ PkInputGroupTextarea = __decorate([customElement("pk-input-group-textarea")], Pk
|
|
|
110
109
|
//#endregion
|
|
111
110
|
export { PkInputGroupTextarea as t };
|
|
112
111
|
|
|
113
|
-
//# sourceMappingURL=pk-input-group-textarea-
|
|
112
|
+
//# sourceMappingURL=pk-input-group-textarea-Cl2FNuw-.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pk-input-group-textarea-Cl2FNuw-.js","names":[],"sources":["../../src/components/input-group/pk-input-group-textarea.styles.ts","../../src/components/input-group/pk-input-group-textarea.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkInputGroupTextareaStyles = css`\n @layer pk-component {\n :host {\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n align-self: stretch;\n }\n\n .textarea {\n display: block;\n width: 100%;\n min-width: 0;\n min-height: 5rem;\n margin: 0;\n padding: 7px 10px;\n border: 0;\n border-radius: 0;\n background: transparent;\n color: var(--pk-color-gray-700);\n font: inherit;\n line-height: 1.4;\n appearance: none;\n box-sizing: border-box;\n box-shadow: none;\n outline: none;\n resize: none;\n }\n\n .textarea::placeholder {\n color: var(--pk-color-gray-400);\n }\n\n .textarea:disabled {\n cursor: not-allowed;\n }\n }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property, query } from '../../decorators.js';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { pkInputGroupTextareaStyles } from './pk-input-group-textarea.styles.js';\n\n/**\n * Borderless textarea for use inside `pk-input-group`.\n *\n * @csspart textarea - Native textarea element\n */\n@customElement('pk-input-group-textarea')\nexport class PkInputGroupTextarea extends PkElement {\n static override styles = pkInputGroupTextareaStyles;\n\n @query('.textarea')\n textareaElement!: HTMLTextAreaElement;\n\n @property()\n placeholder = '';\n\n @property({ attribute: 'value', reflect: true })\n value = '';\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n @property({ type: Boolean, reflect: true })\n readonly = false;\n\n @property({ type: Boolean, reflect: true })\n invalid = false;\n\n @property({ type: Number })\n rows = 3;\n\n focus(options?: FocusOptions): void {\n this.textareaElement?.focus(options);\n }\n\n override render() {\n return html`\n <textarea\n part=\"textarea\"\n class=\"textarea\"\n data-slot=\"input-group-control\"\n rows=${this.rows}\n .value=${this.value}\n placeholder=${this.placeholder}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n aria-invalid=${this.invalid ? 'true' : nothing}\n @input=${this.handleInput}\n ></textarea>\n `;\n }\n\n private handleInput(event: Event): void {\n const target = event.target as HTMLTextAreaElement;\n this.value = target.value;\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-input-group-textarea': PkInputGroupTextarea;\n }\n}\n"],"mappings":";;;AAEA,IAAa,6BAA6B,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACUtC,IAAA,uBAAA,MAAM,6BAA6B,UAAU;;;qBAOlC;eAGN;kBAGG;kBAGA;iBAGD;cAGH;;;gBArBkB;;CAuBzB,MAAM,SAA8B;AAChC,OAAK,iBAAiB,MAAM,QAAQ;;CAGxC,SAAkB;AACd,SAAO,IAAI;;;;;uBAKI,KAAK,KAAK;yBACR,KAAK,MAAM;8BACN,KAAK,YAAY;4BACnB,KAAK,SAAS;4BACd,KAAK,SAAS;+BACX,KAAK,UAAU,SAAS,QAAQ;yBACtC,KAAK,YAAY;;;;CAKtC,YAAoB,OAAoB;EACpC,MAAM,SAAS,MAAM;AACrB,OAAK,QAAQ,OAAO;AACpB,OAAK,cAAc,IAAI,MAAM,SAAS;GAAE,SAAS;GAAM,UAAU;GAAM,CAAC,CAAC;AACzE,OAAK,cAAc,IAAI,MAAM,UAAU;GAAE,SAAS;GAAM,UAAU;GAAM,CAAC,CAAC;;;YA9C7E,MAAM,YAAY,CAAA,EAAA,qBAAA,WAAA,mBAAA,KAAA,EAAA;YAGlB,UAAU,CAAA,EAAA,qBAAA,WAAA,eAAA,KAAA,EAAA;YAGV,SAAS;CAAE,WAAW;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,qBAAA,WAAA,SAAA,KAAA,EAAA;YAG/C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,qBAAA,WAAA,YAAA,KAAA,EAAA;YAG1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,qBAAA,WAAA,YAAA,KAAA,EAAA;YAG1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,qBAAA,WAAA,WAAA,KAAA,EAAA;YAG1C,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,qBAAA,WAAA,QAAA,KAAA,EAAA;mCAtB9B,cAAc,0BAA0B,CAAA,EAAA,qBAAA"}
|
|
@@ -1,12 +1,11 @@
|
|
|
1
|
-
import { t as __decorate } from "./decorate-
|
|
2
|
-
import { t as PkFormAssociatedElement } from "./pk-form-associated-element-
|
|
1
|
+
import { a as query, i as property, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
|
|
2
|
+
import { t as PkFormAssociatedElement } from "./pk-form-associated-element-CCQALRGB.js";
|
|
3
3
|
import { t as MirrorValidator } from "./mirror-validator-DCjNYrrx.js";
|
|
4
4
|
import { t as RequiredValidator } from "./required-validator-CEg8dvjS.js";
|
|
5
5
|
import { t as HasSlotController } from "./has-slot-8BvCt_qo.js";
|
|
6
6
|
import { t as formControlStyles } from "./form-control.styles-BQdimE5o.js";
|
|
7
|
-
import { n as readLegacyInstructions, t as hasInstructionContent } from "./field-labels-
|
|
7
|
+
import { n as readLegacyInstructions, t as hasInstructionContent } from "./field-labels-CmuAW8Cl.js";
|
|
8
8
|
import { css, html, nothing } from "lit";
|
|
9
|
-
import { customElement, property, query } from "lit/decorators.js";
|
|
10
9
|
//#region src/components/lightswitch/pk-lightswitch.styles.ts
|
|
11
10
|
var pkLightswitchStyles = css`
|
|
12
11
|
@layer pk-component {
|
|
@@ -429,4 +428,4 @@ PkLightswitch = __decorate([customElement("pk-lightswitch")], PkLightswitch);
|
|
|
429
428
|
//#endregion
|
|
430
429
|
export { PkLightswitch as t };
|
|
431
430
|
|
|
432
|
-
//# sourceMappingURL=pk-lightswitch-
|
|
431
|
+
//# sourceMappingURL=pk-lightswitch-D1qEFRxK.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pk-lightswitch-D1qEFRxK.js","names":[],"sources":["../../src/components/lightswitch/pk-lightswitch.styles.ts","../../src/components/lightswitch/pk-lightswitch.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkLightswitchStyles = css`\n @layer pk-component {\n :host {\n display: inline-flex;\n vertical-align: middle;\n font-family: var(--pk-font-family);\n font-size: var(--pk-font-size-sm);\n line-height: var(--pk-line-height);\n --pk-lightswitch-border-color: var(--pk-color-slate-800);\n --pk-lightswitch-track-off: var(--pk-color-gray-200);\n --pk-lightswitch-track-on: var(--pk-color-teal-550);\n --pk-lightswitch-track-on-border: var(--pk-color-teal-550-border);\n --pk-lightswitch-focus-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--pk-color-sky-600),\n 0 0 6px 1px hsl(from var(--pk-color-sky-600) h s l / 0.8);\n --pk-lightswitch-invalid-shadow: 0 0 0 1px #fff, 0 0 0 2.5px var(--pk-color-rose-600);\n --pk-lightswitch-invalid-focus-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--pk-color-rose-600),\n 0 0 6px 1px hsl(from var(--pk-color-rose-600) h s l / 0.8);\n }\n\n :host([disabled]) {\n cursor: not-allowed;\n }\n\n .base {\n display: inline-flex;\n align-items: flex-start;\n gap: 0.5rem;\n }\n\n :host([disabled]) .base {\n opacity: 0.5;\n }\n\n .content {\n min-width: 0;\n cursor: pointer;\n user-select: none;\n }\n\n :host([disabled]) .content {\n cursor: not-allowed;\n }\n\n .label {\n display: block;\n /* Match checkbox / radio option labels (gray-700), not gray-900. */\n color: var(--pk-color-gray-700);\n line-height: 1rem;\n }\n\n .label:empty {\n display: none;\n }\n\n .instructions:empty,\n .hint:empty {\n display: none;\n }\n\n .switch {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n margin: 0;\n padding: 0;\n border: 0;\n border-radius: 11px;\n background: var(--pk-lightswitch-track-off, #d8dee7);\n box-shadow: inset 0 0 0 1px var(--pk-lightswitch-border-color, #667c92);\n cursor: pointer;\n user-select: none;\n appearance: none;\n transition: background-color 0.15s ease, box-shadow 0.15s ease;\n }\n\n .switch:focus {\n outline: none;\n }\n\n .switch:focus-visible {\n box-shadow: var(--pk-lightswitch-focus-shadow);\n }\n\n .switch[aria-checked='true'] {\n background: var(--pk-lightswitch-track-on, #0f9d8a);\n box-shadow: inset 0 0 0 1px var(--pk-lightswitch-track-on-border, #007d6f);\n }\n\n .switch[aria-checked='true']:focus-visible {\n box-shadow: var(--pk-lightswitch-focus-shadow);\n }\n\n :host([invalid]) .switch,\n :host(:state(user-invalid)) .switch,\n .switch[aria-invalid='true'] {\n box-shadow: var(--pk-lightswitch-invalid-shadow);\n }\n\n :host([invalid]) .switch[aria-checked='true'],\n :host(:state(user-invalid)) .switch[aria-checked='true'],\n .switch[aria-invalid='true'][aria-checked='true'] {\n background: var(--pk-lightswitch-track-on);\n }\n\n :host([invalid]) .switch:focus-visible,\n :host(:state(user-invalid)) .switch:focus-visible,\n .switch[aria-invalid='true']:focus-visible {\n box-shadow: var(--pk-lightswitch-invalid-focus-shadow);\n }\n\n .switch:disabled {\n cursor: not-allowed;\n }\n\n :host([size='default']) .switch {\n width: 34px;\n height: 22px;\n }\n\n :host([size='sm']) .switch {\n width: 28px;\n height: 18px;\n border-radius: 9px;\n }\n\n :host([size='xs']) .switch {\n width: 24px;\n height: 16px;\n border-radius: 8px;\n }\n\n :host([size='xxs']) .switch {\n width: 24px;\n height: 14px;\n border-radius: 7px;\n }\n\n .thumb {\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n background: var(--pk-color-white, #fff);\n box-shadow: inset 0 0 0 1px var(--pk-lightswitch-border-color, #667c92);\n pointer-events: none;\n transition: transform 0.15s ease, box-shadow 0.15s ease;\n }\n\n :host([size='default']) .thumb {\n width: 18px;\n height: 18px;\n transform: translateX(2px);\n }\n\n :host([size='default']) .switch[aria-checked='true'] .thumb {\n transform: translateX(calc(100% - 4px));\n box-shadow: inset 0 0 0 1px var(--pk-lightswitch-track-on-border);\n }\n\n :host([size='sm']) .thumb {\n width: 14px;\n height: 14px;\n transform: translateX(2px);\n }\n\n :host([size='sm']) .switch[aria-checked='true'] .thumb {\n transform: translateX(calc(100% - 2px));\n box-shadow: inset 0 0 0 1px var(--pk-lightswitch-track-on-border);\n }\n\n :host([size='xs']) .thumb {\n width: 12px;\n height: 12px;\n transform: translateX(2px);\n }\n\n :host([size='xs']) .switch[aria-checked='true'] .thumb {\n transform: translateX(calc(100% - 2px));\n box-shadow: inset 0 0 0 1px var(--pk-lightswitch-track-on-border);\n }\n\n :host([size='xxs']) .thumb {\n width: 10px;\n height: 10px;\n transform: translateX(2px);\n }\n\n :host([size='xxs']) .switch[aria-checked='true'] .thumb {\n transform: translateX(12px);\n box-shadow: inset 0 0 0 1px var(--pk-lightswitch-track-on-border, #007d6f);\n }\n\n .thumb svg {\n width: 14px;\n height: 14px;\n color: var(--pk-lightswitch-track-on);\n opacity: 0;\n transform: translateY(1px);\n transition: opacity 0.15s ease;\n }\n\n .switch[aria-checked='true'] .thumb svg {\n opacity: 1;\n }\n\n :host([size='sm']) .thumb svg {\n width: 10px;\n height: 10px;\n }\n\n :host([size='xs']) .thumb svg,\n :host([size='xxs']) .thumb svg {\n display: none;\n }\n\n .input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n opacity: 0;\n }\n }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property, query } from '../../decorators.js';\nimport type { PropertyValues } from 'lit';\n\nimport { formControlStyles } from '../../base/form-control.styles.js';\nimport { PkFormAssociatedElement } from '../../base/pk-form-associated-element.js';\nimport { HasSlotController } from '../../internal/has-slot.js';\nimport { hasInstructionContent, readLegacyInstructions } from '../../internal/field-labels.js';\nimport { MirrorValidator, RequiredValidator } from '../../validators/index.js';\nimport { pkLightswitchStyles } from './pk-lightswitch.styles.js';\n\nconst CHECK_ICON = html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" aria-hidden=\"true\">\n <path fill=\"currentColor\" d=\"M557.5 192L534.9 214.6L278.9 470.6C266.4 483.1 246.1 483.1 233.6 470.6L105.6 342.6L83 320L128.3 274.7C129.6 276 172.3 318.7 256.3 402.7L489.7 169.3L512.3 146.7L557.6 192z\" />\n </svg>\n`;\n\nexport type PkLightswitchSize = 'default' | 'sm' | 'xs' | 'xxs';\n\n/**\n * Craft lightswitch — switch API (`role=\"switch\"`), form-associated.\n *\n * @slot - Switch label\n * @slot instructions - Instructions text (or use `instructions` attribute)\n * @slot hint - Alias for `instructions`\n *\n * @csspart base - Root wrapper\n * @csspart switch - Switch button\n * @csspart thumb - Thumb element\n * @csspart label - Label text\n * @csspart instructions - Instructions text\n * @csspart input - Hidden checkbox input\n */\n@customElement('pk-lightswitch')\nexport class PkLightswitch extends PkFormAssociatedElement {\n static override shadowRootOptions: ShadowRootInit = {\n mode: 'open',\n delegatesFocus: true,\n };\n\n static override styles = [formControlStyles, pkLightswitchStyles];\n\n static override get validators() {\n return [...super.validators, MirrorValidator(), RequiredValidator({ validationProperty: 'checked' })];\n }\n\n override assumeInteractionOn = ['change'];\n\n private readonly hasSlotController = new HasSlotController(this, 'instructions', 'hint');\n\n @property({ type: Boolean, reflect: true })\n checked = false;\n\n @property({ attribute: 'default-checked', type: Boolean })\n defaultChecked = false;\n\n @property({ type: Boolean, reflect: true })\n invalid = false;\n\n @property({ reflect: true })\n size: PkLightswitchSize = 'default';\n\n @property()\n value = 'on';\n\n @property()\n label = '';\n\n @property()\n instructions = '';\n\n @query('.input')\n override input!: HTMLInputElement;\n\n @query('[part=\"switch\"]')\n private switchElement!: HTMLButtonElement;\n\n override connectedCallback(): void {\n this.instructions = readLegacyInstructions(this, this.instructions);\n super.connectedCallback();\n }\n\n protected override get validationTarget(): HTMLElement {\n return this.input;\n }\n\n protected override syncFormValue(): void {\n this.setFormValue(this.checked ? this.value : null, this.checked ? 'on' : 'off');\n }\n\n protected override resetToDefaultValue(): void {\n this.checked = this.defaultChecked;\n }\n\n protected override restoreFormState(state: string | File | FormData | null): void {\n if (state === 'on' || state === this.value) {\n this.checked = true;\n } else {\n this.checked = false;\n }\n }\n\n override updated(changed: PropertyValues): void {\n if (this.input && changed.has('checked')) {\n this.input.checked = this.checked;\n }\n\n super.updated(changed);\n }\n\n click(): void {\n this.switchElement?.click();\n }\n\n override focus(options?: FocusOptions): void {\n this.switchElement?.focus(options);\n }\n\n override blur(): void {\n this.switchElement?.blur();\n }\n\n private toggle(): void {\n if (this.disabled) {\n return;\n }\n\n this.checked = !this.checked;\n this.emitCheckedChange();\n }\n\n private handleKeyDown(event: KeyboardEvent): void {\n const isRtl = this.matches(':dir(rtl)');\n\n if (event.key === ' ' || event.key === 'Enter') {\n event.preventDefault();\n this.toggle();\n return;\n }\n\n if (event.key === 'ArrowLeft') {\n event.preventDefault();\n this.checked = isRtl;\n this.emitCheckedChange();\n return;\n }\n\n if (event.key === 'ArrowRight') {\n event.preventDefault();\n this.checked = !isRtl;\n this.emitCheckedChange();\n }\n }\n\n private emitCheckedChange(): void {\n this.hasInteracted = true;\n\n this.dispatchEvent(new CustomEvent('pk-change', {\n detail: { checked: this.checked },\n bubbles: true,\n composed: true,\n }));\n\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n }\n\n private handleLabelClick(event: Event): void {\n if (this.disabled || event.target === this.switchElement) {\n return;\n }\n\n this.toggle();\n }\n\n private hasLabelContent(): boolean {\n if (this.label) {\n return true;\n }\n\n const slot = this.shadowRoot?.querySelector('slot:not([name])') as HTMLSlotElement | null;\n\n if (!slot) {\n return false;\n }\n\n return slot.assignedNodes({ flatten: true }).some((node) => {\n if (node.nodeType === Node.TEXT_NODE) {\n return Boolean(node.textContent?.trim());\n }\n\n return node.nodeType === Node.ELEMENT_NODE;\n });\n }\n\n override render() {\n const hasInstructions = hasInstructionContent(\n (name, flag) => this.hasSlotController.test(name, flag),\n this.instructions,\n );\n const hasLabel = this.hasLabelContent();\n\n return html`\n <div part=\"base\" class=\"base\">\n <button\n part=\"switch\"\n class=\"switch\"\n type=\"button\"\n role=\"switch\"\n ?disabled=${this.disabled}\n aria-checked=${this.checked ? 'true' : 'false'}\n aria-invalid=${this.invalid ? 'true' : nothing}\n aria-describedby=${hasInstructions ? 'instructions' : nothing}\n aria-labelledby=${hasLabel ? 'label' : nothing}\n @click=${this.toggle}\n @keydown=${this.handleKeyDown}\n >\n <span part=\"thumb\" class=\"thumb\">${CHECK_ICON}</span>\n </button>\n <input\n part=\"input\"\n class=\"input\"\n type=\"checkbox\"\n tabindex=\"-1\"\n .checked=${this.checked}\n ?disabled=${this.disabled}\n ?required=${this.required}\n value=${this.value}\n aria-invalid=${this.invalid ? 'true' : nothing}\n @change=${(event: Event) => event.stopPropagation()}\n />\n ${hasLabel || hasInstructions\n ? html`\n <div class=\"content\" @click=${this.handleLabelClick}>\n ${hasLabel\n ? html`\n <span part=\"label\" class=\"label\" id=\"label\">\n <slot></slot>${this.label}\n </span>\n `\n : nothing}\n ${hasInstructions\n ? html`\n <span part=\"instructions\" class=\"instructions form-control__instructions\" id=\"instructions\">\n <slot name=\"instructions\">${this.instructions}</slot>\n <slot name=\"hint\"></slot>\n </span>\n `\n : nothing}\n </div>\n `\n : nothing}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-lightswitch': PkLightswitch;\n }\n}\n"],"mappings":"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"}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { t as icons_exports } from "./icons-BR8JcQj2.js";
|
|
2
|
-
import { n as PkElement, t as __decorate } from "./decorate-
|
|
2
|
+
import { i as property, n as PkElement, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
|
|
3
3
|
import { n as renderIconHtml } from "./render-Dvc3MHQR.js";
|
|
4
4
|
import { css, html, nothing } from "lit";
|
|
5
|
-
import { customElement, property } from "lit/decorators.js";
|
|
6
5
|
import { unsafeSVG } from "lit/directives/unsafe-svg.js";
|
|
7
6
|
//#region src/utils/highlight-text.ts
|
|
8
7
|
/** Split label text into matched/unmatched segments for typeahead highlighting. */
|
|
@@ -170,6 +169,7 @@ var PkOption = class PkOption extends PkElement {
|
|
|
170
169
|
static {
|
|
171
170
|
this.styles = pkOptionStyles;
|
|
172
171
|
}
|
|
172
|
+
/** Focus the option’s inner control (listbox keyboard navigation). */
|
|
173
173
|
focusControl(preventScroll = true) {
|
|
174
174
|
this.shadowRoot?.querySelector(".option")?.focus({ preventScroll });
|
|
175
175
|
}
|
|
@@ -236,7 +236,7 @@ var PkOption = class PkOption extends PkElement {
|
|
|
236
236
|
" ",
|
|
237
237
|
"Escape"
|
|
238
238
|
]).has(event.key)) return;
|
|
239
|
-
const owner = this.closest("pk-select, pk-combobox");
|
|
239
|
+
const owner = this.closest("pk-select, pk-combobox, pk-autocomplete");
|
|
240
240
|
const panel = owner ? null : this.closest("[role=\"listbox\"]");
|
|
241
241
|
if (!owner && !panel) return;
|
|
242
242
|
event.preventDefault();
|
|
@@ -317,4 +317,4 @@ PkOption = __decorate([customElement("pk-option")], PkOption);
|
|
|
317
317
|
//#endregion
|
|
318
318
|
export { PkOption as t };
|
|
319
319
|
|
|
320
|
-
//# sourceMappingURL=pk-option-
|
|
320
|
+
//# sourceMappingURL=pk-option-DQZHV9jL.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pk-option-DQZHV9jL.js","names":[],"sources":["../../src/utils/highlight-text.ts","../../src/components/select/pk-option.styles.ts","../../src/components/select/pk-option.ts"],"sourcesContent":["export type HighlightPart = {\n text: string;\n match: boolean;\n};\n\n/** Split label text into matched/unmatched segments for typeahead highlighting. */\nexport function splitHighlightParts(text: string, search: string): HighlightPart[] {\n const label = String(text ?? '');\n const query = String(search ?? '').trim();\n\n if (!query) {\n return [{ text: label, match: false }];\n }\n\n const lowerLabel = label.toLowerCase();\n const lowerQuery = query.toLowerCase();\n const parts: HighlightPart[] = [];\n let cursor = 0;\n let matchIndex = lowerLabel.indexOf(lowerQuery);\n\n while (matchIndex !== -1) {\n if (matchIndex > cursor) {\n parts.push({\n text: label.slice(cursor, matchIndex),\n match: false,\n });\n }\n\n parts.push({\n text: label.slice(matchIndex, matchIndex + query.length),\n match: true,\n });\n\n cursor = matchIndex + query.length;\n matchIndex = lowerLabel.indexOf(lowerQuery, cursor);\n }\n\n if (cursor < label.length) {\n parts.push({\n text: label.slice(cursor),\n match: false,\n });\n }\n\n return parts.length > 0 ? parts : [{ text: label, match: false }];\n}\n","import { css } from 'lit';\n\nexport const pkOptionStyles = css`\n @layer pk-component {\n :host {\n display: block;\n /*\n * Slotted option labels inherit type metrics from this host (same\n * Craft-vs-Tailwind trap as pk-dropdown-item). Size tokens arrive via\n * pk-select ::slotted(pk-option) custom properties.\n */\n font-family: var(--pk-font-family);\n font-size: var(--pk-select-item-font-size, var(--pk-font-size-base));\n line-height: var(--pk-select-item-line-height, 1.4);\n color: var(--pk-color-gray-700);\n }\n\n .option {\n position: relative;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n width: 100%;\n margin: 0;\n min-height: var(--pk-select-item-min-height, var(--pk-input-height));\n padding-block: var(--pk-select-item-padding-block, 6px);\n padding-inline-start: var(--pk-select-item-padding-inline, 10px);\n padding-inline-end: var(--pk-select-item-padding-inline-end, 2rem);\n border: var(--pk-select-trigger-border-width, 1px) solid transparent;\n background: transparent;\n color: inherit;\n font: inherit;\n font-family: var(--pk-font-family);\n font-size: var(--pk-select-item-font-size, var(--pk-font-size-base));\n line-height: var(--pk-select-item-line-height, 1.4);\n text-align: left;\n white-space: nowrap;\n cursor: default;\n user-select: none;\n outline: none;\n box-sizing: border-box;\n }\n\n .start {\n display: none;\n flex: 0 0 auto;\n align-items: center;\n }\n\n :host([data-has-start]) .start {\n display: inline-flex;\n }\n\n :host([hidden]) {\n display: none !important;\n }\n\n .option:focus-visible,\n :host([highlighted]) .option {\n background: var(--pk-color-slate-100);\n }\n\n :host([disabled]) .option,\n .option[aria-disabled='true'] {\n pointer-events: none;\n opacity: 0.5;\n }\n\n .check {\n position: absolute;\n inset-inline-end: var(--pk-select-item-indicator-inset, 0.5rem);\n top: 50%;\n display: none;\n align-items: center;\n justify-content: center;\n width: var(--pk-select-item-indicator-size, 0.75rem);\n height: var(--pk-select-item-indicator-size, 0.75rem);\n color: var(--pk-color-gray-700);\n pointer-events: none;\n transform: translateY(-50%);\n line-height: 0;\n }\n\n :host([selected]) .check {\n display: inline-flex;\n }\n\n .check svg {\n display: block;\n width: var(--pk-select-item-indicator-size, 0.75rem);\n height: var(--pk-select-item-indicator-size, 0.75rem);\n flex-shrink: 0;\n pointer-events: none;\n }\n\n .label {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n /* Allow custom multi-line option layouts (title + subtitle) to stack. */\n white-space: normal;\n }\n\n .match {\n padding: 0;\n border-radius: 2px;\n background: var(--pk-color-blue-100);\n color: inherit;\n }\n }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property } from '../../decorators.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\n\nimport { check, renderIconHtml } from '../../icons/index.js';\nimport { PkElement } from '../../base/pk-element.js';\nimport { splitHighlightParts } from '../../utils/highlight-text.js';\nimport { pkOptionStyles } from './pk-option.styles.js';\n\nconst CHECK_ICON = renderIconHtml(check);\n\n/**\n * Select option — use inside `pk-select`, `pk-combobox`, or `pk-autocomplete`.\n *\n * @slot start - Presentational decoration before the label (e.g. `pk-status`).\n * @slot - Option label\n *\n * @csspart start - Start decoration container\n * @csspart option - Option button\n * @csspart label - Option label\n * @csspart check - Selected-state check indicator\n *\n * @event pk-option-select - Emitted when the option is activated (click / Enter).\n * @event pk-option-highlight - Emitted when the option becomes the highlighted item.\n */\n@customElement('pk-option')\nexport class PkOption extends PkElement {\n static override styles = pkOptionStyles;\n\n /** Option value submitted / emitted when selected. */\n @property()\n value = '';\n\n /**\n * Optional short label for the closed trigger / filter identity (v1 itemToStringLabel).\n * When set, preferred over concatenating rich default-slot text (title + subtitle).\n */\n @property()\n label = '';\n\n /** Disables the option so it cannot be selected. */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /** Whether this option is currently selected. */\n @property({ type: Boolean, reflect: true })\n selected = false;\n\n /** Keyboard / pointer highlight within the listbox. */\n @property({ type: Boolean, reflect: true })\n highlighted = false;\n\n /** Hides the option from the list (e.g. filtered combobox results). */\n @property({ type: Boolean, reflect: true })\n hidden = false;\n\n @property({ type: Number, attribute: 'focus-index' })\n focusIndex = -1;\n\n @property()\n optionId = '';\n\n /** When set, the label renders with matching query text highlighted (combobox filter). */\n @property({ attribute: false })\n matchQuery = '';\n\n /** Focus the option’s inner control (listbox keyboard navigation). */\n focusControl(preventScroll = true): void {\n this.shadowRoot?.querySelector<HTMLButtonElement>('.option')?.focus({ preventScroll });\n }\n\n /**\n * Label for the closed combobox/select value.\n * Prefers the `label` attribute when set; otherwise default-slot text\n * (excluding `slot=\"start\"`), joined with spaces for multi-node layouts.\n */\n getLabel(): string {\n if (this.label.trim()) {\n return this.label.trim();\n }\n\n const labelSlot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n\n if (!labelSlot) {\n return this.textContent?.trim() ?? this.value;\n }\n\n // Join with spaces so multi-line custom labels (\"Link\" + \"Craft CMS\") do not\n // concatenate into \"LinkCraft CMS\" when no explicit `label` is set.\n return labelSlot.assignedNodes()\n .map((node) => (node.textContent ?? '').trim())\n .filter(Boolean)\n .join(' ')\n .trim();\n }\n\n /** Full default-slot text for typeahead matching (includes subtitle lines). */\n getSearchText(): string {\n const labelSlot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n\n if (!labelSlot) {\n return this.getLabel();\n }\n\n const fromSlot = labelSlot.assignedNodes()\n .map((node) => (node.textContent ?? '').trim())\n .filter(Boolean)\n .join(' ')\n .trim();\n\n return fromSlot || this.getLabel();\n }\n\n /** True when the default slot has element children (custom multi-line / rich layouts). */\n private hasRichLabelContent(): boolean {\n return [...this.children].some((node) => {\n if (!(node instanceof HTMLElement)) {\n return false;\n }\n\n // Named slots (e.g. start) are not part of the label.\n return !node.slot || node.slot === '';\n });\n }\n\n /** Light-DOM elements assigned to the start decoration slot. */\n getStartElements(): HTMLElement[] {\n return [...this.querySelectorAll(':scope > [slot=\"start\"]')].filter(\n (node): node is HTMLElement => node instanceof HTMLElement,\n );\n }\n\n override firstUpdated(): void {\n const startSlot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"start\"]');\n\n startSlot?.addEventListener('slotchange', () => this.syncStartDecoration());\n this.syncStartDecoration();\n }\n\n private syncStartDecoration(): void {\n this.toggleAttribute('data-has-start', this.getStartElements().length > 0);\n }\n\n private handleClick(): void {\n if (this.disabled) {\n return;\n }\n\n this.dispatchEvent(new CustomEvent('pk-option-select', {\n detail: { value: this.value },\n bubbles: true,\n composed: true,\n }));\n }\n\n private handleMouseEnter(): void {\n if (this.disabled || this.hidden) {\n return;\n }\n\n this.dispatchEvent(new CustomEvent('pk-option-highlight', {\n detail: { value: this.value },\n bubbles: true,\n composed: true,\n }));\n }\n\n private handleKeyDown(event: KeyboardEvent): void {\n const navKeys = new Set([\n 'ArrowDown',\n 'ArrowUp',\n 'ArrowLeft',\n 'ArrowRight',\n 'Home',\n 'End',\n 'Enter',\n ' ',\n 'Escape',\n ]);\n\n if (!navKeys.has(event.key)) {\n return;\n }\n\n const owner = this.closest('pk-select, pk-combobox, pk-autocomplete');\n const panel = owner ? null : this.closest('[role=\"listbox\"]');\n\n if (!owner && !panel) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n\n const keydownEvent = new CustomEvent('pk-listbox-keydown', {\n detail: { keyboardEvent: event },\n bubbles: true,\n });\n\n if (owner) {\n owner.dispatchEvent(keydownEvent);\n return;\n }\n\n panel!.dispatchEvent(keydownEvent);\n }\n\n private renderLabel() {\n const query = this.matchQuery.trim();\n // Flat highlight replaces the default slot — that collapses custom layouts\n // (title + subtitle) into one run when filtering. Keep the slot for rich content.\n if (!query || this.hasRichLabelContent()) {\n return html`\n <span part=\"label\" class=\"label\">\n <slot></slot>\n </span>\n `;\n }\n\n const label = this.getLabel();\n const parts = splitHighlightParts(label, query);\n\n return html`\n <span part=\"label\" class=\"label\">\n ${parts.map((part) => part.match\n ? html`<mark class=\"match\">${part.text}</mark>`\n : html`<span>${part.text}</span>`)}\n </span>\n `;\n }\n\n override render() {\n return html`\n <button\n part=\"option\"\n type=\"button\"\n class=\"option\"\n role=\"option\"\n id=${this.optionId || nothing}\n ?disabled=${this.disabled}\n aria-disabled=${this.disabled ? 'true' : nothing}\n aria-selected=${this.selected ? 'true' : 'false'}\n tabindex=${this.focusIndex}\n @click=${this.handleClick}\n @mouseenter=${this.handleMouseEnter}\n @keydown=${this.handleKeyDown}\n >\n <span part=\"start\" class=\"start\">\n <slot name=\"start\"></slot>\n </span>\n ${this.renderLabel()}\n <span part=\"check\" class=\"check\" aria-hidden=\"true\">${unsafeSVG(CHECK_ICON)}</span>\n </button>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-option': PkOption;\n }\n}\n"],"mappings":"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"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import { n as PkElement, t as __decorate } from "./decorate-
|
|
1
|
+
import { i as property, n as PkElement, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
|
|
2
2
|
import { i as uniqueId } from "./focus-aa5dlv8k.js";
|
|
3
3
|
import { css, html } from "lit";
|
|
4
|
-
import { customElement, property } from "lit/decorators.js";
|
|
5
4
|
//#region src/components/select/pk-option-group.styles.ts
|
|
6
5
|
var pkOptionGroupStyles = css`
|
|
7
6
|
@layer pk-component {
|
|
@@ -69,4 +68,4 @@ PkOptionGroup = __decorate([customElement("pk-option-group")], PkOptionGroup);
|
|
|
69
68
|
//#endregion
|
|
70
69
|
export { PkOptionGroup as t };
|
|
71
70
|
|
|
72
|
-
//# sourceMappingURL=pk-option-group-
|
|
71
|
+
//# sourceMappingURL=pk-option-group-CCzJkBFp.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pk-option-group-CCzJkBFp.js","names":[],"sources":["../../src/components/select/pk-option-group.styles.ts","../../src/components/select/pk-option-group.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkOptionGroupStyles = css`\n @layer pk-component {\n :host {\n display: block;\n }\n\n /* Hard hex fallbacks: when groups portal outside pk-select, size-token\n * vars / theme tokens may be absent and invalid color inherits option black.\n * Weight/color match v1 ComboboxLabel / SelectLabel (text-slate-700, no font-medium). */\n .label {\n padding-block-start: var(--pk-select-group-label-padding-block-start, 8px);\n padding-block-end: var(--pk-select-group-label-padding-block-end, 2px);\n padding-inline: var(--pk-select-item-padding-inline, 10px);\n color: var(--pk-select-group-label-color, var(--pk-color-slate-700, rgba(96, 125, 159, 0.7)));\n font-family: var(--pk-font-family);\n /* Default matches v1 ComboboxLabel/SelectLabel text-xs (12px). */\n font-size: var(--pk-select-group-label-font-size, 12px);\n font-weight: 400;\n line-height: 1.3;\n /* Light-DOM ancestors (e.g. Formie empty dropzone text-center) must not center labels. */\n text-align: left;\n user-select: none;\n pointer-events: none;\n }\n\n :host([hidden]),\n :host([data-pk-filter-empty]) {\n display: none !important;\n }\n }\n`;\n","import { html } from 'lit';\nimport { customElement, property } from '../../decorators.js';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { uniqueId } from '../../a11y/focus.js';\nimport { pkOptionGroupStyles } from './pk-option-group.styles.js';\n\n/**\n * Visual option group for `pk-select` — listbox grouping pattern.\n *\n * @slot - `pk-option` items in this group\n *\n * @csspart label - Group label\n */\n@customElement('pk-option-group')\nexport class PkOptionGroup extends PkElement {\n static override styles = pkOptionGroupStyles;\n\n /** Visible group heading above the options. */\n @property({ reflect: true })\n label = '';\n\n /** Hides the group and its options. */\n @property({ type: Boolean, reflect: true })\n hidden = false;\n\n private readonly labelId = uniqueId('pk-option-group-label');\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.setAttribute('role', 'group');\n this.setAttribute('aria-labelledby', this.labelId);\n }\n\n override render() {\n return html`\n <div part=\"label\" class=\"label\" id=${this.labelId}>${this.label}</div>\n <div role=\"presentation\">\n <slot></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-option-group': PkOptionGroup;\n }\n}\n"],"mappings":";;;;AAEA,IAAa,sBAAsB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACa/B,IAAA,gBAAA,MAAM,sBAAsB,UAAU;;;eAKjC;gBAIC;iBAEkB,SAAS,wBAAwB;;;gBAVnC;;CAYzB,oBAAmC;AAC/B,QAAM,mBAAmB;AACzB,OAAK,aAAa,QAAQ,QAAQ;AAClC,OAAK,aAAa,mBAAmB,KAAK,QAAQ;;CAGtD,SAAkB;AACd,SAAO,IAAI;iDAC8B,KAAK,QAAQ,GAAG,KAAK,MAAM;;;;;;;YAjBvE,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,cAAA,WAAA,SAAA,KAAA,EAAA;YAI3B,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,cAAA,WAAA,UAAA,KAAA,EAAA;4BAT9C,cAAc,kBAAkB,CAAA,EAAA,cAAA"}
|
|
@@ -1,15 +1,14 @@
|
|
|
1
|
-
import { n as PkElement, t as __decorate } from "./decorate-
|
|
1
|
+
import { a as query, i as property, n as PkElement, o as state, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
|
|
2
2
|
import { r as buttonGroupCornerRoleStyles } from "./button-group-item.styles-DYmBR28a.js";
|
|
3
3
|
import { i as uniqueId } from "./focus-aa5dlv8k.js";
|
|
4
4
|
import { i as unregisterDismissible, n as isTopDismissible, r as registerDismissible } from "./dismissible-stack-XQUMfKO3.js";
|
|
5
5
|
import { i as PkShowEvent, n as PkAfterShowEvent, r as PkHideEvent, t as PkAfterHideEvent } from "./overlay-lifecycle-D0pkTQyI.js";
|
|
6
|
-
import { r as resolveElementById } from "./pk-popup-
|
|
6
|
+
import { r as resolveElementById } from "./pk-popup-B9AgBC2V.js";
|
|
7
7
|
import { i as waitForPopupReposition, r as syncPopupPlacementAnimation } from "./popup-placement-animation-WlEXnS85.js";
|
|
8
|
-
import { n as isPointerInsideOverlay } from "./popup-pointer-
|
|
9
|
-
import { t as popupContentAnimationStyles } from "./popup-content-animation.styles-
|
|
8
|
+
import { n as isPointerInsideOverlay } from "./popup-pointer-CuLjk1th.js";
|
|
9
|
+
import { t as popupContentAnimationStyles } from "./popup-content-animation.styles-BnNiguJo.js";
|
|
10
10
|
import { css, html, nothing } from "lit";
|
|
11
11
|
import { classMap } from "lit/directives/class-map.js";
|
|
12
|
-
import { customElement, property, query, state } from "lit/decorators.js";
|
|
13
12
|
//#region src/components/popover/pk-popover.styles.ts
|
|
14
13
|
var pkPopoverStyles = [
|
|
15
14
|
buttonGroupCornerRoleStyles(),
|
|
@@ -374,4 +373,4 @@ PkPopover = __decorate([customElement("pk-popover")], PkPopover);
|
|
|
374
373
|
//#endregion
|
|
375
374
|
export { PkPopover as t };
|
|
376
375
|
|
|
377
|
-
//# sourceMappingURL=pk-popover-
|
|
376
|
+
//# sourceMappingURL=pk-popover-KSIOYlbs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pk-popover-KSIOYlbs.js","names":[],"sources":["../../src/components/popover/pk-popover.styles.ts","../../src/components/popover/pk-popover.ts"],"sourcesContent":["import { css } from 'lit';\n\nimport { buttonGroupCornerRoleStyles } from '../button-group/button-group-item.styles.js';\nimport { popupContentAnimationStyles } from '../../styles/popup-content-animation.styles.js';\n\nexport const pkPopoverStyles = [\n buttonGroupCornerRoleStyles(),\n popupContentAnimationStyles,\n css`\n @layer pk-component {\n :host {\n /* Flex column parents stretch cross-axis size — pin to content.\n (inline-block + align-self; same class of fix as dialog / dropdown.) */\n display: inline-block;\n max-width: 100%;\n align-self: flex-start;\n flex: none;\n vertical-align: middle;\n }\n\n :host([data-pk-group-orientation]) {\n display: inline-flex;\n vertical-align: middle;\n flex: 0 0 auto;\n align-self: auto;\n }\n\n :host([data-pk-group-orientation]) ::slotted([slot='trigger']) {\n --pk-bg-start-start-radius: inherit;\n --pk-bg-start-end-radius: inherit;\n --pk-bg-end-start-radius: inherit;\n --pk-bg-end-end-radius: inherit;\n }\n\n :host([data-pk-group-orientation='horizontal'][data-pk-group-join]) {\n margin-inline-start: var(--pk-bg-horizontal-indent, 0);\n }\n\n :host([data-pk-group-orientation='vertical'][data-pk-group-join]) {\n margin-block-start: var(--pk-bg-vertical-indent, 0);\n }\n\n :host([data-pk-group-orientation='horizontal'][data-pk-group-join]:has([slot='trigger'][variant='outline'], [slot='trigger'][variant='dashed'])) {\n margin-inline-start: var(--pk-bg-horizontal-indent-outlined, 0);\n }\n\n :host([data-pk-group-orientation='vertical'][data-pk-group-join]:has([slot='trigger'][variant='outline'], [slot='trigger'][variant='dashed'])) {\n margin-block-start: var(--pk-bg-vertical-indent-outlined, 0);\n }\n\n /* Match pk-popup's arrow fill to the panel surface when with-arrow is on. */\n :host([with-arrow]) {\n --pk-popup-arrow-color: var(--pk-color-white);\n --pk-popup-arrow-size: 8px;\n }\n\n .panel {\n box-sizing: border-box;\n width: 18rem;\n padding: 1rem;\n border-radius: var(--pk-radius-md);\n background: var(--pk-color-white);\n box-shadow: var(--pk-shadow-popover);\n /* Craft CP body text (~gray-700), not gray-900. */\n color: var(--pk-color-gray-700);\n }\n\n /* Flush panels for command/menu chrome that owns its own inset (variable picker, etc.).\n Match kit v1 PopoverContent min-w 260px / max-w 360px: without min-width,\n width max-content shrinks to short labels and looks narrower than the old picker. */\n :host([flush]) .panel {\n width: max-content;\n min-width: var(--pk-popover-flush-min-width, 16.25rem);\n max-width: min(var(--pk-popover-flush-max-width, 22.5rem), 100vw - 1rem);\n padding: 0;\n }\n\n .panel[hidden] {\n display: none !important;\n }\n }\n `,\n];\n","import { html, nothing } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query, state } from '../../decorators.js';\nimport type { PropertyValues } from 'lit';\n\nimport { isTopDismissible, registerDismissible, unregisterDismissible } from '../../a11y/dismissible-stack.js';\nimport { uniqueId } from '../../a11y/focus.js';\nimport { PkElement } from '../../base/pk-element.js';\nimport { resolveElementById } from '../../internal/resolve-element-by-id.js';\nimport {\n PkAfterHideEvent,\n PkAfterShowEvent,\n PkHideEvent,\n PkShowEvent,\n type PkOverlaySource,\n} from '../../events/overlay-lifecycle.js';\n// Keep the internal element registered when production builds erase type-only imports.\nimport '../popup/pk-popup.js';\nimport type { PkPopup, PkPopupPlacement } from '../popup/pk-popup.js';\nimport {\n syncPopupPlacementAnimation,\n waitForPopupReposition,\n} from '../../utils/popup-placement-animation.js';\nimport { isPointerInsideOverlay } from '../../utils/popup-pointer.js';\nimport { pkPopoverStyles } from './pk-popover.styles.js';\n\n/**\n * Popover — pattern: trigger toggles a floating panel.\n *\n * @slot trigger - Popover trigger\n * @slot - Popover content\n *\n * @csspart panel - Floating content panel\n *\n * @attr with-arrow - Show a pointing arrow toward the trigger (default: off)\n */\n@customElement('pk-popover')\nexport class PkPopover extends PkElement {\n static override styles = pkPopoverStyles;\n\n @property({ type: Boolean, reflect: true })\n open = false;\n\n @property({ reflect: true })\n placement: PkPopupPlacement = 'bottom';\n\n @property({ attribute: 'side-offset', type: Number })\n sideOffset = 4;\n\n /**\n * Drop default panel padding/fixed width so slotted chrome (command lists, etc.)\n * can control its own inset. Consumer outer `p-0` alone cannot reach `.panel`.\n */\n @property({ type: Boolean, reflect: true })\n flush = false;\n\n /**\n * Show a floating-ui arrow on the panel (off by default).\n * Named like other optional chrome (`with-clear`, `with-caret`) — tooltip always\n * paints its own arrow and has no toggle.\n */\n @property({ attribute: 'with-arrow', type: Boolean, reflect: true })\n withArrow = false;\n\n /** Anchor element id — alternative to the trigger slot. */\n @property({ reflect: true })\n for = '';\n\n /**\n * Live element anchor — use when the target lives in another shadow tree\n * (e.g. TipTap chips). Preferred over `for` / trigger slot when set.\n * Stays in the consumer tree so modal `showModal()` inert does not apply\n * (unlike portaling the panel to a root outside the dialog).\n */\n @property({ attribute: false })\n anchor: Element | null = null;\n\n @query('pk-popup')\n private popupElement!: PkPopup;\n\n private get panelElement(): HTMLDivElement | null {\n return this.popupElement?.getContentElement() as HTMLDivElement | null ?? null;\n }\n\n @state()\n private triggerElement: HTMLElement | null = null;\n\n /** True while the shared popup-content exit animation is running. */\n @state()\n private closing = false;\n\n /** Gates `data-open` so enter motion starts after Floating UI places the panel. */\n @state()\n private panelAnimated = false;\n\n private readonly triggerId = uniqueId('pk-popover-trigger');\n private dismissRegistered = false;\n /** Guard re-entry while openPopover/closePopover mutate `open`. */\n private syncingOpenSideEffects = false;\n /** Coalesce overlapping close calls (updated + light-dismiss) onto one exit. */\n private exitAnimationPromise: Promise<void> | null = null;\n\n override disconnectedCallback(): void {\n // Skip exit motion on teardown — demote immediately.\n void this.closePopover('api', true);\n super.disconnectedCallback();\n }\n\n /**\n * When controlled/toggle `open` flips false, arm `closing` in the same update so the\n * panel is not `hidden` for a frame before the exit animation starts.\n */\n override willUpdate(changed: PropertyValues): void {\n if (\n changed.has('open')\n && this.open === false\n && changed.get('open') === true\n && !this.syncingOpenSideEffects\n && !this.closing\n ) {\n this.closing = true;\n this.panelAnimated = false;\n }\n }\n\n /**\n * Controlled `open` (e.g. React) must arm/disarm light-dismiss the same way as\n * trigger toggles. Without this, programmatic open shows the panel but click-away\n * never fires.\n */\n override async updated(changed: PropertyValues): Promise<void> {\n super.updated(changed);\n\n if (!changed.has('open') || this.syncingOpenSideEffects) {\n return;\n }\n\n const previousOpen = changed.get('open');\n\n if (previousOpen === this.open) {\n return;\n }\n\n // Initial connect with open=false — nothing to tear down.\n if (previousOpen === undefined && this.open === false) {\n return;\n }\n\n if (this.open) {\n await this.openPopover();\n } else {\n await this.closePopover('api');\n }\n }\n\n private onTriggerSlotChange(event: Event): void {\n const slot = event.target as HTMLSlotElement;\n const [trigger] = slot.assignedElements({ flatten: true }) as HTMLElement[];\n\n this.unbindTrigger(this.triggerElement);\n this.triggerElement = trigger ?? null;\n this.bindTrigger(this.triggerElement);\n }\n\n private bindTrigger(trigger: HTMLElement | null): void {\n if (!trigger) {\n return;\n }\n\n if (!trigger.id) {\n trigger.id = this.triggerId;\n }\n\n trigger.setAttribute('aria-haspopup', 'dialog');\n trigger.addEventListener('click', this.handleToggleClick);\n this.syncExpanded();\n }\n\n private unbindTrigger(trigger: HTMLElement | null): void {\n trigger?.removeEventListener('click', this.handleToggleClick);\n }\n\n private handleToggleClick = (event: Event): void => {\n event.preventDefault();\n event.stopPropagation();\n\n if (this.closing) {\n return;\n }\n\n // Flip `open` only — side effects run from `updated()` (same as dropdown-menu).\n this.open = !this.open;\n };\n\n private async openPopover(): Promise<void> {\n if (!this.getAnchor()) {\n return;\n }\n\n // Finish any in-flight exit before arming a new open.\n if (this.exitAnimationPromise) {\n await this.exitAnimationPromise;\n }\n\n // Already armed from a prior controlled/toggle open.\n if (this.dismissRegistered && this.open) {\n if (this.panelElement) {\n this.panelElement.hidden = false;\n }\n this.syncExpanded();\n return;\n }\n\n if (!this.dispatchEvent(new PkShowEvent())) {\n this.syncingOpenSideEffects = true;\n this.open = false;\n this.syncingOpenSideEffects = false;\n return;\n }\n\n this.syncingOpenSideEffects = true;\n this.open = true;\n this.syncingOpenSideEffects = false;\n this.closing = false;\n this.panelAnimated = false;\n\n if (this.panelElement) {\n this.panelElement.hidden = false;\n // Seed side before first paint so enter keyframes pick a direction.\n syncPopupPlacementAnimation(this.panelElement, this.placement);\n }\n\n this.syncExpanded();\n this.registerDismissHandlers();\n\n await this.updateComplete;\n const placement = await waitForPopupReposition(this.popupElement, this.placement);\n\n if (this.panelElement) {\n syncPopupPlacementAnimation(this.panelElement, placement);\n }\n\n // Flip data-open after placement so the shared enter animation can run.\n this.panelAnimated = true;\n\n this.dispatchEvent(new PkAfterShowEvent());\n this.dispatchEvent(new CustomEvent('pk-open-change', {\n detail: { open: true },\n bubbles: true,\n composed: true,\n }));\n }\n\n /**\n * @param immediate Skip exit animation (disconnect / forced teardown).\n */\n async closePopover(source: PkOverlaySource = 'unknown', immediate = false): Promise<void> {\n if (this.exitAnimationPromise) {\n return this.exitAnimationPromise;\n }\n\n if (!this.dismissRegistered && !this.closing && !this.open) {\n return;\n }\n\n const hideEvent = new PkHideEvent(source);\n\n if (!this.dispatchEvent(hideEvent)) {\n // Controlled close was cancelled — restore open and cancel exit arming.\n this.syncingOpenSideEffects = true;\n this.open = true;\n this.syncingOpenSideEffects = false;\n this.closing = false;\n this.panelAnimated = true;\n return;\n }\n\n this.unregisterDismissHandlers();\n this.closing = true;\n this.panelAnimated = false;\n\n if (this.open) {\n this.syncingOpenSideEffects = true;\n this.open = false;\n this.syncingOpenSideEffects = false;\n }\n\n const finishClose = async (): Promise<void> => {\n if (!immediate) {\n await this.updateComplete;\n await this.waitForExitAnimation();\n }\n\n this.closing = false;\n this.panelAnimated = false;\n\n if (this.panelElement) {\n this.panelElement.hidden = true;\n this.panelElement.removeAttribute('data-side');\n }\n\n this.syncExpanded();\n\n this.dispatchEvent(new PkAfterHideEvent());\n this.dispatchEvent(new CustomEvent('pk-open-change', {\n detail: { open: false },\n bubbles: true,\n composed: true,\n }));\n };\n\n this.exitAnimationPromise = finishClose().finally(() => {\n this.exitAnimationPromise = null;\n });\n\n return this.exitAnimationPromise;\n }\n\n private waitForExitAnimation(): Promise<void> {\n const panel = this.panelElement;\n\n if (!panel) {\n return Promise.resolve();\n }\n\n return new Promise((resolve) => {\n let settled = false;\n\n const finish = (): void => {\n if (settled) {\n return;\n }\n\n settled = true;\n panel.removeEventListener('animationend', onAnimationEnd);\n window.clearTimeout(fallback);\n panel.classList.remove('closing');\n resolve();\n };\n\n const onAnimationEnd = (event: AnimationEvent): void => {\n if (event.target === panel && event.animationName.startsWith('pk-popup-content-out')) {\n finish();\n }\n };\n\n panel.classList.add('closing');\n panel.addEventListener('animationend', onAnimationEnd);\n const fallback = window.setTimeout(finish, 150);\n });\n }\n\n private getAnchor(): Element | string | null {\n if (this.anchor) {\n return this.anchor;\n }\n\n if (this.for) {\n return resolveElementById(this, this.for);\n }\n\n if (this.triggerElement) {\n return this.triggerElement;\n }\n\n return null;\n }\n\n private registerDismissHandlers(): void {\n if (this.dismissRegistered) {\n return;\n }\n\n registerDismissible(this);\n this.dismissRegistered = true;\n document.addEventListener('pointerdown', this.onDocumentPointerDown, true);\n document.addEventListener('keydown', this.onDocumentKeyDown, true);\n }\n\n private unregisterDismissHandlers(): void {\n if (this.dismissRegistered) {\n unregisterDismissible(this);\n this.dismissRegistered = false;\n }\n\n document.removeEventListener('pointerdown', this.onDocumentPointerDown, true);\n document.removeEventListener('keydown', this.onDocumentKeyDown, true);\n }\n\n private onDocumentPointerDown = (event: PointerEvent): void => {\n if (this.isPointerInside(event) || this.closing) {\n return;\n }\n\n void this.closePopover('light-dismiss');\n };\n\n private isPointerInside(event: PointerEvent): boolean {\n return isPointerInsideOverlay(event, {\n host: this,\n anchor: this.getAnchorElement(),\n panel: this.panelElement,\n });\n };\n\n private onDocumentKeyDown = (event: KeyboardEvent): void => {\n if (event.key !== 'Escape' || !isTopDismissible(this) || this.closing) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n void this.closePopover('escape');\n };\n\n private getAnchorElement(): HTMLElement | null {\n if (this.anchor instanceof HTMLElement) {\n return this.anchor;\n }\n\n if (this.triggerElement) {\n return this.triggerElement;\n }\n\n if (this.for) {\n return resolveElementById(this, this.for);\n }\n\n return null;\n }\n\n private syncExpanded(): void {\n this.triggerElement?.setAttribute('aria-expanded', this.open ? 'true' : 'false');\n }\n\n override render() {\n const anchor = this.getAnchor();\n\n return html`\n <slot name=\"trigger\" @slotchange=${this.onTriggerSlotChange}></slot>\n <pk-popup\n .active=${this.open || this.closing}\n .anchor=${anchor ?? ''}\n .placement=${this.placement}\n .distance=${this.sideOffset}\n .arrow=${this.withArrow}\n flip\n shift\n >\n <div\n part=\"panel\"\n class=${classMap({\n panel: true,\n 'pk-popup-content': true,\n closing: this.closing,\n })}\n ?hidden=${!this.open && !this.closing}\n data-open=${this.panelAnimated && !this.closing ? '' : nothing}\n tabindex=${this.open ? '-1' : nothing}\n >\n <slot></slot>\n </div>\n </pk-popup>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-popover': PkPopover;\n }\n}\n"],"mappings":"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"}
|
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import { n as PkElement, t as __decorate } from "./decorate-
|
|
1
|
+
import { a as query, i as property, n as PkElement, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
|
|
2
2
|
import { t as computePopupTransformOrigin } from "./popup-placement-animation-WlEXnS85.js";
|
|
3
3
|
import { t as SUPPORTS_POPOVER } from "./supports-popover-CUBsbHpS.js";
|
|
4
4
|
import { css, html, nothing } from "lit";
|
|
5
5
|
import { classMap } from "lit/directives/class-map.js";
|
|
6
|
-
import { customElement, property, query } from "lit/decorators.js";
|
|
7
6
|
import { arrow, autoUpdate, computePosition, flip, getOverflowAncestors, offset, platform, shift, size } from "@floating-ui/dom";
|
|
8
7
|
import { offsetParent } from "composed-offset-position";
|
|
9
8
|
//#region src/internal/resolve-element-by-id.ts
|
|
@@ -535,4 +534,4 @@ PkPopup = __decorate([customElement("pk-popup")], PkPopup);
|
|
|
535
534
|
//#endregion
|
|
536
535
|
export { PkRepositionEvent as n, resolveElementById as r, PkPopup as t };
|
|
537
536
|
|
|
538
|
-
//# sourceMappingURL=pk-popup-
|
|
537
|
+
//# sourceMappingURL=pk-popup-B9AgBC2V.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pk-popup-B9AgBC2V.js","names":[],"sources":["../../src/internal/resolve-element-by-id.ts","../../src/events/pk-reposition.ts","../../src/components/popup/pk-popup.styles.ts","../../src/components/popup/pk-popup.ts"],"sourcesContent":["/** Resolve an element id from the same root as the host (shadow or document), then the document. */\nexport function resolveElementById(host: HTMLElement, id: string): HTMLElement | null {\n if (!id) {\n return null;\n }\n\n const root = host.getRootNode();\n\n if (root instanceof Document || root instanceof ShadowRoot) {\n const match = root.getElementById(id);\n\n if (match) {\n return match;\n }\n }\n\n return host.ownerDocument.getElementById(id);\n}\n","/** Emitted when a popup repositions — mirrors reposition semantics with pk naming. */\nexport class PkRepositionEvent extends Event {\n constructor() {\n super('pk-reposition', { bubbles: true, cancelable: false, composed: true });\n }\n}\n\ndeclare global {\n interface GlobalEventHandlersEventMap {\n 'pk-reposition': PkRepositionEvent;\n }\n}\n","import { css } from 'lit';\n\nexport const pkPopupStyles = css`\n @layer pk-component {\n :host {\n display: contents;\n }\n\n .popup {\n position: absolute;\n isolation: isolate;\n width: max-content;\n z-index: var(--pk-popup-z-index, 1000);\n /* Never transition coordinates — flip would animate the jump. */\n transition: none;\n\n /* Reset UA styles for [popover] — see pk-popup. */\n inset: unset;\n padding: unset;\n margin: unset;\n height: unset;\n color: unset;\n background: unset;\n border: unset;\n overflow: unset;\n }\n\n .popup-fixed {\n position: fixed;\n }\n\n .popup:not(.active) {\n display: none;\n }\n\n /* Prefer visibility over opacity so enter animations are not fighting a\n * 0→1 fade. Matches base-ui isPositioned / hide-until-placed.\n */\n .popup.active:not(.positioned) {\n visibility: hidden;\n pointer-events: none;\n }\n\n .popup.show {\n animation: pk-popup-surface-in 100ms ease-out;\n }\n\n .popup.hide {\n animation: pk-popup-surface-out 100ms ease-in forwards;\n }\n\n @keyframes pk-popup-surface-in {\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n\n to {\n opacity: 1;\n transform: scale(1);\n }\n }\n\n @keyframes pk-popup-surface-out {\n from {\n opacity: 1;\n transform: scale(1);\n }\n\n to {\n opacity: 0;\n transform: scale(0.95);\n }\n }\n\n .arrow {\n position: absolute;\n width: var(--pk-popup-arrow-size, 6px);\n height: var(--pk-popup-arrow-size, 6px);\n rotate: 45deg;\n background: var(--pk-popup-arrow-color, var(--pk-color-white));\n z-index: 1;\n }\n\n .hover-bridge {\n position: fixed;\n z-index: calc(var(--pk-popup-z-index, 1000) - 1);\n inset: 0;\n clip-path: polygon(\n var(--pk-hover-bridge-top-left-x, 0) var(--pk-hover-bridge-top-left-y, 0),\n var(--pk-hover-bridge-top-right-x, 0) var(--pk-hover-bridge-top-right-y, 0),\n var(--pk-hover-bridge-bottom-right-x, 0) var(--pk-hover-bridge-bottom-right-y, 0),\n var(--pk-hover-bridge-bottom-left-x, 0) var(--pk-hover-bridge-bottom-left-y, 0)\n );\n pointer-events: auto;\n }\n\n .hover-bridge:not(.hover-bridge-visible) {\n display: none;\n }\n }\n`;\n","import {\n arrow,\n autoUpdate,\n computePosition,\n flip,\n getOverflowAncestors,\n offset,\n platform,\n shift,\n size,\n type Placement,\n} from '@floating-ui/dom';\nimport { offsetParent } from 'composed-offset-position';\nimport { html, nothing } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query } from '../../decorators.js';\nimport type { PropertyValues } from 'lit';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { resolveElementById } from '../../internal/resolve-element-by-id.js';\nimport { PkRepositionEvent } from '../../events/pk-reposition.js';\nimport { computePopupTransformOrigin } from '../../utils/popup-placement-animation.js';\nimport { SUPPORTS_POPOVER } from '../../utils/supports-popover.js';\nimport { pkPopupStyles } from './pk-popup.styles.js';\n\nexport type PkPopupPlacement = Placement;\n\nexport type PkPopupVirtualElement = {\n getBoundingClientRect: () => DOMRect;\n contextElement?: Element;\n};\n\nfunction isVirtualElement(value: unknown): value is PkPopupVirtualElement {\n return (\n value !== null\n && typeof value === 'object'\n && 'getBoundingClientRect' in value\n );\n}\n\nfunction resolvePositionStrategy(\n positionMethod: 'fixed' | 'absolute' | undefined,\n): 'fixed' | 'absolute' {\n if (positionMethod) {\n return positionMethod;\n }\n\n // Top-layer popovers use absolute coords; legacy fallback uses fixed viewport coords.\n return SUPPORTS_POPOVER ? 'absolute' : 'fixed';\n}\n\nfunction resolveScrollBoundary(\n anchorElement: Element | PkPopupVirtualElement,\n boundary: 'viewport' | 'scroll',\n): Element[] | undefined {\n if (!SUPPORTS_POPOVER || isVirtualElement(anchorElement) || boundary !== 'scroll') {\n return undefined;\n }\n\n // Popover content leaves the anchor's overflow chain — pass ancestor bounds explicitly.\n return getOverflowAncestors(anchorElement).filter((node): node is Element => node instanceof Element);\n}\n\n/**\n * Anchors floating content to a reference element — popup pattern with pk naming.\n * When the Popover API is available, content stays in the component tree and is promoted to\n * the top layer via `popover=\"manual\"` + `showPopover()` (no DOM reparenting).\n *\n * @event pk-reposition - Emitted when the popup is repositioned.\n *\n * @slot - Popup content.\n * @slot anchor - Anchor element when it lives inside the popup host.\n *\n * @csspart popup - Floating container.\n * @csspart arrow - Arrow element.\n * @csspart hover-bridge - Invisible bridge between anchor and popup.\n */\n@customElement('pk-popup')\nexport class PkPopup extends PkElement {\n static override styles = pkPopupStyles;\n\n /** Element id, DOM reference, or virtual element to anchor against. */\n @property()\n anchor: Element | string | PkPopupVirtualElement = '';\n\n /** When true, positioning runs and the popup is shown. */\n @property({ type: Boolean, reflect: true })\n active = false;\n\n /**\n * Floating UI positioning strategy.\n * Defaults to `absolute` when the Popover API is supported, otherwise `fixed`.\n */\n @property({ attribute: 'position-method' })\n positionMethod?: 'fixed' | 'absolute';\n\n /** Bounding box for flip/shift collision — `scroll` uses overflow ancestors when popover is active. */\n @property({ reflect: true })\n boundary: 'viewport' | 'scroll' = 'viewport';\n\n @property({ reflect: true })\n placement: PkPopupPlacement = 'bottom-start';\n\n @property({ type: Number })\n distance = 4;\n\n @property({ type: Number })\n skidding = 0;\n\n @property({ type: Boolean })\n flip = true;\n\n @property({ attribute: 'flip-fallback-placements' })\n flipFallbackPlacements = '';\n\n @property({ attribute: 'flip-fallback-strategy' })\n flipFallbackStrategy: 'best-fit' | 'initial' = 'best-fit';\n\n @property({ attribute: 'flip-padding', type: Number })\n flipPadding = 8;\n\n @property({ type: Boolean })\n shift = true;\n\n @property({ attribute: 'shift-padding', type: Number })\n shiftPadding = 8;\n\n @property({ type: Boolean })\n arrow = false;\n\n @property({ attribute: 'arrow-placement' })\n arrowPlacement: 'start' | 'end' | 'center' | 'anchor' = 'anchor';\n\n @property({ attribute: 'arrow-padding', type: Number })\n arrowPadding = 10;\n\n @property()\n sync?: 'width' | 'height' | 'both';\n\n /** When false, the popup is positioned once and not tracked on scroll/resize. */\n @property({ attribute: 'anchor-tracking', type: Boolean })\n anchorTracking = true;\n\n @property({ attribute: 'hover-bridge', type: Boolean })\n hoverBridge = false;\n\n @query('.popup')\n private popupElement?: HTMLElement;\n\n @query('.arrow')\n private arrowElement?: HTMLElement;\n\n private anchorElement: Element | PkPopupVirtualElement | null = null;\n private cleanup?: () => void;\n /** True while waiting for layout-stable coords before first paint. */\n private settlingInitialPosition = false;\n private settleGeneration = 0;\n\n override disconnectedCallback(): void {\n void this.stop();\n super.disconnectedCallback();\n }\n\n override updated(changed: PropertyValues): void {\n super.updated(changed);\n\n if (changed.has('active')) {\n if (this.active) {\n this.resolveAnchor();\n this.start();\n } else {\n this.stop();\n }\n }\n\n if (changed.has('anchor')) {\n void this.handleAnchorChange();\n }\n\n if (this.active && !changed.has('active')) {\n this.reposition();\n }\n }\n\n /** Forces the popup to recalculate and reposition itself. */\n reposition(): void {\n if (this.settlingInitialPosition) {\n return;\n }\n\n void this.repositionAsync();\n }\n\n /**\n * Runs Floating UI once and applies coords. Does not reveal an unpositioned\n * popup — `settleInitialPosition()` owns the first paint.\n */\n private async repositionAsync(emitEvent = true): Promise<boolean> {\n const floatingElement = this.popupElement;\n const arrowTarget = this.arrow ? this.arrowElement : null;\n\n if (!this.active || !this.anchorElement || !floatingElement) {\n return false;\n }\n\n const scrollBoundary = resolveScrollBoundary(this.anchorElement, this.boundary);\n\n const middleware = [\n offset({ mainAxis: this.distance, crossAxis: this.skidding }),\n ];\n\n if (this.sync) {\n middleware.push(\n size({\n apply: ({ rects }) => {\n const syncWidth = this.sync === 'width' || this.sync === 'both';\n const syncHeight = this.sync === 'height' || this.sync === 'both';\n floatingElement.style.width = syncWidth ? `${rects.reference.width}px` : '';\n floatingElement.style.height = syncHeight ? `${rects.reference.height}px` : '';\n },\n }),\n );\n } else {\n floatingElement.style.width = '';\n floatingElement.style.height = '';\n }\n\n if (this.flip) {\n middleware.push(\n flip({\n boundary: scrollBoundary,\n fallbackPlacements: this.flipFallbackPlacements\n ? this.flipFallbackPlacements.split(' ').map((value) => value.trim()).filter(Boolean) as Placement[]\n : undefined,\n fallbackStrategy: this.flipFallbackStrategy === 'best-fit' ? 'bestFit' : 'initialPlacement',\n padding: this.flipPadding,\n }),\n );\n }\n\n if (this.shift) {\n middleware.push(\n shift({\n boundary: scrollBoundary,\n padding: this.shiftPadding,\n }),\n );\n }\n\n if (this.arrow && arrowTarget) {\n middleware.push(\n arrow({\n element: arrowTarget,\n padding: this.arrowPadding,\n }),\n );\n }\n\n const strategy = resolvePositionStrategy(this.positionMethod);\n const useFixedFallback = strategy === 'fixed';\n\n floatingElement.classList.toggle('popup-fixed', useFixedFallback);\n\n const getOffsetParentFn = SUPPORTS_POPOVER\n ? (element: Element) => platform.getOffsetParent(element, offsetParent)\n : platform.getOffsetParent;\n\n const { x, y, middlewareData, placement } = await computePosition(this.anchorElement, floatingElement, {\n placement: this.placement,\n middleware,\n strategy,\n platform: {\n ...platform,\n getOffsetParent: getOffsetParentFn,\n },\n });\n\n if (!this.active || !floatingElement.isConnected) {\n return false;\n }\n\n const staticSide = { top: 'bottom', right: 'left', bottom: 'top', left: 'right' }[\n placement.split('-')[0] as 'top' | 'right' | 'bottom' | 'left'\n ]!;\n\n this.setAttribute('data-current-placement', placement);\n\n Object.assign(floatingElement.style, {\n left: `${x}px`,\n top: `${y}px`,\n ...(useFixedFallback ? { position: 'fixed' } : { position: '' }),\n });\n\n if (this.anchorElement) {\n // Use viewport rects for both sides — computePosition x/y can be offset-parent\n // relative, and mixing that with getBoundingClientRect shifts transform-origin\n // sideways (menu appears to slide in from the right).\n const referenceRect = this.anchorElement.getBoundingClientRect();\n const floatingRect = floatingElement.getBoundingClientRect();\n\n floatingElement.style.setProperty('--pk-anchor-width', `${referenceRect.width}px`);\n floatingElement.style.setProperty('--pk-anchor-height', `${referenceRect.height}px`);\n\n const transformOrigin = computePopupTransformOrigin(\n placement,\n referenceRect,\n floatingRect,\n this.distance,\n middlewareData.shift,\n );\n\n floatingElement.style.setProperty('--pk-transform-origin', transformOrigin);\n }\n\n if (this.arrow && arrowTarget) {\n const arrowX = middlewareData.arrow?.x;\n const arrowY = middlewareData.arrow?.y;\n let top = '';\n let right = '';\n let bottom = '';\n let left = '';\n\n if (this.arrowPlacement === 'start') {\n const value = typeof arrowX === 'number' ? `${this.arrowPadding}px` : '';\n top = typeof arrowY === 'number' ? `${this.arrowPadding}px` : '';\n left = value;\n } else if (this.arrowPlacement === 'end') {\n right = typeof arrowX === 'number' ? `${this.arrowPadding}px` : '';\n bottom = typeof arrowY === 'number' ? `${this.arrowPadding}px` : '';\n } else if (this.arrowPlacement === 'center') {\n left = typeof arrowX === 'number' ? '50%' : '';\n top = typeof arrowY === 'number' ? '50%' : '';\n } else {\n left = typeof arrowX === 'number' ? `${arrowX}px` : '';\n top = typeof arrowY === 'number' ? `${arrowY}px` : '';\n }\n\n Object.assign(arrowTarget.style, {\n top,\n right,\n bottom,\n left,\n transform: '',\n [staticSide]: 'calc(-1 * var(--pk-popup-arrow-size, 6px) / 2)',\n });\n }\n\n requestAnimationFrame(() => this.updateHoverBridge());\n\n if (emitEvent) {\n this.dispatchEvent(new PkRepositionEvent());\n }\n\n return true;\n }\n\n private frames(count: number): Promise<void> {\n return new Promise((resolve) => {\n const step = (remaining: number): void => {\n if (remaining <= 0) {\n resolve();\n return;\n }\n\n requestAnimationFrame(() => step(remaining - 1));\n };\n\n step(count);\n });\n }\n\n /**\n * Hide → layout → measure → confirm flip → reveal.\n * A single computePosition often runs before slotted content has height, so flip\n * picks the preferred side; autoUpdate then jumps — that was the visible flash.\n */\n private async settleInitialPosition(): Promise<void> {\n const generation = ++this.settleGeneration;\n const floatingElement = this.popupElement;\n\n if (!floatingElement) {\n this.settlingInitialPosition = false;\n return;\n }\n\n // Two frames: display:none→block + slotted panel unhide need a layout pass.\n await this.frames(2);\n\n if (!this.active || generation !== this.settleGeneration) {\n return;\n }\n\n // Quiet passes — consumers waiting on pk-reposition should see the settled place.\n await this.repositionAsync(false);\n\n // Confirm after the first coords are applied (size middleware / content height).\n void floatingElement.offsetHeight;\n await this.frames(1);\n\n if (!this.active || generation !== this.settleGeneration) {\n return;\n }\n\n await this.repositionAsync(false);\n\n if (!this.active || generation !== this.settleGeneration) {\n return;\n }\n\n floatingElement.classList.add('positioned');\n this.settlingInitialPosition = false;\n requestAnimationFrame(() => this.updateHoverBridge());\n this.dispatchEvent(new PkRepositionEvent());\n }\n\n private resolveAnchor(): void {\n if (typeof this.anchor === 'string' && this.anchor) {\n this.anchorElement = resolveElementById(this, this.anchor);\n return;\n }\n\n if (this.anchor instanceof Element || isVirtualElement(this.anchor)) {\n this.anchorElement = this.anchor;\n return;\n }\n\n let slotted = this.querySelector('[slot=\"anchor\"]');\n\n if (slotted instanceof HTMLSlotElement) {\n slotted = slotted.assignedElements({ flatten: true })[0] ?? null;\n }\n\n this.anchorElement = slotted;\n }\n\n private async handleAnchorChange(): Promise<void> {\n await this.stop();\n this.resolveAnchor();\n\n if (this.anchorElement && this.active) {\n this.start();\n }\n }\n\n /** When false, skip popover top layer (e.g. menu/select use fixed coords to simplify modal handoff). */\n private usesPopoverTopLayer(): boolean {\n return SUPPORTS_POPOVER && this.positionMethod !== 'fixed';\n }\n\n /** `stop()` — sync hidePopover + cleanup autoUpdate. */\n stop(): Promise<void> {\n return new Promise((resolve) => {\n const popup = this.popupElement;\n this.settleGeneration += 1;\n this.settlingInitialPosition = false;\n popup?.classList.remove('positioned');\n\n if (this.usesPopoverTopLayer()) {\n popup?.hidePopover?.();\n }\n\n if (this.cleanup) {\n this.cleanup();\n this.cleanup = undefined;\n popup?.style.removeProperty('--pk-transform-origin');\n requestAnimationFrame(() => resolve());\n } else {\n resolve();\n }\n\n // Always clear — even when autoUpdate never started — so the next open\n // cannot short-circuit waitForPopupReposition on a stale placement.\n this.removeAttribute('data-current-placement');\n });\n }\n\n /** @deprecated Prefer `stop()` — kept for select/combobox handoff call sites. */\n releasePositioning(): void {\n if (this.cleanup) {\n this.cleanup();\n this.cleanup = undefined;\n }\n }\n\n /** @deprecated Prefer `stop()`. */\n async awaitHidden(): Promise<void> {\n await this.stop();\n }\n\n private start(): void {\n if (!this.anchorElement || !this.active || !this.isConnected || !this.popupElement) {\n return;\n }\n\n // Stay invisible until settleInitialPosition confirms flip with real content size.\n this.popupElement.classList.remove('positioned');\n this.settlingInitialPosition = true;\n\n if (this.usesPopoverTopLayer()) {\n this.popupElement.showPopover?.();\n }\n\n if (this.anchorTracking) {\n this.cleanup = autoUpdate(this.anchorElement, this.popupElement, () => {\n // Ignore the sync autoUpdate kick during settle — it races layout.\n if (this.settlingInitialPosition) {\n return;\n }\n\n this.reposition();\n });\n }\n\n void this.settleInitialPosition();\n }\n\n /** Slotted popup content root (e.g. `.panel`) — keeps content in-tree. */\n getContentElement(): HTMLElement | null {\n const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n const assigned = slot?.assignedElements({ flatten: true }) ?? [];\n const slotted = assigned.find((node): node is HTMLElement => node instanceof HTMLElement);\n\n if (slotted) {\n return slotted;\n }\n\n for (const node of this.childNodes) {\n if (node instanceof HTMLElement && node.getAttribute('slot') !== 'anchor') {\n return node;\n }\n }\n\n return null;\n }\n\n private updateHoverBridge(): void {\n const floatingElement = this.popupElement;\n\n if (!this.hoverBridge || !this.anchorElement || !floatingElement) {\n return;\n }\n\n const anchorRect = this.anchorElement.getBoundingClientRect();\n const popupRect = floatingElement.getBoundingClientRect();\n const isVertical = this.placement.includes('top') || this.placement.includes('bottom');\n\n let topLeftX = 0;\n let topLeftY = 0;\n let topRightX = 0;\n let topRightY = 0;\n let bottomLeftX = 0;\n let bottomLeftY = 0;\n let bottomRightX = 0;\n let bottomRightY = 0;\n\n if (isVertical) {\n if (anchorRect.top < popupRect.top) {\n topLeftX = anchorRect.left;\n topLeftY = anchorRect.bottom;\n topRightX = anchorRect.right;\n topRightY = anchorRect.bottom;\n bottomLeftX = popupRect.left;\n bottomLeftY = popupRect.top;\n bottomRightX = popupRect.right;\n bottomRightY = popupRect.top;\n } else {\n topLeftX = popupRect.left;\n topLeftY = popupRect.bottom;\n topRightX = popupRect.right;\n topRightY = popupRect.bottom;\n bottomLeftX = anchorRect.left;\n bottomLeftY = anchorRect.top;\n bottomRightX = anchorRect.right;\n bottomRightY = anchorRect.top;\n }\n } else if (anchorRect.left < popupRect.left) {\n topLeftX = anchorRect.right;\n topLeftY = anchorRect.top;\n topRightX = popupRect.left;\n topRightY = popupRect.top;\n bottomLeftX = anchorRect.right;\n bottomLeftY = anchorRect.bottom;\n bottomRightX = popupRect.left;\n bottomRightY = popupRect.bottom;\n } else {\n topLeftX = popupRect.right;\n topLeftY = popupRect.top;\n topRightX = anchorRect.left;\n topRightY = anchorRect.top;\n bottomLeftX = popupRect.right;\n bottomLeftY = popupRect.bottom;\n bottomRightX = anchorRect.left;\n bottomRightY = anchorRect.bottom;\n }\n\n this.style.setProperty('--pk-hover-bridge-top-left-x', `${topLeftX}px`);\n this.style.setProperty('--pk-hover-bridge-top-left-y', `${topLeftY}px`);\n this.style.setProperty('--pk-hover-bridge-top-right-x', `${topRightX}px`);\n this.style.setProperty('--pk-hover-bridge-top-right-y', `${topRightY}px`);\n this.style.setProperty('--pk-hover-bridge-bottom-left-x', `${bottomLeftX}px`);\n this.style.setProperty('--pk-hover-bridge-bottom-left-y', `${bottomLeftY}px`);\n this.style.setProperty('--pk-hover-bridge-bottom-right-x', `${bottomRightX}px`);\n this.style.setProperty('--pk-hover-bridge-bottom-right-y', `${bottomRightY}px`);\n }\n\n override render() {\n const useFixedFallback = !SUPPORTS_POPOVER || this.positionMethod === 'fixed';\n const usePopoverTopLayer = this.usesPopoverTopLayer();\n\n return html`\n <slot name=\"anchor\" @slotchange=${() => { void this.handleAnchorChange(); }}></slot>\n ${this.hoverBridge ? html`\n <div\n part=\"hover-bridge\"\n class=${classMap({\n 'hover-bridge': true,\n 'hover-bridge-visible': this.active,\n })}\n aria-hidden=\"true\"\n ></div>\n ` : nothing}\n <div\n popover=${usePopoverTopLayer ? 'manual' : nothing}\n part=\"popup\"\n class=${classMap({\n popup: true,\n active: this.active,\n 'popup-fixed': useFixedFallback,\n })}\n >\n ${this.arrow ? html`<div part=\"arrow\" class=\"arrow\"></div>` : nothing}\n <slot></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-popup': PkPopup;\n }\n}\n"],"mappings":"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"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import { n as PkElement, t as __decorate } from "./decorate-
|
|
1
|
+
import { a as query, i as property, n as PkElement, o as state, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
|
|
2
2
|
import { css, html, nothing } from "lit";
|
|
3
3
|
import { classMap } from "lit/directives/class-map.js";
|
|
4
|
-
import { customElement, property, query, state } from "lit/decorators.js";
|
|
5
4
|
//#region src/components/radio-group/pk-radio.styles.ts
|
|
6
5
|
var pkRadioStyles = css`
|
|
7
6
|
@layer pk-component {
|
|
@@ -230,4 +229,4 @@ PkRadio = __decorate([customElement("pk-radio")], PkRadio);
|
|
|
230
229
|
//#endregion
|
|
231
230
|
export { PkRadio as t };
|
|
232
231
|
|
|
233
|
-
//# sourceMappingURL=pk-radio-
|
|
232
|
+
//# sourceMappingURL=pk-radio-B5XkMHy3.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pk-radio-B5XkMHy3.js","names":[],"sources":["../../src/components/radio-group/pk-radio.styles.ts","../../src/components/radio-group/pk-radio.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkRadioStyles = css`\n @layer pk-component {\n :host {\n display: inline-flex;\n vertical-align: middle;\n font-family: var(--pk-font-family);\n font-size: var(--pk-font-size-base);\n line-height: var(--pk-line-height);\n }\n\n :host([disabled]) {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n .item {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n position: relative;\n margin: 0;\n }\n\n :host([disabled]) .item {\n cursor: not-allowed;\n }\n\n .item--with-label {\n gap: 0.5rem;\n }\n\n .control {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 1rem;\n height: 1rem;\n border: 1px solid var(--pk-color-slate-400);\n border-radius: 9999px;\n background: var(--pk-color-white);\n transition: border-color 0.12s ease, box-shadow 0.12s ease;\n }\n\n .item:focus-visible .control,\n :host([data-focus-visible]) .control {\n border-color: var(--pk-color-sky-600);\n box-shadow: 0 0 0 1px var(--pk-color-sky-600), 0 0 4px 0 hsl(from var(--pk-color-sky-600) h s l / 0.7);\n }\n\n :host([invalid]) .control {\n border-color: var(--pk-color-rose-600);\n }\n\n :host([invalid]:focus-visible) .control,\n :host([invalid][data-focus-visible]) .control {\n box-shadow: 0 0 0 1px var(--pk-color-rose-600), 0 0 4px 0 hsl(from var(--pk-color-rose-600) h s l / 0.7);\n }\n\n :host([checked]) .control {\n background: var(--pk-color-gray-50);\n color: #1f2933;\n }\n\n .indicator {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n color: currentcolor;\n }\n\n .indicator-dot {\n width: 0.5rem;\n height: 0.5rem;\n border-radius: 9999px;\n background: currentcolor;\n transition: opacity 0.12s ease, transform 0.12s ease;\n }\n\n :host(:not([checked])) .indicator-dot {\n opacity: 0;\n transform: scale(0);\n }\n\n .input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n opacity: 0;\n appearance: none;\n }\n\n .label {\n line-height: var(--pk-line-height);\n /* Match checkbox / form-control labels (gray-700). */\n color: var(--pk-color-gray-700);\n }\n\n .label.is-empty {\n display: none;\n }\n }\n`;\n","import { html, nothing } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query, state } from '../../decorators.js';\nimport type { PropertyValues } from 'lit';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { pkRadioStyles } from './pk-radio.styles.js';\n\n/**\n * Radio button — use inside `pk-radio-group`.\n *\n * @slot - Visible label text\n *\n * @csspart base - Root label element\n * @csspart input - Native radio input\n * @csspart control - Visual radio circle\n * @csspart indicator - Indicator container\n */\n@customElement('pk-radio')\nexport class PkRadio extends PkElement {\n static override styles = pkRadioStyles;\n\n @property()\n value = '';\n\n @property({ type: Boolean, reflect: true })\n checked = false;\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n @property({ type: Boolean, reflect: true })\n invalid = false;\n\n @property({ type: Boolean, reflect: true })\n required = false;\n\n @property({ type: Number })\n tabIndex = -1;\n\n @property({ attribute: 'aria-label' })\n ariaLabel: string | null = null;\n\n /** Set by `pk-radio-group` when the group is disabled. */\n @property({ type: Boolean, attribute: false })\n forceDisabled = false;\n\n @query('.input')\n private input!: HTMLInputElement;\n\n @state()\n private hasDefaultSlotContent = false;\n\n override updated(changed: PropertyValues): void {\n if (this.input && changed.has('checked')) {\n this.input.checked = this.checked;\n }\n\n if (this.input && changed.has('tabIndex')) {\n this.input.tabIndex = this.tabIndex;\n }\n }\n\n focusControl(options?: FocusOptions): void {\n this.input.focus(options);\n }\n\n private defaultSlotChanged(event: Event): void {\n const slot = event.target as HTMLSlotElement;\n this.hasDefaultSlotContent = slot.assignedNodes({ flatten: true }).some((node) => {\n if (node.nodeType === Node.TEXT_NODE) {\n return node.textContent?.trim();\n }\n\n return node.nodeType === Node.ELEMENT_NODE;\n });\n }\n\n private handleChange(event: Event): void {\n event.stopPropagation();\n const input = event.target as HTMLInputElement;\n\n if (this.disabled || this.forceDisabled || !input.checked) {\n return;\n }\n\n this.dispatchEvent(new CustomEvent('pk-radio-select', {\n detail: { value: this.value },\n bubbles: true,\n composed: true,\n }));\n }\n\n override render() {\n const isDisabled = this.disabled || this.forceDisabled;\n\n return html`\n <label\n part=\"base\"\n class=${classMap({\n item: true,\n 'pk-radio-group__item': true,\n 'item--with-label': this.hasDefaultSlotContent,\n })}\n data-state=${this.checked ? 'checked' : nothing}\n ?data-disabled=${isDisabled}\n aria-disabled=${isDisabled ? 'true' : nothing}\n >\n <span part=\"control\" class=\"control pk-radio-group__control\">\n <span part=\"indicator\" class=\"indicator pk-radio-group__indicator\">\n <span class=\"indicator-dot pk-radio-group__indicator-dot\"></span>\n </span>\n </span>\n <input\n part=\"input\"\n class=\"input\"\n type=\"radio\"\n .checked=${this.checked}\n ?disabled=${isDisabled}\n ?required=${this.required}\n value=${this.value}\n tabindex=${this.tabIndex}\n aria-label=${this.ariaLabel ?? nothing}\n aria-invalid=${this.invalid ? 'true' : nothing}\n aria-checked=${this.checked ? 'true' : 'false'}\n @change=${this.handleChange}\n />\n <span\n class=${classMap({\n label: true,\n 'is-empty': !this.hasDefaultSlotContent,\n })}\n >\n <slot @slotchange=${this.defaultSlotChanged}></slot>\n </span>\n </label>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-radio': PkRadio;\n }\n}\n"],"mappings":";;;;AAEA,IAAa,gBAAgB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACiBzB,IAAA,UAAA,MAAM,gBAAgB,UAAU;;;eAI3B;iBAGE;kBAGC;iBAGD;kBAGC;kBAGA;mBAGgB;uBAIX;+BAMgB;;;gBA/BP;;CAiCzB,QAAiB,SAA+B;AAC5C,MAAI,KAAK,SAAS,QAAQ,IAAI,UAAU,CACpC,MAAK,MAAM,UAAU,KAAK;AAG9B,MAAI,KAAK,SAAS,QAAQ,IAAI,WAAW,CACrC,MAAK,MAAM,WAAW,KAAK;;CAInC,aAAa,SAA8B;AACvC,OAAK,MAAM,MAAM,QAAQ;;CAG7B,mBAA2B,OAAoB;EAC3C,MAAM,OAAO,MAAM;AACnB,OAAK,wBAAwB,KAAK,cAAc,EAAE,SAAS,MAAM,CAAC,CAAC,MAAM,SAAS;AAC9E,OAAI,KAAK,aAAa,KAAK,UACvB,QAAO,KAAK,aAAa,MAAM;AAGnC,UAAO,KAAK,aAAa,KAAK;IAChC;;CAGN,aAAqB,OAAoB;AACrC,QAAM,iBAAiB;EACvB,MAAM,QAAQ,MAAM;AAEpB,MAAI,KAAK,YAAY,KAAK,iBAAiB,CAAC,MAAM,QAC9C;AAGJ,OAAK,cAAc,IAAI,YAAY,mBAAmB;GAClD,QAAQ,EAAE,OAAO,KAAK,OAAO;GAC7B,SAAS;GACT,UAAU;GACb,CAAC,CAAC;;CAGP,SAAkB;EACd,MAAM,aAAa,KAAK,YAAY,KAAK;AAEzC,SAAO,IAAI;;;wBAGK,SAAS;GACb,MAAM;GACN,wBAAwB;GACxB,oBAAoB,KAAK;GAC5B,CAAC,CAAC;6BACU,KAAK,UAAU,YAAY,QAAQ;iCAC/B,WAAW;gCACZ,aAAa,SAAS,QAAQ;;;;;;;;;;;+BAW/B,KAAK,QAAQ;gCACZ,WAAW;gCACX,KAAK,SAAS;4BAClB,KAAK,MAAM;+BACR,KAAK,SAAS;iCACZ,KAAK,aAAa,QAAQ;mCACxB,KAAK,UAAU,SAAS,QAAQ;mCAChC,KAAK,UAAU,SAAS,QAAQ;8BACrC,KAAK,aAAa;;;4BAGpB,SAAS;GACb,OAAO;GACP,YAAY,CAAC,KAAK;GACrB,CAAC,CAAC;;wCAEiB,KAAK,mBAAmB;;;;;;YA/G3D,UAAU,CAAA,EAAA,QAAA,WAAA,SAAA,KAAA,EAAA;YAGV,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,QAAA,WAAA,WAAA,KAAA,EAAA;YAG1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,QAAA,WAAA,YAAA,KAAA,EAAA;YAG1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,QAAA,WAAA,WAAA,KAAA,EAAA;YAG1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,QAAA,WAAA,YAAA,KAAA,EAAA;YAG1C,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,QAAA,WAAA,YAAA,KAAA,EAAA;YAG1B,SAAS,EAAE,WAAW,cAAc,CAAC,CAAA,EAAA,QAAA,WAAA,aAAA,KAAA,EAAA;YAIrC,SAAS;CAAE,MAAM;CAAS,WAAW;CAAO,CAAC,CAAA,EAAA,QAAA,WAAA,iBAAA,KAAA,EAAA;YAG7C,MAAM,SAAS,CAAA,EAAA,QAAA,WAAA,SAAA,KAAA,EAAA;YAGf,OAAO,CAAA,EAAA,QAAA,WAAA,yBAAA,KAAA,EAAA;sBAhCX,cAAc,WAAW,CAAA,EAAA,QAAA"}
|
|
@@ -1,12 +1,11 @@
|
|
|
1
|
-
import { t as __decorate } from "./decorate-
|
|
2
|
-
import { t as PkFormAssociatedElement } from "./pk-form-associated-element-
|
|
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";
|
|
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";
|
|
6
|
-
import { n as readLegacyInstructions, t as hasInstructionContent } from "./field-labels-
|
|
6
|
+
import { n as readLegacyInstructions, t as hasInstructionContent } from "./field-labels-CmuAW8Cl.js";
|
|
7
7
|
import { css, html, nothing } from "lit";
|
|
8
8
|
import { classMap } from "lit/directives/class-map.js";
|
|
9
|
-
import { customElement, property, query, state } from "lit/decorators.js";
|
|
10
9
|
//#region src/components/radio-group/pk-radio-group.styles.ts
|
|
11
10
|
var pkRadioGroupStyles = css`
|
|
12
11
|
@layer pk-component {
|
|
@@ -250,4 +249,4 @@ PkRadioGroup = __decorate([customElement("pk-radio-group")], PkRadioGroup);
|
|
|
250
249
|
//#endregion
|
|
251
250
|
export { PkRadioGroup as t };
|
|
252
251
|
|
|
253
|
-
//# sourceMappingURL=pk-radio-group-
|
|
252
|
+
//# sourceMappingURL=pk-radio-group-ByrxGLdX.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pk-radio-group-ByrxGLdX.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 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,6 @@
|
|
|
1
|
-
import { n as PkElement, t as __decorate } from "./decorate-
|
|
1
|
+
import { a as query, i as property, n as PkElement, o as state, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
|
|
2
2
|
import { css, html, nothing } from "lit";
|
|
3
3
|
import { classMap } from "lit/directives/class-map.js";
|
|
4
|
-
import { customElement, property, query, state } from "lit/decorators.js";
|
|
5
4
|
//#region src/components/scroll-area/pk-scroll-area.styles.ts
|
|
6
5
|
var pkScrollAreaStyles = css`
|
|
7
6
|
@layer pk-component {
|
|
@@ -399,4 +398,4 @@ PkScrollArea = __decorate([customElement("pk-scroll-area")], PkScrollArea);
|
|
|
399
398
|
//#endregion
|
|
400
399
|
export { PkScrollArea as t };
|
|
401
400
|
|
|
402
|
-
//# sourceMappingURL=pk-scroll-area-
|
|
401
|
+
//# sourceMappingURL=pk-scroll-area-CdfNxYz8.js.map
|