@verbb/plugin-kit-web 2.0.22 → 2.0.24
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 +20 -0
- package/custom-elements.json +8414 -7031
- package/dist/chunks/{active-elements-BwpXu8Lb.js → active-elements-739kISON.js} +1 -1
- package/dist/chunks/{active-elements-BwpXu8Lb.js.map → active-elements-739kISON.js.map} +1 -1
- package/dist/chunks/{animate-with-class-CsDwYnXL.js → animate-with-class-CjTZI0NU.js} +1 -1
- package/dist/chunks/{animate-with-class-CsDwYnXL.js.map → animate-with-class-CjTZI0NU.js.map} +1 -1
- package/dist/chunks/{autoloader-dJO3tYOX.js → autoloader-DcwybeWc.js} +3 -3
- package/dist/chunks/{autoloader-dJO3tYOX.js.map → autoloader-DcwybeWc.js.map} +1 -1
- package/dist/chunks/{button-group-item.styles-DYmBR28a.js → button-group-item.styles-D7tuu-sr.js} +1 -1
- package/dist/chunks/{button-group-item.styles-DYmBR28a.js.map → button-group-item.styles-D7tuu-sr.js.map} +1 -1
- package/dist/chunks/{component-registry-D34fm8xW.js → component-registry-B5pnAZsb.js} +6 -1
- package/dist/chunks/component-registry-B5pnAZsb.js.map +1 -0
- package/dist/chunks/{control-aria-B2QMq4ji.js → control-aria-CtNg2izr.js} +1 -1
- package/dist/chunks/{control-aria-B2QMq4ji.js.map → control-aria-CtNg2izr.js.map} +1 -1
- package/dist/chunks/{decorate-R0X811qp.js → decorate-Br_PE9pq.js} +3 -4
- package/dist/chunks/{decorate-R0X811qp.js.map → decorate-Br_PE9pq.js.map} +1 -1
- package/dist/chunks/decorators-BkErmuYK.js +2 -0
- package/dist/chunks/{dismissible-stack-XQUMfKO3.js → dismissible-stack-CwhtwAyo.js} +1 -1
- package/dist/chunks/{dismissible-stack-XQUMfKO3.js.map → dismissible-stack-CwhtwAyo.js.map} +1 -1
- package/dist/chunks/{field-labels-CmuAW8Cl.js → field-labels-pY-gQDwQ.js} +1 -1
- package/dist/chunks/{field-labels-CmuAW8Cl.js.map → field-labels-pY-gQDwQ.js.map} +1 -1
- package/dist/chunks/{focus-aa5dlv8k.js → focus-DcVUPVqn.js} +2 -2
- package/dist/chunks/{focus-aa5dlv8k.js.map → focus-DcVUPVqn.js.map} +1 -1
- package/dist/chunks/{form-control.styles-BQdimE5o.js → form-control.styles-CQ93gnVf.js} +1 -1
- package/dist/chunks/{form-control.styles-BQdimE5o.js.map → form-control.styles-CQ93gnVf.js.map} +1 -1
- package/dist/chunks/{has-slot-8BvCt_qo.js → has-slot-DJv86HKx.js} +1 -1
- package/dist/chunks/{has-slot-8BvCt_qo.js.map → has-slot-DJv86HKx.js.map} +1 -1
- package/dist/chunks/{icon.styles-BLTWLqYp.js → icon.styles-KWvfi7RV.js} +1 -1
- package/dist/chunks/{icon.styles-BLTWLqYp.js.map → icon.styles-KWvfi7RV.js.map} +1 -1
- package/dist/chunks/{icons-BR8JcQj2.js → icons-k1pvx6yX.js} +2 -2
- package/dist/chunks/{icons-BR8JcQj2.js.map → icons-k1pvx6yX.js.map} +1 -1
- package/dist/chunks/{mirror-validator-DCjNYrrx.js → mirror-validator-BkZlEv1Z.js} +1 -1
- package/dist/chunks/{mirror-validator-DCjNYrrx.js.map → mirror-validator-BkZlEv1Z.js.map} +1 -1
- package/dist/chunks/{option-filter-BQqr8Z21.js → option-filter-BkKyBg8L.js} +2 -2
- package/dist/chunks/{option-filter-BQqr8Z21.js.map → option-filter-BkKyBg8L.js.map} +1 -1
- package/dist/chunks/{overlay-lifecycle-D0pkTQyI.js → overlay-lifecycle-C582MGBJ.js} +1 -1
- package/dist/chunks/{overlay-lifecycle-D0pkTQyI.js.map → overlay-lifecycle-C582MGBJ.js.map} +1 -1
- package/dist/chunks/pk-alert-BQAb4lJc.js +666 -0
- package/dist/chunks/pk-alert-BQAb4lJc.js.map +1 -0
- package/dist/chunks/{pk-autocomplete-qy2Psvqm.js → pk-autocomplete-DUXhs1hi.js} +21 -20
- package/dist/chunks/pk-autocomplete-DUXhs1hi.js.map +1 -0
- package/dist/chunks/{pk-button-group-BSz5T5iS.js → pk-button-group-BY12Lbk7.js} +10 -7
- package/dist/chunks/pk-button-group-BY12Lbk7.js.map +1 -0
- package/dist/chunks/{pk-button-group-separator-DH3Rl24b.js → pk-button-group-separator-B1a8dP9A.js} +3 -2
- package/dist/chunks/pk-button-group-separator-B1a8dP9A.js.map +1 -0
- package/dist/chunks/{pk-button-group-text-Qro_KmZb.js → pk-button-group-text-CWNlZkyV.js} +3 -3
- package/dist/chunks/pk-button-group-text-CWNlZkyV.js.map +1 -0
- package/dist/chunks/{pk-button-BrH4u4Qr.js → pk-button-ntSVrer_.js} +8 -7
- package/dist/chunks/pk-button-ntSVrer_.js.map +1 -0
- package/dist/chunks/{pk-calendar-Z7Y0PjeY.js → pk-calendar-Df0c5u79.js} +12 -11
- package/dist/chunks/pk-calendar-Df0c5u79.js.map +1 -0
- package/dist/chunks/{pk-checkbox-13ArHSmt.js → pk-checkbox-L5uRex3b.js} +6 -5
- package/dist/chunks/pk-checkbox-L5uRex3b.js.map +1 -0
- package/dist/chunks/{pk-checkbox-select-Ckvfbu83.js → pk-checkbox-select-6OS0wFYO.js} +4 -3
- package/dist/chunks/pk-checkbox-select-6OS0wFYO.js.map +1 -0
- package/dist/chunks/{pk-clear--mPWZP7H.js → pk-clear-DHxP_2cm.js} +1 -1
- package/dist/chunks/{pk-clear--mPWZP7H.js.map → pk-clear-DHxP_2cm.js.map} +1 -1
- package/dist/chunks/{pk-code-editor-BlG6O5qB.js → pk-code-editor-vZriNR67.js} +6 -5
- package/dist/chunks/pk-code-editor-vZriNR67.js.map +1 -0
- package/dist/chunks/{pk-color-input-BRgQ5-vB.js → pk-color-input-Csbm4ROT.js} +6 -5
- package/dist/chunks/pk-color-input-Csbm4ROT.js.map +1 -0
- package/dist/chunks/{pk-combobox-ag89QEX2.js → pk-combobox-BrSBrldb.js} +25 -23
- package/dist/chunks/pk-combobox-BrSBrldb.js.map +1 -0
- package/dist/chunks/{pk-connect.styles-BhW406jt.js → pk-connect.styles-oKhxa_m2.js} +1 -1
- package/dist/chunks/{pk-connect.styles-BhW406jt.js.map → pk-connect.styles-oKhxa_m2.js.map} +1 -1
- package/dist/chunks/{pk-copy-button-BVaOLtYG.js → pk-copy-button-5i9v_zmu.js} +31 -9
- package/dist/chunks/pk-copy-button-5i9v_zmu.js.map +1 -0
- package/dist/chunks/{pk-date-picker-C2YvDPNm.js → pk-date-picker-C-w6Mn6j.js} +21 -20
- package/dist/chunks/pk-date-picker-C-w6Mn6j.js.map +1 -0
- package/dist/chunks/{pk-dialog-VMQqLW1f.js → pk-dialog-C7KZGpQs.js} +10 -9
- package/dist/chunks/pk-dialog-C7KZGpQs.js.map +1 -0
- package/dist/chunks/{pk-dropdown-item-D9OaG5o-.js → pk-dropdown-item-Ck2N_suK.js} +11 -8
- package/dist/chunks/pk-dropdown-item-Ck2N_suK.js.map +1 -0
- package/dist/chunks/{pk-dropdown-label-CRNWMWQd.js → pk-dropdown-label-BdZLeizJ.js} +2 -2
- package/dist/chunks/pk-dropdown-label-BdZLeizJ.js.map +1 -0
- package/dist/chunks/{pk-dropdown-menu-DW1wI8xQ.js → pk-dropdown-menu-DBsO1uYR.js} +22 -18
- package/dist/chunks/pk-dropdown-menu-DBsO1uYR.js.map +1 -0
- package/dist/chunks/{pk-editable-table-DDnu1I8Y.js → pk-editable-table-Cd8K6vT4.js} +26 -23
- package/dist/chunks/pk-editable-table-Cd8K6vT4.js.map +1 -0
- package/dist/chunks/{pk-field-UAlMq6mQ.js → pk-field--PCE9nOd.js} +9 -8
- package/dist/chunks/pk-field--PCE9nOd.js.map +1 -0
- package/dist/chunks/{pk-form-associated-element-GxX5lbnk.js → pk-form-associated-element-Doh2K3pG.js} +3 -3
- package/dist/chunks/pk-form-associated-element-Doh2K3pG.js.map +1 -0
- package/dist/chunks/{pk-image-browser-Bj8LhWfk.js → pk-image-browser-iUqdcLKs.js} +21 -21
- package/dist/chunks/pk-image-browser-iUqdcLKs.js.map +1 -0
- package/dist/chunks/{pk-input-BywmK5n2.js → pk-input-BUbXj9We.js} +14 -13
- package/dist/chunks/pk-input-BUbXj9We.js.map +1 -0
- package/dist/chunks/{pk-input-group-BLqKPnfc.js → pk-input-group-CN79c5HT.js} +5 -4
- package/dist/chunks/pk-input-group-CN79c5HT.js.map +1 -0
- package/dist/chunks/{pk-input-group-addon-ClBkGmAw.js → pk-input-group-addon-DpxfuYp1.js} +3 -2
- package/dist/chunks/pk-input-group-addon-DpxfuYp1.js.map +1 -0
- package/dist/chunks/{pk-input-group-button-CHQHsWd4.js → pk-input-group-button-D5Hm4saA.js} +3 -2
- package/dist/chunks/pk-input-group-button-D5Hm4saA.js.map +1 -0
- package/dist/chunks/{pk-input-group-input-oNnqMBGU.js → pk-input-group-input-Cm1MoHgN.js} +3 -2
- package/dist/chunks/pk-input-group-input-Cm1MoHgN.js.map +1 -0
- package/dist/chunks/{pk-input-group-text-HUxlXROB.js → pk-input-group-text-CtyJZ_Kg.js} +2 -2
- package/dist/chunks/pk-input-group-text-CtyJZ_Kg.js.map +1 -0
- package/dist/chunks/{pk-input-group-textarea-Cl2FNuw-.js → pk-input-group-textarea-BxmKGjdt.js} +3 -2
- package/dist/chunks/pk-input-group-textarea-BxmKGjdt.js.map +1 -0
- package/dist/chunks/{pk-lightswitch-VHfJizBW.js → pk-lightswitch-CSvgiHVQ.js} +9 -8
- package/dist/chunks/pk-lightswitch-CSvgiHVQ.js.map +1 -0
- package/dist/chunks/{pk-option-DQZHV9jL.js → pk-option-B_PF4v_Z.js} +9 -7
- package/dist/chunks/pk-option-B_PF4v_Z.js.map +1 -0
- package/dist/chunks/{pk-option-group-CCzJkBFp.js → pk-option-group-D6bHfn0j.js} +4 -3
- package/dist/chunks/pk-option-group-D6bHfn0j.js.map +1 -0
- package/dist/chunks/{pk-popover-D3jkHfwB.js → pk-popover-BOoGfR7I.js} +11 -10
- package/dist/chunks/pk-popover-BOoGfR7I.js.map +1 -0
- package/dist/chunks/{pk-popup-B65tZMQH.js → pk-popup-DVE93VSV.js} +32 -28
- package/dist/chunks/pk-popup-DVE93VSV.js.map +1 -0
- package/dist/chunks/{pk-radio-B5XkMHy3.js → pk-radio-D0eqmnlH.js} +3 -2
- package/dist/chunks/pk-radio-D0eqmnlH.js.map +1 -0
- package/dist/chunks/{pk-radio-group-Dzd-3HaQ.js → pk-radio-group-BehEZG_k.js} +8 -7
- package/dist/chunks/pk-radio-group-BehEZG_k.js.map +1 -0
- package/dist/chunks/{pk-scroll-area-CdfNxYz8.js → pk-scroll-area-BeaLZ6k-.js} +3 -2
- package/dist/chunks/pk-scroll-area-BeaLZ6k-.js.map +1 -0
- package/dist/chunks/{pk-select-b5S5WKc-.js → pk-select-DZNpEk5Z.js} +20 -19
- package/dist/chunks/pk-select-DZNpEk5Z.js.map +1 -0
- package/dist/chunks/{pk-separator-N-VyjYE6.js → pk-separator-ZkRowI5Y.js} +3 -2
- package/dist/chunks/pk-separator-ZkRowI5Y.js.map +1 -0
- package/dist/chunks/{pk-spinner-DweuYJ_Z.js → pk-spinner-Bxkn4iVO.js} +3 -2
- package/dist/chunks/pk-spinner-Bxkn4iVO.js.map +1 -0
- package/dist/chunks/pk-state-panel-BTo2xiug.js +604 -0
- package/dist/chunks/pk-state-panel-BTo2xiug.js.map +1 -0
- package/dist/chunks/{pk-status-BehQARDv.js → pk-status-CdiRBRyh.js} +3 -2
- package/dist/chunks/pk-status-CdiRBRyh.js.map +1 -0
- package/dist/chunks/{pk-tab-CTloD18e.js → pk-tab-CSbI3XxX.js} +2 -2
- package/dist/chunks/pk-tab-CSbI3XxX.js.map +1 -0
- package/dist/chunks/{pk-tab-heading-Cjcgebxn.js → pk-tab-heading-BMyLTBNc.js} +2 -2
- package/dist/chunks/pk-tab-heading-BMyLTBNc.js.map +1 -0
- package/dist/chunks/{pk-tab-panel-CkKU5-Ah.js → pk-tab-panel-sgdRjV8o.js} +2 -2
- package/dist/chunks/pk-tab-panel-sgdRjV8o.js.map +1 -0
- package/dist/chunks/{pk-tabs-BgEBki1q.js → pk-tabs-bBNCu_4h.js} +10 -7
- package/dist/chunks/pk-tabs-bBNCu_4h.js.map +1 -0
- package/dist/chunks/{pk-textarea-Dhj1WFLH.js → pk-textarea-B401dUWa.js} +11 -10
- package/dist/chunks/pk-textarea-B401dUWa.js.map +1 -0
- package/dist/chunks/{pk-time-picker-ChRbKHNB.js → pk-time-picker-DnNZVwRk.js} +6 -6
- package/dist/chunks/pk-time-picker-DnNZVwRk.js.map +1 -0
- package/dist/chunks/{pk-tiptap-content-CL8smjGi.js → pk-tiptap-content-C2qzGQKj.js} +4 -3
- package/dist/chunks/pk-tiptap-content-C2qzGQKj.js.map +1 -0
- package/dist/chunks/{pk-tiptap-editor-BMwedkPt.js → pk-tiptap-editor-y_QyNSR-.js} +20 -21
- package/dist/chunks/pk-tiptap-editor-y_QyNSR-.js.map +1 -0
- package/dist/chunks/{pk-tiptap-input-YKg4VLp_.js → pk-tiptap-input-0Xy6rrot.js} +7 -6
- package/dist/chunks/pk-tiptap-input-0Xy6rrot.js.map +1 -0
- package/dist/chunks/{pk-toggle-BthhH7vl.js → pk-toggle-Co8GsHuK.js} +4 -3
- package/dist/chunks/pk-toggle-Co8GsHuK.js.map +1 -0
- package/dist/chunks/{pk-toggle-group-D2Quux8D.js → pk-toggle-group-Ct1ljI-7.js} +7 -4
- package/dist/chunks/pk-toggle-group-Ct1ljI-7.js.map +1 -0
- package/dist/chunks/{pk-tooltip--QBV6puX.js → pk-tooltip-Cvv2f7T5.js} +7 -6
- package/dist/chunks/pk-tooltip-Cvv2f7T5.js.map +1 -0
- package/dist/chunks/{popup-content-animation.styles-BnNiguJo.js → popup-content-animation.styles-CJ8zGJz-.js} +1 -1
- package/dist/chunks/{popup-content-animation.styles-BnNiguJo.js.map → popup-content-animation.styles-CJ8zGJz-.js.map} +1 -1
- package/dist/chunks/{popup-placement-animation-WlEXnS85.js → popup-placement-animation-ClUYI79z.js} +1 -1
- package/dist/chunks/{popup-placement-animation-WlEXnS85.js.map → popup-placement-animation-ClUYI79z.js.map} +1 -1
- package/dist/chunks/{popup-pointer-CuLjk1th.js → popup-pointer-Bh_d205v.js} +1 -1
- package/dist/chunks/{popup-pointer-CuLjk1th.js.map → popup-pointer-Bh_d205v.js.map} +1 -1
- package/dist/chunks/{register-components-BT9THgdh.js → register-components-CZtpgZe3.js} +1 -1
- package/dist/chunks/{register-components-BT9THgdh.js.map → register-components-CZtpgZe3.js.map} +1 -1
- package/dist/chunks/{render-Dvc3MHQR.js → render-DQZp_Rak.js} +1 -1
- package/dist/chunks/{render-Dvc3MHQR.js.map → render-DQZp_Rak.js.map} +1 -1
- package/dist/chunks/{required-validator-CEg8dvjS.js → required-validator-I58oJGZ3.js} +1 -1
- package/dist/chunks/{required-validator-CEg8dvjS.js.map → required-validator-I58oJGZ3.js.map} +1 -1
- package/dist/chunks/{scroll-lock-Bbh3Sc5g.js → scroll-lock-DE1pElMQ.js} +2 -2
- package/dist/chunks/{scroll-lock-Bbh3Sc5g.js.map → scroll-lock-DE1pElMQ.js.map} +1 -1
- package/dist/chunks/{spinner-utils-CDfHypTv.js → spinner-utils-DXwIxQ6z.js} +1 -1
- package/dist/chunks/{spinner-utils-CDfHypTv.js.map → spinner-utils-DXwIxQ6z.js.map} +1 -1
- package/dist/chunks/{supports-popover-CUBsbHpS.js → supports-popover-BCqyOPtO.js} +1 -1
- package/dist/chunks/{supports-popover-CUBsbHpS.js.map → supports-popover-BCqyOPtO.js.map} +1 -1
- package/dist/chunks/{sync-listbox-separators-B1-V0oJi.js → sync-listbox-separators-saLEtPpJ.js} +2 -2
- package/dist/chunks/{sync-listbox-separators-B1-V0oJi.js.map → sync-listbox-separators-saLEtPpJ.js.map} +1 -1
- package/dist/chunks/{tiptap.styles-CPRows--.js → tiptap.styles-Q4ED1nBw.js} +2 -2
- package/dist/chunks/{tiptap.styles-CPRows--.js.map → tiptap.styles-Q4ED1nBw.js.map} +1 -1
- package/dist/component-registry.d.ts.map +1 -1
- package/dist/components/alert/index.d.ts +2 -0
- package/dist/components/alert/index.d.ts.map +1 -0
- package/dist/components/alert/pk-alert.d.ts +95 -0
- package/dist/components/alert/pk-alert.d.ts.map +1 -0
- package/dist/components/alert/pk-alert.js +2 -0
- package/dist/components/alert/pk-alert.styles.d.ts +2 -0
- package/dist/components/alert/pk-alert.styles.d.ts.map +1 -0
- package/dist/components/alert.d.ts +2 -0
- package/dist/components/alert.js +2 -0
- package/dist/components/autocomplete/pk-autocomplete.js +1 -1
- package/dist/components/autocomplete.js +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.js +1 -1
- package/dist/components/combobox.js +1 -1
- package/dist/components/connect/pk-connect-oauth.js +5 -4
- package/dist/components/connect/pk-connect-oauth.js.map +1 -1
- package/dist/components/connect/pk-connect.d.ts +0 -1
- package/dist/components/connect/pk-connect.d.ts.map +1 -1
- package/dist/components/connect/pk-connect.js +27 -49
- package/dist/components/connect/pk-connect.js.map +1 -1
- package/dist/components/copy-button/pk-copy-button.d.ts +17 -2
- 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 -1
- 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/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.js +2 -1
- package/dist/components/icon/pk-icon.js.map +1 -1
- package/dist/components/image-browser/pk-image-browser.js +1 -1
- package/dist/components/image-browser.js +1 -1
- package/dist/components/input/pk-input.js +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.js +1 -1
- package/dist/components/select/pk-option.js +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 +2 -2
- package/dist/components/state-panel/index.d.ts +2 -0
- package/dist/components/state-panel/index.d.ts.map +1 -0
- package/dist/components/state-panel/pk-state-panel.d.ts +89 -0
- package/dist/components/state-panel/pk-state-panel.d.ts.map +1 -0
- package/dist/components/state-panel/pk-state-panel.js +2 -0
- package/dist/components/state-panel/pk-state-panel.styles.d.ts +2 -0
- package/dist/components/state-panel/pk-state-panel.styles.d.ts.map +1 -0
- package/dist/components/state-panel.d.ts +2 -0
- package/dist/components/state-panel.js +2 -0
- 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-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.d.ts.map +1 -1
- package/dist/connect/register-cp-connect.js +8 -9
- package/dist/connect/register-cp-connect.js.map +1 -1
- package/dist/events/pk-dismiss.d.ts +10 -0
- package/dist/events/pk-dismiss.d.ts.map +1 -0
- package/dist/icons/index.js +2 -2
- package/dist/index.d.ts +3 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +74 -67
- package/dist/index.js.map +1 -1
- package/dist/plugin-kit.css +2 -0
- package/dist/plugin-kit.js +4 -4
- package/dist/plugin-kit.js.map +1 -1
- 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.d.ts +5 -1
- package/dist/register.d.ts.map +1 -1
- package/dist/register.js +124 -55
- package/dist/register.js.map +1 -0
- package/dist/styles/connect/pk-connect.css +6 -107
- package/dist/utilities/fouce.css +2 -0
- package/dist-loader/chunks/{button-group-item.styles-CsBQ3Cyh.js → button-group-item.styles-BQbvE3sC.js} +1 -1
- package/dist-loader/chunks/{codemirror-CSgOT0QM.js → codemirror-C_TTKlG1.js} +584 -436
- package/dist-loader/chunks/editor-CS16rBkM.js +110 -0
- package/dist-loader/chunks/{floating-ui-Cj0imr6d.js → floating-ui-BJQPB-Ip.js} +9 -11
- package/dist-loader/chunks/{lit-DpLik9Rf.js → lit-B6nFKgbW.js} +127 -89
- package/dist-loader/chunks/{option-filter-Bc5aNNT0.js → option-filter-BkKyBg8L.js} +1 -1
- package/dist-loader/chunks/{pk-a11y-CjB4-U-R.js → pk-a11y-mGj0G5AE.js} +1 -1
- package/dist-loader/chunks/{pk-base-B2MqxErC.js → pk-base-BGegy7-X.js} +2 -2
- package/dist-loader/chunks/{pk-button-Dfm23jEC.js → pk-button-DV9Tk5Pd.js} +5 -5
- package/dist-loader/chunks/{pk-calendar-BuSULJCU.js → pk-calendar-C0xpIVIw.js} +9 -9
- package/dist-loader/chunks/{pk-checkbox-BDoq3xg0.js → pk-checkbox-DhP0iMoP.js} +9 -6
- package/dist-loader/chunks/{pk-color-input-eLjO9zfn.js → pk-color-input-B02cYzyr.js} +4 -4
- package/dist-loader/chunks/{pk-combobox-DBvcyxRC.js → pk-combobox-S_tpNUHK.js} +19 -18
- package/dist-loader/chunks/{pk-connect.styles-k61snd3X.js → pk-connect.styles-B5qe5yQB.js} +1 -1
- package/dist-loader/chunks/pk-copy-button-D6tPuhJ3.js +198 -0
- package/dist-loader/chunks/{pk-date-picker-CYLpYIji.js → pk-date-picker-C0y4sfSf.js} +15 -15
- package/dist-loader/chunks/{pk-dialog-BtrH5Ke0.js → pk-dialog-BJs5fVHS.js} +7 -7
- package/dist-loader/chunks/{pk-dropdown-item-D8tfEU-k.js → pk-dropdown-item-Bs5NZDRh.js} +11 -9
- package/dist-loader/chunks/{pk-dropdown-label-TbLj4bHK.js → pk-dropdown-label-Cpl9-bzB.js} +2 -2
- package/dist-loader/chunks/{pk-dropdown-menu-C4GDW5pE.js → pk-dropdown-menu-CLrfuD3i.js} +20 -17
- package/dist-loader/chunks/{pk-field-BM0XD9Ij.js → pk-field-Pg61fxBR.js} +140 -74
- package/dist-loader/chunks/{pk-icon-_1F1aL74.js → pk-icon-B7ywfPb6.js} +4 -4
- package/dist-loader/chunks/{pk-input-DvBrD7Md.js → pk-input-Cj5s8eBT.js} +10 -10
- package/dist-loader/chunks/{pk-lightswitch-CcwlLQ9f.js → pk-lightswitch-rUGB1p8q.js} +6 -6
- package/dist-loader/chunks/{pk-option-DATPm0Bo.js → pk-option-B-MeLvZf.js} +8 -7
- package/dist-loader/chunks/{pk-popup-CUuGs8r_.js → pk-popup-CeyruJFh.js} +35 -29
- package/dist-loader/chunks/{pk-select-DpcvbzUL.js → pk-select-JUx3mxRS.js} +14 -14
- package/dist-loader/chunks/{pk-spinner-Dk_LbvHW.js → pk-spinner-B8iuHDQ9.js} +2 -2
- package/dist-loader/chunks/pk-state-panel-BhdZGllL.js +600 -0
- package/dist-loader/chunks/{pk-status-B8UvjIp2.js → pk-status-D3qVwWlR.js} +2 -2
- package/dist-loader/chunks/{pk-textarea-DeSuxufJ.js → pk-textarea-KnpJMQX2.js} +7 -7
- package/dist-loader/chunks/{pk-time-picker-DpJt8biN.js → pk-time-picker-DCqZ5z7M.js} +6 -6
- package/dist-loader/chunks/{pk-tooltip-DcF9J5GT.js → pk-tooltip-DStkplzy.js} +6 -6
- package/dist-loader/chunks/{popup-content-animation.styles-duCg9-CH.js → popup-content-animation.styles-BtUVJg82.js} +1 -1
- package/dist-loader/chunks/{render-Bnzcxfss.js → render-D9G_a_c2.js} +1 -1
- package/dist-loader/chunks/{svg-Bz-bXZn7.js → svg-BRgqS9vA.js} +8 -1
- package/dist-loader/chunks/{sync-listbox-separators-Ch5krDUs.js → sync-listbox-separators-saLEtPpJ.js} +1 -1
- package/dist-loader/chunks/{tiptap-CgXkiK8d.js → tiptap-uppXgD5k.js} +16099 -9213
- package/dist-loader/chunks/tiptap.styles-CyqI_Wrl.js +896 -0
- package/dist-loader/components/alert/alert.js +662 -0
- package/dist-loader/components/autocomplete/autocomplete.js +15 -15
- package/dist-loader/components/button/button.js +1 -1
- package/dist-loader/components/button-group/button-group-separator.js +2 -2
- package/dist-loader/components/button-group/button-group-text.js +3 -3
- package/dist-loader/components/button-group/button-group.js +9 -7
- 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 +3 -3
- package/dist-loader/components/code-editor/code-editor.js +4 -4
- 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 +5 -5
- package/dist-loader/components/connect/connect.js +28 -51
- package/dist-loader/components/copy-button/copy-button.js +1 -176
- 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 +2 -2
- package/dist-loader/components/editable-table/editable-table.js +25 -23
- package/dist-loader/components/field/field.js +1 -1
- package/dist-loader/components/icon/icon.js +3 -3
- package/dist-loader/components/image-browser/image-browser.js +15 -16
- package/dist-loader/components/input/input.js +1 -1
- package/dist-loader/components/input-group/input-group-addon.js +2 -2
- package/dist-loader/components/input-group/input-group-button.js +2 -2
- package/dist-loader/components/input-group/input-group-input.js +2 -2
- package/dist-loader/components/input-group/input-group-text.js +2 -2
- package/dist-loader/components/input-group/input-group-textarea.js +2 -2
- package/dist-loader/components/input-group/input-group.js +3 -3
- package/dist-loader/components/lightswitch/lightswitch.js +1 -1
- package/dist-loader/components/popover/popover.js +9 -9
- package/dist-loader/components/popup/popup.js +1 -1
- package/dist-loader/components/radio-group/radio-group.js +5 -5
- package/dist-loader/components/radio-group/radio.js +2 -2
- package/dist-loader/components/scroll-area/scroll-area.js +2 -2
- package/dist-loader/components/select/option-group.js +3 -3
- 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 +2 -2
- package/dist-loader/components/spinner/spinner.js +1 -1
- package/dist-loader/components/state-panel/state-panel.js +2 -0
- package/dist-loader/components/status/status.js +1 -1
- package/dist-loader/components/tabs/tab-heading.js +2 -2
- package/dist-loader/components/tabs/tab-panel.js +2 -2
- package/dist-loader/components/tabs/tab.js +2 -2
- package/dist-loader/components/tabs/tabs.js +9 -7
- 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 +5 -4
- package/dist-loader/components/tiptap/tiptap-editor.js +595 -21
- package/dist-loader/components/tiptap/tiptap-input.js +273 -5
- package/dist-loader/components/toggle/toggle.js +3 -3
- package/dist-loader/components/toggle-group/toggle-group.js +6 -4
- package/dist-loader/components/tooltip/tooltip.js +1 -1
- package/dist-loader/plugin-kit.css +2 -0
- package/dist-loader/plugin-kit.loader.js +6 -1
- package/dist-loader/styles/connect/pk-connect.css +6 -107
- package/dist-loader/utilities/fouce.css +2 -0
- package/package.json +49 -9
- package/dist/chunks/component-registry-D34fm8xW.js.map +0 -1
- package/dist/chunks/pk-autocomplete-qy2Psvqm.js.map +0 -1
- package/dist/chunks/pk-button-BrH4u4Qr.js.map +0 -1
- package/dist/chunks/pk-button-group-BSz5T5iS.js.map +0 -1
- package/dist/chunks/pk-button-group-separator-DH3Rl24b.js.map +0 -1
- package/dist/chunks/pk-button-group-text-Qro_KmZb.js.map +0 -1
- package/dist/chunks/pk-calendar-Z7Y0PjeY.js.map +0 -1
- package/dist/chunks/pk-checkbox-13ArHSmt.js.map +0 -1
- package/dist/chunks/pk-checkbox-select-Ckvfbu83.js.map +0 -1
- package/dist/chunks/pk-code-editor-BlG6O5qB.js.map +0 -1
- package/dist/chunks/pk-color-input-BRgQ5-vB.js.map +0 -1
- package/dist/chunks/pk-combobox-ag89QEX2.js.map +0 -1
- package/dist/chunks/pk-copy-button-BVaOLtYG.js.map +0 -1
- package/dist/chunks/pk-date-picker-C2YvDPNm.js.map +0 -1
- package/dist/chunks/pk-dialog-VMQqLW1f.js.map +0 -1
- package/dist/chunks/pk-dropdown-item-D9OaG5o-.js.map +0 -1
- package/dist/chunks/pk-dropdown-label-CRNWMWQd.js.map +0 -1
- package/dist/chunks/pk-dropdown-menu-DW1wI8xQ.js.map +0 -1
- package/dist/chunks/pk-editable-table-DDnu1I8Y.js.map +0 -1
- package/dist/chunks/pk-field-UAlMq6mQ.js.map +0 -1
- package/dist/chunks/pk-form-associated-element-GxX5lbnk.js.map +0 -1
- package/dist/chunks/pk-image-browser-Bj8LhWfk.js.map +0 -1
- package/dist/chunks/pk-input-BywmK5n2.js.map +0 -1
- package/dist/chunks/pk-input-group-BLqKPnfc.js.map +0 -1
- package/dist/chunks/pk-input-group-addon-ClBkGmAw.js.map +0 -1
- package/dist/chunks/pk-input-group-button-CHQHsWd4.js.map +0 -1
- package/dist/chunks/pk-input-group-input-oNnqMBGU.js.map +0 -1
- package/dist/chunks/pk-input-group-text-HUxlXROB.js.map +0 -1
- package/dist/chunks/pk-input-group-textarea-Cl2FNuw-.js.map +0 -1
- package/dist/chunks/pk-lightswitch-VHfJizBW.js.map +0 -1
- package/dist/chunks/pk-option-DQZHV9jL.js.map +0 -1
- package/dist/chunks/pk-option-group-CCzJkBFp.js.map +0 -1
- package/dist/chunks/pk-popover-D3jkHfwB.js.map +0 -1
- package/dist/chunks/pk-popup-B65tZMQH.js.map +0 -1
- package/dist/chunks/pk-radio-B5XkMHy3.js.map +0 -1
- package/dist/chunks/pk-radio-group-Dzd-3HaQ.js.map +0 -1
- package/dist/chunks/pk-scroll-area-CdfNxYz8.js.map +0 -1
- package/dist/chunks/pk-select-b5S5WKc-.js.map +0 -1
- package/dist/chunks/pk-separator-N-VyjYE6.js.map +0 -1
- package/dist/chunks/pk-spinner-DweuYJ_Z.js.map +0 -1
- package/dist/chunks/pk-status-BehQARDv.js.map +0 -1
- package/dist/chunks/pk-tab-CTloD18e.js.map +0 -1
- package/dist/chunks/pk-tab-heading-Cjcgebxn.js.map +0 -1
- package/dist/chunks/pk-tab-panel-CkKU5-Ah.js.map +0 -1
- package/dist/chunks/pk-tabs-BgEBki1q.js.map +0 -1
- package/dist/chunks/pk-textarea-Dhj1WFLH.js.map +0 -1
- package/dist/chunks/pk-time-picker-ChRbKHNB.js.map +0 -1
- package/dist/chunks/pk-tiptap-content-CL8smjGi.js.map +0 -1
- package/dist/chunks/pk-tiptap-editor-BMwedkPt.js.map +0 -1
- package/dist/chunks/pk-tiptap-input-YKg4VLp_.js.map +0 -1
- package/dist/chunks/pk-toggle-BthhH7vl.js.map +0 -1
- package/dist/chunks/pk-toggle-group-D2Quux8D.js.map +0 -1
- package/dist/chunks/pk-tooltip--QBV6puX.js.map +0 -1
- package/dist/chunks/register-BqkU5JNH.js +0 -148
- package/dist/chunks/register-BqkU5JNH.js.map +0 -1
- package/dist-loader/chunks/rolldown-runtime-CzwdidQP.js +0 -13
- package/dist-loader/chunks/supports-popover-COjbi2RP.js +0 -5
- package/dist-loader/chunks/tiptap.styles-C0E1NpSx.js +0 -1848
- /package/dist-loader/chunks/{animate-with-class-DT0jwaR_.js → animate-with-class-CjTZI0NU.js} +0 -0
- /package/dist-loader/chunks/{field-labels-D3lKQ2nq.js → field-labels-pY-gQDwQ.js} +0 -0
- /package/dist-loader/chunks/{has-slot-BGJeJdHr.js → has-slot-DJv86HKx.js} +0 -0
- /package/dist-loader/chunks/{mirror-validator-C5XrXPaq.js → mirror-validator-BkZlEv1Z.js} +0 -0
- /package/dist-loader/chunks/{overlay-lifecycle-C3tSQ3UR.js → overlay-lifecycle-C582MGBJ.js} +0 -0
- /package/dist-loader/chunks/{pk-clear-BMZUzwDt.js → pk-clear-DHxP_2cm.js} +0 -0
- /package/dist-loader/chunks/{popup-placement-animation-WlEXnS85.js → popup-placement-animation-ClUYI79z.js} +0 -0
- /package/dist-loader/chunks/{popup-pointer-Ck28WdVP.js → popup-pointer-Bh_d205v.js} +0 -0
- /package/dist-loader/chunks/{registry-BanyScVR.js → registry-CJc164pT.js} +0 -0
- /package/dist-loader/chunks/{required-validator-0XwZtX9k.js → required-validator-I58oJGZ3.js} +0 -0
|
@@ -1 +0,0 @@
|
|
|
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 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"pk-popover-D3jkHfwB.js","names":[],"sources":["../../src/components/popover/pk-popover.styles.ts","../../src/components/popover/pk-popover.ts"],"sourcesContent":["import { css } from 'lit';\n\nimport { buttonGroupCornerRoleStyles } from '../button-group/button-group-item.styles.js';\nimport { popupContentAnimationStyles } from '../../styles/popup-content-animation.styles.js';\n\nexport const pkPopoverStyles = [\n buttonGroupCornerRoleStyles(),\n popupContentAnimationStyles,\n css`\n @layer pk-component {\n :host {\n /* Flex column parents stretch cross-axis size — pin to content.\n (inline-block + align-self; same class of fix as dialog / dropdown.) */\n display: inline-block;\n max-width: 100%;\n align-self: flex-start;\n flex: none;\n vertical-align: middle;\n }\n\n :host([data-pk-group-orientation]) {\n display: inline-flex;\n vertical-align: middle;\n flex: 0 0 auto;\n align-self: auto;\n }\n\n :host([data-pk-group-orientation]) ::slotted([slot='trigger']) {\n --pk-bg-start-start-radius: inherit;\n --pk-bg-start-end-radius: inherit;\n --pk-bg-end-start-radius: inherit;\n --pk-bg-end-end-radius: inherit;\n }\n\n :host([data-pk-group-orientation='horizontal'][data-pk-group-join]) {\n margin-inline-start: var(--pk-bg-horizontal-indent, 0);\n }\n\n :host([data-pk-group-orientation='vertical'][data-pk-group-join]) {\n margin-block-start: var(--pk-bg-vertical-indent, 0);\n }\n\n :host([data-pk-group-orientation='horizontal'][data-pk-group-join]:has([slot='trigger'][variant='outline'], [slot='trigger'][variant='dashed'])) {\n margin-inline-start: var(--pk-bg-horizontal-indent-outlined, 0);\n }\n\n :host([data-pk-group-orientation='vertical'][data-pk-group-join]:has([slot='trigger'][variant='outline'], [slot='trigger'][variant='dashed'])) {\n margin-block-start: var(--pk-bg-vertical-indent-outlined, 0);\n }\n\n /* Match pk-popup's arrow fill to the panel surface when with-arrow is on. */\n :host([with-arrow]) {\n --pk-popup-arrow-color: var(--pk-color-white);\n --pk-popup-arrow-size: 8px;\n }\n\n .panel {\n box-sizing: border-box;\n width: 18rem;\n padding: 1rem;\n border-radius: var(--pk-radius-md);\n background: var(--pk-color-white);\n box-shadow: var(--pk-shadow-popover);\n /* Craft CP body text (~gray-700), not gray-900. */\n color: var(--pk-color-gray-700);\n }\n\n /* Flush panels for command/menu chrome that owns its own inset (variable picker, etc.).\n Match kit v1 PopoverContent min-w 260px / max-w 360px: without min-width,\n width max-content shrinks to short labels and looks narrower than the old picker. */\n :host([flush]) .panel {\n width: max-content;\n min-width: var(--pk-popover-flush-min-width, 16.25rem);\n max-width: min(var(--pk-popover-flush-max-width, 22.5rem), 100vw - 1rem);\n padding: 0;\n }\n\n .panel[hidden] {\n display: none !important;\n }\n }\n `,\n];\n","import { html, nothing } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query, state } from '../../decorators.js';\nimport type { PropertyValues } from 'lit';\n\nimport { isTopDismissible, registerDismissible, unregisterDismissible } from '../../a11y/dismissible-stack.js';\nimport { uniqueId } from '../../a11y/focus.js';\nimport { PkElement } from '../../base/pk-element.js';\nimport { resolveElementById } from '../../internal/resolve-element-by-id.js';\nimport {\n PkAfterHideEvent,\n PkAfterShowEvent,\n PkHideEvent,\n PkShowEvent,\n type PkOverlaySource,\n} from '../../events/overlay-lifecycle.js';\n// Keep the internal element registered when production builds erase type-only imports.\nimport '../popup/pk-popup.js';\nimport type { PkPopup, PkPopupPlacement } from '../popup/pk-popup.js';\nimport {\n syncPopupPlacementAnimation,\n waitForPopupReposition,\n} from '../../utils/popup-placement-animation.js';\nimport { isPointerInsideOverlay } from '../../utils/popup-pointer.js';\nimport { pkPopoverStyles } from './pk-popover.styles.js';\n\n/**\n * Popover — pattern: trigger toggles a floating panel.\n *\n * @slot trigger - Popover trigger\n * @slot - Popover content\n *\n * @csspart panel - Floating content panel\n *\n * @attr with-arrow - Show a pointing arrow toward the trigger (default: off)\n */\n@customElement('pk-popover')\nexport class PkPopover extends PkElement {\n static override styles = pkPopoverStyles;\n\n @property({ type: Boolean, reflect: true })\n open = false;\n\n @property({ reflect: true })\n placement: PkPopupPlacement = 'bottom';\n\n @property({ attribute: 'side-offset', type: Number })\n sideOffset = 4;\n\n /**\n * Drop default panel padding/fixed width so slotted content (command lists, etc.)\n * can control its own inset. Consumer outer `p-0` alone cannot reach `.panel`.\n */\n @property({ type: Boolean, reflect: true })\n flush = false;\n\n /**\n * Show a floating-ui arrow on the panel (off by default).\n * Named like other optional controls (`with-clear`, `with-caret`) — tooltip always\n * paints its own arrow and has no toggle.\n */\n @property({ attribute: 'with-arrow', type: Boolean, reflect: true })\n withArrow = false;\n\n /** Anchor element id — alternative to the trigger slot. */\n @property({ reflect: true })\n for = '';\n\n /**\n * Live element anchor — use when the target lives in another shadow tree\n * (e.g. TipTap chips). Preferred over `for` / trigger slot when set.\n * Stays in the consumer tree so modal `showModal()` inert does not apply\n * (unlike portaling the panel to a root outside the dialog).\n */\n @property({ attribute: false })\n anchor: Element | null = null;\n\n @query('pk-popup')\n private popupElement!: PkPopup;\n\n private get panelElement(): HTMLDivElement | null {\n return this.popupElement?.getContentElement() as HTMLDivElement | null ?? null;\n }\n\n @state()\n private triggerElement: HTMLElement | null = null;\n\n /** True while the shared popup-content exit animation is running. */\n @state()\n private closing = false;\n\n /** Gates `data-open` so enter motion starts after Floating UI places the panel. */\n @state()\n private panelAnimated = false;\n\n private readonly triggerId = uniqueId('pk-popover-trigger');\n private dismissRegistered = false;\n /** Guard re-entry while openPopover/closePopover mutate `open`. */\n private syncingOpenSideEffects = false;\n /** Coalesce overlapping close calls (updated + light-dismiss) onto one exit. */\n private exitAnimationPromise: Promise<void> | null = null;\n\n override disconnectedCallback(): void {\n // Skip exit motion on teardown — demote immediately.\n void this.closePopover('api', true);\n super.disconnectedCallback();\n }\n\n /**\n * When controlled/toggle `open` flips false, arm `closing` in the same update so the\n * panel is not `hidden` for a frame before the exit animation starts.\n */\n override willUpdate(changed: PropertyValues): void {\n if (\n changed.has('open')\n && this.open === false\n && changed.get('open') === true\n && !this.syncingOpenSideEffects\n && !this.closing\n ) {\n this.closing = true;\n this.panelAnimated = false;\n }\n }\n\n /**\n * Controlled `open` (e.g. React) must arm/disarm light-dismiss the same way as\n * trigger toggles. Without this, programmatic open shows the panel but click-away\n * never fires.\n */\n override async updated(changed: PropertyValues): Promise<void> {\n super.updated(changed);\n\n if (!changed.has('open') || this.syncingOpenSideEffects) {\n return;\n }\n\n const previousOpen = changed.get('open');\n\n if (previousOpen === this.open) {\n return;\n }\n\n // Initial connect with open=false — nothing to tear down.\n if (previousOpen === undefined && this.open === false) {\n return;\n }\n\n if (this.open) {\n await this.openPopover();\n } else {\n await this.closePopover('api');\n }\n }\n\n private onTriggerSlotChange(event: Event): void {\n const slot = event.target as HTMLSlotElement;\n const [trigger] = slot.assignedElements({ flatten: true }) as HTMLElement[];\n\n this.unbindTrigger(this.triggerElement);\n this.triggerElement = trigger ?? null;\n this.bindTrigger(this.triggerElement);\n }\n\n private bindTrigger(trigger: HTMLElement | null): void {\n if (!trigger) {\n return;\n }\n\n if (!trigger.id) {\n trigger.id = this.triggerId;\n }\n\n trigger.setAttribute('aria-haspopup', 'dialog');\n trigger.addEventListener('click', this.handleToggleClick);\n this.syncExpanded();\n }\n\n private unbindTrigger(trigger: HTMLElement | null): void {\n trigger?.removeEventListener('click', this.handleToggleClick);\n }\n\n private handleToggleClick = (event: Event): void => {\n event.preventDefault();\n event.stopPropagation();\n\n if (this.closing) {\n return;\n }\n\n // Flip `open` only — side effects run from `updated()` (same as dropdown-menu).\n this.open = !this.open;\n };\n\n private async openPopover(): Promise<void> {\n if (!this.getAnchor()) {\n return;\n }\n\n // Finish any in-flight exit before arming a new open.\n if (this.exitAnimationPromise) {\n await this.exitAnimationPromise;\n }\n\n // Already armed from a prior controlled/toggle open.\n if (this.dismissRegistered && this.open) {\n if (this.panelElement) {\n this.panelElement.hidden = false;\n }\n this.syncExpanded();\n return;\n }\n\n if (!this.dispatchEvent(new PkShowEvent())) {\n this.syncingOpenSideEffects = true;\n this.open = false;\n this.syncingOpenSideEffects = false;\n return;\n }\n\n this.syncingOpenSideEffects = true;\n this.open = true;\n this.syncingOpenSideEffects = false;\n this.closing = false;\n this.panelAnimated = false;\n\n if (this.panelElement) {\n this.panelElement.hidden = false;\n // Seed side before first paint so enter keyframes pick a direction.\n syncPopupPlacementAnimation(this.panelElement, this.placement);\n }\n\n this.syncExpanded();\n this.registerDismissHandlers();\n\n await this.updateComplete;\n const placement = await waitForPopupReposition(this.popupElement, this.placement);\n\n if (this.panelElement) {\n syncPopupPlacementAnimation(this.panelElement, placement);\n }\n\n // Flip data-open after placement so the shared enter animation can run.\n this.panelAnimated = true;\n\n this.dispatchEvent(new PkAfterShowEvent());\n this.dispatchEvent(new CustomEvent('pk-open-change', {\n detail: { open: true },\n bubbles: true,\n composed: true,\n }));\n }\n\n /**\n * @param immediate Skip exit animation (disconnect / forced teardown).\n */\n async closePopover(source: PkOverlaySource = 'unknown', immediate = false): Promise<void> {\n if (this.exitAnimationPromise) {\n return this.exitAnimationPromise;\n }\n\n if (!this.dismissRegistered && !this.closing && !this.open) {\n return;\n }\n\n const hideEvent = new PkHideEvent(source);\n\n if (!this.dispatchEvent(hideEvent)) {\n // Controlled close was cancelled — restore open and cancel exit arming.\n this.syncingOpenSideEffects = true;\n this.open = true;\n this.syncingOpenSideEffects = false;\n this.closing = false;\n this.panelAnimated = true;\n return;\n }\n\n this.unregisterDismissHandlers();\n this.closing = true;\n this.panelAnimated = false;\n\n if (this.open) {\n this.syncingOpenSideEffects = true;\n this.open = false;\n this.syncingOpenSideEffects = false;\n }\n\n const finishClose = async (): Promise<void> => {\n if (!immediate) {\n await this.updateComplete;\n await this.waitForExitAnimation();\n }\n\n this.closing = false;\n this.panelAnimated = false;\n\n if (this.panelElement) {\n this.panelElement.hidden = true;\n this.panelElement.removeAttribute('data-side');\n }\n\n this.syncExpanded();\n\n this.dispatchEvent(new PkAfterHideEvent());\n this.dispatchEvent(new CustomEvent('pk-open-change', {\n detail: { open: false },\n bubbles: true,\n composed: true,\n }));\n };\n\n this.exitAnimationPromise = finishClose().finally(() => {\n this.exitAnimationPromise = null;\n });\n\n return this.exitAnimationPromise;\n }\n\n private waitForExitAnimation(): Promise<void> {\n const panel = this.panelElement;\n\n if (!panel) {\n return Promise.resolve();\n }\n\n return new Promise((resolve) => {\n let settled = false;\n\n const finish = (): void => {\n if (settled) {\n return;\n }\n\n settled = true;\n panel.removeEventListener('animationend', onAnimationEnd);\n window.clearTimeout(fallback);\n panel.classList.remove('closing');\n resolve();\n };\n\n const onAnimationEnd = (event: AnimationEvent): void => {\n if (event.target === panel && event.animationName.startsWith('pk-popup-content-out')) {\n finish();\n }\n };\n\n panel.classList.add('closing');\n panel.addEventListener('animationend', onAnimationEnd);\n const fallback = window.setTimeout(finish, 150);\n });\n }\n\n private getAnchor(): Element | string | null {\n if (this.anchor) {\n return this.anchor;\n }\n\n if (this.for) {\n return resolveElementById(this, this.for);\n }\n\n if (this.triggerElement) {\n return this.triggerElement;\n }\n\n return null;\n }\n\n private registerDismissHandlers(): void {\n if (this.dismissRegistered) {\n return;\n }\n\n registerDismissible(this);\n this.dismissRegistered = true;\n document.addEventListener('pointerdown', this.onDocumentPointerDown, true);\n document.addEventListener('keydown', this.onDocumentKeyDown, true);\n }\n\n private unregisterDismissHandlers(): void {\n if (this.dismissRegistered) {\n unregisterDismissible(this);\n this.dismissRegistered = false;\n }\n\n document.removeEventListener('pointerdown', this.onDocumentPointerDown, true);\n document.removeEventListener('keydown', this.onDocumentKeyDown, true);\n }\n\n private onDocumentPointerDown = (event: PointerEvent): void => {\n if (this.isPointerInside(event) || this.closing) {\n return;\n }\n\n void this.closePopover('light-dismiss');\n };\n\n private isPointerInside(event: PointerEvent): boolean {\n return isPointerInsideOverlay(event, {\n host: this,\n anchor: this.getAnchorElement(),\n panel: this.panelElement,\n });\n };\n\n private onDocumentKeyDown = (event: KeyboardEvent): void => {\n if (event.key !== 'Escape' || !isTopDismissible(this) || this.closing) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n void this.closePopover('escape');\n };\n\n private getAnchorElement(): HTMLElement | null {\n if (this.anchor instanceof HTMLElement) {\n return this.anchor;\n }\n\n if (this.triggerElement) {\n return this.triggerElement;\n }\n\n if (this.for) {\n return resolveElementById(this, this.for);\n }\n\n return null;\n }\n\n private syncExpanded(): void {\n this.triggerElement?.setAttribute('aria-expanded', this.open ? 'true' : 'false');\n }\n\n override render() {\n const anchor = this.getAnchor();\n\n return html`\n <slot name=\"trigger\" @slotchange=${this.onTriggerSlotChange}></slot>\n <pk-popup\n .active=${this.open || this.closing}\n .anchor=${anchor ?? ''}\n .placement=${this.placement}\n .distance=${this.sideOffset}\n .arrow=${this.withArrow}\n flip\n shift\n >\n <div\n part=\"panel\"\n class=${classMap({\n panel: true,\n 'pk-popup-content': true,\n closing: this.closing,\n })}\n ?hidden=${!this.open && !this.closing}\n data-open=${this.panelAnimated && !this.closing ? '' : nothing}\n tabindex=${this.open ? '-1' : nothing}\n >\n <slot></slot>\n </div>\n </pk-popup>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-popover': PkPopover;\n }\n}\n"],"mappings":";;;;;;;;;;;;AAKA,IAAa,kBAAkB;CAC3B,6BAA6B;CAC7B;CACA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0EN;;;AC7CM,IAAA,YAAA,MAAM,kBAAkB,UAAU;;;cAI9B;mBAGuB;oBAGjB;eAOL;mBAQI;aAIN;gBASmB;wBAUoB;iBAI3B;uBAIM;mBAEK,SAAS,qBAAqB;2BAC/B;gCAEK;8BAEoB;4BAkFxB,UAAuB;AAChD,SAAM,gBAAgB;AACtB,SAAM,iBAAiB;AAEvB,OAAI,KAAK,QACL;AAIJ,QAAK,OAAO,CAAC,KAAK;;gCAsMW,UAA8B;AAC3D,OAAI,KAAK,gBAAgB,MAAM,IAAI,KAAK,QACpC;AAGC,QAAK,aAAa,gBAAgB;;4BAWd,UAA+B;AACxD,OAAI,MAAM,QAAQ,YAAY,CAAC,iBAAiB,KAAK,IAAI,KAAK,QAC1D;AAGJ,SAAM,gBAAgB;AACtB,SAAM,iBAAiB;AAClB,QAAK,aAAa,SAAS;;;;gBAtXX;;CA0CzB,IAAY,eAAsC;AAC9C,SAAO,KAAK,cAAc,mBAAmB,IAA6B;;CAqB9E,uBAAsC;AAE7B,OAAK,aAAa,OAAO,KAAK;AACnC,QAAM,sBAAsB;;;;;;CAOhC,WAAoB,SAA+B;AAC/C,MACI,QAAQ,IAAI,OAAO,IAChB,KAAK,SAAS,SACd,QAAQ,IAAI,OAAO,KAAK,QACxB,CAAC,KAAK,0BACN,CAAC,KAAK,SACX;AACE,QAAK,UAAU;AACf,QAAK,gBAAgB;;;;;;;;CAS7B,MAAe,QAAQ,SAAwC;AAC3D,QAAM,QAAQ,QAAQ;AAEtB,MAAI,CAAC,QAAQ,IAAI,OAAO,IAAI,KAAK,uBAC7B;EAGJ,MAAM,eAAe,QAAQ,IAAI,OAAO;AAExC,MAAI,iBAAiB,KAAK,KACtB;AAIJ,MAAI,iBAAiB,KAAA,KAAa,KAAK,SAAS,MAC5C;AAGJ,MAAI,KAAK,KACL,OAAM,KAAK,aAAa;MAExB,OAAM,KAAK,aAAa,MAAM;;CAItC,oBAA4B,OAAoB;EAE5C,MAAM,CAAC,WADM,MAAM,OACI,iBAAiB,EAAE,SAAS,MAAM,CAAC;AAE1D,OAAK,cAAc,KAAK,eAAe;AACvC,OAAK,iBAAiB,WAAW;AACjC,OAAK,YAAY,KAAK,eAAe;;CAGzC,YAAoB,SAAmC;AACnD,MAAI,CAAC,QACD;AAGJ,MAAI,CAAC,QAAQ,GACT,SAAQ,KAAK,KAAK;AAGtB,UAAQ,aAAa,iBAAiB,SAAS;AAC/C,UAAQ,iBAAiB,SAAS,KAAK,kBAAkB;AACzD,OAAK,cAAc;;CAGvB,cAAsB,SAAmC;AACrD,WAAS,oBAAoB,SAAS,KAAK,kBAAkB;;CAejE,MAAc,cAA6B;AACvC,MAAI,CAAC,KAAK,WAAW,CACjB;AAIJ,MAAI,KAAK,qBACL,OAAM,KAAK;AAIf,MAAI,KAAK,qBAAqB,KAAK,MAAM;AACrC,OAAI,KAAK,aACL,MAAK,aAAa,SAAS;AAE/B,QAAK,cAAc;AACnB;;AAGJ,MAAI,CAAC,KAAK,cAAc,IAAI,aAAa,CAAC,EAAE;AACxC,QAAK,yBAAyB;AAC9B,QAAK,OAAO;AACZ,QAAK,yBAAyB;AAC9B;;AAGJ,OAAK,yBAAyB;AAC9B,OAAK,OAAO;AACZ,OAAK,yBAAyB;AAC9B,OAAK,UAAU;AACf,OAAK,gBAAgB;AAErB,MAAI,KAAK,cAAc;AACnB,QAAK,aAAa,SAAS;AAE3B,+BAA4B,KAAK,cAAc,KAAK,UAAU;;AAGlE,OAAK,cAAc;AACnB,OAAK,yBAAyB;AAE9B,QAAM,KAAK;EACX,MAAM,YAAY,MAAM,uBAAuB,KAAK,cAAc,KAAK,UAAU;AAEjF,MAAI,KAAK,aACL,6BAA4B,KAAK,cAAc,UAAU;AAI7D,OAAK,gBAAgB;AAErB,OAAK,cAAc,IAAI,kBAAkB,CAAC;AAC1C,OAAK,cAAc,IAAI,YAAY,kBAAkB;GACjD,QAAQ,EAAE,MAAM,MAAM;GACtB,SAAS;GACT,UAAU;GACb,CAAC,CAAC;;;;;CAMP,MAAM,aAAa,SAA0B,WAAW,YAAY,OAAsB;AACtF,MAAI,KAAK,qBACL,QAAO,KAAK;AAGhB,MAAI,CAAC,KAAK,qBAAqB,CAAC,KAAK,WAAW,CAAC,KAAK,KAClD;EAGJ,MAAM,YAAY,IAAI,YAAY,OAAO;AAEzC,MAAI,CAAC,KAAK,cAAc,UAAU,EAAE;AAEhC,QAAK,yBAAyB;AAC9B,QAAK,OAAO;AACZ,QAAK,yBAAyB;AAC9B,QAAK,UAAU;AACf,QAAK,gBAAgB;AACrB;;AAGJ,OAAK,2BAA2B;AAChC,OAAK,UAAU;AACf,OAAK,gBAAgB;AAErB,MAAI,KAAK,MAAM;AACX,QAAK,yBAAyB;AAC9B,QAAK,OAAO;AACZ,QAAK,yBAAyB;;EAGlC,MAAM,cAAc,YAA2B;AAC3C,OAAI,CAAC,WAAW;AACZ,UAAM,KAAK;AACX,UAAM,KAAK,sBAAsB;;AAGrC,QAAK,UAAU;AACf,QAAK,gBAAgB;AAErB,OAAI,KAAK,cAAc;AACnB,SAAK,aAAa,SAAS;AAC3B,SAAK,aAAa,gBAAgB,YAAY;;AAGlD,QAAK,cAAc;AAEnB,QAAK,cAAc,IAAI,kBAAkB,CAAC;AAC1C,QAAK,cAAc,IAAI,YAAY,kBAAkB;IACjD,QAAQ,EAAE,MAAM,OAAO;IACvB,SAAS;IACT,UAAU;IACb,CAAC,CAAC;;AAGP,OAAK,uBAAuB,aAAa,CAAC,cAAc;AACpD,QAAK,uBAAuB;IAC9B;AAEF,SAAO,KAAK;;CAGhB,uBAA8C;EAC1C,MAAM,QAAQ,KAAK;AAEnB,MAAI,CAAC,MACD,QAAO,QAAQ,SAAS;AAG5B,SAAO,IAAI,SAAS,YAAY;GAC5B,IAAI,UAAU;GAEd,MAAM,eAAqB;AACvB,QAAI,QACA;AAGJ,cAAU;AACV,UAAM,oBAAoB,gBAAgB,eAAe;AACzD,WAAO,aAAa,SAAS;AAC7B,UAAM,UAAU,OAAO,UAAU;AACjC,aAAS;;GAGb,MAAM,kBAAkB,UAAgC;AACpD,QAAI,MAAM,WAAW,SAAS,MAAM,cAAc,WAAW,uBAAuB,CAChF,SAAQ;;AAIhB,SAAM,UAAU,IAAI,UAAU;AAC9B,SAAM,iBAAiB,gBAAgB,eAAe;GACtD,MAAM,WAAW,OAAO,WAAW,QAAQ,IAAI;IACjD;;CAGN,YAA6C;AACzC,MAAI,KAAK,OACL,QAAO,KAAK;AAGhB,MAAI,KAAK,IACL,QAAO,mBAAmB,MAAM,KAAK,IAAI;AAG7C,MAAI,KAAK,eACL,QAAO,KAAK;AAGhB,SAAO;;CAGX,0BAAwC;AACpC,MAAI,KAAK,kBACL;AAGJ,sBAAoB,KAAK;AACzB,OAAK,oBAAoB;AACzB,WAAS,iBAAiB,eAAe,KAAK,uBAAuB,KAAK;AAC1E,WAAS,iBAAiB,WAAW,KAAK,mBAAmB,KAAK;;CAGtE,4BAA0C;AACtC,MAAI,KAAK,mBAAmB;AACxB,yBAAsB,KAAK;AAC3B,QAAK,oBAAoB;;AAG7B,WAAS,oBAAoB,eAAe,KAAK,uBAAuB,KAAK;AAC7E,WAAS,oBAAoB,WAAW,KAAK,mBAAmB,KAAK;;CAWzE,gBAAwB,OAA8B;AAClD,SAAO,uBAAuB,OAAO;GACjC,MAAM;GACN,QAAQ,KAAK,kBAAkB;GAC/B,OAAO,KAAK;GACf,CAAC;;CAaN,mBAA+C;AAC3C,MAAI,KAAK,kBAAkB,YACvB,QAAO,KAAK;AAGhB,MAAI,KAAK,eACL,QAAO,KAAK;AAGhB,MAAI,KAAK,IACL,QAAO,mBAAmB,MAAM,KAAK,IAAI;AAG7C,SAAO;;CAGX,eAA6B;AACzB,OAAK,gBAAgB,aAAa,iBAAiB,KAAK,OAAO,SAAS,QAAQ;;CAGpF,SAAkB;EACd,MAAM,SAAS,KAAK,WAAW;AAE/B,SAAO,IAAI;+CAC4B,KAAK,oBAAoB;;0BAE9C,KAAK,QAAQ,KAAK,QAAQ;0BAC1B,UAAU,GAAG;6BACV,KAAK,UAAU;4BAChB,KAAK,WAAW;yBACnB,KAAK,UAAU;;;;;;4BAMZ,SAAS;GACb,OAAO;GACP,oBAAoB;GACpB,SAAS,KAAK;GACjB,CAAC,CAAC;8BACO,CAAC,KAAK,QAAQ,CAAC,KAAK,QAAQ;gCAC1B,KAAK,iBAAiB,CAAC,KAAK,UAAU,KAAK,QAAQ;+BACpD,KAAK,OAAO,OAAO,QAAQ;;;;;;;;YAlarD,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,UAAA,WAAA,QAAA,KAAA,EAAA;YAG1C,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,UAAA,WAAA,aAAA,KAAA,EAAA;YAG3B,SAAS;CAAE,WAAW;CAAe,MAAM;CAAQ,CAAC,CAAA,EAAA,UAAA,WAAA,cAAA,KAAA,EAAA;YAOpD,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,UAAA,WAAA,SAAA,KAAA,EAAA;YAQ1C,SAAS;CAAE,WAAW;CAAc,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,UAAA,WAAA,aAAA,KAAA,EAAA;YAInE,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,UAAA,WAAA,OAAA,KAAA,EAAA;YAS3B,SAAS,EAAE,WAAW,OAAO,CAAC,CAAA,EAAA,UAAA,WAAA,UAAA,KAAA,EAAA;YAG9B,MAAM,WAAW,CAAA,EAAA,UAAA,WAAA,gBAAA,KAAA,EAAA;YAOjB,OAAO,CAAA,EAAA,UAAA,WAAA,kBAAA,KAAA,EAAA;YAIP,OAAO,CAAA,EAAA,UAAA,WAAA,WAAA,KAAA,EAAA;YAIP,OAAO,CAAA,EAAA,UAAA,WAAA,iBAAA,KAAA,EAAA;wBAxDX,cAAc,aAAa,CAAA,EAAA,UAAA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"pk-popup-B65tZMQH.js","names":[],"sources":["../../src/internal/resolve-element-by-id.ts","../../src/events/pk-reposition.ts","../../src/components/popup/pk-popup.styles.ts","../../src/components/popup/pk-popup.ts"],"sourcesContent":["/** Resolve an element id from the same root as the host (shadow or document), then the document. */\nexport function resolveElementById(host: HTMLElement, id: string): HTMLElement | null {\n if (!id) {\n return null;\n }\n\n const root = host.getRootNode();\n\n if (root instanceof Document || root instanceof ShadowRoot) {\n const match = root.getElementById(id);\n\n if (match) {\n return match;\n }\n }\n\n return host.ownerDocument.getElementById(id);\n}\n","/** Emitted when a popup repositions — mirrors reposition semantics with pk naming. */\nexport class PkRepositionEvent extends Event {\n constructor() {\n super('pk-reposition', { bubbles: true, cancelable: false, composed: true });\n }\n}\n\ndeclare global {\n interface GlobalEventHandlersEventMap {\n 'pk-reposition': PkRepositionEvent;\n }\n}\n","import { css } from 'lit';\n\nexport const pkPopupStyles = css`\n @layer pk-component {\n :host {\n display: contents;\n }\n\n .popup {\n position: absolute;\n isolation: isolate;\n width: max-content;\n z-index: var(--pk-popup-z-index, 1000);\n /* Never transition coordinates — flip would animate the jump. */\n transition: none;\n\n /* Reset UA styles for [popover] — see pk-popup. */\n inset: unset;\n padding: unset;\n margin: unset;\n height: unset;\n color: unset;\n background: unset;\n border: unset;\n overflow: unset;\n }\n\n .popup-fixed {\n position: fixed;\n }\n\n .popup:not(.active) {\n display: none;\n }\n\n /* Prefer visibility over opacity so enter animations are not fighting a\n * 0→1 fade. Matches base-ui isPositioned / hide-until-placed.\n */\n .popup.active:not(.positioned) {\n visibility: hidden;\n pointer-events: none;\n }\n\n .popup.show {\n animation: pk-popup-surface-in 100ms ease-out;\n }\n\n .popup.hide {\n animation: pk-popup-surface-out 100ms ease-in forwards;\n }\n\n @keyframes pk-popup-surface-in {\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n\n to {\n opacity: 1;\n transform: scale(1);\n }\n }\n\n @keyframes pk-popup-surface-out {\n from {\n opacity: 1;\n transform: scale(1);\n }\n\n to {\n opacity: 0;\n transform: scale(0.95);\n }\n }\n\n .arrow {\n position: absolute;\n width: var(--pk-popup-arrow-size, 6px);\n height: var(--pk-popup-arrow-size, 6px);\n rotate: 45deg;\n background: var(--pk-popup-arrow-color, var(--pk-color-white));\n z-index: 1;\n }\n\n .hover-bridge {\n position: fixed;\n z-index: calc(var(--pk-popup-z-index, 1000) - 1);\n inset: 0;\n clip-path: polygon(\n var(--pk-hover-bridge-top-left-x, 0) var(--pk-hover-bridge-top-left-y, 0),\n var(--pk-hover-bridge-top-right-x, 0) var(--pk-hover-bridge-top-right-y, 0),\n var(--pk-hover-bridge-bottom-right-x, 0) var(--pk-hover-bridge-bottom-right-y, 0),\n var(--pk-hover-bridge-bottom-left-x, 0) var(--pk-hover-bridge-bottom-left-y, 0)\n );\n pointer-events: auto;\n }\n\n .hover-bridge:not(.hover-bridge-visible) {\n display: none;\n }\n }\n`;\n","import {\n arrow,\n autoUpdate,\n computePosition,\n flip,\n getOverflowAncestors,\n offset,\n platform,\n shift,\n size,\n type Placement,\n} from '@floating-ui/dom';\nimport { offsetParent } from 'composed-offset-position';\nimport { html, nothing } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query } from '../../decorators.js';\nimport type { PropertyValues } from 'lit';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { resolveElementById } from '../../internal/resolve-element-by-id.js';\nimport { PkRepositionEvent } from '../../events/pk-reposition.js';\nimport { computePopupTransformOrigin } from '../../utils/popup-placement-animation.js';\nimport { SUPPORTS_POPOVER } from '../../utils/supports-popover.js';\nimport { pkPopupStyles } from './pk-popup.styles.js';\n\nexport type PkPopupPlacement = Placement;\n\nexport type PkPopupVirtualElement = {\n getBoundingClientRect: () => DOMRect;\n contextElement?: Element;\n};\n\nfunction isVirtualElement(value: unknown): value is PkPopupVirtualElement {\n return (\n value !== null\n && typeof value === 'object'\n && 'getBoundingClientRect' in value\n );\n}\n\nfunction resolvePositionStrategy(\n positionMethod: 'fixed' | 'absolute' | undefined,\n): 'fixed' | 'absolute' {\n if (positionMethod) {\n return positionMethod;\n }\n\n // Top-layer popovers use absolute coords; legacy fallback uses fixed viewport coords.\n return SUPPORTS_POPOVER ? 'absolute' : 'fixed';\n}\n\nfunction resolveScrollBoundary(\n anchorElement: Element | PkPopupVirtualElement,\n boundary: 'viewport' | 'scroll',\n): Element[] | undefined {\n if (!SUPPORTS_POPOVER || isVirtualElement(anchorElement) || boundary !== 'scroll') {\n return undefined;\n }\n\n // Popover content leaves the anchor's overflow chain — pass ancestor bounds explicitly.\n return getOverflowAncestors(anchorElement).filter((node): node is Element => node instanceof Element);\n}\n\n/**\n * Anchors floating content to a reference element — popup pattern with pk naming.\n * When the Popover API is available, content stays in the component tree and is promoted to\n * the top layer via `popover=\"manual\"` + `showPopover()` (no DOM reparenting).\n *\n * @event pk-reposition - Emitted when the popup is repositioned.\n *\n * @slot - Popup content.\n * @slot anchor - Anchor element when it lives inside the popup host.\n *\n * @csspart popup - Floating container.\n * @csspart arrow - Arrow element.\n * @csspart hover-bridge - Invisible bridge between anchor and popup.\n */\n@customElement('pk-popup')\nexport class PkPopup extends PkElement {\n static override styles = pkPopupStyles;\n\n /** Element id, DOM reference, or virtual element to anchor against. */\n @property()\n anchor: Element | string | PkPopupVirtualElement = '';\n\n /** When true, positioning runs and the popup is shown. */\n @property({ type: Boolean, reflect: true })\n active = false;\n\n /**\n * Floating UI positioning strategy.\n * Defaults to `absolute` when the Popover API is supported, otherwise `fixed`.\n */\n @property({ attribute: 'position-method' })\n positionMethod?: 'fixed' | 'absolute';\n\n /** Bounding box for flip/shift collision — `scroll` uses overflow ancestors when popover is active. */\n @property({ reflect: true })\n boundary: 'viewport' | 'scroll' = 'viewport';\n\n @property({ reflect: true })\n placement: PkPopupPlacement = 'bottom-start';\n\n @property({ type: Number })\n distance = 4;\n\n @property({ type: Number })\n skidding = 0;\n\n @property({ type: Boolean })\n flip = true;\n\n @property({ attribute: 'flip-fallback-placements' })\n flipFallbackPlacements = '';\n\n @property({ attribute: 'flip-fallback-strategy' })\n flipFallbackStrategy: 'best-fit' | 'initial' = 'best-fit';\n\n @property({ attribute: 'flip-padding', type: Number })\n flipPadding = 8;\n\n @property({ type: Boolean })\n shift = true;\n\n @property({ attribute: 'shift-padding', type: Number })\n shiftPadding = 8;\n\n @property({ type: Boolean })\n arrow = false;\n\n @property({ attribute: 'arrow-placement' })\n arrowPlacement: 'start' | 'end' | 'center' | 'anchor' = 'anchor';\n\n @property({ attribute: 'arrow-padding', type: Number })\n arrowPadding = 10;\n\n @property()\n sync?: 'width' | 'height' | 'both';\n\n /** Constrain the popup to the available collision boundary on the selected axes. */\n @property({ attribute: 'auto-size' })\n autoSize?: 'horizontal' | 'vertical' | 'both';\n\n /** Space retained between an auto-sized popup and its collision boundary. */\n @property({ attribute: 'auto-size-padding', type: Number })\n autoSizePadding = 8;\n\n /** When false, the popup is positioned once and not tracked on scroll/resize. */\n @property({ attribute: 'anchor-tracking', type: Boolean })\n anchorTracking = true;\n\n @property({ attribute: 'hover-bridge', type: Boolean })\n hoverBridge = false;\n\n @query('.popup')\n private popupElement?: HTMLElement;\n\n @query('.arrow')\n private arrowElement?: HTMLElement;\n\n private anchorElement: Element | PkPopupVirtualElement | null = null;\n private cleanup?: () => void;\n /** True while waiting for layout-stable coords before first paint. */\n private settlingInitialPosition = false;\n private settleGeneration = 0;\n\n override disconnectedCallback(): void {\n void this.stop();\n super.disconnectedCallback();\n }\n\n override updated(changed: PropertyValues): void {\n super.updated(changed);\n\n if (changed.has('active')) {\n if (this.active) {\n this.resolveAnchor();\n this.start();\n } else {\n this.stop();\n }\n }\n\n if (changed.has('anchor')) {\n void this.handleAnchorChange();\n }\n\n if (this.active && !changed.has('active')) {\n this.reposition();\n }\n }\n\n /** Forces the popup to recalculate and reposition itself. */\n reposition(): void {\n if (this.settlingInitialPosition) {\n return;\n }\n\n void this.repositionAsync();\n }\n\n /**\n * Runs Floating UI once and applies coords. Does not reveal an unpositioned\n * popup — `settleInitialPosition()` owns the first paint.\n */\n private async repositionAsync(emitEvent = true): Promise<boolean> {\n const floatingElement = this.popupElement;\n const arrowTarget = this.arrow ? this.arrowElement : null;\n\n if (!this.active || !this.anchorElement || !floatingElement) {\n return false;\n }\n\n const scrollBoundary = resolveScrollBoundary(this.anchorElement, this.boundary);\n\n const middleware = [\n offset({ mainAxis: this.distance, crossAxis: this.skidding }),\n ];\n\n if (this.sync) {\n middleware.push(\n size({\n apply: ({ rects }) => {\n const syncWidth = this.sync === 'width' || this.sync === 'both';\n const syncHeight = this.sync === 'height' || this.sync === 'both';\n floatingElement.style.width = syncWidth ? `${rects.reference.width}px` : '';\n floatingElement.style.height = syncHeight ? `${rects.reference.height}px` : '';\n },\n }),\n );\n } else {\n floatingElement.style.width = '';\n floatingElement.style.height = '';\n }\n\n if (this.flip) {\n middleware.push(\n flip({\n boundary: scrollBoundary,\n fallbackPlacements: this.flipFallbackPlacements\n ? this.flipFallbackPlacements.split(' ').map((value) => value.trim()).filter(Boolean) as Placement[]\n : undefined,\n fallbackStrategy: this.flipFallbackStrategy === 'best-fit' ? 'bestFit' : 'initialPlacement',\n padding: this.flipPadding,\n }),\n );\n }\n\n if (this.shift) {\n middleware.push(\n shift({\n boundary: scrollBoundary,\n padding: this.shiftPadding,\n }),\n );\n }\n\n if (this.autoSize) {\n middleware.push(\n size({\n boundary: scrollBoundary,\n padding: this.autoSizePadding,\n apply: ({ availableHeight, availableWidth }) => {\n const constrainWidth = this.autoSize === 'horizontal' || this.autoSize === 'both';\n const constrainHeight = this.autoSize === 'vertical' || this.autoSize === 'both';\n\n if (constrainWidth) {\n floatingElement.style.setProperty(\n '--pk-popup-available-width',\n `${Math.max(0, Math.floor(availableWidth))}px`,\n );\n } else {\n floatingElement.style.removeProperty('--pk-popup-available-width');\n }\n\n if (constrainHeight) {\n floatingElement.style.setProperty(\n '--pk-popup-available-height',\n `${Math.max(0, Math.floor(availableHeight))}px`,\n );\n } else {\n floatingElement.style.removeProperty('--pk-popup-available-height');\n }\n },\n }),\n );\n } else {\n floatingElement.style.removeProperty('--pk-popup-available-width');\n floatingElement.style.removeProperty('--pk-popup-available-height');\n }\n\n if (this.arrow && arrowTarget) {\n middleware.push(\n arrow({\n element: arrowTarget,\n padding: this.arrowPadding,\n }),\n );\n }\n\n const strategy = resolvePositionStrategy(this.positionMethod);\n const useFixedFallback = strategy === 'fixed';\n\n floatingElement.classList.toggle('popup-fixed', useFixedFallback);\n\n const getOffsetParentFn = SUPPORTS_POPOVER\n ? (element: Element) => platform.getOffsetParent(element, offsetParent)\n : platform.getOffsetParent;\n\n const { x, y, middlewareData, placement } = await computePosition(this.anchorElement, floatingElement, {\n placement: this.placement,\n middleware,\n strategy,\n platform: {\n ...platform,\n getOffsetParent: getOffsetParentFn,\n },\n });\n\n if (!this.active || !floatingElement.isConnected) {\n return false;\n }\n\n const staticSide = { top: 'bottom', right: 'left', bottom: 'top', left: 'right' }[\n placement.split('-')[0] as 'top' | 'right' | 'bottom' | 'left'\n ]!;\n\n this.setAttribute('data-current-placement', placement);\n\n Object.assign(floatingElement.style, {\n left: `${x}px`,\n top: `${y}px`,\n ...(useFixedFallback ? { position: 'fixed' } : { position: '' }),\n });\n\n if (this.anchorElement) {\n // Use viewport rects for both sides — computePosition x/y can be offset-parent\n // relative, and mixing that with getBoundingClientRect shifts transform-origin\n // sideways (menu appears to slide in from the right).\n const referenceRect = this.anchorElement.getBoundingClientRect();\n const floatingRect = floatingElement.getBoundingClientRect();\n\n floatingElement.style.setProperty('--pk-anchor-width', `${referenceRect.width}px`);\n floatingElement.style.setProperty('--pk-anchor-height', `${referenceRect.height}px`);\n\n const transformOrigin = computePopupTransformOrigin(\n placement,\n referenceRect,\n floatingRect,\n this.distance,\n middlewareData.shift,\n );\n\n floatingElement.style.setProperty('--pk-transform-origin', transformOrigin);\n }\n\n if (this.arrow && arrowTarget) {\n const arrowX = middlewareData.arrow?.x;\n const arrowY = middlewareData.arrow?.y;\n let top = '';\n let right = '';\n let bottom = '';\n let left = '';\n\n if (this.arrowPlacement === 'start') {\n const value = typeof arrowX === 'number' ? `${this.arrowPadding}px` : '';\n top = typeof arrowY === 'number' ? `${this.arrowPadding}px` : '';\n left = value;\n } else if (this.arrowPlacement === 'end') {\n right = typeof arrowX === 'number' ? `${this.arrowPadding}px` : '';\n bottom = typeof arrowY === 'number' ? `${this.arrowPadding}px` : '';\n } else if (this.arrowPlacement === 'center') {\n left = typeof arrowX === 'number' ? '50%' : '';\n top = typeof arrowY === 'number' ? '50%' : '';\n } else {\n left = typeof arrowX === 'number' ? `${arrowX}px` : '';\n top = typeof arrowY === 'number' ? `${arrowY}px` : '';\n }\n\n Object.assign(arrowTarget.style, {\n top,\n right,\n bottom,\n left,\n transform: '',\n [staticSide]: 'calc(-1 * var(--pk-popup-arrow-size, 6px) / 2)',\n });\n }\n\n requestAnimationFrame(() => this.updateHoverBridge());\n\n if (emitEvent) {\n this.dispatchEvent(new PkRepositionEvent());\n }\n\n return true;\n }\n\n private frames(count: number): Promise<void> {\n return new Promise((resolve) => {\n const step = (remaining: number): void => {\n if (remaining <= 0) {\n resolve();\n return;\n }\n\n requestAnimationFrame(() => step(remaining - 1));\n };\n\n step(count);\n });\n }\n\n /**\n * Hide → layout → measure → confirm flip → reveal.\n * A single computePosition often runs before slotted content has height, so flip\n * picks the preferred side; autoUpdate then jumps — that was the visible flash.\n */\n private async settleInitialPosition(): Promise<void> {\n const generation = ++this.settleGeneration;\n const floatingElement = this.popupElement;\n\n if (!floatingElement) {\n this.settlingInitialPosition = false;\n return;\n }\n\n // Two frames: display:none→block + slotted panel unhide need a layout pass.\n await this.frames(2);\n\n if (!this.active || generation !== this.settleGeneration) {\n return;\n }\n\n // Quiet passes — consumers waiting on pk-reposition should see the settled place.\n await this.repositionAsync(false);\n\n // Confirm after the first coords are applied (size middleware / content height).\n void floatingElement.offsetHeight;\n await this.frames(1);\n\n if (!this.active || generation !== this.settleGeneration) {\n return;\n }\n\n await this.repositionAsync(false);\n\n if (!this.active || generation !== this.settleGeneration) {\n return;\n }\n\n floatingElement.classList.add('positioned');\n this.settlingInitialPosition = false;\n requestAnimationFrame(() => this.updateHoverBridge());\n this.dispatchEvent(new PkRepositionEvent());\n }\n\n private resolveAnchor(): void {\n if (typeof this.anchor === 'string' && this.anchor) {\n this.anchorElement = resolveElementById(this, this.anchor);\n return;\n }\n\n if (this.anchor instanceof Element || isVirtualElement(this.anchor)) {\n this.anchorElement = this.anchor;\n return;\n }\n\n let slotted = this.querySelector('[slot=\"anchor\"]');\n\n if (slotted instanceof HTMLSlotElement) {\n slotted = slotted.assignedElements({ flatten: true })[0] ?? null;\n }\n\n this.anchorElement = slotted;\n }\n\n private async handleAnchorChange(): Promise<void> {\n await this.stop();\n this.resolveAnchor();\n\n if (this.anchorElement && this.active) {\n this.start();\n }\n }\n\n /** When false, skip popover top layer (e.g. menu/select use fixed coords to simplify modal handoff). */\n private usesPopoverTopLayer(): boolean {\n return SUPPORTS_POPOVER && this.positionMethod !== 'fixed';\n }\n\n /** `stop()` — sync hidePopover + cleanup autoUpdate. */\n stop(): Promise<void> {\n return new Promise((resolve) => {\n const popup = this.popupElement;\n this.settleGeneration += 1;\n this.settlingInitialPosition = false;\n popup?.classList.remove('positioned');\n\n if (this.usesPopoverTopLayer()) {\n popup?.hidePopover?.();\n }\n\n if (this.cleanup) {\n this.cleanup();\n this.cleanup = undefined;\n popup?.style.removeProperty('--pk-transform-origin');\n requestAnimationFrame(() => resolve());\n } else {\n resolve();\n }\n\n // Always clear — even when autoUpdate never started — so the next open\n // cannot short-circuit waitForPopupReposition on a stale placement.\n this.removeAttribute('data-current-placement');\n });\n }\n\n /** @deprecated Prefer `stop()` — kept for select/combobox handoff call sites. */\n releasePositioning(): void {\n if (this.cleanup) {\n this.cleanup();\n this.cleanup = undefined;\n }\n }\n\n /** @deprecated Prefer `stop()`. */\n async awaitHidden(): Promise<void> {\n await this.stop();\n }\n\n private start(): void {\n if (!this.anchorElement || !this.active || !this.isConnected || !this.popupElement) {\n return;\n }\n\n // Stay invisible until settleInitialPosition confirms flip with real content size.\n this.popupElement.classList.remove('positioned');\n this.settlingInitialPosition = true;\n\n if (this.usesPopoverTopLayer()) {\n this.popupElement.showPopover?.();\n }\n\n if (this.anchorTracking) {\n this.cleanup = autoUpdate(this.anchorElement, this.popupElement, () => {\n // Ignore the sync autoUpdate kick during settle — it races layout.\n if (this.settlingInitialPosition) {\n return;\n }\n\n this.reposition();\n });\n }\n\n void this.settleInitialPosition();\n }\n\n /** Slotted popup content root (e.g. `.panel`) — keeps content in-tree. */\n getContentElement(): HTMLElement | null {\n const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n const assigned = slot?.assignedElements({ flatten: true }) ?? [];\n const slotted = assigned.find((node): node is HTMLElement => node instanceof HTMLElement);\n\n if (slotted) {\n return slotted;\n }\n\n for (const node of this.childNodes) {\n if (node instanceof HTMLElement && node.getAttribute('slot') !== 'anchor') {\n return node;\n }\n }\n\n return null;\n }\n\n private updateHoverBridge(): void {\n const floatingElement = this.popupElement;\n\n if (!this.hoverBridge || !this.anchorElement || !floatingElement) {\n return;\n }\n\n const anchorRect = this.anchorElement.getBoundingClientRect();\n const popupRect = floatingElement.getBoundingClientRect();\n const isVertical = this.placement.includes('top') || this.placement.includes('bottom');\n\n let topLeftX = 0;\n let topLeftY = 0;\n let topRightX = 0;\n let topRightY = 0;\n let bottomLeftX = 0;\n let bottomLeftY = 0;\n let bottomRightX = 0;\n let bottomRightY = 0;\n\n if (isVertical) {\n if (anchorRect.top < popupRect.top) {\n topLeftX = anchorRect.left;\n topLeftY = anchorRect.bottom;\n topRightX = anchorRect.right;\n topRightY = anchorRect.bottom;\n bottomLeftX = popupRect.left;\n bottomLeftY = popupRect.top;\n bottomRightX = popupRect.right;\n bottomRightY = popupRect.top;\n } else {\n topLeftX = popupRect.left;\n topLeftY = popupRect.bottom;\n topRightX = popupRect.right;\n topRightY = popupRect.bottom;\n bottomLeftX = anchorRect.left;\n bottomLeftY = anchorRect.top;\n bottomRightX = anchorRect.right;\n bottomRightY = anchorRect.top;\n }\n } else if (anchorRect.left < popupRect.left) {\n topLeftX = anchorRect.right;\n topLeftY = anchorRect.top;\n topRightX = popupRect.left;\n topRightY = popupRect.top;\n bottomLeftX = anchorRect.right;\n bottomLeftY = anchorRect.bottom;\n bottomRightX = popupRect.left;\n bottomRightY = popupRect.bottom;\n } else {\n topLeftX = popupRect.right;\n topLeftY = popupRect.top;\n topRightX = anchorRect.left;\n topRightY = anchorRect.top;\n bottomLeftX = popupRect.right;\n bottomLeftY = popupRect.bottom;\n bottomRightX = anchorRect.left;\n bottomRightY = anchorRect.bottom;\n }\n\n this.style.setProperty('--pk-hover-bridge-top-left-x', `${topLeftX}px`);\n this.style.setProperty('--pk-hover-bridge-top-left-y', `${topLeftY}px`);\n this.style.setProperty('--pk-hover-bridge-top-right-x', `${topRightX}px`);\n this.style.setProperty('--pk-hover-bridge-top-right-y', `${topRightY}px`);\n this.style.setProperty('--pk-hover-bridge-bottom-left-x', `${bottomLeftX}px`);\n this.style.setProperty('--pk-hover-bridge-bottom-left-y', `${bottomLeftY}px`);\n this.style.setProperty('--pk-hover-bridge-bottom-right-x', `${bottomRightX}px`);\n this.style.setProperty('--pk-hover-bridge-bottom-right-y', `${bottomRightY}px`);\n }\n\n override render() {\n const useFixedFallback = !SUPPORTS_POPOVER || this.positionMethod === 'fixed';\n const usePopoverTopLayer = this.usesPopoverTopLayer();\n\n return html`\n <slot name=\"anchor\" @slotchange=${() => { void this.handleAnchorChange(); }}></slot>\n ${this.hoverBridge ? html`\n <div\n part=\"hover-bridge\"\n class=${classMap({\n 'hover-bridge': true,\n 'hover-bridge-visible': this.active,\n })}\n aria-hidden=\"true\"\n ></div>\n ` : nothing}\n <div\n popover=${usePopoverTopLayer ? 'manual' : nothing}\n part=\"popup\"\n class=${classMap({\n popup: true,\n active: this.active,\n 'popup-fixed': useFixedFallback,\n })}\n >\n ${this.arrow ? html`<div part=\"arrow\" class=\"arrow\"></div>` : nothing}\n <slot></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-popup': PkPopup;\n }\n}\n"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
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 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"pk-radio-group-Dzd-3HaQ.js","names":[],"sources":["../../src/components/radio-group/pk-radio-group.styles.ts","../../src/components/radio-group/pk-radio-group.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkRadioGroupStyles = css`\n @layer pk-component {\n :host {\n display: block;\n font-family: var(--pk-font-family);\n font-size: var(--pk-font-size-base);\n line-height: var(--pk-line-height);\n }\n\n .group {\n display: grid;\n gap: 0.375rem;\n }\n\n .group--horizontal {\n grid-auto-flow: column;\n grid-auto-columns: max-content;\n align-items: center;\n }\n }\n`;\n","import { html, nothing } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query, state } from '../../decorators.js';\nimport type { PropertyValues } from 'lit';\n\nimport { formControlStyles } from '../../base/form-control.styles.js';\nimport { PkFormAssociatedElement } from '../../base/pk-form-associated-element.js';\nimport { HasSlotController } from '../../internal/has-slot.js';\nimport { hasInstructionContent, readLegacyInstructions } from '../../internal/field-labels.js';\nimport { RequiredValidator } from '../../validators/index.js';\nimport type { PkRadio } from './pk-radio.js';\nimport { pkRadioGroupStyles } from './pk-radio-group.styles.js';\n\nexport type PkRadioGroupOrientation = 'horizontal' | 'vertical';\n\n/**\n * Radio group — pattern: light-DOM `pk-radio` children, shared value + validation.\n *\n * @slot label - Group label\n * @slot instructions - Instructions text\n * @slot hint - Alias for `instructions`\n * @slot - `pk-radio` items\n *\n * @csspart form-control - Form control wrapper\n * @csspart label - Label text\n * @csspart radios - Radio items container\n * @csspart instructions - Instructions text\n */\n@customElement('pk-radio-group')\nexport class PkRadioGroup extends PkFormAssociatedElement {\n static override shadowRootOptions: ShadowRootInit = {\n mode: 'open',\n delegatesFocus: true,\n };\n\n static override styles = [formControlStyles, pkRadioGroupStyles];\n\n static override get validators() {\n return [...super.validators, RequiredValidator()];\n }\n\n override assumeInteractionOn = ['change'];\n\n private readonly hasSlotController = new HasSlotController(this, 'instructions', 'hint', 'label');\n\n private _value: string | null = null;\n\n get value(): string {\n if (this.valueHasChanged) {\n return this._value ?? '';\n }\n\n return this._value ?? this.defaultValue ?? '';\n }\n\n @state()\n set value(val: string | null) {\n this._value = val == null ? null : String(val);\n this.valueHasChanged = true;\n }\n\n /** Default value — reflected as the `value` attribute. */\n @property({ attribute: 'value', reflect: true })\n defaultValue = '';\n\n @property({ reflect: true })\n orientation: PkRadioGroupOrientation = 'vertical';\n\n @property({ type: Boolean, reflect: true })\n invalid = false;\n\n @property()\n label = '';\n\n @property()\n instructions = '';\n\n @property({ attribute: 'aria-label' })\n override ariaLabel: string | null = null;\n\n @query('slot:not([name])')\n private defaultSlot!: HTMLSlotElement;\n\n @state()\n private items: PkRadio[] = [];\n\n protected override syncFormValue(): void {\n this.setFormValue(this.value || null);\n }\n\n protected override resetToDefaultValue(): void {\n this._value = null;\n this.applySelection();\n }\n\n protected override restoreFormState(state: string | File | FormData | null): void {\n if (typeof state === 'string') {\n this.value = state;\n this.applySelection();\n }\n }\n\n protected override get validationTarget(): HTMLElement | undefined {\n return this.getAllRadios().find((item) => !item.disabled) ?? this.getAllRadios()[0];\n }\n\n override connectedCallback(): void {\n this.instructions = readLegacyInstructions(this, this.instructions);\n super.connectedCallback();\n this.addEventListener('keydown', this.handleKeyDown);\n this.addEventListener('click', this.handleRadioClick);\n }\n\n override disconnectedCallback(): void {\n this.removeEventListener('keydown', this.handleKeyDown);\n this.removeEventListener('click', this.handleRadioClick);\n super.disconnectedCallback();\n }\n\n override updated(changed: PropertyValues): void {\n if (changed.has('value') || changed.has('disabled') || changed.has('invalid') || changed.has('name')) {\n this.applySelection();\n }\n\n super.updated(changed);\n }\n\n override formResetCallback(): void {\n this._value = null;\n super.formResetCallback();\n this.applySelection();\n }\n\n override focus(options?: FocusOptions): void {\n if (this.disabled) {\n return;\n }\n\n const radios = this.getEnabledItems();\n const checked = radios.find((radio) => radio.checked);\n const target = checked ?? radios[0];\n target?.focusControl(options);\n }\n\n private getAllRadios(): PkRadio[] {\n return [...this.querySelectorAll('pk-radio')];\n }\n\n private syncItems = (): void => {\n this.items = this.getAllRadios();\n this.applySelection();\n };\n\n private getEnabledItems(): PkRadio[] {\n return this.items.filter((item) => !item.disabled && !this.disabled);\n }\n\n private applySelection(): void {\n const radios = this.getAllRadios();\n this.items = radios;\n\n const enabled = this.getEnabledItems();\n const checkedRadio = enabled.find((item) => item.value === this.value);\n\n for (const item of radios) {\n const checked = item.value === this.value;\n // React sets CE booleans as properties, while hand-written HTML uses attributes.\n // Preserve item-level disabled state from either source, but do not let a prior\n // group-level disabled pass permanently mark every child disabled.\n const itemDisabled = item.hasAttribute('disabled') || (item.disabled && !item.forceDisabled);\n item.checked = checked;\n item.disabled = this.disabled || itemDisabled;\n item.invalid = this.invalid;\n item.required = this.required;\n item.forceDisabled = this.disabled;\n }\n\n if (this.disabled) {\n for (const item of radios) {\n item.tabIndex = -1;\n }\n return;\n }\n\n if (checkedRadio) {\n for (const item of enabled) {\n item.tabIndex = item.checked ? 0 : -1;\n }\n } else if (enabled.length > 0) {\n enabled.forEach((item, index) => {\n item.tabIndex = index === 0 ? 0 : -1;\n });\n }\n\n for (const item of radios.filter((radio) => radio.disabled)) {\n item.tabIndex = -1;\n }\n }\n\n private handleRadioClick = (event: Event): void => {\n const clickedRadio = (event.target as HTMLElement).closest('pk-radio') as PkRadio | null;\n\n if (!clickedRadio || clickedRadio.disabled || clickedRadio.forceDisabled || this.disabled) {\n return;\n }\n\n const oldValue = this.value;\n this.value = clickedRadio.value;\n this.applySelection();\n\n if (this.value !== oldValue) {\n this.emitValueChange();\n }\n };\n\n private handleKeyDown = (event: KeyboardEvent): void => {\n if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', ' ', 'Home', 'End'].includes(event.key) || this.disabled) {\n return;\n }\n\n const radios = this.getEnabledItems();\n\n if (radios.length === 0) {\n return;\n }\n\n event.preventDefault();\n\n const oldValue = this.value;\n const checkedRadio = radios.find((radio) => radio.checked) ?? radios[0]!;\n let index = radios.indexOf(checkedRadio);\n\n if (event.key === ' ') {\n // Space selects focused radio without moving\n } else if (event.key === 'Home') {\n index = 0;\n } else if (event.key === 'End') {\n index = radios.length - 1;\n } else {\n const increment = ['ArrowUp', 'ArrowLeft'].includes(event.key) ? -1 : 1;\n index += increment;\n\n if (index < 0) {\n index = radios.length - 1;\n }\n\n if (index >= radios.length) {\n index = 0;\n }\n }\n\n this.value = radios[index]!.value;\n this.applySelection();\n radios[index]!.focusControl();\n\n if (this.value !== oldValue) {\n this.emitValueChange();\n }\n };\n\n private emitValueChange(): void {\n this.dispatchEvent(new CustomEvent('pk-change', {\n detail: { value: this.value },\n bubbles: true,\n composed: true,\n }));\n\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n }\n\n override render() {\n const hasLabelSlot = this.hasSlotController.test('label');\n const hasInstructions = hasInstructionContent(\n (name, flag) => this.hasSlotController.test(name, flag),\n this.instructions,\n );\n const hasLabel = Boolean(this.label) || hasLabelSlot;\n\n return html`\n <div part=\"form-control\" class=\"form-control\">\n ${hasLabel\n ? html`\n <div part=\"label\" class=\"form-control__label\" id=\"label\">\n <slot name=\"label\">${this.label}</slot>\n </div>\n `\n : nothing}\n\n ${hasInstructions\n ? html`\n <div part=\"instructions\" class=\"form-control__instructions\" id=\"instructions\">\n <slot name=\"instructions\">${this.instructions}</slot>\n <slot name=\"hint\"></slot>\n </div>\n `\n : nothing}\n\n <div\n part=\"radios\"\n class=${classMap({\n group: true,\n 'pk-radio-group': true,\n 'group--horizontal': this.orientation === 'horizontal',\n 'pk-radio-group--horizontal': this.orientation === 'horizontal',\n })}\n role=\"radiogroup\"\n aria-labelledby=${hasLabel ? 'label' : nothing}\n aria-label=${!hasLabel ? (this.ariaLabel ?? nothing) : nothing}\n aria-describedby=${hasInstructions ? 'instructions' : nothing}\n aria-invalid=${this.invalid ? 'true' : nothing}\n aria-required=${this.required ? 'true' : nothing}\n >\n <slot @slotchange=${this.syncItems}></slot>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-radio-group': PkRadioGroup;\n }\n}\n"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"pk-scroll-area-CdfNxYz8.js","names":[],"sources":["../../src/components/scroll-area/pk-scroll-area.styles.ts","../../src/components/scroll-area/pk-scroll-area.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkScrollAreaStyles = css`\n @layer pk-component {\n :host {\n --pk-shadow-color: var(--pk-color-white);\n --pk-shadow-size: 2rem;\n --pk-start-shadow-opacity: 0;\n --pk-end-shadow-opacity: 0;\n\n display: block;\n position: relative;\n max-width: 100%;\n overflow: hidden;\n isolation: isolate;\n font-family: var(--pk-font-family);\n }\n\n :host([orientation='vertical']) {\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n\n .root {\n position: relative;\n overflow: hidden;\n width: 100%;\n height: 100%;\n }\n\n .viewport {\n z-index: 1;\n width: 100%;\n height: 100%;\n border-radius: inherit;\n outline: none;\n scroll-behavior: smooth;\n scrollbar-width: none;\n }\n\n .viewport::-webkit-scrollbar {\n display: none;\n }\n\n .viewport:focus-visible {\n box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-color-sky-600) 50%, transparent);\n }\n\n :host([orientation='horizontal']) .viewport {\n overflow-x: auto;\n overflow-y: hidden;\n }\n\n :host([orientation='vertical']) .viewport {\n flex: 1 1 auto;\n min-height: 0;\n overflow-x: hidden;\n overflow-y: auto;\n }\n\n .content {\n min-height: 100%;\n }\n\n :host([orientation='horizontal']) .content {\n width: max-content;\n min-height: 100%;\n }\n\n .start-shadow,\n .end-shadow {\n z-index: 2;\n position: absolute;\n pointer-events: none;\n }\n\n .start-shadow {\n opacity: var(--pk-start-shadow-opacity);\n }\n\n .end-shadow {\n opacity: var(--pk-end-shadow-opacity);\n }\n\n :host([orientation='horizontal']) .start-shadow,\n :host([orientation='horizontal']) .end-shadow {\n top: 0;\n bottom: 0;\n width: var(--pk-shadow-size);\n }\n\n :host([orientation='horizontal']) .start-shadow {\n left: 0;\n background: linear-gradient(to right, var(--pk-shadow-color), transparent 100%);\n }\n\n :host([orientation='horizontal']) .end-shadow {\n right: 0;\n background: linear-gradient(to left, var(--pk-shadow-color), transparent 100%);\n }\n\n :host([orientation='vertical']) .start-shadow,\n :host([orientation='vertical']) .end-shadow {\n left: 0;\n right: 0;\n height: var(--pk-shadow-size);\n }\n\n :host([orientation='vertical']) .start-shadow {\n top: 0;\n background: linear-gradient(to bottom, var(--pk-shadow-color), transparent 100%);\n }\n\n :host([orientation='vertical']) .end-shadow {\n bottom: 0;\n background: linear-gradient(to top, var(--pk-shadow-color), transparent 100%);\n }\n\n .scrollbar {\n /* Cross-axis thickness — size variants override via --pk-scroll-thumb-size. */\n --pk-scroll-thumb-size: 8px;\n\n z-index: 3;\n position: absolute;\n touch-action: none;\n user-select: none;\n border-radius: 9999px;\n /* Track stays subtle; thumb carries the Craft gray affordance. */\n background: color-mix(in oklab, var(--pk-color-gray-200) 70%, transparent);\n opacity: 0;\n transition: opacity 0.15s ease;\n }\n\n .scrollbar.pk-scroll-area__scrollbar--size-xs {\n --pk-scroll-thumb-size: 6px;\n }\n\n .scrollbar.pk-scroll-area__scrollbar--size-sm {\n --pk-scroll-thumb-size: 7px;\n }\n\n .scrollbar.pk-scroll-area__scrollbar--size-default {\n --pk-scroll-thumb-size: 8px;\n }\n\n /* Inset from the clipped host edge so the rounded thumb is fully visible. */\n .scrollbar[data-orientation='vertical'] {\n top: 4px;\n right: 3px;\n bottom: 4px;\n width: var(--pk-scroll-thumb-size);\n height: auto;\n }\n\n .scrollbar[data-orientation='horizontal'] {\n left: 4px;\n right: 4px;\n bottom: 3px;\n width: auto;\n height: var(--pk-scroll-thumb-size);\n }\n\n .scrollbar[data-hovering],\n .scrollbar[data-scrolling] {\n opacity: 1;\n }\n\n .thumb {\n position: absolute;\n border-radius: 9999px;\n background: var(--pk-color-gray-350);\n transition: background 0.12s ease;\n }\n\n /* Min size is along the scroll axis only — never force cross-axis past the track. */\n .scrollbar[data-orientation='vertical'] .thumb {\n left: 0;\n right: 0;\n width: auto;\n min-height: 24px;\n }\n\n .scrollbar[data-orientation='horizontal'] .thumb {\n top: 0;\n bottom: 0;\n height: auto;\n min-width: 24px;\n }\n\n .thumb:hover {\n background: var(--pk-color-gray-500);\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';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { pkScrollAreaStyles } from './pk-scroll-area.styles.js';\n\nexport type PkScrollAreaSize = 'xs' | 'sm' | 'default';\nexport type PkScrollAreaOrientation = 'horizontal' | 'vertical';\n\n/**\n * Scrollable region — scroller pattern with optional custom thumb + edge shadows.\n *\n * @slot - Scrollable content\n *\n * @event pk-scroll - Emitted when the viewport scrolls.\n *\n * @csspart base - Root container\n * @csspart content - Scrollable content wrapper\n * @csspart viewport - Scroll viewport (alias for content)\n * @csspart start-shadow - Leading edge shadow\n * @csspart end-shadow - Trailing edge shadow\n * @csspart scrollbar - Custom scrollbar track\n * @csspart thumb - Custom scrollbar thumb\n */\n@customElement('pk-scroll-area')\nexport class PkScrollArea extends PkElement {\n static override styles = pkScrollAreaStyles;\n\n @property({ reflect: true })\n orientation: PkScrollAreaOrientation = 'vertical';\n\n @property({ reflect: true })\n size: PkScrollAreaSize = 'default';\n\n @property({ attribute: 'without-shadow', type: Boolean, reflect: true })\n withoutShadow = false;\n\n @property({ attribute: 'without-scrollbar', type: Boolean, reflect: true })\n withoutScrollbar = false;\n\n /** Readonly reference to the internal scroll container. */\n @query('.viewport')\n content!: HTMLDivElement;\n\n @query('.scrollbar')\n private scrollbarElement?: HTMLDivElement;\n\n @query('.thumb')\n private thumbElement?: HTMLDivElement;\n\n @state()\n private hovering = false;\n\n @state()\n private scrolling = false;\n\n @state()\n private canScroll = false;\n\n private scrollTimeout = 0;\n private resizeObserver?: ResizeObserver;\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.resizeObserver = new ResizeObserver(() => this.updateScroll());\n }\n\n override disconnectedCallback(): void {\n this.resizeObserver?.disconnect();\n window.clearTimeout(this.scrollTimeout);\n super.disconnectedCallback();\n }\n\n override firstUpdated(): void {\n this.resizeObserver?.observe(this.content);\n this.updateScroll();\n }\n\n /** Scrolls the internal viewport. */\n scrollContentTo(options?: ScrollToOptions): void {\n this.content.scrollTo(options ?? {});\n }\n\n private handleScroll(): void {\n this.scrolling = true;\n window.clearTimeout(this.scrollTimeout);\n this.scrollTimeout = window.setTimeout(() => {\n this.scrolling = false;\n }, 800);\n\n this.updateScroll();\n this.dispatchEvent(new CustomEvent('pk-scroll', { bubbles: true, composed: true }));\n }\n\n private handleSlotChange(): void {\n this.updateScroll();\n }\n\n private handlePointerEnter(): void {\n this.hovering = true;\n }\n\n private handlePointerLeave(): void {\n this.hovering = false;\n }\n\n private handleKeyDown(event: KeyboardEvent): void {\n if (event.key === 'Home') {\n event.preventDefault();\n this.content.scrollTo({\n left: this.orientation === 'horizontal' ? 0 : undefined,\n top: this.orientation === 'vertical' ? 0 : undefined,\n });\n }\n\n if (event.key === 'End') {\n event.preventDefault();\n this.content.scrollTo({\n left: this.orientation === 'horizontal' ? this.content.scrollWidth : undefined,\n top: this.orientation === 'vertical' ? this.content.scrollHeight : undefined,\n });\n }\n }\n\n private updateScroll(): void {\n const content = this.content;\n\n if (!content) {\n return;\n }\n\n if (this.orientation === 'horizontal') {\n const clientWidth = Math.ceil(content.clientWidth);\n const scrollLeft = Math.abs(Math.ceil(content.scrollLeft));\n const scrollWidth = Math.ceil(content.scrollWidth);\n const maxScroll = scrollWidth - clientWidth;\n\n this.canScroll = maxScroll > 0;\n\n if (!this.withoutShadow) {\n const startShadowOpacity = maxScroll > 0 ? Math.min(1, scrollLeft / (maxScroll * 0.05)) : 0;\n const endShadowOpacity = maxScroll > 0 ? Math.min(1, (maxScroll - scrollLeft) / (maxScroll * 0.05)) : 0;\n this.style.setProperty('--pk-start-shadow-opacity', String(startShadowOpacity || 0));\n this.style.setProperty('--pk-end-shadow-opacity', String(endShadowOpacity || 0));\n }\n } else {\n const clientHeight = Math.ceil(content.clientHeight);\n const scrollTop = Math.abs(Math.ceil(content.scrollTop));\n const scrollHeight = Math.ceil(content.scrollHeight);\n const maxScroll = scrollHeight - clientHeight;\n\n this.canScroll = maxScroll > 0;\n\n if (!this.withoutShadow) {\n const startShadowOpacity = maxScroll > 0 ? Math.min(1, scrollTop / (maxScroll * 0.05)) : 0;\n const endShadowOpacity = maxScroll > 0 ? Math.min(1, (maxScroll - scrollTop) / (maxScroll * 0.05)) : 0;\n this.style.setProperty('--pk-start-shadow-opacity', String(startShadowOpacity || 0));\n this.style.setProperty('--pk-end-shadow-opacity', String(endShadowOpacity || 0));\n }\n }\n\n this.updateThumb();\n }\n\n private updateThumb(): void {\n if (this.withoutScrollbar || !this.thumbElement || !this.scrollbarElement) {\n return;\n }\n\n const content = this.content;\n\n if (this.orientation === 'horizontal') {\n const { scrollLeft, scrollWidth, clientWidth } = content;\n\n if (scrollWidth <= clientWidth) {\n this.scrollbarElement.style.display = 'none';\n return;\n }\n\n this.scrollbarElement.style.display = 'flex';\n const trackWidth = this.scrollbarElement.clientWidth;\n const thumbRatio = clientWidth / scrollWidth;\n const thumbWidth = Math.max(trackWidth * thumbRatio, 24);\n const maxScroll = scrollWidth - clientWidth;\n const scrollRatio = maxScroll > 0 ? scrollLeft / maxScroll : 0;\n const thumbLeft = scrollRatio * (trackWidth - thumbWidth);\n\n this.thumbElement.style.width = `${thumbWidth}px`;\n this.thumbElement.style.height = '';\n this.thumbElement.style.transform = `translateX(${thumbLeft}px)`;\n return;\n }\n\n const { scrollTop, scrollHeight, clientHeight } = content;\n\n if (scrollHeight <= clientHeight) {\n this.scrollbarElement.style.display = 'none';\n return;\n }\n\n this.scrollbarElement.style.display = 'flex';\n\n const trackHeight = this.scrollbarElement.clientHeight;\n const thumbRatio = clientHeight / scrollHeight;\n const thumbHeight = Math.max(trackHeight * thumbRatio, 24);\n const maxScroll = scrollHeight - clientHeight;\n const scrollRatio = maxScroll > 0 ? scrollTop / maxScroll : 0;\n const thumbTop = scrollRatio * (trackHeight - thumbHeight);\n\n this.thumbElement.style.height = `${thumbHeight}px`;\n this.thumbElement.style.width = '';\n this.thumbElement.style.transform = `translateY(${thumbTop}px)`;\n }\n\n override render() {\n const isVertical = this.orientation === 'vertical';\n\n return html`\n <div\n part=\"base\"\n class=\"root pk-scroll-area\"\n @pointerenter=${this.handlePointerEnter}\n @pointerleave=${this.handlePointerLeave}\n >\n ${this.withoutShadow\n ? nothing\n : html`\n <div part=\"start-shadow\" class=\"start-shadow\" aria-hidden=\"true\"></div>\n <div part=\"end-shadow\" class=\"end-shadow\" aria-hidden=\"true\"></div>\n `}\n <div\n part=\"viewport\"\n class=\"viewport pk-scroll-area__viewport\"\n tabindex=${this.canScroll ? '0' : nothing}\n @scroll=${this.handleScroll}\n @keydown=${this.handleKeyDown}\n >\n <div\n part=\"content\"\n class=\"content pk-scroll-area__content\"\n @slotchange=${this.handleSlotChange}\n >\n <slot></slot>\n </div>\n </div>\n ${this.withoutScrollbar\n ? nothing\n : html`\n <div\n part=\"scrollbar\"\n class=${classMap({\n scrollbar: true,\n 'pk-scroll-area__scrollbar': true,\n [`pk-scroll-area__scrollbar--size-${this.size}`]: true,\n })}\n data-orientation=${this.orientation}\n ?data-hovering=${this.hovering}\n ?data-scrolling=${this.scrolling}\n >\n <div part=\"thumb\" class=\"thumb pk-scroll-area__thumb\"></div>\n </div>\n `}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-scroll-area': PkScrollArea;\n }\n}\n"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"pk-select-b5S5WKc-.js","names":[],"sources":["../../src/components/select/pk-select.styles.ts","../../src/components/select/pk-select.ts"],"sourcesContent":["import { css } from 'lit';\n\nimport { iconStyles } from '../../base/icon.styles.js';\nimport { popupContentAnimationStyles } from '../../styles/popup-content-animation.styles.js';\n\nexport const pkSelectStyles = [\n popupContentAnimationStyles,\n css`\n ${iconStyles}\n @layer pk-component {\n :host {\n display: inline-block;\n position: relative;\n width: fit-content;\n max-width: 100%;\n align-self: flex-start;\n flex: none;\n color: var(--pk-color-gray-700);\n font-family: var(--pk-font-family);\n font-size: var(--pk-font-size-base);\n line-height: var(--pk-line-height);\n --pk-select-trigger-border-width: 1px;\n --pk-select-item-min-height: var(--pk-input-height);\n --pk-select-item-padding-block: 6px;\n --pk-select-item-padding-inline: 10px;\n --pk-select-item-padding-inline-end: 2rem;\n --pk-select-item-font-size: var(--pk-font-size-base);\n --pk-select-item-line-height: var(--pk-input-control-line-height, 1.25rem);\n --pk-select-item-indicator-size: 0.75rem;\n --pk-select-item-indicator-inset: 0.5rem;\n /* v1 SelectLabel default: text-xs → 12px */\n --pk-select-group-label-font-size: 12px;\n --pk-select-decoration-size: 0.875rem;\n }\n\n :host([width='full']) {\n display: block;\n width: 100%;\n }\n\n :host([width='full']) .control {\n width: 100%;\n }\n\n :host([width='full']) button.control .icon {\n margin-inline-start: auto;\n }\n\n .control {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n /* Fill the host when consumers set min-width/width on :host. */\n width: 100%;\n max-width: 100%;\n min-width: 0;\n margin: 0;\n padding: var(--pk-select-item-padding-block) var(--pk-select-item-padding-inline);\n border: var(--pk-select-trigger-border-width) solid transparent;\n border-radius: var(--pk-radius-lg);\n --pk-select-fill: var(--pk-color-slate-250);\n --pk-select-fill-hover: var(--pk-color-slate-300);\n background: var(--pk-select-fill);\n color: var(--pk-color-gray-700);\n font: inherit;\n font-size: var(--pk-select-item-font-size);\n line-height: var(--pk-input-control-line-height, 1.25rem);\n white-space: nowrap;\n cursor: pointer;\n outline: none;\n box-sizing: border-box;\n transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;\n }\n\n button.control {\n appearance: none;\n -webkit-appearance: none;\n text-align: left;\n background-color: var(--pk-select-fill);\n border: var(--pk-select-trigger-border-width) solid transparent;\n }\n\n :host(:not([disabled])) .control:hover:not(.is-disabled):not(:disabled),\n :host(:not([disabled])) button.control:hover:not(.is-disabled):not(:disabled) {\n background: var(--pk-select-fill-hover);\n }\n\n :host(:not([disabled])) button.control:hover:not(.is-disabled):not(:disabled) {\n background-color: var(--pk-select-fill-hover);\n }\n\n :host(:not([invalid]):not(:state(user-invalid))) button.control:focus-visible,\n :host(:not([invalid]):not(:state(user-invalid))[data-state='focus-visible']) button.control {\n border-color: var(--pk-color-sky-600);\n box-shadow: var(--pk-input-focus-shadow);\n }\n\n .control.is-disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n .trigger {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n min-width: 0;\n padding: 0;\n border: 0;\n background: transparent;\n color: inherit;\n font: inherit;\n cursor: inherit;\n outline: none;\n }\n\n .control > .trigger:not(.trigger--icon) {\n flex: 0 1 auto;\n justify-content: flex-start;\n }\n\n .trigger--icon {\n width: 1.25rem;\n }\n\n .trigger-start {\n display: none;\n flex: 0 0 auto;\n align-items: center;\n }\n\n .trigger-start.has-decoration {\n display: inline-flex;\n }\n\n .control-start,\n .control-end {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n line-height: 0;\n color: var(--pk-color-gray-600);\n }\n\n slot[name='start']::slotted(svg),\n slot[name='end']::slotted(svg) {\n width: var(--pk-select-decoration-size);\n height: var(--pk-select-decoration-size);\n }\n\n .value {\n flex: 1 1 auto;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n text-align: left;\n }\n\n .icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n line-height: 0;\n pointer-events: none;\n color: var(--pk-color-gray-600);\n }\n\n /* Extra space before the expand chevron (control gap stays for start icon ↔ label). */\n .control > .icon,\n .control > .trigger--icon {\n margin-inline-start: 0.25rem;\n }\n\n .icon svg {\n display: block;\n width: 0.75rem;\n height: 0.75rem;\n }\n\n .tags {\n display: flex;\n flex: 0 1 auto;\n flex-wrap: wrap;\n gap: 0.25rem;\n min-width: 0;\n }\n\n .tag {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n max-width: 10ch;\n padding: 0.125rem 0.375rem;\n border-radius: var(--pk-radius-sm);\n background: var(--pk-color-gray-200);\n color: var(--pk-color-gray-800);\n font-size: 12px;\n line-height: 1.3;\n }\n\n .tag-label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .tag-remove {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 0.875rem;\n height: 0.875rem;\n padding: 0;\n border: 0;\n border-radius: var(--pk-radius-sm);\n background: transparent;\n color: var(--pk-color-gray-600);\n cursor: pointer;\n }\n\n .tag-remove:hover {\n background: rgb(0 0 0 / 8%);\n }\n\n .clear-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 1.25rem;\n height: 1.25rem;\n padding: 0;\n border: 0;\n border-radius: var(--pk-radius-sm);\n background: transparent;\n color: var(--pk-color-gray-600);\n cursor: pointer;\n flex-shrink: 0;\n }\n\n .clear-button:hover {\n background: rgb(0 0 0 / 6%);\n color: var(--pk-color-gray-800);\n }\n\n .value-input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n\n .panel ::slotted(pk-separator) {\n margin: 4px 0;\n }\n\n .panel {\n width: max-content;\n min-width: var(--pk-select-anchor-width, 8rem);\n max-height: 16rem;\n overflow: auto;\n padding: 0;\n border: 0;\n border-radius: var(--pk-radius-md);\n background: var(--pk-color-white);\n box-shadow: var(--pk-shadow-popup);\n color: var(--pk-color-gray-700);\n outline: none;\n }\n\n .panel[hidden] {\n display: none !important;\n }\n\n :host([invalid]) .control,\n :host(:state(user-invalid)) .control {\n border-color: var(--pk-color-rose-600);\n }\n\n :host([invalid]) button.control:focus-visible,\n :host([invalid][data-state='focus-visible']) button.control,\n :host(:state(user-invalid)) button.control:focus-visible,\n :host(:state(user-invalid)[data-state='focus-visible']) button.control {\n border-color: var(--pk-color-rose-600);\n box-shadow: var(--pk-input-invalid-focus-shadow);\n }\n\n :host([size='xs']) {\n --pk-select-item-min-height: 0;\n --pk-select-item-padding-block: 4px;\n --pk-select-item-padding-inline: 8px;\n --pk-select-item-padding-inline-end: 1.75rem;\n --pk-select-item-font-size: 11px;\n --pk-select-item-line-height: 1.25;\n /* v1 SelectLabel xs: text-[11px] */\n --pk-select-group-label-font-size: 11px;\n --pk-select-decoration-size: 0.625rem;\n }\n\n :host([size='xs']) .control {\n border-radius: var(--pk-radius-sm);\n /* Match trigger line-height to the compact item token (default is 1.25rem). */\n line-height: var(--pk-select-item-line-height, 1.25);\n }\n\n :host([size='xs']) .icon svg {\n width: 0.625rem;\n height: 0.625rem;\n }\n\n /* Options live in light DOM; ::slotted pushes size tokens onto each pk-option\n * host so the open listbox matches the trigger (inheritance alone is flaky when\n * the panel is promoted to the popover top layer). */\n :host([size='xs']) ::slotted(pk-option) {\n --pk-select-item-min-height: 0;\n --pk-select-item-padding-block: 4px;\n --pk-select-item-padding-inline: 8px;\n --pk-select-item-padding-inline-end: 1.75rem;\n --pk-select-item-font-size: 11px;\n --pk-select-item-line-height: 1.25;\n --pk-select-item-indicator-size: 0.625rem;\n }\n\n :host([size='xs']) .panel {\n max-height: 12rem;\n }\n\n /* Editable-table cells only (class set by pk-editable-table) — compact chip + menu. */\n :host(.cell-pk-control) {\n --pk-select-item-min-height: 0;\n --pk-select-item-padding-block: 5px;\n --pk-select-item-padding-inline: 8px;\n --pk-select-item-padding-inline-end: 1.5rem;\n --pk-select-item-font-size: 11px;\n --pk-select-item-line-height: 1.2;\n /* Compact table chip — match xs label size. */\n --pk-select-group-label-font-size: 11px;\n --pk-select-decoration-size: 0.625rem;\n --pk-select-item-indicator-size: 0.625rem;\n }\n\n :host(.cell-pk-control) .control {\n border-radius: var(--pk-radius-sm);\n line-height: var(--pk-select-item-line-height, 1.2);\n }\n\n :host(.cell-pk-control) ::slotted(pk-option) {\n --pk-select-item-min-height: 0;\n --pk-select-item-padding-block: 5px;\n --pk-select-item-padding-inline: 8px;\n --pk-select-item-padding-inline-end: 1.5rem;\n --pk-select-item-font-size: 11px;\n --pk-select-item-line-height: 1.2;\n --pk-select-item-indicator-size: 0.625rem;\n }\n\n :host(.cell-pk-control) .panel {\n max-height: 11rem;\n }\n\n :host([size='sm']) {\n --pk-select-item-min-height: 0;\n --pk-select-item-padding-block: 6px;\n --pk-select-item-padding-inline: 10px;\n --pk-select-item-padding-inline-end: 1.75rem;\n --pk-select-item-font-size: 12px;\n --pk-select-item-indicator-inset: 0.625rem;\n /* v1 SelectLabel sm: text-[12px] */\n --pk-select-group-label-font-size: 12px;\n --pk-select-decoration-size: 0.6875rem;\n }\n\n :host([size='sm']) .control {\n border-radius: var(--pk-radius-md);\n }\n\n :host([size='sm']) .icon svg {\n width: 0.6875rem;\n height: 0.6875rem;\n }\n\n :host([size='lg']) {\n --pk-select-item-padding-block: 8px;\n --pk-select-item-padding-inline: 12px;\n --pk-select-item-font-size: var(--pk-font-size-base);\n --pk-select-item-indicator-inset: 0.75rem;\n /* v1 SelectLabel lg: text-sm → 14px */\n --pk-select-group-label-font-size: 14px;\n --pk-select-decoration-size: 1rem;\n }\n\n :host([size='xl']) {\n --pk-select-item-padding-block: 10px;\n --pk-select-item-padding-inline: 14px;\n --pk-select-item-padding-inline-end: 2.25rem;\n --pk-select-item-font-size: var(--pk-font-size-base);\n --pk-select-item-indicator-inset: 0.875rem;\n /* v1 SelectLabel xl: text-base → 16px */\n --pk-select-group-label-font-size: 16px;\n --pk-select-decoration-size: 1.125rem;\n }\n\n :host([size='xl']) .icon svg {\n width: 0.875rem;\n height: 0.875rem;\n }\n }\n`,\n];\n","import { html, nothing } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query, state } from '../../decorators.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport type { PropertyValues } from 'lit';\n\nimport { chevronDown, renderIconHtml } from '../../icons/index.js';\n\nimport { isTopDismissible, registerDismissible, unregisterDismissible } from '../../a11y/dismissible-stack.js';\nimport { scrollIntoView } from '../../a11y/scroll-lock.js';\nimport { uniqueId } from '../../a11y/focus.js';\nimport { PkFormAssociatedElement } from '../../base/pk-form-associated-element.js';\nimport { HasSlotController } from '../../internal/has-slot.js';\nimport { PkClearEvent } from '../../events/pk-clear.js';\nimport {\n PkAfterHideEvent,\n PkAfterShowEvent,\n PkHideEvent,\n PkShowEvent,\n type PkOverlaySource,\n} from '../../events/overlay-lifecycle.js';\nimport type { PkValidator } from '../../validators/types.js';\nimport { MirrorValidator } from '../../validators/mirror-validator.js';\n// Keep the internal element registered when production builds erase type-only imports.\nimport '../popup/pk-popup.js';\nimport type { PkPopup, PkPopupPlacement } from '../popup/pk-popup.js';\nimport {\n createTypeToSelectHandler,\n handleListboxKeyDown,\n isListboxTypeToSelectKey,\n LISTBOX_NAVIGATION_KEYS,\n} from '../../utils/listbox-keyboard.js';\nimport {\n syncPopupPlacementAnimation,\n waitForPopupReposition,\n} from '../../utils/popup-placement-animation.js';\nimport { isEventInsideOverlay, isPointerInsideOverlay } from '../../utils/popup-pointer.js';\nimport { syncListboxSeparators } from '../../internal/sync-listbox-separators.js';\nimport type { PkOption } from './pk-option.js';\nimport type { PkOptionGroup } from './pk-option-group.js';\nimport { pkSelectStyles } from './pk-select.styles.js';\n\nexport type PkSelectSize = 'xs' | 'sm' | 'default' | 'lg' | 'xl';\n\nconst CHEVRON_ICON = renderIconHtml(chevronDown);\n\n/**\n * Select — slotted `pk-option` children, form-associated, clearable, multiselect tags.\n *\n * @slot start - Presentational decoration before the trigger label (e.g. icons)\n * @slot end - Presentational decoration before the expand chevron\n * @slot - `pk-option` and `pk-option-group` items\n *\n * @csspart control - Trigger control wrapper\n * @csspart start - Host start decoration container\n * @csspart end - Host end decoration container\n * @csspart trigger-start - Mirrored start decoration from the selected option\n * @csspart trigger - Select trigger button\n * @csspart panel - Listbox panel\n *\n * @cssproperty [--pk-select-fill=var(--pk-color-slate-250)] - Closed trigger background.\n * @cssproperty [--pk-select-fill-hover=var(--pk-color-slate-300)] - Closed trigger hover background.\n * @cssproperty [--pk-select-anchor-width] - Panel min-width; set from the trigger width while open.\n * @cssproperty [--pk-select-decoration-size=0.875rem] - Start/end decoration glyph size.\n *\n * @event pk-show - Emitted when the listbox begins to open.\n * @event pk-after-show - Emitted after the listbox opens and enter motion finishes.\n * @event {{ source: string }} pk-hide - Emitted when the listbox begins to close (cancelable).\n * @event pk-after-hide - Emitted after the listbox closes and exit motion finishes.\n * @event {{ open: boolean }} pk-open-change - Emitted when `open` changes after show/hide settles.\n * @event {{ value: string, values: string[] }} pk-change - Emitted when the selection changes.\n * @event pk-clear - Emitted when the value is cleared via the clear control.\n * @event pk-invalid - Emitted when constraint validation fails.\n * @event input - Native input event when the selection changes.\n * @event change - Native change event when the selection changes.\n *\n * @method show - Opens the listbox.\n * @method hide - Closes the listbox.\n * @method checkValidity - Runs constraint validation without showing the browser UI.\n * @method reportValidity - Runs constraint validation and shows the browser UI when invalid.\n * @method setCustomValidity - Sets or clears a custom validation message.\n * @method resetValidity - Clears custom errors and re-syncs validity state.\n *\n * @dependency pk-popup - Positioned listbox panel host.\n */\n@customElement('pk-select')\nexport class PkSelect extends PkFormAssociatedElement {\n static override styles = pkSelectStyles;\n\n static override get validators(): PkValidator[] {\n return [\n ...super.validators,\n MirrorValidator(),\n {\n observedAttributes: ['required'],\n checkValidity: (element) => {\n const select = element as PkSelect;\n const result = {\n message: 'Please select an item in the list.',\n isValid: true,\n invalidKeys: [] as ReturnType<PkValidator['checkValidity']>['invalidKeys'],\n };\n\n if (!select.required) {\n return result;\n }\n\n const missing = select.multiple ? select.values.length === 0 : !select.value;\n\n if (!missing) {\n return result;\n }\n\n result.isValid = false;\n result.invalidKeys.push('valueMissing');\n return result;\n },\n },\n ];\n }\n\n override assumeInteractionOn = ['blur', 'input'];\n\n /** Whether the listbox is open. Prefer `show()` / `hide()` for animated transitions. */\n @property({ type: Boolean, reflect: true })\n open = false;\n\n /** Allow more than one option to be selected (tag display). */\n @property({ type: Boolean, reflect: true })\n multiple = false;\n\n /** Preferred listbox placement; may flip to stay in viewport. */\n @property({ reflect: true })\n placement: PkPopupPlacement = 'bottom-start';\n\n /** Gap between the trigger and listbox panel in px. */\n @property({ attribute: 'side-offset', type: Number })\n sideOffset = 4;\n\n /** Alias of `with-clear` — shows a clear control when the value is non-empty. */\n @property({ type: Boolean, reflect: true })\n clearable = false;\n\n /** Shows a clear control when the value is non-empty. */\n @property({ attribute: 'with-clear', type: Boolean })\n withClear = false;\n\n /** Marks the control invalid (visual + ARIA). */\n @property({ type: Boolean, reflect: true })\n invalid = false;\n\n /** Shared CP size scale for the closed trigger and list items. */\n @property({ reflect: true })\n size: PkSelectSize = 'default';\n\n /** When `full`, the trigger stretches to the host width. */\n @property({ reflect: true })\n width?: 'full';\n\n /** Prompt shown when nothing is selected. Empty by default. */\n @property()\n placeholder = '';\n\n /** Selected value (single-select). Empty string when cleared. */\n @property()\n value = '';\n\n /** Initial value before user interaction (form reset baseline). */\n @property({ attribute: 'default-value' })\n defaultValue = '';\n\n /** Selected values when `multiple` is set. Property-only (not an attribute). */\n @property({ type: Array, attribute: false })\n values: string[] = [];\n\n /** Initial multi values before user interaction. Property-only. */\n @property({ attribute: false })\n defaultValues: string[] = [];\n\n /** Accessible name for the trigger when no visible label is present. */\n @property({ attribute: 'aria-label' })\n ariaLabel: string | null = null;\n\n /**\n * Whether arrow-key focus loops from the last option back to the first (and vice versa).\n * Base UI `Select` has no equivalent; default: `false`.\n */\n @property({ attribute: 'loop-focus', type: Boolean })\n loopFocus = false;\n\n private readonly hasSlotController = new HasSlotController(this, 'start', 'end');\n\n private readonly listboxId = uniqueId('pk-select-listbox');\n private readonly triggerId = uniqueId('pk-select-trigger');\n\n @query('.trigger-start')\n private triggerStartElement?: HTMLSpanElement;\n\n @query('pk-popup')\n private popupElement!: PkPopup;\n\n @query('.control')\n private controlElement!: HTMLElement;\n\n @query('button.control, .control > button.trigger')\n private triggerButton?: HTMLButtonElement;\n\n @query('.value-input')\n override input!: HTMLInputElement;\n\n private get panelElement(): HTMLDivElement | null {\n return this.popupElement?.getContentElement() as HTMLDivElement | null ?? null;\n }\n\n private options: PkOption[] = [];\n\n @state()\n private highlightedIndex = 0;\n\n private dismissRegistered = false;\n private panelEventTarget: HTMLElement | null = null;\n private typeToSelect = createTypeToSelectHandler([], () => {});\n private optionsObserver?: MutationObserver;\n\n /** True while the shared popup-content exit animation is running. */\n @state()\n private closing = false;\n\n /** Gates `data-open` so enter motion starts after Floating UI places the panel. */\n @state()\n private panelAnimated = false;\n\n override connectedCallback(): void {\n this.refreshOptions();\n super.connectedCallback();\n this.addEventListener('pk-listbox-keydown', this.handleListboxKeyDownEvent as EventListener);\n this.addEventListener('keydown', this.onKeyDown);\n this.optionsObserver = new MutationObserver(() => {\n this.handleOptionsMutation({ render: true });\n });\n this.optionsObserver.observe(this, { childList: true, subtree: true });\n }\n\n override disconnectedCallback(): void {\n this.unbindPanelEvents();\n this.removeEventListener('pk-listbox-keydown', this.handleListboxKeyDownEvent as EventListener);\n this.removeEventListener('keydown', this.onKeyDown);\n this.optionsObserver?.disconnect();\n void this.closePanel('api');\n super.disconnectedCallback();\n }\n\n override updated(changed: PropertyValues): void {\n if (changed.has('value') || changed.has('values') || changed.has('multiple')) {\n this.applySelection();\n }\n\n if (changed.has('values') || changed.has('multiple')) {\n this.syncFormValue();\n }\n\n super.updated(changed);\n }\n\n private getOptionElements(): PkOption[] {\n const portaled = this.popupElement?.getContentElement()?.querySelectorAll('pk-option');\n\n if (portaled && portaled.length > 0) {\n return [...portaled];\n }\n\n return [...this.querySelectorAll('pk-option')];\n }\n\n private handleOptionsMutation = (options: { render?: boolean } = {}): void => {\n const next = this.getOptionElements();\n const changed = next.length !== this.options.length\n || next.some((option, index) => option !== this.options[index]);\n\n this.options = next;\n this.applySelection();\n this.updateTypeToSelect();\n\n if (options.render !== false && changed) {\n this.requestUpdate();\n }\n };\n\n private refreshOptions(): void {\n this.handleOptionsMutation({ render: false });\n }\n\n private syncOptions = (): void => {\n this.handleOptionsMutation({ render: true });\n };\n\n /** Portaled listbox options are outside the host tree — listen on the panel instead. */\n private bindPanelEvents(): void {\n const panel = this.panelElement;\n\n if (!panel || panel === this.panelEventTarget) {\n return;\n }\n\n this.unbindPanelEvents();\n this.panelEventTarget = panel;\n panel.addEventListener('pk-option-select', this.handleOptionSelect as EventListener);\n panel.addEventListener('pk-option-highlight', this.handleOptionHighlight as EventListener);\n panel.addEventListener('pk-listbox-keydown', this.handleListboxKeyDownEvent as EventListener);\n }\n\n private unbindPanelEvents(): void {\n if (!this.panelEventTarget) {\n return;\n }\n\n this.panelEventTarget.removeEventListener('pk-option-select', this.handleOptionSelect as EventListener);\n this.panelEventTarget.removeEventListener('pk-option-highlight', this.handleOptionHighlight as EventListener);\n this.panelEventTarget.removeEventListener('pk-listbox-keydown', this.handleListboxKeyDownEvent as EventListener);\n this.panelEventTarget = null;\n }\n\n protected override get validationTarget(): HTMLElement | undefined {\n return this.input ?? this.triggerButton ?? this.controlElement;\n }\n\n protected override getAriaMirrorTarget(): HTMLElement | null {\n return this.triggerButton ?? this.controlElement ?? null;\n }\n\n protected override syncFormValue(): void {\n if (!this.name) {\n this.setFormValue(null);\n return;\n }\n\n if (this.multiple) {\n const formData = new FormData();\n\n for (const item of this.values) {\n formData.append(this.name, item);\n }\n\n this.setFormValue(formData);\n return;\n }\n\n this.setFormValue(this.value || '');\n }\n\n protected override resetToDefaultValue(): void {\n if (this.multiple) {\n this.values = [...this.defaultValues];\n } else {\n this.value = this.defaultValue;\n }\n\n this.applySelection();\n }\n\n protected override restoreFormState(state: string | File | FormData | null): void {\n if (state instanceof FormData && this.name) {\n this.values = state.getAll(this.name).map(String);\n return;\n }\n\n if (typeof state === 'string') {\n this.value = state;\n }\n }\n\n private isOptionInHiddenGroup(option: PkOption): boolean {\n const group = option.closest('pk-option-group') as PkOptionGroup | null;\n\n return Boolean(group?.hidden);\n }\n\n private getVisibleOptions(): PkOption[] {\n return this.options.filter((option) => !this.isOptionInHiddenGroup(option));\n }\n\n private getEnabledVisibleOptions(): PkOption[] {\n return this.getVisibleOptions().filter((option) => !option.disabled);\n }\n\n private isSelected(value: string): boolean {\n if (this.multiple) {\n return this.values.includes(value);\n }\n\n return this.value === value;\n }\n\n private applySelection(): void {\n const visible = this.getVisibleOptions();\n\n for (const option of this.options) {\n option.selected = this.isSelected(option.value);\n option.hidden = !visible.includes(option);\n option.optionId = `${this.listboxId}-option-${option.value}`;\n }\n\n for (const group of this.querySelectorAll('pk-option-group')) {\n const groupOptions = [...group.querySelectorAll('pk-option')];\n group.hidden = groupOptions.length > 0 && groupOptions.every((option) => option.hidden);\n }\n\n syncListboxSeparators(this);\n\n this.syncValueInput();\n this.syncTriggerDecorations();\n\n if (this.open) {\n this.syncHighlight();\n }\n }\n\n private syncValueInput(): void {\n if (!this.input) {\n return;\n }\n\n if (this.multiple) {\n this.input.value = this.values.join(',');\n this.input.required = this.required;\n return;\n }\n\n this.input.value = this.value;\n this.input.required = this.required;\n }\n\n private getDisplayValue(): string {\n if (this.multiple) {\n const labels = this.getSelectedOptions()\n .map((option) => option.getLabel());\n\n return labels.length > 0 ? labels.join(', ') : this.placeholder;\n }\n\n const selected = this.options.find((option) => option.value === this.value);\n\n return selected?.getLabel() || this.placeholder;\n }\n\n private getSelectedOptions(): PkOption[] {\n return this.options.filter((option) => this.isSelected(option.value));\n }\n\n /**\n * Mirror the selected option's `slot=\"start\"` decorations into the trigger —\n * `pk-select` start/end decoration pattern.\n */\n private syncTriggerDecorations(): void {\n const container = this.triggerStartElement;\n\n if (!container || this.multiple) {\n return;\n }\n\n container.replaceChildren();\n container.classList.remove('has-decoration');\n\n const selected = this.options.find((option) => option.value === this.value);\n\n if (!selected) {\n return;\n }\n\n for (const element of selected.getStartElements()) {\n container.append(element.cloneNode(true));\n }\n\n container.classList.toggle('has-decoration', container.childElementCount > 0);\n }\n\n private hasSelection(): boolean {\n if (this.multiple) {\n return this.values.length > 0;\n }\n\n // Empty-string values are valid when an option declares them (e.g. \"Default\").\n return this.options.some((option) => option.value === this.value) || Boolean(this.value);\n }\n\n private syncHighlightedIndexToSelection(): void {\n if (this.multiple) {\n return;\n }\n\n const enabled = this.getEnabledVisibleOptions();\n\n if (enabled.length === 0) {\n return;\n }\n\n const selectedIndex = enabled.findIndex((option) => option.value === this.value);\n\n if (selectedIndex >= 0) {\n this.highlightedIndex = selectedIndex;\n }\n }\n\n private syncHighlight(): void {\n const enabled = this.getEnabledVisibleOptions();\n\n for (const option of this.options) {\n option.highlighted = false;\n option.focusIndex = -1;\n }\n\n if (enabled.length === 0) {\n this.highlightedIndex = 0;\n return;\n }\n\n if (this.highlightedIndex >= enabled.length) {\n this.highlightedIndex = 0;\n }\n\n const highlighted = enabled[this.highlightedIndex];\n\n if (highlighted && this.panelElement) {\n highlighted.highlighted = true;\n highlighted.focusIndex = 0;\n scrollIntoView(highlighted, this.panelElement, 'vertical', 'auto');\n }\n }\n\n private updateTypeToSelect(): void {\n this.typeToSelect = createTypeToSelectHandler(\n this.getEnabledVisibleOptions() as unknown as HTMLElement[],\n (index) => {\n this.highlightedIndex = index;\n this.syncHighlight();\n this.getEnabledVisibleOptions()[index]?.focusControl();\n },\n );\n }\n\n private togglePanel = (event?: Event): void => {\n event?.preventDefault();\n event?.stopPropagation();\n\n if (this.disabled || this.closing) {\n return;\n }\n\n if (this.open) {\n void this.closePanel('api');\n } else {\n void this.openPanel();\n }\n };\n\n private getPopupAnchor(): HTMLElement | null {\n return this.controlElement ?? null;\n }\n\n private getActiveDescendantId(): string | null {\n const enabled = this.getEnabledVisibleOptions();\n const highlighted = enabled[this.highlightedIndex];\n return highlighted?.optionId || null;\n }\n\n /** Opens the listbox. */\n async show(): Promise<void> {\n if (this.open || this.closing || this.disabled) {\n return;\n }\n\n await this.openPanel();\n }\n\n /** Closes the listbox. */\n async hide(source: PkOverlaySource = 'api'): Promise<void> {\n if (!this.open || this.closing) {\n return;\n }\n\n await this.closePanel(source);\n }\n\n private openPanel(): Promise<void> {\n const anchor = this.getPopupAnchor();\n\n if (!anchor || this.closing) {\n return Promise.resolve();\n }\n\n this.dispatchEvent(new PkShowEvent());\n this.closing = false;\n this.panelAnimated = false;\n this.open = true;\n this.popupElement.active = true;\n this.applySelection();\n this.syncHighlightedIndexToSelection();\n\n if (this.panelElement) {\n this.panelElement.hidden = false;\n // Seed side before first paint so enter keyframes pick a direction.\n syncPopupPlacementAnimation(this.panelElement, this.placement);\n }\n\n const anchorWidth = anchor.getBoundingClientRect().width;\n this.style.setProperty('--pk-select-anchor-width', `${anchorWidth}px`);\n this.registerDismissHandlers();\n this.syncHighlight();\n this.updateTypeToSelect();\n\n return this.updateComplete.then(async () => {\n const placement = await waitForPopupReposition(this.popupElement, this.placement, 300, {\n requireEvent: true,\n });\n\n if (this.panelElement) {\n syncPopupPlacementAnimation(this.panelElement, placement);\n }\n\n // Flip data-open after placement so the shared enter animation can run.\n this.panelAnimated = true;\n this.bindPanelEvents();\n this.refreshOptions();\n this.getEnabledVisibleOptions()[this.highlightedIndex]?.focusControl();\n\n this.dispatchEvent(new PkAfterShowEvent());\n this.dispatchEvent(new CustomEvent('pk-open-change', {\n detail: { open: true },\n bubbles: true,\n composed: true,\n }));\n });\n }\n\n private async closePanel(source: PkOverlaySource = 'unknown'): Promise<void> {\n if (!this.open || this.closing) {\n return;\n }\n\n const hideEvent = new PkHideEvent(source);\n\n if (!this.dispatchEvent(hideEvent)) {\n return;\n }\n\n this.typeToSelect.reset();\n this.unbindPanelEvents();\n this.unregisterDismissHandlers();\n\n this.closing = true;\n this.panelAnimated = false;\n await this.waitForExitAnimation();\n\n this.open = false;\n this.closing = false;\n this.panelAnimated = false;\n\n if (this.panelElement) {\n this.panelElement.hidden = true;\n this.panelElement.removeAttribute('data-side');\n }\n\n this.popupElement.active = false;\n\n this.dispatchEvent(new PkAfterHideEvent());\n this.dispatchEvent(new CustomEvent('pk-open-change', {\n detail: { open: false },\n bubbles: true,\n composed: true,\n }));\n\n if (this.shouldReturnFocusToTrigger(source)) {\n this.triggerButton?.focus({ preventScroll: true });\n } else {\n this.triggerButton?.blur();\n }\n }\n\n private waitForExitAnimation(): Promise<void> {\n const panel = this.panelElement;\n\n if (!panel) {\n return Promise.resolve();\n }\n\n return new Promise((resolve) => {\n let settled = false;\n\n const finish = (): void => {\n if (settled) {\n return;\n }\n\n settled = true;\n panel.removeEventListener('animationend', onAnimationEnd);\n window.clearTimeout(fallback);\n panel.classList.remove('closing');\n resolve();\n };\n\n const onAnimationEnd = (event: AnimationEvent): void => {\n if (event.target === panel && event.animationName.startsWith('pk-popup-content-out')) {\n finish();\n }\n };\n\n panel.classList.add('closing');\n panel.addEventListener('animationend', onAnimationEnd);\n const fallback = window.setTimeout(finish, 150);\n });\n }\n\n /** Base UI skips return focus on outside press — avoids an unwanted focus ring after light dismiss. */\n private shouldReturnFocusToTrigger(source: PkOverlaySource): boolean {\n return source !== 'light-dismiss' && source !== 'pointer-dismiss';\n }\n\n private registerDismissHandlers(): void {\n registerDismissible(this);\n this.dismissRegistered = true;\n document.addEventListener('pointerdown', this.onDocumentPointerDown, true);\n document.addEventListener('keydown', this.onDocumentKeyDown, true);\n }\n\n private unregisterDismissHandlers(): void {\n if (this.dismissRegistered) {\n unregisterDismissible(this);\n this.dismissRegistered = false;\n }\n\n document.removeEventListener('pointerdown', this.onDocumentPointerDown, true);\n document.removeEventListener('keydown', this.onDocumentKeyDown, true);\n }\n\n private onDocumentPointerDown = (event: PointerEvent): void => {\n if (this.isPointerInside(event)) {\n return;\n }\n\n void this.closePanel('light-dismiss');\n };\n\n private isPointerInside(event: PointerEvent): boolean {\n return isPointerInsideOverlay(event, {\n anchor: this.getPopupAnchor(),\n panel: this.panelElement,\n });\n };\n\n private onDocumentKeyDown = (event: KeyboardEvent): void => {\n if (!this.open) {\n return;\n }\n\n if (event.key === 'Escape') {\n if (!isTopDismissible(this)) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n void this.closePanel('escape');\n return;\n }\n\n const isListboxKey = LISTBOX_NAVIGATION_KEYS.has(event.key) || isListboxTypeToSelectKey(event);\n\n if (!isListboxKey) {\n return;\n }\n\n if (!isEventInsideOverlay(event, {\n anchor: this.getPopupAnchor(),\n panel: this.panelElement,\n })) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n this.onListboxKeyDown(event);\n };\n\n private handleOptionSelect = (event: CustomEvent<{ value: string }>): void => {\n const { value } = event.detail;\n\n if (this.multiple) {\n this.values = this.values.includes(value)\n ? this.values.filter((v) => v !== value)\n : [...this.values, value];\n } else {\n this.value = value;\n void this.closePanel('api');\n }\n\n this.applySelection();\n this.emitValueChange();\n };\n\n private handleOptionHighlight = (event: CustomEvent<{ value: string }>): void => {\n if (!this.open) {\n return;\n }\n\n const enabled = this.getEnabledVisibleOptions();\n const index = enabled.findIndex((option) => option.value === event.detail.value);\n\n if (index === -1 || index === this.highlightedIndex) {\n return;\n }\n\n this.highlightedIndex = index;\n this.syncHighlight();\n };\n\n private removeTag(value: string, event: Event): void {\n event.preventDefault();\n event.stopPropagation();\n this.values = this.values.filter((item) => item !== value);\n this.applySelection();\n this.emitValueChange();\n }\n\n private handleClear(event: Event): void {\n event.preventDefault();\n event.stopPropagation();\n\n if (this.multiple) {\n this.values = [];\n } else {\n this.value = '';\n }\n\n this.applySelection();\n this.dispatchEvent(new PkClearEvent());\n this.emitValueChange();\n this.triggerButton?.focus();\n }\n\n private emitValueChange(): void {\n this.dispatchEvent(new CustomEvent('pk-change', {\n detail: {\n value: this.multiple ? [...this.values] : this.value,\n },\n bubbles: true,\n composed: true,\n }));\n\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n }\n\n private onKeyDown = (event: KeyboardEvent): void => {\n if (!this.open) {\n if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n void this.openPanel();\n }\n\n return;\n }\n\n this.onListboxKeyDown(event);\n };\n\n private onListboxKeyDown(event: KeyboardEvent): void {\n const enabled = this.getEnabledVisibleOptions();\n\n this.highlightedIndex = handleListboxKeyDown(event, {\n items: enabled as unknown as HTMLElement[],\n currentIndex: this.highlightedIndex,\n multiselect: this.multiple,\n loop: this.loopFocus,\n onSelect: (index) => {\n this.highlightedIndex = index;\n this.syncHighlight();\n },\n focusItem: (index) => {\n enabled[index]?.focusControl();\n },\n onClose: () => { void this.closePanel('escape'); },\n });\n\n if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {\n this.typeToSelect.handleKey(event);\n }\n }\n\n private handleListboxKeyDownEvent = (event: CustomEvent<{ keyboardEvent: KeyboardEvent }>): void => {\n if (!this.open) {\n return;\n }\n\n this.onListboxKeyDown(event.detail.keyboardEvent);\n };\n\n private renderTags() {\n return this.getSelectedOptions().map((option) => html`\n <span class=\"tag\" part=\"tag\">\n <span class=\"tag-label\">${option.getLabel()}</span>\n <button\n type=\"button\"\n class=\"tag-remove\"\n part=\"tag-remove\"\n aria-label=${`Remove ${option.getLabel()}`}\n @click=${(event: Event) => this.removeTag(option.value, event)}\n >\n ×\n </button>\n </span>\n `);\n }\n\n private renderChevronIcon() {\n return html`\n <span class=\"icon\" aria-hidden=\"true\">${unsafeSVG(CHEVRON_ICON)}</span>\n `;\n }\n\n private renderHostDecorationSlot(name: 'start' | 'end') {\n if (!this.hasSlotController.test(name)) {\n return html`<slot name=${name} hidden></slot>`;\n }\n\n const className = name === 'start' ? 'control-start' : 'control-end';\n\n return html`\n <span part=${name} class=${className}>\n <slot name=${name}></slot>\n </span>\n `;\n }\n\n override render() {\n const displayValue = this.getDisplayValue();\n const isPlaceholder = !this.hasSelection();\n const showClear = (this.clearable || this.withClear) && this.hasSelection() && !this.disabled;\n\n return html`\n <input\n class=\"value-input\"\n part=\"value-input\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n .value=${this.multiple ? this.values.join(',') : this.value}\n ?required=${this.required}\n @input=${() => this.updateValidity()}\n />\n ${this.multiple\n ? html`\n <div\n part=\"control\"\n class=${classMap({\n control: true,\n 'is-disabled': this.disabled,\n })}\n >\n ${this.renderHostDecorationSlot('start')}\n ${this.hasSelection()\n ? html`\n <div class=\"tags\" part=\"tags\">${this.renderTags()}</div>\n ${showClear\n ? html`\n <button\n type=\"button\"\n class=\"clear-button\"\n part=\"clear-button\"\n aria-label=\"Clear selection\"\n @click=${this.handleClear}\n >\n ×\n </button>\n `\n : nothing}\n `\n : html`\n <button\n part=\"trigger\"\n type=\"button\"\n class=\"trigger\"\n id=${this.triggerId}\n ?disabled=${this.disabled}\n aria-label=${this.ariaLabel ?? nothing}\n aria-haspopup=\"listbox\"\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-controls=${this.listboxId}\n @click=${this.togglePanel}\n >\n <span class=\"value is-placeholder\">${this.placeholder}</span>\n </button>\n `}\n ${this.renderHostDecorationSlot('end')}\n <button\n type=\"button\"\n class=\"trigger trigger--icon\"\n part=\"trigger expand-button\"\n aria-label=\"Toggle options\"\n ?disabled=${this.disabled}\n @click=${this.togglePanel}\n >\n ${this.renderChevronIcon()}\n </button>\n </div>\n `\n : html`\n <button\n part=\"control\"\n type=\"button\"\n class=${classMap({\n control: true,\n 'is-disabled': this.disabled,\n })}\n id=${this.triggerId}\n ?disabled=${this.disabled}\n aria-label=${this.ariaLabel ?? nothing}\n aria-haspopup=\"listbox\"\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-controls=${this.listboxId}\n @click=${this.togglePanel}\n >\n ${this.renderHostDecorationSlot('start')}\n <span part=\"trigger-start\" class=\"trigger-start\"></span>\n <span\n class=${classMap({\n value: true,\n 'is-placeholder': isPlaceholder,\n })}\n >${displayValue}</span>\n ${showClear\n ? html`\n <span\n class=\"clear-button\"\n part=\"clear-button\"\n role=\"button\"\n tabindex=\"-1\"\n aria-label=\"Clear selection\"\n @click=${this.handleClear}\n >\n ×\n </span>\n `\n : nothing}\n ${this.renderHostDecorationSlot('end')}\n ${this.renderChevronIcon()}\n </button>\n `}\n <pk-popup\n .anchor=${this.getPopupAnchor() ?? ''}\n .placement=${this.placement}\n .distance=${this.sideOffset}\n .sync=${'width'}\n flip\n shift\n >\n <div\n part=\"panel\"\n class=${classMap({\n panel: true,\n 'pk-popup-content': true,\n closing: this.closing,\n })}\n id=${this.listboxId}\n role=\"listbox\"\n aria-multiselectable=${this.multiple ? 'true' : 'false'}\n tabindex=\"-1\"\n ?hidden=${!this.open && !this.closing}\n data-open=${this.panelAnimated && !this.closing ? '' : nothing}\n @slotchange=${this.syncOptions}\n >\n <slot></slot>\n </div>\n </pk-popup>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-select': PkSelect;\n }\n}\n"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"pk-separator-N-VyjYE6.js","names":[],"sources":["../../src/components/separator/pk-separator.styles.ts","../../src/components/separator/pk-separator.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * Default block rhythm lives on the inner `.line`, not `:host` margin.\n *\n * Outer author styles (Tailwind preflight `* { margin: 0 }`, utilities, etc.) win\n * over shadow `:host` margins — so host margin cannot be the spacing mechanism\n * when kit sits next to a reset. Internal shadow margins are insulated.\n */\nexport const pkSeparatorStyles = css`\n @layer pk-component {\n :host {\n display: block;\n flex-shrink: 0;\n margin: 0;\n padding: 0;\n border: 0;\n box-sizing: border-box;\n background: transparent;\n }\n\n .line {\n display: block;\n margin: 0;\n padding: 0;\n border: 0;\n box-sizing: border-box;\n background: var(--pk-color-slate-200);\n }\n\n :host([orientation='horizontal']) .line {\n width: 100%;\n height: 1px;\n margin-block: 0.25rem;\n }\n\n :host([orientation='vertical']) {\n display: inline-block;\n align-self: stretch;\n width: auto;\n height: 100%;\n }\n\n :host([orientation='vertical']) .line {\n width: 1px;\n height: 100%;\n margin-inline: 0.25rem;\n }\n\n /* CE :host { display } otherwise wins over the UA [hidden] rule. */\n :host([hidden]) {\n display: none !important;\n }\n }\n`;\n","import { html } from 'lit';\nimport { customElement, property } from '../../decorators.js';\nimport type { PropertyValues } from 'lit';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { pkSeparatorStyles } from './pk-separator.styles.js';\n\nexport type PkSeparatorOrientation = 'horizontal' | 'vertical';\n\n/**\n * Visual divider between related content.\n *\n * Default rhythm uses an inner `.line` (not `:host` margin) so outer resets\n * like Tailwind preflight cannot zero the spacing.\n *\n * @csspart base - Painted rule (inner line)\n */\n@customElement('pk-separator')\nexport class PkSeparator extends PkElement {\n static override styles = pkSeparatorStyles;\n\n @property({ reflect: true })\n orientation: PkSeparatorOrientation = 'horizontal';\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.setAttribute('role', 'separator');\n this.syncAriaOrientation();\n }\n\n override updated(changed: PropertyValues): void {\n super.updated(changed);\n\n if (changed.has('orientation')) {\n this.syncAriaOrientation();\n }\n }\n\n private syncAriaOrientation(): void {\n this.setAttribute('aria-orientation', this.orientation);\n }\n\n override render() {\n // Paint + default margin live inside the shadow — insulated from outer `* { margin: 0 }`.\n return html`<div class=\"line\" part=\"base\"></div>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-separator': PkSeparator;\n }\n}\n"],"mappings":";;;;;;;;;;AASA,IAAa,oBAAoB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACS7B,IAAA,cAAA,MAAM,oBAAoB,UAAU;;;qBAID;;;gBAHb;;CAKzB,oBAAmC;AAC/B,QAAM,mBAAmB;AACzB,OAAK,aAAa,QAAQ,YAAY;AACtC,OAAK,qBAAqB;;CAG9B,QAAiB,SAA+B;AAC5C,QAAM,QAAQ,QAAQ;AAEtB,MAAI,QAAQ,IAAI,cAAc,CAC1B,MAAK,qBAAqB;;CAIlC,sBAAoC;AAChC,OAAK,aAAa,oBAAoB,KAAK,YAAY;;CAG3D,SAAkB;AAEd,SAAO,IAAI;;;YAvBd,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,YAAA,WAAA,eAAA,KAAA,EAAA;0BAJ/B,cAAc,eAAe,CAAA,EAAA,YAAA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"pk-spinner-DweuYJ_Z.js","names":[],"sources":["../../src/components/spinner/pk-spinner.styles.ts","../../src/components/spinner/pk-spinner.ts"],"sourcesContent":["import { css } from 'lit';\n\nimport { hostDisplayInlineBlock } from '../../base/styles.js';\n\nexport const pkSpinnerStyles = [\n hostDisplayInlineBlock,\n css`\n @layer pk-component {\n :host {\n display: block;\n box-sizing: border-box;\n }\n\n :host([centered]) {\n position: absolute;\n top: 50%;\n left: 50%;\n display: block;\n width: fit-content;\n height: fit-content;\n margin: 0;\n transform: translate(-50%, -50%);\n }\n\n .spinner {\n display: block;\n box-sizing: border-box;\n margin-inline: auto;\n border-style: solid;\n border-bottom-color: transparent;\n border-left-color: transparent;\n border-radius: 50%;\n animation: pk-spinner-spin 0.5s linear infinite;\n }\n\n /* Sizes */\n :host([size='xxs']) .spinner {\n width: 0.75rem;\n height: 0.75rem;\n border-width: 1px;\n }\n\n :host([size='xs']) .spinner {\n width: 1rem;\n height: 1rem;\n border-width: 2px;\n }\n\n :host([size='sm']) .spinner,\n :host(:not([size])) .spinner {\n width: 1.5rem;\n height: 1.5rem;\n border-width: 2px;\n }\n\n :host([size='md']) .spinner {\n width: 2rem;\n height: 2rem;\n border-width: 2px;\n }\n\n :host([size='lg']) .spinner {\n width: 3rem;\n height: 3rem;\n border-width: 2px;\n }\n\n :host([size='xl']) .spinner {\n width: 4rem;\n height: 4rem;\n border-width: 2px;\n }\n\n /* Variants — matched to button loading contrast */\n :host([variant='default']:not([tone])) .spinner {\n border-top-color: var(--pk-color-red-500);\n border-right-color: var(--pk-color-red-500);\n }\n\n :host([variant='primary']:not([tone])) .spinner,\n :host([variant='secondary']:not([tone])) .spinner {\n border-top-color: var(--pk-color-white);\n border-right-color: var(--pk-color-white);\n }\n\n :host([variant='dashed']:not([tone])) .spinner,\n :host([variant='outline']:not([tone])) .spinner,\n :host([variant='transparent']:not([tone])) .spinner {\n border-top-color: var(--pk-color-gray-700);\n border-right-color: var(--pk-color-gray-700);\n }\n\n /* Standalone tone overrides */\n :host([tone='sky']) .spinner {\n border-top-color: var(--pk-color-sky-600);\n border-right-color: var(--pk-color-sky-600);\n }\n\n :host([tone='emerald']) .spinner {\n border-top-color: var(--pk-color-emerald-600);\n border-right-color: var(--pk-color-emerald-600);\n }\n\n :host([tone='violet']) .spinner {\n border-top-color: var(--pk-color-violet-600);\n border-right-color: var(--pk-color-violet-600);\n }\n\n :host([tone='amber']) .spinner {\n border-top-color: var(--pk-color-amber-500);\n border-right-color: var(--pk-color-amber-500);\n }\n\n @keyframes pk-spinner-spin {\n to {\n transform: rotate(360deg);\n }\n }\n }\n `,\n];\n","import { html } from 'lit';\nimport { customElement, property } from '../../decorators.js';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { pkSpinnerStyles } from './pk-spinner.styles.js';\n\nexport type PkSpinnerVariant =\n | 'default'\n | 'primary'\n | 'secondary'\n | 'dashed'\n | 'outline'\n | 'transparent';\n\nexport type PkSpinnerSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport type PkSpinnerTone = 'sky' | 'emerald' | 'violet' | 'amber';\n\n/**\n * Loading indicator — mirrors plugin-kit-ui / plugin-kit-react Spinner.\n *\n * @csspart base - The spinning ring element\n */\n@customElement('pk-spinner')\nexport class PkSpinner extends PkElement {\n static override styles = pkSpinnerStyles;\n\n @property({ reflect: true })\n variant: PkSpinnerVariant = 'default';\n\n @property({ reflect: true })\n size: PkSpinnerSize = 'sm';\n\n @property({ reflect: true })\n tone?: PkSpinnerTone;\n\n @property({ type: Boolean, reflect: true })\n centered = false;\n\n override render() {\n return html`\n <div part=\"base\" class=\"spinner\" aria-hidden=\"true\"></div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-spinner': PkSpinner;\n }\n}\n"],"mappings":";;;AAIA,IAAa,kBAAkB,CAC3B,wBACA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAkHN;;;AChGM,IAAA,YAAA,MAAM,kBAAkB,UAAU;;;iBAIT;cAGN;kBAMX;;;gBAZc;;CAczB,SAAkB;AACd,SAAO,IAAI;;;;;YAbd,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,UAAA,WAAA,WAAA,KAAA,EAAA;YAG3B,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,UAAA,WAAA,QAAA,KAAA,EAAA;YAG3B,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,UAAA,WAAA,QAAA,KAAA,EAAA;YAG3B,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,UAAA,WAAA,YAAA,KAAA,EAAA;wBAb9C,cAAc,aAAa,CAAA,EAAA,UAAA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"pk-status-BehQARDv.js","names":[],"sources":["../../src/components/status/pk-status.styles.ts","../../src/components/status/pk-status.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkStatusStyles = css`\n @layer pk-component {\n :host {\n display: inline-block;\n flex-shrink: 0;\n width: 0.75rem;\n height: 0.75rem;\n border-radius: 9999px;\n vertical-align: middle;\n }\n\n .status {\n display: block;\n width: 100%;\n height: 100%;\n border-radius: inherit;\n }\n\n :host([status='all']) .status { background: linear-gradient(60deg, #184cef, #e5422b); }\n :host([status='on']) .status,\n :host([status='live']) .status,\n :host([status='active']) .status,\n :host([status='enabled']) .status,\n :host([status='teal']) .status,\n :host([status='turquoise']) .status { background: var(--pk-color-teal-550); }\n :host([status='off']) .status,\n :host([status='suspended']) .status,\n :host([status='expired']) .status,\n :host([status='red']) .status { background: var(--pk-color-red-600); }\n :host([status='warning']) .status { background: var(--pk-color-amber-100); }\n :host([status='pending']) .status,\n :host([status='orange']) .status { background: var(--pk-color-orange-400); }\n :host([status='amber']) .status { background: var(--pk-color-amber-500); }\n :host([status='yellow']) .status { background: var(--pk-color-yellow-500); }\n :host([status='lime']) .status { background: var(--pk-color-lime-500); }\n :host([status='green']) .status { background: var(--pk-color-green-600); }\n :host([status='emerald']) .status { background: var(--pk-color-emerald-500); }\n :host([status='cyan']) .status { background: var(--pk-color-cyan-500); }\n :host([status='sky']) .status { background: var(--pk-color-sky-500); }\n :host([status='blue']) .status { background: var(--pk-color-blue-600); }\n :host([status='indigo']) .status { background: var(--pk-color-indigo-500); }\n :host([status='violet']) .status { background: var(--pk-color-violet-500); }\n :host([status='purple']) .status { background: var(--pk-color-purple-500); }\n :host([status='fuchsia']) .status { background: var(--pk-color-fuchsia-500); }\n :host([status='pink']) .status { background: var(--pk-color-pink-500); }\n :host([status='rose']) .status { background: var(--pk-color-rose-500); }\n :host([status='light']) .status { background: var(--pk-color-gray-100); }\n :host([status='gray']) .status,\n :host([status='grey']) .status { background: var(--pk-color-gray-300); }\n :host([status='white']) .status { background: var(--pk-color-white); }\n :host([status='black']) .status { background: var(--pk-color-gray-800); }\n :host([status='disabled']) .status,\n :host([status='inactive']) .status {\n /* Ring color is overridable for inverted / selected surfaces. */\n background: transparent;\n box-shadow: inset 0 0 0 2px var(--pk-status-ring, var(--pk-color-gray-500));\n }\n }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property } from '../../decorators.js';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { pkStatusStyles } from './pk-status.styles.js';\n\nexport type PkStatusVariant =\n | 'all' | 'on' | 'live' | 'active' | 'enabled' | 'off' | 'suspended' | 'expired'\n | 'warning' | 'pending' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green'\n | 'emerald' | 'teal' | 'turquoise' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet'\n | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'light' | 'gray' | 'grey' | 'white'\n | 'black' | 'disabled' | 'inactive';\n\n/**\n * Compact semantic status indicator dot.\n *\n * @csspart base - Status dot element\n */\n@customElement('pk-status')\nexport class PkStatus extends PkElement {\n static override styles = pkStatusStyles;\n\n @property({ reflect: true })\n status: PkStatusVariant = 'on';\n\n @property({ attribute: 'aria-label' })\n ariaLabel: string | null = null;\n\n override render() {\n return html`\n <span\n part=\"base\"\n class=\"status\"\n role=\"status\"\n aria-label=${this.ariaLabel ?? nothing}\n ></span>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-status': PkStatus;\n }\n}\n"],"mappings":";;;AAEA,IAAa,iBAAiB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACiB1B,IAAA,WAAA,MAAM,iBAAiB,UAAU;;;gBAIV;mBAGC;;;gBANF;;CAQzB,SAAkB;AACd,SAAO,IAAI;;;;;6BAKU,KAAK,aAAa,QAAQ;;;;;YAZlD,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,SAAA,WAAA,UAAA,KAAA,EAAA;YAG3B,SAAS,EAAE,WAAW,cAAc,CAAC,CAAA,EAAA,SAAA,WAAA,aAAA,KAAA,EAAA;uBAPzC,cAAc,YAAY,CAAA,EAAA,SAAA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"pk-tab-CTloD18e.js","names":[],"sources":["../../src/components/tabs/pk-tab-base.ts","../../src/components/tabs/pk-tab.styles.ts","../../src/components/tabs/pk-tab.ts"],"sourcesContent":["import { html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport { PkElement } from '../../base/pk-element.js';\n\n/** Shared tab trigger behaviour for all tab variants. */\nexport class PkTabBase extends PkElement {\n @property()\n value = '';\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n @property({ type: Boolean, reflect: true })\n selected = false;\n\n @property({ type: Number, attribute: 'focus-index' })\n focusIndex = -1;\n\n @property()\n panelId?: string;\n\n focusControl(): void {\n this.shadowRoot?.querySelector<HTMLButtonElement>('.trigger')?.focus();\n }\n\n protected handleClick(): void {\n if (this.disabled) {\n return;\n }\n\n this.dispatchEvent(new CustomEvent('pk-tab-select', {\n detail: { value: this.value },\n bubbles: true,\n composed: true,\n }));\n }\n\n protected handleKeyDown(event: KeyboardEvent): void {\n this.dispatchEvent(new CustomEvent('pk-tab-keydown', {\n detail: { event, value: this.value },\n bubbles: true,\n composed: true,\n }));\n }\n\n protected renderTrigger(className: string) {\n return html`\n <button\n part=\"trigger\"\n type=\"button\"\n class=${className}\n role=\"tab\"\n ?disabled=${this.disabled}\n aria-disabled=${this.disabled ? 'true' : nothing}\n aria-selected=${this.selected ? 'true' : 'false'}\n tabindex=${this.focusIndex}\n aria-controls=${this.panelId ?? nothing}\n @click=${this.handleClick}\n @keydown=${this.handleKeyDown}\n >\n <span part=\"icon\" class=\"icon\">\n <slot name=\"icon\"></slot>\n </span>\n <span part=\"label\" class=\"label\">\n <slot></slot>\n </span>\n <span part=\"status\" class=\"status\">\n <slot name=\"status\"></slot>\n </span>\n </button>\n `;\n }\n}\n","import { css } from 'lit';\n\nexport const pkTabStyles = css`\n @layer pk-component {\n :host {\n /* Size to the shadow trigger. Prefer flex-start so a short list line\n * (or host utilities like Tailwind items-center) cannot stretch the\n * host shorter than the trigger and clip the modal active underline. */\n display: inline-flex;\n flex-shrink: 0;\n align-self: flex-start;\n height: auto;\n min-height: auto;\n align-items: stretch;\n /* Pin type metrics for slotted labels — vars cascade from pk-tabs. */\n font-family: var(--pk-font-family);\n font-size: var(--pk-tabs-trigger-font-size, 13px);\n font-weight: var(--pk-tabs-trigger-font-weight, 400);\n line-height: var(--pk-tabs-trigger-line-height, 1.4);\n color: var(--pk-tabs-trigger-color, inherit);\n }\n\n .trigger {\n position: relative;\n display: var(--pk-tabs-trigger-display, inline-flex);\n align-items: center;\n justify-content: var(--pk-tabs-trigger-justify, center);\n gap: var(--pk-tabs-trigger-gap, 0.5rem);\n width: var(--pk-tabs-trigger-width, auto);\n min-height: var(--pk-tabs-trigger-min-height, 2rem);\n padding: var(--pk-tabs-trigger-padding-block, 0.375rem)\n var(--pk-tabs-trigger-padding-inline, 0.75rem);\n border: 0;\n border-top: var(--pk-tabs-trigger-border-top, 0 solid transparent);\n border-radius: var(--pk-tabs-trigger-radius, var(--pk-radius-sm));\n background: transparent;\n color: inherit;\n font: inherit;\n font-family: var(--pk-font-family);\n font-size: var(--pk-tabs-trigger-font-size, 13px);\n font-weight: var(--pk-tabs-trigger-font-weight, 400);\n line-height: var(--pk-tabs-trigger-line-height, 1.4);\n text-align: var(--pk-tabs-trigger-text-align, center);\n text-transform: var(--pk-tabs-trigger-text-transform, none);\n white-space: nowrap;\n cursor: pointer;\n outline: none;\n box-shadow: none;\n box-sizing: border-box;\n transition: background-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;\n }\n\n /* Collapse optional icon/status lanes when nothing is slotted. */\n .icon,\n .status {\n display: none;\n flex: none;\n align-items: center;\n justify-content: center;\n line-height: 0;\n }\n\n .icon:has(::slotted(*)),\n .status:has(::slotted(*)) {\n display: inline-flex;\n }\n\n .icon {\n width: var(--pk-tabs-trigger-icon-size, 1.125rem);\n height: var(--pk-tabs-trigger-icon-size, 1.125rem);\n font-size: var(--pk-tabs-trigger-icon-size, 1.125rem);\n color: var(--pk-tabs-trigger-icon-color, inherit);\n }\n\n .icon ::slotted(*) {\n display: block;\n max-width: 100%;\n max-height: 100%;\n /* Kill pk-icon text-baseline nudge so logos/icons sit on the flex midline. */\n vertical-align: 0;\n }\n\n .label {\n display: inline-flex;\n flex: var(--pk-tabs-trigger-label-flex, 0 1 auto);\n align-items: center;\n min-width: 0;\n line-height: inherit;\n }\n\n .status {\n margin-inline-start: var(--pk-tabs-trigger-status-margin, 0);\n color: var(--pk-tabs-trigger-status-color, inherit);\n }\n\n .trigger:hover:not(:disabled):not([aria-disabled='true']):not([aria-selected='true']) {\n border-top-color: transparent;\n background: var(--pk-tabs-trigger-hover-bg, rgb(255 255 255 / 0.7));\n color: var(--pk-tabs-trigger-hover-color, var(--pk-color-gray-700));\n }\n\n /*\n * Focus ring is only for :focus-visible on a non-selected tab (manual\n * activation). Selected + focus-visible must NOT draw a ring — active\n * chrome is the underline (mouse) or is replaced by the modal focus box\n * via --pk-tabs-trigger-focus-selected-shadow when set.\n */\n .trigger:focus-visible:not([aria-selected='true']) {\n box-shadow: inset 0 0 0 2px var(--pk-color-sky-600);\n }\n\n .trigger:disabled,\n .trigger[aria-disabled='true'] {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n .trigger[aria-selected='true'],\n :host([selected]) .trigger {\n border-top: var(--pk-tabs-trigger-selected-border-top, var(--pk-tabs-trigger-border-top, 0 solid transparent));\n border-radius: var(--pk-tabs-trigger-selected-radius, var(--pk-radius-sm));\n background: var(--pk-tabs-trigger-selected-bg, var(--pk-color-white));\n color: var(--pk-tabs-trigger-selected-color, var(--pk-color-gray-800));\n box-shadow: var(--pk-tabs-trigger-selected-shadow, 0 1px 2px rgba(31, 41, 51, 0.12));\n }\n\n .trigger[aria-selected='true']:hover,\n :host([selected]) .trigger:hover {\n background: var(--pk-tabs-trigger-selected-hover-bg, var(--pk-tabs-trigger-selected-bg, var(--pk-color-white)));\n color: var(--pk-tabs-trigger-selected-hover-color, var(--pk-tabs-trigger-selected-color, var(--pk-color-gray-800)));\n }\n\n /* screen3: keyboard focus on the active tab → full inset box, no underline. */\n .trigger[aria-selected='true']:focus-visible,\n :host([selected]) .trigger:focus-visible {\n box-shadow: var(\n --pk-tabs-trigger-focus-selected-shadow,\n var(--pk-tabs-trigger-selected-shadow, 0 0 #0000)\n );\n }\n\n .trigger[aria-selected='true']:focus-visible::after,\n :host([selected]) .trigger:focus-visible::after {\n height: var(--pk-tabs-trigger-focus-selected-underline-height, var(--pk-tabs-trigger-underline-height, 0));\n }\n\n .trigger[aria-selected='true']::after,\n :host([selected]) .trigger::after {\n content: '';\n position: absolute;\n right: var(--pk-tabs-trigger-underline-inset, 15px);\n bottom: 0;\n left: var(--pk-tabs-trigger-underline-inset, 15px);\n height: var(--pk-tabs-trigger-underline-height, 0);\n /* Keep the bar above the list hairline when both meet at the clip edge. */\n z-index: 1;\n background: var(--pk-color-sky-600);\n pointer-events: none;\n }\n\n /*\n * Validation error chrome (v1 ModalTabs / PaneTabs text-error).\n * Host sets data-has-errors; light-DOM text-* cannot pierce the trigger.\n */\n :host([data-has-errors]) {\n --pk-tabs-trigger-color: var(--pk-color-error, #d81f23);\n --pk-tabs-trigger-hover-color: var(--pk-color-rose-700, #be123c);\n --pk-tabs-trigger-selected-color: var(--pk-color-error, #d81f23);\n --pk-tabs-trigger-selected-hover-color: var(--pk-color-rose-700, #be123c);\n --pk-tabs-trigger-icon-color: inherit;\n --pk-tabs-trigger-status-color: inherit;\n }\n }\n`;\n","import { customElement } from '../../decorators.js';\n\nimport { PkTabBase } from './pk-tab-base.js';\nimport { pkTabStyles } from './pk-tab.styles.js';\n\n/**\n * Tab trigger — use inside `pk-tabs` with `slot=\"nav\"`.\n *\n * @slot - Tab label\n * @slot icon - Optional leading content (icon, logo, etc.)\n * @slot status - Optional trailing content (status dot, badge, etc.)\n *\n * @csspart trigger - Tab button\n * @csspart icon - Icon slot wrapper (hidden when empty)\n * @csspart label - Label slot wrapper\n * @csspart status - Status slot wrapper (hidden when empty)\n */\n@customElement('pk-tab')\nexport class PkTab extends PkTabBase {\n static override styles = pkTabStyles;\n\n override render() {\n return this.renderTrigger('trigger pk-tabs__trigger');\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-tab': PkTab;\n }\n}\n"],"mappings":";;;;;AAMA,IAAa,YAAb,cAA+B,UAAU;;;eAE7B;kBAGG;kBAGA;oBAGE;;CAKb,eAAqB;AACjB,OAAK,YAAY,cAAiC,WAAW,EAAE,OAAO;;CAG1E,cAA8B;AAC1B,MAAI,KAAK,SACL;AAGJ,OAAK,cAAc,IAAI,YAAY,iBAAiB;GAChD,QAAQ,EAAE,OAAO,KAAK,OAAO;GAC7B,SAAS;GACT,UAAU;GACb,CAAC,CAAC;;CAGP,cAAwB,OAA4B;AAChD,OAAK,cAAc,IAAI,YAAY,kBAAkB;GACjD,QAAQ;IAAE;IAAO,OAAO,KAAK;IAAO;GACpC,SAAS;GACT,UAAU;GACb,CAAC,CAAC;;CAGP,cAAwB,WAAmB;AACvC,SAAO,IAAI;;;;wBAIK,UAAU;;4BAEN,KAAK,SAAS;gCACV,KAAK,WAAW,SAAS,QAAQ;gCACjC,KAAK,WAAW,SAAS,QAAQ;2BACtC,KAAK,WAAW;gCACX,KAAK,WAAW,QAAQ;yBAC/B,KAAK,YAAY;2BACf,KAAK,cAAc;;;;;;;;;;;;;;;YApDzC,UAAU,CAAA,EAAA,UAAA,WAAA,SAAA,KAAA,EAAA;YAGV,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,UAAA,WAAA,YAAA,KAAA,EAAA;YAG1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,UAAA,WAAA,YAAA,KAAA,EAAA;YAG1C,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAe,CAAC,CAAA,EAAA,UAAA,WAAA,cAAA,KAAA,EAAA;YAGpD,UAAU,CAAA,EAAA,UAAA,WAAA,WAAA,KAAA,EAAA;;;ACjBf,IAAa,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACgBvB,IAAA,QAAA,MAAM,cAAc,UAAU;;gBACR;;CAEzB,SAAkB;AACd,SAAO,KAAK,cAAc,2BAA2B;;;oBAL5D,cAAc,SAAS,CAAA,EAAA,MAAA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"pk-tab-heading-Cjcgebxn.js","names":[],"sources":["../../src/components/tabs/pk-tab-heading.styles.ts","../../src/components/tabs/pk-tab-heading.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkTabHeadingStyles = css`\n @layer pk-component {\n :host {\n display: block;\n flex-shrink: 0;\n width: 100%;\n }\n\n .heading {\n margin: 0;\n padding: var(--pk-tabs-heading-padding, 0.75rem 0.5rem 0.375rem);\n color: var(--pk-tabs-heading-color, var(--pk-color-gray-400));\n font-family: var(--pk-font-family);\n font-size: var(--pk-tabs-heading-font-size, 11px);\n font-weight: var(--pk-tabs-heading-font-weight, 600);\n line-height: 1.3;\n letter-spacing: var(--pk-tabs-heading-letter-spacing, 0.04em);\n text-transform: var(--pk-tabs-heading-text-transform, uppercase);\n user-select: none;\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 { pkTabHeadingStyles } from './pk-tab-heading.styles.js';\n\n/**\n * Non-interactive group heading inside `pk-tabs` `slot=\"nav\"`.\n * Use between `pk-tab` triggers (especially with `variant=\"sidebar\"`).\n *\n * @slot - Heading text\n *\n * @csspart heading - Heading container\n */\n@customElement('pk-tab-heading')\nexport class PkTabHeading extends PkElement {\n static override styles = pkTabHeadingStyles;\n\n override connectedCallback(): void {\n super.connectedCallback();\n // Keep out of the tablist accessibility tree — only pk-tab triggers are tabs.\n this.setAttribute('role', 'presentation');\n }\n\n override render() {\n return html`\n <div part=\"heading\" class=\"heading\">\n <slot></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-tab-heading': PkTabHeading;\n }\n}\n"],"mappings":";;;AAEA,IAAa,qBAAqB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;ACa9B,IAAA,eAAA,MAAM,qBAAqB,UAAU;;gBACf;;CAEzB,oBAAmC;AAC/B,QAAM,mBAAmB;AAEzB,OAAK,aAAa,QAAQ,eAAe;;CAG7C,SAAkB;AACd,SAAO,IAAI;;;;;;;2BAXlB,cAAc,iBAAiB,CAAA,EAAA,aAAA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"pk-tab-panel-CkKU5-Ah.js","names":[],"sources":["../../src/components/tabs/pk-tab-panel-base.ts","../../src/components/tabs/pk-tab-panel.styles.ts","../../src/components/tabs/pk-tab-panel.ts"],"sourcesContent":["import { html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport { PkElement } from '../../base/pk-element.js';\n\n/** Shared tab panel behaviour for all tab variants. */\nexport class PkTabPanelBase extends PkElement {\n @property()\n value = '';\n\n @property({ type: Boolean, reflect: true })\n hidden = true;\n\n @property()\n tabId?: string;\n\n protected renderPanel(className: string) {\n return html`\n <div\n part=\"content\"\n class=${className}\n role=\"tabpanel\"\n id=${this.tabId ?? nothing}\n aria-labelledby=${this.tabId ?? nothing}\n aria-hidden=${this.hidden ? 'true' : 'false'}\n tabindex=${this.hidden ? nothing : '0'}\n >\n <slot></slot>\n </div>\n `;\n }\n}\n","import { css } from 'lit';\n\nexport const pkTabPanelStyles = css`\n @layer pk-component {\n :host {\n /* Flex column so .content can own overflow when the host is height-capped\n * by a modal/pane parent (flex: 1 1 0% + min-height: 0). */\n display: flex;\n flex-direction: column;\n flex: var(--pk-tabs-panel-flex, none);\n min-height: var(--pk-tabs-panel-min-height, 0);\n min-width: 0;\n overflow: hidden;\n }\n\n :host([hidden]) {\n display: none !important;\n }\n\n .content {\n flex: 1 1 auto;\n min-height: 0;\n padding: var(--pk-tabs-panel-padding, 0);\n overflow-y: auto;\n border-radius: var(--pk-tabs-panel-radius, 0);\n background: var(--pk-tabs-panel-bg, transparent);\n outline: none;\n font-family: var(--pk-font-family);\n font-size: var(--pk-tabs-panel-font-size, var(--pk-font-size-base));\n line-height: var(--pk-line-height);\n }\n\n .content:focus-visible {\n box-shadow: inset 0 0 0 2px var(--pk-color-sky-600);\n border-radius: var(--pk-radius-sm);\n }\n }\n`;\n","import { customElement } from '../../decorators.js';\n\nimport { PkTabPanelBase } from './pk-tab-panel-base.js';\nimport { pkTabPanelStyles } from './pk-tab-panel.styles.js';\n\n/**\n * Tab panel — use inside `pk-tabs` default slot.\n *\n * @slot - Panel content\n *\n * @csspart content - Panel container\n */\n@customElement('pk-tab-panel')\nexport class PkTabPanel extends PkTabPanelBase {\n static override styles = pkTabPanelStyles;\n\n override render() {\n return this.renderPanel('content pk-tabs__content');\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-tab-panel': PkTabPanel;\n }\n}\n"],"mappings":";;;;;AAMA,IAAa,iBAAb,cAAoC,UAAU;;;eAElC;gBAGC;;CAKT,YAAsB,WAAmB;AACrC,SAAO,IAAI;;;wBAGK,UAAU;;qBAEb,KAAK,SAAS,QAAQ;kCACT,KAAK,SAAS,QAAQ;8BAC1B,KAAK,SAAS,SAAS,QAAQ;2BAClC,KAAK,SAAS,UAAU,IAAI;;;;;;;YAlBlD,UAAU,CAAA,EAAA,eAAA,WAAA,SAAA,KAAA,EAAA;YAGV,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,eAAA,WAAA,UAAA,KAAA,EAAA;YAG1C,UAAU,CAAA,EAAA,eAAA,WAAA,SAAA,KAAA,EAAA;;;ACXf,IAAa,mBAAmB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACW5B,IAAA,aAAA,MAAM,mBAAmB,eAAe;;gBAClB;;CAEzB,SAAkB;AACd,SAAO,KAAK,YAAY,2BAA2B;;;yBAL1D,cAAc,eAAe,CAAA,EAAA,WAAA"}
|