@verbb/plugin-kit-web 2.0.14 → 2.0.15
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 +9 -0
- package/dist/chunks/{decorate-W02hmVTt.js → decorate-R0X811qp.js} +13 -2
- package/dist/chunks/decorate-R0X811qp.js.map +1 -0
- package/dist/chunks/{pk-button-QpDDlRbG.js → pk-button-BWGDkuzc.js} +3 -4
- package/dist/chunks/{pk-button-QpDDlRbG.js.map → pk-button-BWGDkuzc.js.map} +1 -1
- package/dist/chunks/{pk-button-group-D9hqSfb_.js → pk-button-group-BSz5T5iS.js} +2 -3
- package/dist/chunks/pk-button-group-BSz5T5iS.js.map +1 -0
- package/dist/chunks/{pk-button-group-separator-DG0CYaqc.js → pk-button-group-separator-DH3Rl24b.js} +2 -3
- package/dist/chunks/pk-button-group-separator-DH3Rl24b.js.map +1 -0
- package/dist/chunks/{pk-button-group-text-C5z4P7ur.js → pk-button-group-text-Qro_KmZb.js} +2 -3
- package/dist/chunks/{pk-button-group-text-C5z4P7ur.js.map → pk-button-group-text-Qro_KmZb.js.map} +1 -1
- package/dist/chunks/{pk-calendar-CoUil0F7.js → pk-calendar-enTOUCRD.js} +2 -3
- package/dist/chunks/pk-calendar-enTOUCRD.js.map +1 -0
- package/dist/chunks/{pk-checkbox-Bavq3-9C.js → pk-checkbox-CvZwJZn_.js} +3 -4
- package/dist/chunks/pk-checkbox-CvZwJZn_.js.map +1 -0
- package/dist/chunks/{pk-checkbox-select-9lqd9Rwz.js → pk-checkbox-select-DclPoyDM.js} +3 -4
- package/dist/chunks/pk-checkbox-select-DclPoyDM.js.map +1 -0
- package/dist/chunks/{pk-code-editor-DSG6AwLV.js → pk-code-editor-CrKnJUyi.js} +3 -4
- package/dist/chunks/pk-code-editor-CrKnJUyi.js.map +1 -0
- package/dist/chunks/{pk-color-input-BCCXCZMA.js → pk-color-input-DXdqNCK7.js} +3 -4
- package/dist/chunks/pk-color-input-DXdqNCK7.js.map +1 -0
- package/dist/chunks/{pk-combobox-BqaSsLJb.js → pk-combobox-BLft8AXy.js} +4 -5
- package/dist/chunks/pk-combobox-BLft8AXy.js.map +1 -0
- package/dist/chunks/{pk-copy-button-CfeVuQ0r.js → pk-copy-button-asOLQkqk.js} +3 -4
- package/dist/chunks/pk-copy-button-asOLQkqk.js.map +1 -0
- package/dist/chunks/{pk-date-picker-BM4HMb4-.js → pk-date-picker-Bri3kZ6x.js} +5 -6
- package/dist/chunks/pk-date-picker-Bri3kZ6x.js.map +1 -0
- package/dist/chunks/{pk-dialog-Ck1InIBC.js → pk-dialog-BbEfvb0g.js} +2 -3
- package/dist/chunks/pk-dialog-BbEfvb0g.js.map +1 -0
- package/dist/chunks/{pk-dropdown-item-HcIUlFH1.js → pk-dropdown-item-BoZTGWMU.js} +2 -3
- package/dist/chunks/pk-dropdown-item-BoZTGWMU.js.map +1 -0
- package/dist/chunks/{pk-dropdown-label-DLgrmYND.js → pk-dropdown-label-Da28F917.js} +2 -3
- package/dist/chunks/{pk-dropdown-label-DLgrmYND.js.map → pk-dropdown-label-Da28F917.js.map} +1 -1
- package/dist/chunks/{pk-dropdown-menu-r5wgkvmZ.js → pk-dropdown-menu-CfZc7dIz.js} +4 -5
- package/dist/chunks/pk-dropdown-menu-CfZc7dIz.js.map +1 -0
- package/dist/chunks/{pk-editable-table-DMHGqZlQ.js → pk-editable-table-Cn4WXqAo.js} +16 -17
- package/dist/chunks/pk-editable-table-Cn4WXqAo.js.map +1 -0
- package/dist/chunks/{pk-field-JFP24j4o.js → pk-field-NL4KdFZC.js} +2 -3
- package/dist/chunks/pk-field-NL4KdFZC.js.map +1 -0
- package/dist/chunks/{pk-form-associated-element-DmZKgNPL.js → pk-form-associated-element-9M2NzOE2.js} +2 -2
- package/dist/chunks/{pk-form-associated-element-DmZKgNPL.js.map → pk-form-associated-element-9M2NzOE2.js.map} +1 -1
- package/dist/chunks/{pk-input-naIRPWGC.js → pk-input-DDkIXOkt.js} +3 -4
- package/dist/chunks/pk-input-DDkIXOkt.js.map +1 -0
- package/dist/chunks/{pk-input-group-CGHQKrt8.js → pk-input-group-CRPSBFhX.js} +2 -3
- package/dist/chunks/pk-input-group-CRPSBFhX.js.map +1 -0
- package/dist/chunks/{pk-input-group-addon-DXbNbsfY.js → pk-input-group-addon-B0StOmTJ.js} +2 -3
- package/dist/chunks/pk-input-group-addon-B0StOmTJ.js.map +1 -0
- package/dist/chunks/{pk-input-group-button-XOfVLqGO.js → pk-input-group-button-CnKajvsP.js} +2 -3
- package/dist/chunks/pk-input-group-button-CnKajvsP.js.map +1 -0
- package/dist/chunks/{pk-input-group-input-CSmR5vdY.js → pk-input-group-input-mllffsjQ.js} +2 -3
- package/dist/chunks/pk-input-group-input-mllffsjQ.js.map +1 -0
- package/dist/chunks/{pk-input-group-text-C6ekhtff.js → pk-input-group-text-DvaPJvh2.js} +2 -3
- package/dist/chunks/pk-input-group-text-DvaPJvh2.js.map +1 -0
- package/dist/chunks/{pk-input-group-textarea-DALr3pdU.js → pk-input-group-textarea-CqYv8tUQ.js} +2 -3
- package/dist/chunks/pk-input-group-textarea-CqYv8tUQ.js.map +1 -0
- package/dist/chunks/{pk-lightswitch-B-rLflNq.js → pk-lightswitch-DI1BeCmA.js} +3 -4
- package/dist/chunks/pk-lightswitch-DI1BeCmA.js.map +1 -0
- package/dist/chunks/{pk-option-Cy7oOcwF.js → pk-option-MGj9SKOK.js} +2 -3
- package/dist/chunks/pk-option-MGj9SKOK.js.map +1 -0
- package/dist/chunks/{pk-option-group-BAFSIZTa.js → pk-option-group-Cs6N7mlP.js} +2 -3
- package/dist/chunks/pk-option-group-Cs6N7mlP.js.map +1 -0
- package/dist/chunks/{pk-popover-G3ojheBD.js → pk-popover-duyNosk2.js} +3 -4
- package/dist/chunks/pk-popover-duyNosk2.js.map +1 -0
- package/dist/chunks/{pk-popup-CgiXok-U.js → pk-popup-B9AgBC2V.js} +2 -3
- package/dist/chunks/pk-popup-B9AgBC2V.js.map +1 -0
- package/dist/chunks/{pk-radio-CDfhOW8L.js → pk-radio-BK4D2Htu.js} +2 -3
- package/dist/chunks/pk-radio-BK4D2Htu.js.map +1 -0
- package/dist/chunks/{pk-radio-group-BazmLDvl.js → pk-radio-group-BRJIjOsR.js} +3 -4
- package/dist/chunks/pk-radio-group-BRJIjOsR.js.map +1 -0
- package/dist/chunks/{pk-scroll-area-BjU7-vZX.js → pk-scroll-area-BR6ckorh.js} +2 -3
- package/dist/chunks/pk-scroll-area-BR6ckorh.js.map +1 -0
- package/dist/chunks/{pk-select-BeMDXEC6.js → pk-select-C1s0OJr0.js} +4 -5
- package/dist/chunks/pk-select-C1s0OJr0.js.map +1 -0
- package/dist/chunks/{pk-separator-CLb9n0FK.js → pk-separator-CHij3vEG.js} +2 -3
- package/dist/chunks/pk-separator-CHij3vEG.js.map +1 -0
- package/dist/chunks/{pk-spinner-Blxd3SIH.js → pk-spinner-DweuYJ_Z.js} +2 -3
- package/dist/chunks/{pk-spinner-Blxd3SIH.js.map → pk-spinner-DweuYJ_Z.js.map} +1 -1
- package/dist/chunks/{pk-status-7_5dEuw-.js → pk-status-D1IzTSI2.js} +2 -3
- package/dist/chunks/{pk-status-7_5dEuw-.js.map → pk-status-D1IzTSI2.js.map} +1 -1
- package/dist/chunks/{pk-tab-f1OLMVXs.js → pk-tab-2MHunhlF.js} +3 -3
- package/dist/chunks/{pk-tab-f1OLMVXs.js.map → pk-tab-2MHunhlF.js.map} +1 -1
- package/dist/chunks/{pk-tab-heading-79ZuLhXi.js → pk-tab-heading-BV6m_sT-.js} +2 -3
- package/dist/chunks/pk-tab-heading-BV6m_sT-.js.map +1 -0
- package/dist/chunks/{pk-tab-panel-DdAbrOBF.js → pk-tab-panel-C6FxQw9q.js} +3 -3
- package/dist/chunks/{pk-tab-panel-DdAbrOBF.js.map → pk-tab-panel-C6FxQw9q.js.map} +1 -1
- package/dist/chunks/{pk-tabs-BhC5PAnO.js → pk-tabs-BTE63uK9.js} +2 -3
- package/dist/chunks/{pk-tabs-BhC5PAnO.js.map → pk-tabs-BTE63uK9.js.map} +1 -1
- package/dist/chunks/{pk-textarea-BEapC8Rk.js → pk-textarea-BcAyZYC-.js} +3 -4
- package/dist/chunks/pk-textarea-BcAyZYC-.js.map +1 -0
- package/dist/chunks/{pk-time-picker-RlAqlho4.js → pk-time-picker-5D4nmig2.js} +4 -5
- package/dist/chunks/{pk-time-picker-RlAqlho4.js.map → pk-time-picker-5D4nmig2.js.map} +1 -1
- package/dist/chunks/{pk-tiptap-content-zzx3-xrD.js → pk-tiptap-content-BPd4GO6c.js} +2 -3
- package/dist/chunks/pk-tiptap-content-BPd4GO6c.js.map +1 -0
- package/dist/chunks/{pk-tiptap-editor-DpT4TYdi.js → pk-tiptap-editor-tG67Vegc.js} +11 -12
- package/dist/chunks/pk-tiptap-editor-tG67Vegc.js.map +1 -0
- package/dist/chunks/{pk-tiptap-input-D7xj13FY.js → pk-tiptap-input-CtefNnaK.js} +3 -4
- package/dist/chunks/pk-tiptap-input-CtefNnaK.js.map +1 -0
- package/dist/chunks/{pk-toggle-5-GKVLye.js → pk-toggle-CW-lflrh.js} +2 -3
- package/dist/chunks/{pk-toggle-5-GKVLye.js.map → pk-toggle-CW-lflrh.js.map} +1 -1
- package/dist/chunks/{pk-toggle-group-CWDwYlgR.js → pk-toggle-group-BKymefo3.js} +2 -3
- package/dist/chunks/pk-toggle-group-BKymefo3.js.map +1 -0
- package/dist/chunks/{pk-tooltip-DAq-JZpg.js → pk-tooltip-BoDq8YVe.js} +3 -4
- package/dist/chunks/pk-tooltip-BoDq8YVe.js.map +1 -0
- package/dist/chunks/{register-DeqrQzRS.js → register-CQodpTWT.js} +50 -50
- package/dist/chunks/{register-DeqrQzRS.js.map → register-CQodpTWT.js.map} +1 -1
- package/dist/components/button/pk-button.js +1 -1
- package/dist/components/button-group/pk-button-group-separator.js +1 -1
- package/dist/components/button-group/pk-button-group-text.js +1 -1
- package/dist/components/button-group/pk-button-group.js +1 -1
- package/dist/components/button-group.js +3 -3
- package/dist/components/button.js +1 -1
- package/dist/components/calendar/pk-calendar.js +1 -1
- package/dist/components/calendar.js +1 -1
- package/dist/components/checkbox/pk-checkbox.js +1 -1
- package/dist/components/checkbox-select/pk-checkbox-select.js +1 -1
- package/dist/components/checkbox-select.js +1 -1
- package/dist/components/checkbox.js +1 -1
- package/dist/components/code-editor/pk-code-editor.js +1 -1
- package/dist/components/code-editor.js +1 -1
- package/dist/components/color-input/pk-color-input.js +1 -1
- package/dist/components/color-input.js +1 -1
- package/dist/components/combobox/pk-combobox.js +1 -1
- package/dist/components/combobox.js +1 -1
- package/dist/components/connect/pk-connect-oauth.js +3 -4
- package/dist/components/connect/pk-connect-oauth.js.map +1 -1
- package/dist/components/connect/pk-connect.js +4 -5
- package/dist/components/connect/pk-connect.js.map +1 -1
- package/dist/components/copy-button/pk-copy-button.js +1 -1
- package/dist/components/copy-button.js +1 -1
- package/dist/components/date-picker/pk-date-picker.js +1 -1
- package/dist/components/date-picker.js +1 -1
- package/dist/components/dialog/pk-dialog.js +1 -1
- package/dist/components/dialog.js +1 -1
- package/dist/components/dropdown-menu/pk-dropdown-item.js +1 -1
- package/dist/components/dropdown-menu/pk-dropdown-label.js +1 -1
- package/dist/components/dropdown-menu/pk-dropdown-menu.js +1 -1
- package/dist/components/dropdown-menu/pk-dropdown-separator.js +1 -2
- package/dist/components/dropdown-menu/pk-dropdown-separator.js.map +1 -1
- package/dist/components/dropdown-menu.js +3 -3
- package/dist/components/editable-table/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 +1 -2
- package/dist/components/icon/pk-icon.js.map +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 +1 -1
- package/dist/components/status/pk-status.js +1 -1
- package/dist/components/status.js +1 -1
- package/dist/components/tabs/pk-tab-heading.js +1 -1
- package/dist/components/tabs/pk-tab-panel.js +1 -1
- package/dist/components/tabs/pk-tab.js +1 -1
- package/dist/components/tabs/pk-tabs.js +1 -1
- package/dist/components/tabs.js +4 -4
- package/dist/components/textarea/pk-textarea.js +1 -1
- package/dist/components/textarea.js +1 -1
- package/dist/components/time-picker/pk-time-picker.js +1 -1
- package/dist/components/time-picker.js +1 -1
- package/dist/components/tiptap/pk-tiptap-content.js +1 -1
- package/dist/components/tiptap/pk-tiptap-editor.js +1 -1
- package/dist/components/tiptap/pk-tiptap-input.js +1 -1
- package/dist/components/tiptap-content.js +1 -1
- package/dist/components/tiptap-editor.js +1 -1
- package/dist/components/tiptap-input.js +1 -1
- package/dist/components/toggle/pk-toggle.js +1 -1
- package/dist/components/toggle-group/pk-toggle-group.js +1 -1
- package/dist/components/toggle-group.js +1 -1
- package/dist/components/toggle.js +1 -1
- package/dist/components/tooltip/pk-tooltip.js +1 -1
- package/dist/components/tooltip.js +1 -1
- package/dist/connect/register-cp-connect.js +3 -3
- package/dist/decorators.d.ts +12 -0
- package/dist/decorators.d.ts.map +1 -0
- package/dist/index.js +52 -52
- package/dist/register.js +50 -50
- package/package.json +7 -7
- package/dist/chunks/decorate-W02hmVTt.js.map +0 -1
- package/dist/chunks/pk-button-group-D9hqSfb_.js.map +0 -1
- package/dist/chunks/pk-button-group-separator-DG0CYaqc.js.map +0 -1
- package/dist/chunks/pk-calendar-CoUil0F7.js.map +0 -1
- package/dist/chunks/pk-checkbox-Bavq3-9C.js.map +0 -1
- package/dist/chunks/pk-checkbox-select-9lqd9Rwz.js.map +0 -1
- package/dist/chunks/pk-code-editor-DSG6AwLV.js.map +0 -1
- package/dist/chunks/pk-color-input-BCCXCZMA.js.map +0 -1
- package/dist/chunks/pk-combobox-BqaSsLJb.js.map +0 -1
- package/dist/chunks/pk-copy-button-CfeVuQ0r.js.map +0 -1
- package/dist/chunks/pk-date-picker-BM4HMb4-.js.map +0 -1
- package/dist/chunks/pk-dialog-Ck1InIBC.js.map +0 -1
- package/dist/chunks/pk-dropdown-item-HcIUlFH1.js.map +0 -1
- package/dist/chunks/pk-dropdown-menu-r5wgkvmZ.js.map +0 -1
- package/dist/chunks/pk-editable-table-DMHGqZlQ.js.map +0 -1
- package/dist/chunks/pk-field-JFP24j4o.js.map +0 -1
- package/dist/chunks/pk-input-group-CGHQKrt8.js.map +0 -1
- package/dist/chunks/pk-input-group-addon-DXbNbsfY.js.map +0 -1
- package/dist/chunks/pk-input-group-button-XOfVLqGO.js.map +0 -1
- package/dist/chunks/pk-input-group-input-CSmR5vdY.js.map +0 -1
- package/dist/chunks/pk-input-group-text-C6ekhtff.js.map +0 -1
- package/dist/chunks/pk-input-group-textarea-DALr3pdU.js.map +0 -1
- package/dist/chunks/pk-input-naIRPWGC.js.map +0 -1
- package/dist/chunks/pk-lightswitch-B-rLflNq.js.map +0 -1
- package/dist/chunks/pk-option-Cy7oOcwF.js.map +0 -1
- package/dist/chunks/pk-option-group-BAFSIZTa.js.map +0 -1
- package/dist/chunks/pk-popover-G3ojheBD.js.map +0 -1
- package/dist/chunks/pk-popup-CgiXok-U.js.map +0 -1
- package/dist/chunks/pk-radio-CDfhOW8L.js.map +0 -1
- package/dist/chunks/pk-radio-group-BazmLDvl.js.map +0 -1
- package/dist/chunks/pk-scroll-area-BjU7-vZX.js.map +0 -1
- package/dist/chunks/pk-select-BeMDXEC6.js.map +0 -1
- package/dist/chunks/pk-separator-CLb9n0FK.js.map +0 -1
- package/dist/chunks/pk-tab-heading-79ZuLhXi.js.map +0 -1
- package/dist/chunks/pk-textarea-BEapC8Rk.js.map +0 -1
- package/dist/chunks/pk-tiptap-content-zzx3-xrD.js.map +0 -1
- package/dist/chunks/pk-tiptap-editor-DpT4TYdi.js.map +0 -1
- package/dist/chunks/pk-tiptap-input-D7xj13FY.js.map +0 -1
- package/dist/chunks/pk-toggle-group-CWDwYlgR.js.map +0 -1
- package/dist/chunks/pk-tooltip-DAq-JZpg.js.map +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pk-select-C1s0OJr0.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 — pattern: 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@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 @property({ type: Boolean, reflect: true })\n open = false;\n\n @property({ type: Boolean, reflect: true })\n multiple = false;\n\n @property({ reflect: true })\n placement: PkPopupPlacement = 'bottom-start';\n\n /** Gap between the trigger and listbox panel in px (default: 4). */\n @property({ attribute: 'side-offset', type: Number })\n sideOffset = 4;\n\n @property({ type: Boolean, reflect: true })\n clearable = false;\n\n @property({ attribute: 'with-clear', type: Boolean })\n withClear = false;\n\n @property({ type: Boolean, reflect: true })\n invalid = false;\n\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 /** Empty by default — consumers opt in when a prompt is useful. */\n @property()\n placeholder = '';\n\n @property()\n value = '';\n\n @property({ attribute: 'default-value' })\n defaultValue = '';\n\n @property({ type: Array, attribute: false })\n values: string[] = [];\n\n @property({ attribute: false })\n defaultValues: string[] = [];\n\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 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 async show(): Promise<void> {\n if (this.open || this.closing || this.disabled) {\n return;\n }\n\n await this.openPanel();\n }\n\n async hide(source: PkOverlaySource = 'api'): Promise<void> {\n if (!this.open || this.closing) {\n return;\n }\n\n await this.closePanel(source);\n }\n\n private openPanel(): Promise<void> {\n const anchor = this.getPopupAnchor();\n\n if (!anchor || this.closing) {\n return Promise.resolve();\n }\n\n this.dispatchEvent(new PkShowEvent());\n this.closing = false;\n this.panelAnimated = false;\n this.open = true;\n this.popupElement.active = true;\n this.applySelection();\n this.syncHighlightedIndexToSelection();\n\n if (this.panelElement) {\n this.panelElement.hidden = false;\n // Seed side before first paint so enter keyframes pick a direction.\n syncPopupPlacementAnimation(this.panelElement, this.placement);\n }\n\n const anchorWidth = anchor.getBoundingClientRect().width;\n this.style.setProperty('--pk-select-anchor-width', `${anchorWidth}px`);\n this.registerDismissHandlers();\n this.syncHighlight();\n this.updateTypeToSelect();\n\n return this.updateComplete.then(async () => {\n const placement = await waitForPopupReposition(this.popupElement, this.placement, 300, {\n requireEvent: true,\n });\n\n if (this.panelElement) {\n syncPopupPlacementAnimation(this.panelElement, placement);\n }\n\n // Flip data-open after placement so the shared enter animation can run.\n this.panelAnimated = true;\n this.bindPanelEvents();\n this.refreshOptions();\n this.getEnabledVisibleOptions()[this.highlightedIndex]?.focusControl();\n\n this.dispatchEvent(new PkAfterShowEvent());\n this.dispatchEvent(new CustomEvent('pk-open-change', {\n detail: { open: true },\n bubbles: true,\n composed: true,\n }));\n });\n }\n\n private async closePanel(source: PkOverlaySource = 'unknown'): Promise<void> {\n if (!this.open || this.closing) {\n return;\n }\n\n const hideEvent = new PkHideEvent(source);\n\n if (!this.dispatchEvent(hideEvent)) {\n return;\n }\n\n this.typeToSelect.reset();\n this.unbindPanelEvents();\n this.unregisterDismissHandlers();\n\n this.closing = true;\n this.panelAnimated = false;\n await this.waitForExitAnimation();\n\n this.open = false;\n this.closing = false;\n this.panelAnimated = false;\n\n if (this.panelElement) {\n this.panelElement.hidden = true;\n this.panelElement.removeAttribute('data-side');\n }\n\n this.popupElement.active = false;\n\n this.dispatchEvent(new PkAfterHideEvent());\n this.dispatchEvent(new CustomEvent('pk-open-change', {\n detail: { open: false },\n bubbles: true,\n composed: true,\n }));\n\n if (this.shouldReturnFocusToTrigger(source)) {\n this.triggerButton?.focus({ preventScroll: true });\n } else {\n this.triggerButton?.blur();\n }\n }\n\n private waitForExitAnimation(): Promise<void> {\n const panel = this.panelElement;\n\n if (!panel) {\n return Promise.resolve();\n }\n\n return new Promise((resolve) => {\n let settled = false;\n\n const finish = (): void => {\n if (settled) {\n return;\n }\n\n settled = true;\n panel.removeEventListener('animationend', onAnimationEnd);\n window.clearTimeout(fallback);\n panel.classList.remove('closing');\n resolve();\n };\n\n const onAnimationEnd = (event: AnimationEvent): void => {\n if (event.target === panel && event.animationName.startsWith('pk-popup-content-out')) {\n finish();\n }\n };\n\n panel.classList.add('closing');\n panel.addEventListener('animationend', onAnimationEnd);\n const fallback = window.setTimeout(finish, 150);\n });\n }\n\n /** Base UI skips return focus on outside press — avoids an unwanted focus ring after light dismiss. */\n private shouldReturnFocusToTrigger(source: PkOverlaySource): boolean {\n return source !== 'light-dismiss' && source !== 'pointer-dismiss';\n }\n\n private registerDismissHandlers(): void {\n registerDismissible(this);\n this.dismissRegistered = true;\n document.addEventListener('pointerdown', this.onDocumentPointerDown, true);\n document.addEventListener('keydown', this.onDocumentKeyDown, true);\n }\n\n private unregisterDismissHandlers(): void {\n if (this.dismissRegistered) {\n unregisterDismissible(this);\n this.dismissRegistered = false;\n }\n\n document.removeEventListener('pointerdown', this.onDocumentPointerDown, true);\n document.removeEventListener('keydown', this.onDocumentKeyDown, true);\n }\n\n private onDocumentPointerDown = (event: PointerEvent): void => {\n if (this.isPointerInside(event)) {\n return;\n }\n\n void this.closePanel('light-dismiss');\n };\n\n private isPointerInside(event: PointerEvent): boolean {\n return isPointerInsideOverlay(event, {\n anchor: this.getPopupAnchor(),\n panel: this.panelElement,\n });\n };\n\n private onDocumentKeyDown = (event: KeyboardEvent): void => {\n if (!this.open) {\n return;\n }\n\n if (event.key === 'Escape') {\n if (!isTopDismissible(this)) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n void this.closePanel('escape');\n return;\n }\n\n const isListboxKey = LISTBOX_NAVIGATION_KEYS.has(event.key) || isListboxTypeToSelectKey(event);\n\n if (!isListboxKey) {\n return;\n }\n\n if (!isEventInsideOverlay(event, {\n anchor: this.getPopupAnchor(),\n panel: this.panelElement,\n })) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n this.onListboxKeyDown(event);\n };\n\n private handleOptionSelect = (event: CustomEvent<{ value: string }>): void => {\n const { value } = event.detail;\n\n if (this.multiple) {\n this.values = this.values.includes(value)\n ? this.values.filter((v) => v !== value)\n : [...this.values, value];\n } else {\n this.value = value;\n void this.closePanel('api');\n }\n\n this.applySelection();\n this.emitValueChange();\n };\n\n private handleOptionHighlight = (event: CustomEvent<{ value: string }>): void => {\n if (!this.open) {\n return;\n }\n\n const enabled = this.getEnabledVisibleOptions();\n const index = enabled.findIndex((option) => option.value === event.detail.value);\n\n if (index === -1 || index === this.highlightedIndex) {\n return;\n }\n\n this.highlightedIndex = index;\n this.syncHighlight();\n };\n\n private removeTag(value: string, event: Event): void {\n event.preventDefault();\n event.stopPropagation();\n this.values = this.values.filter((item) => item !== value);\n this.applySelection();\n this.emitValueChange();\n }\n\n private handleClear(event: Event): void {\n event.preventDefault();\n event.stopPropagation();\n\n if (this.multiple) {\n this.values = [];\n } else {\n this.value = '';\n }\n\n this.applySelection();\n this.dispatchEvent(new PkClearEvent());\n this.emitValueChange();\n this.triggerButton?.focus();\n }\n\n private emitValueChange(): void {\n this.dispatchEvent(new CustomEvent('pk-change', {\n detail: {\n value: this.multiple ? [...this.values] : this.value,\n },\n bubbles: true,\n composed: true,\n }));\n\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n }\n\n private onKeyDown = (event: KeyboardEvent): void => {\n if (!this.open) {\n if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n void this.openPanel();\n }\n\n return;\n }\n\n this.onListboxKeyDown(event);\n };\n\n private onListboxKeyDown(event: KeyboardEvent): void {\n const enabled = this.getEnabledVisibleOptions();\n\n this.highlightedIndex = handleListboxKeyDown(event, {\n items: enabled as unknown as HTMLElement[],\n currentIndex: this.highlightedIndex,\n multiselect: this.multiple,\n loop: this.loopFocus,\n onSelect: (index) => {\n this.highlightedIndex = index;\n this.syncHighlight();\n },\n focusItem: (index) => {\n enabled[index]?.focusControl();\n },\n onClose: () => { void this.closePanel('escape'); },\n });\n\n if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {\n this.typeToSelect.handleKey(event);\n }\n }\n\n private handleListboxKeyDownEvent = (event: CustomEvent<{ keyboardEvent: KeyboardEvent }>): void => {\n if (!this.open) {\n return;\n }\n\n this.onListboxKeyDown(event.detail.keyboardEvent);\n };\n\n private renderTags() {\n return this.getSelectedOptions().map((option) => html`\n <span class=\"tag\" part=\"tag\">\n <span class=\"tag-label\">${option.getLabel()}</span>\n <button\n type=\"button\"\n class=\"tag-remove\"\n part=\"tag-remove\"\n aria-label=${`Remove ${option.getLabel()}`}\n @click=${(event: Event) => this.removeTag(option.value, event)}\n >\n ×\n </button>\n </span>\n `);\n }\n\n private renderChevronIcon() {\n return html`\n <span class=\"icon\" aria-hidden=\"true\">${unsafeSVG(CHEVRON_ICON)}</span>\n `;\n }\n\n private renderHostDecorationSlot(name: 'start' | 'end') {\n if (!this.hasSlotController.test(name)) {\n return html`<slot name=${name} hidden></slot>`;\n }\n\n const className = name === 'start' ? 'control-start' : 'control-end';\n\n return html`\n <span part=${name} class=${className}>\n <slot name=${name}></slot>\n </span>\n `;\n }\n\n override render() {\n const displayValue = this.getDisplayValue();\n const isPlaceholder = !this.hasSelection();\n const showClear = (this.clearable || this.withClear) && this.hasSelection() && !this.disabled;\n\n return html`\n <input\n class=\"value-input\"\n part=\"value-input\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n .value=${this.multiple ? this.values.join(',') : this.value}\n ?required=${this.required}\n @input=${() => this.updateValidity()}\n />\n ${this.multiple\n ? html`\n <div\n part=\"control\"\n class=${classMap({\n control: true,\n 'is-disabled': this.disabled,\n })}\n >\n ${this.renderHostDecorationSlot('start')}\n ${this.hasSelection()\n ? html`\n <div class=\"tags\" part=\"tags\">${this.renderTags()}</div>\n ${showClear\n ? html`\n <button\n type=\"button\"\n class=\"clear-button\"\n part=\"clear-button\"\n aria-label=\"Clear selection\"\n @click=${this.handleClear}\n >\n ×\n </button>\n `\n : nothing}\n `\n : html`\n <button\n part=\"trigger\"\n type=\"button\"\n class=\"trigger\"\n id=${this.triggerId}\n ?disabled=${this.disabled}\n aria-label=${this.ariaLabel ?? nothing}\n aria-haspopup=\"listbox\"\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-controls=${this.listboxId}\n @click=${this.togglePanel}\n >\n <span class=\"value is-placeholder\">${this.placeholder}</span>\n </button>\n `}\n ${this.renderHostDecorationSlot('end')}\n <button\n type=\"button\"\n class=\"trigger trigger--icon\"\n part=\"trigger expand-button\"\n aria-label=\"Toggle options\"\n ?disabled=${this.disabled}\n @click=${this.togglePanel}\n >\n ${this.renderChevronIcon()}\n </button>\n </div>\n `\n : html`\n <button\n part=\"control\"\n type=\"button\"\n class=${classMap({\n control: true,\n 'is-disabled': this.disabled,\n })}\n id=${this.triggerId}\n ?disabled=${this.disabled}\n aria-label=${this.ariaLabel ?? nothing}\n aria-haspopup=\"listbox\"\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-controls=${this.listboxId}\n @click=${this.togglePanel}\n >\n ${this.renderHostDecorationSlot('start')}\n <span part=\"trigger-start\" class=\"trigger-start\"></span>\n <span\n class=${classMap({\n value: true,\n 'is-placeholder': isPlaceholder,\n })}\n >${displayValue}</span>\n ${showClear\n ? html`\n <span\n class=\"clear-button\"\n part=\"clear-button\"\n role=\"button\"\n tabindex=\"-1\"\n aria-label=\"Clear selection\"\n @click=${this.handleClear}\n >\n ×\n </span>\n `\n : nothing}\n ${this.renderHostDecorationSlot('end')}\n ${this.renderChevronIcon()}\n </button>\n `}\n <pk-popup\n .anchor=${this.getPopupAnchor() ?? ''}\n .placement=${this.placement}\n .distance=${this.sideOffset}\n .sync=${'width'}\n flip\n shift\n >\n <div\n part=\"panel\"\n class=${classMap({\n panel: true,\n 'pk-popup-content': true,\n closing: this.closing,\n })}\n id=${this.listboxId}\n role=\"listbox\"\n aria-multiselectable=${this.multiple ? 'true' : 'false'}\n tabindex=\"-1\"\n ?hidden=${!this.open && !this.closing}\n data-open=${this.panelAnimated && !this.closing ? '' : nothing}\n @slotchange=${this.syncOptions}\n >\n <slot></slot>\n </div>\n </pk-popup>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-select': PkSelect;\n }\n}\n"],"mappings":"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"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import { n as PkElement, t as __decorate } from "./decorate-
|
|
1
|
+
import { i as property, n as PkElement, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
|
|
2
2
|
import { css, html } from "lit";
|
|
3
|
-
import { customElement, property } from "lit/decorators.js";
|
|
4
3
|
//#region src/components/separator/pk-separator.styles.ts
|
|
5
4
|
/**
|
|
6
5
|
* Default block rhythm lives on the inner `.line`, not `:host` margin.
|
|
@@ -86,4 +85,4 @@ PkSeparator = __decorate([customElement("pk-separator")], PkSeparator);
|
|
|
86
85
|
//#endregion
|
|
87
86
|
export { PkSeparator as t };
|
|
88
87
|
|
|
89
|
-
//# sourceMappingURL=pk-separator-
|
|
88
|
+
//# sourceMappingURL=pk-separator-CHij3vEG.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pk-separator-CHij3vEG.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,6 +1,5 @@
|
|
|
1
|
-
import { n as PkElement, r as hostDisplayInlineBlock, t as __decorate } from "./decorate-
|
|
1
|
+
import { i as property, n as PkElement, r as hostDisplayInlineBlock, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
|
|
2
2
|
import { css, html } from "lit";
|
|
3
|
-
import { customElement, property } from "lit/decorators.js";
|
|
4
3
|
//#region src/components/spinner/pk-spinner.styles.ts
|
|
5
4
|
var pkSpinnerStyles = [hostDisplayInlineBlock, css`
|
|
6
5
|
@layer pk-component {
|
|
@@ -145,4 +144,4 @@ PkSpinner = __decorate([customElement("pk-spinner")], PkSpinner);
|
|
|
145
144
|
//#endregion
|
|
146
145
|
export { PkSpinner as t };
|
|
147
146
|
|
|
148
|
-
//# sourceMappingURL=pk-spinner-
|
|
147
|
+
//# sourceMappingURL=pk-spinner-DweuYJ_Z.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pk-spinner-
|
|
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,6 +1,5 @@
|
|
|
1
|
-
import { n as PkElement, t as __decorate } from "./decorate-
|
|
1
|
+
import { i as property, n as PkElement, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
|
|
2
2
|
import { css, html, nothing } from "lit";
|
|
3
|
-
import { customElement, property } from "lit/decorators.js";
|
|
4
3
|
//#region src/components/status/pk-status.styles.ts
|
|
5
4
|
var pkStatusStyles = css`
|
|
6
5
|
@layer pk-component {
|
|
@@ -89,4 +88,4 @@ PkStatus = __decorate([customElement("pk-status")], PkStatus);
|
|
|
89
88
|
//#endregion
|
|
90
89
|
export { PkStatus as t };
|
|
91
90
|
|
|
92
|
-
//# sourceMappingURL=pk-status-
|
|
91
|
+
//# sourceMappingURL=pk-status-D1IzTSI2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pk-status-
|
|
1
|
+
{"version":3,"file":"pk-status-D1IzTSI2.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,6 +1,6 @@
|
|
|
1
|
-
import { n as PkElement, t as __decorate } from "./decorate-
|
|
1
|
+
import { n as PkElement, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
|
|
2
2
|
import { css, html, nothing } from "lit";
|
|
3
|
-
import {
|
|
3
|
+
import { property } from "lit/decorators.js";
|
|
4
4
|
//#region src/components/tabs/pk-tab-base.ts
|
|
5
5
|
/** Shared tab trigger behaviour for all tab variants. */
|
|
6
6
|
var PkTabBase = class extends PkElement {
|
|
@@ -262,4 +262,4 @@ PkTab = __decorate([customElement("pk-tab")], PkTab);
|
|
|
262
262
|
//#endregion
|
|
263
263
|
export { PkTab as t };
|
|
264
264
|
|
|
265
|
-
//# sourceMappingURL=pk-tab-
|
|
265
|
+
//# sourceMappingURL=pk-tab-2MHunhlF.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pk-tab-f1OLMVXs.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 'lit/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
|
+
{"version":3,"file":"pk-tab-2MHunhlF.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,6 +1,5 @@
|
|
|
1
|
-
import { n as PkElement, t as __decorate } from "./decorate-
|
|
1
|
+
import { n as PkElement, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
|
|
2
2
|
import { css, html } from "lit";
|
|
3
|
-
import { customElement } from "lit/decorators.js";
|
|
4
3
|
//#region src/components/tabs/pk-tab-heading.styles.ts
|
|
5
4
|
var pkTabHeadingStyles = css`
|
|
6
5
|
@layer pk-component {
|
|
@@ -47,4 +46,4 @@ PkTabHeading = __decorate([customElement("pk-tab-heading")], PkTabHeading);
|
|
|
47
46
|
//#endregion
|
|
48
47
|
export { PkTabHeading as t };
|
|
49
48
|
|
|
50
|
-
//# sourceMappingURL=pk-tab-heading-
|
|
49
|
+
//# sourceMappingURL=pk-tab-heading-BV6m_sT-.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pk-tab-heading-BV6m_sT-.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,6 +1,6 @@
|
|
|
1
|
-
import { n as PkElement, t as __decorate } from "./decorate-
|
|
1
|
+
import { n as PkElement, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
|
|
2
2
|
import { css, html, nothing } from "lit";
|
|
3
|
-
import {
|
|
3
|
+
import { property } from "lit/decorators.js";
|
|
4
4
|
//#region src/components/tabs/pk-tab-panel-base.ts
|
|
5
5
|
/** Shared tab panel behaviour for all tab variants. */
|
|
6
6
|
var PkTabPanelBase = class extends PkElement {
|
|
@@ -83,4 +83,4 @@ PkTabPanel = __decorate([customElement("pk-tab-panel")], PkTabPanel);
|
|
|
83
83
|
//#endregion
|
|
84
84
|
export { PkTabPanel as t };
|
|
85
85
|
|
|
86
|
-
//# sourceMappingURL=pk-tab-panel-
|
|
86
|
+
//# sourceMappingURL=pk-tab-panel-C6FxQw9q.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pk-tab-panel-
|
|
1
|
+
{"version":3,"file":"pk-tab-panel-C6FxQw9q.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"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import { n as PkElement, t as __decorate } from "./decorate-
|
|
1
|
+
import { i as property, n as PkElement, o as state, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
|
|
2
2
|
import { i as uniqueId } from "./focus-aa5dlv8k.js";
|
|
3
3
|
import { css, html, nothing } from "lit";
|
|
4
|
-
import { customElement, property, state } from "lit/decorators.js";
|
|
5
4
|
//#region src/components/tabs/pk-tabs.styles.ts
|
|
6
5
|
/**
|
|
7
6
|
* Variant tokens are defined on `pk-tabs` and inherited by slotted
|
|
@@ -619,4 +618,4 @@ PkTabs = __decorate([customElement("pk-tabs")], PkTabs);
|
|
|
619
618
|
//#endregion
|
|
620
619
|
export { PkTabs as t };
|
|
621
620
|
|
|
622
|
-
//# sourceMappingURL=pk-tabs-
|
|
621
|
+
//# sourceMappingURL=pk-tabs-BTE63uK9.js.map
|